/* ============================================================
   BASE — brand-agnostic structural system.
   All color/font values come from CSS variables set at runtime by
   engine/theme.js from the active tenant config. No hard-coded brand.
   Ported from the 505rose.com design system, generalized.
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--serif, Georgia, serif);
  background: var(--paper, #f4ede0);
  color: var(--ink, #14110d);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- TYPOGRAPHY ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: currentColor; display: inline-block; }
.eyebrow.no-rule::before { display: none; }
.eyebrow.brick { color: var(--brick); }

.h-display { font-family: var(--serif); font-weight: 300; letter-spacing: -.035em; line-height: .92; }
.h-display em { font-style: italic; color: var(--brick); font-weight: 300; }
.h-xl { font-size: clamp(56px, 8vw, 132px); }
.h-l  { font-size: clamp(40px, 5.4vw, 84px); }
.h-m  { font-size: clamp(30px, 3.4vw, 52px); }
.h-s  { font-size: clamp(22px, 2vw, 30px); }

.lede { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.4; color: var(--ink-2); }
.body-lg { font-family: var(--serif); font-size: clamp(18px, 1.3vw, 21px); line-height: 1.55; color: var(--ink-2); }
.body { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- LAYOUT ---------- */
.wrap { max-width: var(--maxw, 1200px); margin: 0 auto; padding: 0 var(--gutter, 32px); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter, 32px); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter, 32px);
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.nav.light {
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 94%, transparent) 0%, transparent 100%);
  backdrop-filter: blur(3px);
}
.nav .brand { display: flex; align-items: baseline; gap: 10px; }
.nav .brand .num { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 24px; letter-spacing: -.02em; text-transform: none; line-height: 1; }
.nav .brand .name { font-size: 11px; opacity: .8; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { padding: 4px 0; opacity: .75; transition: opacity .3s var(--ease-out); }
.nav-links a:hover { opacity: 1; }
.nav .cta-mini { border: 1px solid currentColor; padding: 8px 14px; border-radius: 999px; transition: background .3s, color .3s; }
.nav .cta-mini:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 640px) { .nav-links a.hide-sm { display: none; } }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper);
  transition: transform .3s var(--ease-out), background .3s, color .3s, border-color .3s; cursor: pointer;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); background: var(--brick); border-color: var(--brick); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .arr { font-size: 14px; transition: transform .3s var(--ease-out); }
.btn:hover:not(:disabled) .arr { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.light:hover:not(:disabled) { background: var(--brick); border-color: var(--brick); color: var(--paper); }
.btn.block { display: flex; width: 100%; }
.btn.sm { padding: 11px 18px; }

/* ---------- PILLS ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border-radius: 999px;
}
.pill.brick { background: var(--brick); }
.pill.teal { background: var(--teal); }
.pill.gold { background: var(--gold); color: var(--ink); }
.pill.outline { background: transparent; color: var(--ink); border: 1px solid var(--rule-soft); }

/* ---------- REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .08s; } .reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; } .reveal.delay-4 { transition-delay: .32s; }
.reveal.delay-5 { transition-delay: .40s; }
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- GRAIN ---------- */
.grain::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .055; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0,0,0,.6) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------- FOOTER ---------- */
footer.foot { background: var(--ink); color: var(--paper); padding: clamp(48px,8vw,90px) var(--gutter,32px) 32px; }
footer.foot .foot-grid {
  max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(24px,4vw,56px); padding-bottom: 48px; border-bottom: 1px solid rgba(244,237,224,.18);
}
@media (max-width: 720px) { footer.foot .foot-grid { grid-template-columns: 1fr; } }
footer.foot h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(36px,5vw,52px); line-height: 1; letter-spacing: -.025em; margin-bottom: 18px; }
footer.foot h3 em { color: var(--brick); font-style: italic; }
footer.foot .col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(244,237,224,.6); margin-bottom: 14px; font-weight: 400; }
footer.foot .col a, footer.foot .col p { display: block; font-family: var(--serif); font-size: 17px; color: var(--paper); margin-bottom: 7px; opacity: .85; transition: opacity .25s, color .25s; }
footer.foot .col a:hover { opacity: 1; color: var(--gold); }
footer.foot .colophon { max-width: var(--maxw); margin: 24px auto 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,237,224,.5); }