/* ===========================================================================
   Axiomyx: platform layout.

   Layers on top of styles.css and reuses its palette, type and buttons.
   styles.css is NOT modified: the game archive pages (app/page.php) load it too,
   and nothing here targets their selectors.
   =========================================================================== */

:root {
  --ax-edge: rgba(255,255,255,.09);
  --ax-card: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  --ax-radius: 14px;
}

/* --- image aspect ratio --------------------------------------------------
   styles.css sets `img { max-width: 100%; display: block; }` with no height rule.
   Every image on this site carries width and height attributes, so as soon as
   max-width shrinks the width the height stays pinned to the attribute and the
   picture is squashed. On a 390px phone a 1600x901 photograph was rendering at
   350x901. This one line fixes it everywhere, and nothing may remove it.
   ------------------------------------------------------------------------- */
img { height: auto; }

/* --- skip link ----------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--red); color: #fff; padding: 12px 18px; border-radius: 0 0 6px 0;
  font-size: .8rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; }

/* --- shared -------------------------------------------------------------- */
.wide { max-width: 1400px; }
.lede { color: #d4d8df; font-size: 1.06rem; max-width: 70ch; }
.section-heading p.lede { margin: 22px 0 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.anchor-offset { scroll-margin-top: 96px; }

/* --- header: current page ------------------------------------------------ */
nav a[aria-current="page"] { color: #fff; }
nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 5px;
  background: var(--red); border-radius: 2px;
}
.nav-cta[aria-current="page"]::after { display: none; }

/* --- hero variant: a statement headline rather than the wordmark ---------- */
.hero--statement { min-height: 0; padding-bottom: 70px; align-items: center; }
.hero--statement h1 {
  font-size: clamp(2.3rem, 5vw, 4.3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  max-width: 18ch;
}
.hero--statement .hero-copy { max-width: 720px; }
.hero-brandline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; color: var(--red-bright);
  text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 700;
}
.hero-brandline .sep { width: 34px; height: 1px; background: rgba(229,9,20,.5); }

/* --- hero visual: an original diagram, not a stock render ----------------- */
.hero-figure {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  padding: 20px 0;
}
.hero-figure svg { width: 100%; height: auto; max-width: 560px; overflow: visible; }
.ax-node-core { fill: var(--red); }
.ax-node { fill: #1b1f26; stroke: rgba(255,255,255,.30); stroke-width: 1.2; }
.ax-node--live { fill: rgba(229,9,20,.22); stroke: var(--red-bright); }
.ax-edge-line { stroke: rgba(255,255,255,.18); stroke-width: 1.1; fill: none; }
.ax-edge-line--live { stroke: rgba(229,9,20,.75); stroke-width: 1.7; }
.ax-figcaption {
  margin: 18px 0 0; color: var(--muted); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .12em; text-align: center;
}

/* --- pipeline: state → evaluate → search → decide → outcome → learn ------- */
.pipeline { margin: 48px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pipeline li {
  position: relative; padding: 22px 16px 20px;
  border: 1px solid var(--ax-edge); border-radius: 10px; background: var(--ax-card);
}
.pipeline li::after {
  content: ""; position: absolute; top: 50%; right: -8px; width: 6px; height: 6px;
  border-top: 1.5px solid rgba(229,9,20,.85); border-right: 1.5px solid rgba(229,9,20,.85);
  transform: translateY(-50%) rotate(45deg); z-index: 2;
}
.pipeline li:last-child::after { display: none; }
.pipeline .step { display: block; font-family: Orbitron, Inter, sans-serif;
  font-size: .68rem; letter-spacing: .1em; color: var(--red); }
.pipeline b { display: block; margin: 12px 0 8px; font-size: .95rem; }
.pipeline p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.pipeline-loop { margin: 14px 0 0; color: var(--muted); font-size: .8rem; }

/* --- product cards ------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.product-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--ax-edge); border-radius: var(--ax-radius); background: var(--ax-card);
}
.product-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0c0e12; }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8,9,11,.85) 100%);
}
.product-media--figure { display: grid; place-items: center; padding: 26px; }
.product-media--figure svg { width: 100%; height: 100%; max-height: 190px; }
.product-media--figure::after { display: none; }
.product-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { margin: 0; font-family: Orbitron, Inter, sans-serif; font-size: 1.28rem; letter-spacing: -.01em; }
.product-descriptor { margin: 9px 0 0; color: var(--red-bright); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.product-card > .product-body > p:not(.product-descriptor) { color: var(--muted); font-size: .93rem; }
.product-list { margin: 16px 0 24px; padding-left: 18px; color: #cfd4dc; font-size: .88rem; }
.product-list li { margin: 6px 0; }
.product-body .button { margin-top: auto; align-self: flex-start; }

/* --- proof / metrics ----------------------------------------------------- */
.proof { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
.proof-media { margin: 0; }
.proof-media img { border-radius: var(--ax-radius); border: 1px solid var(--ax-edge); }
.proof figcaption, .figure-note { margin: 12px 0 0; color: var(--muted); font-size: .76rem; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 34px 0 30px; }
.metric { padding: 22px 20px; border: 1px solid var(--ax-edge); border-radius: 10px; background: var(--ax-card); }
.metric b { display: block; font-family: Orbitron, Inter, sans-serif; font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: #fff; line-height: 1; letter-spacing: -.02em; }
.metric span { display: block; margin-top: 10px; color: var(--muted); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.5; }
.metric--word b { font-size: clamp(1.05rem, 2vw, 1.35rem); }

/* --- sub-page furniture -------------------------------------------------- */
.page-hero { max-width: var(--max); margin: 0 auto; padding: 74px 32px 10px; }
.page-hero h1 { margin: 0; font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.035em; max-width: 18ch; }
.page-hero .lede { margin: 24px 0 0; }
.crumbs { margin: 0 0 20px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: #fff; }
.crumbs span { color: rgba(255,255,255,.3); margin: 0 8px; }

.prose { max-width: 74ch; }
.prose h2 { margin: 0 0 16px; font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; }
.prose h3 { margin: 34px 0 10px; font-size: 1.05rem; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin: 0 0 16px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose strong { color: #e7eaef; }

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: start; }
.panel { padding: 30px 28px; border: 1px solid var(--ax-edge); border-radius: var(--ax-radius); background: var(--ax-card); }
.panel h3 { margin: 0 0 14px; font-family: Orbitron, Inter, sans-serif; font-size: 1rem; letter-spacing: .01em; }
.panel ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.panel li { margin: 8px 0; }

.keyvals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.keyvals li { padding: 18px 18px 16px; border: 1px solid var(--ax-edge); border-radius: 10px; background: var(--ax-card); }
.keyvals b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; color: var(--red-bright); }
.keyvals span { display: block; margin-top: 8px; color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* --- gallery ------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 44px; }
.gallery figure { margin: 0; grid-column: span 2; }
.gallery figure.wide-2 { grid-column: span 3; }
.gallery figure.wide-3 { grid-column: span 6; }
.gallery img { width: 100%; border-radius: 10px; border: 1px solid var(--ax-edge); }
.gallery figcaption { margin: 10px 2px 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }

.aside-figure { margin: 0 0 20px; }
.aside-figure img { width: 100%; border-radius: 10px; border: 1px solid var(--ax-edge); }
.aside-figure figcaption { margin: 10px 2px 0; color: var(--muted); font-size: .78rem; }

.event-hero { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.event-hero img { width: 100%; border-radius: var(--ax-radius); border: 1px solid var(--ax-edge); }

/* --- call to action band ------------------------------------------------- */
.cta-band { max-width: var(--max); margin: 0 auto 100px; padding: 0 32px; }
.cta-band-inner {
  border: 1px solid rgba(229,9,20,.32); border-radius: var(--ax-radius); padding: 42px 44px;
  background: linear-gradient(120deg, #12151a 0%, #0b0c0f 62%, #1c0407 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-band h2 { margin: 0 0 8px; font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem); letter-spacing: -.02em; }
.cta-band p { margin: 0; color: var(--muted); max-width: 58ch; font-size: .95rem; }

/* --- form: interest selection ------------------------------------------- */
.field-wide { grid-column: 1 / -1; }
.signup-form .hint { display: block; margin-top: 6px; color: var(--muted); font-weight: 400; font-size: .72rem; }
.signup-form select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, #9aa1ac 50%), linear-gradient(135deg, #9aa1ac 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

/* --- footer -------------------------------------------------------------- */
/* styles.css styles the bare `nav` element, and below 900px it turns `nav` into an
   absolutely positioned drop-down panel. That rule was written when the only nav on
   the page was the header one. The footer nav has to opt out of all of it, or it
   detaches and floats over the top of the page on tablet and mobile. */
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 22px;
  position: static; inset: auto;
  background: none; border: 0; border-radius: 0; padding: 0;
  flex-direction: row; align-items: center;
}
.footer-nav a { text-decoration: none; color: #c9ced6; font-size: .76rem; }
.footer-nav a:hover { color: #fff; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1050px) {
  .pipeline { grid-template-columns: repeat(3, 1fr); }
  .pipeline li:nth-child(3)::after { display: none; }
  .product-grid { grid-template-columns: 1fr; }
  .proof, .split { grid-template-columns: 1fr; gap: 36px; }
  .gallery figure, .gallery figure.wide-2 { grid-column: span 3; }
}
@media (max-width: 900px) {
  .hero--statement { padding: 54px 20px 40px; }
  .page-hero { padding: 56px 20px 6px; }
  .event-hero, .cta-band { padding: 0 20px; }
  .cta-band-inner { padding: 30px 24px; }
  .metrics { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pipeline { grid-template-columns: 1fr; gap: 8px; }
  .pipeline li::after {
    top: auto; right: auto; bottom: -7px; left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .pipeline li:nth-child(3)::after { display: block; }
  .pipeline li:last-child::after { display: none; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure, .gallery figure.wide-2, .gallery figure.wide-3 { grid-column: span 1; }
  .keyvals { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===========================================================================
   Product page components (2026-09-07, second content release)
   =========================================================================== */

/* --- brand line: no dash characters, the rule is drawn in CSS ------------- */
.hero-brandline { gap: 0; }
.hero-brandline .brandline-rule {
  display: inline-block; width: 42px; height: 1px; margin: 0 16px;
  background: rgba(229,9,20,.55); vertical-align: middle;
}

/* --- wordmark and trademark ---------------------------------------------- */
/* The mark lives inside assets/axiomyx-logo.svg, so every usage gets the same
   treatment including the PHP archive pages. The SVG box was tightened at the
   same time (it carried about 210 units of dead space to the right of the
   wordmark, which is why the trademark looked detached), so these widths
   override the ones styles.css sets for the old box. */
.brand img { width: 132px; }
footer img { width: 120px; }
@media (max-width: 560px) { .brand img { width: 118px; } }

/* --- trademark mark (historic note) -------------------------------------- */
/* The mark lives inside assets/axiomyx-logo.svg so every usage, including the
   PHP archive pages, gets the same treatment. Nothing to do in markup. */

/* --- use-case cards ------------------------------------------------------ */
.use-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 44px; }
.use-case { padding: 28px 26px 26px; border: 1px solid var(--ax-edge); border-radius: var(--ax-radius);
  background: var(--ax-card); }
.use-case h3 { margin: 0 0 6px; font-family: Orbitron, Inter, sans-serif; font-size: 1.05rem; }
.use-case .who { margin: 0 0 14px; color: var(--red-bright); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.use-case ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.use-case li { margin: 7px 0; }

/* --- vertical process flow ----------------------------------------------- */
.flow { margin: 40px 0 0; padding: 0; list-style: none; max-width: 620px; }
.flow li { position: relative; padding: 16px 20px 16px 62px; margin: 0 0 10px;
  border: 1px solid var(--ax-edge); border-radius: 10px; background: var(--ax-card); }
.flow li::before {
  content: attr(data-step); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: Orbitron, Inter, sans-serif; font-size: .68rem; color: var(--red);
  border: 1px solid rgba(229,9,20,.5); background: rgba(229,9,20,.10);
}
.flow li::after {
  content: ""; position: absolute; left: 31px; bottom: -10px; width: 1px; height: 10px;
  background: rgba(229,9,20,.4);
}
.flow li:last-child::after { display: none; }
.flow b { display: block; font-size: .95rem; }
.flow span { display: block; margin-top: 4px; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.flow li.loop { border-style: dashed; }

/* --- human / machine comparison ------------------------------------------ */
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 40px; }
.compare-col { padding: 26px 24px; border: 1px solid var(--ax-edge); border-radius: var(--ax-radius);
  background: var(--ax-card); }
.compare-col h3 { margin: 0 0 16px; font-family: Orbitron, Inter, sans-serif; font-size: .95rem;
  letter-spacing: .04em; }
.compare-col ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.compare-col li { margin: 8px 0; }
.compare-col--ax { border-color: rgba(229,9,20,.32); }
.compare-col--ax h3 { color: var(--red-bright); }
.compare-join { display: grid; place-items: center; color: var(--muted);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; writing-mode: vertical-rl; }
.compare-result { margin-top: 18px; padding: 18px 22px; border: 1px solid rgba(229,9,20,.32);
  border-radius: 10px; background: linear-gradient(120deg, #12151a, #1c0407);
  font-family: Orbitron, Inter, sans-serif; font-size: .82rem; letter-spacing: .08em;
  text-transform: uppercase; text-align: center; }

/* --- numbered workflow --------------------------------------------------- */
.workflow { counter-reset: wf; margin: 40px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.workflow li { counter-increment: wf; padding: 22px 20px; border: 1px solid var(--ax-edge);
  border-radius: 10px; background: var(--ax-card); }
.workflow li::before { content: counter(wf, decimal-leading-zero); display: block;
  font-family: Orbitron, Inter, sans-serif; font-size: .68rem; color: var(--red); letter-spacing: .1em; }
.workflow b { display: block; margin: 10px 0 6px; font-size: .93rem; }
.workflow p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

/* --- environment variable chips ------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; padding: 0; list-style: none; }
.chips li { padding: 9px 14px; border: 1px solid var(--ax-edge); border-radius: 999px;
  background: rgba(255,255,255,.03); color: #d3d8df; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .09em; }

/* --- layered architecture stack ------------------------------------------ */
.stack { margin: 44px 0 0; display: grid; gap: 10px; }
.stack-layer { border: 1px solid var(--ax-edge); border-radius: var(--ax-radius);
  background: var(--ax-card); padding: 24px 26px; }
.stack-layer--engine { border-color: rgba(229,9,20,.34);
  background: linear-gradient(120deg, #12151a 0%, #0b0c0f 60%, #1c0407 100%); }
.stack-layer h3 { margin: 0 0 4px; font-family: Orbitron, Inter, sans-serif; font-size: .92rem;
  letter-spacing: .08em; }
.stack-layer .layer-role { margin: 0 0 16px; color: var(--muted); font-size: .8rem; }
.stack-layer--engine h3 { color: var(--red-bright); }
.stack-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stack-items li { padding: 9px 13px; border: 1px solid var(--ax-edge); border-radius: 7px;
  background: rgba(255,255,255,.035); font-size: .79rem; color: #dde1e7; }
.stack-arrow { justify-self: center; color: rgba(229,9,20,.75); font-size: 1.1rem; line-height: 1; }

/* --- current vs planned -------------------------------------------------- */
.status-table { width: 100%; border-collapse: collapse; margin-top: 34px; font-size: .9rem; }
.status-table caption { text-align: left; color: var(--muted); font-size: .8rem; padding-bottom: 14px; }
.status-table th, .status-table td { text-align: left; padding: 13px 14px;
  border-bottom: 1px solid var(--ax-edge); vertical-align: top; }
.status-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
  font-weight: 700; }
.status-table td:first-child { color: #e4e8ee; }
.status-table td { color: var(--muted); }
.tag { display: inline-block; padding: 4px 9px; border-radius: 4px; font-size: .66rem;
  text-transform: uppercase; letter-spacing: .09em; font-weight: 700; white-space: nowrap; }
.tag-now { background: rgba(87,220,109,.13); color: #7fe08f; border: 1px solid rgba(87,220,109,.32); }
.tag-next { background: rgba(229,9,20,.13); color: #ff6a63; border: 1px solid rgba(229,9,20,.34); }

/* --- creator ------------------------------------------------------------- */
.creator-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center;
  padding: 55px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creator-photo { margin: 0; }
.creator-photo img { width: 100%; border-radius: var(--ax-radius); border: 1px solid var(--ax-edge); }
.creator-photo figcaption { margin: 12px 2px 0; color: var(--muted); font-size: .78rem; }

/* --- charge geometry diagram --------------------------------------------- */
.geometry { margin: 34px 0 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: stretch; }
.geometry-panel { padding: 22px 22px 20px; border: 1px solid var(--ax-edge); border-radius: var(--ax-radius);
  background: var(--ax-card); }
.geometry-panel h4 { margin: 0 0 10px; font-family: Orbitron, Inter, sans-serif; font-size: .82rem;
  letter-spacing: .06em; }
.geometry-panel p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.geometry-panel--better { border-color: rgba(87,220,109,.30); }
.geometry-panel--better h4 { color: #7fe08f; }
.geometry-join { display: grid; place-items: center; color: var(--muted); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .11em; text-align: center; max-width: 110px; }

/* --- metric footnote ----------------------------------------------------- */
.metric-note { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; max-width: 76ch; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1050px) {
  .use-cases { grid-template-columns: 1fr; }
  .workflow { grid-template-columns: repeat(2, 1fr); }
  .compare, .geometry { grid-template-columns: 1fr; }
  .compare-join, .geometry-join { writing-mode: horizontal-tb; padding: 6px 0; max-width: none; }
  .creator-grid { grid-template-columns: 1fr; gap: 34px; padding: 40px 0; }
}
@media (max-width: 620px) {
  .workflow { grid-template-columns: 1fr; }
  .status-table, .status-table tbody, .status-table tr, .status-table td { display: block; width: 100%; }
  .status-table thead { display: none; }
  .status-table tr { padding: 14px 0; border-bottom: 1px solid var(--ax-edge); }
  .status-table td { border: 0; padding: 3px 0; }
}

/* --- four-up metric row -------------------------------------------------- */
.metrics-4 { grid-template-columns: repeat(4, 1fr); }
.metrics-4 .metric b { font-size: clamp(1.4rem, 2.6vw, 2rem); }
@media (max-width: 1050px) { .metrics-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .metrics-4 { grid-template-columns: 1fr; } }

/* --- figure captions under full-width event images ----------------------- */
.event-hero figcaption { margin: 12px 2px 0; }

/* --- banded crop for tall photographs -----------------------------------
   Some frames are close to 4:3. At full page width that is over 1000px tall and
   it swamps the page. This crops the frame with object-fit rather than resizing
   it, so the proportions of the photograph itself are never altered.
   ------------------------------------------------------------------------ */
.crop-band { overflow: hidden; border-radius: var(--ax-radius); border: 1px solid var(--ax-edge); }
.crop-band img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }
.crop-band--wide { aspect-ratio: 16 / 7; }
.crop-band--hero { aspect-ratio: 16 / 8; }
.crop-band--top img { object-position: center 30%; }
@media (max-width: 620px) { .crop-band--wide, .crop-band--hero { aspect-ratio: 4 / 3; } }

/* metric figures must never wrap mid-value */
.metric b { white-space: nowrap; }