/* ============================================================
   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% 72%); }
.on-ink .eyebrow::before { background: hsl(var(--accent-h) 70% 72%); }

.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;
  left: 1.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; }

/* Below 1400px, .container's left margin stays flat at 20px (the
   "100% - 2.5rem" branch of min(1200px, 100% - 2.5rem)) while the spine's
   right edge sits at a fixed ~36px from the viewport edge, so the two
   overlap from 1200px up to roughly 1350px. Gate the spine here to match
   the width where content actually clears it, not the JS's creation
   threshold's original (wrong) assumption that 1200px was also safe. */
@media (max-width: 1399.98px) {
  .chapter-spine { display: none; }
}

/* --- Cursor-reactive glow (injected by core.js on section.on-ink) --- */
.cursor-glow {
  position: absolute;
  top: -220px;
  left: -220px;
  width: 440px;
  height: 440px;
  z-index: 0;
  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;
}

/* --- Skip link: first focusable element on every page, invisible until
   keyboard-focused. Sits above the nav (z-index 300 > nav's 210) so it is
   never obscured. --- */
.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 300;
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-card);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition: top 200ms var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}