:root {
  --accent-1: #E0D1B6;
  --accent-2: #F5E8D1;
  --accent-3: #C8B89C;
  --accent-4: #A89878;
  --accent-5: #8B7355;
  --accent-6: #6B5640;
  --accent-7: #4A382A;
  --accent-8: #2F2418;
  --accent-9: #1F1810;
  --accent-10: #D4C4A8;
  --accent-11: #B89A75;
  --accent-12: #96794E;
}

.accent-1  { background: var(--accent-1);  color: var(--bg); }
.accent-2  { background: var(--accent-2);  color: var(--bg); }
.accent-3  { background: var(--accent-3);  color: var(--bg); }
.accent-4  { background: var(--accent-4);  color: var(--bg); }
.accent-5  { background: var(--accent-5);  color: var(--fg); }
.accent-6  { background: var(--accent-6);  color: var(--fg); }
.accent-7  { background: var(--accent-7);  color: var(--fg); }
.accent-8  { background: var(--accent-8);  color: var(--fg); }
.accent-9  { background: var(--accent-9);  color: var(--fg); }
.accent-10 { background: var(--accent-10); color: var(--bg); }
.accent-11 { background: var(--accent-11); color: var(--bg); }
.accent-12 { background: var(--accent-12); color: var(--bg); }

/* ===== B.2 — Hero h1 letter-by-letter fade-up =====
 * Each <span class="hero-char"> starts at opacity 0 + translateY(8px);
 * motion.js initHeroType() rAF-ticks per-char opacity + transform back to 0.
 * prefers-reduced-motion: initHeroType bails, so .hero-char rules don't fire.
 * No @keyframes (C11), border-radius: 0 (C13).
 */
.hero-word {
  display: inline-block;  /* wraps independently on narrow screens */
}
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}

/* ===== C.2.1 — Top scroll progress hairline =====
 * 2px navy bar at top of viewport. Width fills 0→100% via JS rAF.
 * C11 honoured: no @keyframes, JS sets --page-progress directly.
 * C13 honoured: no border-radius.
 */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  pointer-events: none;
  z-index: 200;
}
.scroll-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--accent-wine);
  transform-origin: left center;
  transform: scaleX(var(--page-progress, 0));
  /* JS updates --page-progress on rAF; CSS transition smooths visual */
  transition: transform 0.15s linear;
}

/* ===== C.2.2 — Section number tick (serif navy "01") =====
 * Inline-block serif navy number on the left of section h2.
 * Scales/translates in on viewport enter via initSectionTicks rAF.
 * C11 honoured: no @keyframes, JS sets opacity + transform.
 * C13 honoured: no border-radius.
 */
.section-tick {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--accent-wine);
  margin-right: 12px;
  vertical-align: baseline;
  opacity: 0;
  transform: translateX(-8px);
  /* Font-variant-numeric: tabular-nums for aligned numbers */
  font-variant-numeric: tabular-nums;
}