/* ============================================================
   base.css — Gatsby / Art Deco build. Reset, typography, layout
   primitives, foil text, film grain, deco buttons.
   Depends only on tokens.css.
   NOTE: .reveal is intentionally NOT pre-hidden here: entrance
   animation is driven by GSAP (js/deco.js); with no JS the page
   stays fully visible.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Film grain: fixed and pointer-events-none, so it composites once and never
   repaints on scroll. Gives the black fields the tooth of printed card stock
   and takes the digital cleanness off the photographs.
   The noise is desaturated and forced fully opaque (feColorMatrix + feFuncA)
   so its mean luminance sits near mid-grey and `overlay` stays close to
   colour-neutral: measured shift on the light tokens is about 2%. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

button { font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--btn-on); }

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

/* Keyboard users land on content, not on the nav, every time. */
.skip-link {
  position: absolute; left: 50%; top: 0; z-index: var(--z-modal);
  transform: translate(-50%, -120%);
  background: var(--accent); color: var(--btn-on);
  padding: 0.7rem 1.4rem;
  font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; text-decoration: none; font-weight: 600;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---- Layout primitives ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--bleed { max-width: var(--container-bleed); }

.section { padding-block: var(--section-space); position: relative; }
.section--surface-low { background: var(--surface-low); }
.section--surface { background: var(--surface); }
/* Optical correction: bottom padding reads short next to a heading-led block. */
.section + .section { padding-top: calc(var(--section-space) * 0.86); }

/* ---- Foil text: stamped gold that catches light ---- */
.foil {
  background-image: var(--foil);
  background-size: 220% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* deco.js sweeps --foil-x on entry; static value keeps it lit without JS */
  background-position-x: var(--foil-x, 12%);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .foil { -webkit-text-fill-color: var(--accent); color: var(--accent); }
}

/* ---- Deco rules and lozenges ---- */
.rule {
  position: relative; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.rule--left { background: linear-gradient(90deg, var(--accent), transparent); }
.lozenge::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line-gold);
}

/* ---- Chapter head: numeral + rule running right + spaced caps ----
   Replaces the centred heading block. Gives the page a left spine. */
.chapter {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: var(--chapter-space);
}
.chapter__top {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
}
.chapter__numeral {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  padding: 0.42em 0.68em 0.42em 0.86em;
  border: 1px solid var(--line-gold);
  line-height: 1;
  white-space: nowrap;
}
.chapter__rule {
  flex: 1 1 auto;
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--accent), var(--line-gold-soft) 62%, transparent);
  transform-origin: left center;
}
.chapter__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.chapter__note {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
/* Centred variant for the interludes that genuinely want symmetry. */
.chapter--centre { align-items: center; text-align: center; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 1.25rem;
}

/* ---- Buttons (deco hexagonal caps, foil sweep on hover) ---- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.05rem 2.4rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  background: var(--btn-bg);
  color: var(--btn-on);
  border-radius: var(--radius);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px) scale(0.99); }

/* The trailing mark sits in its own bezelled square, never naked next to text. */
.btn__mark {
  width: 1.35em; height: 1.35em;
  display: grid; place-items: center;
  background: rgba(18, 15, 8, 0.14);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn__mark::before {
  content: ""; width: 5px; height: 5px;
  background: currentColor; transform: rotate(45deg);
}
.btn:hover .btn__mark { transform: translateX(2px); background: rgba(18, 15, 8, 0.22); }

.btn--ghost {
  background: transparent;
  color: var(--accent-deep);
  clip-path: none;
  border: 1px solid var(--line-gold);
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--line);
}
.btn--ghost .btn__mark { background: var(--line-gold-soft); }
.btn--ghost:hover {
  background: var(--accent); color: var(--btn-on);
  border-color: var(--accent); box-shadow: none;
}
.btn--ghost:hover .btn__mark { background: rgba(18, 15, 8, 0.18); }

.btn[disabled] { opacity: 0.5; cursor: default; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__mark, .skip-link { transition: none; }
  .btn:active { transform: none; }
}

/* ---- Reveal targets (animated by GSAP in deco.js, visible without JS) ---- */
.reveal { opacity: 1; transform: none; }

/* ---- Utilities ---- */
.is-hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}