/* Hallmark · shape: kept · genre: modern-minimal · theme: Vantage (by request) · redesign: full
 * hero: Stage (/), Settled (/testing/), Shot (/automation/, /platform/) · nav: kept · footer: kept · imagery: the product · signature: the Red Gambit shield scanned live, red where something is found · vantage: object/oxblood
 * axes: dark/grotesk-sans/oxblood-red · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, four pages share one system by design, so variety lives in the hero: a scanned shield, text only, or the product itself */

/* Geologica is self-hosted: the site loads nothing from another origin, and
   its content security policy allows only 'self'. Without the file the page
   falls back to the system stack below and reads the same at a lighter feel. */
@font-face {
  font-family: "Geologica";
  src: url("/fonts/geologica-latin.woff2") format("woff2");
  font-weight: 200 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Scale, easings and durations: the Hallmark scaffold. */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.5rem, 5vw + 0.75rem, 4.75rem); --text-display-l: clamp(2.75rem, 6.8vw + 0.5rem, 6.5rem);
  --text-section: clamp(1.875rem, 2.2vw + 1rem, 3rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.5rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.3125rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 520ms;
  --container: 1280px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px;
  --z-base: 1; --z-raised: 10; --z-sticky: 200;

  /* Ground and ink are the site's own, kept from the previous system:
     near-black with a warm cast, and oxblood. Vantage lends the structure. */
  --color-paper: #08080a; --color-paper-2: #110f12; --color-paper-3: #1a171b;
  --color-ink: #f0eeee; --color-ink-2: #cdc9ca; --color-muted: #9e9a9b;
  --color-rule: #221f21; --color-rule-2: #423c3e;

  /* Red does three jobs and no others: the primary action, what a scan found,
     and an attacker's payload. --color-found is the brand crimson, the one
     red light enough to read as text on the ground (5:1). */
  --color-accent: #8e1d28; --color-accent-hi: #c2333f; --color-accent-ink: #ffffff;
  --color-glow: #8e1d28; /* the oxblood light behind the page top; a field, not a fill */
  --color-found: #e8404e;
  --color-focus: #f0eeee;

  /* Points: warm grey from dim to pale, never a second hue. */
  --point-lo: #4a4547; --point-mid: #9e9a9b; --point-hi: #f0eeee;

  --font-display: "Geologica", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;
  --font-body: "Geologica", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Inter", "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius-card: 4px; --radius-pill: 999px; --rule-hair: 1px; --tick: 12px;
  --shadow-card: none;
  --tracking-display: -0.035em; --display-weight: 300;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body {
  position: relative;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  font-variation-settings: "SHRP" 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent-hi);
}
::selection { background: color-mix(in srgb, var(--color-accent-hi) 35%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: "SHRP" 100;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { max-width: 20ch; font-size: var(--text-display-s); }
h2 { max-width: 26ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.controls h3, .surface h3 { font-size: var(--text-md); }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
canvas { display: block; }
.num { font-variant-numeric: tabular-nums; font-weight: 400; }

/* A static oxblood bleed behind the top of the page: the one place the site's
   red is light rather than signal. It does not move. */
body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(1100px, 140vh);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(110% 70% at 16% 0%, color-mix(in srgb, var(--color-glow) 28%, transparent), transparent 64%);
}
header.site, main, footer.site { position: relative; z-index: var(--z-base); }

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.label { font-size: var(--text-xs); font-weight: 400; line-height: 1.4; color: var(--color-muted); }
.prose { max-width: 62ch; color: var(--color-muted); }
.prose p + p { margin-top: 1.1em; }
.prose strong { color: var(--color-ink); font-weight: 400; }

/* Corner ticks: a frame that only marks its corners. */
.ticks { position: relative; }
.ticks::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --tc: var(--color-rule-2);
  background:
    linear-gradient(var(--tc), var(--tc)) top left / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) top left / var(--rule-hair) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) top right / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) top right / var(--rule-hair) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom left / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom left / var(--rule-hair) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom right / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom right / var(--rule-hair) var(--tick) no-repeat;
  transition: opacity var(--dur-short) var(--ease-out);
}
a.ticks:hover::before, a.ticks:focus-visible::before { --tc: var(--color-ink-2); }

.skip { position: absolute; left: var(--gutter); top: 0; z-index: 100; transform: translateY(-200%); background: var(--color-paper); color: var(--color-ink); padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-ink); }
.skip:focus { transform: none; top: var(--space-xs); }

/* ---------- header ---------- */
header.site { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
header.site::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: min(34%, 20rem);
  height: 1px;
  background: linear-gradient(90deg, var(--color-glow), transparent);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 72px; }
.wordmark { display: flex; align-items: center; border-radius: var(--radius-card); }
.wordmark img { height: 44px; width: auto; display: block; }
nav.links { display: flex; gap: var(--space-lg); align-items: center; }
nav.links a:not(.btn) { font-size: var(--text-sm); text-decoration: none; color: var(--color-muted); transition: color var(--dur-micro); }
nav.links a:not(.btn):hover, nav.links a:not(.btn):active { color: var(--color-ink); }
nav.links a[aria-current="page"] { color: var(--color-ink); }
@media (max-width: 860px) { nav.links .desk { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font: 400 var(--text-sm)/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hi); }
.btn:active { background: var(--color-accent); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-accent-ink); }
.btn.ghost { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.btn.ghost:hover { background: color-mix(in srgb, var(--color-ink) 6%, transparent); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink-2); }
.btn.ghost:active { background: color-mix(in srgb, var(--color-ink) 10%, transparent); }

/* ---------- hero ---------- */
.hero { padding-top: var(--space-2xl); padding-bottom: var(--section-gap-s); }
.hero .prose { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.hero-actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Stage: the headline on the left, the scan on the right. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gap-columns);
  align-items: center;
}
@media (max-width: 940px) { .stage { grid-template-columns: minmax(0, 1fr); } }

.scan {
  position: relative;
  height: clamp(380px, 43vw, 600px);
  margin: 0;
}
/* The cloud fades into the ground at its edges; the callouts do not. */
.scan canvas, .scan-poster {
  -webkit-mask: radial-gradient(closest-side, var(--color-ink) 62%, transparent 100%);
  mask: radial-gradient(closest-side, var(--color-ink) 62%, transparent 100%);
}
.scan canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Without scripting the poster stands in: the real mark, still. */
.scan-poster { position: absolute; inset: 12% 28%; width: 44%; height: 76%; object-fit: contain; opacity: 0.85; }
.scan.is-live .scan-poster { display: none; }
.scan-wrap { position: relative; }
.scan-cap { margin-top: var(--space-xs); display: flex; justify-content: space-between; gap: var(--space-md); }

/* Leader callouts: a hairline from a found point to its name. Two at most. */
.callout { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); will-change: transform; }
.callout.on { opacity: 1; }
.callout-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--color-found); }
.callout-line { position: absolute; left: 0; bottom: 0; width: var(--rule-hair); height: 52px; background: var(--color-found); transform-origin: bottom; }
.callout-text {
  position: absolute;
  left: 0;
  bottom: 52px;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 400;
  white-space: nowrap;
}
.callout.flip .callout-text { left: auto; right: 0; }

/* Settled and Shot heroes: type first, no stage. */
.page-hero { display: flex; align-items: center; min-height: min(calc(100svh - 72px), 780px); padding-top: var(--space-2xl); padding-bottom: var(--section-gap-s); }
.page-intro { width: 100%; }
.page-intro h1 { max-width: 14ch; font-size: var(--text-display-l); }
/* A shorter headline sets on a narrower measure, so it still fills the screen. */
.page-intro.stack h1 { max-width: 11ch; }
.page-intro .prose { margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }

/* ---------- sections ---------- */
section { position: relative; border-top: var(--rule-hair) solid var(--color-rule); }
.sec { padding-block: var(--section-gap); }
/* A section opens with its heading and nothing above it. */
.sec-grid, .sec-body { min-width: 0; }
.sec-body > .prose { margin-top: var(--space-lg); }

/* ---------- cards: paper-2 ground, corners marked, nothing else ---------- */
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.surface { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); }
.surface.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* Three tiers sit in a row; four read as a 2 by 2 block. Never a row and an orphan. */
.tiers { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.tiers:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .tiers, .tiers:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); } }

.path, .controls > div, .surface > div, .tiers > div {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
}
.controls > div, .surface > div, .tiers > div { --tc: var(--color-rule-2); }
.controls > div { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.surface > div { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); }
.controls > div::before, .surface > div::before, .tiers > div::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--tc), var(--tc)) top left / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) top left / var(--rule-hair) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) top right / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) top right / var(--rule-hair) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom left / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom left / var(--rule-hair) var(--tick) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom right / var(--tick) var(--rule-hair) no-repeat,
    linear-gradient(var(--tc), var(--tc)) bottom right / var(--rule-hair) var(--tick) no-repeat;
}
.path h3 { font-size: var(--text-lg); }
.path p, .controls p, .tiers p { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }
.path:active { background: var(--color-paper-3); }
.path-go { margin-top: auto; padding-top: var(--space-sm); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink); transition: color var(--dur-micro); }
.path:hover .path-go, .path:focus-visible .path-go { color: var(--color-found); }
.tiers h3 { font-size: var(--text-lg); }
.tiers .cadence { margin-top: auto; padding-top: var(--space-xs); }

.surface ul { list-style: none; margin: 0; padding: 0; }
.surface h3 { margin-bottom: var(--space-md); }
.surface li { position: relative; padding-left: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.surface li + li { margin-top: var(--space-sm); }
.surface li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: var(--rule-hair); background: var(--color-rule-2); }

/* ---------- layers: switches that really change the scan beside them ---------- */
.layers { margin-top: var(--space-xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: center; }
@media (max-width: 940px) { .layers { grid-template-columns: minmax(0, 1fr); } }
.layer-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.layer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.layer h3 { font-size: var(--text-md); }
.layer p { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
/* Without scripting the list is just the four attack classes; the switches
   only appear once they can do something. */
.switch { display: none; }
.js .switch {
  display: inline-block;
  flex: none;
  position: relative;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2);
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.js .switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.js .switch:hover { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink-2); }
.js .switch:active::after { transform: scale(0.85); }
.js .switch[aria-checked="true"] { background: var(--color-accent); box-shadow: none; }
.js .switch[aria-checked="true"]:hover { background: var(--color-accent-hi); }
.js .switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--color-accent-ink); }
.js .switch[aria-checked="true"]:active::after { transform: translateX(20px) scale(0.85); }
.js .switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- steps ---------- */
ol.steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; }
ol.steps > li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-lg); }
ol.steps > li:first-child { border-top-color: var(--color-rule-2); }
ol.steps > li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
ol.steps .k { padding-top: var(--space-2xs); font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-muted); }
ol.steps h3 { font-size: var(--text-lg); }
ol.steps p { margin-top: var(--space-xs); max-width: 62ch; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ---------- the example: a terminal, so mono is the material ---------- */
.example { padding-block: 0 var(--section-gap-s); }
figure.transcript {
  position: relative;
  margin: 0 auto;
  max-width: 60rem;
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
}
.transcript-head { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg) 0; }
.transcript-head .label:last-child { color: var(--color-found); }
.transcript pre { margin: 0; padding: var(--space-md) var(--space-lg); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.75; color: var(--color-muted); tab-size: 2; }
.transcript pre b { color: var(--color-found); font-weight: 400; }
.transcript pre .role { display: inline-block; min-width: 4.5rem; color: var(--color-muted); }
.transcript pre .hit { color: var(--color-found); font-weight: 400; }
figure.transcript figcaption { padding: 0 var(--space-lg) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }

.note { margin-top: var(--space-xl); border-left: 2px solid var(--color-accent-hi); padding: var(--space-2xs) 0 var(--space-2xs) var(--space-md); max-width: 64ch; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- contact: the heading on the left, the way in on the right ---------- */
#contact .sec-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: end; }
#contact .sec-body > h2 { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
#contact .sec-body > .prose, #contact .sec-body > .contact-mail { grid-column: 2; }
#contact .sec-body > .prose { margin-top: 0; }
@media (max-width: 860px) { #contact .sec-body { grid-template-columns: minmax(0, 1fr); } #contact .sec-body > h2, #contact .sec-body > .prose, #contact .sec-body > .contact-mail { grid-column: 1; grid-row: auto; } #contact .sec-body > .prose { margin-top: var(--space-lg); } }
.contact-mail {
  display: inline-block;
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: "SHRP" 100;
  font-size: clamp(1.125rem, 4.4vw, 2.75rem);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  padding-bottom: 0.1em;
  white-space: nowrap;
  justify-self: start;
  transition: border-color var(--dur-micro), color var(--dur-micro);
}
.contact-mail:hover, .contact-mail:active { border-color: var(--color-found); color: var(--color-found); }

/* ---------- footer ---------- */
footer.site { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-md) var(--space-xl); }
.foot > .label { flex: 0 1 28ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); flex: 0 0 auto; }
.foot-links a { white-space: nowrap; }
.foot-links a { text-decoration: none; transition: color var(--dur-micro); }
.foot-links a:hover, .foot-links a:active { color: var(--color-ink); }

/* ---------- product screenshots ----------
   Real captures, shown whole and only ever reduced: no crop, no fixed height.
   They are taken at double density, so none is shown wider than half. */
figure.shot { margin: 0; max-width: 1120px; }
figure.shot img { width: 100%; height: auto; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-2); }
figure.shot figcaption { padding: var(--space-sm) 0 0; font-size: var(--text-xs); color: var(--color-muted); }
figure.shot.narrow { max-width: 38rem; margin-top: var(--space-xl); }
figure.shot.tall { max-width: 640px; }
figure.shot.hero-shot { margin: 0; }
.shot-band { padding-bottom: var(--section-gap-s); }
.sec-body > figure.shot { margin-top: var(--space-xl); }

/* Dialogs are transparent and carry their own shadow: no frame, no ground. */
figure.dialog { margin: 0 auto; max-width: 624px; }
figure.dialog img { width: 100%; height: auto; }
figure.dialog figcaption { padding: 0 var(--space-md); text-align: center; font-size: var(--text-xs); color: var(--color-muted); }
.dialogs { margin-top: var(--space-lg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
@media (max-width: 700px) { .dialogs { grid-template-columns: minmax(0, 1fr); } }

ol.shots { list-style: none; margin: var(--space-xl) 0 0; padding: 0; }
ol.shots > li { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-lg); }
ol.shots > li + li { margin-top: clamp(3rem, 7vw, 4.5rem); }
.shot-text { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--space-lg); margin-bottom: var(--space-lg); }
.shot-text .k { grid-row: span 2; padding-top: var(--space-2xs); font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--color-muted); }
.shot-text h3 { font-size: var(--text-lg); }
.shot-text p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); max-width: 62ch; }

/* ---------- reveal ----------
   Marked by site.js, so with scripting off everything is simply there. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 72px; --section-gap: 88px; } .hero { padding-top: var(--space-xl); } .page-hero { min-height: 0; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 64px; --gap-columns: 16px; } .transcript pre { font-size: 0.6875rem; } .hero-actions .btn { flex: 1 1 100%; } }