/* ============================================================
   For Dad — shared design system
   Palette: Bone & Indigo  ·  Type: Fraunces + Inter (+ Newsreader)
   Mood: warm, still, expensive, soulful. Restraint is the brand.
   ============================================================ */

:root {
  /* — Light / paper (primary) — */
  --bg:          #F4EFE6;   /* warm bone paper            */
  --surface:     #EAE3D6;   /* raised panels              */
  --surface-2:   #DED4C4;   /* greige insets              */
  --text:        #23201B;   /* warm near-black ink        */
  --text-muted:  #6B6356;   /* captions, metadata         */
  --accent:      #26324A;   /* deep modern indigo         */
  --accent-deep: #1A2336;   /* indigo depth / hover       */
  --wood:        #7A5A3E;   /* walnut                     */
  --wood-deep:   #5C4329;
  --slate:       #5E6E73;   /* water slate                */
  --border:      #D2C7B5;   /* warm hairline              */

  /* — Dark / dusk (heroes & quiet pages) — */
  --d-bg:        #1B2230;
  --d-surface:   #242C3C;
  --d-text:      #EDE6D8;
  --d-muted:     #9AA0AC;
  --d-accent:    #C9A77C;   /* warm brass glow            */
  --d-slate:     #7E8B92;
  --d-border:    #333C4D;

  /* — Type — */
  --serif:  "Fraunces", Georgia, serif;
  --read:   "Newsreader", Georgia, serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* — Motion — */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.42, 0, 0.58, 1);
  --ease-quiet:    cubic-bezier(0.25, 0.1, 0.25, 1);

  /* — Rhythm — */
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 68ch;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0.002em;
  color: var(--text);
  background: var(--bg);
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 360;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--text);
}
.display {
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(2.9rem, 6.5vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 340; }
p { max-width: var(--measure); }

/* small-caps eyebrow / caption — the editorial signature */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.caption { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.01em; }

/* ---------- material utilities ---------- */
.rule { border: 0; height: 1px; background: var(--border); opacity: 0.85; }

.wood {
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(89.5deg, rgba(255,240,220,.06) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, var(--wood), var(--wood-deep));
  background-blend-mode: multiply, screen, normal;
}

.vignette { position: relative; }
.vignette::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(20,16,12,.22) 100%);
}

.dusk {
  background:
    radial-gradient(80% 60% at 72% 18%, rgba(201,167,124,.14), transparent 60%),
    linear-gradient(180deg, #242C3C 0%, #1B2230 60%, #161C28 100%);
}

/* paper grain overlay (pair with the .grain <svg> in markup) */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
  opacity: 0.05; mix-blend-mode: multiply;
}

/* ---------- shared components ---------- */
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }

/* link with a slow warm underline */
.link {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease-quiet), color .4s var(--ease-quiet);
  padding-bottom: 1px;
}
.link:hover { background-size: 100% 1px; color: var(--accent); }

/* play chip — the "one tap" affordance */
.chip {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  letter-spacing: .02em; color: var(--bg);
  background: var(--accent); border: 0; border-radius: 999px;
  padding: .62rem 1.15rem; cursor: pointer; text-decoration: none;
  transition: background .4s var(--ease-quiet), transform .4s var(--ease-out-soft);
}
.chip:hover { background: var(--accent-deep); transform: translateY(-2px); }
.chip svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}