/* ============================================================
   DRIVING CANADA — SITE STYLES
   Layout grammar: flat poster-style solid-colour blocks, hard
   edges, generous margins. No gradients, no glows, no shadows,
   no noir atmospherics.

   Depends on tokens.css for all colour/type/space values.
   ============================================================ */

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

html {
    background: var(--shell);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--shell);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 1.05;
    margin: 0;
}

p { margin: 0; }

a { color: inherit; }

/* Visible focus on every interactive element, on any background. */
a:focus-visible,
button:focus-visible,
video:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--accent);
    color: var(--shell);
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    text-decoration: none;
}
.skip-link:focus {
    left: var(--gutter);
    top: 0.5rem;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---- Shared shell ---------------------------------------- */

.wrap {
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding-inline: var(--gutter);
    min-width: 0; /* let scroll containers shrink instead of stretching */
}

.label {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    line-height: 1.3;
}

.prose {
    max-width: var(--measure);
    font-size: var(--fs-read);
    line-height: 1.65;
    color: var(--ink-muted);
}
.prose > p + p { margin-top: 1.25rem; }

/* Inline highlighted words — solid accent block, hard edges. */
.hl {
    background: var(--accent);
    color: var(--shell);
    padding: 0.05em 0.28em;
    font-weight: var(--fw-medium);
}

.block-gap { margin-top: var(--block-gap); }

/* ---- Header ----------------------------------------------- */

.site-header {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    padding: 1.25rem var(--gutter);
    border-bottom: 1px solid var(--rule);
}

.menu-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 8px;
    background: none;
    border: 0;
    cursor: pointer;
    flex: none;
}
.menu-btn span {
    display: block;
    height: 2px;
    background: var(--ink);
    width: 100%;
}
.menu-btn:hover span { background: var(--accent); }

.wordmark {
    font-weight: var(--fw-bold);
    font-size: clamp(1rem, 2vw, 1.375rem);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    margin-right: auto;
}
.wordmark .wm-hollow {
    color: transparent;
    -webkit-text-stroke: 1px var(--ink);
}
.wordmark:hover .wm-solid { color: var(--accent); }
.wordmark:hover .wm-hollow { -webkit-text-stroke-color: var(--accent); }

/* Partner marks — small, monochrome. */
.partner-marks {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1.25rem);
}
.partner-mark {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: var(--fw-medium);
    color: var(--ink-dim);
    line-height: 1.15;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .partner-marks { display: none; }
}

.simplified-btn {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--ink);
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.simplified-btn:hover { background: var(--accent); color: var(--shell); border-color: var(--accent); }
.simplified-btn[aria-pressed="true"] { background: var(--accent); color: var(--shell); border-color: var(--accent); }

/* ---- Menu panel ------------------------------------------- */

.menu-panel {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--shell);
    padding: 1.25rem var(--gutter) 3rem;
    overflow-y: auto;
}
.menu-panel[hidden] { display: none; }

.menu-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.menu-close {
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.menu-close:hover { background: var(--accent); color: var(--shell); border-color: var(--accent); }

.lang-toggle {
    display: inline-flex;
    border: 1px solid var(--rule-strong);
}
.lang-toggle button {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    background: none;
    border: 0;
    color: var(--ink);
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--shell); }

.menu-nav {
    margin-top: 2.5rem;
    display: grid;
    gap: 2.5rem;
}
@media (min-width: 60rem) {
    .menu-nav { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.menu-link {
    display: block;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.35rem 0;
}
.menu-link:hover,
.menu-link.is-current { color: var(--accent); }

.menu-section-label {
    color: var(--ink-dim);
    margin-bottom: 1rem;
    display: block;
}

.menu-stories {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}
.menu-stories a {
    display: block;
    text-decoration: none;
    font-size: var(--fs-read);
    padding: 0.4rem 0;
    color: var(--ink-muted);
}
.menu-stories a:hover { color: var(--accent); }

/* ---- Hero / intro film ------------------------------------ */

.hero { padding-top: clamp(2rem, 5vw, 3.5rem); }

.film {
    position: relative;
    background: #000;
    border: 1px solid var(--rule);
    aspect-ratio: 16 / 9;
    width: 100%;
}
.film video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

/* Designed poster frame — wordmark over black, shown until a
   film file exists. Sits behind the <video>, which is
   transparent until it has a source with data. */
.film-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: #000;
    text-align: center;
    padding: 1.5rem;
}
.film-poster-word {
    font-size: clamp(1.75rem, 5vw, 3.5rem);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    line-height: 1;
}
.film-poster-word .wm-hollow {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
}
.film-poster-note {
    color: var(--ink-dim);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.film-cc {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 2;
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    background: var(--shell);
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
}
.film-cc[aria-pressed="true"],
.film-cc:hover { background: var(--accent); color: var(--shell); border-color: var(--accent); }

/* Hero body: title + prose on the left, transcript + credits at
   equal visual weight on the right. */
.hero-body {
    margin-top: 2.5rem;
    display: grid;
    gap: 2rem;
}
@media (min-width: 60rem) {
    .hero-body {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: 4rem;
        align-items: start;
    }
}

.hero-title {
    font-size: var(--fs-h2);
    margin-bottom: 1.25rem;
}

.film-meta { display: grid; gap: 1.25rem; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-radius: var(--radius);
    padding: 0.85rem 1.4rem;
    cursor: pointer;
    text-align: center;
}
/* Outlined button — equal visual weight to the player controls. */
.btn-outline {
    background: none;
    color: var(--ink);
    border: 2px solid var(--ink);
    width: 100%;
}
.btn-outline:hover { background: var(--accent); color: var(--shell); border-color: var(--accent); }

/* Solid accent fill. Black text on accent = 11.94:1. */
.btn-solid {
    background: var(--accent);
    color: var(--shell);
    border: 2px solid var(--accent);
}
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }

.film-credit {
    font-size: var(--fs-meta);
    color: var(--ink-muted);
    line-height: 1.45;
}
.film-credit strong {
    display: block;
    color: var(--ink);
    font-weight: var(--fw-bold);
}

.transcript-panel {
    margin-top: 1.5rem;
    border: 1px solid var(--rule);
    padding: 1.5rem;
    max-width: var(--measure);
    color: var(--ink-muted);
    font-size: var(--fs-body);
}
.transcript-panel[hidden] { display: none; }

/* ---- Story tab strip -------------------------------------- */

.tab-strip {
    margin-top: 2.5rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.5rem;
}
.tab {
    flex: none;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    text-decoration: none;
    color: var(--ink);
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.85rem 1.15rem;
    white-space: nowrap;
}
.tab:hover { border-color: var(--accent); color: var(--accent); }
.tab.is-active {
    background: var(--accent);
    color: var(--shell);
    border-color: var(--accent);
    font-weight: var(--fw-bold);
}

/* ---- Full-bleed band -------------------------------------- */

.band {
    margin-top: var(--block-gap);
    background: var(--accent);
    min-height: clamp(14rem, 30vw, 26rem);
    display: flex;
    align-items: flex-end;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}
.band-word {
    font-size: clamp(2.25rem, 9vw, 7rem);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    line-height: 0.92;
    color: var(--shell);
}
/* Outlined half of the wordmark, solid half — UT's band treatment. */
.band-word .wm-hollow {
    display: block;
    color: transparent;
    -webkit-text-stroke: 2px var(--shell);
}

/* ---- Section headings ------------------------------------- */

.section { margin-top: var(--block-gap); }

.section-title {
    font-size: var(--fs-h2);
    margin-bottom: 1.75rem;
}

/* ---- Driver card grid ------------------------------------- */

.grid-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}
.grid-count { color: var(--ink-dim); }

.card-grid {
    display: grid;
    gap: 1.5rem;
    /* Wide enough that the "Take this ride" button never wraps. */
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    align-items: stretch;
}

/* Solid poster block: accent fill, black text. */
.card {
    display: flex;
    flex-direction: column;
    background: var(--accent);
    color: var(--shell);
    border-radius: var(--radius);
    padding: 1rem 1rem 1.25rem;
    text-decoration: none;
}
.card:hover { background: var(--ink); }
.card:hover .card-portrait { border-color: var(--shell); }

/* The two non-driver cards read differently: outlined on the
   shell rather than a solid accent block. */
.card--alt {
    background: var(--shell);
    color: var(--ink);
    border: 2px solid var(--accent);
}
.card--alt:hover { background: var(--accent); color: var(--shell); }
.card--alt .card-rule { background: var(--accent); }
.card--alt:hover .card-rule { background: var(--shell); }
.card--alt .card-btn { border-color: var(--accent); color: var(--accent); }
.card--alt:hover .card-btn { border-color: var(--shell); color: var(--shell); }

/* Source portraits are square headshots, so the frame stays square and
   centres the face rather than cropping into the dark backdrop. */
.card-portrait {
    aspect-ratio: 1 / 1;
    width: 100%;
    /* Explicit height so the intrinsic height attribute on the <img>
       cannot override the square frame before the file loads. */
    height: auto;
    /* Portraits are dark studio headshots. A light backing separates them
       from both the black shell and the accent card fill. */
    background: var(--surface-light);
    border: 1px solid var(--shell);
    object-fit: cover;
    object-position: center center;
    margin-bottom: 1rem;
}
/* Placeholder portrait when no image exists. */
.card-portrait--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    color: var(--ink-dim);
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
}

.card-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    background: var(--shell);
    color: var(--accent);
    padding: 0.3rem 0.55rem;
    margin-bottom: 0.75rem;
}
.card--alt .card-tag { background: var(--accent); color: var(--shell); }

.card-name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    line-height: 1.1;
}

.card-rule {
    width: 2rem;
    height: 3px;
    background: var(--shell);
    margin: 0.7rem 0 0.85rem;
}

.card-meta {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    line-height: 1.4;
}

/* Interview pull-quote — the ONLY place Cormorant italic appears. */
.card-quote {
    font-family: var(--font-quote);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.35;
    margin-top: 0.85rem;
}

.card-btn {
    margin-top: auto;
    padding-top: 1.25rem;
}
.card-btn span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border: 2px solid var(--shell);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    /* Keep the label on one line — "Take this ride" must not stack. */
    white-space: nowrap;
    line-height: 1.2;
}

/* ---- About: credits grid ---------------------------------- */

.credits-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.credit-tile {
    border: 1px solid var(--rule-strong);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 13rem;
}
.credit-logo {
    height: 3.5rem;
    display: flex;
    align-items: center;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--accent);
}
.credit-role {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--ink-dim);
}
.credit-names {
    font-size: var(--fs-body);
    color: var(--ink-muted);
    line-height: 1.5;
}

/* ---- Resources: stat blocks ------------------------------- */

.stat-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Flat accent-on-black poster block. */
.stat-block {
    background: var(--accent);
    color: var(--shell);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Figures vary in length ("37%" vs "66 years"), so they must wrap and
   shrink rather than push the block wider than its grid track. */
.stat-figure {
    font-size: clamp(1.75rem, 3.4vw, 3rem);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: var(--ls-tight);
    /* Wrap between words ("66 years") but never inside a figure —
       break-word would split "$20,000-$30,000" mid-number. */
    overflow-wrap: normal;
    word-break: keep-all;
    max-width: 100%;
}
.stat-desc {
    font-size: var(--fs-body);
    line-height: 1.4;
}
/* Source text sits on the light accent block, so it uses the
   deep variant: #0E7C6B on #2DE1C2 is insufficient, so black at
   reduced weight is used instead — still 11.94:1. */
.stat-source {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    margin-top: auto;
    padding-top: 0.75rem;
}

/* Inverted stat block on a light surface — deep accent for the
   figure (4.67:1 on --surface-light). */
.stat-block--light {
    background: var(--surface-light);
    color: var(--shell);
}
.stat-block--light .stat-figure { color: var(--accent-deep); }

/* Wide data escapes into its own scroll container so the page body
   never scrolls horizontally. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Without an explicit max-width the min-width table below stretches
       this container, which pushes the whole page into horizontal scroll. */
    max-width: 100%;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
    min-width: 34rem;
}
.data-table th,
.data-table td {
    text-align: left;
    padding: 1rem 1.25rem 1rem 0;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}
.data-table thead th {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--accent);
    border-bottom-color: var(--rule-strong);
}
.data-table tbody th {
    font-weight: var(--fw-bold);
    color: var(--ink);
}
.data-table tbody td { color: var(--ink-muted); }

.table-rows { border-top: 1px solid var(--rule); }
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
    align-items: baseline;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
}
/* Hover uses inset box-shadow rather than padding, so the row never
   changes width and cannot push the page into horizontal scroll. */
a.row:hover { background: var(--accent); color: var(--shell); }
.row-title { font-size: var(--fs-read); font-weight: var(--fw-medium); }
.row-type {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--ink-dim);
}
a.row:hover .row-type { color: var(--shell); }

.era-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.era {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    display: grid;
    gap: 0.5rem;
}
@media (min-width: 48rem) {
    .era { grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; }
}
.era-period {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--accent);
}
.era-desc { color: var(--ink-muted); font-size: var(--fs-body); line-height: 1.6; }

/* ---- Footer ----------------------------------------------- */

.site-footer {
    margin-top: var(--block-gap);
    border-top: 1px solid var(--rule);
    padding: 2.5rem var(--gutter) 3rem;
}
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}
.footer-nav a {
    font-size: var(--fs-body);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.footer-nav a:hover { color: var(--accent); }
.footer-copy { color: var(--ink-dim); font-size: var(--fs-body); }
.footer-partners {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
}
.footer-partners span {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    color: var(--ink-dim);
}

/* ---- Simplified view --------------------------------------
   Strips decorative fills back to plain type on the shell. */
body.simplified .band,
body.simplified .film-poster { background: var(--shell); }
body.simplified .card,
body.simplified .stat-block {
    background: var(--shell);
    color: var(--ink);
    border: 1px solid var(--rule-strong);
}
body.simplified .card-rule { background: var(--accent); }
body.simplified .card-btn span,
body.simplified .card-portrait { border-color: var(--rule-strong); }
body.simplified .card-tag { background: var(--accent); color: var(--shell); }
body.simplified .band-word { color: var(--ink); }
body.simplified .band-word .wm-hollow { -webkit-text-stroke-color: var(--ink); }
body.simplified .stat-figure { color: var(--accent); }
body.simplified .hl { background: none; color: var(--accent); padding: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}