/* Expertise Clothing Alterations — "Marked for fit". Every scene variable defaults to its finished state,
   so no-JS, print and reduced motion show the completed alteration. JS only scrubs decorative SVG. */
:root{
  --paper:#f1e9da;--paper-2:#e7dcc6;--card:#f8efdf;--ink:#25251f;--ink-soft:#6d6555;
  --red:#a9432f;--red-ink:#8f3524;--red-glow:#e4aa8c;--dark:#282720;--cream:#fff3df;--tape:#f2c55c;
  --focus:var(--ink);--header:64px;--gutter:clamp(16px,5vw,84px);
  --sans:"Schibsted Grotesk",Arial,Helvetica,sans-serif;--serif:Fraunces,Georgia,"Times New Roman",serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--paper);color:var(--ink);font-family:var(--sans);scroll-padding-top:calc(var(--header) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);font-size:1.0625rem;line-height:1.6}
h1,h2,h3{overflow-wrap:anywhere;hyphens:auto;text-wrap:balance}
p,li,dd{text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em}
img,svg{display:block}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* Firefox scrolls focus only just into view; keep every stop (and its ring) clear of the sticky header and the bottom edge. */
:where(a,button,input,summary){scroll-margin-block:16px 28px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-200px;z-index:100;background:var(--ink);color:var(--cream);padding:.8rem 1rem;font-weight:800}
.skip:focus{top:12px}
.eyebrow{margin:0 0 .9rem;font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow .num{color:var(--red-ink);margin-right:.6em}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.2rem;border:2px solid currentColor;font-weight:800;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;background:none;transition:transform .2s,background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--red);border-color:var(--red);color:#fff}
.btn-solid:hover{background:var(--red-ink);border-color:var(--red-ink)}
.btn-line{color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn-cream{background:var(--card);border-color:var(--card);color:var(--ink)}
.btn-ghost{color:var(--cream);border-color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--red-ink)}
.text-cta{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:800;color:var(--red-ink)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* ---------- Header (direct child of body; nothing above it clips or transforms) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(241,233,218,.97);border-bottom:1px solid rgba(37,37,31,.25)}
.header-row{max-width:1440px;margin:0 auto;padding:.5rem var(--gutter);display:flex;align-items:center;gap:1rem;min-height:64px}
.wordmark{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;text-decoration:none;font-weight:900;font-size:1.3rem;letter-spacing:-.04em;line-height:1}
.wordmark-sub{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:.3rem}
.primary-nav{margin-left:auto}
.nav-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.4rem}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--red)}
.header-call{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;background:var(--red);color:#fff;font-weight:800;text-decoration:none;white-space:nowrap}
.header-call:hover{background:var(--red-ink)}
.call-short,.call-sr{display:none}
.menu-toggle{display:none;min-height:44px;min-width:44px;margin-left:auto;padding:.5rem .9rem;background:none;border:2px solid var(--ink);font-weight:800;cursor:pointer}
@media (max-width:860px){
  .header-row{flex-wrap:wrap}
  /* Without JS the links simply wrap onto a second row — never hidden. */
  .primary-nav{order:3;width:100%;margin-left:0}
  .header-call{margin-left:auto}
  .menu-ready .menu-toggle{display:inline-flex;align-items:center}
  .menu-ready .header-row{flex-wrap:nowrap;position:relative}
  .menu-ready .header-call{margin-left:0}
  .menu-ready .primary-nav{position:absolute;top:100%;left:0;right:0;width:auto;display:none;background:var(--paper);border-bottom:2px solid var(--ink);padding:.5rem var(--gutter) 1rem}
  .menu-ready .menu-open .primary-nav{display:block}
  .menu-ready .nav-links{flex-direction:column;gap:0}
  .menu-ready .nav-links a{width:100%;border-bottom:1px solid rgba(37,37,31,.18);font-size:1.1rem}
}
@media (max-width:520px){
  .wordmark-sub{display:none}
  .wordmark{font-size:1.15rem}
  .header-row{gap:.5rem}
  .call-long{display:none}
  .call-short{display:inline}
  .call-sr{display:block}
}

/* ---------- 1 · Hero ---------- */
.hero{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-bottom:2px solid var(--ink);min-height:min(calc(100svh - var(--header)),900px)}
.hero-copy{padding:clamp(28px,5vw,80px) clamp(16px,4vw,64px) clamp(28px,4vw,56px) var(--gutter);display:flex;flex-direction:column;justify-content:center;container-type:inline-size}
.hero h1{margin:.2rem 0 1.2rem;font-weight:900;font-size:clamp(3.2rem,15cqi,9.6rem);line-height:.88;letter-spacing:-.06em}
.h1-a{display:block}
.h1-fit{display:inline-block;position:relative;color:var(--red-ink)}
.fit-word{display:inline-block;letter-spacing:-.03em}
.fit-chalk{position:absolute;left:0;right:-.1em;bottom:-.12em;width:100%;height:.22em;overflow:visible}
.fit-chalk path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.lede{max-width:34rem;margin:0;font-family:var(--serif);font-size:clamp(1.12rem,1rem + .6vw,1.45rem);line-height:1.45}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:1.8rem 0 0;border-top:2px solid var(--ink)}
.facts div{padding:.75rem .9rem .2rem 0}
.facts div+div{padding-left:.9rem;border-left:1px solid rgba(37,37,31,.3)}
.facts dt{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red-ink)}
.facts dd{margin:.2rem 0 0;font-size:.95rem;line-height:1.4}
.concept-note{margin:1.4rem 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.concept-note a{color:var(--ink);font-weight:700;display:inline-block;min-height:24px}
.hero-art{position:relative;background:var(--red);display:grid;place-items:center;overflow:clip;min-height:420px}
.hero-panel{position:absolute;inset:20px;border:1px solid rgba(255,243,223,.5)}
.hero-shirt{width:min(80%,520px);height:auto;transform:rotate(-4deg);overflow:visible}
.hero-shirt .cloth{fill:#f7ead4;stroke:#302720;stroke-width:7;stroke-linejoin:round}
.hero-shirt .shadow{fill:#61291e}
.hero-shirt .collar{fill:#e7c4a8;stroke:#302720;stroke-width:5}
.hero-shirt .chalk{stroke:#b77e66;stroke-width:3;stroke-dasharray:9 12;fill:none}
.hero-shirt .buttons{fill:var(--red)}
.hero-pins path{stroke:#302720;stroke-width:3}
.hero-pins circle{fill:var(--cream);stroke:#302720;stroke-width:3}
.tape-body{fill:none;stroke:var(--tape);stroke-width:31}
.tape-ticks{fill:none;stroke:#35261f;stroke-width:3;stroke-dasharray:5 19}
.tape-mask{stroke-dasharray:1 1;stroke-dashoffset:calc(var(--unwind,0) * -1px)}
.shirt-lift{transform:translateY(calc(var(--unwind,0) * -28px));transform-box:view-box}
.art-caption{position:absolute;left:36px;bottom:30px;margin:0;color:var(--cream);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* Hero entry: the shirt arrives, the tape wraps it, pins go in, and the word "fit." is taken in. */
.motion .hero-art.await .shirt-entry{opacity:0;transform:translateY(48px)}
.motion .hero-art.await .tape-mask{stroke-dashoffset:1px}
.motion .hero-art.await .hero-pins .pin{opacity:0}
.motion .hero-art.play .shirt-entry{animation:shirtIn .9s cubic-bezier(.2,.7,.2,1) .1s backwards}
.motion .hero-art.play .tape-mask{animation:tapeWrap 1.1s cubic-bezier(.6,0,.2,1) .55s backwards}
.motion .hero-art.play .hero-pins .pin{animation:pinIn .45s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(1.35s + var(--i) * .14s)}
/* Toggling reduced motion off later must not replay the arrival. */
.entered .shirt-entry,.entered .tape-mask,.entered .hero-pins .pin,.entered .fit-word,.entered .fit-chalk path{animation:none!important}
.motion .fit-word{animation:takeIn 1.25s cubic-bezier(.65,0,.25,1) .25s backwards}
.motion .fit-chalk path{animation:chalkDraw .6s ease-out 1.45s backwards}
@keyframes shirtIn{from{opacity:0;transform:translateY(48px)}}
@keyframes tapeWrap{from{stroke-dashoffset:1px}}
@keyframes pinIn{from{opacity:0;transform:translateX(26px)}}
@keyframes takeIn{0%{letter-spacing:.42em;opacity:.15}35%{opacity:1}100%{letter-spacing:-.03em}}
@keyframes chalkDraw{from{stroke-dashoffset:1px}}

/* ---------- Tape band: the tape leaves the shirt and runs across the page ---------- */
.tape-band{overflow:clip;border-bottom:1px solid var(--ink);padding:18px 0 14px;background:var(--paper)}
.tape-strip{height:46px;background:var(--tape);border-block:2px solid var(--ink);overflow:clip;position:relative}
/* One tick every 12px, a long tick and a number every 48px: the scale is evenly spaced, as a real tape is. */
.tape-scale{position:absolute;inset:0 auto 0 0;width:6000px;transform:translateX(calc(var(--shift,0) * -1px));
  background-image:linear-gradient(90deg,var(--ink) 0 2px,transparent 2px),linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px);
  background-size:48px 17px,12px 9px;background-repeat:repeat-x;background-position:0 0,0 0}
.tape-scale span{position:absolute;top:19px;font-size:.78rem;font-weight:800;transform:translateX(-50%);line-height:1}
.tape-words{display:flex;gap:2.4rem;margin:12px 0 0;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,1rem + 1.5vw,2.2rem);transform:translateX(calc(var(--shift,0) * .6px - 432px))}
.tape-words span::after{content:"·";margin-left:2.4rem;color:var(--red)}

/* ---------- Shared section heads + reveals ---------- */
.section-head{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.section-head h2,.note h2,.questions h2,.ready h2,.visit h2{margin:0;font-weight:900;letter-spacing:-.05em;line-height:.95;font-size:clamp(2.3rem,1rem + 5.5vw,6rem)}
.section-intro{max-width:36rem;margin:1.2rem 0 0;color:#3d3b33}
/* Reveals apply only after JS arms them on approach; unarmed content is always at its final state. */
.motion .reveal.armed{transition:none}
.motion .reveal.armed.reveal-wipe{clip-path:inset(-.4em 100% -.4em -.4em);transform:translateX(-32px)}
.motion .reveal.armed.reveal-rise{opacity:.1;transform:translateY(40px)}
.motion .reveal.armed.reveal-tack{opacity:.12;transform:translateY(28px)}
.motion .reveal.armed.reveal-tack::after{transform:scaleX(0)}
.motion .reveal.armed.in{transition:clip-path .9s cubic-bezier(.65,0,.25,1),transform .9s cubic-bezier(.2,.7,.2,1),opacity .7s ease;transform:none;opacity:1}
.motion .reveal.armed.in.reveal-wipe{clip-path:inset(-.4em -.4em -.4em -.4em)}
.motion .reveal.armed.in.reveal-tack{transition-delay:calc(var(--i,0) * 90ms)}
.motion .reveal.armed.in.reveal-tack::after{transform:scaleX(1);transition:transform .8s cubic-bezier(.65,0,.25,1) calc(var(--i,0) * 90ms + .2s)}

/* ---------- 2 · Alterations: measure → chalk → pin → finish ---------- */
.alterations{padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,80px)}
.garment{max-width:1440px;margin:clamp(40px,6vw,72px) auto 0;padding:clamp(28px,4vw,48px) var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:center;position:relative}
.garment::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:2px solid var(--ink)}
.garment:nth-of-type(even) .garment-copy{order:2}
.garment-num{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(2.6rem,2rem + 3vw,4.8rem);line-height:1;color:var(--red-ink)}
.garment h3{margin:.4rem 0 .6rem;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem);line-height:1;letter-spacing:-.02em}
.garment-copy p:not(.garment-num){max-width:30rem;margin:0 0 .4rem}
.plate{margin:0;background:var(--paper-2);border:1px solid rgba(37,37,31,.35);padding:clamp(14px,2.4vw,28px);display:grid;justify-items:center;gap:.8rem;overflow:clip}
.plate-art{width:min(100%,360px);height:auto;aspect-ratio:220/280;overflow:visible}
.plate figcaption{font-size:.8rem;color:#4a463c;text-wrap:balance;text-align:center}
.plate-art .grid{stroke:rgba(37,37,31,.1);stroke-width:1;fill:none}
.plate-art .cloth,.preview-art .cloth,.rail-art .cloth{fill:#f7ead4;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.plate-art .detail,.preview-art .detail,.rail-art .detail{fill:none;stroke:var(--ink);stroke-width:1.6;opacity:.6}
.plate-art .crease{stroke:var(--ink);stroke-width:1.2;opacity:.35;fill:none}
.plate-art .buttons{fill:var(--red)}
.plate-art .cuff{stroke:var(--ink);fill:none;stroke-width:calc(var(--f,1) * 6px);opacity:var(--f,1)}
.tape-v{fill:var(--tape);stroke:var(--ink);stroke-width:1.5;transform-box:fill-box;transform-origin:top;transform:scaleY(var(--m,1))}
.tape-v-ticks{stroke:var(--ink);stroke-width:1.2;opacity:var(--m,1)}
.tape-wrap{fill:none;stroke:var(--tape);stroke-width:9;stroke-dasharray:1 1;stroke-dashoffset:calc((1 - var(--m,1)) * 1px);opacity:calc(1 - var(--f,1) * .85)}
.chalk-line{fill:none;stroke:var(--red);stroke-width:2.5;stroke-dasharray:1 1;stroke-dashoffset:calc((1 - var(--c,1)) * 1px);opacity:calc(1 - var(--f,1) * .7)}
.plate-art .pin,.preview-art .pins{--on:clamp(0,calc(var(--n,1) * 4 - var(--i,0)),1);--out:clamp(0,calc((1 - var(--f,1)) * 3),1)}
.plate-art .pin{opacity:calc(var(--on) * var(--out));transform:translateY(calc((1 - var(--on)) * -16px))}
.plate-art .pin path,.preview-art .pins path{stroke:var(--ink);stroke-width:1.8}
.plate-art .pin circle,.preview-art .pins circle{fill:var(--red);stroke:var(--ink);stroke-width:1}
.plate-art .stitch{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:.035 .025}
.art-trousers .stitch,.art-dress .stitch{clip-path:inset(0 calc((1 - var(--f,1)) * 100%) 0 0)}
.art-shirt .stitch{clip-path:inset(0 0 calc((1 - var(--f,1)) * 100%) 0)}
.art-trousers .excess{transform-box:fill-box;transform-origin:top;transform:scaleY(calc(1 - var(--f,1)))}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.stages li{padding:.3rem .55rem;border:1px solid rgba(37,37,31,.35);color:#4a463c;transition:background-color .3s,color .3s}
.garment:not([data-stage]) .stages li:last-child,
.garment[data-stage="0"] .stages li:nth-child(1),.garment[data-stage="1"] .stages li:nth-child(2),
.garment[data-stage="2"] .stages li:nth-child(3),.garment[data-stage="3"] .stages li:nth-child(4){background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---------- Passage: a needle sews the cream chapter onto the dark one ---------- */
.seam{position:relative;height:120px;background:linear-gradient(var(--paper) 0 50%,var(--dark) 50% 100%);overflow:clip}
.seam-line{position:absolute;left:0;right:0;top:calc(50% + 14px);height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,var(--cream) 0 18px,transparent 18px 30px);clip-path:inset(0 calc(100% - var(--x,100%)) 0 0)}
.needle{position:absolute;top:calc(50% + 14px);left:var(--x,100%);width:180px;height:60px;margin:-30px 0 0 -177px;transform:rotate(var(--tilt,0deg));transform-origin:27px 30px;overflow:visible;opacity:var(--needle,0)}
.needle-body{fill:#cfd2d4;stroke:#1b1b17;stroke-width:1.2}
.needle-eye{fill:var(--dark)}
.thread{fill:none;stroke:var(--cream);stroke-width:1.6}

/* ---------- 3 · Your note ---------- */
.note{background:var(--dark);color:var(--paper);padding:clamp(56px,8vw,110px) 0;--focus:var(--tape)}
.note-inner{max-width:1440px;margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,100px);align-items:start}
.note .eyebrow .num{color:var(--red-glow)}
.note h2 em{color:var(--red-glow)}
.note-intro .text-cta{color:var(--red-glow);margin-top:1.4rem}
.note-intro>p{max-width:30rem;margin:1.2rem 0 0}
.how{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;max-width:30rem}
.how li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:.9rem;align-items:center}
.how-n{display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--tape);border-radius:50%;font-weight:900;color:var(--tape)}
.ticket{background:var(--card);color:var(--ink);box-shadow:14px 14px 0 var(--red);position:relative;--focus:var(--ink)}
.ticket::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(135deg,var(--card) 25%,transparent 25%) -12px 0/24px 24px,linear-gradient(225deg,var(--card) 25%,transparent 25%) -12px 0/24px 24px}
.ticket-head{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:1rem clamp(18px,3vw,40px);border-bottom:2px dashed rgba(37,37,31,.5);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.ticket-head span:last-child{color:var(--red-ink)}
.ticket-body{padding:clamp(18px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:0 1.4rem}
.ticket-body>*{grid-column:1/-1}
.chips{border:0;margin:0 0 1.1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.chips legend{padding:0;margin-bottom:.6rem;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.chips input{position:absolute;opacity:0;width:1px;height:1px;margin:0;scroll-margin:calc(var(--header) + 32px) 0 160px}
.chips label{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.55rem .95rem;border:2px solid var(--ink-soft);cursor:pointer;font-weight:600;transition:background-color .2s,color .2s,border-color .2s}
.chips label:hover{border-color:var(--ink)}
.chips input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chips input:checked+label::before{content:"✓" / "";font-weight:900}
.chips input:focus-visible+label{outline:3px solid var(--ink);outline-offset:3px}
.field{margin:0 0 1.1rem}
.field label{display:block;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem}
.field .optional{font-weight:500;letter-spacing:0;text-transform:none}
.field input{width:100%;min-height:48px;padding:.6rem .8rem;font-size:1rem;border:2px solid var(--ink-soft);background:#fff;border-radius:0}
.field input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.ticket-preview{grid-column:2;grid-row:span 3;align-self:start;background:var(--paper-2);border:1px solid rgba(37,37,31,.3)}
.preview-art{width:100%;height:auto;aspect-ratio:220/280}
.preview-art .pv,.preview-art .mk{opacity:0;transform:translateY(10px) scale(.96);transform-box:view-box;transform-origin:110px 140px;transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.3,.5,1)}
.preview-art .hanger{fill:none;stroke:var(--ink);stroke-width:3}
.preview-art .chalk-line{stroke-dasharray:none;opacity:1}
.preview-art .pins{--n:1;--f:0;--i:0}
.preview-art .stitch-x{stroke:var(--ink);stroke-width:2.5}
.preview-art .tape-drape{fill:none;stroke:var(--tape);stroke-width:12;stroke-linecap:round}
.ticket:has(#g-trousers:checked) .pv-trousers,.ticket:has(#g-dress:checked) .pv-dress,.ticket:has(#g-shirt:checked) .pv-shirt,.ticket:has(#g-other:checked) .pv-other,
.ticket:has(#c-hem:checked) .mk-hem,.ticket:has(#c-fit:checked) .mk-fit,.ticket:has(#c-repair:checked) .mk-repair,.ticket:has(#c-unsure:checked) .mk-unsure{opacity:1;transform:none}
@supports not selector(:has(*)){
  .ticket[data-garment="trousers"] .pv-trousers,.ticket[data-garment="dress"] .pv-dress,.ticket[data-garment="shirt"] .pv-shirt,.ticket[data-garment="other"] .pv-other{opacity:1;transform:none}
  .ticket[data-change="hem"] .mk-hem,.ticket[data-change="fit"] .mk-fit,.ticket[data-change="repair"] .mk-repair,.ticket[data-change="unsure"] .mk-unsure{opacity:1;transform:none}
  .ticket:not([data-garment]) .pv-trousers,.ticket:not([data-change]) .mk-hem{opacity:1;transform:none}
}
.ticket-label{grid-column:1;margin:0 0 .3rem;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ticket-note{grid-column:1;margin:0;padding:1rem 0;border-block:2px dashed rgba(37,37,31,.45);font-family:var(--serif);font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.5;overflow-wrap:anywhere;transition:opacity .3s ease,transform .3s ease}
.ticket-note.is-updating{opacity:.25;transform:translateY(4px);transition:none}
.bring{grid-column:1;margin-top:1rem}
.bring-title{margin:0 0 .3rem;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bring ul{margin:0;padding-left:1.2rem}
.ticket-fine{font-size:.86rem;line-height:1.5;color:#4a463c;margin:.9rem 0 0}
.ticket-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.ticket-status{margin:.6rem 0 0;font-weight:700;font-size:.92rem;min-height:1.4em}

/* ---------- 4 · Listed (proof) ---------- */
.listed{padding:clamp(64px,9vw,120px) 0;overflow:clip}
.listed h2 em{color:var(--red-ink)}
.tags{list-style:none;max-width:1440px;margin:clamp(32px,5vw,56px) auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.tag{position:relative;background:var(--card);border:2px solid var(--ink);border-radius:4px 4px 18px 18px;padding:2.6rem 1.4rem 1.4rem;box-shadow:6px 6px 0 var(--paper-2);transform-origin:50% 0}
.tag::before{content:"";position:absolute;top:14px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
.tag-pin{position:absolute;top:-30px;left:50%;width:20px;height:60px;margin-left:-10px;overflow:visible}
.tag-pin path{stroke:var(--ink);stroke-width:2.4}
.tag-pin circle{fill:var(--red);stroke:var(--ink);stroke-width:1.5}
.tag-src{margin:0 0 .4rem;font-family:var(--serif);font-size:1.35rem;line-height:1.2;font-weight:600}
.tag p{margin:0 0 .6rem}
.tag a{display:inline-flex;align-items:center;gap:.3rem;min-height:44px;font-weight:800;color:var(--red-ink)}
.motion .tag.reveal.armed{opacity:.15;transform:translateY(-56px) rotate(-5deg)}
.motion .tag.reveal.armed .tag-pin{opacity:0;transform:translateY(-22px)}
.motion .tag.reveal.armed.in{opacity:1;transform:none;transition:transform .9s cubic-bezier(.3,1.25,.5,1) calc(var(--i) * .16s),opacity .5s ease calc(var(--i) * .16s)}
.motion .tag.reveal.armed.in .tag-pin{opacity:1;transform:none;transition:transform .35s cubic-bezier(.5,0,.3,1.3) calc(var(--i) * .16s + .75s),opacity .2s calc(var(--i) * .16s + .75s)}

/* ---------- 5 · Visit (the deliberate calm chapter) ---------- */
.visit{background:var(--paper-2);border-block:2px solid var(--ink)}
.visit-inner{max-width:1440px;margin:0 auto;padding:clamp(56px,8vw,110px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:center}
.address{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.35;margin:1.2rem 0}
.visit-inner>div>p:last-child{max-width:32rem}
.visit-card{background:var(--card);border-left:8px solid var(--red);padding:clamp(20px,3vw,40px)}
.visit-facts{margin:0;display:grid;gap:.9rem}
.visit-facts div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.8rem;padding-bottom:.9rem;border-bottom:1px solid rgba(37,37,31,.2)}
.visit-facts dt{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red-ink);padding-top:.2rem}
.visit-facts dd{margin:0}
.visit-facts a{font-weight:800;display:inline-block;min-height:24px}
.visit-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}

/* ---------- 6 · Questions ---------- */
.questions{padding:clamp(64px,9vw,120px) 0}
.questions-inner{max-width:1100px;margin:0 auto;padding:0 var(--gutter)}
.faq{margin-top:clamp(28px,4vw,48px)}
.faq details{position:relative;border-top:1px solid rgba(37,37,31,.35)}
.faq details:last-child{border-bottom:1px solid rgba(37,37,31,.35)}
.faq details::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:repeating-linear-gradient(90deg,var(--red) 0 14px,transparent 14px 22px);transform-origin:left;transform:scaleX(1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.9rem 0;font-weight:800;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* A four-hole sewing button, cross-stitched in red: the thread reads "+" when closed; opening turns the button
   45° on its shank so the same stitch reads "×". SVG geometry keeps it optically centred, unlike a text glyph. */
.faq-btn{flex:none;width:36px;height:36px;overflow:visible;transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.faq-btn .btn-face{fill:var(--card);stroke:var(--ink);stroke-width:2}
.faq-btn .btn-rim{fill:none;stroke:var(--ink);stroke-width:1;opacity:.45}
.faq-btn .btn-thread{fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round}
.faq-btn .btn-holes{fill:var(--ink)}
.faq summary:hover .faq-btn{transform:rotate(-14deg)}
.faq details[open] .faq-btn{transform:rotate(45deg)}
.faq details[open] summary:hover .faq-btn{transform:rotate(59deg)}
.faq details p{margin:0;padding:0 0 1.2rem;max-width:46rem}
@supports selector(::details-content){
  .motion .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .4s cubic-bezier(.3,0,.2,1),content-visibility .4s allow-discrete}
  .motion .faq details[open]::details-content{block-size:auto}
  @supports (interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}}
}

/* ---------- 7 · Close: the visitor's garment, finished, on the hanger ---------- */
.ready{background:var(--red);color:var(--cream);overflow:clip;--focus:var(--cream)}
.ready-inner{max-width:1440px;margin:0 auto;padding:clamp(56px,8vw,110px) var(--gutter);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center}
.ready .eyebrow .num{color:var(--cream)}
.ready h2 em{color:var(--cream)}
.ready-summary{overflow-wrap:anywhere;font-family:var(--serif);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);margin:1.4rem 0 .6rem}
.ready-summary strong{font-weight:600;border-bottom:2px dashed var(--cream)}
.ready-copy>p{max-width:34rem}
.ready-art{display:grid;place-items:center}
.rail-art{width:min(100%,420px);height:auto;aspect-ratio:400/420;overflow:visible}
.rail-art .rail{stroke:var(--ink);stroke-width:8;stroke-linecap:round}
.rail-art .hanger{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.rail-art .stitch-done{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-dasharray:6 4}
.rail-art .tag-string{fill:none;stroke:var(--ink);stroke-width:1.5}
.rail-art .tag-card{fill:var(--card);stroke:var(--ink);stroke-width:2}
.rail-art .tag-hole{fill:var(--red);stroke:var(--ink)}
.rail-art .tag-text{font-family:var(--sans);font-size:14px;font-weight:800;fill:var(--ink)}
.hang-drop{transform:translateY(calc((1 - var(--drop,1)) * -160px));opacity:calc(.1 + var(--drop,1) * .9)}
.hang-swing{transform-box:view-box;transform-origin:212px 34px;transform:rotate(var(--swing,0deg))}
.rail-art .hg{display:none}
body:has(#g-trousers:checked) .hg-trousers,body:has(#g-dress:checked) .hg-dress,body:has(#g-shirt:checked) .hg-shirt,body:has(#g-other:checked) .hg-other{display:inline}
@supports not selector(:has(*)){
  .ready[data-garment="trousers"] .hg-trousers,.ready[data-garment="dress"] .hg-dress,.ready[data-garment="shirt"] .hg-shirt,.ready[data-garment="other"] .hg-other,.ready:not([data-garment]) .hg-trousers{display:inline}
}

/* ---------- Owner review + footer ---------- */
.owner{max-width:1000px;margin:clamp(56px,8vw,96px) auto;margin-inline:max(var(--gutter),calc((100% - 1000px) / 2));padding:clamp(22px,4vw,52px);background:#fff;border:2px solid #aaa096;box-shadow:9px 9px 0 #d3c4ac}
.owner h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.4rem);line-height:1.2;margin:0 0 .8rem}
.owner-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.2rem 0}
.owner-line{overflow-wrap:anywhere}
.selectable{user-select:all;font-weight:700}
.mini-btn{min-height:36px;min-width:44px;margin-left:.5rem;padding:.3rem .8rem;border:2px solid var(--ink);background:#fff;font-weight:700;cursor:pointer}
.fine{font-size:.85rem;color:#4a463c}
.site-footer{border-top:2px solid var(--ink);background:var(--paper)}
.footer-inner{max-width:1440px;margin:0 auto;padding:clamp(28px,4vw,48px) var(--gutter) calc(clamp(28px,4vw,48px) + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:clamp(18px,4vw,56px);font-size:.9rem;align-items:start}
.footer-inner p{margin:0 0 .6rem}
.footer-name{font-weight:900;font-size:1.05rem}
.footer-inner a{display:inline-block;min-height:24px}
.back-top{display:inline-flex!important;align-items:center;gap:.4rem;min-height:44px!important;font-weight:800}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-art{min-height:360px;padding:24px 0 88px}
  .hero-shirt{width:min(62%,340px)}
  .garment,.note-inner,.visit-inner,.ready-inner{grid-template-columns:minmax(0,1fr)}
  .garment:nth-of-type(even) .garment-copy{order:0}
  .tags{grid-template-columns:minmax(0,1fr);max-width:640px;gap:48px}
  .footer-inner{grid-template-columns:minmax(0,1fr)}
  .rail-art{width:min(100%,340px)}
}
@media (max-width:600px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts div,.facts div+div{padding:.6rem 0;border-left:0;border-bottom:1px solid rgba(37,37,31,.25)}
  .actions .btn,.ticket-actions .btn,.visit-actions .btn,.owner-actions .btn{flex:1 1 100%}
  .ticket-body{grid-template-columns:minmax(0,1fr) 96px}
  .ticket-preview{grid-row:auto;grid-column:2;margin-bottom:.6rem}
  .ticket-label{grid-column:1;align-self:end}
  .visit-facts div{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .hero-art{min-height:300px}
  .plate-art{width:min(100%,260px)}
  .seam{height:96px}
}
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
}

/* ---------- Reduced motion: discrete states, no travel ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---------- Forced colours ---------- */
@media (forced-colors:active){
  .btn,.header-call,.menu-toggle,.mini-btn{border:2px solid ButtonText}
  .chips label{border:2px solid ButtonText}
  .chips input:checked+label{border-width:4px;text-decoration:underline;text-decoration-thickness:2px}
  .chips input:focus-visible+label{outline:3px solid Highlight}
  .faq-btn .btn-face{fill:Canvas;stroke:CanvasText}.faq-btn .btn-rim,.faq-btn .btn-thread{stroke:CanvasText}.faq-btn .btn-holes{fill:CanvasText}
  .hero-art,.ready,.note,.visit{forced-color-adjust:auto}
  .tape-strip,.seam,.tape-band{display:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header{position:static}
  .menu-toggle,.skip,.hero-art,.tape-band,.seam,.ready-art,.ticket-preview,.mini-btn,#copy-note{display:none!important}
  .hero,.garment,.note-inner,.visit-inner,.ready-inner{grid-template-columns:1fr}
  .note,.ready{background:#fff;color:#000}
  .ticket{box-shadow:none;border:1px solid #000}
  .reveal{opacity:1!important;transform:none!important;clip-path:none!important}
  .garment{--m:1!important;--c:1!important;--n:1!important;--f:1!important}
  a[href^="tel:"]::after{content:" (" attr(href) ")"}
}