/* ── Override base main width ─────────────────────────────────── */
main {
    max-width: 1080px !important;
    width: 92% !important;
    margin-top: 32px !important;
    padding-bottom: 80px !important;
}

/* ═══════════════════════════════════════════════════════════════════
 D ESIG*N TOKENS
 ═══════════════════════════════════════════════════════════════════ */
:root {

    /* ── Colors — Masthead ─────────────────────────────────────────────── */

    --masthead-eyebrow-color:      rgba(21,21,21,0.75); /* "Cinemaths — Essays & Extended Observations" line above the title */
    --rule-banner-top-color:       rgba(21,21,21,0.9);  /* Top bar of the 3-bar rule banner (both normal and "--close" variants) */
    --rule-banner-mid-color:       transparent;          /* Middle bar of the 3-bar rule banner (currently invisible on purpose) */
    --rule-banner-bottom-color:    rgba(21,21,21,0.5);  /* Bottom bar of the 3-bar rule banner (thin hairline under top bar) */
    --masthead-title-color:        #151515;              /* "The Commonplace" main title text */
    --masthead-subtitle-color:     rgba(21,21,21,0.75);  /* "Being a collection of essays..." subtitle line */
    --masthead-orn-rule-color:     rgba(21,21,21,0.25); /* The two short horizontal lines flanking the ✦ · ✦ · ✦ ornament */
    --masthead-orn-text-color:     rgba(21,21,21,0.35); /* The ✦ · ✦ · ✦ ornament glyphs themselves */

    /* ── Colors — Shared Atoms (badges, meta, links used across sections) ─ */

    --badge-feature-color:         rgba(21,21,21,0.88); /* "Feature" badge text (used in masthead-adjacent lead + verdict) */
    --badge-dispatch-color:        #553c24;
    --badge-digest-color:          rgba(21,21,21,0.75); /* "Digest" badge text (tertiary cards + digest bulletin) */
    --datestamp-color:             rgba(21,21,21,0.75); /* Date text next to badges (e.g. "12 March 2025") */
    --readtime-color:              rgba(21,21,21,0.75); /* "~18 min." read-time label wherever it appears */
    --headline-shared-color:       #151515;              /* Base headline color, shared by lead/secondary/tertiary <h2>/<h3> via .cp-headline */
    --excerpt-shared-color:        #151515;              /* Base excerpt/summary paragraph color, shared by lead + secondary via .cp-excerpt */
    --verdict-divider-color:       rgba(21,21,21,0.13); /* Thin top border above the "Read ☞" verdict row (lead/secondary/tertiary) */
    --vsep-color:                  rgba(21,21,21,0.28); /* Small vertical divider dot/line between badge and read-time */
    --read-link-color:             rgba(21,21,21,0.68); /* "Read ☞" call-to-action link text */
    --section-banner-border-color: rgba(21,21,21,0.38); /* Top/bottom border framing each section banner (Dispatches / Digests / Register) */
    --section-banner-rule-color:   rgba(21,21,21,0.18); /* The horizontal rule segments flanking a section banner's label */
    --section-banner-text-color:   rgba(21,21,21,0.9);  /* The label text inside a section banner, e.g. "Dispatches — Considered Reports..." */
    --empty-state-color:           rgba(21,21,21,0.7); /* "The Commonplace has not yet received its first submission..." message */

    /* ── Colors — I. Lead / Feature ────────────────────────────────────── */

    --lead-outer-border-color:     rgba(21,21,21,0.45); /* Double border under the whole Lead block, separating it from Dispatches */
    --lead-accent-border-color:    rgba(21,21,21,0.28); /* Vertical divider between the accent/digest sidebar and the lead body */
    --lead-accent-bg:              rgba(21,21,21,0.025);/* Very faint background tint behind the lead's left accent column */
    --lead-vert-text-color:        rgba(21,21,21,0.7); /* Rotated vertical "Latest Feature — Extended Essay" sidebar label */
    --lead-orn-color:              rgba(21,21,21,0.2);  /* Column of ✦ · ✦ · ✦ ornament glyphs in the lead accent (when no digest bulletin present) */
    --lead-numeral-color:          rgba(21,21,21,0.07); /* Giant faint "I" numeral watermark in the lead accent */
    --lead-digest-col-border:      rgba(21,21,21,0.28); /* Vertical divider on the right of the embedded digest-bulletin sidebar card */
    --lead-digest-title-link-color: #151515;             /* Title link text inside the embedded digest-bulletin card */
    --lead-digest-excerpt-color:   rgba(21,21,21,0.85); /* Excerpt/summary text inside the embedded digest-bulletin card */
    --lead-digest-footer-border:   rgba(21,21,21,0.13); /* Top border above the digest-bulletin card's read-time/"Read Digest" footer */
    --lead-kicker-border:          rgba(21,21,21,0.13); /* Bottom border under the lead's kicker row (label + date + read time) */
    --lead-kicker-text-color:      rgba(21,21,21,0.75); /* "Latest Feature — Extended Essay" kicker label above the lead headline */
    --lead-kicker-rule-color:      rgba(21,21,21,0.14); /* Short horizontal rule next to the lead kicker label */
    --lead-excerpt-rule-color:     rgba(21,21,21,0.13); /* Vertical rule between the two text columns of the lead excerpt */
    --lead-dropcap-color:          #151515;              /* Oversized drop-cap first letter of the lead excerpt */

    /* ── Colors — II. Secondary / Dispatches ───────────────────────────── */

    --secondary-outer-border-color: rgba(21,21,21,0.28); /* Bottom border under the whole two-up Dispatches row */
    --secondary-item-border-color:  rgba(21,21,21,0.28); /* Vertical divider between the two dispatch items */

    /* ── Colors — III. Tertiary / Digests ──────────────────────────────── */

    --tertiary-outer-border-color: rgba(21,21,21,0.28); /* Bottom border under the whole three-up Digests row */
    --tertiary-item-border-color:  rgba(21,21,21,0.28); /* Vertical divider between digest cards */
    --tertiary-numeral-color:      rgba(21,21,21,0.055);/* Giant faint roman-numeral watermark (I/II/III) behind each digest card */
    --tertiary-excerpt-color:      rgba(21,21,21,0.8);  /* Excerpt/summary text inside each digest card */
    --tertiary-verdict-border:     rgba(21,21,21,0.13); /* Top border above each digest card's "Read ☞" row */

    /* ── Colors — IV. Register (chronological list) ────────────────────── */

    --register-column-rule-color:  rgba(21,21,21,0.28); /* Vertical rule between the Register's two text columns */
    --register-outer-border-color: rgba(21,21,21,0.28); /* Bottom border under the whole Register block */
    --register-entry-border-color: rgba(21,21,21,0.13); /* Bottom border under each individual Register row */
    --register-entry-hover-bg:     rgba(21,21,21,0.025);/* Background tint when hovering a Register row */
    --register-date-color:         rgba(21,21,21,0.75); /* Small date text in each Register row */
    --register-title-color:        #151515;              /* Title link text in each Register row */
    --register-rt-color:           rgba(21,21,21,0.7);  /* Read-time text in each Register row */
    --register-linkcol-border:     rgba(21,21,21,0.13); /* Left border separating the "☞" link column from the rest of the row */
    --register-link-color:         rgba(21,21,21,0.68);  /* The "☞" read-link glyph in each Register row */

    /* ── Colors — Coda (footer) ────────────────────────────────────────── */

    --coda-orn-color:              rgba(21,21,21,0.22); /* "✦ ✦ ✦" ornament above the footer credit line */
    --coda-text-color:             rgba(21,21,21,0.68); /* "— Written by Herman Yersin —" credit line */


    /* ── Fonts — Masthead ───────────────────────────────────────────────── */

    --masthead-eyebrow-font:  'goldentype-sc-original', serif; /* Font for the eyebrow line above the title */
    --masthead-title-font:    'globe', 'playfair-display', serif; /* Font for "The Commonplace" main title */
    --masthead-subtitle-font: 'im-fell-english', Georgia, serif; /* Font for the italic subtitle line under the title */
    --masthead-orn-text-font: 'goldentype-sc-original', serif; /* Font for the ✦ · ✦ · ✦ ornament glyphs */

    /* ── Fonts — Shared Atoms ───────────────────────────────────────────── */

    --badge-font:              'goldentype-sc-original', serif; /* Font for all badge labels: Feature / Dispatch / Digest */
    --datestamp-font:          'goldentype-sc-original', serif; /* Font for datestamp text wherever it appears */
    --readtime-font:           'im-fell-english', Georgia, serif; /* Font for "~18 min." read-time labels */
    --headline-shared-font:    'globe', 'playfair-display', serif; /* Base headline font shared across lead/secondary/tertiary via .cp-headline */
    --excerpt-shared-font:     'century731', 'playfair-display', Georgia, serif; /* Base excerpt/body font shared via .cp-excerpt */
    --read-link-font:          'goldentype-black', Georgia, serif; /* Font for the "Read ☞" call-to-action links */
    --section-banner-text-font: 'goldentype-original', serif; /* Font for section banner labels (Dispatches / Digests / Register) */
    --empty-state-font:        'im-fell-english', Georgia, serif; /* Font for the "no submissions yet" empty-state message */

    /* ── Fonts — I. Lead / Feature ──────────────────────────────────────── */

    --lead-vert-text-font:     'century731', serif; /* Font for the rotated vertical sidebar label in the lead accent */
    --lead-orn-font:           'century731', serif; /* Font for the ✦ · ✦ · ✦ ornament column in the lead accent */
    --lead-numeral-font:       'im-fell-english', Georgia, serif; /* Font for the giant "I" numeral watermark in the lead accent */
    --lead-digest-title-font:  'globe', 'playfair-display', serif; /* Font for the title inside the embedded digest-bulletin card */
    --lead-digest-excerpt-font: 'im-fell-english', Georgia, serif; /* Font for the excerpt inside the embedded digest-bulletin card */
    --lead-kicker-text-font:   'goldentype-sc-original', serif; /* Font for the kicker label above the lead headline */
    --lead-dropcap-font:       'globe', 'playfair-display', serif; /* Font for the oversized drop-cap first letter of the lead excerpt */

    /* ── Fonts — III. Tertiary / Digests ────────────────────────────────── */

    --tertiary-numeral-font:   'im-fell-english', Georgia, serif; /* Font for the roman-numeral watermark behind each digest card */
    --tertiary-excerpt-font:   'im-fell-english', Georgia, serif; /* Font for the excerpt text inside each digest card */

    /* ── Fonts — IV. Register ───────────────────────────────────────────── */

    --register-date-font:      'goldentype-sc-original', serif; /* Font for the date text in each Register row */
    --register-title-font:     'globe', 'playfair-display', serif; /* Font for the title link in each Register row */
    --register-rt-font:        'im-fell-english', Georgia, serif; /* Font for the read-time text in each Register row */
    --register-link-font:      'century731', 'playfair-display', Georgia, serif; /* Font for the "☞" read-link glyph in each Register row */

    /* ── Fonts — Coda ───────────────────────────────────────────────────── */

    --coda-orn-font:           'century731', serif; /* Font for the "✦ ✦ ✦" ornament in the footer */
    --coda-text-font:          'silentina-film', serif; /* Font for the "— Written by Herman Yersin —" credit line */

}


/* ═══════════════════════════════════════════════════════════════════
 M ASTH*EAD
 ═══════════════════════════════════════════════════════════════════ */

.cp-masthead {
    text-align: center;
    padding-top: 1.8rem;
}
.cp-eyebrow {
    display: block;
    font-family: var(--masthead-eyebrow-font);
    font-size: 0.58rem;
    letter-spacing: 0.49em;
    text-transform: lowercase;
    color: var(--masthead-eyebrow-color);
    margin-bottom: 1rem;
}
.cp-rule-banner { display: grid; grid-template-rows: 4px 3px 1px; gap: 2px; }
.cp-rule-banner .rb-t { background: var(--rule-banner-top-color); height: 4px; }
.cp-rule-banner .rb-m { background: var(--rule-banner-mid-color); height: 3px; }
.cp-rule-banner .rb-b { background: var(--rule-banner-bottom-color); height: 1px; }
.cp-rule-banner--close .rb-t { height: 1px; }
.cp-rule-banner--close .rb-b { height: 4px; }
.cp-title {
    font-family: var(--masthead-title-font);
    font-size: clamp(3.4rem, 7.2vw, 5.8rem);
    font-weight: normal;
    letter-spacing: 0.02em;
    line-height: 0.88;
    color: var(--masthead-title-color);
    margin: 0;
    padding: 1.15rem 0 0.75rem;
    text-transform: uppercase;
}
.cp-subtitle {
    font-family: var(--masthead-subtitle-font);
    font-style: italic;
    font-size: 0.92rem;
    letter-spacing: 0.05em;
    color: var(--masthead-subtitle-color);
    margin-bottom: 1rem;
}
.cp-orn { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0; }
.cp-orn-rule { flex: 1; max-width: 260px; height: 1px; background: var(--masthead-orn-rule-color); }
.cp-orn-text { font-family: var(--masthead-orn-text-font); font-size: 0.48rem; letter-spacing: 0.35em; color: var(--masthead-orn-text-color); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
 S HARE*D ATOMS
 ═══════════════════════════════════════════════════════════════════ */

.cp-badge {
    display: inline-block;
    font-family: var(--badge-font);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: lowercase;
    white-space: nowrap;
    line-height: 1;
}
.cp-badge--feature  { background: none; color: var(--badge-feature-color); padding: 3px 7px; }
.cp-badge--dispatch { color: var(--badge-dispatch-color); padding: 3px 7px; }
.cp-badge--digest   { color: var(--badge-digest-color); letter-spacing: 0.32em; }

.cp-datestamp { font-family: var(--datestamp-font); font-size: 0.6rem; letter-spacing: 0.35em; text-transform: lowercase; color: var(--datestamp-color); }
.cp-readtime  { font-family: var(--readtime-font); font-style: italic; font-size: 0.7rem; color: var(--readtime-color); }

.cp-headline { font-family: var(--headline-shared-font); font-weight: normal; line-height: 0.97; letter-spacing: 0.01em; color: var(--headline-shared-color); margin: 0; }
.cp-headline a { color: inherit; text-decoration: none; background: none; }
.cp-headline a:hover { text-decoration: underline; text-underline-offset: 4px; background: none; }

.cp-excerpt { font-family: var(--excerpt-shared-font); font-size: 0.92rem; line-height: 1.68; color: var(--excerpt-shared-color); }

.cp-verdict { display: flex; align-items: center; gap: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--verdict-divider-color); margin-top: auto; }
.cp-vsep { width: 1px; height: 14px; background: var(--vsep-color); flex-shrink: 0; }
.cp-read { font-family: var(--read-link-font); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--read-link-color); text-decoration: none; background: none; transition: opacity 0.14s; }
.cp-read:hover { color: #151515; text-decoration: underline; text-underline-offset: 2px; background: none; }

.cp-section-banner { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0; border-top: 1px solid var(--section-banner-border-color); border-bottom: 1px solid var(--section-banner-border-color); }
.cp-section-banner__rule { flex: 1; height: 1px; background: var(--section-banner-rule-color); }
.cp-section-banner__text { font-family: var(--section-banner-text-font); font-size: 0.42rem; letter-spacing: 0.58em; text-transform: uppercase; color: var(--section-banner-text-color); white-space: nowrap; padding: 0 0.5rem; }

.cp-empty { text-align: center; padding: 5rem 0; font-family: var(--empty-state-font); font-style: italic; font-size: 1.05rem; color: var(--empty-state-color); }

/* ═══════════════════════════════════════════════════════════════════
 I .  L*EAD  (Feature)
 ═══════════════════════════════════════════════════════════════════ */

.cp-lead { display: grid; grid-template-columns: 200px 1fr; border-bottom: 3px double var(--lead-outer-border-color); min-height: 360px; }
.cp-lead__accent { border-right: 1px solid var(--lead-accent-border-color); padding: 2.2rem 1.8rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0; background: var(--lead-accent-bg); }
.cp-lead__accent-top { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.cp-lead__vert { writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); font-family: var(--lead-vert-text-font); font-size: 0.36rem; letter-spacing: 0.52em; text-transform: uppercase; color: var(--lead-vert-text-color); user-select: none; flex: 1; display: flex; align-items: center; margin-top: 1.4rem; }
.cp-lead__orn { font-family: var(--lead-orn-font); font-size: 0.5rem; letter-spacing: 0.12em; color: var(--lead-orn-color); text-align: center; line-height: 2.2; }
.cp-lead__numeral { font-family: var(--lead-numeral-font); font-style: italic; font-size: 6rem; line-height: 1; color: var(--lead-numeral-color); user-select: none; align-self: flex-end; margin-top: auto; }
.cp-lead__digest-col {
    border-right: 1px solid var(--lead-digest-col-border);
    padding: 2.4rem 1.8rem 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.cp-lead__digest-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cp-lead__digest-title {
    font-family: var(--lead-digest-title-font);
    font-size: 1.15rem;
    line-height: 1.1;
    font-weight: normal;
    margin: 0;
}
.cp-lead__digest-title a {
    color: var(--lead-digest-title-link-color);
    text-decoration: none;
}
.cp-lead__digest-title a:hover {
    text-decoration: underline;
}
.cp-lead__digest-excerpt {
    font-family: var(--lead-digest-excerpt-font);
    font-style: italic;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--lead-digest-excerpt-color);
    margin: 0;
    flex: 1;
}
.cp-lead__digest-footer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--lead-digest-footer-border);
}
.cp-lead__digest-footer .cp-read {
    font-size: 0.58rem;
}
.cp-lead__body { padding: 2.4rem 0 2rem 2.6rem; display: flex; flex-direction: column; gap: 0; }
.cp-lead__kicker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--lead-kicker-border); }
.cp-lead__kicker-text { font-family: var(--lead-kicker-text-font); font-size: 0.6rem; letter-spacing: 0.45em; text-transform: lowercase; color: var(--lead-kicker-text-color); white-space: nowrap; }
.cp-lead__kicker-rule { flex: 1; height: 1px; background: var(--lead-kicker-rule-color); }
.cp-lead__headline { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 0.7rem; line-height: 0.96; }
.cp-lead__excerpt { flex: 1; columns: 2; column-gap: 2rem; column-rule: 1px solid var(--lead-excerpt-rule-color); margin-bottom: 0; }
.cp-lead__excerpt::first-letter { font-family: var(--lead-dropcap-font); font-size: 3.8rem; line-height: 0.76; float: left; margin-right: 0.1em; margin-top: 0.07em; color: var(--lead-dropcap-color); font-weight: normal; }
.cp-lead__verdict { margin-top: 1.4rem; clear: both; }

/* ═══════════════════════════════════════════════════════════════════
 I I.  *SECONDARY PAIR  (Dispatches)
 ═══════════════════════════════════════════════════════════════════ */

.cp-secondary { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--secondary-outer-border-color); }
.cp-secondary__item { padding: 1.8rem 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 0; border-right: 1px solid var(--secondary-item-border-color); }
.cp-secondary__item:last-child { border-right: none; }
.cp-secondary__meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.cp-secondary__headline { font-size: clamp(1.25rem, 2.2vw, 1.85rem); margin-bottom: 0.85rem; }
.cp-secondary__excerpt { flex: 1; font-size: 0.88rem; line-height: 1.62; margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
 I II. * TERTIARY ROW  (Digests)
 ═══════════════════════════════════════════════════════════════════ */

.cp-tertiary { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--tertiary-outer-border-color); }
.cp-tertiary__item { padding: 1.5rem 1.5rem 1.4rem; border-right: 1px solid var(--tertiary-item-border-color); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.cp-tertiary__item:last-child { border-right: none; }
.cp-tertiary__numeral { font-family: var(--tertiary-numeral-font); font-style: italic; font-size: 5.5rem; line-height: 1; color: var(--tertiary-numeral-color); user-select: none; position: absolute; bottom: 0.5rem; right: 0.8rem; pointer-events: none; }
.cp-tertiary__meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; }
.cp-tertiary__headline { font-size: clamp(1rem, 1.6vw, 1.28rem); margin-bottom: 0.65rem; }
.cp-tertiary__excerpt { font-family: var(--tertiary-excerpt-font); font-style: italic; font-size: 0.84rem; line-height: 1.58; color: var(--tertiary-excerpt-color); flex: 1; }
.cp-tertiary__verdict { display: flex; align-items: center; gap: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--tertiary-verdict-border); margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════
 I V.  *REGISTER
 ═══════════════════════════════════════════════════════════════════ */

.cp-register { column-count: 2; column-gap: 0; column-rule: 1px solid var(--register-column-rule-color); border-bottom: 1px solid var(--register-outer-border-color); }
.cp-register__entry { display: flex; align-items: center; gap: 0.7rem; padding: 0.58rem 0.8rem; border-bottom: 1px solid var(--register-entry-border-color); break-inside: avoid; -webkit-column-break-inside: avoid; transition: background 0.12s; }
.cp-register__entry:hover { background: var(--register-entry-hover-bg); }
.cp-register__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cp-register__date { font-family: var(--register-date-font); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: lowercase; color: var(--register-date-color); white-space: nowrap; }
.cp-register__title { font-family: var(--register-title-font); font-size: 0.88rem; font-weight: normal; line-height: 1.12; color: var(--register-title-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-register__title a { text-decoration: none; background: none; color: inherit; }
.cp-register__title a:hover { text-decoration: underline; background: none; }
.cp-register__rt { font-family: var(--register-rt-font); font-style: italic; font-size: 0.6rem; color: var(--register-rt-color); white-space: nowrap; flex-shrink: 0; }
.cp-register__link-col { flex-shrink: 0; border-left: 1px solid var(--register-linkcol-border); display: flex; align-items: center; justify-content: center; padding: 0 0.55rem; }
.cp-register__link { font-family: var(--register-link-font); font-size: 0.78rem; color: var(--register-link-color); text-decoration: none; background: none; transition: opacity 0.14s; }
.cp-register__link:hover { color: rgba(21,21,21,0.75); background: none; }

/* ═══════════════════════════════════════════════════════════════════
 C ODA *
 ═══════════════════════════════════════════════════════════════════ */

.cp-coda { padding: 2rem 0 0.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.cp-coda__orn { font-family: var(--coda-orn-font); font-size: 0.7rem; letter-spacing: 0.6em; color: var(--coda-orn-color); }
.cp-coda__text { font-family: var(--coda-text-font); font-size: 0.41rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--coda-text-color); }

/* ═══════════════════════════════════════════════════════════════════
 R ESPO*NSIVE
 ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
 R ESPO*NSIVE DESIGN (Breakpoint: 640px)
 ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* I. Masthead adjustments */
    .cp-masthead {
        padding-top: 1.2rem;
    }
    .cp-eyebrow {
        font-size: 0.38rem;
        letter-spacing: 0.35em;
        margin-bottom: 0.75rem;
    }
    .cp-title {
        font-size: clamp(2.0rem, 9vw, 3.2rem);
        padding: 0.8rem 0 0.5rem;
    }
    .cp-subtitle {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.75rem;
        padding: 0 0.5rem;
    }
    .cp-orn-rule {
        max-width: 80px;
    }
    .cp-rule-banner {
        grid-template-rows: 3px 2px 1px;
        gap: 1px;
    }
    .cp-rule-banner .rb-t { height: 3px; }
    .cp-rule-banner .rb-m { height: 2px; }
    .cp-rule-banner .rb-b { height: 1px; }
    .cp-rule-banner--close .rb-t { height: 1px; }
    .cp-rule-banner--close .rb-b { height: 3px; }

    /* II. Lead Story stack */
    .cp-lead {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }
    .cp-lead__body {
        order: 1;
    }
    .cp-lead__digest-col {
        order: 2;
        border-right: none;
        border-top: 1px solid var(--lead-digest-col-border);
        padding: 1.5rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
    .cp-lead__digest-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .cp-lead__digest-title {
        font-size: 1.25rem;
        text-align: left;
    }
    .cp-lead__digest-excerpt {
        font-size: 0.84rem;
        line-height: 1.5;
    }
    .cp-lead__digest-footer {
        justify-content: flex-start;
    }
    .cp-lead__accent {
        order: 2;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid var(--lead-accent-border-color);
        padding: 1.5rem 0 0;
    }
    .cp-lead__accent-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        width: auto;
    }
    .cp-lead__vert {
        writing-mode: horizontal-tb;
        transform: none;
        margin: 0;
        font-size: 0.38rem;
        letter-spacing: 0.3em;
        white-space: normal;
        text-align: left;
    }
    .cp-lead__orn {
        display: none;
    }
    .cp-lead__numeral {
        font-size: 3.5rem;
        margin-top: 0;
        align-self: center;
    }
    .cp-lead__body {
        padding: 1.5rem 0;
    }
    .cp-lead__kicker {
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    .cp-lead__kicker-text {
        font-size: 0.38rem;
        letter-spacing: 0.3em;
        white-space: normal;
        text-align: center;
    }
    .cp-lead__kicker-rule {
        display: none;
    }
    .cp-lead__headline {
        font-size: 1.9rem;
        text-align: center;
    }
    .cp-lead__excerpt {
        columns: 1;
    }
    .cp-lead__excerpt::first-letter {
        font-size: 3.2rem;
    }
    .cp-lead__verdict {
        justify-content: center;
    }

    /* III. Secondary Pair stack */
    .cp-secondary {
        grid-template-columns: 1fr;
    }
    .cp-secondary__item {
        border-right: none;
        border-bottom: 1px solid var(--secondary-item-border-color);
        padding: 1.4rem 0;
    }
    .cp-secondary__item:last-child {
        border-bottom: none;
    }

    /* IV. Tertiary Row stack */
    .cp-tertiary {
        grid-template-columns: 1fr;
    }
    .cp-tertiary__item {
        border-right: none;
        border-bottom: 1px solid var(--tertiary-verdict-border);
        padding: 1.4rem 0;
    }
    .cp-tertiary__item:last-child {
        border-bottom: none;
    }
    .cp-tertiary__numeral {
        font-size: 4.5rem;
        right: 0.4rem;
        bottom: 0.4rem;
    }

    /* V. Register columns */
    .cp-register {
        column-count: 1;
    }
    .cp-register__entry {
        padding: 0.58rem 0;
    }

    /* VI. Section Banners and Coda */
    .cp-section-banner__text {
        font-size: 0.36rem;
        letter-spacing: 0.28em;
        white-space: normal;
        text-align: center;
        line-height: 1.4;
        padding: 0 0.3rem;
    }
    .cp-coda__text {
        font-size: 0.38rem;
        letter-spacing: 0.3em;
    }
}