/* ============================================================
   WagonWorksAI Base · paper, type, section moods
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Smooth cross-page transitions where supported (ignored elsewhere) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: var(--wonk-off);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Paper grain — felt, not seen (3–4% opacity) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* ---------- Type scale ---------- */
h1, h2, h3 { font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
h1 { font-size: clamp(42px, 7vw, 88px); }
h2 { font-size: clamp(30px, 4.5vw, 46px); }
h3 { font-size: clamp(22px, 3vw, 30px); }

/* the emotional turn — italic, Sunrise, wonk on */
.turn {
  font-style: italic; font-weight: 600; color: var(--sunrise);
  font-variation-settings: var(--wonk-on);
}
.night .turn, .campfire .turn { color: var(--ember); }

p.lede { font-size: 19px; max-width: 58ch; }
.body-copy { font-size: 17px; max-width: 66ch; }

/* spoken lines */
.spoken { font-style: italic; font-size: 21px; color: var(--sky); }

/* kickers */
.kicker {
  font-family: var(--sans); font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--sunrise); display: block; margin-bottom: 14px;
}
.kicker.quiet { color: var(--saddle); }

/* meta / captions */
.meta { font-family: var(--sans); font-size: 12.5px; color: var(--saddle); }

/* drop cap for long reads */
.dropcap::first-letter {
  font-family: var(--display); font-weight: 900; font-size: 66px;
  float: left; line-height: .66; padding: 6px 12px 0 0; margin-top: 2px; color: var(--sunrise);
}

/* marginalia — surveyor's remark */
.margin-note {
  float: right; width: 180px; margin: 6px 0 14px 26px;
  font-style: italic; font-size: 13.5px; color: var(--sky); line-height: 1.5;
  border-top: 2px solid var(--sunrise); padding-top: 8px;
}

/* ---------- Section moods ---------- */
section { padding: var(--s6) 0; position: relative; }

.daylight { background: var(--cream); }
.parchment { background: var(--panel); }

/* Campfire — warnings are told around a fire. No CTAs inside. */
.campfire {
  background: radial-gradient(120% 90% at 50% 118%, #4a2c1a 0%, #2a2433 34%, var(--night2) 68%);
  color: #f4efe6;
}
.campfire .kicker { color: var(--ember); }
.campfire .quiet-line { color: #c9bea8; }

/* survey-marker section numbers */
.marker { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.marker .disc {
  width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center; position: relative; background: var(--cream);
}
.marker .disc::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1px dashed var(--saddle); }
.marker .disc b { font-weight: 900; font-size: 20px; }
.marker .lbl { font-family: var(--sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--saddle); }

/* mile markers down the margin */
.mile {
  position: absolute; left: -4px; top: 84px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--sans); font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--saddle); opacity: .85;
}

@media (max-width: 860px) {
  .margin-note { float: none; width: auto; margin: 0 0 18px; }
  .mile { display: none; }
}

/* ---------- Reveal on scroll (settle and stop, never bounce) ----------
   Uses the independent `translate` property (not `transform`) so it composes
   with each object's own resting tilt/lift instead of clobbering it. */
.reveal { opacity: 0; translate: 0 16px; transition: opacity .5s ease, translate .5s cubic-bezier(.2, .7, .2, 1); }
.reveal.shown { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.shown { opacity: 1 !important; translate: none !important; transition: none !important; }
}