/* fonts.css */
/* Archivo (Latin, variable wght, SIL OFL) carries every Latin glyph.
   Hind (Devanagari, SIL OFL) carries Nepali at 500 and 600. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/archivo/archivo-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-06.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-07.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/hind-08.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hind-09.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hind-10.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/hind-11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hind-12.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hind-13.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/hind-14.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hind-15.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
/* latin-ext */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hind-16.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/hind-17.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* css/theme.css */
/* ==========================================================================
   SNS theme: every colour token, five modes (addendum section 3).
   Keyed on :root[data-theme=light|dark|sand|silver|red]. light is the default
   when no attribute is set. prefers-color-scheme: dark maps to dark only when
   no data-theme is set (a saved choice always wins). js/theme-early.js writes
   the attribute before first paint.

   Token contract
     --bg        page ground            --bg-2      section ground (slightly off --bg)
     --fg        primary text           --fg-2      secondary text   --fg-3  tertiary text
     --accent    red text accent (the red mode has none and uses ivory)
     --fill      pill / button fill     --on-fill   text on --fill
     --cta       the one red CTA        --on-cta    text on --cta
     --nav-1..3  staircase menu tints   (text on them is --fg)

   Contrast, WCAG 2.x, computed by tools/contrast.js (re-run it after editing):
   
   pair               light    dark    sand  silver     red os-dark
   fg on bg           18.16   19.26   11.50   10.88    5.71   19.26
   fg-2 on bg          7.75   10.59    7.23    7.46    4.96   10.59
   fg-3 on bg          5.86    8.03    6.20    6.44    5.32    8.03
   accent on bg        7.20    4.78    6.45    6.10    5.71    4.78
   fg on bg-2         16.61   18.48   10.35    9.76    6.72   18.48
   fg-2 on bg-2        7.09   10.15    6.51    6.70    5.84   10.15
   fg-3 on bg-2        5.36    7.70    5.58    5.78    6.26    7.70
   accent on bg-2      6.58    4.59    5.81    5.48    6.72    4.59
   fg on tile 5%      16.31   17.94   10.43    9.87    5.42   17.94
   fg-2 on tile 5%     6.96    9.86    6.56    6.77    4.71    9.86
   fg on tile 10%     14.72   16.13    9.44    8.92    5.11   16.13
   on-fill on fill    18.16   19.26   11.50   10.88    7.20   19.26
   on-cta on cta       5.71    5.71    5.71    5.71    7.20    5.71
   fg on nav-1        13.36   13.17    8.44    7.76    8.68   13.17
   fg on nav-2        14.72   15.46    9.46    8.82    7.66   15.46
   fg on nav-3        16.16   17.32   10.56    9.98    6.78   17.32
   AA needs 4.5:1 for text. Decorative pieces (hairlines, the ghost watermark,
   the 1px swatch rings) are exempt and are marked aria-hidden in markup.
   ========================================================================== */

/* ---------- light (default) ---------- */
:root,
:root[data-theme='light'],
[data-theme-scope='light'] {
  color-scheme: light;
  --bg: #F5F5F5;      --bg-2: #EBEBEB;
  --fg: #0A0A0A;      --fg-2: #4D4D4D;    --fg-3: #5F5F5F;
  --accent: #A50E19;
  --fill: #0A0A0A;    --on-fill: #F5F5F5;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #D4D4D4;   --nav-2: #DEDEDE;   --nav-3: #E8E8E8;
  --scrim: #0A0A0A;
}

/* ---------- dark ---------- */
:root[data-theme='dark'],
[data-theme-scope='dark'] {
  color-scheme: dark;
  --bg: #000000;      --bg-2: #070707;
  --fg: #F5F5F5;      --fg-2: #B8B8B8;    --fg-3: #A0A0A0;
  --accent: #E2352F;
  --fill: #F5F5F5;    --on-fill: #000000;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #2A2A2A;   --nav-2: #1D1D1D;   --nav-3: #111111;
  --scrim: #000000;
}

/* ---------- sand ---------- */
:root[data-theme='sand'],
[data-theme-scope='sand'] {
  color-scheme: light;
  --bg: #D6C3A3;      --bg-2: #CDB997;
  --fg: #0A0A0A;      --fg-2: #3A332A;    --fg-3: #453D32;
  --accent: #7A0C15;
  --fill: #0A0A0A;    --on-fill: #D6C3A3;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #BAA784;   --nav-2: #C4B190;   --nav-3: #CEBB9B;
  --scrim: #0A0A0A;
}

/* ---------- silver ---------- */
:root[data-theme='silver'],
[data-theme-scope='silver'] {
  color-scheme: light;
  --bg: #C0C0C0;      --bg-2: #B6B6B6;
  --fg: #0A0A0A;      --fg-2: #2E2E2E;    --fg-3: #383838;
  --accent: #7A0C15;
  --fill: #0A0A0A;    --on-fill: #C0C0C0;
  --cta: #C1121F;     --on-cta: #F5F5F5;
  --nav-1: #A2A2A2;   --nav-2: #ADADAD;   --nav-3: #B8B8B8;
  --scrim: #0A0A0A;
}

/* ---------- red (no red text; accents use ivory) ---------- */
:root[data-theme='red'],
[data-theme-scope='red'] {
  color-scheme: dark;
  --bg: #C1121F;      --bg-2: #AD101B;
  --fg: #F5F5F5;      --fg-2: #F5E1E2;    --fg-3: #F8EAEB;
  --accent: #F5F5F5;
  --fill: #F5F5F5;    --on-fill: #A50E19;
  --cta: #F5F5F5;     --on-cta: #A50E19;
  --nav-1: #8E0D17;   --nav-2: #9D0F19;   --nav-3: #AC1019;
  --scrim: #5C070D;
}

/* ---------- OS dark preference, only when no mode was chosen ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #000000;      --bg-2: #070707;
    --fg: #F5F5F5;      --fg-2: #B8B8B8;    --fg-3: #A0A0A0;
    --accent: #E2352F;
    --fill: #F5F5F5;    --on-fill: #000000;
    --cta: #C1121F;     --on-cta: #F5F5F5;
    --nav-1: #2A2A2A;   --nav-2: #1D1D1D;   --nav-3: #111111;
    --scrim: #000000;
  }
}

/* ---------- mode-independent: the five grounds as swatches ---------- */
:root {
  --sw-light: #F5F5F5;
  --sw-dark: #000000;
  --sw-sand: #D6C3A3;
  --sw-silver: #C0C0C0;
  --sw-red: #C1121F;
}

/* ---------- derived alphas (resolve on the same element as the mode) ---------- */
:root,
[data-theme-scope] {
  --rule: var(--fg);
  --rule-10: color-mix(in srgb, var(--fg) 10%, transparent);
  --fill-5: color-mix(in srgb, var(--fg) 5%, transparent);
  --fill-10: color-mix(in srgb, var(--fg) 10%, transparent);
  --ghost: color-mix(in srgb, var(--fg) 10%, transparent);
  --selection-bg: var(--fg);
  --selection-fg: var(--bg);
}

/* css/sns.css */
/* ==========================================================================
   SNS design system: type, spacing, grid and motion tokens.
   NO COLOUR VALUES IN THIS FILE. Every colour lives in theme.css.

   Unit system (TEARDOWN A1, addendum 1): the reference sets html{font-size:1vw}
   which blocks browser zoom from enlarging text (WCAG 1.4.4). Here the same
   ratios are carried by --dpx, one design pixel:
     desktop (min-width 992px): 1 dpx = container width / 1440
     mobile  (max-width 991px): 1 dpx = container width / 393
   Display type is a plain dpx multiple. Body and UI text is
   max(rem floor, dpx value) so it never drops below 0.875rem and still
   scales with zoom. The root font-size stays at the browser default.
   ========================================================================== */

:root {
  /* ---------- 1. Design pixel and grid ---------- */
  /* --vw is the container width, so a classic scrollbar never causes overflow.
     Unregistered custom properties are token streams: the cqw below resolves
     at the element that uses it, whose container is body (site.css). */
  --vw: 100cqw;
  --dpx: calc(var(--vw) / 1440);
  --cols: 8;
  --pad: calc(16 * var(--dpx));          /* page side padding, u16 */
  --gap: calc(16 * var(--dpx));          /* grid gap, u16 desktop */
  /* one grid column: (width - 2 pad - (cols-1) gap) / cols  = 162 dpx at 1440 */
  --cell: calc((var(--vw) - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --hair: 1px;                           /* 0.25 dpx snaps to 1 device px */

  /* spacing scale u-N = N design px (TEARDOWN A6) */
  --u2: calc(2 * var(--dpx));   --u4: calc(4 * var(--dpx));   --u6: calc(6 * var(--dpx));
  --u8: calc(8 * var(--dpx));   --u10: calc(10 * var(--dpx)); --u12: calc(12 * var(--dpx));
  --u16: calc(16 * var(--dpx)); --u20: calc(20 * var(--dpx)); --u24: calc(24 * var(--dpx));
  --u32: calc(32 * var(--dpx)); --u40: calc(40 * var(--dpx)); --u48: calc(48 * var(--dpx));
  --u56: calc(56 * var(--dpx)); --u64: calc(64 * var(--dpx)); --u72: calc(72 * var(--dpx));
  --u80: calc(80 * var(--dpx)); --u96: calc(96 * var(--dpx)); --u104: calc(104 * var(--dpx));
  --u120: calc(120 * var(--dpx)); --u128: calc(128 * var(--dpx)); --u144: calc(144 * var(--dpx));
  --u192: calc(192 * var(--dpx)); --u200: calc(200 * var(--dpx)); --u240: calc(240 * var(--dpx));

  /* ---------- 2. Type ---------- */
  --font-display: 'Archivo', 'Hind', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', 'Hind', 'Helvetica Neue', Arial, sans-serif;
  --font-np:      'Hind', 'Noto Sans Devanagari', 'Archivo', system-ui, sans-serif;
  --fw: 500;                              /* everything renders at 500 (A3) */

  /* display sizes: plain dpx multiples */
  --d1: calc(90 * var(--dpx));            /* h1, stair, count, footer stair: 6.25vw at 1440 */
  --lh-d1: 0.88;
  --ls-d1: -0.0495em;
  --d0: calc(90 * var(--dpx));            /* display wordmark; 75 dpx on mobile */
  --d2: calc(40 * var(--dpx));            /* h2, menu labels */
  --lh-d2: 0.8;
  --ls-d2: -0.036em;
  /* UI and body text: never below 0.875rem */
  --t-p1: max(0.875rem, calc(14 * var(--dpx)));
  --lh-p1: 1.0714;                        /* UI labels, tables, meta */
  --ls-p1: -0.027em;
  --lh-copy: 1.3;                         /* running copy */
  --t-sm: max(0.75rem, calc(12 * var(--dpx)));   /* captions only, never body */
  --t-input: max(1rem, calc(16 * var(--dpx)));   /* form fields: 16px floor stops iOS zoom */
  --lh-input: 1.25;
  --measure: 62ch;

  /* ---------- 3. Named layout dimensions (A6) ---------- */
  --nav-h: calc(39 * var(--dpx));
  --menu-card-w: calc(240 * var(--dpx));
  --menu-card-h1: calc(360 * var(--dpx));
  --menu-card-h2: calc(280 * var(--dpx));
  --menu-card-h3: calc(216 * var(--dpx));
  --sticky-h: calc(104 * var(--dpx));
  --social: calc(64 * var(--dpx));
  --social-gap: max(0.75rem, calc(8 * var(--dpx)));
  --dial-size: calc(462 * var(--dpx));
  --dial-item: calc(72 * var(--dpx));     /* 5rem = 5vw at 1440 */
  --dial-gap: calc(16 * var(--dpx));
  --dial-center: calc(254 * var(--dpx));
  --card-h: calc(480 * var(--dpx));
  --card-img-h: calc(332 * var(--dpx));
  --stair-step: calc(var(--cell) + var(--gap)); /* one column plus one gap: 178 dpx at 1440 */
  --hole-w: calc(4 * var(--cell) + 3 * var(--gap));   /* final window width */
  --hole-h: 60vh;

  /* ---------- 4. Z layers (A7) ---------- */
  --z-hole: 0;      --z-inner: 1;     --z-raised: 2;    --z-stage: 3;
  --z-scrollbar: 10; --z-leave: 91;   --z-enter: 90;
  --z-nav: 94;      --z-sticky: 95;   --z-grid: 95;
  --z-totem: 100;   --z-modal: 5000;  --z-cursor: 9000;
  --z-curtain: 11000; --z-preloader: 999999;

  /* ---------- 5. Motion (A8, C1 to C3) ---------- */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --ease-p2-out: cubic-bezier(0.215, 0.61, 0.355, 1);  /* power2.out */
  --ease-p2-in:  cubic-bezier(0.55, 0.085, 0.68, 0.53); /* power2.in */
  --ease-base:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-write:  cubic-bezier(0.333, 0, 0.667, 1);
  --ease-osmo:   cubic-bezier(0.625, 0.05, 0, 1);
  --dur-xs: 0.2s;  --dur-s: 0.4s;  --dur-m: 0.8s;  --dur-l: 1.2s;
  --stagger: 0.1s;
  --blur-reveal: 20px;                    /* div reveal start blur */
  --blur-page: 24px;                      /* page transition blur */
  --count-dur: 2s;                        /* preloader counter */
  --hairline-dur: 4s;                     /* preloader hairline */
  --tilt-persp: 1000px;
  --tilt-y: 40deg;                        /* +/- rotationY */
  --tilt-x: 25deg;                        /* +/- rotationX */
  --goo-blur: 50;                         /* stdDeviation start */
}

/* mobile layout: one breakpoint, 991 / 992 (A1) */
@media (max-width: 991px) {
  :root {
    --dpx: calc(var(--vw) / 393);
    --cols: 6;
    --gap: calc(12 * var(--dpx));
    --d1: calc(45 * var(--dpx));          /* 11.45vw */
    --lh-d1: 0.9;
    --ls-d1: -0.0524em;                   /* measured at 390 */
    --d0: calc(75 * var(--dpx));          /* 19.08vw */
    --t-p1: max(0.875rem, calc(12 * var(--dpx)));
    --lh-p1: 1.15;
    --ls-p1: -0.0086em;
    --nav-h: calc(36 * var(--dpx));
    --menu-card-w: calc(320 * var(--dpx));
    --menu-card-h1: calc(180 * var(--dpx));
    --menu-card-h2: calc(180 * var(--dpx));
    --menu-card-h3: calc(180 * var(--dpx));
    --sticky-h: calc(72 * var(--dpx));
    --dial-size: calc(361 * var(--dpx));
    --dial-item: calc(56 * var(--dpx));
    --dial-center: calc(200 * var(--dpx));
    --card-h: calc(380 * var(--dpx));
    --card-img-h: calc(200 * var(--dpx));
    --hole-w: calc(var(--vw) * 0.60305);
    --hole-h: calc(var(--vw) * 0.8346);
  }
}

/* browsers without container units fall back to the viewport */
@supports not (width: 1cqw) {
  :root { --vw: 100vw; }
}

/* css/site.css */
/* ==========================================================================
   SNS components. Original CSS written from the measured values in
   reference/TEARDOWN.md. Tokens come from sns.css (type, space, motion) and
   theme.css (colour). No colour literal appears in this file.

   Rules
   - Everything is visible with no JS and with reduced motion.
   - Reveal start states exist only under html.motion-ready AND
     prefers-reduced-motion: no-preference (last section of this file).
   - Every transition and animation sits inside prefers-reduced-motion:
     no-preference.
   Contents: 1 base, 2 type, 3 grid, 4 controls, 5 nav, 6 stair and hero,
   7 pillars, 8 featured, 9 hair-table, 10 cards, 11 hole, 12 footer and ghost,
   13 contact dial, 14 detail, 15 forms and faq, 16 layers (preloader,
   curtain, cursor, totem), 17 motion.
   ========================================================================== */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fw) var(--t-p1) / var(--lh-p1) var(--font-body);
  letter-spacing: var(--ls-p1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  container-type: inline-size;   /* cqw in sns.css excludes the scrollbar */
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--u16); top: var(--u16); z-index: var(--z-preloader);
  padding: var(--u8) var(--u16); background: var(--fill); color: var(--on-fill);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* a themed region: any element with data-theme-scope takes the mode's ground */
[data-theme-scope] { position: relative; isolation: isolate; background: var(--bg); color: var(--fg); }
.bg-2 { background: var(--bg-2); }

/* ---------- 2. Type ---------- */
.h1, .stair, .count {
  font-family: var(--font-display); font-weight: var(--fw);
  font-size: var(--d1); line-height: var(--lh-d1); letter-spacing: var(--ls-d1);
}
.h2 {
  font-family: var(--font-display); font-weight: var(--fw);
  font-size: var(--d2); line-height: var(--lh-d2); letter-spacing: var(--ls-d2);
}
.is-display { font-size: var(--d0); line-height: 0.9; }
.p1 { font-size: var(--t-p1); line-height: var(--lh-p1); letter-spacing: var(--ls-p1); }
.copy { font-size: var(--t-p1); line-height: var(--lh-copy); max-width: var(--measure); }
.eyebrow { color: var(--fg-2); font-size: var(--t-p1); line-height: var(--lh-p1); }
.is-2 { color: var(--fg-2); }
.is-3 { color: var(--fg-3); }
.is-accent { color: var(--accent); }
.tnum { font-variant-numeric: tabular-nums; }
/* Devanagari: never tight leading or negative tracking, matras clip at 0.88 */
:lang(ne), [lang='ne'] {
  font-family: var(--font-np); font-weight: 500; letter-spacing: 0; line-height: 1.15;
}
.h1:lang(ne), .stair:lang(ne), .h2:lang(ne), .stair__l:lang(ne) { line-height: 1.12; }

/* ---------- 3. Grid ---------- */
.wrap { padding-inline: var(--pad); }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--gap);
}
.grid--flush { row-gap: 0; }
.section { padding-block: var(--u64); }
.section--tall { padding-block: var(--u120); }
.rule-t { border-top: var(--hair) solid var(--rule); }
.mt-8 { margin-top: var(--u8); }
.mt-16 { margin-top: var(--u16); }
.mt-40 { margin-top: var(--u40); }
.mt-104 { margin-top: var(--u104); }
.mb-104 { margin-bottom: var(--u104); }
.mt-240 { margin-top: var(--u240); }
.cs-1 { grid-column-start: 1; } .cs-2 { grid-column-start: 2; } .cs-3 { grid-column-start: 3; }
.cs-4 { grid-column-start: 4; } .cs-5 { grid-column-start: 5; } .cs-6 { grid-column-start: 6; }
.cs-7 { grid-column-start: 7; } .cs-8 { grid-column-start: 8; }
.sp-2 { grid-column-end: span 2; } .sp-3 { grid-column-end: span 3; } .sp-4 { grid-column-end: span 4; }
.sp-5 { grid-column-end: span 5; } .sp-6 { grid-column-end: span 6; } .sp-8 { grid-column-end: span 8; }
.ta-r { text-align: right; }
.ta-c { text-align: center; }

/* ---------- 4. Controls ---------- */
.pill-btn, .btn, .cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--u8); border-radius: 999px; text-align: center;
}
.pill-btn {
  padding: var(--u4) var(--u8); min-height: 1.5rem; min-width: 1.5rem;
  background: var(--fill); color: var(--on-fill); border-radius: var(--u16);
}
.pill-btn::after, .nav__grid::after, .theme-toggle::after { content: ''; position: absolute; inset: -10px; }
.btn, .cta {
  min-height: max(2.75rem, calc(48 * var(--dpx))); padding-inline: var(--u32);
  font-size: var(--t-p1); background: var(--fill); color: var(--on-fill);
  border: var(--hair) solid var(--fill);
}
.cta { background: var(--cta); color: var(--on-cta); border-color: var(--cta); }
.btn[disabled] { opacity: 1; background: transparent; color: var(--fg-3); border-color: var(--fg-3); cursor: not-allowed; }
.link-btn {
  display: inline-flex; padding: var(--u4) var(--u8); margin-left: calc(var(--u6) * -1);
  min-height: 1.5rem; align-items: center; border-radius: var(--u32);
}
.link-btn:hover { background: var(--fill); color: var(--on-fill); }
/* underline wipe, hover on the link or its wrapper */
.u-wipe {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 92%;
  background-size: 100% max(1px, var(--u2));
}
.u-wipe:hover, :hover > .u-wipe { background-size: 0% max(1px, var(--u2)); }
/* character roll: label and shadow copy stacked, shadow slides up on hover */
.roll { position: relative; display: inline-block; overflow: clip; vertical-align: bottom; }
.roll__a, .roll__b { display: block; }
.roll__b { position: absolute; left: 0; top: 100%; }
.roll:hover .roll__a, a:hover > .roll .roll__a, button:hover > .roll .roll__a { transform: translateY(-100%); }
.roll:hover .roll__b, a:hover > .roll .roll__b, button:hover > .roll .roll__b { transform: translateY(-100%); }
.type-pill {
  display: inline-flex; align-items: center; padding: var(--u4) var(--u8);
  border: var(--hair) solid currentColor; border-radius: var(--u32);
}
.pill {
  display: inline-flex; align-items: center; gap: var(--u8);
  padding: var(--u4) var(--u12) var(--u4) var(--u8); min-height: 1.5rem;
  border: var(--hair) solid var(--rule); border-radius: var(--u32);
}
.pill__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: var(--hair) solid currentColor; flex: none; }
.pill[data-state='planned'] .pill__dot { background: transparent; }
.pill[data-state='live'] .pill__dot { background: var(--accent); border-color: var(--accent); }
.pill[data-state='done'] .pill__dot { background: var(--fg); }
.dot {
  display: block; width: max(1.25rem, calc(32 * var(--dpx))); aspect-ratio: 1; border-radius: 50%;
  border: var(--hair) solid currentColor; background: var(--sw, transparent);
}
.dot--light { --sw: var(--sw-light); } .dot--dark { --sw: var(--sw-dark); }
.dot--sand { --sw: var(--sw-sand); } .dot--silver { --sw: var(--sw-silver); }
.dot--red { --sw: var(--sw-red); }
.theme-toggle {
  position: relative; display: inline-block; width: 1.5rem; aspect-ratio: 1; border-radius: 50%;
  border: var(--hair) solid var(--fg);
  background: linear-gradient(90deg, var(--fg) 50%, transparent 50%);
}
.float-media { --depth: 0.2; transform: translate3d(0, calc(var(--py, 0px) * var(--depth)), 0); }
.float-media[data-depth='0.1'] { --depth: 0.1; } .float-media[data-depth='0.2'] { --depth: 0.2; }
.float-media[data-depth='0.3'] { --depth: 0.3; } .float-media[data-depth='0.4'] { --depth: 0.4; }
.float-media.is-blur { filter: blur(var(--u8)); }
.ph { background: var(--fill-10); }                 /* photo placeholder */
.rule-v { border-right: var(--hair) solid var(--rule); }
.marquee { overflow: clip; border-block: var(--hair) solid var(--rule-10); padding-block: var(--u12); }
.marquee__track { display: flex; flex-wrap: wrap; gap: var(--u16) var(--u64); padding-inline: var(--pad); }
.marquee__i { white-space: nowrap; }
.marquee__dup { display: none; }
.strip { display: none; }

/* ---------- 5. Nav, staircase menu ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); pointer-events: none; }
.nav__in { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--u16) var(--u16) 0; }
.nav__grid { position: relative; width: var(--u16); height: var(--u16); min-width: 1rem; min-height: 1rem; background: var(--fill-5); pointer-events: auto; }
.nav__grid:hover { background: var(--fill-10); }
.nav__r { display: flex; align-items: center; gap: var(--u12); margin-left: auto; pointer-events: auto; }
.nav__btn { pointer-events: auto; }
.drawer { position: absolute; top: 0; right: 0; display: none; align-items: flex-start; pointer-events: auto; }
.drawer.is-open { display: flex; }
.menu-link {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  width: var(--menu-card-w); padding: var(--u16); color: var(--fg);
}
.menu-link:nth-child(1) { height: var(--menu-card-h1); background: var(--nav-1); }
.menu-link:nth-child(2) { height: var(--menu-card-h2); background: var(--nav-2); }
.menu-link:nth-child(3) { height: var(--menu-card-h3); background: var(--nav-3); }
.menu-link__n {
  display: grid; place-items: center; width: max(1.5rem, calc(23 * var(--dpx))); aspect-ratio: 1;
  border: var(--hair) solid currentColor; border-radius: 50%; font-size: var(--t-p1); line-height: 1;
}
.menu-link__n.is-current, .menu-link:hover .menu-link__n { background: var(--fg); color: var(--bg); }
.menu-link__t { font-size: var(--d2); line-height: var(--lh-d2); letter-spacing: var(--ls-d2); }
.menu-list {
  position: absolute; top: var(--menu-card-h3); right: 0; width: var(--menu-card-w);
  padding: var(--u16); display: grid; gap: var(--u8);
}
.menu-list a { display: inline-flex; align-items: center; min-height: 1.5rem; width: max-content; }
.menu-list a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.menu-tab {
  position: fixed; right: var(--menu-card-w); bottom: 0; padding: var(--u12) var(--u16);
  background: var(--nav-2); color: var(--fg); min-height: 2.25rem;
}
/* pattern-page variant: nothing fixed, menu shown open in flow */
.nav--static, .nav--static .nav__in { position: relative; }
.nav--static .drawer { position: relative; margin-left: auto; width: max-content; }
.nav--static .menu-tab { position: static; margin-right: 0; width: max-content; margin-left: auto; display: block; }
.nav--static .nav__in { padding-bottom: var(--u16); }

/* ---------- 6. Stair, hero ---------- */
.stair__l { display: block; padding-left: calc(var(--i, 0) * var(--stair-step)); }
.stair__l > span { display: inline-block; }
.stair__l.is-pad { padding-left: calc(var(--i, 0) * var(--stair-step) + var(--u120)); }
.stair--right { text-align: right; }
.stair--right .stair__l { padding-left: 0; padding-right: calc(var(--i, 0) * var(--stair-step)); }
.hero { padding: var(--u16) var(--pad) 0; }
.ident { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: calc(587 * var(--dpx)); padding-right: var(--u16); }
.hero__head { display: flex; flex-direction: column; justify-content: space-between; row-gap: 44vh; }
.hero__meta { display: grid; gap: var(--u2); }
.hero__np { font-size: var(--d1); }
.offset-16 { margin-top: calc(var(--u16) * -1); }

/* ---------- 7. Pillar tiles ---------- */
.pillar-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.pillar {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1; padding: var(--u12); background: var(--fill-5); color: var(--fg);
  text-align: left;
}
.pillar__t { color: var(--fg); }
.pillar__np { color: var(--fg-2); }
.pillar__dot {
  align-self: center; margin-bottom: auto; margin-top: auto;
  width: max(1.25rem, calc(32 * var(--dpx))); aspect-ratio: 1; border-radius: 50%;
  border: var(--hair) solid currentColor; background: var(--sw, transparent);
}
.pillar__dot--light { --sw: var(--sw-light); } .pillar__dot--sand { --sw: var(--sw-sand); }
.pillar__dot--silver { --sw: var(--sw-silver); } .pillar__dot--dark { --sw: var(--sw-dark); }
.pillar__dot--red { --sw: var(--sw-red); }
.pillar[aria-pressed='true'] .pillar__dot { border-width: var(--u8); }
.pillar:nth-child(1) { grid-column: 1; } .pillar:nth-child(2) { grid-column: 4; }
.pillar:nth-child(3) { grid-column: 5; } .pillar:nth-child(4) { grid-column: 8; }

/* ---------- 8. Featured heading beside a gallery slot ---------- */
.featured { position: relative; display: grid; justify-items: center; align-items: center; padding: var(--u120) var(--pad) var(--u200); }
.featured > * { grid-area: 1 / 1; }
.featured__head {
  z-index: var(--z-raised); display: flex; justify-content: space-between; min-width: 30%;
  pointer-events: none;
}
.featured__slot {
  width: calc(4 * var(--cell) + 5 * var(--gap)); max-width: 100%; aspect-ratio: 1;
  border: var(--hair) solid var(--rule-10);
  display: grid; place-items: center; text-align: center; padding: var(--u16);
}
.featured__link { display: none; }

/* ---------- 9. Hairline table ---------- */
.hair-table { display: grid; row-gap: var(--u32); }
.hair-group { display: grid; }
.hair-row {
  position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; min-height: max(1.5rem, calc(24 * var(--dpx)));
  padding-block: var(--u4); border-bottom: var(--hair) solid var(--rule-10);
}
.hair-row__n { grid-column: 1; }
.hair-row__t { grid-column: 2 / span 2; }
.hair-row__m { grid-column: 4 / span 2; color: var(--fg-2); }
.hair-row__r { grid-column: 6; color: var(--fg-2); }
.hair-row:hover, .hair-row:focus-within { background: var(--fill-5); }
.hair-row__card {
  position: absolute; right: 0; top: 50%; width: calc(104 * var(--dpx)); height: calc(144 * var(--dpx));
  translate: 0 -50%; background: var(--fill-10); border: var(--hair) solid var(--rule-10);
  clip-path: inset(100% 0 0 0); pointer-events: none; z-index: var(--z-raised);
}
.hair-row:hover .hair-row__card, .hair-row:focus-within .hair-row__card { clip-path: inset(0); }

/* ---------- 10. Programme cards ---------- */
.card-list { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.card {
  position: relative; display: block; grid-column: span 4; height: var(--card-h);
  background: var(--fill); color: var(--on-fill); overflow: clip;
}
.card__link::after { content: ''; position: absolute; inset: 0; z-index: var(--z-raised); }
.card__stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: var(--tilt-persp); }
.card__img {
  height: var(--card-img-h); aspect-ratio: 3 / 2; max-width: 90%;
  background: color-mix(in srgb, var(--on-fill) 16%, var(--fill));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
}
.card__meta { position: absolute; left: var(--u16); bottom: var(--u16); z-index: var(--z-stage); display: flex; align-items: center; gap: var(--u8); }
.card__btn {
  position: absolute; right: var(--u16); bottom: calc(var(--u32) * -1); z-index: var(--z-stage);
  padding: var(--u4) var(--u8); min-height: 1.5rem; display: inline-flex; align-items: center;
  background: var(--bg); color: var(--fg); border-radius: var(--u16);
}
.card:hover .card__btn, .card:focus-within .card__btn, .card.is-hover .card__btn { bottom: var(--u16); }

/* ---------- 11. Hole intro ---------- */
.hole-wrap { position: relative; height: 100vh; background: var(--bg-2); }
.hole-wrap__under { position: absolute; inset: 0; display: grid; place-items: center; }
.hole {
  --hole-progress: 1;
  --hx: calc((100% - var(--hole-w)) / 2 * var(--hole-progress) + 50% * (1 - var(--hole-progress)));
  --hy: calc((100% - var(--hole-h)) / 2 * var(--hole-progress) + 50% * (1 - var(--hole-progress)));
  position: absolute; inset: 0; z-index: var(--z-raised); background: var(--bg);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  align-content: center; padding-inline: var(--pad);
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--hx) var(--hy), calc(100% - var(--hx)) var(--hy),
    calc(100% - var(--hx)) calc(100% - var(--hy)), var(--hx) calc(100% - var(--hy)), var(--hx) var(--hy));
}
.hole__l { grid-column: 2 / span 2; text-align: right; }
.hole__r { grid-column: 7 / span 2; }

/* ---------- 12. Ghost bar, footer ---------- */
.ghost {
  position: sticky; bottom: 0; z-index: var(--z-sticky); height: var(--sticky-h);
  padding: 0 var(--u16) var(--u16); display: flex; align-items: flex-end; justify-content: space-between;
  overflow: clip; pointer-events: none;
}
.ghost__w { color: var(--ghost); font-size: var(--d1); line-height: var(--lh-d1); letter-spacing: var(--ls-d1); white-space: nowrap; }
.ghost.is-collapsed { justify-content: center; }
.ghost.is-collapsed .ghost__w { color: var(--fg); }
.ghost-meta { display: flex; justify-content: space-between; padding: 0 var(--u16) var(--u16); }
.ghost--static { position: relative; }
.footer { padding: var(--u16) var(--pad) var(--u120); }
.footer__grid { padding-top: var(--u120); border-top: var(--hair) solid var(--rule); }
.footer .stair { margin: 0; }
.footer__block { grid-column: 3 / span 4; }
.footer__block--b { grid-column: 4 / span 4; }
.footer__block--r { grid-column: 3 / span 3; text-align: right; }
.footer__block--rb { grid-column: 3 / span 3; text-align: right; margin-left: 0; }
.clock {
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap);
  align-items: center; margin-block: var(--u104); font-variant-numeric: tabular-nums;
}
.clock__p1 { grid-column: 1; text-align: right; }
.clock__h { grid-column: 2; }
.clock__c1 { grid-column: 3; text-align: right; }
.clock__logo { grid-column: 4 / span 2; justify-self: center; width: calc(192 * var(--dpx)); padding-block: var(--u40); background: var(--fill); color: var(--on-fill); }
.clock__logo > * { display: grid; place-items: center; height: calc(184 * var(--dpx)); }
.clock__c2 { grid-column: 6; }
.clock__m { grid-column: 7; }
.clock__p2 { grid-column: 8; }
.socials { grid-column: 1 / -1; }
.socials { display: flex; justify-content: center; gap: var(--social-gap); padding-top: var(--u104); }
.social {
  display: grid; place-items: center; width: var(--social); aspect-ratio: 1; border-radius: 50%;
  border: var(--hair) solid var(--rule);
}
.social:hover { transform: scale(0.9); background: var(--fill); color: var(--on-fill); }
.mail { grid-column: 3 / span 4; display: grid; gap: var(--u8); margin-top: var(--u40); }

/* ---------- 13. Contact dial ---------- */
.contact { display: flex; align-items: center; justify-content: center; gap: var(--u16); padding-inline: var(--pad); height: var(--dial-size); }
.contact-line { flex: 1; height: var(--u8); border-block: var(--hair) solid var(--rule); }
.dial {
  --dial-radius: calc(var(--dial-size) / 2 - var(--dial-item) / 2 - var(--dial-gap));
  position: relative; flex: none; width: var(--dial-size); aspect-ratio: 1; border-radius: 50%;
  background: var(--fill-5); border: var(--hair) solid var(--rule);
}
.dial__rotor { position: absolute; inset: 0; border-radius: 50%; z-index: var(--z-raised); pointer-events: none; transform: rotate(var(--rot, 0deg)); }
.dial__item {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; text-align: center;
  width: var(--dial-item); height: var(--dial-item); margin: calc(var(--dial-item) / -2) 0 0 calc(var(--dial-item) / -2);
  border-radius: 50%; color: var(--fg); box-shadow: inset var(--u8) var(--u4) 0 var(--fill-10);
  transform: rotate(var(--a)) translateY(calc(var(--dial-radius) * -1)) rotate(calc(var(--a) * -1));
}
.dial__item:nth-child(1) { --a: 30deg; } .dial__item:nth-child(2) { --a: 0deg; }
.dial__item:nth-child(3) { --a: 330deg; } .dial__item:nth-child(4) { --a: 300deg; }
.dial__item:nth-child(5) { --a: 270deg; } .dial__item:nth-child(6) { --a: 240deg; }
.dial__item:nth-child(7) { --a: 210deg; } .dial__item:nth-child(8) { --a: 180deg; }
.dial__item:nth-child(9) { --a: 150deg; }
.dial__item:hover, .dial__item:focus-visible { background: var(--fill); color: var(--on-fill); }
.dial__center {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: var(--z-stage);
  width: var(--dial-center); aspect-ratio: 1; border-radius: 50%; padding: var(--u8);
  border: var(--hair) solid var(--rule);
}
.dial__core {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; background: var(--fill); color: var(--on-fill); text-align: center;
}
.dial__logo, .dial__label { grid-area: 1 / 1; }
.dial__label { opacity: 0; padding: var(--u16); }
.dial__core.is-labelled .dial__logo { opacity: 0; }
.dial__core.is-labelled .dial__label { opacity: 1; }
.dial__stop {
  position: absolute; right: 6%; bottom: 14%; z-index: var(--z-stage);
  width: calc(77 * var(--dpx)); height: calc(51 * var(--dpx));
  background: var(--bg); border: var(--hair) solid var(--rule); border-radius: 0 0 100% 0;
  transform-origin: 100% 100%; transform: rotate(var(--stop, 0deg));
}

/* ---------- 14. Detail page ---------- */
.detail { padding-inline: var(--pad); }
.floating-info {
  position: sticky; top: 0; align-self: start; grid-column: 1 / span 2; grid-row: 1 / span 4;
  height: 100vh; padding-top: calc(55 * var(--dpx)); max-width: calc(340 * var(--dpx));
}
.floating-info dt { color: var(--fg-2); margin-top: var(--u24); }
.floating-info dt:first-child { margin-top: 0; }
.floating-info dd { margin-top: var(--u4); max-width: 22em; line-height: var(--lh-copy); }
.detail__intro {
  grid-column: 3 / span 4; min-height: 100vh; display: grid; place-items: center;
  text-align: center; position: relative;
}
.detail__cap { position: absolute; left: 0; right: 0; bottom: var(--u104); color: var(--fg-2); }
.photo-col { grid-column: 3 / span 4; display: flex; flex-direction: column; gap: var(--u16); margin-top: calc(var(--u104) * -1); }
.photo { aspect-ratio: 696 / 471; background: var(--fill-5); display: grid; place-items: center; color: var(--fg-2); }
.more-works { padding: var(--u120) var(--pad); }
.more-works .stair__l.is-offset { padding-left: calc(var(--cell) + var(--gap)); }
.more-works__cards { margin-top: var(--u64); }
.more-works__all { margin-top: var(--u64); }

/* ---------- 15. Forms, FAQ ---------- */
.form-hair { display: grid; gap: var(--u16); max-width: calc(696 * var(--dpx)); }
.field { display: grid; gap: var(--u4); }
.field__l { color: var(--fg-2); }
.field__c {
  width: 100%; min-height: 2.75rem; padding: var(--u8) 0; font: var(--fw) var(--t-input) / var(--lh-input) var(--font-body);
  color: var(--fg); background: transparent; border: 0; border-bottom: var(--hair) solid var(--rule); border-radius: 0;
}
.field__c::placeholder { color: var(--fg-3); opacity: 1; }
.field__c:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
textarea.field__c { min-height: 6rem; resize: vertical; }
.field__e { color: var(--accent); display: none; }
.field.is-error .field__c { border-bottom-width: 2px; border-bottom-color: var(--accent); }
.field.is-error .field__e { display: block; }
.field--hp { position: absolute; left: -9999px; }
.faq { border-bottom: var(--hair) solid var(--rule-10); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--u16);
  min-height: 2.75rem; padding-block: var(--u12); cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; font-size: var(--d2); line-height: 1; flex: none; }
.faq[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--u16); max-width: var(--measure); color: var(--fg-2); line-height: var(--lh-copy); }

/* list and form additions */
.hair-row__x { display: block; color: var(--fg-2); max-width: 46em; }
.hair-row:has(.hair-row__x) { align-items: start; padding-block: var(--u8); }
.card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: var(--u64); }
.card--wide .card__stage { position: relative; grid-column: 1 / span 4; inset: auto; }
.card--wide .card__body { grid-column: 5 / -1; position: relative; z-index: var(--z-stage); display: grid; align-content: end; gap: var(--u16); padding: var(--u16); justify-items: start; }
.btn-on-fill { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--u32); border-radius: 999px; background: var(--bg); color: var(--fg); }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__img picture { display: block; height: 100%; }
figure.card__img { margin: 0; overflow: clip; }
.card-list > li { list-style: none; }
.empty { padding: var(--u64) 0; border-block: var(--hair) solid var(--rule); max-width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: var(--u8); margin-bottom: var(--u32); }
.filters[hidden] { display: none; }
.filters .pill { background: transparent; color: var(--fg); }
.filters .pill[aria-pressed='true'] { background: var(--fill); color: var(--on-fill); }
.form-hair { max-width: none; }
.form-hair__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u16) var(--gap); }
.field--full { grid-column: 1 / -1; }
.field--group { border: 0; padding: 0; margin: 0; min-width: 0; }
.field__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--u4) var(--gap); }
select.field__c { appearance: none; border-radius: 0; background: transparent; padding-right: var(--u24); }
.check { display: flex; align-items: flex-start; gap: var(--u12); min-height: 2.75rem; padding-block: var(--u8); cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--fg); }
.field__c:user-invalid { border-bottom-width: 2px; border-bottom-color: var(--accent); }
.vh { position: absolute; left: -9999px; }
@media (max-width: 991px) {
  .form-hair__grid, .field__checks { grid-template-columns: 1fr; }
  .card--wide .card__stage, .card--wide .card__body { grid-column: 1 / -1; }
  .card--wide { height: auto; }
}

/* ---------- 16. Layers: preloader, curtain, cursor, totem ---------- */
.preloader {
  display: none; position: fixed; inset: 0; z-index: var(--z-preloader);
  background: var(--bg); color: var(--fg);
}
.preloader.is-active, html.is-preloading .preloader { display: block; }
.preloader__mark { position: absolute; left: 50%; top: 50%; width: clamp(4rem, 9vw, 7rem); transform: translate(-50%, -50%); }
.preloader__mark img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .preloader__mark { animation: sns-pulse 1.6s var(--ease-in-out) infinite alternate; }
  @keyframes sns-pulse { from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
}
.preloader__count { position: absolute; left: var(--u16); bottom: var(--u16); font-variant-numeric: tabular-nums; }
.preloader__line { position: absolute; left: calc(var(--pad) + 2 * (var(--cell) + var(--gap)) + var(--cell)); top: var(--u16); height: 0; border-right: var(--hair) solid var(--rule); }
.preloader__line.is-run { height: calc(587 * var(--dpx)); }
.preloader--static { position: relative; display: block; inset: auto; z-index: auto; height: calc(var(--d1) * 3); }
.curtain {
  position: fixed; inset: 0; z-index: var(--z-curtain); background: var(--bg);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.curtain.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.curtain--static { position: relative; inset: auto; z-index: auto; opacity: 1; visibility: visible; height: calc(var(--u104) * 1.2); border: var(--hair) dashed var(--rule); background: var(--bg-2); display: grid; place-items: center; }
.cursor { display: none; position: fixed; inset: 0; z-index: var(--z-cursor); pointer-events: none; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--fg); transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0); }
.cursor__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: var(--hair) solid var(--fg); transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) scale(var(--cs, 1)); }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor .cursor { display: block; }
}
.cursor--static { display: block; position: relative; inset: auto; z-index: auto; height: calc(var(--u64)); }
.cursor--static .cursor__dot { left: 25%; top: 50%; }
.cursor--static .cursor__ring { left: 50%; top: 50%; }
.theme-wipe { position: fixed; inset: 0; z-index: var(--z-hole); pointer-events: none; }
.totem { display: none; position: fixed; inset: 0; z-index: var(--z-totem); place-items: center; pointer-events: none; }
.totem.is-on { display: grid; }
.totem > * { width: calc(256 * var(--dpx)); }
.grid-wrap { position: fixed; inset: 0; z-index: var(--z-grid); display: none; pointer-events: none; padding-inline: var(--pad); gap: var(--gap); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.grid-wrap.is-on { display: grid; }
.grid-wrap > * { background: var(--fill-5); }

/* ---------- mobile (one breakpoint, 991 / 992) ---------- */
@media (max-width: 991px) {
  .stair__l.is-pad { padding-left: calc(var(--i, 0) * var(--stair-step)); }
  .sp-2, .sp-3, .sp-4, .sp-5, .sp-6, .sp-8 { grid-column: 1 / -1; }
  .cs-1, .cs-2, .cs-3 { grid-column-start: 1; }
  .cs-4, .cs-5, .cs-6, .cs-7, .cs-8 { grid-column-start: 3; }
  .strip { display: flex; overflow-x: auto; gap: var(--u16); padding-inline: var(--pad); }
  .strip .card { flex: none; width: calc(320 * var(--dpx)); height: calc(220 * var(--dpx)); grid-column: auto; }
  .nav__grid, .ghost-meta, .card__btn, .featured, .contact-line, .clock__p1, .clock__p2, .clock__c1, .clock__c2 { display: none; }  .drawer { flex-direction: column; align-items: flex-end; }
  .menu-link:nth-child(1) { width: calc(320 * var(--dpx)); }
  .menu-link:nth-child(2) { width: calc(272 * var(--dpx)); }
  .menu-link:nth-child(3) { width: calc(224 * var(--dpx)); }
  .menu-list { position: static; width: calc(224 * var(--dpx)); }
  .menu-tab { right: 0; width: calc(272 * var(--dpx)); }
  .nav--static .menu-tab { width: calc(272 * var(--dpx)); }
  .ident { min-height: calc(300 * var(--dpx)); }
  .hero__head { row-gap: var(--u64); }
  .pillar-row { display: flex; overflow-x: auto; gap: var(--gap); }
  .pillar { flex: none; width: calc(113 * var(--dpx)); }
  .hair-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hair-row__t { grid-column: 2 / span 5; }
  .hair-row__m { grid-column: 2 / span 3; }
  .hair-row__r { grid-column: 5 / span 2; }
  .hair-row__card { display: none; }
  .card { grid-column: 1 / -1; }
  .hole__l { grid-column: 1 / span 3; }
  .hole__r { grid-column: 4 / span 3; }
  .ghost { position: fixed; }
  .ghost--static { position: relative; }
  .ghost__w { font-size: var(--d1); }
  .footer { padding-bottom: var(--u120); }
  .footer__block, .footer__block--b, .footer__block--r, .footer__block--rb, .mail { grid-column: 1 / -1; text-align: left; }
  .clock__h { grid-column: 1 / span 2; }
  .clock__logo { grid-column: 3 / span 2; width: calc(120 * var(--dpx)); padding-block: var(--u16); }
  .clock__logo > * { height: calc(88 * var(--dpx)); }
  .clock__m { grid-column: 5 / span 2; text-align: right; }
  .floating-info { position: static; grid-column: 1 / -1; grid-row: auto; height: auto; padding-top: var(--u16); max-width: none; }
  .detail__intro { grid-column: 1 / -1; min-height: 0; padding-block: var(--u144); }
  .photo-col { grid-column: 1 / -1; margin-top: 0; }
  .more-works .stair__l.is-offset { padding-left: calc(66 * var(--dpx)); }
  .dial__label { display: none; }
}

/* ---------- 17. Motion. Only here do transitions and animations exist ---------- */
@media (prefers-reduced-motion: no-preference) {
  .link-btn, .social, .dial__item, .hair-row, .menu-link__n { transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out), transform 0.3s var(--ease-base); }
  .hair-row { transition: background var(--dur-s) var(--ease-out); }
  .hair-row:hover { transition-duration: 0s; }
  .dial__item:hover { transition-duration: 0s; }
  .hair-row__card { transition: clip-path var(--dur-s) var(--ease-out); }
  .u-wipe { transition: background-size 0.6s var(--ease-in-out); }
  .roll__a, .roll__b { transition: transform var(--dur-s) var(--ease-in-out); }
  .pillar__dot { transition: transform 0.6s var(--ease-in-out), border-width var(--dur-s) var(--ease-out); }
  .pillar:hover .pillar__dot { transform: scale(1.125); }
  .card__btn { transition: bottom var(--dur-m) var(--ease-in-out); }
  .card__img { transition: transform 0.6s var(--ease-out); }
  .dial__logo, .dial__label { transition: opacity var(--dur-s) var(--ease-in-out); }
  .dial__rotor { transition: transform var(--dur-m) var(--ease-out); }
  .dial__stop { transition: transform var(--dur-m) var(--ease-out); }
  .dial.is-dragging .dial__rotor, .dial.is-dragging .dial__stop { transition: none; }
  .faq__q::after { transition: transform var(--dur-s) var(--ease-out); }
  .faq[open] .faq__a { animation: sns-fade var(--dur-l) var(--ease-p2-out) both; }
  .nav__grid { transition: background var(--dur-s) var(--ease-out); }
  .curtain { transition: opacity var(--dur-m) var(--ease-in-out), visibility 0s linear var(--dur-m); }
  .curtain.is-on { transition: opacity var(--dur-m) var(--ease-in-out), visibility 0s; }
  .page-out { opacity: 0; filter: blur(var(--blur-page)); transition: opacity var(--dur-m) var(--ease-in-out), filter var(--dur-m) var(--ease-in-out); }
  .page-in { transition: opacity var(--dur-m) var(--ease-in-out), filter var(--dur-m) var(--ease-in-out); }
  .page-hold { opacity: 0; filter: blur(var(--blur-page)); }
  .preloader__line { transition: height var(--hairline-dur) var(--ease-in-out); }
  .ghost__w { transition: color var(--dur-s) var(--ease-in-out); }
  .drawer.is-open .menu-link { animation: sns-unroll var(--dur-m) var(--ease-out) both; }
  .drawer.is-open .menu-link:nth-child(1) { animation-delay: 0.2s; }
  .drawer.is-open .menu-link:nth-child(2) { animation-delay: 0.1s; }
  .drawer.is-open .menu-link:nth-child(3) { animation-delay: 0s; }
  .marquee__track { flex-wrap: nowrap; width: max-content; padding-inline: 0; gap: 0; animation: sns-marquee 32s linear infinite; }
  .marquee__i { padding-right: var(--u64); }
  .marquee__dup { display: block; }
  .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }

  @keyframes sns-fade { from { opacity: 0; filter: blur(var(--blur-reveal)); } to { opacity: 1; filter: blur(0); } }
  @keyframes sns-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes sns-marquee { to { transform: translateX(-50%); } }

  /* reveal start states: need the script flag as well */
  html.motion-ready [data-reveal]:not(.is-in) { transition: none; }
  html.motion-ready [data-reveal='text']:not(.is-in),
  html.motion-ready [data-reveal='div']:not(.is-in) { opacity: 0; filter: blur(var(--blur-reveal)); }
  html.motion-ready [data-reveal='clip-down']:not(.is-in) { clip-path: inset(0 0 100% 0); }
  html.motion-ready [data-reveal='clip-left']:not(.is-in) { clip-path: inset(0 100% 0 0); }
  html.motion-ready [data-reveal='clip-right']:not(.is-in) { clip-path: inset(0 0 0 100%); }
  html.motion-ready [data-reveal='clip-top']:not(.is-in) { clip-path: inset(100% 0 0 0); }
  html.motion-ready [data-reveal].is-in {
    transition: opacity var(--dur-l) var(--ease-p2-out), filter var(--dur-l) var(--ease-p2-out), clip-path var(--dur-l) var(--ease-p2-out);
    transition-delay: calc(0.1s + var(--rv-i, 0) * var(--stagger));
  }
  html.motion-ready [data-reveal='text'].is-in { transition-timing-function: var(--ease-out); }
}

/* ==========================================================================
   18. Page vocabulary added with the templates (src/templates/*.mjs).
   Tokens only, no colour literal. Prose, notes, tables, the hero and hub
   pieces that the styleguide does not draw. Static; the one transition is
   inside the reduced-motion guard.
   ========================================================================== */
.nav__brand { display: block; width: max(1.75rem, calc(36 * var(--dpx))); pointer-events: auto; }
.nav__brand img { width: 100%; height: auto; }
.mark--ivory { display: none; }
:root[data-theme='red'] .mark--red { display: none; }
:root[data-theme='red'] .mark--ivory { display: block; }

/* hero */
.hero { position: relative; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--u8); }
.hero__media { position: relative; aspect-ratio: 16 / 9; max-height: 100vh; overflow: hidden; background: var(--bg-2); }
/* no-JS and no-WebGL fallback: the first photo fills the panel. The motion layer hides it once it runs. */
.hero__static { position: absolute; inset: 0; }
.hero__static picture { display: block; width: 100%; height: 100%; }
.hero__static img { width: 100%; height: 100%; object-fit: cover; }
[data-hero-on] .hero__static { display: none; }
.hero__media [data-hero-item]:empty { display: none; }
[data-hero-on] .hero__media [data-hero-item] { display: block; }
/* sphere fallback: the seven items are the horizontal card strip until WebGL takes over */
.featured:not(:has([data-sphere-on])) { display: block; padding-block: var(--u64); }
.featured:not(:has([data-sphere-on])) .featured__head { justify-content: flex-start; gap: var(--u16); margin-bottom: var(--u40); }
.featured__slot:not([data-sphere-on]) { display: flex; gap: var(--u16); width: 100%; max-width: none; aspect-ratio: auto; overflow-x: auto; border: 0; padding: 0; place-items: stretch; }
.gallery-card { flex: none; width: calc(320 * var(--dpx)); height: calc(220 * var(--dpx)); grid-column: auto; }
.featured__all { display: flex; justify-content: center; }
/* Home on phones: the .strip already shows the programmes, so the fallback row would repeat them. */
@media (max-width: 991px) { #programmes.featured:not(:has([data-sphere-on])) { display: none; } }

/* hub */
.hole-wrap__fig { width: var(--hole-w); height: var(--hole-h); overflow: hidden; }
.hole-wrap__fig picture, .hole-wrap__fig img { width: 100%; height: 100%; object-fit: cover; }
.works-view button { opacity: 0.4; min-height: 1.5rem; }
.works-view button[aria-selected='true'] { opacity: 1; }
.card__img picture, .card__img img { width: 100%; height: 100%; }
.card__img img { object-fit: cover; }

/* detail */
.crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u8); }
.crumbs li + li::before { content: '/'; margin-right: var(--u8); color: var(--fg-3); }
.floating-info { z-index: var(--z-raised); }
.prose { display: grid; gap: var(--u24); align-content: start; min-width: 0; }
.prose > * { min-width: 0; }
.prose__h2 { margin-top: var(--u40); }
.prose__h3 { margin-top: var(--u16); color: var(--fg-2); }
.prose__lede { max-width: 18em; }
.prose__list { display: grid; gap: var(--u8); padding-left: 1.2em; list-style: disc; }
ol.prose__list { list-style: decimal; }
.prose__quote { display: grid; gap: var(--u8); padding-block: var(--u16); border-block: var(--hair) solid var(--rule-10); }
.prose__figure img { width: 100%; height: auto; background: var(--fill-5); }
.prose__figure figcaption { margin-top: var(--u8); }
.prose__hr { width: 100%; border: 0; border-top: var(--hair) solid var(--rule-10); }
.note { padding: var(--u16); border: var(--hair) solid var(--rule); display: grid; gap: var(--u8); }
.note[data-tone='honest'] { border-color: var(--accent); }
.note__t { color: var(--fg-2); }
.prose .hair-row { grid-template-columns: max(2rem, var(--u48)) minmax(0, 1fr); row-gap: var(--u4); align-items: start; }
.prose .hair-row > * { grid-column: 2; }
.prose .hair-row .hair-row__n { grid-column: 1; grid-row: 1; }
.prose .hair-row__r:empty { display: none; }
.prose .hair-row--plain { grid-template-columns: minmax(0, 1fr); }
.prose .hair-row--plain > * { grid-column: 1; }
.prose__cta { margin-top: var(--u16); }
a.hair-row__t { justify-self: start; width: fit-content; }

/* faq as buttons (data-accordion). Without JS every answer is visible. */
.faq__h { font: inherit; margin: 0; }
.faq__q { width: 100%; text-align: left; }
.faq__q[aria-expanded='true']::after { transform: rotate(45deg); }

/* footer */
.footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--u64); }
.footer__col ul { display: grid; gap: var(--u8); margin-top: var(--u8); }
.footer__col a { display: inline-flex; min-height: 1.5rem; align-items: center; }
.clock__t { grid-column: 2 / span 6; text-align: center; }
.socialgrid { display: flex; flex-wrap: wrap; gap: var(--social-gap); }

@media (max-width: 991px) {
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clock__t { grid-column: 1 / -1; }
  .hero__media { aspect-ratio: 4 / 3; }
  .ident { grid-column: 1 / span 2; }
}

/* Mobile and tablet: logo, theme toggle and menu sit together in one floating pill. */
@media (max-width: 991px) {
  .nav__in {
    align-items: center; margin: 0.75rem; padding: 0.375rem 0.375rem 0.375rem 0.875rem;
    border: var(--hair) solid var(--rule); border-radius: 999px; pointer-events: auto;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  }
  .nav__brand { width: 2rem; }
  /* The open menu starts under the pill and gets a ground so its links stay readable over the page. */
  .drawer { top: 4.5rem; right: 0.75rem; padding-bottom: 0.75rem; background: var(--bg); border-radius: 1rem; max-height: calc(100dvh - 5.5rem); overflow-x: hidden; overflow-y: auto; }
}

/* Any group of two or more buttons wraps with a real gap, so stacked buttons never touch. */
:where(p, div):has(> :is(.cta, .btn, .pill-btn) ~ :is(.cta, .btn, .pill-btn)) {
  display: flex; flex-wrap: wrap; align-items: center; gap: max(0.75rem, var(--u16));
}

/* Inline icons follow the text colour, so they flip with every theme instead of staying black. */
svg:not([fill]) { fill: currentColor; }

/* Phones: the pill becomes a dock pinned to the bottom of the screen; the menu opens upward from it. */
@media (max-width: 767px) {
  .nav { inset: auto 0 0 0; }
  .nav__in { margin: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); }
  .drawer { top: auto; bottom: calc(100% + 0.5rem); max-height: calc(100dvh - 6.5rem); overflow-y: auto; }
  body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  /* The watermark sits behind the page on phones, so buttons and copy cover it instead of the reverse. */
  .ghost { bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 0; }
  main, footer { position: relative; z-index: 1; }
}

/* css/motion.css */
/* Motion-only styles. No colour tokens (those live in theme.css). Hooks are
   data attributes, see the addendum section 8. Everything here degrades to a
   complete static page when JS is absent. */

/* Pre-hide until js/sns.js has set each target's start state. theme-early.js adds
   motion-pending (never under reduced motion) and removes it after 6s at most. */
html.motion-pending [data-reveal],
html.motion-pending [data-stair],
html.motion-pending [data-preloader-count],
html.motion-pending [data-ghost] { visibility: hidden; }
html:not(.js) [data-preloader-count] { display: none; }

/* Hero entrance: movement only, so the headline is painted at first paint and counts for LCP at once (the old reveal
   kept it hidden behind the preloader and the motion script). Paused while the preloader covers the page, so it plays
   as the page appears. */
@media (prefers-reduced-motion: no-preference) {
  .hero-rise, .hero-stair .stair__l > span { animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-stair .stair__l:nth-child(2) > span { animation-delay: 0.06s; }
  .hero-stair .stair__l:nth-child(3) > span { animation-delay: 0.12s; }
  .hero-stair .stair__l:nth-child(4) > span { animation-delay: 0.18s; }
  .hero-rise--3 { animation-delay: 0.24s; }
  .hero-rise--4 { animation-delay: 0.3s; }
  html.is-preloading .hero-rise, html.is-preloading .hero-stair .stair__l > span { animation-play-state: paused; }
}
@keyframes hero-rise { from { transform: translateY(0.4em); } }
[data-preloader-line] { transform-origin: 50% 0; }

body.is-transitioning * { cursor: wait !important; }

/* Hole window (B2.1): the overlay is the frame, the window is cut out by an
   evenodd polygon. --hole-progress opens it, --hole-grow widens it on scroll. */
[data-hole] {
  --hole-progress: 1; --hole-grow: 0;
  --hw: calc(var(--hole-progress) * (24.165% + 25.835% * var(--hole-grow)));
  --hh: calc(var(--hole-progress) * (30% + 20% * var(--hole-grow)));
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    calc(50% - var(--hw)) calc(50% - var(--hh)), calc(50% + var(--hw)) calc(50% - var(--hh)),
    calc(50% + var(--hw)) calc(50% + var(--hh)), calc(50% - var(--hw)) calc(50% + var(--hh)),
    calc(50% - var(--hw)) calc(50% - var(--hh)));
}

/* Ghost bar: consumers read --ghost-p (0 rest, 1 collapsed) and --ghost-o. */
[data-ghost] { --ghost-p: 0; --ghost-o: 0.1; }

/* Sphere gallery. Children stay as the accessible strip, visually hidden once the canvas runs. */
[data-gallery-sphere][data-sphere-on] { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
[data-sphere-on] [data-gallery-item] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-gallery-info] { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25em; padding: 1em; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; }

/* Hero mask: fallback is the first image only. */
[data-hero-mask] { position: relative; overflow: hidden; }
[data-hero-mask]:not([data-hero-on]) [data-hero-item]:not(:first-child) { display: none; }
[data-hero-mask] [data-hero-item] img { display: block; width: 100%; height: auto; }

/* Infinite canvas host. The list inside stays as the fallback. */
[data-infinite-canvas][data-canvas-on] { position: relative; overflow: hidden; min-height: 70vh; }
[data-canvas-outline] { position: absolute; pointer-events: none; opacity: 0; z-index: 2; }

/* Scrub heading. */
[data-scrub-split] { display: flex; justify-content: space-between; align-items: baseline; }
[data-scrub-link] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Dial rotor label host. */
[data-dial-label] { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; }

/* Custom cursor (fine pointer only; the element is only created then).
   mix-blend-mode keeps it visible on every ground. Focus outlines are never touched. */
.cursor { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none; mix-blend-mode: difference; transition: opacity 0.2s; }
.cursor:not(.is-on) { opacity: 0; }
.cursor-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.cursor-ring { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid #fff; border-radius: 50%; display: grid; place-items: center; transition: width 0.3s, height 0.3s, margin 0.3s; }
.cursor.is-hover .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor.has-label .cursor-ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor-label { font: 500 11px/1 system-ui, sans-serif; color: #fff; letter-spacing: 0; white-space: nowrap; }
html.has-cursor a, html.has-cursor button, html.has-cursor [data-cursor], html.has-cursor [data-hole] { cursor: none !important; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }