/* ==========================================================================
   Base
   Reset, typography, layout primitives, the image-placeholder system and
   the motion primitives. Shared by every page.
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
.serif { font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
em { font-style: italic; }

/* ---------- Layout scaffolding ---------- */
.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--edge); }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Image placeholder system ---------- */
.ph {
  --hatch: repeating-linear-gradient(45deg, #e9e3d8, #e9e3d8 15px, #dfd8cb 15px, #dfd8cb 30px);
  position: relative; overflow: hidden;
  background: var(--img, var(--hatch)) center / cover no-repeat, var(--paper-warm);
}
.ph.dark { background: var(--img, var(--ink)) center / cover no-repeat, var(--ink); }
.ph-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  background: rgba(17,17,16,0.82); color: var(--paper);
  font-size: 12px; letter-spacing: 0.02em; line-height: 1.4;
  padding: 8px 12px; border-radius: 3px; max-width: min(340px, calc(100% - 32px));
}

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; border-radius: 1px; }

/* ---------- Reveal + motion primitives ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.24,1), transform .7s cubic-bezier(.22,.61,.24,1); will-change: opacity, transform; }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22,.61,.24,1), transform .6s cubic-bezier(.22,.61,.24,1); }
  .js .stagger.in > * { opacity: 1; transform: none; }
  .js .stagger.in > *:nth-child(2) { transition-delay: .08s; }
  .js .stagger.in > *:nth-child(3) { transition-delay: .16s; }
  .js .stagger.in > *:nth-child(4) { transition-delay: .24s; }
  .js .stagger.in > *:nth-child(5) { transition-delay: .32s; }
  .js .stagger.in > *:nth-child(6) { transition-delay: .40s; }
  .js .beat { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .js .beat.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .stagger > *, .js .beat { opacity: 1 !important; transform: none !important; }
}