/*
  Recordstake — site styles.

  Written to pass the standard the product is about. Every choice below that looks like
  restraint is a requirement:

  - Fonts are self-hosted .woff2 files (site/fonts/), the same files northlinestandard.com
    already ships, not a Google Fonts request. Nothing is downloaded from a third party at
    load time — an agency's IT department will look at the network tab.
  - Colours measured against WCAG 1.4.3, not estimated — including every colour introduced
    in the 19 August 2026 redesign. See the ratios beside each one below. The first version
    of this file carried guessed figures that were all wrong in one direction or another,
    which is precisely the fault the product exists to catch, committed in the stylesheet of
    the site that says so.
  - Relative units throughout, so WCAG 1.4.4 (resize to 200%) and 1.4.10 (reflow at 320px)
    hold without a separate mobile stylesheet.
  - A visible focus ring that is never removed, and never lighter than the body-text pairing
    it sits against. Removing it is the single most common accessibility fault on a marketing
    site, and we would deserve everything we got.

  19 August 2026: Rodney read the previous version and said it looked like "a column of text
  ... like a newspaper column with no surrounding newspaper" — not wrong, and not what
  restraint was supposed to buy. This version borrows the visual language already built and
  measured for northlinestandard.com (dark gradient hero, serif display type, card layouts)
  so the two sites present as one real company, without loosening anything above.
*/

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/source-serif-4-latin.woff2') format('woff2');
}

:root {
    /* Body text, unchanged since the first pass and re-measured every time this file
       changes. Against #ffffff: ink 16.5:1, slate 7.3:1. --rule is non-text, 1.4.11 only. */
    --ink: #16202b;
    --slate: #4a5866;
    --rule: #d8dee4;
    --paper: #ffffff;
    --wash: #f5f7f9;
    /* Measured 8.5:1 on white — passes 1.4.3 for body-size link text. */
    --link: #14507d;
    --link-hover: #0d3a5c;
    --flag: #8a4b00;
    --measure: 34rem;

    /* Introduced 19 August 2026, all measured before use — see the header comment.
       white on navy: 17.31:1 · light body text on navy: 10.65:1
       teal label on navy: 11.70:1 · deep teal on white: 5.01:1 */
    --navy: #0f1b2c;
    --navy-2: #16283f;
    --navy-text: #c3ccd6;
    --teal: #0d7c7c;
    --teal-light: #5eead4;
    --wide: 62rem;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Never a fixed px root: it defeats the browser's own text-size setting. */
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

/* WCAG 2.4.1 Bypass Blocks. Visible on focus, not hidden from everyone forever. */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1rem;
    z-index: 20;
    text-decoration: underline;
}

.skip:focus {
    left: 0;
}

a {
    color: var(--link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--link-hover);
}

/* Never removed, and thick enough to see against any background here, light or dark. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--link);
    outline-offset: 2px;
    border-radius: 2px;
}

.hero a:focus-visible,
.hero button:focus-visible {
    outline-color: var(--teal-light);
}

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.wrap-wide {
    max-width: var(--wide);
    margin: 0 auto;
    padding: 0 1.25rem;
}

header.masthead {
    border-bottom: 1px solid var(--rule);
    padding: 1.25rem 0;
}

.masthead .wrap-wide {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
}

.wordmark {
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.parent {
    font-size: 0.875rem;
    color: var(--slate);
    margin: 0;
}

/* --- Hero ------------------------------------------------------------------------------
   Dark band, matching the gradient northlinestandard.com already uses and already measured.
   Content sections below stay light and text-forward — this is the one place the page gets
   dramatic, not the whole page. */
.hero {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(13, 124, 124, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 60%, rgba(13, 124, 124, 0.10) 0%, transparent 50%),
        linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    padding: 3.5rem 0 4rem;
}

.hero-compact {
    padding: 2.75rem 0 3rem;
}

.hero-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--teal-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

.hero h1 {
    font-family: var(--font-serif);
    color: var(--paper);
    font-size: clamp(1.875rem, 4.2vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    max-width: 40rem;
    margin: 0 0 1.25rem;
}

.hero .lead {
    color: var(--navy-text);
    font-size: 1.1875rem;
    line-height: 1.7;
    max-width: var(--measure);
    margin: 0 0 2rem;
}

.hero-compact .lead {
    margin-bottom: 0;
}

/* The three buckets, rendered as the same pills carried in og-image.png — a reader who has
   seen the link preview meets the identical shapes on the page itself. */
.hero-buckets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.hero-buckets li {
    border: 1px solid rgba(94, 234, 212, 0.35);
    color: var(--navy-text);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
}

.btn {
    display: inline-block;
    background: var(--teal);
    color: var(--paper);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border-radius: 0.4rem;
    border: 1px solid transparent;
}

.btn:hover {
    background: #0a6363;
    color: var(--paper);
}

main {
    padding: 3rem 0 1rem;
}

section {
    padding: 3rem 0;
}

section.alt {
    background: var(--wash);
}

h1 {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
    max-width: var(--measure);
}

h2 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
    max-width: var(--measure);
}

h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

p,
li {
    max-width: var(--measure);
}

.lead {
    font-size: 1.1875rem;
    color: var(--slate);
}

/* Upgraded 19 August 2026 alongside the card/stat components — a thin left border on an
   otherwise plain paragraph read as "still a column of text" once real cards existed
   elsewhere on the page. Full border and more padding put it in the same visual register as
   the bucket cards and the price card, not a paler cousin of them. */
.note {
    background: var(--wash);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--slate);
    border-radius: 0.5rem;
    padding: 1.125rem 1.25rem;
    margin: 1.75rem 0;
    max-width: var(--measure);
}

section.alt .note {
    background: var(--paper);
}

.note.flag {
    border-left-color: var(--flag);
}

.note p {
    margin: 0.5rem 0;
}

.note p:first-child {
    margin-top: 0;
}

.note p:last-child {
    margin-bottom: 0;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.25rem 0;
    font-size: 0.9375rem;
}

caption {
    text-align: left;
    color: var(--slate);
    font-size: 0.9375rem;
    padding-bottom: 0.5rem;
}

th,
td {
    text-align: left;
    vertical-align: top;
    padding: 0.625rem 0.75rem 0.625rem 0;
    border-bottom: 1px solid var(--rule);
}

th {
    font-weight: 600;
}

/* Wide content scrolls in its own box rather than the page scrolling sideways. */
.scrolls {
    overflow-x: auto;
    max-width: 100%;
}

/* A "Pass" or a "Fail" that is more than a word in a cell — still just text, coloured. */
.pass {
    color: var(--teal);
    font-weight: 700;
}

/* --- Bucket cards ------------------------------------------------------------------------
   A <dl> is still the right element — this is a definition list, three terms and their
   descriptions. HTML5 permits a <div> wrapping one dt/dd pair as a direct child of <dl>
   specifically for grouping like this, so the semantics a screen reader announces do not
   change: definition list, three terms, three descriptions. Only the layout is new. */
dl.buckets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0;
    padding: 0;
}

dl.buckets > div {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    padding: 1.25rem 1.25rem 1.375rem;
}

section.alt dl.buckets > div {
    background: var(--wash);
}

dl.buckets dt {
    font-weight: 700;
    font-size: 1.0625rem;
    margin: 0 0 0.5rem;
}

dl.buckets dd {
    margin: 0;
    color: var(--slate);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* --- Stat grid -----------------------------------------------------------------------
   Corpus figures big enough to read at a glance, still each carrying its own caption —
   nothing here is a number without the sentence that explains it. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 1.75rem 0;
    padding: 0;
    list-style: none;
}

.stat-grid .figure {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--teal);
    line-height: 1.1;
    margin: 0 0 0.375rem;
}

.stat-grid .label {
    color: var(--slate);
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 16rem;
}

/* The two Title II deadlines: the single most load-bearing facts on the page, so they get
   the biggest number treatment on the page — bigger than the corpus stats below, which are
   evidence, not the date a reader has to act by. */
.deadline-grid {
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
    max-width: 40rem;
}

.deadline-grid .figure {
    font-size: 2.5rem;
}

.price-card {
    display: inline-block;
    background: var(--wash);
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    padding: 1.25rem 1.75rem;
    margin: 1.5rem 0 1rem;
}

.price {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.125rem;
}

.price-note {
    color: var(--slate);
    font-size: 0.9375rem;
    margin: 0;
}

/* --- Card lists -----------------------------------------------------------------------
   "What we will not do" and the four scope questions: still <ul>/<ol>, still one item per
   list item, only the border and padding are new. */
/* Two columns once the wider container (19 August) gives them room — one column stretched
   to 952px was a thin bar holding one sentence, not a card. ol.cards stays single-column
   regardless: its counter badges read top-to-bottom as steps, and a 2-up grid would break
   that order for anyone not reading the numbers. */
ul.cards,
ol.cards {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

ul.cards {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 40rem) {
    ul.cards {
        grid-template-columns: 1fr;
    }
}

ul.cards li,
ol.cards li {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    padding: 1.125rem 1.25rem;
    max-width: none;
}

section.alt ul.cards li,
section.alt ol.cards li {
    background: var(--wash);
}

ol.cards {
    counter-reset: qn;
}

ol.cards li {
    position: relative;
    padding-left: 3.25rem;
}

ol.cards li::before {
    counter-increment: qn;
    content: counter(qn);
    position: absolute;
    left: 1.125rem;
    top: 1.125rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--teal);
    color: var(--paper);
    font-weight: 700;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

ol.cards li p {
    margin: 0 0 0.5rem;
}

ol.cards li p:last-child {
    margin-bottom: 0;
}

footer {
    border-top: 1px solid var(--rule);
    margin-top: 1rem;
    padding: 1.75rem 0 3rem;
    color: var(--slate);
    font-size: 0.9375rem;
}

footer p {
    margin: 0.4rem 0;
}

/* The spoken copy of a number — a postal code read as "eight four zero eight four" rather
   than as eighty-four thousand. Available to a screen reader and to nothing else, including
   a selection: an address on a page exists to be copied, and a second copy of it riding along
   on the clipboard would be a worse defect than the one being fixed.

   Chosen by listening. Five other markups of the same string were tried in a real VoiceOver
   session and each added something of its own — a spurious "image", the number read twice, or
   "Group ... End of ..." wrapped around it. */
.spoken {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 40rem) {
    dl.buckets,
    .deadline-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}