/* base.css - Rimal Spire design system v2 (D1a, 2026-11-14). Spec: DESIGN-DIRECTION.md; contract: DESIGN-SYSTEM.md.
 * Fonts: Bodoni Moda (display) + Host Grotesk (text/UI), self-hosted, OFL. No radius, no shadows, no UI gradients. */

/* ===== fonts ===== */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/bodonimoda-latin-opsz-wght-roman.woff2) format('woff2-variations'), url(../fonts/bodonimoda-latin-opsz-wght-roman.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: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/bodonimoda-latin-opsz-wght-italic.woff2) format('woff2-variations'), url(../fonts/bodonimoda-latin-opsz-wght-italic.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;
}
/* metric-matched fallback: advance widths measured vs Georgia (1.023), vertical metrics from Bodoni Moda hhea (2250/-800 on 2000 upm) */
@font-face { font-family: 'Bodoni Moda Fallback'; src: local('Georgia'); size-adjust: 102.3%; ascent-override: 110%; descent-override: 39.1%; line-gap-override: 0%; }
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/co3BmWBnlCJ3U42vbbfdwMjZqljm0U0.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;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/co3BmWBnlCJ3U42vbbfdwMjZpFjm.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: 'Host Grotesk Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'); font-weight: 100 549; size-adjust: 99.3%; ascent-override: 102.7%; descent-override: 32.2%; line-gap-override: 0%; }

/* ===== tokens ===== */
:root {
  /* colour (sec 3) */
  --bone: #ECE6DB; --ink: #17110D; --chalk: #F3EEE4; --stone: #8C8377; --sand: #D8BF9B; --pool: #1C5568;
  --pool-hi: #7FB3C4;               /* pool on dark grounds (focus / dot / hover rule keep 3:1 on ink) */
  --ink-2: #4E463E;                 /* secondary text on bone (stone is too light for body copy) */
  --chalk-2: rgba(243, 238, 228, .72);
  --rule: rgba(140, 131, 119, .3);  /* stone at 30 % */
  --rule-dark: rgba(243, 238, 228, .2);
  --gold: #FFD696;                  /* film + map artwork ONLY */
  /* legacy aliases (old pages keep working until restyled) */
  --ivory: var(--bone); --paper: var(--bone); --espresso: var(--ink); --ink-soft: var(--ink-2); --bronze: var(--stone); --bronze-ink: var(--ink-2); --line: var(--rule);
  /* type */
  --font-display: 'Bodoni Moda', 'Bodoni Moda Fallback', Georgia, serif;
  --font-sans: 'Host Grotesk', 'Host Grotesk Fallback', system-ui, Arial, sans-serif;
  --font-serif: var(--font-display);  /* legacy alias: Source Serif 4 is gone */
  --fs-page: clamp(88px, 12.2vw, 196px);
  --fs-section: clamp(48px, 6.4vw, 108px);
  --fs-sub: clamp(30px, 2.9vw, 46px);
  /* grid (sec 4) */
  --margin: clamp(16px, calc(5vw - 32px), 40px);   /* 40 at 1440, 32 at 1280 */
  --gap: 24px;
  --col: calc((100vw - 2 * var(--margin) - 11 * var(--gap)) / 12);
  --hang: calc(2 * var(--col) + 2 * var(--gap));   /* 2 columns */
  /* rhythm: deliberately uneven */
  --sp-tight: 12vh; --sp-wide: 30vh; --sp-xwide: 34vh; --overlap: 6vw;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px; --sp-16: 128px;
  --gutter: var(--margin);
  --section: var(--sp-tight);
  --header-h: 64px;
  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* expo.out */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24.5M20.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ===== reset + base type ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--font-sans); font-size: 17px; font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--pool); outline-offset: 3px; }
.rs-dark :focus-visible, [data-theme="dark"] :focus-visible, .rs-footer :focus-visible, .rs-header[data-on="dark"] :focus-visible { outline-color: var(--pool-hi); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.rs-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
[data-theme="dark"] { background: var(--ink); color: var(--chalk); }
[data-theme="light"] { background: var(--bone); color: var(--ink); }

/* ===== type scale (sec 2) ===== */
.t-page, .t-name, .rs-display, .t-num { font-family: var(--font-display); font-weight: 400; font-style: normal; font-optical-sizing: none; text-wrap: balance; }
.t-page { font-size: var(--fs-page); line-height: .88; letter-spacing: -.035em; }
.t-name { font-weight: 500; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.02em; }
/* R3: headings are grotesk; Bodoni is for names only */
.t-section, .t-sub, .t-prompt { font-family: var(--font-sans); font-style: normal; font-optical-sizing: auto; font-variation-settings: normal; font-weight: 500; text-wrap: balance; }
.t-section { font-size: 34px; line-height: 1.1177; letter-spacing: -.01em; }
.t-sub { font-size: 22px; line-height: 1.2727; letter-spacing: 0; }
.t-prompt { font-size: 28px; line-height: 1.1429; letter-spacing: -.01em; }
.rs-display { line-height: .98; letter-spacing: -.025em; }
h1 em, h2 em, h3 em, .t-page em, .t-section em, .t-name em, .t-sub em, .t-prompt em, .rs-display em { font-style: normal; }
.t-num { font-variant-numeric: lining-nums; letter-spacing: -.03em; line-height: .9; text-wrap: nowrap; }
.t-hang { padding-left: var(--hang); text-indent: calc(-1 * var(--hang)); }
.t-hang.is-split > * { text-indent: 0; }
.t-hang.is-split > :first-child { margin-left: calc(-1 * var(--hang)); }
.t-section.t-hang, .t-sub.t-hang, .t-prompt.t-hang { padding-left: 0; text-indent: 0; }   /* grotesk headings do not hang */
.t-section.t-hang.is-split > :first-child, .t-sub.t-hang.is-split > :first-child, .t-prompt.t-hang.is-split > :first-child { margin-left: 0; }
.t-body { font-size: 16px; line-height: 24px; max-width: 60ch; text-wrap: pretty; }
.t-ui { font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; }
.label { font: 500 12px/17px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; }
.t-mute { color: var(--ink-2); }
.rs-dark .t-mute, [data-theme="dark"] .t-mute { color: var(--chalk-2); }
/* legacy: eyebrows are on the kill list - until pages drop them they read as quiet labels */
.rs-eyebrow { font: 500 12px/17px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.rs-lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.rs-dark .rs-lede, [data-theme="dark"] .rs-lede { color: var(--chalk-2); }

/* ===== grid (sec 4) ===== */
.wrap { padding-left: var(--margin); padding-right: var(--margin); }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.span-1 { grid-column-end: span 1; } .span-2 { grid-column-end: span 2; } .span-3 { grid-column-end: span 3; } .span-4 { grid-column-end: span 4; }
.span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; }
.span-9 { grid-column-end: span 9; } .span-10 { grid-column-end: span 10; } .span-11 { grid-column-end: span 11; } .span-12 { grid-column-end: span 12; }
.start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; }
.start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
.start-9 { grid-column-start: 9; } .start-10 { grid-column-start: 10; } .start-11 { grid-column-start: 11; } .start-12 { grid-column-start: 12; }
.row-1 { grid-row-start: 1; } .row-2 { grid-row-start: 2; }
.pt-tight { padding-top: var(--sp-tight); } .pt-wide { padding-top: var(--sp-wide); } .pt-xwide { padding-top: var(--sp-xwide); }
.pb-tight { padding-bottom: var(--sp-tight); } .pb-wide { padding-bottom: var(--sp-wide); } .pb-xwide { padding-bottom: var(--sp-xwide); }
.r-45 { aspect-ratio: 4 / 5; } .r-32 { aspect-ratio: 3 / 2; } .r-1610 { aspect-ratio: 16 / 10; } .r-219 { aspect-ratio: 21 / 9; }
@media (max-width: 800px) {
  :root { --hang: 0px; }
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .g12 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* ===== actions (sec 5) ===== */
.btn, .rs-btn { --btn-bg: var(--ink); --btn-fg: var(--chalk);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: flex-start; gap: 18px;
  height: 56px; padding: 0 28px; border: 0; border-radius: 0; background: var(--btn-bg); color: var(--btn-fg); box-shadow: inset 0 0 0 1px var(--btn-bg);
  font: 500 14px/1 var(--font-sans); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .35s var(--ease-out); }
.btn::before, .rs-btn::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--btn-fg); clip-path: inset(100% 0 0 0); transition: clip-path .35s var(--ease-out); }
.btn:hover, .rs-btn:hover { color: var(--btn-bg); }
.btn:hover::before, .rs-btn:hover::before { clip-path: inset(0 0 0 0); }
.btn:focus-visible, .rs-btn:focus-visible { outline: 2px solid var(--pool); outline-offset: 3px; }
.rs-dark .btn, .rs-dark .rs-btn, [data-theme="dark"] .btn, [data-theme="dark"] .rs-btn, .btn--on-dark, .rs-btn--gold { --btn-bg: var(--chalk); --btn-fg: var(--ink); }
[data-theme="dark"] [data-theme="light"] .btn, [data-theme="dark"] [data-theme="light"] .rs-btn { --btn-bg: var(--ink); --btn-fg: var(--chalk); }
.rs-dark .btn:focus-visible, .rs-dark .rs-btn:focus-visible, [data-theme="dark"] .btn:focus-visible, .btn--on-dark:focus-visible, .rs-btn--gold:focus-visible { outline-color: var(--pool-hi); }
.btn[disabled], .rs-btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]::before, .rs-btn[disabled]::before { display: none; }
.btn--block { display: flex; width: 100%; }

.lnk, .rs-btn.rs-btn--ghost { position: relative; display: inline-flex; align-items: center; gap: 12px; height: auto; min-height: 0; padding: 0 0 6px; overflow: visible;
  background: none; box-shadow: none; color: inherit; font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; border: 0; }
.lnk::before, .rs-btn.rs-btn--ghost::before { content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; top: auto; height: 1px; background: currentColor; clip-path: none;
  transform-origin: 100% 50%; transition: background-color .22s; }
.lnk:hover::before, .rs-btn.rs-btn--ghost:hover::before { animation: rs-redraw .44s var(--ease) both; background: var(--pool); }
.rs-dark .lnk:hover::before, [data-theme="dark"] .lnk:hover::before, .rs-dark .rs-btn--ghost:hover::before, .rs-footer .lnk:hover::before { background: var(--pool-hi); }
.rs-btn.rs-btn--ghost:hover { color: inherit; }
@keyframes rs-redraw { 0% { transform: scaleX(1); transform-origin: 100% 50%; } 50% { transform: scaleX(0); transform-origin: 100% 50%; }
  50.1% { transform: scaleX(0); transform-origin: 0 50%; } 100% { transform: scaleX(1); transform-origin: 0 50%; } }

/* ===== rule lists (replace cards) ===== */
.rules { border-top: 1px solid var(--rule); }
.rules > li, .rules__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline;
  padding: 28px 0 32px; border-bottom: 1px solid var(--rule); }
.rs-dark .rules, .rs-dark .rules > li, [data-theme="dark"] .rules, [data-theme="dark"] .rules > li, [data-theme="dark"] .rules__row { border-color: var(--rule-dark); }
.rules__t { grid-column: 1 / span 6; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-sub); line-height: 1.05; letter-spacing: -.015em; }
.rules__d { grid-column: 8 / -1; max-width: 34em; text-wrap: pretty; }
.rules [data-preview] > * { transition: transform .45s var(--ease-out); }
.rules [data-preview]:hover > * { transform: translateX(12px); }
@media (max-width: 800px) { .rules > li, .rules__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } .rules__t, .rules__d { grid-column: 1 / -1; } }

/* ===== figures ===== */
.fig { margin: 0; }
.fig__media { position: relative; overflow: hidden; background: #2A221B; }
.fig__media > img, .fig__media > video { width: 100%; height: 100%; object-fit: cover; }
.fig figcaption, .fig__cap { display: flex; gap: 14px; margin-top: 12px; font: 500 12px/17px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); text-align: left; }
.fig__n { font-variant-numeric: tabular-nums; color: inherit; }

/* ===== forms: rule-only ===== */
.field, .rs-field { display: grid; gap: 8px; min-width: 0; }
.field > span, .rs-field > span, .field > label { font: 500 12px/17px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea, .rs-field input, .rs-field select {
  width: 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--stone); border-radius: 0; background: transparent; color: inherit;
  font: 400 17px/1.3 var(--font-sans); box-shadow: none; transition: box-shadow .2s, border-color .2s; -webkit-appearance: none; appearance: none; }
.field select, .rs-field select { padding-right: 24px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C8377' stroke-width='1.2'/%3E%3C/svg%3E") right 2px center / 10px 6px no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus, .rs-field input:focus, .rs-field select:focus { outline: none; border-bottom-color: var(--pool); box-shadow: inset 0 -1px 0 var(--pool); }
.rs-dark .rs-field input, .rs-dark .rs-field select, [data-theme="dark"] .field input, [data-theme="dark"] .field select { border-bottom-color: rgba(243, 238, 228, .45); }
.rs-dark .rs-field > span, [data-theme="dark"] .field > span { color: var(--chalk-2); }
.rs-dark .rs-field input:focus, [data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus { border-bottom-color: var(--pool-hi); box-shadow: inset 0 -1px 0 var(--pool-hi); }
.rs-field input[type="date"], .field input[type="date"] { font-variant-numeric: tabular-nums; }

/* ===== demo notes: plain text, never a chip ===== */
.note, .rs-demo { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 500 12px/17px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); vertical-align: baseline; }
.rs-demo { margin-left: .6em; }

/* ===== header (sec 5) ===== */
.rs-skip-link { position: fixed; left: var(--margin); top: -80px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--chalk); text-decoration: none; font: 500 14px/1 var(--font-sans); }
.rs-skip-link:focus { top: 12px; }
html .rs-header[data-rs-header] { position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 0 var(--margin); color: var(--chalk); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
  transition: color .3s var(--ease), transform .45s var(--ease-out); will-change: transform; }
html .rs-header[data-on="light"] { color: var(--ink); }
.rs-header[data-media] { text-shadow: 0 1px 14px rgba(10, 6, 3, .38); }
html .rs-header.is-hidden { transform: translateY(-100%); }
html .rs-header:focus-within { transform: none; }
.rs-brand { font: 400 22px/1 var(--font-display); letter-spacing: -.01em; text-transform: none; text-decoration: none; white-space: nowrap; color: inherit; padding: 8px 0; margin-right: auto; }
.rs-nav { display: flex; align-items: center; gap: 28px; }
.rs-nav a, .rs-skipintro, .rs-menu { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; border: 0; background: none; color: inherit;
  font: 500 14px/1 var(--font-sans); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; border-radius: 0; min-height: 0; }
.rs-nav a::after, .rs-skipintro::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.rs-nav a:hover::after, .rs-skipintro:hover::after { transform: scaleX(1); }
.rs-nav a[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--pool); border-radius: 50%; }
.rs-header[data-on="dark"] .rs-nav a[aria-current="page"]::before { background: var(--pool-hi); }
.rs-nav a.rs-nav__book::after { transform: scaleX(1); right: 0; }
.rs-nav__arr { display: none !important; width: 14px; height: 8px; background: currentColor; }
.rs-nav__arr--off { display: inline-block; width: 14px; height: 8px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .3s var(--ease-out); }
.rs-nav a.rs-nav__book:hover .rs-nav__arr { transform: translateX(4px); }
.rs-header__tools { display: flex; align-items: center; gap: 28px; }
.rs-skipintro { transition: opacity .25s ease, visibility 0s linear 0s; }
/* A11: gone once the map has been passed; back when scrolling up into the film */
.rs-skipintro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
.rs-menu { display: none; }
@media (max-width: 1080px) {
  .rs-menu { display: inline-flex; min-height: 44px; }
  .rs-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--margin) 32px;
    background: var(--ink); color: var(--chalk); text-shadow: none; max-height: calc(100svh - var(--header-h)); overflow: auto; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
  .rs-nav.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .rs-nav a { padding: 18px 0; border-bottom: 1px solid var(--rule-dark); font: 400 30px/1.1 var(--font-display); }
  .rs-nav a::after { display: none; }
  .rs-nav a[aria-current="page"]::before { left: auto; right: 0; background: var(--pool-hi); }
}

/* ===== footer (sec 5) ===== */
.rs-footer { position: relative; z-index: 3; background: var(--ink); color: var(--chalk); padding: 64px var(--margin); overflow: clip; }
.rs-footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; align-items: start; padding-bottom: 48px; border-bottom: 1px solid var(--rule-dark); }
.rs-footer__cols > * { grid-column-end: span 3; }
.rs-footer__tag { font: 400 var(--fs-sub)/1.05 var(--font-display); letter-spacing: -.015em; max-width: 9em; text-wrap: balance; color: var(--chalk) !important; }
.rs-footer h2 { font: 500 12px/17px var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin: 0 0 18px; }
.rs-footer li + li { margin-top: 2px; }
.rs-footer a:not(.btn):not(.lnk) { position: relative; display: inline-block; padding: 4px 0; text-decoration: none; }
.rs-footer a:not(.btn):not(.lnk)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--pool-hi); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease); }
.rs-footer a:not(.btn):not(.lnk):hover::after { transform: scaleX(1); }
.rs-footer p { color: var(--chalk-2); }
.rs-footer__clock { display: flex; align-items: baseline; gap: 14px; color: var(--chalk) !important; }
.rs-footer__clock time { font: 400 var(--fs-sub)/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.rs-footer .rs-footer__mark { display: block; margin: 28px 0 24px; font-family: var(--font-display); font-weight: 500; font-style: normal; font-optical-sizing: none; font-size: 40px !important; line-height: 1; letter-spacing: -.02em; white-space: nowrap; text-align: left; color: var(--chalk); }
.rs-footer__mark > span { display: inline; }
.rs-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 28px; font-size: 14px; color: var(--chalk-2); }
@media (max-width: 1000px) { .rs-footer__cols > * { grid-column-end: span 6; } }
@media (max-width: 560px) { .rs-footer__cols > * { grid-column: 1 / -1; } }

/* ===== motion kit hooks (sec 6) ===== */
[data-reveal="image"] { overflow: hidden; }
.rs-kit [data-reveal="lines"]:not(.is-split) { visibility: hidden; }
.rs-kit [data-reveal="image"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
.rs-ln-mask { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.rs-cursor { position: fixed; left: 0; top: 0; z-index: 90; width: 76px; height: 76px; margin: -38px 0 0 -38px; pointer-events: none; display: grid; place-items: center;
  mix-blend-mode: difference; opacity: 0; transition: opacity .2s; }
.rs-cursor::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--chalk); transform: scale(.1316); transition: transform .35s var(--ease-out), background-color .35s, box-shadow .35s; }
.rs-cursor.is-on { opacity: 1; }
.rs-cursor.is-word::before { transform: scale(1); background: transparent; box-shadow: inset 0 0 0 1px var(--chalk); }
.rs-cursor__w { position: relative; font: 500 12px/1 var(--font-sans); color: var(--chalk); opacity: 0; transition: opacity .2s; }
.rs-cursor.is-word .rs-cursor__w { opacity: 1; }
.rs-preview { position: fixed; left: 0; top: 0; z-index: 80; width: 280px; height: 360px; margin: -180px 0 0 32px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; background: #2A221B; }
.rs-preview.is-on { opacity: 1; }
.rs-preview img { width: 100%; height: 100%; object-fit: cover; }
.rs-curtain { position: fixed; inset: 0; z-index: 200; background: var(--ink); pointer-events: none; transform: translateY(101%); }
.rs-curtain.is-cover { transform: none; }
.rs-curtain.is-leave { transform: none; transition: transform .45s cubic-bezier(.7, 0, .25, 1); }
.rs-curtain.is-away { transform: translateY(-101%); transition: transform .55s cubic-bezier(.7, 0, .25, 1); }

/* ===== reduced motion: everything visible, nothing moves ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { visibility: visible !important; clip-path: none !important; }
  .rs-cursor, .rs-preview, .rs-curtain { display: none !important; }
  .rules [data-preview]:hover > * { transform: none; }
  html .rs-header.is-hidden { transform: none; }
}

/* ---- D4 (orchestrator): fixed optical size. Bodoni's auto opsz makes hairlines vanish at 30-110px ("Terrace" read "Ierrace",
   "4,800" read "1,800"). One sturdy master everywhere; the very large settings get a slightly finer one. ---- */
html { font-optical-sizing: none; font-variation-settings: 'opsz' 26; }
.t-page { font-variation-settings: 'opsz' 40; }

/* ===== F0 fix round (2026-11-14): shared contract ===== */
:root {
  --arrow-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 10.5l9-9M3.5 1.5h7v7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M5 0v14.5M1 10.5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  --label-c: var(--ink-2);   /* 8.9:1 on bone */
}
[data-theme="dark"], .rs-dark, .rs-footer { --label-c: var(--chalk-2); }   /* 9.6:1 on ink */
/* pool surface: ground pool, text chalk (8.0:1), labels chalk/82 (6.0:1) */
[data-theme="pool"] { --label-c: rgba(243, 238, 228, .82); --rule: rgba(243, 238, 228, .25); background: var(--pool); color: var(--chalk); }
[data-theme="pool"] .t-mute, [data-theme="pool"] .rs-lede, [data-theme="pool"] p { color: rgba(243, 238, 228, .86); }
[data-theme="pool"] .rules, [data-theme="pool"] .rules > li, [data-theme="pool"] .rules__row { border-color: rgba(243, 238, 228, .25); }
[data-theme="pool"] .btn, [data-theme="pool"] .rs-btn { --btn-bg: var(--chalk); --btn-fg: var(--ink); }
[data-theme="pool"] :focus-visible, [data-theme="pool"] .btn:focus-visible { outline-color: var(--chalk); }
[data-theme="pool"] .lnk:hover::before { background: var(--chalk); }
[data-theme="pool"] .field input, [data-theme="pool"] .field select, [data-theme="pool"] .field textarea { border-bottom-color: rgba(243, 238, 228, .55); }
[data-theme="pool"] .field > span, [data-theme="pool"] .field > label { color: var(--label-c); }
[data-theme="pool"] .field input:focus, [data-theme="pool"] .field select:focus { border-bottom-color: var(--chalk); box-shadow: inset 0 -1px 0 var(--chalk); }
.rs-header[data-on="pool"] { color: var(--chalk); }
.rs-header[data-on="pool"] :focus-visible { outline-color: var(--chalk); }
.rs-header[data-on="pool"] .rs-nav a[aria-current="page"]::before { background: var(--chalk); }
/* small figures: grotesk, tabular lining */
.t-fig { font-family: var(--font-sans); font-weight: 500; font-style: normal; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; line-height: 1; }
/* link variants: ext = up-right (leaves the site), down = in-page jump */
.lnk--ext::after { content: ''; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--arrow-ext) center / contain no-repeat; mask: var(--arrow-ext) center / contain no-repeat; transition: transform .44s var(--ease-out); }
.lnk--ext:hover::after { transform: translate(2px, -2px); }
/* R3: no arrows on internal links/buttons (.lnk--down keeps its class, draws no glyph) */
/* labels 12 px, notes 13 px; colour >= 4.5:1 on bone, ink and pool */
.label, .rs-eyebrow, .fig figcaption, .fig__cap, .field > span, .rs-field > span, .field > label, .rs-footer h2 { font-size: 12px; letter-spacing: .08em; }
.label, .rs-eyebrow, .fig figcaption, .fig__cap, .rs-footer h2 { color: var(--label-c); }
.note, .rs-demo { font-size: 13px; line-height: 18px; letter-spacing: .06em; color: var(--label-c); }
/* sturdier small display (Fable P0-1) */
.rules__t { font-weight: 500; font-variation-settings: 'opsz' 14; }
.t-num { font-weight: 500; }
/* shorthand rules reset the variation axes: re-apply after them */
.rs-brand { font-variation-settings: 'opsz' 26; }
.rs-footer__tag { font-weight: 500; font-variation-settings: 'opsz' 14; }
.rs-footer__clock time { font-weight: 500; font-variation-settings: 'opsz' 14; }
.rs-ln { display: block; }
/* header: 15 px nav, 44 px hit area; a 120 px ink gradient only while the ground under the header is media or dark */
@media (min-width: 1081px) {
  .rs-nav a, .rs-skipintro { font-size: 15px; min-height: 44px; padding: 0; }
  .rs-nav a::after, .rs-skipintro::after { bottom: 10px; }
}
html .rs-header[data-rs-header]::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 120px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(23, 17, 13, .45), rgba(23, 17, 13, 0)); opacity: 0; transition: opacity .3s var(--ease); }
html .rs-header[data-rs-header][data-media]::before, html .rs-header[data-rs-header][data-on="dark"]::before { opacity: 1; }
/* footer: 40 px Bodoni signature (.rs-footer__mark) on every page; non-Home pages get the compact two-row layout */
body:not(:has(.rs-film)) .rs-footer { padding: 64px var(--margin); }
body:not(:has(.rs-film)) .rs-footer__cols { row-gap: 24px; padding-bottom: 28px; }
body:not(:has(.rs-film)) .rs-footer__tag { font-size: 30px; }
body:not(:has(.rs-film)) .rs-footer h2 { margin-bottom: 10px; }
body:not(:has(.rs-film)) .rs-footer nav ul { display: grid; grid-template-columns: max-content max-content; column-gap: 28px; }
body:not(:has(.rs-film)) .rs-footer li + li { margin-top: 0; }
body:not(:has(.rs-film)) .rs-footer__clock time { font-size: 30px; }
body:not(:has(.rs-film)) .rs-footer__base { margin-top: 20px; }

/* ---- orchestrator cleanup: no flash before the arrival curtain (class set by a one-line <head> script, removed by kit.js);
   the 2.5 s animation is the safety net if the script never runs ---- */
html.rs-arriving::before { content: ''; position: fixed; inset: 0; z-index: 199; background: var(--ink); animation: rs-arr-out 0s 2.5s forwards; }
@keyframes rs-arr-out { to { visibility: hidden; } }

/* ===== R3 utilities ===== */
/* local scrim for text over a photo: bottom 35 % only, upper 65 % keeps its exposure. Parent needs position: relative. */
.scrim-b { position: absolute; inset: 65% 0 0 0; background: linear-gradient(to top, rgba(23, 17, 13, .78), rgba(23, 17, 13, 0)); pointer-events: none; }
/* names (Bodoni) vs headings (grotesk) hold their own variation settings */
.t-name { font-variation-settings: 'opsz' 26; }

/* R3 orchestrator cleanup: row titles and the footer tagline are not names -> grotesk (Bodoni is for names only) */
.rules__t { font-family: var(--font-sans); font-weight: 500; font-size: 22px; line-height: 1.2727; letter-spacing: -.01em; font-variation-settings: normal; }
.rs-footer .rs-footer__tag, body:not(:has(.rs-film)) .rs-footer__tag { font: 400 15px/22px var(--font-sans); letter-spacing: 0; max-width: 22em; font-variation-settings: normal; opacity: .78; }
/* R3 orchestrator cleanup: notes are sentence case (caps are for .label only) */
.note { text-transform: none; letter-spacing: 0; }


/* ===== R4 orchestrator (hostile panel v1.3.1): header and footer ===== */
/* header: 80 px bar, 15 px links with 44 px hit height, Reserve is the one solid action (104 x 40, radius 0) */
@media (min-width: 1081px) {
  :root { --header-h: 80px; }
  .rs-nav { gap: 28px; }
  .rs-nav a.rs-nav__book { min-width: 104px; height: 40px; min-height: 40px; padding: 0 20px; justify-content: center; background: var(--chalk); color: var(--ink); text-shadow: none; font-weight: 500; }
  .rs-nav a.rs-nav__book::after, .rs-nav a.rs-nav__book[aria-current="page"]::before { display: none; }
  .rs-nav a.rs-nav__book:hover { background: var(--bone, #EDE6DA); }
  html .rs-header[data-on="light"] .rs-nav a.rs-nav__book { background: var(--ink); color: var(--chalk); }
  html .rs-header[data-on="light"] .rs-nav a.rs-nav__book:hover { background: #2A211B; }
}
/* footer: Home uses the same compact two-row footer as the inner pages */
html .rs-footer { padding: 64px var(--margin); }
html .rs-footer .rs-footer__cols { row-gap: 24px; padding-bottom: 28px; }
html .rs-footer h2 { margin-bottom: 10px; }
html .rs-footer nav ul { display: grid; grid-template-columns: max-content max-content; column-gap: 28px; }
html .rs-footer li + li { margin-top: 0; }
html .rs-footer .rs-footer__clock time { font-size: 30px; }
html .rs-footer .rs-footer__base { margin-top: 20px; }