/* ==========================================================================
   THE LEGAL ALPHA — front-end design system
   --------------------------------------------------------------------------
   World: "The Record". A legal news desk's paper of record, set as a press
   sheet: the docket ruled into clauses, the way a law report is bound.
     · paper   — neutral document stock (a light warm-neutral, not a wash)
     · ink     — iron-gall near-black, with a warm cast
     · oxblood — binding leather and seal wax (the one accent)
     · inkwell — the dark floor, an oxblood-black, for the news band and foot
   Type: Sentient (display serif) + Supreme (neutral workhorse). Self-hosted.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typefaces
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Sentient';
    src: url('../fonts/sentient-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sentient';
    src: url('../fonts/sentient-400i.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sentient';
    src: url('../fonts/sentient-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Sentient';
    src: url('../fonts/sentient-700i.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/supreme-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/supreme-400i.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Supreme';
    src: url('../fonts/supreme-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces */
    --paper: #f1f0ec;
    --paper-deep: #e5e4de;
    --paper-card: #f8f7f4;
    --inkwell: #201417;
    --inkwell-deep: #170f11;

    /* Ink */
    --ink: #1a1714;
    --ink-soft: #443f39;
    --ink-faint: #635d55;
    --on-dark: #f0eeeb;
    --on-dark-soft: #b9aeb0;

    /* Lines */
    --rule: #d3d0c8;
    --rule-strong: #a9a49a;

    /* The one accent: oxblood, lifted from binding leather and seal wax. */
    --oxblood: #7a1f26;
    --oxblood-deep: #5f181e;

    /* Type */
    --font-display: 'Sentient', Georgia, 'Times New Roman', serif;
    --font-body: 'Supreme', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Rhythm */
    --gutter: 22px;
    --measure: 43rem;
    /* The reading page runs its own, wider measure. At 50rem the body sets
       around 84 characters a line; the rail keeps the width it has, so the
       extra column comes out of the gutter between the two. */
    --measure-article: 50rem;

    /* The invented geometry: one 45-degree cut, used with intent. */
    --cut: 20px;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.62;
    color: var(--ink);
    background-color: var(--paper);
    /* The atmosphere: one raked light across the whole sheet, plus the
       faintest warm shadow in the opposite corner. It is the page's own
       background, not a layer pinned behind the content, so sections read as
       one continuous surface with no seam and the nav is never lit by a sheet
       trailing underneath it. */
    background-image:
        linear-gradient(168deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 26%),
        linear-gradient(348deg, rgba(32, 20, 23, 0.045) 0%, rgba(32, 20, 23, 0) 22%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

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

svg {
    vertical-align: middle;
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.011em;
    color: var(--ink);
}

p {
    margin: 0 0 1em;
}

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

figure {
    margin: 0;
}

button {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--oxblood);
    color: var(--paper);
}

:focus-visible {
    outline: 2px solid var(--oxblood);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3b. Bootstrap collision guards
   --------------------------------------------------------------------------
   Bootstrap 5 is loaded for its grid and normalisation, and it also defines
   .card, .lead and .progress for its own components. Those three names mean
   something different here, and because Bootstrap's rules set properties this
   file does not (a background, a border, a type scale), they leaked straight
   into the front end: every story card was painted as a white panel with a
   1px border and a 6px radius, and .lead pulled a 20px/300 type scale down
   through the crops, frames and bylines.
   Reset them to nothing so these names mean only what this file says they do.
   -------------------------------------------------------------------------- */

.card {
    --bs-card-bg: transparent;
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 0;
    --bs-card-cap-padding-y: 0;
    --bs-card-cap-padding-x: 0;
    --bs-card-title-spacer-y: 0;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink);
    word-wrap: normal;
    position: static;
}

.lead {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.progress {
    --bs-progress-height: 2px;
    --bs-progress-bg: transparent;
    --bs-progress-border-radius: 0;
    display: block;
    height: 2px;
    overflow: visible;
    font-size: inherit;
    border-radius: 0;
    background-color: transparent;
}

/* Bootstrap's .btn:focus-visible out-specifies the global focus ring above
   and swaps it for a coloured glow, so the ring is restated at that weight. */
.btn:focus-visible {
    outline: 2px solid var(--oxblood);
    outline-offset: 2px;
    box-shadow: none;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.7rem 1.1rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: 1264px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 1440px) {
    .container {
        max-width: 1340px;
    }
}

.container--narrow {
    max-width: 860px;
}

/* Two-column shell used by archives: main flow + rail. */
.shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

@media (min-width: 1024px) {
    .shell--split {
        grid-template-columns: minmax(0, 7.4fr) minmax(0, 2.6fr);
        column-gap: 3.25rem;
    }
}

/* A structural rule: full width of its column, and it carries meaning by
   dividing the sheet into clauses. Weight and inset are deliberate. */
.rule {
    border: 0;
    border-top: 1px solid var(--rule-strong);
    margin: 0;
    height: 0;
}

.rule--ink {
    border-top-color: var(--ink);
}

.rule--heavy {
    border-top-width: 2px;
}

/* --------------------------------------------------------------------------
   5. Ledger section heads
   -------------------------------------------------------------------------- */

/* A section opens on a ruled line, with its name below it. The __num slot is
   search's result tally; the front page's ledger carries no numbering. */
.ledger {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding-top: 0.6rem;
    margin-bottom: 1.2rem;
    border-top: 1px solid var(--ink);
}

.ledger__num {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    font-style: italic;
    color: var(--oxblood);
    letter-spacing: 0.01em;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.ledger__label {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    flex: 1 1 auto;
    min-width: 0;
}

.ledger__label a {
    text-decoration: none;
}

.ledger__label a:hover {
    color: var(--oxblood);
}

.ledger__more {
    flex: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-faint);
    text-decoration: none;
    white-space: nowrap;
}

.ledger__more:hover {
    color: var(--oxblood);
}

/* --------------------------------------------------------------------------
   6. Header: dateline, masthead, nav, ticker
   -------------------------------------------------------------------------- */

.dateline {
    background: var(--paper-deep);
    border-bottom: 1px solid var(--rule);
    font-size: 0.8125rem;
}

.dateline__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 38px;
}

.dateline__date {
    color: var(--ink-faint);
    font-weight: 500;
}

.dateline__right {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.dateline__link {
    color: var(--ink-faint);
    font-weight: 500;
    text-decoration: none;
}

.dateline__link:hover {
    color: var(--oxblood);
}

.socials {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    transition: color 0.18s ease;
}

.socials a:hover {
    color: var(--oxblood);
}

/* Masthead: wordmark left, standing line right, on one baseline. */
.masthead {
    padding: 1.25rem 0 0.95rem;
    border-bottom: 1px solid var(--ink);
}

.masthead__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.wordmark {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4.3vw, 2.85rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.028em;
    text-decoration: none;
    color: var(--ink);
    display: inline-block;
}

.wordmark em {
    font-style: italic;
    color: var(--oxblood);
    letter-spacing: -0.02em;
}

.wordmark img {
    max-height: 50px;
    width: auto;
}

.masthead__stand {
    font-size: 0.9375rem;
    color: var(--ink-faint);
    text-align: right;
    max-width: 34ch;
    line-height: 1.45;
    padding-bottom: 0.35rem;
}

/* Nav: a treated bar, not a default rail. */
.site-nav {
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 60;
}

.site-nav__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 52px;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.nav-list__link {
    display: inline-block;
    padding: 0.55rem 0.7rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color 0.16s ease;
    white-space: nowrap;
}

.nav-list__link:hover {
    color: var(--ink);
}

.nav-list__link.is-current {
    color: var(--oxblood);
    font-weight: 700;
}

/* Sub-menus open on hover and on keyboard focus, so the control works for
   pointer and for tabbing without a script. */
.nav-entry {
    position: relative;
}

.nav-sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-top: 2px solid var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    z-index: 5;
}

.nav-entry:hover .nav-sub,
.nav-entry:focus-within .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-sub__link {
    display: block;
    padding: 0.5rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.nav-sub__link:hover {
    color: var(--oxblood);
    background: var(--paper-deep);
}

.nav-mobile-wordmark {
    display: none;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1;
    color: var(--ink);
    text-decoration: none;
}

.nav-mobile-wordmark em {
    font-style: italic;
    color: var(--oxblood);
}

.nav-mobile-wordmark img {
    max-height: 26px;
    width: auto;
}

/* Nav search: a real field, always visible on wide screens. */
.nav-search {
    flex: none;
    display: flex;
    align-items: center;
    position: relative;
    width: 15rem;
}

.nav-search__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.5rem 2.25rem 0.5rem 0.7rem;
}

.nav-search__input::placeholder {
    color: var(--ink-faint);
}

.nav-search__input:focus {
    outline: none;
    border-color: var(--ink);
    background: var(--paper-card);
}

.nav-search__submit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-faint);
}

.nav-search__submit:hover {
    color: var(--oxblood);
}

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    margin-left: -9px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    flex: none;
}

.nav-toggle__bars {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

.nav-scroll-sentinel {
    height: 1px;
}

/* Compact pass once the reader has moved into the page. */
.site-nav.is-condensed .site-nav__inner {
    min-height: 50px;
}

/* --------------------------------------------------------------------------
   7. Breaking ticker
   -------------------------------------------------------------------------- */

.ticker {
    background: var(--oxblood);
    color: var(--paper);
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.ticker__flag {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    background: var(--oxblood-deep);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--paper);
    line-height: 1.2;
}

.ticker__flag-mark {
    width: 6px;
    height: 6px;
    background: var(--paper);
    flex: none;
    transform: rotate(45deg);
}

.ticker__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Descenders stay clear of the clipped edge, and copy dissolves at both
       ends of the run instead of being sliced by the viewport. */
    padding: 0.45rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 54px, #000 calc(100% - 54px), transparent 100%);
}

.ticker__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-run 42s linear infinite;
    will-change: transform;
}

.ticker__viewport:hover .ticker__track,
.ticker__viewport:focus-within .ticker__track {
    animation-play-state: paused;
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    color: var(--paper);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.5;
    padding-right: 2.75rem;
}

.ticker__item:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@keyframes ticker-run {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   8. Mobile drawer
   -------------------------------------------------------------------------- */

.drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(23, 15, 17, 0.55);
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.drawer-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

.drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(88vw, 360px);
    background: var(--paper);
    z-index: 71;
    transform: translateX(-102%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 24px 0 48px -32px rgba(23, 15, 17, 0.6);
}

.drawer.is-open {
    transform: translateX(0);
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--ink);
    flex: none;
}

.drawer__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.drawer__close {
    width: 40px;
    height: 40px;
    margin-right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-soft);
}

.drawer__close:hover {
    color: var(--oxblood);
}

.drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 0 2rem;
}

.drawer__search {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.drawer__search .nav-search {
    display: flex;
    width: 100%;
}

.drawer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drawer-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

.drawer-nav__link:hover,
.drawer-nav__link.is-current {
    color: var(--oxblood);
    background: var(--paper-card);
}

.drawer-nav__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0.35rem;
    background: var(--paper-card);
    border-bottom: 1px solid var(--rule);
}

.drawer-nav__sub a {
    display: block;
    padding: 0.65rem 1.25rem 0.65rem 2rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.drawer-nav__sub a:hover {
    color: var(--oxblood);
}

.drawer__foot {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem 0;
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
    color: var(--ink-faint);
}

body.is-locked {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. Story primitives
   -------------------------------------------------------------------------- */

.kicker {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--oxblood);
    text-decoration: none;
    letter-spacing: 0.005em;
}

.kicker:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.byline {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-faint);
    line-height: 1.5;
}

.byline a {
    color: var(--ink-soft);
    font-weight: 500;
    text-decoration: none;
}

.byline a:hover {
    color: var(--oxblood);
}

.byline__sep {
    padding: 0 0.4rem;
    color: var(--rule-strong);
}

/* Headlines: the display face carries them, with a shared hover state. */
.hl {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.016em;
    line-height: 1.14;
}

.hl a {
    text-decoration: none;
    color: inherit;
    transition: color 0.16s ease;
}

.hl a:hover {
    color: var(--oxblood);
}

/* Image crops. A crop clips the picture to a ratio; a frame adds the two
   registration brackets, which sit OUTSIDE the crop so nothing is ever shaved. */
.crop {
    display: block;
    overflow: hidden;
    background: var(--paper-deep);
}

.crop--16x9 { aspect-ratio: 16 / 9; }
.crop--3x2 { aspect-ratio: 3 / 2; }
.crop--4x3 { aspect-ratio: 4 / 3; }

/* The lead sits on a wide banner ratio so the fold stays inside one screen. */
.crop--lead { aspect-ratio: 21 / 9; }

@media (max-width: 639px) {
    .crop--lead { aspect-ratio: 16 / 10; }
}

.crop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.frame {
    position: relative;
    display: block;
    margin: 1.05rem 0;
}

.frame > img {
    width: 100%;
    height: auto;
    display: block;
}

.frame::before,
.frame::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 0 solid var(--ink);
    pointer-events: none;
    z-index: 2;
}

.frame::before {
    top: -6px;
    left: -6px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

.frame::after {
    bottom: -6px;
    right: -6px;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
}

/* The lead */
.lead {
    display: block;
    text-decoration: none;
    color: inherit;
}

.lead:hover .crop img {
    transform: scale(1.022);
}

.lead .crop img {
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.lead__title {
    font-size: clamp(1.6rem, 3.3vw, 2.3rem);
    line-height: 1.07;
    letter-spacing: -0.022em;
    margin: 0.5rem 0 0.55rem;
}

.lead__dek {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 56ch;
    margin-bottom: 0.6rem;
}

/* Front-page fold: the lead and the top-stories rail share one baseline, with
   a real gutter between them. `gap` is the shorthand for row AND column, so it
   must carry both values here or it wipes the column gap. */
.fold {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 0;
    padding: 1.5rem 0 0.5rem;
}

@media (min-width: 1024px) {
    .fold {
        grid-template-columns: minmax(0, 7.2fr) minmax(0, 2.8fr);
        gap: 0 3.25rem;
    }
}

.fold__rail {
    border-top: 1px solid var(--ink);
    padding-top: 0.6rem;
}

/* The rail's opening rule and the lead picture's top edge sit on one line. */
.fold .lead > .frame:first-child {
    margin-top: 0;
}

/* The lead column runs the full height of the fold. The rail's height is set
   by how many headlines it carries, so without this the lead ends wherever its
   text happens to stop and strands the difference as a void above the rule.
   The picture takes that slack instead, and both columns close on one line. */
@media (min-width: 1024px) {
    .fold__lead {
        display: flex;
        flex-direction: column;
    }

    /* Every link in the chain from the column down to the picture has to grow,
       or the one that does not simply caps the height of the ones below it. */
    .fold__lead > article,
    .fold__lead .lead,
    .fold__lead .lead > .frame,
    .fold__lead .crop--lead {
        flex: 1 1 auto;
        min-height: 0;
    }

    .fold__lead > article,
    .fold__lead .lead,
    .fold__lead .lead > .frame {
        display: flex;
        flex-direction: column;
    }
}

.fold__rail-head {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 0.35rem;
}

.band {
    padding: 1.45rem 0;
}

/* Top stories rail */
.stories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stories__item + .stories__item {
    border-top: 1px solid var(--rule);
}

.stories__link {
    display: grid;
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.95rem 0;
    text-decoration: none;
    color: inherit;
}

.stories__num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1rem;
    color: var(--oxblood);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.stories__title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.28;
    letter-spacing: -0.012em;
    display: block;
}

.stories__link:hover .stories__title {
    color: var(--oxblood);
}

.stories__meta {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* Numbered index used by most-read lists */
.index-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.index-list__item + .index-list__item {
    border-top: 1px solid var(--rule);
}

.index-list__link {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: baseline;
    padding: 0.8rem 0;
    text-decoration: none;
    color: inherit;
}

.index-list__num {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--oxblood);
    font-variant-numeric: tabular-nums;
}

.index-list__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    display: block;
}

.index-list__link:hover .index-list__title {
    color: var(--oxblood);
}

.index-list__views {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* Story rows: image beside text */
.rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Covers rows the component renders inside a plain list item, and rows that
   are themselves the list item. */
.rows > li + li,
.row-story + .row-story {
    border-top: 1px solid var(--rule);
}

.row-story__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 1.6rem;
    padding: 1.5rem 0;
    text-decoration: none;
    color: inherit;
    align-items: center;
}

.row-story__link--text,
.row-story__link.row-story__link--text {
    grid-template-columns: minmax(0, 1fr);
}

.row-story__media {
    margin: 0;
}

.row-story__link:hover .row-story__media img {
    transform: scale(1.03);
}

.row-story__media img {
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.row-story__title {
    font-size: 1.375rem;
    line-height: 1.2;
    margin: 0.3rem 0 0.5rem;
}

.row-story__link:hover .row-story__title {
    color: var(--oxblood);
}

.row-story__dek {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 0.55rem;
}

/* The picks — a composed band, not a comparison grid */
.picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.1rem;
}

/* Parallel columns share a baseline grid: the byline is anchored to the
   bottom of every pick, so a long headline never shoves it out of step. */
.pick {
    display: flex;
    flex-direction: column;
}

.pick > .lead {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.pick .byline {
    margin-top: auto;
}

.pick__media {
    margin-bottom: 0.9rem;
}

.pick:hover .pick__media img {
    transform: scale(1.03);
}

.pick__media img {
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.pick__title {
    font-size: 1.3125rem;
    line-height: 1.2;
    margin: 0.35rem 0 0.45rem;
}

.pick:hover .pick__title {
    color: var(--oxblood);
}

.pick__dek {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 0.55rem;
}

/* Card: the archive primitive */
.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem 1.7rem;
}

.card {
    display: flex;
    flex-direction: column;
}

/* In the section strips the anchor wraps the heading rather than sitting
   inside it, so the browser's default link underline lands on the headline
   and has to be cleared on the anchor itself. */
.card > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.card__media {
    margin-bottom: 0.85rem;
}

.card:hover .card__media img {
    transform: scale(1.03);
}

.card__media img {
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.card__title {
    font-size: 1.1875rem;
    line-height: 1.22;
    margin: 0.35rem 0 0.45rem;
}

.card:hover .card__title {
    color: var(--oxblood);
}

.card__dek {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 0.55rem;
}

.card__meta {
    margin-top: auto;
    padding-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   Section fronts: how the strips compose. Every strip opens on the same
   ledger head; the body below is set for what the
   section is. The default is the three-card grid (above); the treatments
   that follow are chosen per section by slug in home.blade.php.
   -------------------------------------------------------------------------- */

/* The section front — one lead composed like a page of its own, beside a
   ruled stack that carries the rest of the strip. The stack's items share
   out the lead's height, so the band closes on one line. */
.section-front {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1.9rem;
}

@media (min-width: 1024px) {
    .section-front {
        grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    }
}

.section-front__lead > a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.section-front__media {
    margin-bottom: 0.9rem;
}

.section-front__media img {
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.section-front__lead:hover .section-front__media img {
    transform: scale(1.03);
}

.section-front__title {
    font-size: 1.5rem;
    line-height: 1.18;
    margin: 0.4rem 0 0.5rem;
}

.section-front__lead:hover .section-front__title {
    color: var(--oxblood);
}

.section-front__dek {
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-bottom: 0.6rem;
}

.section-front__stack {
    display: flex;
    flex-direction: column;
}

.stack-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stack-item + .stack-item {
    border-top: 1px solid var(--rule);
}

.stack-item > a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    gap: 1.1rem;
    align-items: start;
    padding: 0.9rem 0;
    text-decoration: none;
    color: inherit;
}

.stack-item__title {
    font-size: 1.0625rem;
    line-height: 1.26;
    margin: 0 0 0.4rem;
}

.stack-item > a:hover .stack-item__title {
    color: var(--oxblood);
}

.stack-item__media img {
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.stack-item > a:hover .stack-item__media img {
    transform: scale(1.03);
}

/* The essays — opinion runs as ruled text columns, the way the op-ed page
   does: no pictures, the argument and the byline carry it. The column
   rules divide real content, the page's own rail idiom turned upright. */
.essays {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
}

@media (min-width: 768px) {
    .essays {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .essay {
        padding-inline: 1.9rem;
    }

    .essay:first-child {
        padding-inline-start: 0;
    }

    .essay:last-child {
        padding-inline-end: 0;
    }

    .essay + .essay {
        border-left: 1px solid var(--rule);
    }
}

.essay > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.essay__title {
    font-size: 1.25rem;
    line-height: 1.22;
    margin: 0 0 0.6rem;
}

.essay > a:hover .essay__title {
    color: var(--oxblood);
}

/* The op-ed drop cap: the excerpt opens on a set piece, ink not accent,
   so the section keeps its restraint. */
.essay__dek {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.essay__dek::first-letter {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.55rem;
    float: left;
    line-height: 0.82;
    padding: 0.14rem 0.5rem 0 0;
    color: var(--ink);
}

.essay__byline {
    margin-top: auto;
    padding-top: 0.9rem;
}

/* The wire — breaking copy reads by recency: the age of each story leads
   the row, the picture follows it, and a rule carries the eye down. */
.wire {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wire__item + .wire__item {
    border-top: 1px solid var(--rule);
}

.wire__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10.5rem;
    gap: 1.5rem;
    align-items: center;
    padding: 1.1rem 0;
    text-decoration: none;
    color: inherit;
}

.wire__time {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--oxblood);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3rem;
}

.wire__title {
    font-size: 1.1875rem;
    line-height: 1.22;
    margin: 0 0 0.4rem;
}

.wire__link:hover .wire__title {
    color: var(--oxblood);
}

.wire__dek {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 0.45rem;
}

.wire__media img {
    transition: transform 0.55s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.wire__link:hover .wire__media img {
    transform: scale(1.03);
}

@media (max-width: 639px) {
    .wire__link {
        grid-template-columns: minmax(0, 1fr) 7.5rem;
        gap: 1rem;
    }
}


/* Empty states */
.empty {
    padding: 2.5rem 0;
    font-size: 1rem;
    color: var(--ink-faint);
    border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   10. Page head (archives)
   -------------------------------------------------------------------------- */

.page-head {
    padding: 2rem 0 1.25rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 2.1rem;
}

.page-head__kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--oxblood);
    margin-bottom: 0.5rem;
}

.page-head__title {
    font-size: clamp(1.75rem, 4vw, 2.55rem);
    letter-spacing: -0.026em;
    line-height: 1.04;
    max-width: 26ch;
}

.page-head__stand {
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 0.85rem;
    max-width: 62ch;
}

.page-head__count {
    font-size: 0.8125rem;
    color: var(--ink-faint);
    margin-top: 0.6rem;
}

/* Filter rail: plain links, current one marked by weight and colour. */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1.35rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 2.1rem;
}

.filters__label {
    font-size: 0.8125rem;
    color: var(--ink-faint);
}

.filters__link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
}

.filters__link:hover {
    color: var(--oxblood);
}

.filters__link.is-current {
    color: var(--ink);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. Article page
   -------------------------------------------------------------------------- */

.progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 80;
    background: transparent;
    pointer-events: none;
}

.progress__bar {
    height: 100%;
    width: 100%;
    background: var(--oxblood);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
}

@keyframes progress-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* The reading page: the story on the left, the desk's rail on the right.
   Below the desktop breakpoint the rail simply follows the story, so the
   reading order stays story first, related second. `gap` is the shorthand
   for row AND column, so it must carry both values or it wipes the gutter. */
.article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 0;
    align-items: start;
}

@media (min-width: 1024px) {
    .article-shell {
        grid-template-columns: minmax(0, 7.5fr) minmax(0, 2.5fr);
        gap: 0 2rem;
    }
}

.article-shell .article-column {
    margin-inline: 0;
    padding-bottom: 0;
    max-width: var(--measure-article);
}

/* Inside the shell the column's own measure governs; the head, the picture,
   the prose and the foot all run the full width of it rather than each
   stopping at the narrower standalone measure. */
.article-shell .article-column .prose,
.article-shell .article-column .article-foot {
    max-width: none;
}

.article-shell__rail {
    margin-top: 1.9rem;
    padding-top: 0.6rem;
}

@media (min-width: 1024px) {
    /* The rail opens on the same line as the story and reads as one page
       with it: no frame of its own, no scroll of its own, and no rule of
       its own — every block in it already heads itself with one. */
    .article-shell__rail {
        margin-top: 1.9rem;
    }
}

/* The reading column. Head, picture, prose and foot share one measure and one
   left edge, so nothing sits ragged against anything else. */
.article-column {
    max-width: var(--measure);
    margin-inline: auto;
    padding-bottom: 1rem;
}

.article-head {
    padding: 1.9rem 0 0;
}

.article-head__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.7rem;
}

.article-head__title {
    font-size: clamp(1.8rem, 3.9vw, 2.85rem);
    line-height: 1.05;
    letter-spacing: -0.026em;
    max-width: 26ch;
}

.article-head__stand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 1.05rem;
    max-width: 62ch;
}

.article-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.875rem;
    color: var(--ink-faint);
}

.article-head__meta strong {
    color: var(--ink);
    font-weight: 500;
}

.meta-link {
    color: inherit;
    text-decoration: none;
}

.meta-link:hover {
    color: var(--oxblood);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article-head__share {
    margin-left: auto;
}

.article-figure {
    margin: 2.1rem 0 2.4rem;
}

.article-figure img {
    width: 100%;
}

/* The piece itself is set in the publication's own voice; the furniture
   around it stays in the neutral workhorse. */
.prose {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.72;
    color: #2a2622;
    max-width: var(--measure);
}

.prose > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 3.5em;
    line-height: 0.82;
    float: left;
    padding: 0.06em 0.1em 0 0;
    color: var(--oxblood);
}

.prose p {
    margin: 0 0 1.35em;
}

.prose h2,
.prose h3,
.prose h4 {
    margin: 2.1em 0 0.6em;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.3rem; }
.prose h4 { font-size: 1.1rem; }

.prose a {
    color: var(--oxblood);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.prose a:hover {
    color: var(--oxblood-deep);
}

.prose ul,
.prose ol {
    margin: 0 0 1.35em;
    padding-left: 1.35em;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose img {
    width: 100%;
    height: auto;
    margin: 1.6em 0;
}

.prose figure {
    margin: 1.9em 0;
}

.prose figcaption {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ink-faint);
    margin-top: 0.6rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--oxblood);
    max-width: 48ch;
}

.prose blockquote {
    margin: 2.1em 0;
    padding: 0 0 0 1.4em;
    border-left: 2px solid var(--oxblood);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -0.012em;
}

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

.prose pre {
    background: var(--inkwell);
    color: var(--on-dark);
    padding: 1.1rem 1.2rem;
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 1.6em 0;
}

/* Mono is for real code, not for the house voice. */
.prose pre,
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

.prose code {
    font-size: 0.875em;
    background: var(--paper-deep);
    padding: 0.12em 0.35em;
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.6em 0;
    font-size: 0.9375rem;
}

.prose th,
.prose td {
    border-bottom: 1px solid var(--rule);
    padding: 0.6rem 0.7rem;
    text-align: left;
}

.prose th {
    border-bottom-color: var(--ink);
    font-weight: 700;
}

/* A section break in the prose gets one bespoke mark, never a bare rule. */
.prose hr {
    border: 0;
    height: 9px;
    width: 9px;
    background: var(--oxblood);
    transform: rotate(45deg);
    margin: 2.4em auto;
}

.article-foot {
    max-width: var(--measure);
    margin-top: 2.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ink);
}

.article-foot__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.2rem;
}

.article-foot__row:last-child {
    margin-bottom: 0;
}

.article-foot__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-faint);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.15rem;
}

.tag-link {
    font-size: 0.875rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.tag-link:hover {
    color: var(--oxblood);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Share: bare marks, no tiles. */
.share {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.share__btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ink-faint);
    transition: color 0.16s ease;
}

.share__btn:hover {
    color: var(--oxblood);
}

/* --------------------------------------------------------------------------
   12. Sidebar blocks
   -------------------------------------------------------------------------- */

.rail-block {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.rail-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.rail-block__head {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    padding-bottom: 0.6rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--ink);
}

/* Briefing: short headlines, no images. */
.briefing {
    list-style: none;
    margin: 0;
    padding: 0;
}

.briefing__item {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.05rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.briefing__item:last-child {
    border-bottom: 0;
}

.briefing__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.05rem;
    width: 5px;
    height: 5px;
    background: var(--oxblood);
    transform: rotate(45deg);
}

.briefing a {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.briefing a:hover {
    color: var(--oxblood);
}

/* --------------------------------------------------------------------------
   13. Forms and buttons
   -------------------------------------------------------------------------- */

.field {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    /* Bootstrap's reboot supplied this by inheritance; state it outright so
       the field heights do not depend on it. */
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: 0;
    padding: 0.7rem 0.85rem;
}

.field::placeholder {
    color: var(--ink-faint);
}

.field:focus {
    outline: none;
    border-color: var(--ink);
    background: #fff;
}

.field--lg {
    font-size: 1.125rem;
    padding: 0.9rem 1rem;
}

/* The native clear affordance ships in the browser's own blue; the field is
   cleared with the keyboard instead so the palette stays disciplined. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
    vertical-align: middle;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
    background: var(--oxblood);
    border-color: var(--oxblood);
    color: var(--paper);
}

.btn--block {
    width: 100%;
}

.btn--quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-strong);
}

.btn--quiet:hover {
    background: transparent;
    color: var(--oxblood);
    border-color: var(--oxblood);
}

/* A plain link with the house arrow. Never paired against a filled button. */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--oxblood);
    text-decoration: none;
}

.arrow-link svg {
    transition: transform 0.22s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.arrow-link:hover svg {
    transform: translate(2px, -2px);
}

.search-band {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.search-band__field {
    flex: 1 1 auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   14. Pagination
   -------------------------------------------------------------------------- */

.pager {
    margin-top: 3rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pager__status {
    font-size: 0.8125rem;
    color: var(--ink-faint);
}

.pager__list {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.pager__link,
.pager__current,
.pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-soft);
}

.pager__link:hover {
    color: var(--oxblood);
}

.pager__current {
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
}

.pager__gap {
    color: var(--rule-strong);
}

.pager__link--off {
    color: var(--rule-strong);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   15. Ad slots
   -------------------------------------------------------------------------- */

.ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;
}

.ad__item {
    max-width: 100%;
    text-align: center;
}

.ad__item img {
    max-width: 100%;
    height: auto;
}

.ad__code {
    max-width: 100%;
    overflow: hidden;
}

.ad--band {
    margin: 2.5rem 0;
    padding: 1.2rem 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   16. Profile
   -------------------------------------------------------------------------- */

.author {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 2rem 0 1.4rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 2.1rem;
}

.author__face {
    flex: none;
    width: 84px;
    height: 84px;
    object-fit: cover;
    background: var(--inkwell);
    color: var(--on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}

.author__name {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.024em;
    line-height: 1.08;
}

.author__bio {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 0.6rem;
    max-width: 60ch;
}

.author__meta {
    font-size: 0.8125rem;
    color: var(--ink-faint);
    margin-top: 0.6rem;
}

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */

.contact-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

@media (min-width: 860px) {
    .contact-sheet {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 3.5rem;
    }
}

.contact-entry {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
}

.contact-entry__label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.7rem;
}

.contact-entry__label svg {
    color: var(--oxblood);
    flex: none;
}

.contact-entry__body {
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.contact-entry__body a {
    color: var(--ink);
    text-decoration: none;
}

.contact-entry__body a:hover {
    color: var(--oxblood);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-entry__body p {
    margin: 0 0 0.35rem;
}

/* --------------------------------------------------------------------------
   18. Page body (CMS pages)
   -------------------------------------------------------------------------- */

.page-body {
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.72;
    color: #2a2622;
    max-width: var(--measure);
    margin-inline: auto;
}

.page-body p {
    margin: 0 0 1.3em;
}

.page-body h2,
.page-body h3 {
    margin: 1.9em 0 0.6em;
}

.page-body h2 { font-size: 1.5rem; }
.page-body h3 { font-size: 1.25rem; }

.page-body a {
    color: var(--oxblood);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.page-body ul,
.page-body ol {
    margin: 0 0 1.3em;
    padding-left: 1.35em;
}

.page-body img {
    width: 100%;
    height: auto;
    margin: 1.5em 0;
}

.page-body blockquote {
    margin: 1.9em 0;
    padding-left: 1.3em;
    border-left: 2px solid var(--oxblood);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.3rem;
}

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.site-foot {
    margin-top: 2.25rem;
    background: var(--inkwell);
    color: var(--on-dark);
    /* A seal-wax keyline so the dark floor starts with intent. */
    border-top: 2px solid var(--oxblood);
}

.site-foot__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
    padding: 2.4rem 0 1.9rem;
}

@media (min-width: 860px) {
    .site-foot__top {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

.site-foot__brand {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.022em;
    color: var(--on-dark);
    line-height: 1.05;
    /* The wordmark is an anchor wrapping display type: Bootstrap's reboot
       paints an underline on links, and the shared .hl guard does not cover
       this location, so clear the decoration on the anchor itself. */
    text-decoration: none;
}

.site-foot__brand em {
    font-style: italic;
    color: #c9797f;
}

.site-foot__brand:hover {
    color: var(--on-dark);
}

.site-foot__line {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--on-dark-soft);
    margin-top: 0.85rem;
    max-width: 34ch;
}

.site-foot__socials {
    margin-top: 1.4rem;
}

.site-foot__socials a {
    width: 2.375rem;
    height: 2.375rem;
    border: 1px solid rgba(240, 238, 235, 0.24);
    border-radius: 50%;
    color: var(--on-dark-soft);
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.site-foot__socials a:hover {
    color: var(--on-dark);
    border-color: rgba(240, 238, 235, 0.55);
    background-color: rgba(240, 238, 235, 0.06);
}

.site-foot__head {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    font-style: italic;
    color: var(--on-dark);
    margin: 0 0 0.9rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(240, 238, 235, 0.2);
}

.site-foot__links {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-foot__links a {
    font-size: 0.9375rem;
    color: var(--on-dark-soft);
    text-decoration: none;
    transition: color 0.18s ease;
}

/* The sections read as a tall single file; lay them in two columns at
   desktop width so the column stays in the same register as the desk. */
.site-foot__links--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.75rem;
}

.site-foot__links a:hover {
    color: var(--on-dark);
}

.site-foot__contact {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.9375rem;
    color: var(--on-dark-soft);
}

.site-foot__contact a {
    color: var(--on-dark-soft);
    text-decoration: none;
}

.site-foot__contact a:hover {
    color: var(--on-dark);
}

.site-foot__address {
    white-space: pre-line;
    line-height: 1.55;
}

.site-foot__bottom {
    border-top: 1px solid rgba(240, 238, 235, 0.18);
    padding: 1.15rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.75rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--on-dark-soft);
}

.site-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

.site-foot__legal a {
    color: var(--on-dark-soft);
    text-decoration: none;
    transition: color 0.18s ease;
}

.site-foot__legal a:hover {
    color: var(--on-dark);
}

/* The maker's credit sits inside the copyright line: same register, with
   the house italic and an underline that only arrives on hover. */
.site-foot__sep {
    margin: 0 0.25rem;
}

.site-foot__credit-link {
    font-style: italic;
    color: var(--on-dark);
    text-decoration: underline;
    text-decoration-color: rgba(240, 238, 235, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-skip-ink: auto;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.site-foot__credit-link:hover {
    color: #fff;
    text-decoration-color: #fff;
}

.site-foot__credit-link:focus-visible {
    outline: 2px solid var(--on-dark);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   20. Auth
   -------------------------------------------------------------------------- */

.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .auth {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    }
}

.auth__aside {
    background: var(--inkwell);
    color: var(--on-dark);
    padding: 3rem var(--gutter) 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
}

@media (min-width: 900px) {
    .auth__aside {
        padding: 3.5rem 3.25rem;
    }
}

.auth__brand {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.026em;
    line-height: 1.02;
    color: var(--on-dark);
    text-decoration: none;
}

.auth__brand em {
    font-style: italic;
    color: #c9797f;
}

.auth__lede {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--on-dark-soft);
    max-width: 30ch;
    margin-top: 1.25rem;
}

.auth__stamp {
    font-size: 0.8125rem;
    color: var(--on-dark-soft);
    padding-top: 1.25rem;
    border-top: 1px solid rgba(240, 238, 235, 0.18);
}

.auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem var(--gutter);
}

.auth__card {
    width: 100%;
    max-width: 27rem;
}

.auth__title {
    font-size: 1.875rem;
    letter-spacing: -0.022em;
    margin-bottom: 0.4rem;
}

.auth__sub {
    font-size: 0.9375rem;
    color: var(--ink-faint);
    line-height: 1.55;
    margin-bottom: 1.9rem;
}

.auth__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-soft);
    margin-bottom: 0.4rem;
}

.auth__group {
    margin-bottom: 1.15rem;
}

.auth__error {
    font-size: 0.8125rem;
    color: var(--oxblood);
    margin-top: 0.4rem;
}

.auth__check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.auth__check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--ink);
}

.auth__alt {
    margin-top: 1.75rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
    font-size: 0.9375rem;
    color: var(--ink-faint);
}

.auth__alt a {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.auth__alt > form {
    display: block;
}

.auth__alt a:hover {
    color: var(--oxblood);
}

.auth__notice {
    padding: 0.8rem 0.95rem;
    border-left: 2px solid var(--oxblood);
    background: var(--paper-deep);
    font-size: 0.9375rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.auth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* A control that must stay a real button but read as a quiet link. */
.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
}

.linkish:hover {
    color: var(--oxblood);
}

/* --------------------------------------------------------------------------
   21. Error pages
   -------------------------------------------------------------------------- */

.oops {
    padding: 3rem 0 4rem;
}

.oops__inner {
    max-width: 40rem;
}

.oops__code {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(3.5rem, 11vw, 7rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--oxblood);
    display: block;
    margin-bottom: 0.5rem;
}

.oops__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.024em;
    margin-bottom: 0.85rem;
}

.oops__text {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 1.9rem;
}

.oops__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.1rem 1.85rem;
}

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */

.stack > * + * {
    margin-top: var(--stack-gap, 1rem);
}

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: 1.5rem !important; }
.mb-2 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 2.5rem !important; }
.mb-3 { margin-bottom: 2.5rem !important; }
.mt-4 { margin-top: 4rem !important; }
.mb-4 { margin-bottom: 4rem !important; }

.muted {
    color: var(--ink-faint);
}

.pre-line {
    white-space: pre-line;
}

.text-center {
    text-align: center;
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .picks,
    .cards {
        gap: 1.8rem 1.6rem;
    }
}

@media (max-width: 1023px) {
    /* The nav bar's inline field goes; the drawer's own field stays. */
    .site-nav .nav-search {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-list {
        display: none;
    }

    .site-nav__inner {
        min-height: 54px;
        justify-content: space-between;
    }

    .nav-mobile-wordmark {
        display: block;
    }

    .picks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 1024px) {
    .nav-mobile-wordmark {
        display: none;
    }
}

@media (max-width: 859px) {
    body {
        font-size: 1.03125rem;
    }

    .masthead {
        padding: 1.4rem 0 1.15rem;
    }

    .masthead__inner {
        gap: 0.9rem;
    }

    .masthead__stand {
        text-align: left;
        max-width: none;
        padding-bottom: 0;
    }

    .dateline__links {
        display: none;
    }

    .row-story__link {
        grid-template-columns: minmax(0, 1fr) 118px;
        gap: 1.15rem;
        padding: 1.25rem 0;
        align-items: start;
    }

    .row-story__title {
        font-size: 1.1875rem;
    }

    .row-story__dek {
        display: none;
    }

    .prose {
        font-size: 1.125rem;
    }
}

@media (max-width: 639px) {
    :root {
        --gutter: 18px;
        --cut: 15px;
    }

    .picks,
    .cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .pick__title {
        font-size: 1.25rem;
    }

    .row-story__link {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 1rem;
    }

    .row-story__title {
        font-size: 1.125rem;
    }

    .lead__title {
        font-size: 1.55rem;
    }

    .lead__dek {
        font-size: 1rem;
    }

    .article-head__title {
        font-size: 1.75rem;
    }

    .article-head__stand {
        font-size: 1.125rem;
    }

    .prose {
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    .prose blockquote {
        font-size: 1.25rem;
    }

    .pager {
        justify-content: center;
    }

    .ad--band {
        margin: 1.75rem 0;
    }
}

@media (max-width: 479px) {
    .row-story__link {
        grid-template-columns: minmax(0, 1fr) 84px;
    }

    .author {
        flex-direction: column;
        gap: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   24. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    /* A scroll-driven animation collapses to its end state here, which would
       park a solid bar across the top of every article. Drop it instead. */
    .progress {
        display: none;
    }

    .lead:hover .lead__frame img,
    .lead:hover .crop img,
    .pick:hover .pick__media img,
    .card:hover .card__media img,
    .row-story__link:hover .row-story__media img {
        transform: none;
    }
}

@media print {
    body::before,
    .progress,
    .ticker,
    .drawer,
    .drawer-scrim,
    .site-nav,
    .dateline,
    .ad,
    .share,
    .pager {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .masthead {
        border-bottom: 1px solid #000;
    }

    .site-foot {
        background: none;
        color: #000;
    }

    a {
        text-decoration: none;
        color: #000;
    }
}