/* ==========================================================================
   Base - reset, typography, layout primitives, accessibility
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--page-bg);
  transition: background var(--dur-3) var(--ease-out);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Folksy paper grain - a faint hand-printed texture over everything. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
@media print { body::after { display: none; } }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Headings ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;       /* Fraunces: large = display cut, small = text cut */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
/* Use even-height lining figures everywhere in the serif (Playfair's default
   old-style figures make 6/8 taller than 1/2 - looked off in "1926–2026"). */
h1, h2, h3, h4, .display, .tl__year, .stat .num, .event__date .d, .banner__bigfig, .price, .hero__meta b {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "pnum" 1;
}
.display   { font-size: var(--step-5); line-height: 0.98; }
/* Page titles all share the hero's capped ramp. Bare h1s used to ride the
   open --step-4 (74px) and intro h1.display rode --step-5 (109px), which is
   where the site's four competing H1 sizes came from (polish audit). The
   landing's cinema override still outranks this, and non-heading .display
   uses (the footer wordmark) keep the big ramp. */
h1, .h1, h1.display { font-size: var(--hero-title); }
h2, .h2    { font-size: 2rem; }               /* one H2 size site-wide (32px) - was the fluid --step-3 (33-54px), the source of the H2 size split */
h3, .h3    { font-size: 1.375rem; line-height: var(--leading-snug); }   /* 22px - was --step-2 (26-37px) */
h4, .h4    { font-size: var(--step-1); line-height: var(--leading-snug); }
strong, b  { font-weight: 600; }             /* one emphasis weight site-wide; 700 was only reached by raw <strong>/<b> (design audit 2026-09-21) */


p { max-width: 100%; }   /* text fills the consistent column (Wave 2 redesign) */
/* Leads read as body-size intros, set apart by tone and measure only. They
   used to run a step larger (--step-1); client killed the effect sitewide
   (2026-07-10): "i don't like this effect to be anywhere". */
.lead { font-size: var(--step-0); line-height: 1.55; color: var(--ink-2); max-width: 100%; }

/* ---- Eyebrow / kicker -------------------------------------------------- */
.eyebrow {
  /* Warm small-caps serif instead of terminal mono-caps. Mono is reserved
     for data (dates, prices, folios) via .eyebrow--data / .mono. */
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
/* Opt back into mono caps for data-flavoured eyebrows (years, prices). */
.eyebrow--data {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant: normal;
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 2rem; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* ---- Layout ------------------------------------------------------------ */
/* One centered content frame, site-wide: every section's content sits in
   --content (1280px), centered, with a responsive side gutter - so the page has
   comfortable equal margins and nothing runs edge-to-edge or drifts. Long
   text-only passages narrow to --measure but stay left-aligned to the frame's
   left edge (never centered); a two-column block fills the full frame. */
.container {
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--wide { max-width: var(--content); }

/* Reading text caps at the measure but stays LEFT-aligned to the frame's left
   edge - the same line the section headings, cards and galleries start on - so
   every content block shares one left margin. It is never centered (that put
   prose on a different edge than the full-width sections). */
.container > .rich,
.container > .lead { max-width: var(--measure); }
.container > .rich.measure-wide,
.container > .lead.measure-wide { max-width: 70ch; }
.prose-section > .sechead { max-width: var(--measure); }

/* One consistent vertical rhythm for every band, so section-to-section gaps are
   identical down the whole page (was an uneven mix of 4.5rem / 7rem). */
.section,
.section--tight { padding-block: var(--section-y); }

/* ---- Section colour rhythm -------------------------------------------- *
 * Chapters are placed deliberately, never striped by position (DECISIONS 3a/D4:
 * the old nth-of-type(even) auto-tint was retired - it was inert here anyway,
 * since each .section sits alone in its Elementor column, and it read as "too
 * clever"). Force a shade with the helpers below; .section--plain is the
 * explicit opt-out kept for any lingering references.  */
/* Chapter shades bleed to the viewport edge even though the .section they sit on
   is width-capped: the box-shadow paints the colour sideways and clip-path trims
   it to the section's own top/bottom, so it reads as a full-width band, not a
   floating 78rem box with page-bg slivers at the edges. */
.section--tint   { background: var(--bg-tint)   !important; box-shadow: 0 0 0 100vmax var(--bg-tint)   !important; clip-path: inset(0 -100vmax); }
.section--tint-2 { background: var(--bg-tint-2) !important; box-shadow: 0 0 0 100vmax var(--bg-tint-2) !important; clip-path: inset(0 -100vmax); }
.section--band   { background: var(--bg-tint-3) !important; box-shadow: 0 0 0 100vmax var(--bg-tint-3) !important; clip-path: inset(0 -100vmax); }
.section--ink {
  background: var(--bg-ink) !important; color: var(--paper);
}
.section--ink .eyebrow { color: var(--accent-bright); }
.section--ink .h2, .section--ink h2, .section--ink .lead { color: var(--paper); }

.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  --_bg: var(--ink);
  --_fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.85em 1.6em;
  min-height: 2.75rem;
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--_bg);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-1) var(--ease-out),
              background var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out);
  isolation: isolate;
}
/* The `display` above has the same specificity as the browser's default
   `[hidden]{display:none}`, so an author rule always wins that fight even
   when a button is legitimately hidden via the hidden attribute (multi-step
   forms toggle Back/Next/Submit this way). Force it explicitly. */
.btn[hidden] { display: none; }
/* Disabled is a real state here (the dreidel locks its spin button on the CPU
   turn; forms lock Submit while sending). Visibly inert, hover suppressed. */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled::after, .btn[aria-disabled="true"]::after { transform: translateY(101%); }
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-out);
  z-index: -1;
}
.btn:hover::after { transform: translateY(0); }
.btn:hover { color: var(--accent-ink); border-color: var(--accent); }
.btn:active { transform: translateY(1px); }

.btn--accent { --_bg: var(--accent); --_fg: var(--accent-ink); }
.btn--accent::after { background: var(--ink); }
.btn--accent:hover { color: var(--paper); border-color: var(--ink); }

.btn--ghost { --_bg: transparent; --_fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost::after { background: var(--ink); }
.btn--ghost:hover { color: var(--paper); border-color: var(--ink); }

.btn .arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* Text link with animated underline */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-weight: 500;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  padding-bottom: 2px;
}
.link:hover { color: var(--accent); background-size: 100% 1.5px; }

/* ---- Accessibility ----------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px;
  z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Text fields: the heavy ring read as an error state (Erf, 2026-09-21). The
   field itself darkens its border and gets a soft halo instead. Still a
   visible, 3:1-contrast focus indicator (WCAG 2.4.11). */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

hr { border: 0; height: 1px; background: var(--line); }

/* Touch devices get bigger targets. Pointer:coarse only, so desktop spacing
   is untouched; the audience skews elderly and 26px links are hard to hit. */
@media (pointer: coarse) {
  .footer ul li a, .footer__legal a { padding-block: 11px; }
  .utility a { padding-block: 12px; display: inline-block; }
  .nav__menu a { padding-block: 12px; }
  .social-ic { width: 2.75rem; height: 2.75rem; }
  /* Standalone controls meet the 44px touch target (guidelines s.7). The event
     filter chips and calendar month buttons were 34-38px. */
  .evfilter__chip { min-height: 44px; }
  .cal__btn, .cal__today { min-height: 44px; min-width: 44px; }
}

/* Marks draft/placeholder copy I authored - replace before launch. */
.draft-tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em;
  text-transform: uppercase; color: #5e4500; background: rgba(242,194,0,0.22);
  border: 1px dashed rgba(94,69,0,0.6); border-radius: 4px; padding: 2px 8px; margin-bottom: var(--sp-3);
}

.muted { color: var(--ink-3); }
.center { text-align: center; }
.measure-wide { max-width: 70ch; }