/* Design tokens — spec §5 */
:root {
  --ochre: #b8893b;
  --bone: #ece3d0;
  --ink: #14110d;
  --ink-soft: #2a241c;
  --dust: #d8c9a8;
  --max-w: 42rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font-family: Georgia, "Times New Roman", serif; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Task 2: Design System ────────────────────────────────────────────────── */

/* Self-hosted display face */
@font-face {
  font-family: "Special Elite";
  src: url("assets/fonts/SpecialElite.ttf") format("truetype");
  font-display: swap;
}

/* Layout primitives */
.section { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem,10vh,6rem) var(--pad); position: relative; }
.card { width: 100%; max-width: var(--max-w); margin-inline: auto; }
.display { font-family: "Special Elite", Georgia, serif; letter-spacing: .02em; line-height: 1.1; }

/* Typographic scale — mobile-first, fluid */
.lede { font-size: clamp(1.6rem, 6vw, 2.6rem); color: var(--bone); line-height: 1.25; }
.kicker { font-family:"Special Elite",serif; text-transform: uppercase; letter-spacing:.25em; font-size:.8rem; color: var(--ochre); }
p.body { font-size: clamp(1.05rem, 2.6vw, 1.2rem); color: var(--dust); max-width: 36rem; }
.quote { font-size: clamp(1.3rem,4.5vw,1.9rem); color: var(--bone); font-style: italic; border-left: 2px solid var(--ochre); padding-left: 1rem; }
cite { display:block; margin-top:.6rem; font-style: normal; font-size:.85rem; color: var(--ochre); letter-spacing:.05em; }

/* Texture — film grain via CSS, no image request */
.grain::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image: repeating-radial-gradient(circle at 0 0, #000 0 1px, transparent 1px 2px); mix-blend-mode: overlay; }

/* Reveal: hidden ONLY when JS is present (html.js); visible by default otherwise */
.reveal { opacity: 1; transform: none; transition: opacity .9s ease, transform .9s ease; }
html.js .reveal { opacity: 0; transform: translateY(1.5rem); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity:1; transform:none; transition:none; } }

/* ── Task 3: Hook-specific styling ─────────────────────────────────────────── */

#hook { background: radial-gradient(120% 90% at 50% 0%, #2a2114 0%, var(--ink) 60%); text-align: left; }
.scroll-cue { position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); color:var(--ochre); text-decoration:none; font-size:1.5rem; }
html.js .scroll-cue { animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, .4rem); } }
@media (prefers-reduced-motion: reduce) { html.js .scroll-cue { animation: none; } }

/* ── Task 5: Centerpiece styling ───────────────────────────────────────────── */

.centerpiece { background: radial-gradient(130% 100% at 50% 40%, #3a2c16 0%, var(--ink) 70%); }
.clock { list-style:none; padding:0; margin:1.5rem 0; display:grid; gap:.6rem; }
.clock li { color:var(--dust); }
.clock .yr { color:var(--ochre); display:inline-block; min-width:6.5rem; }

/* ── Task 6: Objections styling ───────────────────────────────────────────── */

.objections div { margin: 1.4rem 0; }
.objections dt { font-family:"Special Elite",serif; color: var(--bone); font-size: clamp(1.1rem,3.5vw,1.35rem); margin-bottom:.4rem; }
.objections dd { margin:0; color: var(--dust); }

/* ── Task 7: CTA styling ──────────────────────────────────────────────────── */

.cta { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:1.2rem; }
.cta a { font-family:"Special Elite",serif; color: var(--ochre); font-size: clamp(1.2rem,4vw,1.5rem); text-decoration:none; border-bottom:1px solid currentColor; }
.cta span { display:block; color: var(--dust); margin-top:.3rem; font-size:1rem; }

/* ── Task 8: Treated background imagery ──────────────────────────────────── */

/* Base: isolate stacking context so pseudo-elements go behind content */
.has-bg { position: relative; isolation: isolate; }

/* Layer 1 (bottom): the image, desaturated + darkened to palette */
.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bg-img) center / cover no-repeat;
  filter: grayscale(1) sepia(.45) contrast(1.1) brightness(.45);
}

/* Layer 2: ink gradient overlay unifies image with palette; graceful without image */
.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--ink-soft) 0%, var(--ink) 100%);
  opacity: .58;
}

/* Task 8b: closing couplet — two sentences as tight centered lines, each
   wrapping as a whole unit (nbsp keeps "go off." / "film it." intact). */
.close-line { text-wrap: balance; }
.close-line + .close-line { margin-top: .15em; }