/* ============================================================
   PT Template 3 — Base: reset, typography, shared components.
   Section-specific styles belong in css/sections/*.css, scoped
   under their section root class. Do NOT add section styles here.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
html.reduced-motion { scroll-behavior: auto; }

/* Anchored sections must clear the fixed nav when jumped to */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-on-bone);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video, iframe { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* --- Layout --- */
.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

/* --- Section rhythm helpers --- */
.section-pad { padding-block: var(--sp-section); }
.on-ink { color: var(--text-on-ink); background: var(--ink); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--white); }

/* --- Eyebrow + section heading pattern --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.on-ink .eyebrow { color: hsl(var(--accent-h) 70% 62%); }
.on-ink .eyebrow::before { background: hsl(var(--accent-h) 70% 62%); }

.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; color: var(--text-on-bone-dim); max-width: 52ch; }
.on-ink .section-head p { color: var(--text-on-ink-dim); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 300ms var(--ease-spring), box-shadow 300ms var(--ease-out),
    background-color 200ms var(--ease-out), color 200ms var(--ease-out),
    border-color 200ms var(--ease-out);
  will-change: transform;
}
.btn--solid { background: var(--accent); color: var(--accent-on); box-shadow: 0 8px 24px var(--accent-glow); }
.btn--solid:hover { background: var(--accent-strong); box-shadow: 0 12px 32px var(--accent-glow); }
.btn--ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn--ghost:hover { background: hsl(0 0% 100% / 0.08); }
.btn .btn__arrow { transition: transform 300ms var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Reveal-on-scroll (driven by js/core.js) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
html.reduced-motion [data-reveal] { opacity: 1; transform: none; transition: none; }

/* --- Marquee (duplicate .marquee__track content twice) --- */
.marquee { overflow: hidden; display: flex; }
.marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-shrink: 0;
  min-width: 100%;
  padding-right: 3rem;
  animation: marquee-scroll var(--marquee-dur, 36s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
html.reduced-motion .marquee__track { animation: none; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 3rem)); }
}

/* --- Grain texture for dark sections --- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* --- Ghost numeral --- */
.ghost-num {
  font-family: var(--font-display);
  font-size: var(--fs-ghost);
  font-weight: 800;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px hsl(0 0% 100% / 0.14);
  user-select: none;
  pointer-events: none;
}

/* --- Pulse-line brand motif (canonical EKG path lives in the addendum spec) --- */
.pulse-line { display: block; width: 100%; height: 44px; }
.pulse-line path {
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pulse-line--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-reveal].is-visible .pulse-line--draw path,
.pulse-line--draw[data-reveal].is-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
}
html.reduced-motion .pulse-line--draw path { stroke-dashoffset: 0; transition: none; }

/* --- Auto chapter numbers (data-chapter stamped by core.js) --- */
.section-head { position: relative; }
.section-head[data-chapter]::before {
  content: attr(data-chapter);
  position: absolute;
  top: -0.55em;
  left: -0.06em;
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  line-height: 1;
  color: currentColor;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* --- Chapter spine (injected by core.js, desktop only) --- */
.chapter-spine {
  position: fixed;
  /* .container's left edge never goes below 1.25rem (20px, half of its
     2.5rem gutter) once the viewport is narrower than --container + 2.5rem,
     which happens well above the 1200px floor this spine appears at. The
     spine's own numeral + rail run ~13px wide, so 0.4rem (6.4px) keeps its
     right edge under the container's left edge with room to spare instead
     of sitting under the card text at the lower end of that range. */
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  mix-blend-mode: difference; /* legible on both bone and ink sections */
  pointer-events: none;
}
.chapter-spine__rail {
  width: 2px;
  height: 72px;
  background: hsl(0 0% 100% / 0.25);
  border-radius: 2px;
  overflow: hidden;
}
.chapter-spine__fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms var(--ease-out);
}
.chapter-spine__total { opacity: 0.55; }

/* --- Cursor-reactive glow (injected by core.js on section.on-ink) ---
   .cursor-glow-clip is the section's own overflow:hidden box: on-ink sections
   deliberately leave overflow-y open (see 00-interior-hero.css) so their wave
   graphic can bleed into the section below. Without its own clip, the glow
   inherited that same opening and painted on top of the next section instead
   of fading out at the boundary. */
.cursor-glow-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.cursor-glow {
  position: absolute;
  top: -220px;
  left: -220px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out);
  will-change: transform, opacity;
}

/* --- Screen-reader only --- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}