/* Intercept web design system: components
   Requires tokens.css. Mobile first; breakpoints 768, 1024 (see tokens.css).
   Every box and photo frame is rounded. No accent bars, no left borders, no grey text. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-scheme] { background: var(--bg); color: var(--text); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }

.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.section { padding-block: var(--section-y); }

/* ---------- Type ---------- */
.t-display-xl, .t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-lead, .t-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-display { font-size: var(--fs-display); line-height: var(--lh-title); letter-spacing: var(--ls-display); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-title); letter-spacing: var(--ls-title); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-title); letter-spacing: var(--ls-title); max-width: var(--measure-title); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-medium); max-width: var(--measure-lead); }
.t-quote { font-size: var(--fs-quote); line-height: var(--lh-quote); font-weight: var(--fw-medium); letter-spacing: var(--ls-heading); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-body); }
.t-ui { font-size: var(--fs-ui); line-height: 1.4; }
/* Every block of body text opens with a bigger, punchier lead sentence */
.t-punch { display: block; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-body-l); line-height: var(--lh-heading); margin-bottom: var(--sp-2); }
.t-accent { color: var(--accent); }
.t-grad {
  background: var(--grad-flare);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  width: fit-content; justify-self: start;
}

/* Wedge bullet: the tip slice of the mark, in the solid accent. The gradient is not for bullets (SYSTEM.md). */
.list-wedge { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.list-wedge li { position: relative; padding-left: 1.4em; line-height: var(--lh-list); }
.list-wedge li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 0.62em; height: 0.62em;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- Eyebrow and section header ---------- */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 0.6em;
  font-family: var(--font-body); font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow); line-height: 1.3; color: var(--accent);
}
.eyebrow__num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.eyebrow__label { color: var(--text); }

.section-header { display: grid; gap: var(--sp-4); margin-bottom: var(--title-gap); }
.section-header .t-lead { margin-top: var(--sp-2); }
@media (min-width: 1024px) {
  .section-header--split { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); align-items: end; }
  .section-header--split .eyebrow { grid-column: 1 / -1; }
  .section-header--split .t-lead { margin-top: 0; }
}

/* Divider band: deck section divider with a glass formation */
.divider-band { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--bg); min-height: 360px; display: flex; flex-direction: column; }
.divider-band__media { position: relative; order: 2; aspect-ratio: 16 / 9; margin-top: calc(-1 * var(--sp-6)); }
.divider-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.divider-band__text { position: relative; z-index: 1; padding: var(--sp-7) var(--page-margin) 0; display: grid; gap: var(--sp-4); }
@media (min-width: 768px) {
  .divider-band { min-height: 0; aspect-ratio: 16 / 7; }
  .divider-band__media { position: absolute; inset: 0 0 0 36%; margin: 0; aspect-ratio: auto; }
  .divider-band__media img { object-position: 100% 50%; }
  .divider-band__text { padding: var(--sp-9); align-content: space-between; height: 100%; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--accent-on-fill); --btn-line: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 var(--sp-5);
  border-radius: var(--r-pill); border: var(--bw-box) solid var(--btn-line);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--fw-semibold) var(--fs-ui)/1 var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out);
}
.btn:hover { --btn-bg: var(--text); --btn-fg: var(--text-inverse); }
/* No solid pink block on dark (SYSTEM.md). Dark fills are white, transparent, or the dark tint #15151C only;
   Flarepop appears on dark as text or border, never as a fill, including on hover. */
[data-scheme="dark"] .btn--primary { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); }
[data-scheme="dark"] .btn--primary:hover { --btn-bg: var(--c-tint-dark); --btn-fg: var(--c-white); --btn-line: var(--c-flarepop); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--accent); --btn-line: var(--accent); }
.btn--secondary:hover { --btn-bg: var(--accent); --btn-fg: var(--accent-on-fill); --btn-line: var(--accent); }
[data-scheme="dark"] .btn--secondary:hover { --btn-bg: var(--c-tint-dark); --btn-fg: var(--c-white); --btn-line: var(--c-flarepop); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); --btn-line: var(--line); }
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--text); --btn-line: var(--text); }
.btn--link { --btn-bg: transparent; --btn-fg: var(--text); padding: 0; min-height: 44px; border: 0; border-radius: var(--r-xs); }
.btn--link:hover { --btn-bg: transparent; --btn-fg: var(--accent); }
.btn__arrow { width: 1em; height: 1em; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
/* .btn's display out-specifies the UA's [hidden]{display:none}; without this a
   script-hidden button keeps painting (the feeds' exhausted "Load more", #344). */
.btn[hidden] { display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--bg); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 72px; }
.nav__logo { display: block; width: 132px; flex: none; padding-block: 5px; /* ≥40px tap target (#349 item 13) */ }
.nav__logo img { width: 100%; height: auto; }
.nav__links { display: none; list-style: none; margin: 0; padding: 0; gap: var(--sp-6); }
.nav__links a { text-decoration: none; font: var(--fw-medium) var(--fs-ui)/1 var(--font-body); padding-block: var(--sp-3); border-radius: var(--r-xs); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--accent); }
.nav__cta { display: none; }
.nav__menu {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: var(--bw-hair) solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--text); cursor: pointer;
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__menu { display: none; }
}

/* ---------- Hero (dark, glass) ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero__media { position: relative; aspect-ratio: 5 / 4; }
.hero__media img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.hero__inner { position: relative; z-index: 1; padding-block: var(--sp-8) var(--sp-9); display: grid; gap: var(--sp-5); }
.hero__title { max-width: 12ch; }
.hero__sub { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 34ch; }
@media (min-width: 1024px) {
  .hero { min-height: min(820px, 100vh); display: flex; align-items: center; }
  .hero__media { position: absolute; inset: 0 0 0 44%; aspect-ratio: auto; }
  .hero__media img { object-position: 60% 50%; }
  .hero__inner { padding-block: var(--sp-11); }
  .hero__content { max-width: 50%; display: grid; gap: var(--sp-5); }
}
.reveal { animation: reveal var(--dur-slow) var(--ease-out) both; }
.reveal--slow { animation-duration: var(--dur-reveal); }
.reveal[style*="--i"] { animation-delay: calc(var(--i) * var(--stagger)); }
@keyframes reveal { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }

/* ---------- Stats ---------- */
.stat-row { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }
.stat { display: grid; gap: var(--sp-3); align-content: start; }
.stat__num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-stat-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.stat__label { font-size: var(--fs-body-l); line-height: var(--lh-heading); max-width: 18ch; }
.source { font-size: var(--fs-ui); line-height: 1.4; margin-top: var(--sp-6); }

.stat-tiles { display: grid; gap: var(--gutter-tight); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stat-tiles { grid-template-columns: repeat(4, 1fr); } }
.stat-tile { background: var(--panel); border-radius: var(--r-l); padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: center; }
@media (min-width: 1024px) { .stat-tile { min-height: 220px; } }
.stat-tile .stat__num { font-size: var(--fs-stat); }
.stat-tile .stat__label { font-size: var(--fs-body); line-height: var(--lh-list); }

/* ---------- Logo row ---------- */
.logo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); align-items: center; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .logo-row { grid-template-columns: repeat(4, 1fr); gap: var(--gutter-tight); } }
.logo-row li { display: flex; align-items: center; justify-content: center; height: 112px; background: var(--panel); border-radius: var(--r-l); padding: var(--sp-5); }
.logo-row img { max-height: 40px; max-width: 70%; width: auto; height: auto; object-fit: contain; filter: var(--logo-filter); }
.logo-row img.is-square { max-height: 52px; }

/* ---------- Card (pillar) ---------- */
.card-grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--bg-raised); border-radius: var(--r-l); padding: var(--sp-6);
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-4);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.card--tint { background: var(--panel); }
.card__icon { width: 104px; height: 104px; margin: calc(-1 * var(--sp-3)) 0 0 calc(-1 * var(--sp-3)); }
.card__icon img { width: 100%; height: 100%; object-fit: contain; }
.card p { font-size: var(--fs-body); line-height: var(--lh-body); }
.card__more { margin-top: var(--sp-2); justify-self: start; }
a.card:hover { background: var(--panel); }
/* The hovered card sits on the light tint, where #C800B4 is 4.25:1. Small text stays Ink; the underline shows the state. */
a.card:hover .card__more { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Campaign card ---------- */
.campaign { background: var(--bg-raised); border-radius: var(--r-l); padding: var(--sp-6); display: grid; gap: var(--sp-7); }
.campaign__tag { font: var(--fw-bold) var(--fs-ui)/1.3 var(--font-body); color: var(--accent); }
.campaign__story { display: grid; gap: var(--sp-4); align-content: start; }
.campaign__exec-label { font: var(--fw-bold) var(--fs-body)/1.3 var(--font-body); color: var(--accent); margin-top: var(--sp-3); }
.campaign__exec { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .campaign__exec { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); } }
.campaign__proof { display: grid; gap: var(--sp-5); align-content: start; }
.campaign__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.campaign__stats .stat__num { font-size: var(--fs-stat); }
.campaign__stats .stat__label { font-size: var(--fs-body); line-height: var(--lh-list); }
/* Never crop client assets: the frame takes the asset's own proportions */
.campaign__hero { border-radius: var(--r-m); overflow: hidden; background: var(--panel); }
.campaign__hero img { width: 100%; height: auto; }
@media (min-width: 1024px) {
  .campaign { grid-template-columns: 1fr 1fr; gap: var(--sp-9); padding: var(--sp-9); }
}

/* Campaign card, compact (grid of work on index pages) */
.work-grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 768px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-card { display: grid; grid-template-rows: 1fr auto auto; gap: var(--sp-4); text-decoration: none; color: inherit; }
.work-card__img { align-self: end; border-radius: var(--r-m); overflow: hidden; background: var(--panel); }
.work-card__img img { width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease-out); }
.work-card:hover .work-card__img img { transform: scale(1.03); }
.work-card:hover .t-h3 { color: var(--accent); }

/* ---------- Service stage ---------- */
.stage { display: grid; gap: var(--sp-7); align-items: center; }
.stage__icon { width: 112px; height: 112px; margin-left: -12px; }
.stage__text { display: grid; gap: var(--sp-4); align-content: start; }
.stage__media { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--panel); }
.stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
@media (min-width: 1024px) {
  .stage { grid-template-columns: 5fr 6fr; gap: var(--sp-9); }
  .stage__media { aspect-ratio: 5 / 4; }
}

/* ---------- Photo in mark ----------
   Needs the #clip-mark SVG definition on the page (snippet in MAPPING.md and at the top of components.html).
   Fallback: if the definition is missing, or the browser lacks :has(), the photo shows as a rounded rectangle
   (never an uncropped square). The clip applies only when the page actually contains #clip-mark. */
.photo-mark { display: grid; gap: var(--sp-7); align-items: center; }
.photo-mark__text { display: grid; gap: var(--sp-4); align-content: start; }
.photo-mark__frame { width: min(100%, 520px); justify-self: end; aspect-ratio: 544 / 640; }
.photo-mark__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xl); }
:root:has(#clip-mark) .photo-mark__frame img { clip-path: url(#clip-mark); border-radius: 0; }
@media (min-width: 1024px) { .photo-mark { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } }

/* ---------- Quote ---------- */
.quote { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--bg); }
.quote__media { position: relative; aspect-ratio: 16 / 9; }
.quote__media img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; }
.quote__body { position: relative; z-index: 1; padding: var(--sp-7) var(--sp-6) var(--sp-6); display: grid; gap: var(--sp-5); }
.quote__mark { font: var(--fw-bold) 120px/0.7 var(--font-display); height: 0.5em; }
.quote__cite { display: grid; gap: var(--sp-1); font-style: normal; }
.quote__name { font: var(--fw-bold) var(--fs-h4)/1.2 var(--font-display); }
.quote__role { font-size: var(--fs-body); }
@media (min-width: 1024px) {
  .quote__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .quote__body { padding: var(--sp-9); max-width: 66%; min-height: 560px; align-content: center; }
}

/* ---------- Comparison and table ---------- */
.compare { display: grid; gap: var(--gutter); align-items: stretch; }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border-radius: var(--r-l); padding: var(--sp-6); display: grid; gap: var(--sp-4); align-content: start; border: var(--bw-box) solid var(--line); }
/* The recommended option sits on the right, on the tint, outlined in the accent (deck rule) */
.compare__col--rec { background: var(--panel); border: var(--bw-focus) solid var(--accent); }

.table-wrap { border-radius: var(--r-l); overflow: hidden; background: var(--bg-raised); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); min-width: 640px; }
.table caption { text-align: left; padding: var(--sp-5) var(--sp-5) 0; font: var(--fw-bold) var(--fs-h4)/1.2 var(--font-display); }
.table th, .table td { text-align: left; padding: var(--sp-4) var(--sp-5); vertical-align: middle; line-height: var(--lh-list); }
.table thead th { font: var(--fw-bold) var(--fs-ui)/1.3 var(--font-body); color: var(--accent); }
.table tbody tr:nth-child(odd) { background: var(--panel); }
.table tbody th { font-weight: var(--fw-bold); }
.table td.is-rec, .table th.is-rec { font-weight: var(--fw-semibold); }
/* Yes mark: Ink on light, white on dark. The gradient is not for table marks (SYSTEM.md). */
.table .yes::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.5em; background: var(--text); clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ---------- CTA panel ---------- */
.cta { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--panel); display: grid; }
.cta__body { position: relative; z-index: 1; padding: var(--sp-8) var(--sp-6); display: grid; gap: var(--sp-5); align-content: center; }
.cta__media { position: relative; aspect-ratio: 16 / 7; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
@media (min-width: 1024px) {
  .cta { grid-template-columns: 7fr 5fr; min-height: 420px; }
  .cta__body { padding: var(--sp-9); }
  .cta__media { aspect-ratio: auto; }
}
/* 320px phones: less side padding so the heading and buttons fit (#349 item 7) */
@media (max-width: 359px) {
  .cta__body { padding-inline: var(--sp-4); }
}

/* ---------- Form fields ---------- */
.form { display: grid; gap: var(--sp-5); max-width: 720px; }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 768px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--sp-2); align-content: start; }
.field__label { font: var(--fw-semibold) var(--fs-ui)/1.3 var(--font-body); }
.field__hint { font-size: var(--fs-ui); line-height: 1.4; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4);
  font: var(--fw-regular) var(--fs-ui)/1.4 var(--font-body); color: var(--text);
  background: var(--bg-raised); border: var(--bw-box) solid var(--line-input); border-radius: var(--r-s);
  transition: border-color var(--dur-instant) var(--ease-out);
  appearance: none;
}
.textarea { min-height: 144px; resize: vertical; }
.select { background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--sp-8); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); border-radius: var(--r-s); }
.input::placeholder, .textarea::placeholder { color: var(--text); opacity: 1; }  /* Ink on light, white on dark: no grey text */
/* Errors use four signals, never color alone: a 2px error border, an icon, a written message, and aria-invalid. */
.field.is-error .input, .field.is-error .select, .field.is-error .textarea,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-error); border-width: var(--bw-focus); }
.field.is-error .field__hint { color: var(--c-error); font-weight: var(--fw-semibold); display: flex; gap: var(--sp-2); align-items: flex-start; }
.field.is-error .field__hint::before {
  content: ""; flex: none; width: 1.1em; height: 1.1em; margin-top: 0.15em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1.25 15h-2.5v-2.5h2.5V15Zm0-4.5h-2.5V5h2.5v5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1.25 15h-2.5v-2.5h2.5V15Zm0-4.5h-2.5V5h2.5v5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-ui); line-height: 1.45; cursor: pointer; }
.check input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: var(--bw-box) solid var(--line-input); border-radius: var(--r-xs); background: var(--bg-raised); display: grid; place-content: center; cursor: pointer; }
.check input::before { content: ""; width: 12px; height: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 100% 100%); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.check input:checked { border-color: var(--accent); }
.check input:checked::before { transform: scale(1); }

/* ---------- Article body ---------- */
.prose { max-width: 720px; font-size: var(--fs-body); line-height: var(--lh-body); }
.prose > * + * { margin-top: var(--sp-5); }
.prose .t-lead { max-width: none; }
.prose h2 { font: var(--fw-bold) var(--fs-h3)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); margin-top: var(--sp-8); }
.prose h3 { font: var(--fw-bold) var(--fs-h4)/var(--lh-heading) var(--font-display); margin-top: var(--sp-7); }
.prose a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ol { padding-left: 1.4em; display: grid; gap: var(--sp-3); }
.prose ol li::marker { color: var(--accent); font-weight: var(--fw-bold); font-family: var(--font-display); }
.prose figure img { border-radius: var(--r-m); width: 100%; }
.prose figcaption { font-size: var(--fs-ui); line-height: 1.4; margin-top: var(--sp-3); }
.prose blockquote { padding: var(--sp-6); background: var(--panel); border-radius: var(--r-l); display: grid; gap: var(--sp-3); }
.prose blockquote p { font: var(--fw-medium) var(--fs-h4)/var(--lh-quote) var(--font-display); }
.prose blockquote .quote__mark { font-size: 72px; }
.prose blockquote cite { font-style: normal; font-weight: var(--fw-semibold); font-size: var(--fs-ui); }
.byline { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-ui); }

/* ---------- Footer ---------- */
.footer { padding-block: var(--sp-10) var(--sp-7); }
.footer__top { display: grid; gap: var(--sp-8); }
.footer__logo { width: 160px; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-5); }
.footer__col h3 { font: var(--fw-bold) var(--fs-ui)/1.3 var(--font-body); color: var(--accent); margin-bottom: var(--sp-3); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.footer__col a { text-decoration: none; font-size: var(--fs-ui); line-height: 1.4; display: inline-block; padding-block: 8px; /* ≥40px tap target (#349 item 13) */ border-radius: var(--r-xs); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { margin-top: var(--sp-9); padding-top: var(--sp-5); border-top: var(--bw-hair) solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between; font-size: var(--fs-ui); }
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 4fr 8fr; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Glass video loop ----------
   The 4-second glass mark loops (turn, assemble, ignite). Markup: <div class="glass-video"><video autoplay muted loop
   playsinline poster="still.webp">...</video><img class="glass-video__still" src="still.webp" alt=""></div>.
   Under reduced motion the video is hidden and the still shows. The script in MAPPING.md also pauses it. */
.glass-video { position: relative; }
.glass-video video { width: 100%; height: auto; }
.glass-video__still { display: none; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .glass-video video, video[autoplay] { display: none; }
  .glass-video__still { display: block; }
  .reveal, .reveal--slow { animation: none; }
}