/* Night Heron Tattoo · sample site · "Concrete and ink" */
:root{
  --concrete:#e2e2df; --paper:#f2f2ef; --ink:#0b0b0b; --ink-2:#3a3a38; --muted:#5b5b58;
  --rule:rgb(11 11 11/.16); --rule-ui:#7a7a76;
  --night:#0b0b0b; --on-night:#efefec; --muted-night:#9d9d99; --rule-night:rgb(239 239 236/.18);
  --red:#b8222a; --red-night:#e0453a; --focus:var(--ink);
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,2vw,28px); --gap:clamp(12px,1.6vw,24px); --secy:clamp(96px,12vw,176px);
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
  --strip-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--ink) var(--concrete);scroll-padding-top:16px}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);font-stretch:100%;overflow-x:clip;-webkit-font-smoothing:antialiased;caret-color:var(--red)}
::selection{background:var(--ink);color:var(--concrete)}
.night ::selection{background:var(--on-night);color:var(--ink)}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.night :focus-visible,.dock :focus-visible{--focus:var(--on-night)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--concrete);padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}
.i{width:20px;height:20px;flex:none}
[hidden]{display:none!important}

/* type */
.display{font:800 clamp(4rem,21.5vw - .5rem,15rem)/.8 var(--sans);font-stretch:125%;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap}
.h2{font:800 clamp(3rem,12.5vw,11rem)/.82 var(--sans);font-stretch:125%;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.h2--stack{white-space:normal}
.h3{font:700 clamp(1.5rem,1.2rem + 1.4vw,2.5rem)/1.05 var(--sans);font-stretch:112%;letter-spacing:-.02em}
.h3--big{font-size:clamp(2.25rem,1.4rem + 3.6vw,5rem);font-weight:800;font-stretch:118%;line-height:.92;letter-spacing:-.035em;text-transform:uppercase}
.lead{font:500 clamp(1.125rem,1rem + .6vw,1.5rem)/1.35 var(--sans);max-width:34ch}
.label{font:700 .8125rem/1.2 var(--sans);letter-spacing:.02em;text-transform:uppercase}
@media (min-width:768px){.label{font-size:.75rem}}
.data{font:500 .875rem/1.45 var(--mono);font-variant-numeric:tabular-nums}
p{max-width:62ch;text-wrap:pretty}
h2,h3{text-wrap:balance}
.muted{color:var(--muted)}
.night .muted{color:var(--muted-night)}
.center{text-align:center;margin-inline:auto}
.cap{font:400 .8125rem/1.4 var(--mono);color:var(--muted);margin-top:8px}
.cap--night{color:var(--muted-night)}
.tag{display:inline-block;vertical-align:.15em;font:500 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border:1px solid var(--rule-ui);color:var(--muted)}
.tag--night{border-color:var(--rule-night);color:var(--muted-night)}

/* links + buttons */
.tlink{display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.25em;text-decoration-color:var(--rule-ui);background:none;border:0;padding:0;font-weight:600;min-height:44px}
.tlink .i{width:18px;height:18px;transition:transform .2s var(--out)}
.tlink--night{text-decoration-color:var(--rule-night)}
@media (hover:hover){.tlink:hover{text-decoration-color:currentColor}.tlink:hover .i{transform:translateX(3px)}}
.btn{position:relative;display:inline-flex;align-items:stretch;min-height:56px;background:var(--ink);color:var(--concrete);text-decoration:none;border:0;padding:0;font:700 .8125rem/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;isolation:isolate;overflow:hidden;transition:transform .08s}
.btn>span:first-child{display:flex;align-items:center;padding:0 22px}
.btn__cell{display:grid;place-items:center;width:56px;border-left:1px solid rgb(255 255 255/.24);overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:inset(100% 0 0 0);transition:clip-path .38s var(--out);z-index:-1}
.btn:active{transform:scale(.98)}
@media (hover:hover){.btn:hover::before{clip-path:inset(0)}.btn:hover .btn__cell .i{animation:arr .3s var(--out)}}
@keyframes arr{0%{transform:none}49%{transform:translate(120%,-120%)}50%{transform:translate(-120%,120%)}100%{transform:none}}
.btn--wide{width:100%;justify-content:space-between}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost .btn__cell{border-left-color:var(--rule-ui)}
.btn--ghost::before{background:var(--ink)}
@media (hover:hover){.btn--ghost:hover{color:var(--concrete)}}
.btn--night{background:var(--on-night);color:var(--ink)}
.btn--night .btn__cell{border-left-color:rgb(11 11 11/.2)}
@media (hover:hover){.btn--night:hover{color:#fff}}

/* NOSITE strip (standard for sample sites) */
.nosite-strip{background:#111113;color:#fff;font:400 13px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif;padding:8px 16px;text-align:center;position:relative;z-index:5}
.nosite-strip a{color:#c9f55b;text-decoration:none;display:inline-block;padding:14px;margin:-14px}
.nosite-strip a:hover{text-decoration:underline}

/* dock + menu */
.dock{position:fixed;top:12px;right:12px;z-index:40;display:flex;gap:4px;transform:translateY(-140%);transition:transform .32s var(--out)}
.dock.is-on{transform:none}
.dock__btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:var(--concrete);color:var(--ink);border:1px solid var(--ink);font:700 .75rem/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;text-decoration:none}
.dock__btn--ink{background:var(--ink);color:var(--concrete)}
.dock__btn .i{width:16px;height:16px}
.menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--on-night);padding:72px var(--pad) 32px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.menu ul{display:grid;gap:4px}
.menu a{font:800 clamp(2.25rem,9vw,5rem)/1 var(--sans);font-stretch:125%;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none;display:block;padding:4px 0}
@media (hover:hover){.menu a:hover{color:var(--red-night)}}
.menu__close{position:absolute;top:12px;right:12px;height:44px;padding:0 16px;background:var(--on-night);color:var(--ink);border:0;font:700 .75rem/1 var(--sans);text-transform:uppercase}
.menu .data{color:var(--muted-night);margin-top:32px}

/* hero */
.hero{position:relative;min-height:calc(100svh - var(--strip-h));display:flex;flex-direction:column;overflow-x:clip}
.top{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:12px var(--pad);min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px}
.brand__mark{width:auto;height:38px;aspect-ratio:95/200;flex:none;color:var(--ink)}
.brand__name{white-space:nowrap}
.brand__meta{display:none;color:var(--muted)}
.top__nav{display:none}
.top__cta{display:inline-flex;align-items:center;gap:6px;text-decoration:none;min-height:44px}
.top__cta .i{width:16px;height:16px}
@media (min-width:1024px){
  .top{grid-template-columns:1fr auto 1fr;min-height:72px}
  .brand__meta{display:block;margin-left:12px}
  .top__nav{display:flex;gap:28px}
  .top__nav a{text-decoration:none;display:inline-block;padding:12px 0;position:relative}
  .top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--out)}
  .top__nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .top__cta{justify-self:end}
}
.hero__stage{position:relative;flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(8px,3vw,40px) var(--pad) 0;align-content:start}
.hero__word{grid-column:1/-1;position:relative;z-index:1;margin-left:-.04em}
.line{display:block;overflow:hidden;padding-bottom:.02em}
.line__in{display:block}
.line--step{padding-left:0}
.hero__obj{grid-column:5/-1;margin:-1.5vw 0 0;position:relative;z-index:2;justify-self:end;width:min(62vw,360px)}
.hero__objclip{overflow:hidden;aspect-ratio:4/5;background:#cfcfcb}
.hero__objclip img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.hero__obj .cap{text-align:right}
.hero__copy{grid-column:1/-1;padding:28px 0 32px;display:grid;gap:24px;align-content:start}
.hero__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.hero__btns .btn{flex:1 1 100%;justify-content:space-between}
@media (min-width:600px){.hero__btns .btn{flex:0 0 auto}}
@media (min-width:1024px){
  .line--step{padding-left:calc(100% / 12 * .55)}
  /* the frame sits under the title, right of the lead: HERON fills the row at 1024 and runs to ~78% at 1440, so beside it they would cross */
  .hero__obj{grid-column:8/-1;grid-row:2;align-self:start;justify-self:end;width:clamp(200px,15vw,300px);margin:40px 0 0}
  .hero__obj.has-works{margin-bottom:68px}
  .hero__copy{grid-column:1/6;grid-row:2;padding:40px 0}
}
.windows{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0}
.windows::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform:scaleX(var(--line,1));transform-origin:left;z-index:1}
.windows__c{overflow:hidden}
.windows__c{padding:14px var(--pad) 16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;gap:6px;align-content:start;text-decoration:none;min-height:72px;position:relative;isolation:isolate}
.windows__c:nth-child(2n){border-right:0}
.windows__c .data{font-size:.9375rem}
.windows__go{background:var(--ink);color:var(--concrete)}
.windows__go .data{display:flex;align-items:center;gap:6px}
.windows__go .i{width:16px;height:16px}
.windows__go::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:inset(100% 0 0 0);transition:clip-path .38s var(--out);z-index:-1}
@media (hover:hover){.windows__go:hover::before{clip-path:inset(0)}}
@media (min-width:1024px){.windows{grid-template-columns:repeat(4,1fr)}.windows__c{border-bottom:0}.windows__c:nth-child(2n){border-right:1px solid var(--rule)}.windows__c:last-child{border-right:0}}
.hero__note{padding:10px var(--pad);color:var(--muted);font-size:.75rem}

/* sections */
.sec{position:relative;padding:var(--secy) var(--pad);overflow-x:clip}
.night{background:var(--night);color:var(--on-night)}
.paper{background:var(--paper)}
.sec__head{display:grid;gap:20px;margin-bottom:clamp(40px,6vw,88px)}
@media (min-width:1024px){.sec__head{grid-template-columns:auto 1fr;align-items:end;column-gap:48px}.sec__head .lead,.sec__head .sec__sub{justify-self:end;max-width:36ch}}
.sec__sub{max-width:44ch}
.night .sec__sub{color:var(--muted-night)}
.split-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.split-w>span{display:inline-block}
.tnote{margin-top:32px;border:1.5px dashed var(--rule-ui);padding:14px 16px;font-size:.9375rem;max-width:62ch;display:grid;gap:6px}
.tnote__tag{color:var(--muted)}
.tnote--night{border-color:var(--rule-night)}
.tnote--night .tnote__tag{color:var(--muted-night)}

/* artists */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--rule-ui);border-radius:2px;font:600 .9375rem/1 var(--sans)}
.chip--night{border-color:var(--rule-night);color:var(--on-night)}
.chip[aria-pressed=true]{background:var(--on-night);color:var(--ink);border-color:var(--on-night)}
@media (hover:hover){.chip--night:hover{border-color:var(--on-night)}}
.roster{border-top:1px solid var(--rule-night)}
.ar{position:relative}
.ar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule-night);transform:scaleX(var(--rule,1));transform-origin:left}
.ar__row{width:100%;display:grid;grid-template-columns:1fr 44px;grid-template-areas:"name chev" "styles chev" "status chev";gap:6px 12px;align-items:center;text-align:left;background:none;border:0;padding:20px 0;color:inherit}
.ar__name{grid-area:name;font:800 clamp(2.5rem,7vw,6rem)/.9 var(--sans);font-stretch:118%;letter-spacing:-.04em;text-transform:uppercase;transition:color .25s}
.ar__styles{grid-area:styles;color:var(--muted-night)}
.ar__status{grid-area:status;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar__kind{display:none}
.ar__chev{grid-area:chev;width:28px;height:28px;justify-self:end;transition:transform .35s var(--out)}
.ar__row[aria-expanded=true] .ar__chev{transform:rotate(45deg)}
.ar--guest .ar__name{color:var(--muted-night)}
.st{display:inline-block;width:9px;height:9px;flex:none}
.st--open{background:var(--red-night);border-radius:50%}
.st--wait{border:1.5px solid currentColor;border-radius:50%}
.st--flash{background:currentColor}
.st--guest{border:1.5px dashed currentColor}
@media (min-width:1024px){
  .ar__row{grid-template-columns:5fr 3fr 2.4fr 1.2fr 44px;grid-template-areas:"name styles status kind chev";min-height:150px;padding:16px 0}
  .ar__kind{display:block;grid-area:kind;justify-self:start;border:1px solid var(--rule-night);padding:5px 8px}
  .roster.is-hovering .ar__name{color:var(--muted-night)}
  .roster.is-hovering .ar.is-hot .ar__name{color:var(--on-night)}
}
.ar__more{display:grid;gap:24px;padding:4px 0 40px}
.ar__bio{font:500 1.25rem/1.4 var(--sans);max-width:36ch}
.ar__dl{display:grid;gap:10px;margin:20px 0 24px;color:var(--muted-night)}
.ar__dl dt{color:var(--on-night);text-transform:uppercase;font-size:.75rem;letter-spacing:.04em}
.ar__dl dd{margin:2px 0 0}
.ar__works{display:grid;gap:16px}
.ar__works .clip{aspect-ratio:4/5;overflow:hidden;background:#1d1d1c}
.ar__works img{width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.ar__works{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.ar__more{grid-template-columns:4fr 8fr;gap:var(--gap)}}
.roster__empty{padding:24px 0;color:var(--muted-night)}
.legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:24px;color:var(--muted-night)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.cursor-media{position:fixed;left:0;top:0;width:300px;height:375px;pointer-events:none;z-index:30;overflow:hidden;visibility:hidden;clip-path:inset(50% 50% 50% 50%)}
.cursor-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* request */
.howto{display:grid;gap:0;border-top:1px solid var(--rule);margin-bottom:clamp(40px,5vw,72px)}
.howto li{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--rule)}
.howto li b{display:block}
.howto li>*:not(.data){grid-column:2}
.howto .data{grid-row:1/3;color:var(--muted)}
@media (min-width:1024px){.howto{grid-template-columns:repeat(3,1fr)}.howto li{padding:20px 24px 20px 0;border-bottom:0}.howto li+li{padding-left:24px;border-left:1px solid var(--rule)}}
.req{display:grid;gap:40px}
@media (min-width:1024px){.req{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}}
.req__demo{display:inline-block;border:1px solid var(--rule-ui);padding:6px 10px;margin-bottom:24px;color:var(--muted)}
.req__err{border-left:3px solid var(--red);padding:10px 14px;margin-bottom:24px;background:var(--paper);color:var(--red);font-weight:600}
.step{border:0;margin:0 0 8px;padding:28px 0 32px;border-top:1px solid var(--rule);min-width:0}
.step legend{display:flex;align-items:baseline;gap:14px;padding:0;margin-bottom:18px}
.step legend .data{color:var(--muted)}
.hint{color:var(--muted);font-size:.9375rem;margin-top:10px}
.hint--warn{color:var(--ink-2);border-left:2px solid var(--red);padding-left:10px}
.err{color:var(--red);font-size:.9375rem;font-weight:600;margin-top:10px}
.choices{display:grid;gap:8px}
.choices--3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.choices--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.choices--chips{display:flex;flex-wrap:wrap}
.choices--chips+.choices--chips{margin-top:12px}
.choices--days{display:flex;flex-wrap:wrap;margin-top:16px}
.pick,.chipr,.day{position:relative;display:block}
.pick input,.chipr input,.day input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pick span{display:grid;gap:4px;min-height:64px;padding:12px 14px;border:1px solid var(--rule-ui);border-radius:2px;background:var(--paper);transition:background .15s,color .15s}
.pick b{font-weight:700;font-size:1.0625rem}
.pick small{color:var(--muted)}
.chipr span,.day span{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--rule-ui);border-radius:2px;background:var(--paper);font-weight:600;font-size:.9375rem}
.day span{width:56px;justify-content:center;padding:0}
.pick input:checked+span,.chipr input:checked+span,.day input:checked+span{background:var(--ink);color:var(--concrete);border-color:var(--ink)}
.pick input:checked+span small{color:#c9c9c5}
.pick input:focus-visible+span,.chipr input:focus-visible+span,.day input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.pick:hover span,.chipr:hover span,.day:hover span{border-color:var(--ink)}}
.field{display:grid;gap:8px;margin-top:16px}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;background:var(--paper);border:1px solid var(--rule-ui);border-radius:2px;font-size:1rem}
.field textarea{min-height:120px;resize:vertical}
.field small{text-transform:none;font-weight:400;letter-spacing:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.field [aria-invalid=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.fields2{display:grid;gap:0 16px}
@media (min-width:600px){.fields2{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:18px;min-height:44px}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.check .tlink{min-height:0}
/* body map */
.bodymap__views{display:inline-flex;margin-bottom:12px}
.seg{min-height:44px;padding:0 18px;background:transparent;border:1px solid var(--rule-ui);font:700 .75rem/1 var(--sans);text-transform:uppercase;letter-spacing:.02em}
.seg+.seg{border-left:0}
.seg[aria-pressed=true]{background:var(--ink);color:var(--concrete);border-color:var(--ink)}
.bodymap__figs{display:grid;grid-template-columns:1fr;background:var(--paper);border:1px solid var(--rule);padding:16px}
.bodymap__fig{display:grid;justify-items:center;gap:8px}
.bodymap__fig .label{color:var(--muted)}
.bodymap__figs[data-show=front] [data-fig=back],.bodymap__figs[data-show=back] [data-fig=front]{display:none}
@media (min-width:600px){.bodymap__views{display:none}.bodymap__figs{grid-template-columns:1fr 1fr}.bodymap__figs [data-fig]{display:grid!important}}
.body-map__fig{width:min(100%,200px);height:auto;overflow:visible}
/* size */
.size{display:grid;gap:14px;grid-template-columns:1fr;align-items:center}
.size__read{font:500 clamp(2.75rem,2rem + 3vw,4rem)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.size__range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0}
.size__range::-webkit-slider-runnable-track{height:2px;background:var(--ink)}
.size__range::-moz-range-track{height:2px;background:var(--ink)}
.size__range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--ink);margin-top:-11px;border:0;border-radius:0}
.size__range::-moz-range-thumb{width:24px;height:24px;background:var(--ink);border:0;border-radius:0}
.size__range:active::-webkit-slider-thumb{background:var(--red)}
.size__cmp{width:100%;max-width:360px;background:var(--paper);border:1px solid var(--rule)}
.size__mine{fill:rgb(184 34 42/.08);stroke:var(--red);stroke-width:1;stroke-dasharray:3 2}
.size__said{color:var(--muted)}
@media (min-width:768px){.size__read,.size__range,.size__said{grid-column:1}}
/* refs */
.drop{margin-top:16px}
.drop__btn{position:relative;display:flex;align-items:center;gap:12px;min-height:72px;padding:12px 16px;border:1.5px dashed var(--rule-ui);background:var(--paper);cursor:pointer;font-weight:600}
.drop__btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop__btn:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.drop__btn small{color:var(--muted);font-weight:400;margin-left:6px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.thumbs li{position:relative;width:64px;height:64px}
.thumbs img{width:64px;height:64px;object-fit:cover}
.thumbs button{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border:0;background:var(--ink);color:var(--concrete);font-size:16px;line-height:1}
/* receipt */
.receipt{position:relative}
@media (min-width:1024px){.receipt{position:sticky;top:72px}}
.receipt__paper{position:relative;background:var(--paper);padding:22px 22px 30px;border:1px solid var(--rule);-webkit-mask:radial-gradient(circle at 8px 100%,transparent 6px,#000 6.5px) 0 0/16px 100% repeat-x;mask:radial-gradient(circle at 8px 100%,transparent 6px,#000 6.5px) 0 0/16px 100% repeat-x}
.receipt__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.receipt__top .data{color:var(--muted)}
.receipt__mini{position:absolute;right:16px;top:60px;width:84px;height:auto}
.receipt__mini .receipt__rows{margin-top:6px}
.receipt__rows>div{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--rule-ui);min-height:44px;overflow:hidden}
.receipt__rows>div:nth-child(-n+3){padding-right:56px}
.receipt__rows dt{font:700 .75rem/1.6 var(--sans);text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.receipt__rows dd{font:500 .9375rem/1.4 var(--mono);margin:0;overflow-wrap:anywhere}
.receipt__rows dd.is-empty{color:var(--muted)}
.receipt__rows dd.is-new{box-shadow:inset 0 -2px 0 var(--red)}
.receipt__prog{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:18px}
.receipt__prog i{height:3px;background:var(--rule)}
.receipt__prog i.on{background:var(--ink)}
.receipt__count{margin-top:8px;color:var(--muted)}
.receipt__foot{margin-top:14px;font-weight:600;font-size:.9375rem}
.stamp{position:absolute;right:18px;bottom:34px;display:grid;justify-items:center;padding:10px 14px;color:var(--red);border:3px solid currentColor;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px currentColor;transform:rotate(-7deg);background:rgb(242 242 239/.9)}
.stamp b{font:800 1.375rem/.95 var(--sans);font-stretch:125%;text-transform:uppercase;letter-spacing:-.02em}
.stamp .data{font-size:.75rem;margin-top:4px}
.receipt__done{margin-top:24px;display:grid;gap:14px}
.receipt__done ol{list-style:decimal;padding-left:22px;display:grid;gap:6px}
.receipt__done .note{border-left:3px solid var(--ink);padding-left:12px;font-size:.9375rem}
.rbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:0 var(--pad) env(safe-area-inset-bottom);background:var(--night);color:var(--on-night);border:0;transform:translateY(110%);transition:transform .3s var(--out)}
.rbar.is-on{transform:none}
@media (min-width:1024px){.rbar{display:none!important}}

/* flash */
.flash{display:grid;gap:40px}
.flash__bg{position:absolute;inset:0;width:100%;height:100%;color:var(--on-night);opacity:.07;--paper:var(--night);pointer-events:none}
.flash__bg use{stroke-width:1}
.flash__bill{position:relative;display:grid;gap:18px;align-content:start}
.flash__date{font:800 clamp(2.5rem,2rem + 3vw,4.5rem)/.9 var(--sans);font-stretch:125%;letter-spacing:-.03em;text-transform:uppercase}
.flash__facts{display:grid;gap:8px;border-top:1px solid var(--rule-night);padding-top:16px}
.flash__facts li{padding-bottom:8px;border-bottom:1px solid var(--rule-night)}
.flash__bill .data{color:var(--muted-night)}
@media (min-width:1024px){.flash{grid-template-columns:4fr 8fr;gap:var(--gap)}.flash__bill{position:sticky;top:88px}}
.sheet{position:relative;background:var(--paper);color:var(--ink);padding:clamp(14px,2.5vw,32px);--paper:#f2f2ef}
.sheet__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.sheet__goth{font:700 clamp(2.25rem,4vw,3.5rem)/1 "Grenze Gotisch",serif;letter-spacing:0}
.sheet__grid{display:grid;grid-template-columns:repeat(2,1fr)}
.fl{position:relative;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fl:nth-child(2n){border-right:0}
.fl--mark{grid-column:1/-1;border-right:0;display:grid;justify-items:center;padding:16px 8px 14px;text-align:center}
.fl--mark .fl__art{width:min(60%,200px)}
.fl__btn{width:100%;display:grid;justify-items:center;gap:6px;padding:14px 8px;background:none;border:0;color:inherit;text-align:center;position:relative}
.fl__art{width:100%;max-width:150px;aspect-ratio:1;color:var(--ink)}
.fl__art use{color:var(--ink)}
.fl .data{font-size:.75rem}
.fl__saved{position:absolute;top:8px;left:8px;background:var(--ink);color:var(--paper);padding:4px 6px;opacity:0;transform:translateY(-4px);transition:.2s}
.fl__btn[aria-pressed=true] .fl__saved{opacity:1;transform:none}
.fl__btn[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}
.fl__btn:disabled{cursor:default}
.fl--claimed .fl__art{opacity:.3}
.claimed{position:absolute;left:50%;top:40%;translate:-50% -50%;rotate:-8deg;color:var(--red);border:2.5px solid currentColor;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px currentColor;padding:6px 10px;font:800 1rem/1 var(--sans);font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;background:rgb(242 242 239/.85);pointer-events:none}
@media (hover:hover){.fl__btn:not(:disabled):hover .fl__art{transform:rotate(-3deg)}.fl__art{transition:transform .3s var(--out)}}
@media (min-width:768px){.sheet__grid{grid-template-columns:repeat(3,1fr)}.fl:nth-child(2n){border-right:1px solid var(--rule)}.fl:nth-child(3n){border-right:0}.fl--mark{grid-column:auto;border-right:1px solid var(--rule)!important}.fl--mark .fl__art{width:100%;max-width:150px}.fl .data{font-size:.8125rem}}

/* rules spec */
.spec{border-top:1px solid var(--ink)}
.spec li{position:relative;display:grid;gap:8px;padding:22px 0;isolation:isolate}
.spec li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform:scaleX(var(--rule,1));transform-origin:left}
.spec h3{font:700 1.375rem/1.1 var(--sans);font-stretch:112%;letter-spacing:-.01em}
.spec p{font-size:1.0625rem}
.spec .data{color:var(--muted)}
@media (min-width:1024px){
  .spec li{grid-template-columns:4fr 6fr 2fr;gap:var(--gap);align-items:baseline;min-height:110px;padding:28px 12px}
  .spec p{font-size:1.1875rem}
  .spec .data{justify-self:end;text-align:right}
  .spec li::before{content:"";position:absolute;inset:0;background:var(--ink);clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--out);z-index:-1}
  .spec li:hover::before{clip-path:inset(0)}
  .spec li:hover{color:var(--concrete)}
  .spec li:hover .data{color:#bdbdb9}
}

/* prices */
.prices .sec__sub{margin:20px auto 40px}
.board{max-width:680px;margin:0 auto}
.board>div{display:flex;align-items:baseline;gap:12px;padding:14px 0}
.board dt{font:700 clamp(1.125rem,1rem + .6vw,1.5rem)/1.2 var(--sans);font-stretch:108%}
.board>div::after{content:"";order:2;flex:1;border-bottom:2px dotted var(--rule-ui);transform:translateY(-4px) scaleX(var(--lead,1));transform-origin:left;min-width:16px}
.board dd{order:3;margin:0;font-size:1.0625rem;text-align:right}
.prices__why{margin:36px auto 8px;max-width:52ch;color:var(--ink-2)}

/* aftercare */
.h2--care{font-size:clamp(3rem,12.5vw,11rem)}
.scale{position:relative;display:grid;gap:0;margin-left:6px}
.scale::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink);transform:scaleY(var(--draw,1));transform-origin:top}
.scale__seg{position:relative;padding:0 0 32px 22px}
.scale__seg::before{content:"";position:absolute;left:-6px;top:10px;width:14px;height:14px;background:var(--ink);transform:scale(var(--mark,1))}
.scale__n{font:800 clamp(3rem,2rem + 4vw,4.5rem)/.9 var(--sans);font-stretch:125%;letter-spacing:-.04em}
.scale__seg .label{color:var(--muted);margin:8px 0 14px}
.scale__seg ul{display:grid;gap:8px;font-size:1.0625rem}
.scale__seg li{padding-left:16px;position:relative}
.scale__seg li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1.5px;background:var(--ink)}
@media (min-width:1024px){
  .scale{grid-template-columns:10fr 12fr 13fr;margin:0}
  .scale::before{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;transform:scaleX(var(--draw,1));transform-origin:left}
  .scale__seg{padding:28px 32px 0 0}
  .scale__seg+.scale__seg{padding-left:24px;border-left:1px solid var(--rule)}
  .scale__seg::before{left:0;top:-8px}
  .scale__seg+.scale__seg::before{left:-7px}
  .scale__seg ul{font-size:1.125rem}
}
.care__warn{margin-top:40px;border-left:3px solid var(--red);padding-left:14px;max-width:70ch}

/* clean */
.clean{display:grid;gap:40px}
.clean__fig .clip{aspect-ratio:4/5;overflow:hidden;background:#cfcfcb}
.clean__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.clean__txt{display:grid;gap:28px;align-content:start}
.ticks{display:grid;border-top:1px solid var(--rule)}
.ticks li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ticks .i{width:22px;height:22px;margin-top:2px}
.permit{border:1px solid var(--ink);padding:16px 18px;display:grid;gap:10px}
.permit .data{color:var(--ink-2)}
@media (min-width:1024px){.clean{grid-template-columns:5fr 7fr;gap:calc(var(--gap) * 3)}.clean__fig{max-width:520px}}

/* faq */
.faq{display:grid;gap:32px}
@media (min-width:1024px){.faq{grid-template-columns:4fr 8fr;gap:var(--gap)}.faq__h{position:sticky;top:88px;align-self:start}}
.acc{border-top:1px solid var(--ink)}
.acc__i{border-bottom:1px solid var(--rule)}
.acc h3{font:inherit}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:68px;padding:12px 0;background:none;border:0;text-align:left;font:600 1.25rem/1.25 var(--sans)}
.acc__plus{position:relative;width:18px;height:18px;flex:none}
.acc__plus::before,.acc__plus::after{content:"";position:absolute;background:currentColor;left:0;right:0;top:50%;height:1.6px;margin-top:-.8px}
.acc__plus::after{transform:rotate(90deg);transition:transform .3s var(--out)}
.acc button[aria-expanded=true] .acc__plus::after{transform:rotate(90deg) scaleX(0)}
.acc__a{padding:0 0 24px}
.acc__a p{font-size:1.0625rem}

/* visit */
.visit{padding-bottom:0;overflow:hidden}
.ribbon{position:relative;display:flex;align-items:stretch;justify-content:space-between;border-top:1px solid var(--rule-night);border-bottom:1px solid var(--rule-night);min-height:clamp(110px,14vw,200px);text-decoration:none;isolation:isolate;margin:0 calc(var(--pad) * -1)}
.ribbon__t{display:flex;align-items:center;padding:0 var(--pad);font:800 clamp(2rem,8.6vw,9rem)/.9 var(--sans);font-stretch:125%;letter-spacing:-.04em;text-transform:uppercase}
.ribbon__a{display:grid;place-items:center;width:clamp(72px,14vw,200px);border-left:1px solid var(--rule-night);overflow:hidden}
.ribbon__a .i{width:40%;height:40%}
.ribbon::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:inset(100% 0 0 0);transition:clip-path .5s var(--out);z-index:-1}
@media (hover:hover){.ribbon:hover::before{clip-path:inset(0)}.ribbon:hover .ribbon__a .i{animation:arr .4s var(--out)}}
.facts{display:grid;gap:40px;padding:64px 0}
.facts h2{margin-bottom:14px;display:flex;gap:10px;align-items:center}
.facts p{color:var(--on-night)}
.hours{border-collapse:collapse;width:100%;max-width:420px}
.hours th,.hours td{text-align:left;padding:10px 0;border-bottom:1px solid var(--rule-night);font-weight:500;vertical-align:top}
.hours th{padding-right:16px;white-space:nowrap}
.hours tr.is-today{color:var(--on-night)}
.hours tr.is-today th::before{content:"";display:inline-block;width:8px;height:8px;background:var(--red-night);border-radius:50%;margin-right:8px;vertical-align:.1em}
@media (min-width:1024px){.facts{grid-template-columns:repeat(3,1fr);gap:var(--gap)}}
.foot{display:grid;gap:10px;padding:28px 0;border-top:1px solid var(--rule-night);font-size:.9375rem}
.foot p{max-width:90ch}
.sig{color:var(--on-night);margin:24px 0 0 -.04em;height:.62em;overflow:hidden;font-size:clamp(2.5rem,12.2vw,15rem)}

/* reveal helpers (JS sets hidden states only) */
.clip{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff}
  body>*:not(main),main>*:not(#aftercare),.nosite-strip,.dock,.rbar,.skip{display:none!important}
  #aftercare{padding:0;background:#fff}
  #aftercare .btn,#aftercare .tnote{display:none}
}

.sec__head .btn{justify-self:start}
.sheet .muted{color:var(--muted)}
@media (min-width:768px) and (max-width:1023px){.hero__obj{grid-column:7/-1;margin-top:-9vw}}
.flash__photo .clip{aspect-ratio:3/2;overflow:hidden;background:#1d1d1c}
.flash__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.visit__photo{margin:56px 0 0}
.visit__photo .clip{aspect-ratio:21/9;overflow:hidden;background:#1d1d1c}
.visit__photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.visit__photo .clip{aspect-ratio:3/2}}

/* motion helpers (states set by JS only) */
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;clip-path:inset(-1em -1em 0 -1em);vertical-align:top}
.ch>span{display:inline-block}
.ticks .i{stroke-dasharray:30;stroke-dashoffset:calc(var(--tick,0) * 30)}
.ar__works .clip{position:relative}
.ar__works .clip::after{content:"";position:absolute;left:0;right:0;top:var(--needle,100%);height:2px;margin-top:-2px;background:var(--red-night);opacity:var(--needle-o,0);pointer-events:none}
@media (hover:hover){.fl__btn:not(:disabled):hover .fl__art{transform:translateY(-6px) rotate(-2.5deg)}}
.lb{border:0;padding:16px;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:rgb(11 11 11/var(--shade,.82));display:none;place-items:center;overflow:auto}
.lb[open]{display:grid}
.lb::backdrop{background:transparent}
.lb__paper{background:var(--paper);color:var(--ink);width:min(92vw,560px);padding:clamp(16px,3vw,32px);display:grid;gap:16px;--paper:#f2f2ef}
.lb__art .fl__art{width:100%;max-width:none;aspect-ratio:1}
.lb__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.hero__objclip{position:relative}
.hero__objclip::after{content:"";position:absolute;inset:0;background:#0b0b0b;opacity:var(--dark,0);pointer-events:none}

/* placement chart */
.body__fill,.body__head{fill:#e9e9e5}
.body__outline{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round;pointer-events:none}
.body__contour{fill:none;stroke:var(--ink);stroke-width:.7;opacity:.4;pointer-events:none}
.hatch__bg{fill:rgb(184 34 42/.1)}
.hatch__ln{stroke:var(--red);stroke-width:1.6}
.receipt__mini .body__outline{stroke-width:2.6}
.receipt__mini .body__contour{display:none}
.bodymap__pick{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:600}
.bodymap__pick::before{content:"";width:10px;height:10px;background:var(--red);flex:none}
/* size scene */
.size__scene{margin:0}
.size__cmp{width:100%;max-width:520px;background:var(--paper);border:1px solid var(--rule)}
.size__arm{fill:#e9e9e5;stroke:var(--ink);stroke-width:1.2}
.size__armline{fill:none;stroke:var(--ink);stroke-width:.6;opacity:.25}
.size__ruler path{fill:none;stroke:var(--ink);stroke-width:1}
.size__mine{fill:none;stroke:var(--red);stroke-width:1.2;stroke-dasharray:4 3}
@media (min-width:768px){.size{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}.size__scene{grid-column:2;grid-row:1/4}}
.size__range{border:0;padding:0;outline-offset:6px}

/* zones: full-width, red body edge inside the chosen zone */
.zone__hit{fill:transparent;cursor:pointer;transition:fill .2s}
.zone__cut{fill:none;stroke:var(--ink);stroke-width:.5;stroke-dasharray:2 2.5;opacity:.28;pointer-events:none}
.zone__edge{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .2s}
@media (hover:hover){.zone:not(.zone--mini):hover .zone__hit{fill:rgb(184 34 42/.07)}.zone:not(.zone--mini):hover .zone__edge{opacity:1}}
.zone.is-on .zone__hit{fill:var(--hatch)}
.zone.is-on .zone__edge{opacity:1}
.zone--mini .zone__hit{cursor:default}
.zone--mini .zone__edge{stroke-width:4}
/* size scene, ink style */
.size__ruler text,.size__objs text{font:500 8.5px var(--mono);fill:var(--muted);text-anchor:middle}
.size__objs circle,.size__objs rect,.size__objs path{fill:none;stroke:var(--ink);stroke-width:1.3}
.size__objs .thin{stroke-width:.7}
.size__objs rect:first-child{fill:#f7f7f4}
.size__ink{mix-blend-mode:multiply;opacity:.86}
.size__design{color:#1b1b1a;--paper:transparent}

/* flash menu: drawn designs on paper */
img.fl__art{display:block;width:auto;max-width:100%;height:clamp(150px,17vw,230px);aspect-ratio:auto;object-fit:contain;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.fl--claimed img.fl__art{opacity:.45;filter:grayscale(.6)}
.fl__heron{height:clamp(110px,12vw,150px);width:auto;aspect-ratio:1}
.fl--mark{align-content:center}
.sheet__more{display:block;width:100%;margin-top:0;padding:14px 8px;background:none;border:0;border-top:1px solid var(--rule);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sheet__more:hover{color:var(--red)}
.sheet.is-all .fl--mark{grid-column:1/-1}
@media (min-width:768px){.sheet.is-all .fl--mark{grid-column:auto}}
.lb__art{display:grid;place-items:center}
.lb__art img.fl__art{height:min(62vh,calc(var(--h) * 2));max-width:100%}
@media (max-width:767px){.sheet:not(.is-all) .fl--mark{grid-column:auto;border-right:0}.sheet:not(.is-all) .fl--mark{border-right:1px solid var(--rule)}.sheet.is-all .fl:nth-child(n+6):nth-child(2n){border-right:1px solid var(--rule)}.sheet.is-all .fl:nth-child(n+6):nth-child(2n+1){border-right:0}}

/* ---------- placement plate: mannequin photo, zones traced on it ---------- */
.bodymap__stage{position:relative;width:min(100%,560px);aspect-ratio:1607/1774;background:#c5c3c2;overflow:hidden}
.bodymap__img{position:absolute;inset:0;width:100%;height:100%;display:block}
.bodymap__stage .body-map__fig{position:absolute;inset:0;width:100%;height:100%}
.bodymap__plate{position:absolute;left:12px;top:10px;z-index:1;color:#3d3d3b;font-size:.6875rem;letter-spacing:.04em}
.bodymap__stage .zone__hit{fill:transparent;cursor:pointer;transition:fill .25s}
.bodymap__stage .zone__cut{fill:none;stroke:#0b0b0b;stroke-width:.6;vector-effect:non-scaling-stroke;stroke-dasharray:2 3;opacity:.22;pointer-events:none}
.bodymap__stage .zone__edge{fill:none;stroke:var(--red);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;opacity:0;pointer-events:none;transition:opacity .25s}
.bodymap__stage .body__zones{mix-blend-mode:multiply}
@media (hover:hover){.bodymap__stage .zone:hover .zone__hit{fill:rgb(184 34 42/.16)}.bodymap__stage .zone:hover .zone__edge{opacity:.75}}
.bodymap__stage .zone.is-on .zone__hit{fill:var(--hatch)}
.bodymap__stage .zone.is-on .zone__edge{opacity:1}
.bodymap__stage .hatch__bg{fill:rgb(184 34 42/.14)}
.bodymap__stage .hatch__ln{stroke:var(--red);stroke-width:5;opacity:.55}
.bodymap__lead{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.bodymap__lead path{fill:none;stroke:#0b0b0b;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
.bodymap__lead circle{fill:var(--red)}
.bodymap__lead:not(.is-on){display:none}
.bodymap__callout{position:absolute;margin:0;pointer-events:none;white-space:nowrap}
.bodymap__callout .data{display:inline-block;background:var(--paper);color:var(--ink);padding:5px 8px;font-size:.75rem;border:1px solid #0b0b0b}
.bodymap__callout:empty,.bodymap__callout[hidden]{display:none}
@media (max-width:767px){.bodymap__lead,.bodymap__callout{display:none!important}}
.receipt__mini{position:absolute;right:16px;top:58px;width:44px;height:auto}
.receipt__mini .body__fill{fill:#d6d6d2}
.receipt__mini .body__outline{fill:none;stroke:#0b0b0b;stroke-width:14}
.receipt__mini .zone__hit{fill:transparent}
.receipt__mini .zone.is-on .zone__hit{fill:var(--red)}
.receipt__mini .zone__edge{display:none}

/* ---------- try-on: ink on a real forearm ---------- */
.try{display:grid;gap:20px}
.try__scene{background:#cccccc;display:grid}
.try__arm{position:relative;aspect-ratio:1672/710;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.try__arm img{display:block;width:100%;height:100%;pointer-events:none;-webkit-mask:linear-gradient(transparent,#000 8%,#000 86%,transparent);mask:linear-gradient(transparent,#000 8%,#000 86%,transparent)}
.try__ink{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;filter:blur(.4px);pointer-events:none}
.try__frame{position:absolute;left:0;top:0;transform-origin:50% 50%;cursor:grab;outline:none}
.try.is-active .try__frame{cursor:grabbing}
.try__frame::before{content:"";position:absolute;inset:-6px;border:1px dashed rgb(11 11 11/.55);opacity:0;transition:opacity .25s}
.try__frame i{position:absolute;width:10px;height:10px;border:0 solid #0b0b0b;opacity:.55}
.try__frame i:nth-of-type(1){left:-6px;top:-6px;border-width:1.5px 0 0 1.5px}
.try__frame i:nth-of-type(2){right:-6px;top:-6px;border-width:1.5px 1.5px 0 0}
.try__frame i:nth-of-type(3){left:-6px;bottom:-6px;border-width:0 0 1.5px 1.5px}
.try__frame i:nth-of-type(4){right:-6px;bottom:-6px;border-width:0 1.5px 1.5px 0}
.try__rot{position:absolute;left:50%;top:-34px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--paper);border:1.5px solid #0b0b0b;cursor:grab;opacity:0;transition:opacity .25s;touch-action:none}
.try__rot::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;background:#0b0b0b}
.try__frame:hover::before,.try__frame:focus-visible::before,.try.is-active .try__frame::before,.try__frame:hover .try__rot,.try__frame:focus-visible .try__rot,.try.is-active .try__rot{opacity:1}
.try__frame:focus-visible::before{border:2px solid var(--red);inset:-8px}
.try__objs{display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,4%,40px);padding:6px 16px 14px}
.try__obj{margin:0;display:grid;justify-items:center;gap:6px}
.try__obj img{display:block;height:auto;-webkit-mask:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);mask-composite:intersect}
.try__obj figcaption{font-size:.6875rem;line-height:1.3;color:#3d3d3b;text-align:center}
.try__side{display:grid;gap:14px;align-content:start}
.try__read{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.try__picks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.try__pick{position:relative;aspect-ratio:3/4;align-self:start;background:#f2f2ef;border:1px solid var(--rule);padding:4px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.try__pick img{width:100%;height:100%;object-fit:contain}
.try__pick[aria-pressed=true]{border:2px solid #0b0b0b;padding:3px}
.try__pick:hover{border-color:#0b0b0b}
.try__own{text-align:center;font-size:.6875rem;line-height:1.2}
.try__own:focus-within{outline:2px solid var(--red);outline-offset:2px}
@media (min-width:768px){.try__side{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:28px}.try__read,.try .size__range{grid-column:1}.try__picks{grid-column:2;grid-row:1/3}.try__side .hint,.try__side .tlink{grid-column:1/-1}}
@media (max-width:767px){.try__picks{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}.try__pick{flex:0 0 64px}.try__objs{gap:12px;padding:4px 10px 10px}.try__obj figcaption{font-size:.625rem}}

/* ---------- hero: the back grows to the screen, the artists slide over it ---------- */
.hero__full{position:absolute;left:0;top:0;width:100%;height:100vh;z-index:3;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;background:#0b0b0b}
.hero__full::after{content:"";position:absolute;inset:0;background:#0b0b0b;opacity:var(--dark,0)}
.hero__full img{position:absolute;left:50%;top:50%;width:max(100%,66.667vh);height:auto;aspect-ratio:1000/1500;translate:-50% -50%;max-width:none;filter:contrast(1.05)}
.hero__credit{position:absolute;left:var(--pad);bottom:clamp(28px,6vh,64px);z-index:1;color:var(--on-night);display:grid;gap:4px;font-size:.8125rem}
.hero__credit p{margin:0;overflow:hidden}
.hero__credit p span{display:block}
.hero__rule{display:block;width:180px;height:1px;background:currentColor;transform-origin:0 50%;margin-bottom:10px}
.hero-spacer{display:none}
.is-hero-pin .hero-spacer{display:block;height:120vh}
.is-hero-pin .hero{z-index:0}
.is-hero-pin .artists{position:relative;z-index:2}
.hero__cap{display:grid;gap:2px}
.hero__cap span:not(:last-child){color:var(--ink)}
@media (min-width:1024px){.hero__cap span:not(:last-child){display:none}}
@media (max-width:1023px){
  .hero__obj{position:relative;grid-column:1/-1;justify-self:stretch;width:auto;margin:18px calc(var(--pad) * -1) 0}
  .hero__objclip{aspect-ratio:4/5}
  .hero__cap{padding:8px var(--pad) 0;text-align:left!important}
}

/* claimed: a small rubber stamp in the corner, the caption stays readable */
.sheet .claimed{left:auto;top:10px;right:8px;translate:none;rotate:-9deg;padding:3px 6px;font-size:.625rem;letter-spacing:.06em;border-width:1.5px;box-shadow:none;background:none;filter:url(#stamp-ink);opacity:.9;z-index:1}
.sheet .claimed span{display:block}
.fl--claimed img.fl__art{opacity:.5;filter:grayscale(.7)}
.fl--claimed .fl__btn .data{color:var(--muted)}
.fl--claimed .fl__btn .data b{text-decoration:line-through;text-decoration-thickness:1px}

/* request: one step at a time */
.is-wizard .step{display:none}
.is-wizard .step.is-cur{display:block;outline:none}
.wiz{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;padding:18px 0 8px;border-top:1px solid var(--rule)}
.wiz[hidden]{display:none}
.wiz__count{margin:0 auto 0 0;color:var(--muted);font-variant-numeric:tabular-nums}
.wiz__back[hidden]{display:none}
.is-wizard:not(.is-last) [data-send],.is-wizard:not(.is-last) [data-send] + .hint{display:none}
.is-wizard.is-last .wiz__next{display:none}

/* ---------- page length: the lower half, denser (same content) ---------- */
.rules,.care,.clean,.faq,.prices{--secy:clamp(64px,8vw,120px)}
.spec{counter-reset:rule}
.spec li h3::before{counter-increment:rule;content:counter(rule,decimal-leading-zero);display:block;font:500 .75rem/1 var(--mono);color:var(--muted);margin-bottom:8px;font-variant-numeric:tabular-nums}
@media (min-width:1024px){
  .rules{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gap);align-items:start}
  .rules .sec__head{position:sticky;top:96px;display:grid;grid-template-columns:1fr;gap:16px;margin:0}.rules .sec__sub{max-width:32ch}
  .rules .h2{font-size:clamp(3rem,4.9vw,5.5rem)}
  .rules .spec,.rules .tnote{grid-column:2}
  .rules .spec li{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,2.4fr);min-height:0;padding:18px 8px}
  .rules .spec p{font-size:1.0625rem}
  .care .sec__head{grid-template-columns:auto minmax(0,1fr) auto;align-items:end}
  .care .h2{font-size:clamp(3.5rem,7vw,7.5rem)}
  .scale__seg{padding-top:18px}
  .scale__seg ul{font-size:1rem}
  .care__warn{margin-top:28px}
  .clean{grid-template-columns:minmax(0,4fr) minmax(0,8fr);row-gap:0}
  .clean__txt{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);column-gap:var(--gap);align-items:start}
  .clean__txt .tnote{grid-column:3}
  .clean .h3--big{font-size:clamp(1.75rem,2.6vw,2.5rem)}
  .visit__photo .clip{aspect-ratio:3/1}
}
@media (max-width:1023px){.clean .h3--big{font-size:clamp(1.75rem,7vw,2.5rem)}}

@media (min-width:1024px){.bodymap{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:28px;align-items:end}.bodymap__stage{grid-row:1/8;width:100%}.bodymap > :not(.bodymap__stage){grid-column:2}}

.fl__meta{display:block;white-space:nowrap}
.sheet .claimed{font-size:.75rem;padding:4px 8px;border-width:2px;opacity:1;top:12px;right:10px}
.hero__credit{padding:18px 22px 16px;margin-left:-22px;background:linear-gradient(90deg,rgb(11 11 11/.62),rgb(11 11 11/0))}
.try__ink{filter:blur(.4px) saturate(.85)}
.bodymap__stage .zone__cut{opacity:.36}

/* ---------- first screen: portfolio in the frame (site.js 1b) ---------- */
.lp-works{position:absolute;inset:0;z-index:1;overflow:hidden}
.lp-works img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) grayscale(1)}
.lp-needle{position:absolute;left:0;right:0;top:100%;height:2px;background:#b8222a;z-index:20;pointer-events:none;opacity:0}
.lp-cap{position:absolute;right:0;top:100%;margin:8px 0 0;display:grid;justify-items:end;gap:1px;font-size:.6875rem;line-height:1.4;color:var(--muted);text-align:right;white-space:nowrap}
.lp-cap span:first-child{color:var(--ink)}
.lp-cap .lp-n{font-variant-numeric:tabular-nums}
.hero__obj.has-works .hero__cap{visibility:hidden}
@media (max-width:1023px){.lp-cap{right:auto;left:var(--pad);justify-items:start;text-align:left}}