/* BARBOBA — base: reset, tokens, type, utilities */

@property --st-bg { syntax: '<color>'; inherits: true; initial-value: #F4EFE6; }
@property --st-fg { syntax: '<color>'; inherits: true; initial-value: #0E0C0A; }
@property --st-accent { syntax: '<color>'; inherits: true; initial-value: #6E1423; }
@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

:root {
  --ink:        #0E0C0A;
  --ink-2:      #1A1714;
  --ink-3:      #26211C;
  --cream:      #F4EFE6;
  --cream-2:    #EAE2D3;
  --gold:       #C9A96E;
  --gold-deep:  #9C7C45;
  --gold-text:  #7A5F2E;   /* gold for small text on cream (AA) */
  --rouge:      #6E1423;
  --rouge-text: #E58C99;   /* rouge for small text on ink (AA) */
  --ivory:      #FBF8F2;
  --matcha:     #8DB255;
  --taro:       #A58BC9;
  --sugar:      #8A5A2B;
  --milk:       #D9BFA0;
  --wa:         #25D366;
  --radius-sm:  6px;
  --radius:     14px;
  --radius-lg:  28px;
  --shadow:     0 20px 60px -20px rgb(14 12 10 / .35);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);

  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-script: 'Great Vibes', 'Brush Script MT', cursive;

  --gutter: 16px;
  --maxw: 1280px;
  --nav-h: 72px;

  /* surface tokens for "cream" sections; flipped in dark mode */
  --paper: var(--cream);
  --paper-2: var(--cream-2);
  --on-paper: var(--ink);
  --on-paper-muted: #574C40;
  --line-paper: rgb(14 12 10 / .14);
  --accent-paper: var(--gold-text);

  color-scheme: light dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--ink-2);
    --paper-2: var(--ink-3);
    --on-paper: var(--cream);
    --on-paper-muted: #BDB2A2;
    --line-paper: rgb(244 239 230 / .14);
    --accent-paper: var(--gold);
  }
}
:root[data-theme="dark"] {
  --paper: var(--ink-2);
  --paper-2: var(--ink-3);
  --on-paper: var(--cream);
  --on-paper-muted: #BDB2A2;
  --line-paper: rgb(244 239 230 / .14);
  --accent-paper: var(--gold);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; overflow-wrap: break-word; }
em, .em { font-style: italic; }
p { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* type scale */
.display-xl { font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.4rem); line-height: .98; letter-spacing: -.02em; }
.display-l  { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 4.6rem); line-height: 1; }
.display-m  { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem); }
.display-s  { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); }
.lede { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); max-width: 58ch; }
.label {
  font-family: var(--f-ui); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; font-size: .75rem; line-height: 1.4;
}
.muted { color: var(--on-paper-muted); }
.small { font-size: .875rem; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }

/* layout */
.container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.section { position: relative; padding-block: clamp(80px, 12vw, 160px); }
.section--paper { background: var(--paper); color: var(--on-paper); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink-2 { background: var(--ink-2); color: var(--cream); }
.stack > * + * { margin-top: var(--stack, 1rem); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 12px 18px;
  background: var(--gold); color: var(--ink); font-weight: 500; border-radius: var(--radius-sm);
  transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* section label: 01 — The Station */
.sec-label { display: inline-flex; align-items: center; gap: 14px; color: var(--accent-paper); margin-bottom: 1.4rem; }
.section--ink .sec-label, .section--ink-2 .sec-label, .on-ink .sec-label { color: var(--gold); }
.sec-label__rule { display: block; width: 48px; height: 1px; background: currentColor; transform-origin: left; }
.sec-label__num { font-variant-numeric: lining-nums; }

.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; opacity: .6; }
.laurel { width: 120px; height: 22px; color: var(--gold); margin-inline: auto; }

/* split-text lines */
.motion-on [data-split]:not(.hero__title) { opacity: 0; }
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line__inner { display: block; will-change: auto; }
.split-soft .split-line { overflow: visible; }

/* logo mask (takes currentColor without inlining 60KB of path data) */
.logo-mask {
  display: block; background-color: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.logo-mask--mark { --logo: url('/assets/brand/logo-mark.svg'); aspect-ratio: 224 / 226; }
.logo-mask--full { --logo: url('/assets/brand/logo-full.svg'); aspect-ratio: 678 / 384; }
.logo-mask--word { --logo: url('/assets/brand/logo-wordmark.svg'); aspect-ratio: 666 / 115; }

/* reveal (JS-free default is visible) */
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { transform: none; }
  .js .reveal.is-in { transition: opacity .4s linear !important; }
}