/* Self-hosted for encyclopedia. Regenerate with fetch_fonts.py. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/cY9AfjOCX1hbuyalUrK4397yjA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/1Ptgg87LROyAm3K9-C8QSw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Warm paper, Fraunces display, wide image plates, and black-and-gold bands. */

:root {
    --paper: #f6f1e6;
    --paper-deep: #ece4d4;
    --ink: #1d1814;
    --ink-soft: #5e5347;
    --rule: #d5c8b0;
    --rule-firm: #b6a487;
    --accent: #8a5f00;
    --accent-soft: #f4ead3;
    /* The bright gold is used on black; the deeper value keeps text legible
       against paper. */
    --gold: #f7b001;
    --gold-lift: #ffc93a;
    --gold-ink: #a06c00;
    --black: #0b0b0b;
    --black-soft: #171717;
    --measure: 34rem;
    --wide: 52rem;
    --gutter: clamp(1.25rem, 5vw, 3rem);
    --display: Fraunces, Georgia, "Times New Roman", serif;
    --body: Newsreader, Georgia, "Times New Roman", serif;
    --poster: Anton, "Arial Narrow", Impact, sans-serif;
}

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

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

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.24rem);
    line-height: 1.66;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: var(--ink);
    color: var(--paper);
    padding: 0.6rem 1rem;
}

a {
    color: var(--accent);
    text-underline-offset: 0.16em;
    text-decoration-thickness: from-font;
}

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

/* ---------- masthead ---------- */

.mast {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--black);
    color: #fff;
}

.mast-in {
    max-width: 86rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 4.35rem;
    display: flex;
    align-items: center;
    gap: 1.2rem 1.8rem;
}

.wordmark {
    font-family: var(--poster);
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
}

.nav-go {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.burger {
    display: none;
    margin-left: auto;
    cursor: pointer;
    padding: 0.7rem 0.2rem;
}

.burger span {
    font-family: var(--poster);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: #fff;
}

.mast-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem 1.65rem;
    margin-left: auto;
}

.mast-item {
    position: relative;
}

.mast-item>a,
.mast-item>summary {
    font-family: var(--poster);
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 1.45rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mast-item>summary::-webkit-details-marker {
    display: none;
}

.mast-item.has-sub>summary::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-top: 0.1rem;
}

.mast-item>a:hover,
.mast-item>summary:hover,
.mast-item.is-on>summary,
.mast-item>a[aria-current="page"] {
    color: var(--gold);
}

.submenu {
    display: none;
    position: absolute;
    top: calc(100% - 0.35rem);
    left: 0;
    min-width: 15.5rem;
    margin: 0;
    padding: 0.55rem 0;
    list-style: none;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    z-index: 50;
}

.submenu a {
    display: block;
    font-family: var(--poster);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
    padding: 0.62rem 1.15rem;
}

.submenu a:hover,
.submenu a[aria-current="page"] {
    color: var(--gold);
}

/* Hover, click and keyboard focus all open the panel. Hiding the [open] state
   on pointer devices made clicking a label look like it did nothing, and
   :focus-visible on the summary alone closed the panel on the first Tab into
   it. The panel also has to sit flush against the summary: a gap between them
   falls outside the details element and drops :hover mid-travel. */
.mast-item.has-sub[open]>.submenu,
.mast-item.has-sub:hover>.submenu,
.mast-item.has-sub:focus-within>.submenu {
    display: block;
}

/* Current browsers put everything after the summary inside ::details-content and
   hide it with content-visibility while the element is closed, so showing the
   panel on hover takes more than display: block on the list. Browsers that do
   not know this pseudo-element drop the rule and fall back to click-to-open. */
.mast-item.has-sub:hover::details-content,
.mast-item.has-sub:focus-within::details-content {
    content-visibility: visible;
}

/* The panel is much wider than its label, so a pointer heading for it at a
   shallow angle leaves the label sideways before it arrives and the menu shuts
   under the cursor. This extends the panel's own hover area up across the
   label's row, and it only exists while the panel is showing. */
@media (hover: hover) {
    .submenu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 0.6rem;
    }
}

.mast-mark {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: flex-end;
    background: var(--black);
    color: #fff;
    overflow: hidden;
}

.is-cover .hero {
    min-height: 100svh;
    margin-top: -4.35rem;
}

.has-hero .hero {
    margin-top: -4.35rem;
}

.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.2) 48%, rgba(0, 0, 0, 0.35) 100%);
}

.hero-text {
    position: relative;
    z-index: 1;
    max-width: 54rem;
    padding: 8.5rem var(--gutter) 3.4rem;
}

.hero-kicker {
    font-family: var(--poster);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.7rem;
}

.hero-title {
    font-family: var(--poster);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    text-wrap: balance;
}

.is-cover .hero-title {
    color: var(--gold);
}

.hero-standfirst {
    color: #e8e0d2;
    font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem);
    max-width: 36rem;
    margin: 1rem 0 0;
}

/* ---------- chapter catalog ---------- */

.catalog {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    padding: 0.4rem;
    background: var(--black);
}

.shot {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #171717;
}

.shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.shot:hover img {
    transform: scale(1.06);
}

.shot-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.6rem 0.95rem 0.9rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.shot-no {
    font-family: var(--poster);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--gold);
}

.shot strong {
    font-family: var(--poster);
    font-weight: 400;
    font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.15rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- article shell ---------- */

main {
    margin: 0;
    padding: 0;
}

.piece {
    max-width: var(--wide);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) 0;
}

.is-cover .piece {
    padding-top: clamp(2.2rem, 5vw, 3.2rem);
}

/* Text sits in the narrow measure; plates and grids step out to the wide
   column without leaving the flow. Shared by the header and the body. */
.piece-head,
.prose {
    display: grid;
    grid-template-columns:
        [wide-start] minmax(0, 1fr) [text-start] minmax(0, var(--measure)) [text-end] minmax(0, 1fr) [wide-end];
}

.piece-head>*,
.prose>* {
    grid-column: text;
    min-width: 0;
}

.piece-head>figure,
.prose>figure,
.prose>.grid,
.prose>table,
.prose>.contents {
    grid-column: wide;
}

.kicker {
    font-family: var(--display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.9rem;
}

h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
}

.standfirst {
    font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
    line-height: 1.45;
    color: var(--ink-soft);
    margin: 1rem 0 0;
    text-wrap: pretty;
}

/* ---------- chapter contents ---------- */

.onpage {
    margin: 0 auto 0;
    max-width: var(--measure);
    padding: 1rem 1.25rem 1.1rem;
    background: var(--paper-deep);
    border-left: 3px solid var(--accent);
}

.onpage-label {
    font-family: var(--display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.55rem;
}

.onpage ol {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.94rem;
    line-height: 1.5;
}

.onpage li {
    margin: 0.25rem 0;
}

.onpage a {
    color: var(--ink);
    text-decoration-color: var(--rule-firm);
}

/* ---------- prose ---------- */

.prose {
    padding-top: clamp(1.6rem, 4vw, 2.4rem);
}

.prose p {
    margin: 0 0 1.15em;
    text-wrap: pretty;
}

.is-cover .prose>p:first-of-type::first-letter {
    font-family: var(--display);
    font-weight: 700;
    float: left;
    font-size: 3.6em;
    line-height: 0.78;
    padding: 0.06em 0.09em 0 0;
    color: var(--gold-ink);
}

.prose h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 2.6rem 0 0.8rem;
    scroll-margin-top: 5rem;
}

.prose h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.12rem;
    margin: 1.9rem 0 0.5rem;
    scroll-margin-top: 5rem;
}

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

.prose li {
    margin: 0.35em 0;
}

.prose blockquote {
    margin: 1.8rem 0;
    padding: 0.2rem 0 0.2rem 1.3rem;
    border-left: 3px solid var(--rule-firm);
    font-style: italic;
    color: var(--ink-soft);
}

.prose strong {
    font-weight: 700;
}

/* ---------- plates ---------- */

figure {
    margin: 2.2rem auto;
}

figure img {
    width: 100%;
}

/* Certification marks are marks, not plates. */
.badge {
    width: min(10rem, 40%);
    margin: 1.8rem 0;
}

figcaption {
    font-family: var(--display);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-top: 0.6rem;
    padding-left: 0.1rem;
    border-top: 1px solid var(--rule);
    padding-top: 0.45rem;
}

.piece-head .bleed {
    width: 100%;
}

.piece-head .bleed img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.1rem;
    margin: 2.2rem 0;
}

.grid figure {
    margin: 0;
}

.grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------- index of chapters ---------- */

.contents {
    margin: 2.6rem 0;
    border-top: 2px solid var(--ink);
}

.contents ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: chapter;
}

.contents li {
    counter-increment: chapter;
    border-bottom: 1px solid var(--rule);
    margin: 0;
}

.contents a {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    align-items: baseline;
    padding: 0.9rem 0.4rem;
    text-decoration: none;
    color: var(--ink);
}

.contents a::before {
    content: counter(chapter, decimal-leading-zero);
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--gold-ink);
}

.contents a>span {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.12rem;
}

.contents a:hover {
    background: var(--paper-deep);
}

.contents a:hover>span {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

/* ---------- pull quote / notes ---------- */

.note {
    margin: 2rem 0;
    padding: 1.15rem 1.35rem;
    background: var(--accent-soft);
    border: 1px solid var(--rule-firm);
    font-size: 0.96rem;
    line-height: 1.55;
}

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

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

/* ---------- tables ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: 0.94rem;
    font-variant-numeric: tabular-nums;
}

caption {
    caption-side: top;
    text-align: left;
    font-family: var(--display);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: 0.55rem;
}

th {
    font-family: var(--display);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 2px solid var(--ink);
    padding: 0.5rem 0.7rem 0.5rem 0;
    vertical-align: bottom;
}

td {
    border-bottom: 1px solid var(--rule);
    padding: 0.62rem 0.7rem 0.62rem 0;
    vertical-align: top;
}

tbody tr:hover {
    background: var(--paper-deep);
}

/* ---------- faq ---------- */

.faq {
    max-width: var(--measure);
    margin: 3.2rem auto 0;
    padding-top: 1.6rem;
    border-top: 2px solid var(--ink);
}

.faq h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0 0 1.2rem;
}

.faq dl {
    margin: 0;
}

.faq-row {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--rule);
}

.faq dt {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}

.faq dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.98rem;
}

/* ---------- page turn ---------- */

.turn {
    max-width: var(--wide);
    margin: 3.5rem auto 0;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1px;
    background: transparent;
    border: 0;
}

.turn a {
    background: var(--paper);
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: var(--ink);
    display: block;
    border: 1px solid var(--rule-firm);
}

.turn a:hover {
    background: var(--paper-deep);
}

.turn span {
    display: block;
    font-family: var(--display);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

.turn strong {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
}

.turn-next {
    text-align: right;
}

/* ---------- footer ---------- */

.foot {
    margin-top: 0;
    background: var(--black);
    color: #cfc6b6;
}

.foot-in {
    max-width: 86rem;
    margin: 0 auto;
    padding: 2.2rem 1.25rem 3.2rem;
}

.foot-name {
    font-family: var(--poster);
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.7rem;
}

.foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    font-family: var(--poster);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.foot-nav a {
    color: #fff;
    text-decoration: none;
}

.foot-nav a:hover {
    color: var(--gold);
}

.foot-fine {
    color: #8a8276;
    font-size: 0.78rem;
    margin: 0.9rem 0 0;
}

/* ---------- bands, posters, stats, plates ---------- */

body {
    /* Bands bleed their background past the column with an over-wide pseudo
       element, which needs a clip that is not a scroll container, or the sticky
       masthead stops sticking. */
    overflow-x: clip;
}

.band {
    position: relative;
    isolation: isolate;
    margin: clamp(2.4rem, 5vw, 3.6rem) 0;
    padding: clamp(2.4rem, 5vw, 3.8rem) 0;
}

.band::before {
    content: "";
    position: absolute;
    inset: 0 -100vw;
    z-index: -1;
    background: #fffdf8;
    border-block: 1px solid var(--rule);
}

.prose>.band,
.prose>.split,
.prose>.stats,
.prose>.cards,
.prose>.plate,
.prose>.press,
.piece-head>.band {
    grid-column: wide;
}

.band.dark {
    color: #efe7d9;
}

.band.dark::before {
    background: var(--black);
    border-block: 0;
    border-top: 4px solid var(--gold);
}

.band.dark a {
    color: var(--gold);
}

.band.dark strong {
    color: #fff;
}

.band> :first-child {
    margin-top: 0;
}

.band> :last-child {
    margin-bottom: 0;
}

.eyebrow {
    font-family: var(--poster);
    font-size: 0.8rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-ink);
    margin: 0 0 0.75rem;
}

.dark .eyebrow {
    color: var(--gold);
}

/* The poster heading: heavy condensed caps, with a gold clause inside it. */
.display {
    font-family: var(--poster);
    font-weight: 400;
    font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.5rem);
    line-height: 0.98;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

.prose h2.display,
.prose h3.display {
    font-family: var(--poster);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.005em;
}

.display b,
.display strong {
    color: var(--gold-ink);
    font-weight: inherit;
}

.dark .display {
    color: #fff;
}

.dark .display b,
.dark .display strong {
    color: var(--gold);
}

.lede {
    font-size: 1.06rem;
    max-width: 40rem;
    margin: 0 0 1.4rem;
}

/* ---------- stat rows ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1.6rem 1.6rem;
    margin: 2.4rem 0;
}

.stat {
    border-top: 4px solid var(--gold);
    padding-top: 0.85rem;
}

.stat b,
.stat strong {
    display: block;
    font-family: var(--poster);
    font-weight: 400;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--ink);
}

/* Needs both halves spelled out: `.band.dark strong` is more specific than
   `.stat strong` and would otherwise paint the number white. */
.dark .stat b,
.dark .stat strong {
    color: var(--gold);
}

.stat span {
    display: block;
    font-family: var(--poster);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 0.55rem;
}

.dark .stat span {
    color: #bdb4a5;
}

.stat p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0.6rem 0 0;
}

.dark .stat p {
    color: #bdb4a5;
}

/* ---------- diagram plates ---------- */

/* Framed diagrams sit on a light panel rather than bleeding like photographs. */
.plate {
    margin: 2.6rem 0;
    padding: clamp(0.9rem, 2.5vw, 1.6rem);
    background: #fffdf8;
    border: 1px solid var(--rule);
    box-shadow: 0 1px 3px rgba(29, 24, 20, 0.08);
}

.dark .plate,
.band.dark .plate {
    background: #131313;
    border-color: #2c2c2c;
    box-shadow: none;
}

.plate img {
    width: 100%;
}

.plate figcaption {
    border: 0;
    padding: 0.85rem 0.2rem 0.1rem;
    margin: 0;
    font-family: var(--body);
    font-style: italic;
    font-size: 0.86rem;
    text-align: center;
    color: var(--ink-soft);
}

.dark .plate figcaption {
    color: #a49b8d;
}

/* A portrait diagram would otherwise run past a full screen height. */
.plate.tall img {
    max-height: 46rem;
    width: auto;
    margin: 0 auto;
}

/* ---------- split: artwork one side, argument the other ---------- */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(1.4rem, 4vw, 2.8rem);
    align-items: center;
    margin: 2.4rem 0;
}

.split figure,
.split> :first-child>figure {
    margin: 0;
}

.split img {
    width: 100%;
}

/* ---------- pill button ---------- */

.pill {
    display: inline-block;
    font-family: var(--poster);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--black);
    text-decoration: none;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
}

.pill:hover {
    background: var(--gold-lift);
}

.band.dark .pill {
    color: var(--black);
}

/* ---------- press row ---------- */

.press {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.4rem, 4vw, 3rem);
    margin: 2rem 0;
}

.press img {
    height: 2.4rem;
    width: auto;
}

.dark .press img {
    filter: grayscale(1) brightness(1.9);
    opacity: 0.9;
}

/* ---------- card row ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.2rem, 3vw, 2.2rem);
    margin: 2.4rem 0;
}

.card {
    border-top: 4px solid var(--ink);
}

.card:nth-child(even) {
    border-top-color: var(--gold);
}

.dark .card {
    border-top-color: var(--gold);
}

.card h3 {
    font-family: var(--poster);
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0.9rem 0 0.5rem;
}

.card p {
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
}

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

/* ---------- article-shell accents ---------- */

.kicker {
    font-family: var(--poster);
    color: var(--gold-ink);
    letter-spacing: 0.24em;
}

.mast-nav a[aria-current="page"] {
    color: var(--gold);
}

.onpage {
    border-left-color: var(--gold);
}

.faq {
    max-width: var(--wide);
    border-top: 0;
    padding-top: 0;
}

.faq h2 {
    font-family: var(--poster);
    font-weight: 400;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    background: var(--black);
    color: #fff;
    padding: 0.85rem 1rem;
    margin: 0 0 1.6rem;
}

.faq dt {
    font-family: var(--poster);
    font-weight: 400;
    font-size: 1.06rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.turn span {
    font-family: var(--poster);
    color: var(--gold-ink);
}

@media (max-width: 70rem) {
    .burger {
        display: block;
    }

    .mast-mark {
        display: none;
    }

    .mast-nav {
        display: none;
        position: absolute;
        top: 4.35rem;
        left: 0;
        right: 0;
        background: var(--black);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0.4rem 1.25rem 1.5rem;
        max-height: calc(100svh - 4.35rem);
        overflow: auto;
        border-top: 1px solid #222;
        z-index: 45;
    }

    .nav-go:checked~.mast-nav {
        display: flex;
    }

    .mast-item>a,
    .mast-item>summary {
        padding: 0.8rem 0;
        width: 100%;
    }

    .submenu {
        position: static;
        min-width: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0.45rem 0.85rem;
    }

    .submenu a {
        color: #d4cbbd;
        padding: 0.45rem 0;
    }

    .catalog {
        grid-template-columns: 1fr 1fr;
    }

    .hero-text {
        padding: 7.2rem var(--gutter) 2.4rem;
    }
}

@media (max-width: 34rem) {
    .turn-next {
        text-align: left;
    }

    .catalog {
        grid-template-columns: 1fr;
    }
}

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

/* The logo row arrives from markdown as one paragraph of images, so the flex
   container has to be the paragraph as well as the wrapper. */
.press p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: inherit;
    margin: 0;
}

/* Every press logo is a 100px square tile, so the row is a row of badges
   rather than a row of wordmarks. */
.press img {
    height: 3.4rem;
    width: 3.4rem;
    border-radius: 6px;
}

.dark .press img {
    filter: none;
    opacity: 1;
}

/* The number and its label share one paragraph; only the sentence under them
   wants the caption margin. */
.stat>p:first-child {
    margin: 0;
}