/* ============================================================
   BookDayPass — Editorial Design Tokens
   "A private club for daylight hours."
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500;6..72,600&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* — Palette —— ink, bone, ember, smoke ——————— */
  --ink:        #0F0F0E;     /* near-black, slightly warm */
  --ink-2:      #1C1B19;     /* surface raised */
  --ink-3:      #2A2926;
  --bone:       #F5F1EA;     /* warm paper white */
  --bone-2:     #EBE5DA;     /* card surface on bone */
  --bone-3:     #DDD5C5;     /* hairline on bone */
  --smoke:      #807A6F;     /* secondary text on bone */
  --smoke-2:    #A8A196;
  --ember:      #B5582C;     /* burnt copper accent — 1 use only */
  --ember-soft: #D8916B;
  --gold:       #C8A464;     /* a hint, for badges */
  --moss:       #4A5A3E;     /* very rare verdant accent */

  --bg:         var(--bone);
  --fg:         var(--ink);
  --muted:      var(--smoke);
  --rule:       var(--bone-3);
  --surface:    #FBF8F2;

  /* — Type ——————————————————————————————————— */
  --serif:  'Newsreader', 'Cormorant Garamond', Georgia, serif;
  --sans:   'Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Scale — editorial, generous —————————————— */
  --fs-hero:    clamp(64px, 9vw, 148px);
  --fs-h1:      clamp(44px, 5.5vw, 88px);
  --fs-h2:      clamp(34px, 3.6vw, 56px);
  --fs-h3:      clamp(24px, 2.2vw, 34px);
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 11px;
  --fs-mono:    12px;

  /* — Spacing —————————————————————————————————— */
  --gutter:     clamp(20px, 4vw, 64px);
  --section-y:  clamp(80px, 12vh, 160px);

  /* — Other ——————————————————————————————————— */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --hairline: 1px solid var(--rule);
  --hairline-ink: 1px solid rgba(15,15,14,.12);
  --hairline-bone: 1px solid rgba(245,241,234,.14);
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur: 480ms;
}

/* — Reset + base ——————————————————————————————— */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01','cv11';
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-variation-settings: 'opsz' 72; }
h2 { font-size: var(--fs-h2); font-variation-settings: 'opsz' 48; }
h3 { font-size: var(--fs-h3); font-variation-settings: 'opsz' 28; }
p { margin: 0; text-wrap: pretty; }

/* — Editorial primitives —————————————————————— */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
}
.eyebrow--ember { color: var(--ember); }
.eyebrow--bone  { color: rgba(245,241,234,.7); }

.rule { height: 1px; background: var(--rule); border: 0; width: 100%; }
.rule--ink { background: rgba(245,241,234,.16); }

.lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  font-weight: 300;
  color: var(--ink);
  font-variation-settings: 'opsz' 18;
  max-width: 32ch;
}

/* — Buttons ——————————————————————————————————— */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bone);
  transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur);
}
.btn:hover { transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bone); }
.btn--bone { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn--ember { background: var(--ember); color: var(--bone); border-color: var(--ember); }
.btn--lg { padding: 22px 36px; font-size: 15px; }
.btn--sm { padding: 10px 18px; font-size: 13px; }

/* — Layout helpers ————————————————————————————— */
.container { padding: 0 var(--gutter); }
.container-wide { padding: 0 var(--gutter); }
@media (min-width: 1400px) { .container { max-width: 1440px; margin: 0 auto; } }

/* — Pretty tags ——————————————————————————————— */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(15,15,14,.04);
  border: 1px solid rgba(15,15,14,.1);
  border-radius: 2px;
  color: var(--ink);
}
.tag--bone { background: rgba(245,241,234,.08); border-color: rgba(245,241,234,.2); color: var(--bone); }
.tag--ember { background: rgba(181,88,44,.1); border-color: rgba(181,88,44,.3); color: var(--ember); }

/* — Numerals + section index ————————————— */
.section-index {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--smoke);
  text-transform: uppercase;
}

.giant-numeral {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(80px, 12vw, 200px);
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--ink);
}

/* — Image utilities ——————————————————————————— */
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-wide     { aspect-ratio: 16 / 10; }
.aspect-cinema   { aspect-ratio: 21 / 9; }
.cover { width: 100%; height: 100%; object-fit: cover; }

/* — Subtle motion —————————————————————————————— */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp 900ms var(--ease) both; }

/* — Marquee ——————————————————————————————————— */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* — Selection ——————————————————————————————— */
::selection { background: var(--ink); color: var(--bone); }

/* — Scroll bars (subtle) ————————————————————— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,15,14,.18); border-radius: 999px; }

/* — Header / Nav ——————————————————————————————— */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  background: rgba(245,241,234,.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(15,15,14,.06);
}
.nav__brand {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 28;
}
.nav__brand sup { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; vertical-align: super; opacity: .6; margin-left: 4px; }
.nav__links { display: flex; gap: 30px; align-items: center; }
.nav__links a { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.nav__links a:hover { color: var(--ember); }
.nav__cta { display: flex; align-items: center; gap: 14px; }

@media (max-width: 820px) {
  .nav__links { display: none; }
}

/* — Footer ——————————————————————————————————— */
.foot {
  background: var(--ink); color: var(--bone);
  padding: 100px var(--gutter) 40px;
}
.foot__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 60px;
  padding-bottom: 80px;
  border-bottom: 1px solid rgba(245,241,234,.14);
}
.foot__brand { font-family: var(--serif); font-size: 36px; line-height: 1.05; }
.foot h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(245,241,234,.6); margin: 0 0 20px; font-weight: 500; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.foot ul a { font-size: 14px; color: rgba(245,241,234,.85); }
.foot ul a:hover { color: var(--ember-soft); }
.foot__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(245,241,234,.5);
}
@media (max-width: 920px) {
  .foot__top { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Compatibility shim — keep existing components rendering
   ============================================================
   Old --bdp-color-* names from design-system.css continue to
   resolve to the new editorial tokens. Customizer color pickers,
   inline styles we missed, and all current components keep working
   while we migrate templates one by one. Remove this block once
   every template has been refactored to the new tokens. */
:root {
  --bdp-color-primary:   var(--ink);
  --bdp-color-secondary: var(--ember);
  --bdp-color-text:      var(--ink);
  --bdp-color-muted:     var(--smoke);
  --bdp-color-bg:        var(--bone);
  --bdp-color-surface:   var(--surface);
  --bdp-color-border:    var(--rule);
  --bdp-color-dark:      var(--ink);
  --bdp-color-danger:    #c0392b;
}