/* =========================================================================
   MENG TATTOO — sections
   ========================================================================= */

/* ---------- 00 intro: the mark stencils itself, inks, then wipes off ----- */
/* the intro exists only where JS can dismiss it */
.intro{display:none}
.js .intro{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path 900ms var(--ease-ink)}
.intro.is-out{clip-path:inset(0 0 0 101%);pointer-events:none}
.intro__mark{width:min(30vw,190px);color:var(--paper)}
.intro__kh{font-family:var(--f-kh);font-size:1.35em;letter-spacing:0;text-transform:none;
  vertical-align:-.12em;margin-inline-end:.25em}
.intro__cap{position:absolute;bottom:clamp(24px,5vh,52px);left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.28em;text-transform:uppercase;
  color:var(--mute);opacity:0;animation:fadeIn .7s .55s forwards}
@keyframes fadeIn{to{opacity:1}}
.intro__skip{position:absolute;top:clamp(16px,3vh,28px);right:var(--gut);
  font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);padding:.6em .9em}
.intro__skip:hover{color:var(--paper)}

/* ---------- 01 hero: THE WIPE ------------------------------------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--ink);isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media picture,.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
/* the ink plate the visitor wipes away */
.hero__ink{position:absolute;inset:0;z-index:1;touch-action:pan-y;cursor:none}
.hero__ink canvas{width:100%;height:100%;display:block}
/* fallback veil when canvas is off (reduced motion / no JS) */
.hero__veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.42) 34%,
             rgba(11,11,12,.55) 66%,rgba(11,11,12,.94) 100%)}
.js .hero__veil{background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,0) 28%,
             rgba(11,11,12,.12) 58%,rgba(11,11,12,.92) 100%)}
/* the eyebrow is its own editorial line. It gets a rule under it and real
   air before the name lands — a label, a breath, then MENG. */
.hero .eyebrow--v{color:color-mix(in srgb,var(--paper) 88%,transparent);
  text-shadow:0 1px 14px rgba(6,6,8,.95),0 0 3px rgba(6,6,8,.9);
  gap:.9em;line-height:1.5;padding-bottom:clamp(12px,1.6vh,20px);
  margin-bottom:clamp(20px,4.2vh,46px);
  border-bottom:1px solid color-mix(in srgb,var(--paper) 16%,transparent);
  max-width:min(100%,46ch)}
.hero .display{margin-top:0}
.hero__body{position:relative;z-index:3;width:100%;pointer-events:none;
  padding-block:clamp(28px,6vh,72px) clamp(30px,7vh,80px)}
.hero__body a,.hero__body button{pointer-events:auto}
.hero__grid{display:grid;gap:clamp(20px,3vw,40px)}
@media(min-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    align-items:end;column-gap:clamp(30px,5vw,80px)}
}
.hero .display{font-size:var(--t-poster);line-height:.82;letter-spacing:-.038em;
  text-shadow:0 2px 60px rgba(0,0,0,.5)}
.hero__sub{display:flex;flex-wrap:wrap;gap:.6em 1.5em;margin-top:clamp(14px,2vw,26px)}
.hero__meta{display:grid;gap:1.1em;justify-items:start}
@media(min-width:960px){.hero__meta{justify-items:end;text-align:right}}
.hero__meta .lede{max-width:34ch}
@media(min-width:960px){.hero__meta .lede{text-align:right}}
.hero__hint{position:absolute;z-index:3;left:var(--gut);top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 55%,transparent);
  writing-mode:vertical-rl;display:none;pointer-events:none;
  animation:pulse 3.4s ease-in-out infinite}
@media(min-width:960px) and (hover:hover){.hero__hint{display:block}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
/* ---------- 02 the proof -------------------------------------------------
   Thirty-five countries is a fact, not a feature. It gets one image, one
   number, seven names written on like annotations, and a link for the
   handful of people who want the other twenty-eight.
   ------------------------------------------------------------------------ */
.proof__row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,64px);align-items:center;margin-top:var(--gap-sm)}
.proof__n{font-family:var(--f-display);font-size:clamp(4.2rem,10vw,8.4rem);
  line-height:.8;letter-spacing:-.05em;margin:0 0 .04em;
  font-variant-numeric:tabular-nums;color:var(--fg)}
.proof__say .section-h{font-size:var(--t-sub)}
.proof__src{margin-top:var(--gap-sm);font-family:var(--f-mono);font-size:var(--m-sm);
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:.6em}
.proof__src .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}

.proof__fig{position:relative;margin:0;overflow:hidden}
.proof__fig .fig{aspect-ratio:3/2;overflow:hidden}
.proof__fig img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.proof__marks{list-style:none;margin:0;padding:0;position:absolute;inset:0;
  pointer-events:none}
/* not chips — annotations. They sit on the picture in mono, lit by a shadow
   rather than a box, and arrive one at a time as the section passes. */
.mk{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);
  display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap;
  font-family:var(--f-mono);font-size:var(--t-lbl);
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,#EEECE8 82%,transparent);
  text-shadow:0 1px 10px rgba(6,6,8,.95),0 0 26px rgba(6,6,8,.8);
  opacity:0;transform:translateY(6px);
  transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.mk::before{content:"";position:absolute;left:-.7em;top:50%;width:.42em;height:1px;
  background:var(--stencil-hi);opacity:.9}
.mk.is-lit{opacity:1;transform:none}
.mk b{font-weight:400;color:var(--stencil-hi);font-size:.94em;
  text-shadow:0 1px 10px rgba(6,6,8,.95)}
.mk.is-home{color:#fff}
.mk.is-home b{color:var(--yant-hi)}
.mk.is-home::before{background:var(--yant-hi)}

.proof__more{margin-top:var(--gap-sm)}
.proof__all{margin-top:var(--gap-sm)}
.proof__all{list-style:none;margin:var(--gap-sm) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.35em 1.6em;max-width:var(--measure);
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.proof__all[hidden]{display:none}

@media(max-width:820px){
  .proof__row{grid-template-columns:1fr;gap:var(--gap-md)}
  /* the annotations pull into the left of the frame so a long country name
     can never run off the edge of a phone */
  .mk{left:calc(var(--x) * 56%);font-size:var(--m-xs)}
  .proof__fig{order:-1}
  .proof__fig .fig{aspect-ratio:5/4}
  .proof__n{font-size:clamp(3.4rem,17vw,5.6rem)}
}
@media(prefers-reduced-motion:reduce){
  .mk{opacity:1;transform:translate(-6%,-50%);transition:none}
}

/* ---------- 03 work ------------------------------------------------------
   A contact strip: one height, native widths. Nothing is cropped to fit a
   grid — a forearm stays a forearm shape, a back stays a back. Drag it.
   ------------------------------------------------------------------------ */
.strip{display:flex;gap:var(--gap-sm);overflow-x:auto;overflow-y:hidden;
  height:clamp(330px,58vh,660px);
  padding-inline:var(--gut);margin-inline:calc(-1 * var(--gut));
  scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;
  -webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.strip.is-drag *{pointer-events:none}
.strip .tile{position:relative;height:100%;flex:none;scroll-snap-align:center;
  overflow:hidden;background:var(--ink-2);display:block}
.strip .tile img,.strip .tile video{height:100%;width:auto;max-width:none;object-fit:cover;
  display:block;transition:transform 1.2s var(--ease)}
.strip .tile:hover img{transform:scale(1.035)}
.strip__end{flex:none;width:1px}
.striprail{display:flex;align-items:center;gap:1.2em;margin-top:clamp(16px,2vw,26px)}
.striprail__bar{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden}
.striprail__bar i{position:absolute;inset-block:0;left:0;background:var(--fg);
  width:var(--w,20%);transform:translateX(var(--x,0));transition:transform .1s linear}
.striprail__n{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;color:var(--dim);
  font-variant-numeric:tabular-nums}

.tile__meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(12px,1.5vw,20px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1em;flex-wrap:wrap;
  background:linear-gradient(0deg,rgba(11,11,12,.92),rgba(11,11,12,0));
  opacity:0;transform:translateY(10px);transition:.45s var(--ease);color:var(--paper)}
.tile:hover .tile__meta,.tile:focus-visible .tile__meta,.tile:focus-within .tile__meta{opacity:1;transform:none}
@media(hover:none){.tile__meta{opacity:1;transform:none}}
.tile__t{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;text-transform:uppercase}
.tile__s{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--stencil-hi)}

/* ---------- the archive ------------------------------------------------
   Absolutely-positioned masonry driven by JS. Nothing relies on `hidden`
   versus `display` — a filtered-out piece is simply not packed, and it
   animates out instead of vanishing. Heights come from each image's real
   aspect ratio, so the layout settles before a single pixel has loaded.
   ------------------------------------------------------------------------ */
.archive{position:relative;width:100%;
  /* the packer stacks tiles with inline z-index; isolate so those numbers
     stay inside the grid and can never climb over the menu or the header */
  isolation:isolate;z-index:0;
  transition:height .62s var(--ease)}
.archive .tile{position:absolute;top:0;left:0;overflow:hidden;background:var(--ink-2);
  display:block;transform:translate3d(0,0,0);
  transition:transform .62s var(--ease),width .62s var(--ease),height .62s var(--ease),
             opacity .38s var(--ease),filter .38s var(--ease)}
.archive .tile.is-out{opacity:0;filter:blur(6px);pointer-events:none;
  transition:transform .62s var(--ease),width .62s var(--ease),height .62s var(--ease),
             opacity .3s var(--ease),filter .3s var(--ease),visibility 0s .3s;
  visibility:hidden}
.archive .tile img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
  display:block;transition:transform 1.3s var(--ease),filter .6s var(--ease)}
.archive .tile:hover img{transform:scale(1.045)}
.archive .tile__n{position:absolute;top:0;left:0;padding:.85em 1em;
  font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.14em;color:var(--paper);
  mix-blend-mode:difference;opacity:.72;pointer-events:none}
.archive.is-settling .tile{transition:none;transition-delay:0s!important}

/* a featured piece states itself. It is wider by three columns, and it does
   not wait for a hover to say what it is — the caption sits on it the way a
   plate caption sits under a print. */
.archive .tile--feat .tile__meta{opacity:1;transform:none;
  padding:clamp(16px,2.2vw,30px);
  background:linear-gradient(0deg,rgba(11,11,12,.9),rgba(11,11,12,.3) 46%,rgba(11,11,12,0))}
.archive .tile--feat .tile__t{font-family:var(--f-display);font-weight:400;
  font-size:var(--t-h3);letter-spacing:.005em;text-transform:none;line-height:1.15}
.archive .tile--feat .tile__n{font-size:var(--m-sm);opacity:.9;padding:1.1em 1.3em}
.archive .tile--feat::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 15%,transparent)}
.archive .tile--feat:hover img{transform:scale(1.028)}
@media(hover:none){.archive .tile--feat .tile__t{font-size:clamp(1rem,4.4vw,1.4rem)}}
@media (prefers-reduced-motion:reduce){
  .archive,.archive .tile{transition:none!important}
  .archive .tile.is-out{filter:none}
}

/* the filter reads as stencil tabs off a sheet, not as chips ------------- */
.tabs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 clamp(14px,2.2vw,34px);
  margin:0 0 clamp(16px,2.2vw,26px);padding:0;border:0;list-style:none;
  min-inline-size:0;inline-size:100%}
.tabs__lbl{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);width:100%;margin-bottom:.9em;display:flex;align-items:center;gap:.8em}
.tabs__lbl::after{content:"";flex:1;height:1px;background:var(--rule)}
.tab{position:relative;padding:.15em 0 .6em;font-family:var(--f-sans);font-weight:400;
  font-size:var(--t-ctl);letter-spacing:-.01em;line-height:1.2;
  color:color-mix(in srgb,var(--fg) 44%,transparent);
  transition:color .34s var(--ease),font-weight .2s;white-space:nowrap;
  display:flex;align-items:baseline;gap:.42em}
.tab .kh{font-family:var(--f-kh);font-size:.92em;letter-spacing:0}
.tab sup{font-family:var(--f-mono);font-size:.52em;font-weight:400;letter-spacing:.06em;
  vertical-align:super;opacity:.62;transition:opacity .34s}
/* the underline draws itself, the way a stencil line goes down */
.tab::after{content:"";position:absolute;left:0;right:0;bottom:.16em;height:2px;
  background:var(--fg);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-ink)}
.tab:hover{color:color-mix(in srgb,var(--fg) 82%,transparent)}
.tab:hover::after{background:var(--stencil);transform:scaleX(.3)}
/* selected: full weight, full colour, a solid rule under it */
.tab[aria-pressed="true"]{color:var(--fg);font-weight:600}
.tab[aria-pressed="true"] sup{opacity:1;color:var(--fg)}
.tab[aria-pressed="true"]::after{background:var(--fg);transform:scaleX(1)}
.archive-bar{max-width:none;width:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:.8em 1.6em;
  padding:.9em 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(20px,3vw,36px);
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.15em;text-transform:uppercase;
  color:var(--dim)}
.archive-bar b{color:var(--fg);font-weight:400;font-variant-numeric:tabular-nums}
.archive-bar__sel{color:var(--fg)}
.archive-bar__sel .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}
.archive-bar__reset{margin-inline-start:auto;color:var(--fg);
  border-bottom:1px solid color-mix(in srgb,var(--fg) 40%,transparent);
  transition:border-color .3s}
.archive-bar__reset:hover{border-color:var(--fg)}
.archive-empty{padding:clamp(40px,7vw,90px) 0;text-align:center;display:grid;gap:1em;
  justify-items:center}
.archive-empty .mark{width:64px;color:var(--rule)}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.5em;margin-bottom:var(--gap-lg)}
.chip{padding:.62em 1.05em;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);transition:.32s var(--ease);white-space:nowrap}
.chip .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0}
.chip:hover{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip__n{opacity:.5;margin-inline-start:.5em;font-size:.85em}

/* ---------- 04 the mark (paper) ------------------------------------------
   The glass first, at full width, so the monogram is found before it is
   named. Then the letter, then the trace. No spec table.
   ------------------------------------------------------------------------ */
.glassfig{margin:0 0 var(--gap-xl)}
.glassfig .fig{aspect-ratio:21/9;overflow:hidden}
.glassfig img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.glassfig__cap{margin-top:.85rem;font-family:var(--f-mono);font-size:var(--m-sm);
  letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.glassfig__cap .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}

.markblock{display:grid;gap:var(--gap-lg);align-items:center}
@media(min-width:900px){
  .markblock{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:var(--gap-xl)}
}
.markblock__say .section-h{font-size:var(--t-sub)}
.markblock__say .lede{max-width:52ch}
.khletter{font-family:var(--f-kh-display);font-size:1.9em;line-height:1;
  display:inline-block;color:var(--yant);vertical-align:-.22em;margin-inline-end:.06em}

.markblock__art{position:relative;display:grid;place-items:center;aspect-ratio:1;
  padding:clamp(20px,4vw,50px);border:1px solid var(--rule);background:
    repeating-linear-gradient(90deg,transparent 0 39px,color-mix(in srgb,var(--ink) 5%,transparent) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 39px,color-mix(in srgb,var(--ink) 5%,transparent) 39px 40px)}
.markblock__art .markmask{position:absolute;inset:clamp(20px,4vw,50px);z-index:0}
.markblock__art .markmask img{filter:contrast(1.06) saturate(.9)}
.markblock__ghost{position:relative;z-index:1;width:min(72%,400px);color:var(--ink)}
.markblock__ghost path{animation:none!important;fill:none!important;
  stroke:var(--stencil);stroke-width:9;opacity:1}
.markblock__ghost.is-drawn path{animation:strokeIn 1250ms var(--ease-ink) forwards var(--sd,0ms)!important}
.markblock__art figcaption{position:absolute;bottom:clamp(12px,2vw,20px);left:0;right:0;
  text-align:center;font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}

/* ---------- 05 body: full-bleed statements ------------------------------ */
.bleed{position:relative;overflow:hidden;background:var(--ink)}
.bleed__media{position:relative}
.bleed__media picture,.bleed__media img{width:100%;display:block}
.bleed--tall .bleed__media{height:min(112vh,1000px)}
/* the frame pushes in slowly once it arrives — one move, no parallax fighting
   the crop */
.bleed__media img{transform:scale(1.07);transition:transform 3.2s var(--ease) .15s}
.is-in .bleed__media img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.bleed__media img{transform:none;transition:none}}
.bleed--tall .bleed__media img{height:100%;object-fit:cover;object-position:var(--bpos,center 30%)}
.bleed .section-h{font-size:var(--t-sec);line-height:.98;letter-spacing:-.024em}
.bleed__over{position:absolute;inset:auto 0 0;padding:var(--gut) var(--gut) clamp(30px,6vh,74px);
  background:linear-gradient(0deg,rgba(11,11,12,.92),rgba(11,11,12,0))}
.bleed__over .wrap{padding-inline:0}
.diptych{display:grid;gap:var(--gap-sm)}
@media(min-width:800px){.diptych{grid-template-columns:1fr 1fr;align-items:start}
  .diptych--offset > :nth-child(2){margin-top:clamp(40px,8vw,140px)}}

/* ---------- 06 process (paper) ------------------------------------------ */
.steps{display:grid;gap:var(--gap-md);counter-reset:s}
@media(min-width:760px){.steps{grid-template-columns:repeat(5,1fr)}}
.step{position:relative;padding-top:1.3em;border-top:1px solid var(--rule)}
.step__n{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.17em;color:var(--stencil);
  display:block;margin-bottom:.65em}
.step h3{font-size:var(--t-h4);margin-bottom:.4em}
.step h3 .kh{font-size:.84em}
.step p{font-size:var(--m-lg);color:var(--dim);max-width:30ch;margin:0}
.procmedia{display:grid;gap:var(--gap-sm);margin-top:clamp(32px,4.5vw,64px)}
@media(min-width:760px){.procmedia{grid-template-columns:repeat(3,1fr)}}
.procmedia .fig{aspect-ratio:9/13;border:1px solid var(--rule)}

/* ---------- 07 meng ----------------------------------------------------- */
.meng{display:grid;gap:var(--gap-lg)}
@media(min-width:960px){.meng{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  column-gap:var(--gap-xl);align-items:center}}
/* the working shot is the section, not an illustration beside it */
.meng__fig{margin:0}
.meng__fig .fig{aspect-ratio:4/5;overflow:hidden}
@media(min-width:960px){.meng__fig .fig{aspect-ratio:5/6}}
.meng__fig img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.meng__stack{display:grid;gap:var(--gap-sm)}
@media(min-width:560px){.meng__stack{grid-template-columns:1fr 1fr}
  .meng__stack > :first-child{grid-column:1 / -1}}
.meng__txt{position:sticky;top:clamp(80px,12vh,130px)}
.pullq{font-family:var(--f-display);font-size:var(--t-sub);line-height:1.14;
  letter-spacing:-.018em;margin:clamp(24px,3vw,40px) 0;padding-inline-start:1em;
  border-inline-start:2px solid var(--yant);max-width:24ch}
.pullq .kh{font-size:.8em}

/* ---------- 08 street 90 -------------------------------------------------
   The real place, barely styled. One big shopfront, the address, and two
   photographs that have not been improved.
   ------------------------------------------------------------------------ */
.street{display:grid;gap:var(--gap-sm)}
@media(min-width:900px){.street{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}}
.street__main{position:relative;aspect-ratio:4/3;overflow:hidden}
@media(min-width:900px){.street__main{aspect-ratio:auto;min-height:clamp(360px,48vh,560px)}}
.street__main video{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 6s cubic-bezier(.22,.7,.3,1)}
.is-in .street__main video{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.street__main video{transform:none;transition:none}}
.street__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--gap-sm) var(--gap-md);
  background:linear-gradient(0deg,rgba(11,11,12,.9),rgba(11,11,12,0));
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper)}
.street__cap .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}
.street__card{border:1px solid var(--rule);padding:var(--gap-md);display:grid;
  align-content:space-between;gap:var(--gap-md)}
.street__card h3{font-size:var(--t-h3)}
.addr{font-style:normal;display:grid;gap:.42em;font-size:var(--t-body)}
.addr b{font-weight:500}
.hours{display:grid;gap:.4em;font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.hours span{display:flex;justify-content:space-between;gap:1.5em;
  border-bottom:1px dotted var(--rule);padding-bottom:.4em}
.hours .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}
.street__pair{display:grid;gap:var(--gap-sm);margin-top:var(--gap-sm)}
@media(min-width:820px){.street__pair{grid-template-columns:1fr 1fr}}

/* ---------- 09 contact -------------------------------------------------- */
.cta{position:relative;text-align:center;padding-block:var(--sec);overflow:hidden}
.cta .display{font-size:var(--t-hero)}
.cta__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(58vw,560px);color:var(--ink-3);z-index:0;pointer-events:none}
.paper .cta__mark{color:var(--paper-2)}
.cta > *{position:relative;z-index:1}
.cta__row{display:flex;flex-wrap:wrap;gap:.75em;justify-content:center;
  margin-top:var(--gap-lg)}

/* channels list */
.chan{display:grid;gap:0;border-top:1px solid var(--rule)}
.chan a{display:grid;grid-template-columns:auto 1fr auto;gap:1.2em;align-items:center;
  padding:clamp(15px,2vw,25px) 0;border-bottom:1px solid var(--rule);position:relative;
  transition:padding-inline .45s var(--ease)}
.chan a:hover,.chan a:focus-visible{padding-inline:clamp(8px,1.4vw,20px)}
.chan a::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--fg) 5%,transparent);
  clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .5s var(--ease-ink);z-index:-1}
.chan a:hover::before,.chan a:focus-visible::before{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.chan__k{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);min-width:6.5rem}
.chan__v{font-family:var(--f-display);font-size:var(--t-h3);line-height:1.1;
  letter-spacing:-.014em}
.chan__go{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;color:var(--stencil-hi)}
.paper .chan__go{color:var(--stencil)}

/* ---------- forms ------------------------------------------------------- */
/* an enquiry is a short letter — hold it to a readable measure instead of
   letting it stretch into a console across a wide screen */
.form{display:grid;gap:var(--gap-md);max-width:min(100%,900px)}
.f-row{display:grid;gap:var(--gap-md)}
@media(min-width:700px){.f-row--2{grid-template-columns:1fr 1fr}
  .f-row--3{grid-template-columns:repeat(3,1fr)}}
.field{display:grid;gap:.55em}
.field > label,.fset > legend{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);padding:0}
.field .opt{text-transform:none;letter-spacing:.06em;opacity:.66}
.field input,.field textarea,.field select{
  width:100%;background:transparent;color:var(--fg);border:0;border-bottom:1px solid var(--rule);
  padding:.72em 0;font:inherit;font-size:1.02rem;border-radius:0;min-block-size:44px;
  transition:border-color .35s var(--ease)}
/* the whole row answers, not just the rule under it */
.field:focus-within .field__lbl{color:var(--fg)}
.field textarea{resize:vertical;min-height:6.5em}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--stencil-hi)}
.paper .field input:focus,.paper .field textarea:focus,.paper .field select:focus{border-bottom-color:var(--stencil)}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--dim) 70%,transparent)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:1.7em}
.field select option{background:var(--ink);color:var(--paper)}
.paper .field select option{background:var(--paper);color:var(--ink)}
.fset{border:0;padding:0;margin:0;display:grid;gap:.7em}
.pills{display:flex;flex-wrap:wrap;gap:.5em}
.pill{position:relative}
.pill input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill > span{display:flex;align-items:center;min-block-size:44px;
  padding:.6em 1.15em;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);transition:.3s var(--ease)}
.pill > span .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0}
.pill input:checked + span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill input:focus-visible + span{outline:2px solid var(--stencil-hi);outline-offset:2px}
.form__foot{display:flex;flex-wrap:wrap;gap:1.2em;align-items:center;justify-content:space-between;
  padding-top:.6em}
.form__note{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.1em;color:var(--dim);
  max-width:44ch;line-height:1.7;text-transform:none}
.form__note .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- aftercare --------------------------------------------------- */
.care{display:grid;gap:var(--gap-lg)}
@media(min-width:900px){.care{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  column-gap:var(--gap-xl);align-items:start}}
.care__nav{position:sticky;top:clamp(80px,12vh,120px);display:grid;gap:.15em;align-content:start}
/* on a phone the column collapses under the intro — sticky would overlap it */
@media(max-width:899px){
  /* a scroller that says it scrolls: it fades at both edges, snaps to each
     item, and pulls the open block's own entry into view */
  .care__nav{position:static;display:flex;gap:0 1.4em;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    border-bottom:1px solid var(--rule);margin-bottom:var(--gap-md);
    scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - 30px),transparent)}
  .care__nav::-webkit-scrollbar{display:none}
  .care__nav a{border-bottom:0;white-space:nowrap;padding:.9em 0;flex:none;
    scroll-snap-align:start;position:relative}
  .care__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--stencil);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .34s var(--ease-ink)}
  .care__nav a.is-active{color:var(--fg)}
  .care__nav a.is-active::after{transform:scaleX(1)}
}
.care__nav a{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);padding:.62em 0;border-bottom:1px solid var(--rule);transition:.3s}
.care__nav a .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0;text-transform:none}
.care__nav a:hover,.care__nav a.is-active{color:var(--fg)}
.care__body{display:grid;gap:0;border-top:1px solid var(--rule)}

/* ---- the deep detail opens one block at a time -------------------------
   Not an FAQ accordion. Each block is a numbered plate: a mono index in
   stencil violet, the title in the serif, and a hand-cut cross that becomes
   a bar when the block is open. Open content carries a violet margin rule,
   the way a stencil sheet carries its registration line.
   ---------------------------------------------------------------------- */
.care__block{scroll-margin-top:clamp(80px,13vh,130px);
  border-bottom:1px solid var(--rule)}
.care__block > summary{
  list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(14px,2.2vw,30px);
  padding:clamp(20px,2.6vw,34px) 0;
  transition:color .3s var(--ease)}
.care__block > summary::-webkit-details-marker{display:none}
.care__block > summary::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--stencil);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--ease-ink)}
/* and the plate itself answers under the pointer, not only its bottom rule */
.care__block > summary .care__t{transition:transform .3s var(--ease),color .3s var(--ease)}
.care__block > summary:hover .care__t,
.care__block > summary:focus-visible .care__t{transform:translateX(5px)}
.care__block > summary:hover .care__t i,
.care__block > summary:focus-visible .care__t i{color:var(--stencil-hi)}
.care__block > summary:hover .care__mk,
.care__block > summary:focus-visible .care__mk{color:var(--stencil)}
.care__block > summary:hover::after,.care__block > summary:focus-visible::after{transform:scaleX(1)}
.care__block[open] > summary::after{transform:scaleX(1)}
.care__t{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:baseline;
  gap:clamp(14px,2.2vw,30px);
  font-family:var(--f-display);font-weight:400;font-size:var(--t-sub);
  line-height:1.06;letter-spacing:-.016em}
.care__t i{font-family:var(--f-mono);font-size:var(--m-xs);font-style:normal;
  letter-spacing:.16em;color:var(--stencil);line-height:2.6}
.care__t .kh{font-size:.78em}
/* a cut cross, drawn as two rules, that opens into a single bar */
.care__mk{position:relative;width:16px;height:16px;flex:none;align-self:center}
.care__mk::before,.care__mk::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;
  background:currentColor;transition:transform .42s var(--ease-ink),opacity .3s}
.care__mk::after{transform:rotate(90deg)}
.care__block[open] .care__mk::after{transform:rotate(0deg);opacity:0}
.care__in{padding:clamp(4px,.6vw,10px) 0 clamp(26px,3.4vw,44px) clamp(14px,2.2vw,30px);
  border-inline-start:1px solid color-mix(in srgb,var(--stencil) 34%,transparent);
  margin-inline-start:clamp(14px,2.2vw,30px)}
.care__block[open] > .care__in > *{animation:careIn .5s var(--ease) both}
.care__block[open] > .care__in > :nth-child(2){animation-delay:.06s}
.care__block[open] > .care__in > :nth-child(3){animation-delay:.11s}
@keyframes careIn{from{opacity:0;transform:translateY(8px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}}
/* the registration line draws down the margin as the plate opens */
.care__block[open] > .care__in{animation:careRule .5s var(--ease) both}
@keyframes careRule{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.care__block[open] > summary i,.care__block[open] > summary .care__t i{color:var(--stencil-hi)}
@media(prefers-reduced-motion:reduce){
  .care__block[open] > .care__in > *,.care__block[open] > .care__in{animation:none}
  .care__block > summary::after,.care__mk::before,.care__mk::after{transition:none}
}
/* content inside a closed block must never animate itself out of existence */
.care__in .ink-in{opacity:1;transform:none;filter:none}

.care__list{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.85em;
  max-width:var(--measure)}
.care__list li{display:grid;grid-template-columns:auto 1fr;gap:.85em;align-items:start;
  font-size:var(--t-body);line-height:1.62}
.care__list li::before{content:"";width:7px;height:7px;margin-top:.55em;flex:none;
  background:var(--stencil);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.care__list--no li::before{background:var(--yant)}
.timeline{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:1.4em}
.timeline > div{display:grid;grid-template-columns:7.5rem 1fr;gap:1.2em;padding:1.05em 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.timeline dt{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--stencil);margin:0}
.timeline dt .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}
.timeline dd{margin:0;font-size:var(--t-body)}
.warn{border:1px solid var(--yant);padding:clamp(18px,2.4vw,30px);display:grid;gap:.7em}
.warn h3{color:var(--yant);font-size:var(--t-h4)}

/* ---------- lightbox ---------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:150;background:rgba(6,6,7,.97);display:none;
  align-items:center;justify-content:center;padding:clamp(46px,7vh,80px) var(--gut)}
.lb.is-open{display:flex}
.lb__fig{margin:0;max-inline-size:min(100%,1200px);max-block-size:100%;display:grid;gap:1rem;
  grid-template-rows:1fr auto;justify-items:center;
  animation:lbIn .5s var(--ease-ink)}
@keyframes lbIn{from{opacity:0;clip-path:polygon(0 0,0 0,-6% 104%,-6% 104%)}
  to{opacity:1;clip-path:polygon(0 0,112% -6%,106% 106%,0 100%)}}
/* the viewer loads one full-size file with no srcset, so the intrinsic size is
   the real size — the two maxima contain it in whichever direction runs out
   first, and the frame shrinks to the picture instead of the other way round */
.lb__fig img{inline-size:auto;block-size:auto;
  max-inline-size:100%;max-block-size:calc(100svh - 190px);margin-inline:auto}
.lb__cap{display:flex;justify-content:space-between;gap:1.5em;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute)}
.lb__x,.lb__p,.lb__n{position:absolute;z-index:2;width:48px;height:48px;display:grid;place-items:center;
  color:var(--paper);font-family:var(--f-mono);font-size:var(--m-lg);
  border:1px solid var(--ink-4);border-radius:50%;transition:.3s}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lb__x{top:clamp(14px,3vh,26px);right:var(--gut)}
.lb__p{left:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__n{right:clamp(10px,2vw,26px);top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb__p{left:auto;right:calc(var(--gut) + 58px);top:auto;bottom:18px;transform:none}
  .lb__n{right:var(--gut);top:auto;bottom:18px;transform:none}}

/* ---------- misc -------------------------------------------------------- */
.sticky-cta{position:fixed;left:var(--gut);right:var(--gut);bottom:14px;z-index:80;
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.45));
  padding-bottom:env(safe-area-inset-bottom,0);
  display:none;gap:.5em;transform:translateY(140%);transition:transform .5s var(--ease)}
.sticky-cta.on{transform:none}
/* the bar only sets geometry — colour stays with the button variant */
.sticky-cta .btn{flex:1;justify-content:center;padding:1.02em 1em}
@media(max-width:640px){.sticky-cta{display:flex}
  body:has(.sticky-cta) .ftr__legal{padding-bottom:64px}}
.pagehead{padding-block:clamp(120px,17vh,210px) clamp(30px,5vw,64px)}
.pagehead .display{font-size:var(--t-hero)}
.two{display:grid;gap:clamp(24px,3.4vw,56px)}
@media(min-width:860px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--gap-xl)}}
.noscript-note{padding:1em var(--gut);background:var(--yant);color:#fff;
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.1em;text-align:center}

/* =========================================================================
   THE MEGA MENU
   Opening it is a wipe, not a curtain: a slanted ink edge sweeps the
   viewport the same way every image on this site arrives. Behind it, a
   working table — the destinations on the left, and whatever you are
   pointing at on the right.
   ========================================================================= */
.mega{position:fixed;inset:0;z-index:95;color:var(--paper);visibility:hidden;
  pointer-events:none}
.mega.is-open{visibility:visible;pointer-events:auto}

/* the ink sheet. One clean angled sweep, with the violet transfer line running
   a beat ahead of it — the same order as a real stencil going down. */
.mega__ink{position:absolute;inset:0;background:var(--ink);
  clip-path:polygon(108% 0,108% 0,116% 100%,116% 100%);
  transition:clip-path .86s cubic-bezier(.19,.85,.24,1)}
.mega.is-open .mega__ink{clip-path:polygon(-22% 0,108% 0,116% 100%,-14% 100%)}
.mega__ink::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:clamp(40px,7vw,120px);
  background:linear-gradient(90deg,transparent,var(--ink));pointer-events:none}
.mega__line{position:absolute;top:0;bottom:0;width:2px;background:var(--stencil-hi);
  right:100%;opacity:0;transition:right .86s cubic-bezier(.19,.85,.24,1),opacity .3s}
.mega.is-open .mega__line{right:-2%;opacity:.85;transition-delay:0s,.06s}
.mega.is-closing .mega__line{opacity:0}

.mega__in{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;
  padding:clamp(76px,11vh,130px) var(--gut) clamp(24px,4vh,44px);
  opacity:0;transition:opacity .3s .1s}
.mega.is-open .mega__in{opacity:1;transition:opacity .4s .28s}

.mega__body{flex:1;display:grid;gap:clamp(20px,3vw,50px);min-height:0}
@media(min-width:940px){
  .mega__body{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:center}
}

/* --- destinations --- */
.mega__nav{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(2px,.6vh,10px);align-content:center}
.mega__item{position:relative}
.mega__link{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.1em 1.1em;
  align-items:baseline;padding:clamp(11px,1.8vh,20px) 0;
  border-bottom:1px solid var(--ink-4);
  opacity:0;transform:translateX(-16px);
  transition:opacity .5s var(--ease),transform .55s var(--ease),
             border-color .4s,padding-inline-start .45s var(--ease)}
.mega.is-open .mega__link{opacity:1;transform:none}
.mega__link:hover,.mega__link:focus-visible,.mega__item.is-on .mega__link{
  border-bottom-color:var(--paper-3);padding-inline-start:.7em}
.mega__i{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.16em;
  color:var(--stencil-hi);align-self:center}
.mega__t{font-family:var(--f-display);font-weight:400;letter-spacing:-.024em;
  font-size:var(--t-sec);line-height:1.08;
  color:color-mix(in srgb,var(--paper) 60%,transparent);transition:color .4s var(--ease)}
.mega__t .kh{font-family:var(--f-kh-display);font-size:.76em}
.mega__link:hover .mega__t,.mega__link:focus-visible .mega__t,
.mega__item.is-on .mega__t{color:var(--paper)}
/* the row you are on answers even when its picture is already up */
.mega__t,.mega__i{transition:color .3s var(--ease),transform .34s var(--ease-ink)}
@media(min-width:901px){
  .mega__link:hover .mega__t,.mega__link:focus-visible .mega__t{transform:translateX(9px)}
  .mega__link:hover .mega__i,.mega__link:focus-visible .mega__i{color:var(--yant-hi)}
}
.mega__note{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);align-self:center;text-align:right}
.mega__note .kh{font-family:var(--f-kh);font-size:var(--m-md);letter-spacing:0;text-transform:none}

/* --- the stage: what you are pointing at --- */
.mega__stage{position:relative;overflow:hidden;background:var(--ink-2);
  aspect-ratio:5/4;align-self:center;
  border:1px solid var(--ink-4)}
@media(max-width:939px){.mega__stage{display:none}}
.mega__shot{position:absolute;inset:0;opacity:0;
  clip-path:polygon(0 0,0 0,-8% 106%,-8% 106%);
  transition:clip-path .82s cubic-bezier(.19,.85,.24,1),opacity .3s linear,transform 1.4s var(--ease);
  transform:scale(1.04)}
.mega__shot.is-on{opacity:1;transform:scale(1);clip-path:polygon(0 0,118% -10%,110% 110%,0 100%)}
.mega__shot img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.mega__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.8vw,22px);
  display:flex;justify-content:space-between;gap:1em;align-items:flex-end;
  background:linear-gradient(0deg,rgba(11,11,12,.92),rgba(11,11,12,0));
  font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-3)}
.mega__cap b{color:var(--paper);font-weight:400}

/* --- foot --- */
.mega__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.9em 2.2em;
  padding-top:var(--gap-sm);margin-top:var(--gap-lg);
  border-top:1px solid var(--ink-4);
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);
  opacity:0;transform:translateY(10px);transition:.5s var(--ease) .34s}
.mega.is-open .mega__foot{opacity:1;transform:none}
.mega__foot a{transition:color .3s}
.mega__foot a:hover{color:var(--paper)}
.mega__foot .lang{margin-inline-start:auto}
.mega__mark{width:22px;color:var(--paper-3);flex:none}

/* --- mobile: a vertical sheet, each destination carrying its own image --- */
@media(max-width:939px){
  .mega__nav{gap:0;align-content:start;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mega__link{grid-template-columns:2rem 1fr 88px;align-items:center;
    padding:clamp(12px,2.1vh,20px) 0;gap:.9em}
  .mega__t{font-size:clamp(1.85rem,8.4vw,2.6rem)}
  .mega__note{display:none}
  .mega__thumb{width:88px;aspect-ratio:4/3;overflow:hidden;background:var(--ink-3);
    clip-path:polygon(0 0,0 0,-8% 106%,-8% 106%);
    transition:clip-path .6s var(--ease-ink) var(--sd,0ms)}
  .mega.is-open .mega__thumb{clip-path:polygon(0 0,118% -8%,110% 108%,0 100%)}
  .mega__thumb img{width:100%;height:100%;object-fit:cover}
}
@media(min-width:940px){.mega__thumb{display:none}}

.mega__x{position:absolute;top:clamp(12px,2vh,22px);right:var(--gut);z-index:3;
  width:44px;height:44px;display:grid;place-items:center;color:var(--paper);
  border:1px solid var(--ink-4);border-radius:50%;transition:.3s}
.mega__x:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .mega__ink,.mega__line,.mega__in,.mega__link,.mega__foot,.mega__shot,.mega__thumb{
    transition:none!important}
  .mega.is-open .mega__ink{clip-path:none}
}

/* =========================================================================
   THE PROCESS — one sticky stage, one piece, five phases
   The section is tall; the stage stays put and the tattoo moves through
   drawing → transfer → machine → ink → wipe as you scroll.
   ========================================================================= */
/* five phases, one screen of hold each plus a beat — long enough to feel
   like a transformation, short enough not to be a corridor */
.proc{position:relative;height:420vh}
.proc.is-static{height:auto}
.proc__sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
.is-static .proc__sticky{position:relative;height:auto;padding-block:clamp(60px,9vw,120px)}
.proc__stage{position:absolute;inset:0;z-index:0;background:var(--paper)}
.is-static .proc__stage{position:relative;aspect-ratio:16/10;inset:auto}

.proc__phase{position:absolute;inset:0;
  clip-path:polygon(0 0,0 0,-9% 106%,-9% 106%);
  transition:clip-path 1.05s var(--ease-ink),filter 1.2s var(--ease)}
.proc__phase.is-on,.proc__phase.is-past{clip-path:polygon(0 0,120% -12%,112% 112%,0 100%)}
/* one continuous camera move carried across all five frames */
.proc__phase img,.proc__phase video{transform:scale(1.05);
  transition:transform 5s cubic-bezier(.19,.7,.3,1)}
.proc__phase.is-on img,.proc__phase.is-on video{transform:scale(1)}
@media(prefers-reduced-motion:reduce){
  .proc__phase img,.proc__phase video{transform:none;transition:none}}
.proc__phase img,.proc__phase video{width:100%;height:100%;object-fit:cover;
  object-position:center 42%;display:block}
.is-static .proc__phase{position:relative;clip-path:none}
.is-static .proc__phase:not(.is-on){display:none}

/* phase 3 is the machine itself — a narrow window cut into the piece */
/* phase 03 is the machine itself — a tall window cut into the black */
.proc__phase--film{display:grid;place-items:center;background:#08080a}
.proc__phase--film video{width:min(58vw,520px);height:auto;max-height:78svh;
  object-fit:cover;border:1px solid var(--ink-4);
  margin-bottom:14vh}
@media(max-width:760px){.proc__phase--film video{width:82vw;margin-bottom:20vh}}

/* the type always has ground under it, in whichever palette is running */
.proc__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(237,232,224,0) 26%,rgba(237,232,224,.72) 52%,
             rgba(237,232,224,.97) 78%);
  transition:background .9s var(--ease)}
.proc.on-dark .proc__veil{
  background:linear-gradient(180deg,rgba(11,11,12,0) 24%,rgba(11,11,12,.74) 52%,
             rgba(11,11,12,.97) 78%)}

.proc__in{position:relative;z-index:2;width:100%;padding-block:clamp(24px,5vh,58px)}
.proc__head{margin-bottom:clamp(16px,3vh,34px)}
.proc__head .lede{color:var(--fg)}
.proc__head .section-h{max-width:14ch}
/* the stages are a caption, not a component: no cards, no descriptions, no
   progress bar. The picture is doing the explaining. */
.proc__steps{display:flex;flex-wrap:wrap;gap:0 clamp(16px,2.6vw,44px);list-style:none;
  margin:var(--gap-md) 0 0;padding:var(--gap-sm) 0 0;border-top:1px solid var(--rule)}
.proc__step{display:flex;align-items:baseline;gap:.5em;
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.17em;text-transform:uppercase;
  color:color-mix(in srgb,var(--fg) 62%,transparent);
  transition:color .55s var(--ease)}
.proc__step b{font-weight:400;font-size:.86em;color:color-mix(in srgb,var(--fg) 66%,transparent);
  transition:color .55s var(--ease)}
.proc__step .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0;text-transform:none}
.proc__step.is-on{color:var(--fg)}
.proc__step.is-on b{color:var(--stencil)}
.proc.on-dark .proc__step.is-on b{color:var(--stencil-hi)}
@media(max-width:640px){.proc__steps{gap:0 clamp(10px,3vw,20px)}.proc__step{font-size:var(--m-xs)}}

/* the section flips its palette as the ink phase takes over */
.proc{--fg:var(--ink);--rule:#C4BBAB;--dim:#5F5850;color:var(--ink)}
.proc.on-dark{--fg:var(--paper);--rule:#2A2A31;--dim:var(--mute);color:var(--paper)}
.proc.on-dark .proc__step b{color:var(--stencil-hi)}
/* ---------- viewer: inspect the piece, next one waiting at the edge ------ */
.lb__fig{position:relative}
.lb__fig img{cursor:zoom-in;transition:transform .5s var(--ease)}
.lb.is-zoom .lb__fig img{cursor:zoom-out;transition:transform .12s linear}
.lb__meta{position:absolute;top:clamp(16px,3vh,28px);left:var(--gut);margin:0;
  display:flex;gap:1.4em;font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.lb__meta span:first-child{color:var(--paper)}
.lb__peek{position:absolute;right:0;bottom:clamp(18px,5vh,54px);width:clamp(58px,7vw,96px);
  aspect-ratio:3/4;overflow:hidden;padding:0;border:0;opacity:.42;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:opacity .4s var(--ease),width .4s var(--ease)}
.lb__peek:hover,.lb__peek:focus-visible{opacity:1;width:clamp(74px,9vw,124px)}
.lb__peek img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.lb__peek{display:none}}
/* =========================================================================
   CONTINUITY
   Sections do not butt up against each other — one bleeds into the next
   along an ink edge, and images drift inside their frames as you pass them.
   ========================================================================= */
.edge{position:relative;height:clamp(40px,6vw,96px);margin-bottom:-1px;z-index:2;
  pointer-events:none;display:block;width:100%;overflow:hidden}
.edge svg{width:100%;height:100%;display:block}
/* the strip carries the palette it is LEAVING behind the shape, and the
   palette it is arriving at inside it — so a join reads the same wherever it
   sits in the document, not only where the section above happens to be dark */
.edge--to-paper{background:var(--ink)}
.edge--to-paper path{fill:var(--paper)}
.edge--to-ink{background:var(--paper)}
.edge--to-ink path{fill:var(--ink)}
/* Four shapes, never the same one twice: an ink wipe, a torn sheet, a
   hand-cut line, a body contour, and a transfer sheet lifting off. Each join
   gets the one that suits what it is joining. */
.edge--tear{height:clamp(38px,5vw,82px)}
.edge--cut{height:clamp(38px,5vw,78px)}
.edge--contour{height:clamp(44px,6.4vw,104px)}
.edge--sheet{height:clamp(40px,5.4vw,88px)}

/* scroll-linked drift: the picture moves a little slower than the page */
.drift{overflow:hidden}
.drift > picture,.drift > img,.drift picture > img{
  will-change:transform;transform:translate3d(0,var(--dy,0px),0) scale(1.12)}
@media (prefers-reduced-motion:reduce){
  .drift picture > img{transform:none}
}

/* the monogram used as a mask over photography */
.markmask{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.markmask img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:var(--mm);mask-image:var(--mm);
  -webkit-mask-size:82% auto;mask-size:82% auto;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* the mark block: photograph behind, monogram outline drawing over it */
.markblock__art{position:relative}
.markblock__art .markmask{position:absolute;inset:clamp(20px,4vw,50px);z-index:0}
.markblock__ghost{position:relative;z-index:1;width:min(62%,300px);color:var(--ink);
  mix-blend-mode:normal}
.markblock__art .mark--draw path{stroke:var(--yant)}
/* the outline stays an outline here — registration over the photograph */
.markblock__ghost path{animation:none!important;fill:none!important;
  stroke:var(--stencil);stroke-width:9;opacity:1}
.markblock__ghost.is-drawn path{animation:strokeIn 1250ms var(--ease-ink) forwards var(--sd,0ms)!important}
.markblock__art .markmask img{filter:contrast(1.06) saturate(.9)}
/* Meng in fragments — a list of facts, each arriving on its own line */
.frags{display:grid;gap:0;margin:clamp(22px,3vw,34px) 0 clamp(26px,3.4vw,40px);
  border-top:1px solid var(--rule)}
.frags > div{display:grid;grid-template-columns:2.4rem 1fr;gap:1em;align-items:baseline;
  padding:.72em 0;border-bottom:1px solid var(--rule)}
.frags dt{font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.14em;color:var(--stencil-hi);margin:0}
.frags dd{margin:0;font-size:var(--t-body);line-height:1.45;
  color:color-mix(in srgb,var(--fg) 86%,transparent)}
.paper .frags dt{color:var(--stencil)}

/* =========================================================================
   MOBILE — fewer layers, one thing at a time
   Decoration that reads as craft on a large screen reads as clutter on a
   phone. These are switched off rather than scaled down.
   ========================================================================= */
@media(max-width:760px){
  .drift picture > img{transform:none}          /* no parallax on a phone   */
  .markblock__art .markmask{inset:0;opacity:.5} /* mark: photo recedes      */
  .edge{height:clamp(26px,7vw,44px)}
  .count__marks{gap:0}
  .mk{padding-right:1.1em;font-size:var(--m-sm)}
  .archive-bar{gap:.5em 1.2em;font-size:var(--m-xs)}
  .archive-bar__sel{width:100%;order:3}
  /* the filters become one scrollable line each, instead of a wrapped block */
  .tabs{display:block;margin-bottom:var(--gap-sm)}
  .tabs > ul{display:flex!important;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;gap:0 clamp(14px,4.6vw,26px);min-inline-size:0;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .tabs > ul::-webkit-scrollbar{display:none}
  /* a filter is a thumb-sized target, not a word */
  .tab{padding:.55em 0 .8em}
  .tabs__lbl{margin-bottom:.6em}
  .proc__steps{gap:0 clamp(9px,3vw,16px)}
  /* the meta line leaves absolute positioning here, so the viewer has to
     stack instead of sharing one row with it */
  .lb{flex-direction:column;justify-content:center;
    padding:clamp(58px,9vh,84px) var(--gut) clamp(84px,12vh,110px)}
  .lb__meta{position:static;order:-1;margin:0 0 .6em;justify-content:center}
  .lb__fig img{max-block-size:calc(100svh - 210px);max-inline-size:100%}
  .lb__cap{justify-content:center;text-align:center}
}


/* =========================================================================
   SEAMS
   Palette changes get an ink edge. Same-palette joins get a hairline that
   draws itself as you cross — the needle, not a border.
   ========================================================================= */
.seam{position:relative;height:0;overflow:visible;z-index:2}
.seam::after{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;
  background:linear-gradient(90deg,var(--rule),color-mix(in srgb,var(--stencil-hi) 55%,transparent),var(--rule));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.25s var(--ease-ink)}
.seam.is-in::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.seam::after{transform:scaleX(1);transition:none}}

/* touch sizing that has to win over the page rules above it */
@media (hover:none),(pointer:coarse){
  .tab{padding-block:.86em 1.15em;min-inline-size:44px;flex:none}
  .tabs > ul > li{flex:none}
  /* the nav is a scroller, so it clips its own hit overlays — the strip
     itself has to be tall enough instead */
  .care__nav{gap:0 1.9em;padding-block:.42em .55em}
  .care__nav a{padding-block:.72em;min-block-size:44px;display:flex;align-items:center}
}

/* ==========================================================================
   NO JAVASCRIPT
   The archive is packed by script, so without it the absolute layout has
   nothing to position against. Fall back to a plain grid showing everything,
   and drop the filter controls rather than leave dead buttons on the page.
   ========================================================================== */
html:not(.js) .archive{display:grid;height:auto!important;
  grid-template-columns:repeat(auto-fill,minmax(clamp(160px,22vw,270px),1fr));
  gap:clamp(10px,1.4vw,22px)}
html:not(.js) .archive .tile{position:static;inline-size:auto!important;
  block-size:auto!important;transform:none!important;aspect-ratio:3/4}
html:not(.js) .archive .tile--feat{grid-column:span 2}
html:not(.js) .archive .tile img{block-size:100%}
html:not(.js) .tabs,
html:not(.js) .archive-bar,
html:not(.js) .archive-empty{display:none}

/* ==========================================================================
   AFTERCARE — the first screen
   One instruction, five rules, one photograph. Everything that needs a
   paragraph is underneath, closed.
   ========================================================================== */
.carehero{--bg:var(--ink);--fg:var(--paper);--rule:#26262A;--dim:#8A8A90;
  position:relative;isolation:isolate;overflow:hidden;background:var(--ink);
  min-height:clamp(560px,86svh,900px);display:flex;align-items:flex-end}
.carehero__media{position:absolute;inset:0;z-index:0}
.carehero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.carehero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,12,.78) 0%,rgba(11,11,12,.22) 30%,
               rgba(11,11,12,.5) 66%,rgba(11,11,12,.95) 100%),
             linear-gradient(90deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.5) 34%,
               rgba(11,11,12,.06) 62%)}
.carehero__in{position:relative;z-index:2;width:100%;color:var(--paper);
  padding-block:clamp(96px,14vh,150px) clamp(46px,7vh,86px)}
.carehero .display{font-size:var(--t-hero)}

/* five rules, numbered, each one a line you could shout across a room */
.rules{list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;
  display:grid;gap:0;max-width:34ch;
  border-top:1px solid color-mix(in srgb,var(--paper) 22%,transparent)}
.rules li{display:grid;grid-template-columns:2.6rem 1fr;gap:1em;align-items:baseline;
  padding:clamp(9px,1.2vw,14px) 0;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 15%,transparent);
  font-family:var(--f-display);font-weight:400;font-size:var(--t-h3);
  line-height:1.16;letter-spacing:-.014em}
.rules li .kh{font-size:.8em}
.rules i{font-family:var(--f-mono);font-size:var(--m-xs);font-style:normal;
  letter-spacing:.16em;color:var(--stencil-hi)}
.carehero__note{margin-top:clamp(22px,3vw,36px);max-width:var(--measure-lede);
  font-size:var(--t-body);color:color-mix(in srgb,var(--paper) 76%,transparent)}

/* On a phone the picture is a header, not a screen. It gets enough height to
   be cinematic and no more — the instruction and the first rules have to be
   on the first screen, and the crop is re-aimed so the piece sits behind the
   heading instead of a metre of empty skin above it. */
@media(max-width:760px){
  .carehero{min-height:clamp(560px,76svh,760px)}
  .carehero__media img{object-position:center 24%;transform:scale(1.16)}
  .carehero__veil{background:
    linear-gradient(180deg,rgba(11,11,12,.7) 0%,rgba(11,11,12,.12) 26%,
      rgba(11,11,12,.62) 58%,rgba(11,11,12,.97) 100%)}
  .carehero__in{padding-block:clamp(78px,12vh,110px) clamp(26px,4vh,44px)}
  .carehero .display{font-size:clamp(2.6rem,13vw,4rem)}
  .rules{max-width:none;margin-top:clamp(18px,3vh,30px)}
  .rules li{font-size:var(--t-h4);padding:clamp(7px,1vh,11px) 0}
  .carehero__note{margin-top:clamp(16px,2.4vh,26px);font-size:var(--t-sm)}
}
/* very short phones: the note can wait until you scroll */
@media(max-width:760px) and (max-height:720px){
  .carehero{min-height:82svh}
  .carehero__note{display:none}
}

/* ==========================================================================
   MOBILE — THE ARCHIVE IS A REEL, NOT A WALL
   One piece at a time, edge to edge, taller than the screen is wide. Each one
   arrives slightly offset and settles as it enters, so the page reads as a
   sequence of pieces rather than a grid that got narrower.
   ========================================================================== */
.archive.is-reel{display:flex;flex-direction:column;gap:clamp(52px,11vw,86px);
  height:auto!important;isolation:isolate;
  /* out past the gutter — the work owns the full width of the phone */
  margin-inline:calc(-1 * var(--gut));width:auto}
.archive.is-reel .tile{position:relative;inline-size:auto;block-size:auto;
  transform:none;transition:opacity .5s var(--ease),filter .5s var(--ease);
  aspect-ratio:4/5;overflow:hidden}
.archive.is-reel .tile--feat{aspect-ratio:3/4}
/* a landscape piece cannot be portrait, but it can still be big */
.archive.is-reel .tile[data-ar="1.7734"],
.archive.is-reel .tile[data-ar="1.45"],
.archive.is-reel .tile[data-ar="1.7"],
.archive.is-reel .tile[data-ar="1.35"]{aspect-ratio:1}
.archive.is-reel .tile.is-out{display:none}
.archive.is-reel .tile img{width:100%;height:100%;object-fit:cover;
  /* scroll-linked: the piece is oversized on the way in, settles as it
     arrives, and only reaches full contrast at the middle of the screen —
     one piece in focus at a time, the way you look through a tattoo book */
  transform:scale(var(--rs,1.08));transition:transform .1s linear;
  filter:saturate(calc(.72 + var(--rf,0) * .28)) contrast(calc(.92 + var(--rf,0) * .08))
         brightness(calc(.82 + var(--rf,0) * .18))}
.archive.is-reel .tile::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(11,11,12,.34);opacity:calc(1 - var(--rf,0));
  transition:opacity .18s linear}
.archive.is-reel .tile.is-focus::after{opacity:0}
.archive.is-reel .tile__n{top:0;bottom:auto;left:0;padding:1.3em 1.4em;
  font-size:var(--m-sm);mix-blend-mode:normal;color:var(--paper);opacity:.85;
  text-shadow:0 1px 12px rgba(6,6,8,.9)}
/* the caption belongs to the piece you are actually looking at */
.archive.is-reel .tile__meta{opacity:var(--rf,0);transform:translateY(calc((1 - var(--rf,0)) * 10px));
  padding:clamp(18px,5vw,26px);transition:none;
  background:linear-gradient(0deg,rgba(11,11,12,.9),rgba(11,11,12,.2) 54%,transparent)}
.archive.is-reel .tile__n{opacity:calc(.35 + var(--rf,0) * .5)}
.archive.is-reel .tile__t{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,6.4vw,2rem);letter-spacing:-.01em;text-transform:none;
  line-height:1.1;max-width:16ch}
.archive.is-reel .tile--feat .tile__t{font-size:clamp(1.6rem,7.6vw,2.4rem)}
/* every third piece is inset, so the column has a rhythm of its own */
.archive.is-reel .tile:nth-child(3n+2){margin-inline:clamp(14px,5vw,26px)}
@media (prefers-reduced-motion:reduce){
  .archive.is-reel .tile img{transform:none;filter:none}
  .archive.is-reel .tile::after{display:none}
  .archive.is-reel .tile__meta{opacity:1;transform:none}
}

/* ==========================================================================
   MOBILE — THE BODY SECTIONS
   On a phone the body pieces stop being a banner and become a held shot: the
   picture fills the screen, the crop travels as you scroll, and the words
   stay put until the next section slides up over the photograph.
   ========================================================================== */
@media (max-width:760px){
  /* taller than the screen, so there is something to travel through. One
     sticky frame holds BOTH the picture and the words for the whole shot —
     overflow has to open up here, a hidden ancestor kills position:sticky. */
  .bleed--tall{height:180svh;overflow:visible}
  .bleed__hold{position:sticky;top:0;height:100svh;overflow:hidden;
    display:block;isolation:isolate}
  .bleed--tall .bleed__media{position:absolute;inset:0;height:100%;z-index:1}
  .bleed--tall .bleed__media picture{display:block;height:100%}
  .bleed--tall .bleed__media img{
    height:100%;object-fit:cover;
    /* --bt runs 0 → 1 across the section; the crop and the scale ride it */
    object-position:center calc(var(--bpy,34%) + (var(--bt,0) * 15%));
    transform:scale(calc(1.13 - var(--bt,0) * .13));transition:none}
  /* the words hold at the foot of the screen for the whole shot */
  /* clear of the sticky call bar, which is always on at this width */
  .bleed__over{position:absolute;inset:auto 0 0;z-index:2;
    background:linear-gradient(0deg,rgba(11,11,12,.95) 18%,rgba(11,11,12,.6) 52%,rgba(11,11,12,0));
    padding-bottom:calc(clamp(26px,4vh,52px) + 78px + env(safe-area-inset-bottom,0px))}
  .bleed .section-h{font-size:clamp(2rem,10.5vw,3.2rem)}
  /* and the next section slides up over the photograph */
  .bleed--tall + *{position:relative;z-index:3;background:var(--bg)}
  .edge + .bleed--tall{margin-top:0}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .bleed--tall{height:auto}
  .bleed__hold{position:relative;height:auto}
  .bleed--tall .bleed__media{position:relative;height:76svh}
  .bleed--tall .bleed__media img{transform:none;object-position:center var(--bpy,34%)}
  .bleed__over{position:absolute;margin-top:0;height:auto;display:block}
}

/* ==========================================================================
   MOBILE — THE MENU
   Not the desktop menu made narrow. Five tall rows, each carrying its own
   cropped piece of work, and the row you are on fills the sheet behind them.
   ========================================================================== */
.mega__back{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background-size:cover;background-position:center 42%;
  transition:opacity .55s var(--ease)}
@media (max-width:900px){
  .mega.is-open .mega__back{opacity:.22}
  .mega__back::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(11,11,12,.72),rgba(11,11,12,.42) 42%,rgba(11,11,12,.9))}
  .mega__in{z-index:1}

  .mega__nav{gap:0}
  .mega__item{border-bottom:1px solid color-mix(in srgb,var(--paper) 13%,transparent)}
  .mega__item:first-child{border-top:1px solid color-mix(in srgb,var(--paper) 13%,transparent)}
  /* six rows, a footer and a close button have to share a short phone */
  .mega__link{position:relative;display:block;padding:clamp(11px,1.7vh,20px) 0;
    min-height:clamp(64px,10.2vh,104px);overflow:hidden}
  /* the piece of work is the right half of the row, cropped hard */
  /* the work runs off the right edge of the phone, not the gutter */
  .mega__thumb{position:absolute;top:0;bottom:0;left:46%;
    right:calc(-1 * var(--gut));width:auto;aspect-ratio:auto;opacity:.92;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);
    mask-image:linear-gradient(90deg,transparent,#000 34%)}
  .mega__thumb img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
  .mega__i{position:absolute;left:0;top:clamp(11px,1.7vh,20px);
    font-size:var(--m-xs);color:var(--stencil-hi)}
  .mega__t{position:relative;z-index:2;display:block;padding-inline-start:2.6rem;
    font-size:clamp(2rem,9vw,2.9rem);text-shadow:0 2px 22px rgba(6,6,8,.9)}
  .mega__item.is-near .mega__t{color:var(--paper)}
  .mega__note{display:none}
}
@media (prefers-reduced-motion:reduce){ .mega__back{transition:none} }

/* the step row has to clear the call bar on a phone */
@media (max-width:640px){
  .proc__in{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

/* the hand-cut edges drift a few pixels as they cross the screen, so a join
   between two sections is never quite the same twice */
.edge svg{transform:translate3d(var(--ex,0px),0,0) scaleX(1.04);
  transform-origin:50% 100%;will-change:transform}
@media (prefers-reduced-motion:reduce){ .edge svg{transform:none} }