/* ============================================================================
   Rantizo interior pages: the frame every page below the home page shares.
   Loaded after site.css, so tokens, the type kit, buttons, nav, menu, footer,
   .facts, .people and .linklist all come from there unchanged. This file adds
   only what interior pages need:
     .wrap     the home close's content width
     .phead    the page head: kicker, display title, lede, actions, and an
               optional slashed media panel cut on the deck's 12.5deg
     .sect     a ruled section: label and title on the left, content on the
               right, golden ratio (1 : 1.618)
     .stat     a big tabular figure and its label
     .ledger   dated rows: news, filings
     .prose    long-form text: releases, legal
     forms     .field, .input, .choice, .seg, .check
   Page-specific styles go in that page's own stylesheet.
   ========================================================================== */

.nowrap { white-space: nowrap; }

.wrap {
  max-width: calc(96rem + 2 * var(--sc-gutter));
  margin-inline: auto; padding-inline: var(--sc-gutter);
}

/* ============================================================== PAGE HEAD ==
   Golden-ratio height, content on the floor, like the home hero at rest. */
.phead {
  position: relative; isolation: isolate;
  min-height: clamp(32rem, 61.8svh, 48rem);
  display: grid; align-items: end;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: clip;
}
.phead__inner { position: relative; z-index: 2; width: 100%; }
.phead__title {
  font-size: clamp(3.25rem, 8.2vw, 9rem);
  line-height: 0.86;
  margin-top: clamp(0.875rem, 2vh, 1.25rem);
}
.phead__title > span { display: block; }
.phead__lede {
  margin: clamp(1.25rem, 3vh, 2rem) 0 0; max-width: 38ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: 1.5;
  color: var(--sc-ink); text-wrap: pretty;
}
.phead__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3vh, 2rem); }

/* A head with no media, over a page that gets to the point quickly, does not
   need the golden-ratio height. */
.phead--short { min-height: 0; padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* The slashed media panel: the minor golden share of the width, its left edge
   cut on the deck's diagonal, fading into the ground behind the title. */
.phead__media {
  position: absolute; z-index: 0; top: 0; bottom: 0; right: 0;
  width: 38.2%;
  --cut: calc(min(61.8svh, 48rem) * var(--slash));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  background: var(--sc-surface);
}
.phead__media img, .phead__media video {
  width: 100%; height: 100%; max-width: none; object-fit: cover;
}
.phead__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(11 11 12 / 0.55), transparent 24%),
    linear-gradient(to top, rgb(11 11 12 / 0.6), transparent 30%);
}

@media (max-width: 860px) {
  .phead { min-height: 0; padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 3rem; }
  .phead--media { padding-top: calc(var(--nav-h) + 38svh + 0.75rem); }
  /* On a phone the panel becomes a band under the nav, cut along its foot. */
  .phead__media {
    left: 0; width: auto; bottom: auto; height: calc(var(--nav-h) + 38svh);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  }
  .phead__media::after {
    background: linear-gradient(to bottom, rgb(11 11 12 / 0.7), transparent 30%, transparent 55%, rgb(11 11 12 / 0.85));
  }
  .phead__title { font-size: clamp(3rem, 15vw, 5.5rem); }
}

/* ================================================================ SECTION ==
   One ruled band per topic. The rule and the mono label are the home close's
   "At a glance" block, scaled up to a page. */
.sect { padding-top: clamp(4.5rem, 9vw, 8rem); scroll-margin-top: calc(var(--nav-h) - 1.25rem); }
.sect__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: 2rem clamp(2rem, 6vw, 7rem);
  padding-top: 1.25rem;
}
/* The rule spans the content, not the gutters, like every rule on the home
   page. (.sect__grid usually shares its element with .wrap's padding.) */
.sect__grid::before {
  content: ""; position: absolute; top: 0; height: 1px;
  left: var(--sc-gutter); right: var(--sc-gutter);
  background: var(--sc-hairline-strong);
}
.sect__grid:not(.wrap)::before { left: 0; right: 0; }
/* A .facts list as a section's body lines up with the section label. */
.sect__grid > .facts, .sect__grid > div > .facts:first-child { margin-top: 0; }
.sect__grid .facts > div:first-child { padding-top: 0.15rem; }
.facts a {
  color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-underline-offset: 0.22em;
}
.sect__head { align-self: start; }
.sect__title { font-size: clamp(2.25rem, 4.2vw, 4.25rem); margin-top: 1.5rem; }
.sect__title > span { display: block; }
.sect__intro {
  margin: 1.25rem 0 0; max-width: 36ch;
  color: var(--sc-ink-soft); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty;
}
.sect__head .link-arrow { margin-top: 1.75rem; }
/* The label column holds its place while a long section scrolls past. */
@media (min-width: 861px) {
  .sect__head--sticky { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
@media (max-width: 860px) {
  .sect__grid { grid-template-columns: 1fr; }
}

/* =================================================================== STAT == */
.stat__num {
  display: block; margin: 0;
  font-family: var(--sc-font-display); font-stretch: 62%; font-weight: 800;
  font-size: clamp(3rem, 6vw, 6.5rem); line-height: 0.82; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat__num--accent { color: var(--sc-accent); }
.stat__label { margin-top: 0.875rem; }

/* ================================================================= LEDGER ==
   Dated rows. Each row is one link: date, title, tag, arrow. */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.ledger__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto 1rem;
  gap: 0.5rem 2rem; align-items: baseline;
  padding: 1.125rem 0; border-bottom: 1px solid var(--sc-hairline);
  color: var(--sc-ink); text-decoration: none;
  transition: color 160ms var(--sc-ease-out);
}
.ledger__date, .ledger__tag {
  font: 500 0.75rem/1.5 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft); white-space: nowrap;
}
.ledger__title { font-size: 1.0625rem; line-height: 1.4; text-wrap: pretty; }
.ledger__row svg {
  width: 1rem; height: 1rem; align-self: center;
  fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: square;
  transition: transform 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.ledger__row:hover .ledger__title { color: var(--sc-accent); }
  a.ledger__row:hover svg { transform: translateX(3px); }
}
@media (max-width: 860px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr) 1rem; }
  .ledger__date { grid-column: 1; }
  .ledger__title { grid-column: 1; }
  .ledger__tag { grid-column: 1; }
  .ledger__row svg { grid-column: 2; grid-row: 1 / span 3; }
}

/* ================================================================== PROSE == */
.prose { max-width: 68ch; color: var(--ink-mid); font-size: 1.0625rem; line-height: 1.68; text-wrap: pretty; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 {
  color: var(--sc-ink);
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1;
}
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.125rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--sc-accent); }
.prose strong { color: var(--sc-ink); font-weight: 600; }
.prose a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.2em; }
/* Legal pages: a slightly narrower measure and a lead paragraph in full ink. */
.prose.legal { max-width: 64ch; }
.legal__lead { color: var(--sc-ink); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.6; }
.legal__see { margin-top: 1.5rem; }

/* ================================================================== FORMS ==
   Controls share the button's height and radius, so a field and the button
   that submits it line up. The accent marks focus, selection and errors; the
   error message carries the meaning, not the colour. */
.form { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.form__group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.form__legend {
  padding: 0; margin-bottom: 0.25rem;
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.field__label {
  font: 500 0.75rem/1.2 var(--sc-font-mono); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.field__opt { font: 400 0.8125rem/1 var(--sc-font-text); letter-spacing: 0; text-transform: none; opacity: 0.8; }
.field__hint { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--sc-ink-soft); }
.field__error { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--sc-accent); }
.field__error:empty { display: none; }

.input {
  width: 100%; height: 48px; padding: 0 0.9375rem;
  background: var(--sc-surface); color: var(--sc-ink);
  border: 0; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  font: 400 1rem/1.4 var(--sc-font-text);
  transition: box-shadow 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 72%, transparent); }
textarea.input { height: auto; min-height: 8.5rem; padding: 0.8125rem 0.9375rem; resize: vertical; line-height: 1.5; }
select.input {
  appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23A7A199' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9375rem center; background-size: 1rem;
}
@media (hover: hover) and (pointer: fine) {
  .input:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 42%, transparent); }
}
.input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--sc-accent); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--sc-accent); }

/* Choice tiles: a radio or checkbox drawn as a ruled card. The real input
   covers the card, so it stays clickable, focusable and announced. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; }
.choice { position: relative; display: block; }
.choice > input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.choice__face {
  position: relative; display: grid; gap: 0.3rem; align-content: start;
  height: 100%; min-height: 4.5rem; padding: 1rem 2.5rem 1rem 1rem;
  background: var(--sc-surface); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  transition: box-shadow 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.choice__name {
  font-family: var(--sc-font-display); font-stretch: 75%; font-weight: 800;
  font-size: 1.0625rem; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase;
}
.choice__text { font-size: 0.875rem; line-height: 1.4; color: var(--sc-ink-soft); }
/* The home verdict's tick, in the corner of the chosen card. */
.choice__face::after {
  content: ""; position: absolute; top: 1.15rem; right: 1rem;
  width: 0.7em; height: 0.38em;
  border: solid var(--sc-accent); border-width: 0 0 2px 2px;
  transform: rotate(-45deg) scale(0.4); opacity: 0;
  transition: opacity 160ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .choice > input:hover + .choice__face { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 42%, transparent); }
}
.choice > input:checked + .choice__face {
  background: color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface));
  box-shadow: inset 0 0 0 1.5px var(--sc-accent);
}
.choice > input:checked + .choice__face::after { opacity: 1; transform: rotate(-45deg); }
.choice > input:focus-visible + .choice__face { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.choices[aria-invalid="true"] .choice__face { box-shadow: inset 0 0 0 1.5px var(--sc-accent); }

/* Segmented control: a short row of mutually exclusive options. */
.seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.seg__opt { position: relative; }
.seg__opt > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; }
.seg__opt > span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 1rem;
  border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong);
  font-size: 0.9375rem; color: var(--ink-mid);
  transition: box-shadow 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .seg__opt > input:hover + span { color: var(--sc-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 42%, transparent); }
}
.seg__opt > input:checked + span { color: var(--sc-accent-ink); background: var(--sc-accent); box-shadow: none; font-weight: 600; }
.seg__opt > input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* Checkbox. */
.check { position: relative; display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; font-size: 0.9375rem; line-height: 1.45; }
.check > input {
  appearance: none; flex: none; margin: 0.08rem 0 0;
  width: 1.25rem; height: 1.25rem; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); background: var(--sc-surface);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.check > input::after {
  content: ""; width: 0.6rem; height: 0.32rem; margin-top: -0.12rem;
  border: solid var(--sc-accent-ink); border-width: 0 0 2px 2px;
  transform: rotate(-45deg); opacity: 0;
}
.check > input:checked { background: var(--sc-accent); box-shadow: none; }
.check > input:checked::after { opacity: 1; }
.check > input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { margin: 0; max-width: 46ch; font-size: 0.8125rem; line-height: 1.5; color: var(--sc-ink-soft); }
/* Spam trap: off screen, out of the tab order, hidden from assistive tech. */
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-busy="true"] { cursor: progress; opacity: 0.72; }