/* Amplify V4 — base: reset, browser surfaces, grid, nav, buttons, text roles. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a[data-pending-page] { cursor: not-allowed; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }

/* browser surfaces belong to the design */
::selection { background: var(--magenta); color: var(--cream); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
a:focus:not(:focus-visible) { outline: none; }
/* 2026-10-05: no double-tap zoom delay on taps */
a, button, summary, label, select, [role="button"] { touch-action: manipulation; }
/* 2026-10-05: an ink ring vanishes on ink, so every dark surface turns it cream. :where keeps this at the
   base rule's weight, so a component's own ring (magenta, coral) still wins. */
:where(.site-nav.is-inverse, .screen, .release-board, .page-cta, .page-footer, .step-cards > li:nth-child(3), .panel, .status-card,
  .flow-gate, .join-steps, .reach, .panel--dark, .source-mark, .viz-root, .closing, .footer, .col-amp, .verdict--on, .viz-pair--on) :focus-visible { outline-color: var(--cream); }

/* ---- grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.inset { padding-inline: var(--pad); }

/* ---- type roles ---- */
.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-variation-settings: "wdth" 118;
  text-wrap: balance;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.4;
  letter-spacing: -0.008em;
  font-weight: 400;
  max-width: 34ch;
}
.meta {
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-feature-settings: "tnum";
}
.meta b { color: var(--ink); font-weight: 500; }

/* rules: the grouping device instead of cards */
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-grad { border: 0; height: 1px; background: var(--grad); margin: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 0.95em 1.35em;
  border-radius: var(--radius-ui);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.btn-solid { background: var(--ink); color: var(--cream); }
.btn-solid:hover { background: #1c1b1f; transform: translateY(-1px); }
/* the primary conversion carries the brand gradient; everything else stays ink */
.btn-grad {
  position: relative; background: var(--grad-btn); color: #fff;
  /* no border: a transparent 1px border over a gradient renders as a hard ring at the edge */
  border: 0; padding: calc(0.95em + 1px) calc(1.35em + 1px);
  box-shadow: 0 10px 24px -14px rgba(214, 51, 108, 0.7);
}
.btn-grad::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.btn-grad:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(214, 51, 108, 0.85); }
.btn .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--grad); flex: none; }
.btn-solid:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink); }

.link-plain {
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}
.link-plain:hover { text-decoration-color: var(--ink); }
/* Gate 1: 44px tap floor for standalone links on phones. Inline-flex centres the text in the taller box. */
@media (max-width: 860px) { .link-plain, .experiment-notes a { display: inline-flex; align-items: center; min-height: 44px; } }
/* Same floor for the breadcrumb and the quiet hero link, by an invisible hit area so the measured
   phone layouts (hero fit, phase cards) do not move. */
@media (max-width: 860px) {
  .page-path a, .link-quiet { position: relative; }
  .page-path a::after, .link-quiet::after { content: ""; position: absolute; inset: -12px -8px; }
}

/* ---- nav: full-width bar, transparent over cream; rule + compress on scroll ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: var(--nav-h);
  padding-block: 1.15rem;
  background: var(--cream);
  border-bottom: 1px solid transparent;
  transition: padding var(--dur-reveal) var(--ease-out), border-color var(--dur-reveal) var(--ease-out);
}
.site-nav.is-scrolled { padding-block: 0.7rem; border-bottom-color: var(--rule); }
.site-nav { transition: padding var(--dur-reveal) var(--ease-out), border-color var(--dur-reveal) var(--ease-out), background-color 320ms var(--ease-out), color 320ms var(--ease-out); }
.site-nav.is-inverse { background: var(--ink); color: var(--cream); border-bottom-color: rgba(244,239,232,0.16); }
.site-nav.is-inverse .nav-links a:hover, .site-nav.is-inverse .nav-links button:hover, .site-nav.is-inverse .nav-links button[aria-expanded="true"] { border-bottom-color: var(--cream); }
.site-nav.is-inverse .btn-solid { background: var(--cream); color: var(--ink); }
.site-nav.is-inverse .btn-solid:hover { background: #fff; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand-mark { width: 1.55rem; height: auto; }
.brand-word {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 110;
  transform: translateY(-1px);
}
.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.nav-links a:hover { border-bottom-color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 1.5rem; }

/* skip link: visible only on focus */
.skip { position: absolute; left: var(--pad); top: -3rem; z-index: 60; background: var(--ink); color: var(--cream); padding: 0.6em 0.9em; border-radius: var(--radius-ui); text-decoration: none; font-size: 0.9rem; }
.skip:focus { top: 0.75rem; }

/* ---- utilities ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ?grid — 12-column overlay for review only */
body.show-grid::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  padding-inline: var(--pad);
  background-clip: content-box;
  background-image: repeating-linear-gradient(
    to right,
    rgba(214, 51, 108, 0.12) 0,
    rgba(214, 51, 108, 0.12) calc((100% - 11 * var(--gutter)) / 12),
    transparent calc((100% - 11 * var(--gutter)) / 12),
    transparent calc((100% - 11 * var(--gutter)) / 12 + var(--gutter))
  );
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .site-nav .btn { font-size: 0.85rem; padding: 0.8em 1em; white-space: nowrap; min-height: 2.75rem; display: inline-flex; align-items: center; } /* 44px touch target on a phone */
}
/* 2026-10-04 audit: under 360px (iPhone SE first gen, small Androids) the logo, Menu and the call button
   ran 2 to 7px past the right edge. The 13px type floor in type.css stays; only padding and gaps tighten.
   html adds one class of specificity over the scroll.css and pages.css phone rules. */
@media (max-width: 359px) {
  html .site-nav, html .site-nav .nav-right { gap: .4rem; }
  html .site-nav .nav-right .btn { padding-inline: .5rem; }
  html .site-nav .nav-toggle { padding-inline: .45rem; }
}

/* keeps a hyphenated compound on one line, so "pre-" never ends a line (polish 2026-10-04) */
.nw { white-space: nowrap; }