/* ==========================================================================
   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; }
}