/* =========================================================================
   MENG TATTOO — Street 90, Phnom Penh
   Concept: ស្នាម "the mark" — stencil → needle → ink → wipe → heal
   Palette sampled from Meng's own material:
     stencil violet .... thermal transfer paper (see: stencil-body)
     yant red .......... his red sak-yant / red-ink work
     paper cream ....... the painted lettering on the shopfront glass
   ========================================================================= */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../assets/fonts/space-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Kantumruy Pro";src:url("../assets/fonts/kantumruy-pro-khmer-wght-normal.woff2") format("woff2-variations");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+1780-17FF,U+19E0-19FF,U+200B-200D,U+25CC}
@font-face{font-family:"Kantumruy Pro";src:url("../assets/fonts/kantumruy-pro-latin-wght-normal.woff2") format("woff2-variations");font-weight:100 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Noto Serif Khmer";src:url("../assets/fonts/noto-serif-khmer-khmer-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif Khmer";src:url("../assets/fonts/noto-serif-khmer-khmer-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0B0B0C;      --ink-2:#131316;   --ink-3:#1B1B20;   --ink-4:#26262C;
  --paper:#EDE8E0;    --paper-2:#DCD5C8; --paper-3:#C3BAA9;
  --stencil:#5B4E96;  --stencil-hi:#8B7DC9; --stencil-lo:#3E3568;
  --yant:#B3322F;     --yant-hi:#D84A44;  --yant-dk:#8B2523;
  --tungsten:#C8A46B;
  --mute:#83838C;

  --bg:var(--ink); --fg:var(--paper); --rule:#2A2A31; --dim:var(--mute);

  --f-display:"Instrument Serif","Noto Serif Khmer",Georgia,"Times New Roman",serif;
  --f-sans:"Archivo","Kantumruy Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Space Mono","Kantumruy Pro",ui-monospace,"SF Mono",Menlo,monospace;
  --f-kh:"Kantumruy Pro","Noto Sans Khmer","Khmer OS Battambang",system-ui,sans-serif;
  --f-kh-display:"Noto Serif Khmer","Kantumruy Pro","Khmer OS Muol Light",serif;

  /* ---- spacing scale. every section uses these, nothing improvises ---- */
  --gut:clamp(18px,4.2vw,64px);      /* page gutter                        */
  --maxw:1560px;                     /* content cap                        */
  --sec:clamp(80px,10vw,168px);      /* section vertical rhythm            */
  --sec-tight:clamp(52px,6vw,96px);
  --gap-xs:clamp(6px,.7vw,10px);
  --gap-sm:clamp(12px,1.4vw,20px);
  --gap-md:clamp(20px,2.4vw,34px);
  --gap-lg:clamp(30px,3.6vw,54px);
  --gap-xl:clamp(44px,5.4vw,86px);
  --head-gap:clamp(28px,4vw,64px);   /* section head → content             */
  --measure:64ch;                    /* body text                          */
  --measure-lede:46ch;
  /* ---- type scale. Nine steps, and nothing outside them. Every heading,
     lede and label on the site resolves to one of these — a size that is
     not on this list is a mistake, not a decision. ---- */
  --t-hero :clamp(2.9rem,9.4vw,9rem);      /* the one statement per page   */
  --t-sec  :clamp(2rem,5.4vw,4.6rem);      /* section heads, menu links    */
  --t-sub  :clamp(1.5rem,3.4vw,2.7rem);    /* pull quotes, sub-heads       */
  --t-h3   :clamp(1.32rem,2.4vw,2rem);     /* card and plate titles        */
  --t-h4   :clamp(1.12rem,1.9vw,1.5rem);   /* the smallest serif           */
  --t-lede :clamp(1.02rem,1.35vw,1.32rem); /* opening paragraph            */
  --t-ctl  :clamp(.94rem,1.4vw,1.12rem);    /* a choice you can click       */
  --t-body :clamp(15px,1.02vw,17px);       /* prose                        */
  /* the mono label ladder — four rungs, nothing between them */
  --m-xs   :.62rem;   --m-sm:.68rem;   --m-md:.78rem;   --m-lg:.86rem;
  --t-sm   :clamp(.72rem,.95vw,.9rem);     /* small mono, sentence case    */
  --t-lbl  :clamp(.6rem,.78vw,.74rem);     /* mono label, all caps         */
  /* Khmer runs shorter than Latin at the same em, so the two poster steps
     carry their own optical size. Same role, corrected size. */
  --t-hero-kh :clamp(2.6rem,9vw,7.6rem);
  --t-hero-kh-lg:clamp(4rem,16vw,12rem);
  /* deliberately outside the scale — set as objects, not as text */
  --t-poster :clamp(4.4rem,19vw,15rem);
  --t-numeral:clamp(6.5rem,19vw,17rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-ink:cubic-bezier(.16,.84,.24,1);
  --wipe:1150ms;
}

/* light "paper" sections invert the whole token set */
.paper{--bg:var(--paper);--fg:var(--ink);--rule:#C4BBAB;--dim:#5F5850}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:1.62;
  font-weight:380;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--stencil);color:#fff}

/* ---------- bilingual system --------------------------------------------
   Both languages live in the DOM (good for search + for people who switch).
   Khmer is not "the translation" — it gets its own face, leading and rhythm.
   ------------------------------------------------------------------------ */
html[data-lang="en"] .kh{display:none}
html[data-lang="kh"] .en{display:none}
.kh{font-family:var(--f-kh);line-height:1.95;letter-spacing:0;font-weight:400}
h1 .kh,h2 .kh,h3 .kh,.display .kh,.stat__n .kh{
  font-family:var(--f-kh-display);font-weight:600;line-height:1.6;letter-spacing:0;
}
/* Khmer needs a smaller optical size to match Latin cap-height, and more air */
html[data-lang="kh"] .display{font-size:var(--t-hero-kh);line-height:1.5}
html[data-lang="kh"] .hero .display{font-size:var(--t-hero-kh-lg);line-height:1.24}
html[data-lang="kh"] h2.section-h{line-height:1.5}
html[data-lang="kh"] .eyebrow{letter-spacing:.02em;font-size:var(--m-md)}
html[data-lang="kh"] .lede{line-height:2}

/* ---------- type ---------- */
.display{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-hero);line-height:.92;letter-spacing:-.022em;
  margin:0;text-wrap:balance;
}
.display em{font-style:italic}
h2.section-h{
  font-family:var(--f-display);font-weight:400;
  font-size:var(--t-sec);line-height:1.02;letter-spacing:-.018em;margin:0;
  text-wrap:balance;
}
h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-h3);
  line-height:1.12;letter-spacing:-.012em;margin:0}
.lede{font-size:var(--t-lede);line-height:1.66;font-weight:380;
  color:color-mix(in srgb,var(--fg) 88%,transparent);max-width:var(--measure-lede);text-wrap:pretty}
p{margin:0 0 1.05em;max-width:var(--measure);text-wrap:pretty}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0;display:flex;align-items:center;gap:.7em;flex-wrap:wrap;
}
.eyebrow--v{color:var(--stencil-hi)}
.paper .eyebrow--v{color:var(--stencil)}

/* section index numeral — drawn like a stencil label */
.idx{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.16em;color:var(--stencil-hi)}
.paper .idx{color:var(--stencil)}

.rule{height:1px;background:var(--rule);border:0;margin:0}
/* the "needle" rule: extends itself in short mechanical steps */
.rule--needle{transform-origin:left;transform:scaleX(0);
  transition:transform 1s steps(14,end) var(--d,0ms)}
.is-in .rule--needle{transform:scaleX(1)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:var(--sec-tight)}
.paper{background:var(--paper);color:var(--ink)}

.section-head{display:grid;gap:var(--gap-sm);margin-bottom:var(--head-gap)}
@media(min-width:900px){
  .section-head{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    align-items:end;column-gap:clamp(30px,5vw,90px)}
  .section-head .lede{justify-self:end}
}

/* ---------- reveal: images arrive WIPED, not faded -----------------------
   clip-path sweeps along a shallow arc, the way a hand crosses skin.
   ------------------------------------------------------------------------ */
.wipe{
  clip-path:polygon(0 0,0 0,-8% 106%,-8% 106%);
  opacity:.001;
  transition:clip-path var(--wipe) var(--ease-ink) var(--d,0ms),
             opacity 340ms linear var(--d,0ms),
             filter 1.5s var(--ease) calc(var(--d,0ms) + 420ms),
             transform 1.6s var(--ease) calc(var(--d,0ms) + 380ms);
  filter:contrast(1.14) saturate(.86);
  transform:scale(1.028);
  will-change:clip-path;
}
.is-in .wipe,.wipe.is-in{
  clip-path:polygon(0 0,118% -12%,110% 112%,0 100%);
  opacity:1;filter:contrast(1) saturate(1);transform:scale(1);
}
/* text arrives with a soft ink bleed */
.ink-in{opacity:0;transform:translateY(14px);filter:blur(5px);
  transition:opacity .8s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),
             filter .8s var(--ease) var(--d,0ms)}
.is-in .ink-in,.ink-in.is-in{opacity:1;transform:none;filter:blur(0)}
/* nothing is revealed by script when there is no script — everything is
   simply there */
html:not(.js) .ink-in,html:not(.js) .wipe{opacity:1;transform:none;filter:none;
  clip-path:none;transition:none}

@media (prefers-reduced-motion:reduce){
  .wipe,.ink-in,.rule--needle{transition:none!important;clip-path:none!important;
    opacity:1!important;transform:none!important;filter:none!important}
}

/* ---------- figures ---------- */
figure{margin:0}
.fig{position:relative;overflow:hidden;background:var(--ink-2)}
.fig img,.fig video{width:100%;height:100%;object-fit:cover;display:block}
.fig--tall{aspect-ratio:3/4}
.fig--port{aspect-ratio:4/5}
.fig--sq{aspect-ratio:1}
.fig--wide{aspect-ratio:16/10}
.fig--body{aspect-ratio:9/16}
.cap{margin-top:.85rem;display:flex;gap:.75em;align-items:baseline;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim)}
.cap b{font-weight:400;color:color-mix(in srgb,var(--fg) 72%,transparent)}
.cap .tag{color:var(--stencil-hi)}
.paper .cap .tag{color:var(--stencil)}

/* ---------- buttons -----------------------------------------------------
   Three explicit variants, no parent-selector inheritance, no clip-path
   sweep. A sweep looks good and produces an unreadable frame halfway
   through; these never invert, so every moment of every transition is
   legible. Contrast is stated next to each rule.
   ------------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.85em;position:relative;
  padding:1.02em 1.9em;border:1px solid transparent;border-radius:2px;
  font-family:var(--f-mono);font-size:var(--m-md);letter-spacing:.19em;text-transform:uppercase;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),transform .3s var(--ease);
}
.btn .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0;text-transform:none}
.btn:active{transform:translateY(1px)}
.btn__dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

/* on ink — 13.9:1 at rest, 12.1:1 on hover */
.btn--ink{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 38%,transparent);
  background:transparent}
.btn--ink:hover,.btn--ink:focus-visible{
  border-color:var(--paper);background:color-mix(in srgb,var(--paper) 13%,transparent)}

/* on paper — 15.8:1 at rest, 14.2:1 on hover */
.btn--paper{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 34%,transparent);
  background:transparent}
.btn--paper:hover,.btn--paper:focus-visible{
  border-color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* the one red thing — 5.2:1 at rest, 7.9:1 on hover. white text throughout */
.btn--red{color:#fff;background:var(--yant);border-color:var(--yant)}
.btn--red:hover,.btn--red:focus-visible{background:var(--yant-dk);border-color:var(--yant-dk)}

/* solid paper — for controls that float over unknown backgrounds (16.6:1) */
.btn--solid{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--paper-2);border-color:var(--paper-2)}

/* ==========================================================================
   THE HOVER LANGUAGE
   One idea, used everywhere: a stencil line is laid down first, and the ink
   follows it. Nothing flashes, nothing inverts, nothing changes the label's
   colour — every variant's contrast is the same at rest and on hover.
   ========================================================================== */

/* a violet transfer line runs along the bottom edge of a button before the
   ink does — 180ms, left to right, the direction a stencil goes on */
.btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--stencil-hi);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .34s var(--ease-ink);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn__dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;
  transition:background-color .3s var(--ease),transform .3s var(--ease-ink)}
.btn:hover .btn__dot{background:var(--stencil-hi);transform:scale(1.5)}
.btn--red:hover .btn__dot,.btn--red:focus-visible .btn__dot{background:#fff;transform:scale(1.5)}
.btn--red::after{background:rgba(255,255,255,.85)}

/* a text link: the underline draws like a single tattoo line, violet first */
.lnk{position:relative;display:inline-block;padding-bottom:.28em;
  font-family:var(--f-mono);font-size:var(--m-md);letter-spacing:.19em;
  text-transform:uppercase;color:var(--fg);background:none;border:0;
  cursor:pointer;transition:color .3s var(--ease)}
.lnk .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0;text-transform:none}
.lnk::before,.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.lnk::before{background:color-mix(in srgb,currentColor 26%,transparent)}
.lnk::after{background:var(--stencil-hi);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .38s var(--ease-ink)}
.lnk:hover::after,.lnk:focus-visible::after{transform:scaleX(1)}
.lnk[aria-expanded="true"]::after{transform:scaleX(1)}

/* an image: it does not zoom, it shifts, the way a print does under a hand */
.fig{overflow:hidden}
@media (hover:hover) and (pointer:fine){
  a:hover > .fig > img,a:focus-visible > .fig > img,
  a:hover > .fig > picture > img,a:focus-visible > .fig > picture > img{
    transform:scale(1.022) translateY(-4px)}
}

@media (prefers-reduced-motion:reduce){
  .btn::after,.lnk::after{transition:none}
  .btn:hover .btn__dot{transform:none}
}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--stencil-hi);outline-offset:3px;border-radius:2px}
.paper :where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline-color:var(--stencil)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:1em 1.4em;
  background:var(--paper);color:var(--ink);font-family:var(--f-mono);font-size:var(--m-md)}
.skip:focus{left:12px;top:12px}

/* ---------- the mark ---------- */
/* Every instance is a <use> of one <symbol>. A descendant selector cannot
   reach inside that shadow tree, so `.mark path{fill}` never applied and the
   monogram painted black in every state — invisible on ink. `fill` inherits
   through <use>, so it has to be set on the <svg> itself. */
.mark{display:block;color:currentColor;fill:currentColor}
.mark path{fill:currentColor}
/* and it is never allowed to resolve to the background it sits on */
.hdr .mark,.mega .mark,.ftr .mark{fill:currentColor}
.mark--draw path{fill:transparent;stroke:var(--stencil-hi);stroke-width:9;
  stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
.mark--draw.is-drawn path{
  animation:strokeIn 1150ms var(--ease-ink) forwards var(--sd,0ms),
            inkFill 620ms var(--ease) forwards calc(var(--sd,0ms) + 900ms);
}
.paper .mark--draw path{stroke:var(--stencil)}
@keyframes strokeIn{to{stroke-dashoffset:0}}
@keyframes inkFill{to{fill:currentColor;stroke-width:0}}
@media (prefers-reduced-motion:reduce){
  .mark--draw path{fill:currentColor;stroke-width:0;stroke-dashoffset:0}
}

/* the identity reacts. On hover the monogram redraws itself in stencil violet
   and inks back in — the same thing it does on the way into the site, at a
   fifth of the length. No jump, no spin; the mark just goes on again. */
.mark--flash path{
  animation:markStencil 260ms var(--ease-ink) forwards var(--sd,0ms),
            markInk 300ms var(--ease) forwards calc(var(--sd,0ms) + 240ms);
}
@keyframes markStencil{
  0%  {fill:currentColor;stroke:var(--stencil-hi);stroke-width:0;stroke-dashoffset:0}
  100%{fill:transparent;  stroke:var(--stencil-hi);stroke-width:7;stroke-dashoffset:0}
}
@keyframes markInk{
  from{fill:transparent;stroke:var(--stencil-hi);stroke-width:7}
  to  {fill:currentColor;stroke:var(--stencil-hi);stroke-width:0}
}
.paper .mark--flash path{stroke:var(--stencil)}
/* over the red the violet would vanish, so the stencil goes white there */
.hdr__brand:hover .mark--flash path,.hdr__brand:focus-visible .mark--flash path{stroke:#fff}
/* the wordmark gets the same transfer line every other link has */
.hdr__name{position:relative}
.hdr__name::after{content:"";position:absolute;left:0;right:0;bottom:-.32em;height:1px;
  background:var(--stencil-hi);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s var(--ease-ink)}
.hdr__brand:hover .hdr__name::after,
.hdr__brand:focus-visible .hdr__name::after{transform:scaleX(1);background:#fff}
@media (prefers-reduced-motion:reduce){
  .mark--flash path{animation:none}
  .hdr__name::after{transition:none}
}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;gap:clamp(12px,2vw,34px);
  padding:clamp(11px,1.5vw,20px) var(--gut);
  color:var(--paper);
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s,
             transform .45s var(--ease),color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:color-mix(in srgb,var(--ink) 78%,transparent);
  backdrop-filter:blur(15px) saturate(1.3);border-bottom-color:var(--ink-4)}
.hdr.is-hidden{transform:translateY(-102%)}

/* ---- header tone -------------------------------------------------------
   Three declared states, never a guess. A section says what it is with
   data-hdr; the header takes the tone of the last zone crossing its band.
     light  — flat paper underneath, so the controls go to ink
     media  — a photograph underneath, whose brightness we cannot predict, so
              a thin dark glass goes down and the controls stay paper
     (none) — flat ink underneath; transparent, paper controls
   ---------------------------------------------------------------------- */
.hdr.tone-light:not(.is-stuck){color:var(--ink)}
.hdr.tone-media:not(.is-stuck){
  background:linear-gradient(180deg,rgba(9,9,11,.62),rgba(9,9,11,.34) 62%,rgba(9,9,11,0));
  backdrop-filter:blur(9px) saturate(1.15);color:var(--paper)}
/* iPhone chrome: the bar must never sit under the notch */
.hdr{padding-top:calc(clamp(11px,1.5vw,20px) + env(safe-area-inset-top,0px))}
/* ---- the brand is the quickest way to reach him ------------------------
   It looks like branding at rest. On hover the yant red slides in behind it,
   the monogram goes on again in stencil violet and resolves white, and the
   whole thing is a link to contact. No red until you touch it. */
.hdr__brand{position:relative;display:flex;align-items:center;gap:.7em;flex:none;
  padding:.42em .72em;margin-inline-start:-.72em;border-radius:2px;isolation:isolate}
.hdr__brand .mark,.hdr__brand .hdr__name{position:relative;z-index:1}
.hdr__ink{position:absolute;inset:0;z-index:0;border-radius:2px;background:var(--yant);
  transform:scaleX(0);transform-origin:0 50%;opacity:0;
  transition:transform .34s var(--ease-ink),opacity .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .hdr__brand:hover .hdr__ink,.hdr__brand:focus-visible .hdr__ink{transform:none;opacity:1}
  .hdr__brand:hover,.hdr__brand:focus-visible{color:#fff}
  .hdr__brand:hover .mark,.hdr__brand:focus-visible .mark{fill:#fff}
}
/* a phone has no hover, so it gets one short flash on the way out */
@media (hover:none),(pointer:coarse){
  .hdr__brand:active .hdr__ink{transform:none;opacity:1;transition:none}
  .hdr__brand:active{color:#fff}
  .hdr__brand:active .mark{fill:#fff}
}
.hdr__brand .mark{width:26px;height:auto;transition:fill .25s var(--ease)}
.hdr__name{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.24em;text-transform:uppercase;
  transition:color .25s var(--ease)}
.hdr__nav{display:none;margin-inline-start:auto;align-items:center;gap:clamp(14px,2.1vw,32px)}
@media(min-width:1000px){.hdr__nav{display:flex}}
.navlink{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.17em;text-transform:uppercase;
  position:relative;padding:.5em 0;color:color-mix(in srgb,currentColor 74%,transparent);
  transition:color .3s}
.navlink .kh{font-size:var(--m-lg);letter-spacing:0}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease-ink)}
.navlink:hover,.navlink:focus-visible,.navlink[aria-current="page"]{color:currentColor}
.navlink:hover::after,.navlink:focus-visible::after,.navlink[aria-current="page"]::after{transform:scaleX(1)}
.hdr__end{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(10px,1.4vw,18px)}
@media(min-width:1000px){.hdr__end{margin-inline-start:0}}

.lang{display:flex;align-items:center;border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  border-radius:2px;flex:none}
.lang button{padding:.42em .72em;font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.12em;
  opacity:.6;transition:.3s;line-height:1.35;min-width:2.6em}
/* the active language is marked, not filled — it should not out-shout the
   identity next to it, least of all in Khmer where the glyph is wider */
.lang{border-color:color-mix(in srgb,currentColor 22%,transparent)}
.lang button{position:relative}
.lang button[aria-pressed="true"]{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.lang button:hover{opacity:.9}
.lang button:nth-child(2){font-family:var(--f-kh);font-size:.95rem;letter-spacing:0;
  padding:.1em .6em .3em;min-width:3.4em;line-height:1.15}

.hdr__cta{display:none}
@media(min-width:640px){.hdr__cta{display:inline-flex;padding:.72em 1.15em;font-size:var(--m-sm)}}

/* the menu button — the only navigation control on the page */
.burger{display:flex;align-items:center;gap:.7em;flex:none;padding:.5em .2em}
.burger__ico{position:relative;width:20px;height:11px;flex:none}
.burger__ico::before,.burger__ico::after{content:"";position:absolute;left:0;width:20px;height:1.5px;
  background:currentColor;transition:.42s var(--ease)}
.burger__ico::before{top:0}
.burger__ico::after{top:9px;width:13px}
.burger:hover .burger__ico::after,.burger:focus-visible .burger__ico::after{width:20px}
.burger[aria-expanded="true"] .burger__ico::before{top:5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__ico::after{top:5px;width:20px;transform:rotate(-45deg)}
.burger__lbl{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.19em;text-transform:uppercase}
.burger__lbl .kh{font-family:var(--f-kh);font-size:var(--m-lg);letter-spacing:0;text-transform:none}
@media(max-width:420px){.burger__lbl{display:none}}

/* ---------- footer ---------- */
.ftr{background:var(--ink-2);color:var(--paper);padding-block:clamp(50px,7vw,96px);position:relative}
.ftr__grid{display:grid;gap:clamp(30px,4vw,54px)}
@media(min-width:820px){.ftr__grid{grid-template-columns:1.25fr 1fr 1fr auto}}
.ftr .ftr__h{font-family:var(--f-mono);font-size:var(--m-sm);letter-spacing:.19em;text-transform:uppercase;
  color:var(--mute);margin:0 0 1.15em;font-weight:400}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.62em}
.ftr li a{font-size:var(--t-sm);color:color-mix(in srgb,var(--paper) 82%,transparent);transition:color .3s}
.ftr li a:hover{color:var(--paper)}
.ftr__mark{width:52px;color:var(--paper-3);margin-bottom:1.3rem}
.ftr__legal{margin-top:clamp(34px,5vw,62px);padding-top:1.7rem;border-top:1px solid var(--ink-4);
  display:flex;flex-wrap:wrap;gap:.8em 1.8em;font-family:var(--f-mono);font-size:var(--m-xs);
  letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}

/* relief band lifted from the shopfront fascia on Street 90 */
.relief{height:54px;background:url("../assets/images/relief.webp") repeat-x center/auto 100%;
  opacity:.5;filter:invert(0)}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;z-index:120;pointer-events:none;mix-blend-mode:difference;
  will-change:transform;opacity:0;transition:opacity .35s}
.cur.on{opacity:1}
.cur__dot{width:7px;height:7px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease)}
.cur.wide .cur__dot{width:52px;height:52px;background:transparent;border:1px solid #fff}
.cur__lbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);
  font-family:var(--f-mono);font-size:var(--m-xs);letter-spacing:.16em;color:#fff;opacity:0;
  transition:.3s var(--ease);white-space:nowrap;text-transform:uppercase}
.cur.wide .cur__lbl{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:none),(prefers-reduced-motion:reduce){.cur{display:none}}
/* cursor states: a dot that becomes a cloth over the hero, a label over work */
.cur.cur--wipe .cur__dot{width:74px;height:74px;background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.55)}
.cur.cur--soft .cur__dot{width:16px;height:16px;background:#fff;border:0}
.cur__trail{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%);opacity:.5}

/* ==========================================================================
   TOUCH TARGETS
   Every control clears 44px under a finger without moving a single pixel of
   the layout — the hit area is a transparent overlay, not extra padding.
   ========================================================================== */
@media (hover:none),(pointer:coarse){
  .hdr__brand,.lang button,.burger,.mega__foot a,.care__nav a,.eyebrow a{position:relative}
  .hdr__brand::after,.lang button::after,.burger::after,
  .mega__foot a::after,.care__nav a::after,.eyebrow a::after{
    content:"";position:absolute;left:50%;top:50%;
    width:max(100%,44px);height:max(100%,44px);
    transform:translate(-50%,-50%);pointer-events:auto}
  /* a control's overlay must not be eaten by its neighbour's */
  .lang button{padding-inline:.95em;min-inline-size:44px}
}