/* =====================================================================
 * PREVIEW 2 - the news-portal design system (theage.com.au structure,
 * TAeM tokens). Sticky navy masthead, promo strip, weighted 3-col lead
 * package, section bands, "Just in" cadence rail, dark footer. It also
 * re-homes the page CSS the issues renderer's markup expects (modal,
 * timeline, archive grid, skeletons) and flattens the renderer's own
 * card system into this editorial language.
 *
 * Palette is strictly cool, measured off theage.com.au. No warm-earth tone
 * appears anywhere:
 *   page #FFFFFF  surface #F4F5F7  navy #0A1633
 *   ink #232323   soft #555555    faint #64748B
 *   accent #096DD2 (The Age blue)  hover #0B4FA8
 *   rule #E4E4E4  rule-soft #ECECEC  navy-text #D7DBE3
 * Type: Playfair Display 500 (Abril Titling stand-in) for headlines,
 * PT Sans for everything else (the exact Age body face).
 *
 * The renderer injects its own stylesheet at runtime (after this file),
 * so every override of a taem-* class keeps !important.
 * ===================================================================== */

:root {
    --p2-page: #FFFFFF;
    --p2-surface: #F4F5F7;
    --p2-navy: #0A1633;
    --p2-ink: #232323;
    --p2-ink-soft: #555555;
    --p2-ink-faint: #64748B;
    --p2-accent: #096DD2;
    --p2-accent-hover: #0B4FA8;
    --p2-rule: #E4E4E4;
    --p2-rule-soft: #ECECEC;
    --p2-navy-text: #D7DBE3;
    --p2-navy-hover: #FFFFFF;

    --p2-serif: 'Playfair Display', Georgia, serif;
    --p2-sans: 'PT Sans', system-ui, -apple-system, sans-serif;

    --p2-maxw: 1128px;
    --p2-gap: 24px;
}

/* ── Page ground ─────────────────────────────────────────────────────── */
/* The body carries data-taem-themed, which opts out of the header
   component's legacy content-area theme block (its [data-theme="light"]
   body rule would otherwise force white). No !important needed once
   opted out. */
body {
    background-color: var(--p2-page);
    color: var(--p2-ink-soft);
    font-family: var(--p2-sans);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--p2-ink);
    font-family: var(--p2-serif);
    font-weight: 500;
    letter-spacing: normal;
}
img { max-width: 100%; }

.p2-wrap {
    max-width: var(--p2-maxw);
    margin-inline: auto;
    padding-inline: 1.25rem;
}
@media (max-width: 767px) { .p2-wrap { padding-inline: 0.75rem; } }

.p2-note {
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--p2-ink-soft);
}

/* =====================================================================
 * MASTHEAD - three rows, navy, sticky.
 * z-index 35: above content, below the issue modal (z-50) and the
 * search overlay. Compacts on scroll via .is-compact.
 * ===================================================================== */
.p2-masthead {
    position: sticky;
    top: 0;
    z-index: 35;
    background: var(--p2-navy);
    color: var(--p2-navy-text);
}
.p2-masthead.is-compact { box-shadow: 0 6px 18px rgba(10, 22, 51, 0.28); }

.p2-masthead__inner {
    max-width: var(--p2-maxw);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Row 1: topline */
.p2-masthead__topline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-navy-text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    transition: max-height .25s ease, opacity .25s ease, padding .25s ease;
    overflow: hidden;
    max-height: 3rem;
}
.p2-masthead__topline-l {
    display: inline-flex;
    align-items: baseline;
    gap: 0.85rem;
    min-width: 0;
    flex-wrap: wrap;
}
.p2-masthead__date {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 1px;
}
.p2-masthead__edition { color: var(--p2-accent); }
.p2-masthead__emeritus { text-align: right; }
@media (max-width: 767px) {
    .p2-masthead__topline { font-size: 0.72rem; letter-spacing: 0.08em; }
    .p2-masthead__founder, .p2-masthead__edition, .p2-masthead__emeritus { display: none; }
}

/* Row 2: wordmark + controls */
.p2-masthead__row2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0 0.9rem;
    transition: padding .25s ease;
}
.p2-masthead__since {
    font-family: var(--p2-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--p2-navy-text);
    justify-self: start;
}
.p2-masthead__brand {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}
.p2-masthead__wordmark {
    display: block;
    width: 100%;
    max-width: 22rem;
    transition: max-width .25s ease;
}
.p2-masthead__wordmark img { display: block; width: 100%; height: auto; }
.p2-masthead__tagline {
    font-family: var(--p2-serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--p2-navy-text);
    text-align: center;
}
.p2-masthead__controls {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.p2-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-navy-text);
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.p2-search-btn:hover { color: var(--p2-navy-hover); border-color: var(--p2-navy-hover); }

.p2-readedition {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-navy-text);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    padding: 0.45rem 0.95rem;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.p2-readedition:hover {
    color: var(--p2-navy-hover);
    border-color: var(--p2-accent);
    background: rgba(9, 109, 210, 0.20);
}

/* Row 3: nav */
.p2-masthead__navrow {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.6rem 0;
    transition: padding .25s ease;
}

/* Compact state: topline + since collapse, wordmark shrinks */
.p2-masthead.is-compact .p2-masthead__topline {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}
.p2-masthead.is-compact .p2-masthead__row2 { padding: 0.5rem 0; }
.p2-masthead.is-compact .p2-masthead__since { opacity: 0; }
.p2-masthead.is-compact .p2-masthead__tagline { display: none; }
.p2-masthead.is-compact .p2-masthead__wordmark { max-width: 14rem; }
.p2-masthead.is-compact .p2-masthead__navrow { padding: 0.4rem 0; }

@media (max-width: 767px) {
    .p2-masthead__row2 { grid-template-columns: 1fr auto; }
    .p2-masthead__brand { grid-column: 1; justify-self: start; align-items: flex-start; }
    .p2-masthead__controls { grid-column: 2; }
    .p2-masthead__wordmark { max-width: 14rem; }
    .p2-masthead__tagline { font-size: 0.8125rem; }
    .p2-search-btn__label { display: none; }
    .p2-readedition { display: none; }
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.p2-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 1.5rem;
    flex-wrap: wrap;
}
.p2-nav-link,
.p2-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--p2-sans);
    font-size: 0.8125rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--p2-navy-text);
    background: none;
    border: 0;
    padding: 0.35rem 0.1rem;
    cursor: pointer;
    transition: color .18s ease;
    white-space: nowrap;
}
.p2-nav-link:hover, .p2-nav-toggle:hover,
.p2-nav-link:focus-visible, .p2-nav-toggle:focus-visible { color: var(--p2-navy-hover); }
.p2-nav-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .18s ease;
}
.p2-nav-group { position: relative; }
.p2-nav-group.open .p2-nav-caret { transform: rotate(180deg); }

.p2-nav-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 16rem;
    background: var(--p2-page);
    border: 1px solid var(--p2-rule);
    border-top: 2px solid var(--p2-accent);
    box-shadow: 0 10px 28px rgba(10, 22, 51, 0.18);
    padding: 0.4rem 0;
    display: none;
    z-index: 5;
}
.p2-nav-group.open .p2-nav-panel,
.p2-nav-group:hover .p2-nav-panel,
.p2-nav-group:focus-within .p2-nav-panel { display: block; }
.p2-nav-panel a {
    display: block;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--p2-ink);
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.p2-nav-panel a:hover { background: var(--p2-surface); color: var(--p2-accent); }

@media (max-width: 767px) {
    .p2-nav { gap: 0 1rem; }
    .p2-nav-panel { position: fixed; left: 1rem; right: 1rem; transform: none; min-width: 0; }
}

/* =====================================================================
 * PROMO STRIP - 4 standing features under the masthead
 * ===================================================================== */
.p2-promo {
    background: var(--p2-surface);
    border-bottom: 1px solid var(--p2-rule);
}
.p2-promo__inner {
    max-width: var(--p2-maxw);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--p2-gap);
}
.p2-promo__card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.35rem 0;
}
.p2-promo__card + .p2-promo__card {
    border-left: 1px solid var(--p2-rule);
    padding-left: var(--p2-gap);
}
.p2-promo__media {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: 1px solid var(--p2-rule);
    border-radius: 2px;
    overflow: hidden;
    background: var(--p2-page);
}
.p2-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2-promo__text { display: block; }
.p2-promo__card .p2-card__title {
    font-size: 0.9375rem;
    line-height: 1.25;
    margin: 0.1rem 0 0.15rem;
    transition: color .18s ease;
}
.p2-promo__card:hover .p2-card__title { color: var(--p2-accent); }
.p2-promo__line {
    display: block;
    font-family: var(--p2-sans);
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--p2-ink-soft);
}
@media (max-width: 767px) {
    .p2-promo__inner { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; }
    .p2-promo__card + .p2-promo__card { border-left: 0; padding-left: 0; }
    .p2-promo__card:nth-child(even) { border-left: 1px solid var(--p2-rule); padding-left: 1rem; }
}

/* =====================================================================
 * CARD SYSTEM (spec section 2) - one unit, five densities.
 *   field order: kicker -> headline -> standfirst -> byline
 * ===================================================================== */
.p2-card { display: block; }

.p2-card__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--p2-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.55rem;
}
.p2-card__status { color: var(--p2-ink-soft); }
.p2-card__cat { color: var(--p2-accent); }

.p2-card__title {
    font-family: var(--p2-serif) !important;
    color: var(--p2-ink);
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.2;
    margin: 0;
}
.p2-card__title a { color: inherit; transition: color .18s ease; }
.p2-card__title a:hover { color: var(--p2-accent); }
.p2-card:hover .p2-card__title { color: var(--p2-ink); }

.p2-card__standfirst {
    font-family: var(--p2-sans);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--p2-ink-soft);
    margin: 0.55rem 0 0;
}
.p2-card__standfirst--soft { color: var(--p2-ink-faint); font-size: 0.9375rem; }
.p2-card__standfirst:empty { display: none; }

.p2-card__byline {
    font-family: var(--p2-serif);
    font-style: italic;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--p2-ink-soft);
    margin: 0.5rem 0 0;
}

.p2-card__media { display: block; }
.p2-card__media img { display: block; width: 100%; height: auto; }

/* ── Variant A: Lead ─────────────────────────────────────────────────── */
.p2-card--lead .p2-lead__title {
    font-size: clamp(1.85rem, 3.4vw, 2.25rem) !important;
    line-height: 1.11 !important;
    margin: 0 0 1rem !important;
}
.p2-lead__media {
    margin: 0 0 1.1rem;
    border: 1px solid var(--p2-rule);
    border-radius: 2px;
    overflow: hidden;
    background: var(--p2-surface);
}
.p2-card--lead .p2-card__standfirst {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--p2-ink);
}
.p2-card--lead .p2-card__standfirst--soft { color: var(--p2-ink-soft); font-size: 1rem; }
.p2-lead__cta { margin-top: 1.1rem; }

.p2-textlink {
    display: inline-block;
    font-family: var(--p2-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-accent);
    border-bottom: 2px solid var(--p2-accent);
    padding-bottom: 2px;
    transition: color .18s ease, border-color .18s ease;
}
.p2-textlink:hover { color: var(--p2-ink); border-color: var(--p2-ink); }

/* ── Variant B: Medium-with-standfirst (centre stack) ────────────────── */
.p2-card--med { padding: 0; }
.p2-card--med .p2-card__title { font-size: 1.25rem; line-height: 1.2; }
.p2-card--med.p2-card--med-l .p2-card__title { font-size: 1.5rem; line-height: 1.17; }
.p2-card--med + .p2-card--med {
    border-top: 1px solid var(--p2-rule-soft);
    padding-top: 1.25rem;
    margin-top: 1.25rem;
}

/* ── Variant D: Small (promo strip, dense grids) ─────────────────────── */
.p2-card--sm .p2-card__title { font-size: 1rem; line-height: 1.25; }
.p2-card--sm .p2-card__kicker { margin-bottom: 0.4rem; }

/* ── Variant E: Rail item ("Just in", toc) ───────────────────────────── */
.p2-card--rail {
    display: block;
    padding: 0.85rem 0;
}
.p2-card--rail + .p2-card--rail { border-top: 1px solid var(--p2-rule-soft); }
.p2-card--rail .p2-card__kicker { margin-bottom: 0.3rem; }
.p2-card--rail .p2-card__cat { font-size: 0.75rem; }
.p2-card--rail .p2-card__title { font-size: 1rem; line-height: 1.3; display: block; }
a.p2-card--rail:hover .p2-card__title { color: var(--p2-accent); }
.p2-card__chip {
    display: inline-block;
    margin-top: 0.4rem;
    font-family: var(--p2-sans);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-ink-faint);
    background: var(--p2-surface);
    border: 1px solid var(--p2-rule);
    border-radius: 2px;
    padding: 2px 8px;
}

/* =====================================================================
 * LEAD PACKAGE - weighted 3-col front region
 * ===================================================================== */
.p2-lead {
    margin: 2rem 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .p2-lead {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
        gap: var(--p2-gap);
        align-items: start;
    }
    .p2-lead__centre {
        border-left: 1px solid var(--p2-rule);
        border-right: 1px solid var(--p2-rule);
        padding: 0 1.5rem;
    }
}

/* Mobile linearization by information priority: the lead (today's edition)
   first, then the "Today" panchanga instrument (the one element that
   changes daily), then the medium stack, then the rest of the rail. The
   rail becomes display:contents so the panchanga can jump the queue. */
@media (max-width: 1023px) {
    .p2-lead__main { order: 1; }
    .p2-lead__rail { display: contents; }
    .p2-lead__rail > .p2-railbox { order: 4; margin-bottom: 0; }
    .p2-lead__rail > .p2-railbox--today { order: 2; }
    .p2-lead__centre { order: 3; }
}

/* =====================================================================
 * RAIL-HEAD / BOXED-RAIL (The Age's "Editor's Picks" chrome)
 * ===================================================================== */
.p2-railbox {
    border: 1px solid var(--p2-rule);
    border-top: 3px solid var(--p2-accent);
    background: var(--p2-page);
    margin-bottom: var(--p2-gap);
}
.p2-railbox__head {
    font-family: var(--p2-sans) !important;
    font-size: 0.9375rem !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-navy) !important;
    padding: 0.75rem 1rem;
    margin: 0;
    border-bottom: 1px solid var(--p2-rule);
}

.p2-instruments { list-style: none; margin: 0; padding: 0 1rem; }
.p2-instruments li + li { border-top: 1px solid var(--p2-rule-soft); }
.p2-instruments a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    color: var(--p2-ink);
    transition: color .18s ease;
}
.p2-instruments a:hover { color: var(--p2-accent); }
.p2-instruments a span { font-size: 0.9rem; font-weight: 600; }
.p2-instruments a em {
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-ink-faint);
    flex-shrink: 0;
}

/* =====================================================================
 * SECTION BAND CHROME
 * ===================================================================== */
.p2-band {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 3.5rem 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--p2-navy);
}
.p2-band__title {
    font-family: var(--p2-sans) !important;
    font-size: 1.125rem !important;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-navy) !important;
    margin: 0;
}
.p2-band__more {
    flex-shrink: 0;
    font-family: var(--p2-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-accent);
    transition: color .18s ease;
}
.p2-band__more:hover { color: var(--p2-accent-hover); }
@media (max-width: 767px) {
    .p2-band__title { font-size: 1rem !important; letter-spacing: 1.5px; }
}

.p2-section { margin: 0 0 1rem; }

/* Author-built band grid (Guides & Forecasts) */
.p2-band__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--p2-gap);
}
@media (max-width: 1023px) { .p2-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p2-band__grid { grid-template-columns: 1fr; } }

.p2-guidecard {
    border: 1px solid var(--p2-rule);
    border-left: 3px solid var(--p2-accent);
    border-radius: 2px;
    background: var(--p2-page);
    padding: 1.1rem 1.25rem;
    transition: background-color .18s ease, border-color .18s ease;
}
.p2-guidecard:hover { background: var(--p2-surface); border-color: var(--p2-accent-hover); }
.p2-guidecard .p2-card__title { font-size: 1.125rem; line-height: 1.25; }

/* =====================================================================
 * JUST IN - full-width cadence rail above the footer
 * ===================================================================== */
.p2-justin { margin: 2rem 0 3rem; }
.p2-justin__list { padding: 0 1rem 0.5rem; }

/* =====================================================================
 * SKY NOW: the "Today" instrument, rail-shaped.
 * Fresh layout rules (the live page's are viewport-based media queries
 * that would fire inside this ~320px rail at desktop widths). Colour
 * comes through the widget's own --sn-* variable contract, set cool.
 * ===================================================================== */
.taem-skynow.p2-instrument {
    --sn-bg: var(--p2-page);
    --sn-border: var(--p2-rule);
    --sn-hover: rgba(9, 109, 210, 0.04);
    --sn-eyebrow: #232323;
    --sn-label: #555555;
    --sn-value: #232323;
    --sn-note: #555555;
    --sn-link: #096DD2;
    --sn-divider: #E4E4E4;
    --sn-chart-line: rgba(9, 109, 210, 0.28);
    --sn-chart-frame: #096DD2;
    --sn-chart-ink: #232323;
    --sn-chart-accent: #096DD2;
    --sn-lagna-fill: rgba(9, 109, 210, 0.10);
    background: var(--sn-bg);
    border: 0;
    border-radius: 0;
    display: block;
}

.p2-instrument .taem-skynow-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--sn-divider);
    background: var(--p2-surface);
}
.p2-instrument .taem-skynow-eyebrow { color: var(--sn-eyebrow); letter-spacing: 0.16em; }
.p2-instrument .taem-skynow-locwrap { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.p2-instrument .taem-skynow-loc { color: var(--sn-value); font-size: 0.85rem; font-weight: 700; }
.p2-instrument .taem-skynow-detect {
    background: transparent;
    color: var(--sn-link);
    border: 1px solid var(--sn-divider);
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s;
}
.p2-instrument .taem-skynow-detect:hover { border-color: var(--sn-link); }
.p2-instrument .taem-skynow-detect:disabled { opacity: 0.6; cursor: default; }
.p2-instrument .taem-skynow-status { color: var(--sn-note); font-size: 0.75rem; }
.p2-instrument .taem-skynow-open { color: var(--sn-link); font-size: 0.78rem; margin-left: auto; white-space: nowrap; }
.p2-instrument .taem-skynow-open:hover { text-decoration: underline; }

/* Rail shape: ALWAYS stacked, never side-by-side (no viewport queries) */
.p2-instrument .taem-skynow-halves { display: block; }
.p2-instrument .taem-skynow-panchanga { display: block; }
.p2-instrument .taem-skynow-panchanga:hover { background: var(--sn-hover); }

.p2-instrument .taem-skynow-samvatsara {
    color: var(--sn-value);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    font-style: italic;
}

/* Panchanga fields as bordered instrument cells */
.p2-instrument .taem-skynow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--sn-divider);
    border: 1px solid var(--sn-divider);
}
.p2-instrument .taem-skynow-grid > div { background: var(--p2-page); padding: 0.55rem 0.65rem; }
/* Time-range cells take the full row */
.p2-instrument .taem-skynow-grid > div:nth-last-child(-n+2) { grid-column: 1 / -1; }
.p2-instrument .taem-skynow-label {
    color: var(--sn-label);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    line-height: 1.3;
}
.p2-instrument .taem-skynow-value {
    color: var(--sn-value);
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.3;
    font-family: var(--p2-serif);
}
.p2-instrument .taem-skynow-value.sn-muted { color: var(--sn-label); font-weight: 500; font-style: italic; }

.p2-instrument .taem-skynow-chart { border-top: 1px solid var(--sn-divider); display: flex; flex-direction: column; gap: 0.6rem; }
.p2-instrument .taem-skynow-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.p2-instrument .taem-skynow-now { color: var(--sn-value); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.p2-instrument .taem-skynow-style-toggle { display: inline-flex; border: 1px solid var(--sn-divider); border-radius: 2px; overflow: hidden; }
.p2-instrument .taem-skynow-style-btn {
    background: transparent;
    color: var(--sn-note);
    border: 0;
    padding: 3px 12px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
}
.p2-instrument .taem-skynow-style-btn.active { background: var(--sn-chart-frame); color: #FFFFFF; }

/* Charts stacked at rail width */
.p2-instrument .taem-skynow-charts { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.p2-instrument .taem-skynow-fig { margin: 0; width: 100%; max-width: 260px; }
.p2-instrument .taem-skynow-chart-box { width: 100%; }
.p2-instrument .taem-skynow-figcap {
    color: var(--sn-label);
    font-size: 0.78rem;
    text-align: center;
    margin-top: 4px;
    line-height: 1.2;
    font-family: var(--p2-serif);
    font-style: italic;
}
.sn-svg { display: block; width: 100%; height: auto; }
.p2-instrument .taem-skynow-chart-skel { width: 100%; aspect-ratio: 1; border-radius: 2px; }
.p2-instrument .taem-skynow-skel { display: inline-block; width: 9ch; height: 1em; border-radius: 2px; }
.p2-instrument .sn-chart-msg { color: var(--sn-label); font-size: 0.85rem; padding: 1rem 0.5rem; text-align: center; }

/* Chart SVG parts (colour via the vars set on .taem-skynow above) */
.sn-frame { stroke: var(--sn-chart-frame); stroke-width: 1.5; }
.sn-grid-line { stroke: var(--sn-chart-line); stroke-width: 1; }
.sn-lagna-cell { fill: var(--sn-lagna-fill); }
.sn-planet { fill: var(--sn-chart-ink); font-family: 'PT Sans', sans-serif; font-weight: 700; }
.sn-asc { fill: var(--sn-chart-accent); font-family: 'PT Sans', sans-serif; font-weight: 700; }
.sn-signnum { fill: var(--sn-label); font-family: 'PT Sans', sans-serif; font-weight: 700; }

/* =====================================================================
 * BESPOKE LOADING PLACEHOLDER
 * ===================================================================== */
.p2-skel {
    display: block;
    height: 1rem;
    margin-bottom: 0.4rem;
    background: linear-gradient(90deg, #EDF1F5 25%, #E2E8F0 37%, #EDF1F5 63%);
    background-size: 400% 100%;
    animation: p2-shimmer 1.4s ease infinite;
    border-radius: 2px;
}
@keyframes p2-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .p2-skel, .skeleton-shimmer { animation: none } }

/* =====================================================================
 * RE-HOMED RENDERER SUPPORT STYLES
 * The generated markup expects these from page CSS.
 * ===================================================================== */

/* Skeletons */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-shimmer {
    background: linear-gradient(90deg, rgba(31,41,55,0.05) 25%, rgba(31,41,55,0.10) 50%, rgba(31,41,55,0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 2px;
}
.skeleton-digital-hero { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; margin-bottom: 2rem; }
@media (max-width: 768px) { .skeleton-digital-hero { grid-template-columns: 120px 1fr; gap: 1rem; } }
.skeleton-cover { aspect-ratio: 3 / 4; border-radius: 2px; }
.skeleton-text-line { height: 1rem; border-radius: 2px; margin-bottom: 0.75rem; }
.skeleton-text-line.h-lg { height: 2rem; }
.skeleton-content-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .skeleton-content-grid { grid-template-columns: 1fr; } }
.skeleton-card { min-height: 200px; border: 1px solid var(--p2-rule); border-radius: 2px; padding: 1.25rem; border-left: 3px solid rgba(9,109,210,0.3); }
.skeleton-archive-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
@media (max-width: 1024px) { .skeleton-archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .skeleton-archive-grid { grid-template-columns: repeat(2, 1fr); } }
.skeleton-archive-thumb { aspect-ratio: 3 / 4; border-radius: 2px; }

/* Modal shell (fade + scale driven by the renderer's class toggles) */
.modal-overlay { transition: opacity 0.3s ease; }
.modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;
    background: var(--p2-page);
    border: 1px solid var(--p2-rule);
    border-radius: 2px;
    color: var(--p2-ink-soft);
}
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4 { color: var(--p2-ink); }
.p2-modal-close { color: var(--p2-ink-faint); }
.p2-modal-close:hover { color: var(--p2-accent); }

/* Print-archive covers: flat editorial frames (no museum spotlight) */
.issue-artifact { background: transparent; border-radius: 2px; position: relative; transition: transform .3s ease; }
.issue-artifact img {
    border-radius: 2px;
    display: block;
    width: 100%;
    border: 1px solid var(--p2-rule);
    box-shadow: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.issue-artifact:hover { transform: translateY(-4px); }
.issue-artifact:hover img {
    border-color: var(--p2-accent);
    box-shadow: 0 10px 24px rgba(31, 41, 55, 0.12);
}
.issue-trigger::before { display: none; }

/* Renderer's "View Full Archive" button */
.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--p2-accent);
    color: var(--p2-accent);
    border-radius: 2px !important;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease;
}
.btn-secondary:hover { background-color: var(--p2-accent); color: #FFFFFF; }

/* Vertical timeline, recoloured for the light page */
#vertical-timeline {
    position: fixed;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
#vertical-timeline.visible { opacity: 1; pointer-events: auto; }
.v-timeline-item { display: flex; align-items: center; cursor: pointer; }
.v-timeline-label {
    font-family: var(--p2-serif);
    font-size: 0.8rem;
    color: var(--p2-ink-soft);
    margin-right: 0.75rem;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}
.v-timeline-dot {
    width: 6px; height: 6px;
    background-color: var(--p2-ink-faint);
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
}
.v-timeline-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.v-timeline-item:hover .v-timeline-label { opacity: 1; transform: translateX(0); }
.v-timeline-item:hover .v-timeline-dot { background-color: var(--p2-accent-hover); transform: scale(1.2); }
.v-timeline-item.active .v-timeline-label { opacity: 1; transform: translateX(0); font-weight: 700; color: var(--p2-accent); }
.v-timeline-item.active .v-timeline-dot { background-color: var(--p2-accent); transform: scale(1.5); }
.v-timeline-item.active .v-timeline-dot::after { border-color: rgba(9, 109, 210, 0.3); width: 24px; height: 24px; }
@media (max-width: 1024px) { #vertical-timeline { display: none; } }

/* =====================================================================
 * FLATTEN THE RENDERER'S OWN OUTPUT INTO THE EDITORIAL LANGUAGE
 * (!important throughout: the renderer's sheet is injected after us.)
 * ===================================================================== */

/* SKIP the whole "The edition" band: its cover story + card grid duplicate the
   lead package above (all articles now live in lead.stack, uncapped). The
   container stays in the DOM (hidden) so the renderer still populates it for the
   search index and modal mechanics; the data is never trimmed. */
[data-s="edition.band"],
[data-s="edition"] { display: none !important; }

[data-theme="light"] .taem-digital-issue {
    border-radius: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}
[data-theme="light"] .taem-hero-cover-story {
    border-radius: 2px !important;
    background-color: transparent !important;
    border-left: 3px solid var(--p2-accent) !important;
    padding-left: 1.25rem !important;
}
[data-theme="light"] .taem-content-card {
    background: var(--p2-page) !important;
    border: 1px solid var(--p2-rule) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    background-image: none !important;
}
[data-theme="light"] .taem-content-card:hover {
    background: var(--p2-surface) !important;
    border-color: var(--p2-accent) !important;
    box-shadow: none !important;
    transform: none !important;
}
.taem-card-title { font-family: var(--p2-serif) !important; }
.taem-card-author { font-family: var(--p2-serif) !important; font-style: italic !important; }
[data-theme="light"] .taem-issue-hero-cover,
[data-theme="light"] .taem-edition-cover-link,
[data-theme="light"] .taem-edition-page {
    border-radius: 2px !important;
    box-shadow: none !important;
}
[data-theme="light"] .taem-issue-hero-cover { border: 1px solid var(--p2-rule) !important; }
[data-theme="light"] .taem-issue-format-badge,
[data-theme="light"] .taem-issue-context-chip,
[data-theme="light"] .taem-type-badge,
[data-theme="light"] .taem-card-chief-banner { border-radius: 2px !important; }
[data-theme="light"] .taem-card-chief-banner { background-image: none !important; }
.taem-issue-title { font-family: var(--p2-serif) !important; }

/* Recolour the renderer's brand VIOLET accents to The Age blue (user chose Age
   blue). The renderer injects its own #5B2E91/#7C3AED sheet AFTER preview2.css and
   uses !important on many colour rules, so matching !important is not enough:
   source order breaks the tie in the renderer's favour. We win on SPECIFICITY by
   scoping with the container IDs (#digital-issues-container, #print-archive-container,
   #modal-body-content): an id selector outranks any class-only renderer rule.
   The inline per-card --card-accent var carries no !important, so it is overridden. */
#digital-issues-container .taem-content-card,
#digital-issues-container .taem-hero-cover-story,
#modal-body-content .taem-content-card {
    --card-accent: #096DD2 !important;
    /* transparent: the card ::before paints a gradient from this glow, which
       would tint each card blue. The Age cards have no fill. */
    --card-accent-glow: transparent !important;
}
/* Belt and suspenders: neutralise the card's decorative ::before/::after wash. */
#digital-issues-container .taem-content-card::before,
#digital-issues-container .taem-content-card::after {
    background: none !important;
    box-shadow: none !important;
}
#digital-issues-container .taem-card-category,
#digital-issues-container .taem-card-cta,
#digital-issues-container .taem-hero-cs-label,
#digital-issues-container .taem-hero-cs-category,
#digital-issues-container .taem-hero-cs-cta,
#digital-issues-container .taem-issue-section-title,
#digital-issues-container .taem-content-meta--featured,
#digital-issues-container .taem-share-btn,
#digital-issues-container .taem-issue-share-btn,
#print-archive-container .taem-share-btn,
#modal-body-content .taem-card-category,
#modal-body-content .taem-card-cta { color: #096DD2 !important; }
#digital-issues-container .taem-hero-cs-cta:hover,
#digital-issues-container .taem-card-cta:hover { color: #0B4FA8 !important; }
/* The hero standfirst is body text, not an accent: keep it slate. */
#digital-issues-container .taem-hero-cs-orientation,
#digital-issues-container .taem-hero-cs-description { color: var(--p2-ink-soft) !important; }
#digital-issues-container .taem-type-badge,
#digital-issues-container .taem-issue-format-badge,
#digital-issues-container .taem-issue-context-chip,
#modal-body-content .taem-type-badge {
    color: #096DD2 !important;
    background: rgba(9, 109, 210, 0.08) !important;
    border-color: rgba(9, 109, 210, 0.22) !important;
}
#digital-issues-container .taem-card-chief-banner,
#modal-body-content .taem-card-chief-banner {
    background: rgba(9, 109, 210, 0.12) !important;
    color: #0A1633 !important;
}
#digital-issues-container .taem-chief-crest { color: #096DD2 !important; fill: #096DD2 !important; }
/* The renderer builds each archive cover's hover label as Tailwind `text-amber-400`
   (#FBBF24, warm gold) which breaks the cool palette. Recolour to white for the
   dark hover overlay. Id scope beats Tailwind's class-only utility. */
#print-archive-container .text-amber-400,
#digital-issues-container .text-amber-400 { color: #FFFFFF !important; }
#digital-issues-container .taem-share-btn:hover,
#digital-issues-container .taem-issue-share-btn:hover { background: rgba(9, 109, 210, 0.10) !important; }

/* ======================================================================
   Make the issues-renderer bands ("The edition") read as The Age: weight-500
   near-black headlines (not the site's 700 #1B1340), borderless hairline-ruled
   cards (not boxed with left-accent bars), no pill/badge chrome, PT Sans italic
   bylines. Id-scoped so these beat the renderer's own !important sheet.
   ====================================================================== */

/* Headlines: Playfair 500 in #232323, sized to the Age ramp. */
#digital-issues-container .taem-issue-title,
#digital-issues-container .taem-hero-cs-title,
#digital-issues-container .taem-card-title,
#modal-body-content .taem-hero-cs-title,
#modal-body-content .taem-card-title {
    font-family: var(--p2-serif) !important;
    font-weight: 500 !important;
    color: #232323 !important;
    letter-spacing: normal !important;
}
#digital-issues-container .taem-issue-title { font-size: 1.75rem !important; line-height: 1.14 !important; }
#digital-issues-container .taem-hero-cs-title { font-size: 2rem !important; line-height: 1.12 !important; }
#digital-issues-container .taem-card-title { font-size: 1.25rem !important; line-height: 1.2 !important; }

/* Cards: strip the box, left-accent bar and fill; separate with a top hairline
   (Age stories are ruled, not boxed). */
#digital-issues-container .taem-content-card,
#modal-body-content .taem-content-card {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--p2-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1.25rem 0 0.35rem !important;
}
#digital-issues-container .taem-content-card:hover {
    background: transparent !important;
    border-color: var(--p2-rule) !important;
    transform: none !important;
}
#digital-issues-container .taem-content-card:hover .taem-card-title { color: #096DD2 !important; }

/* Remove the themey chrome The Age never uses: chief banner, type/format pills,
   context chips, per-card CTA. */
#digital-issues-container .taem-card-chief-banner,
#digital-issues-container .taem-type-badge,
#digital-issues-container .taem-issue-format-badge,
#digital-issues-container .taem-issue-context,
#digital-issues-container .taem-issue-context-chip,
#digital-issues-container .taem-card-cta,
#modal-body-content .taem-card-chief-banner,
#modal-body-content .taem-type-badge { display: none !important; }

/* Share control: quiet grey, not a bright circle. */
#digital-issues-container .taem-share-btn,
#digital-issues-container .taem-issue-share-btn {
    color: #94A3B8 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Byline: PT Sans italic slate (Age), not Playfair. */
#digital-issues-container .taem-card-author,
#digital-issues-container .taem-hero-cs-author,
#modal-body-content .taem-card-author {
    font-family: var(--p2-sans) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #555555 !important;
}

/* Meta + standfirst: slate PT Sans; keep the category kicker blue with Age tracking. */
#digital-issues-container .taem-card-category,
#digital-issues-container .taem-hero-cs-category { letter-spacing: 1.5px !important; }
#digital-issues-container .taem-content-meta,
#digital-issues-container .taem-content-meta-item,
#digital-issues-container .taem-card-meta { color: #555555 !important; }
#digital-issues-container .taem-card-description,
#digital-issues-container .taem-hero-cs-orientation,
#digital-issues-container .taem-hero-cs-description,
#digital-issues-container .taem-hero-cs-glossary {
    color: #555555 !important;
    font-family: var(--p2-sans) !important;
}

/* "Also in This Issue" -> left navy department label with a rule (Age band). */
#digital-issues-container .taem-issue-section-title {
    display: block !important;      /* renderer sets flex, which ignores text-align */
    font-family: var(--p2-sans) !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    color: #0A1633 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding-bottom: 0.5rem !important;
    margin: 2.25rem 0 1.5rem !important;
    border-bottom: 2px solid #0A1633 !important;
}
#digital-issues-container .taem-issue-section-title::before,
#digital-issues-container .taem-issue-section-title::after { display: none !important; }

/* Cover-story feature block: no box or left-accent (The Age doesn't box its lead). */
#digital-issues-container .taem-hero-cover-story {
    border: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

[data-theme="light"] .taem-archive-heading {
    font-family: var(--p2-serif) !important;
    color: var(--p2-ink) !important;
}
[data-theme="light"] .taem-archive-subtitle {
    font-family: var(--p2-serif) !important;
    font-style: italic !important;
    color: var(--p2-ink-soft) !important;
}
[data-theme="light"] .taem-issue-section-title { font-family: var(--p2-serif) !important; }

/* =====================================================================
 * DARK FOOTER
 * ===================================================================== */
.p2-footer {
    background: var(--p2-ink);
    color: rgba(248, 250, 252, 0.9);
    padding: 3.5rem 1.5rem;
    margin-top: 4rem;
}
.p2-footer__inner { max-width: var(--p2-maxw); margin: 0 auto; }
.p2-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 3rem;
}
@media (min-width: 768px) { .p2-footer__grid { grid-template-columns: 4fr 2.4fr 2.4fr 2.4fr; gap: 2.5rem; } }
.p2-footer__wordmark { height: 2.25rem; width: auto; opacity: 0.9; margin-bottom: 1.4rem; display: block; }
.p2-footer__mission { font-size: 0.95rem; line-height: 1.7; color: rgba(248, 250, 252, 0.7); max-width: 26rem; }
.p2-footer__colhead {
    font-family: var(--p2-sans) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.5) !important;
    margin-bottom: 1.2rem;
}
.p2-footer__links { list-style: none; margin: 0; padding: 0; }
.p2-footer__links li + li { margin-top: 0.7rem; }
.p2-footer__links a {
    font-size: 0.9rem;
    color: rgba(248, 250, 252, 0.85);
    transition: color .18s ease;
}
.p2-footer__links a:hover { color: var(--p2-accent-hover); }
.p2-footer__bottomrow {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(248, 250, 252, 0.45);
}

/* ======================================================================
   2026-07-22 additions: masthead editors line, archive digital-editions strip
   ====================================================================== */

/* Editor Emeritus / Chief Editor line under the tagline */
.p2-masthead__editors {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--p2-sans);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--p2-navy-text);
    text-align: center;
}
.p2-masthead__editors i { font-style: normal; opacity: 0.6; }
.p2-masthead.is-compact .p2-masthead__editors { display: none; }
@media (max-width: 767px) {
    .p2-masthead__editors { flex-direction: column; gap: 0.15rem; align-items: center; }
    .p2-masthead__editors i { display: none; }
}

/* Digital editions strip in The archive (covers, newest first) */
.p2-editions {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1.25rem;
}
@media (max-width: 1023px) { .p2-editions { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px)  { .p2-editions { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
.p2-editions__item { display: block; }
.p2-editions__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--p2-rule);
    border-radius: 2px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.p2-editions__item:hover .p2-editions__img {
    border-color: var(--p2-accent);
    box-shadow: 0 8px 20px rgba(35, 35, 35, 0.12);
}
.p2-editions__label {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--p2-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p2-ink);
    text-align: center;
}
.p2-editions__item:hover .p2-editions__label { color: var(--p2-accent); }

/* ======================================================================
   Department pair: Forecasts | Vastu side by side (equal weight), each an
   Age-style ruled column of stacked rows. Stacks vertically below 900px.
   ====================================================================== */
.p2-bandpair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    align-items: start;
    margin-top: 3.5rem;
}
.p2-bandpair .p2-band--incol { margin-top: 0; }
.p2-bandpair__col--right {
    border-left: 1px solid var(--p2-rule);
    padding-left: 2.5rem;
}
.p2-bandcol__list { display: flex; flex-direction: column; }
/* Rows, not boxes: strip the guidecard chrome inside a department column */
.p2-bandcol__list .p2-guidecard {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0.9rem 0;
}
.p2-bandcol__list .p2-guidecard + .p2-guidecard { border-top: 1px solid var(--p2-rule-soft); }
.p2-bandcol__list .p2-guidecard:hover {
    background: transparent;
    border-color: var(--p2-rule-soft);
}
.p2-bandcol__list .p2-guidecard:hover .p2-card__title { color: var(--p2-accent); }
@media (max-width: 899px) {
    .p2-bandpair { grid-template-columns: 1fr; }
    .p2-bandpair__col--right { border-left: 0; padding-left: 0; }
    .p2-bandpair__col--right .p2-band--incol { margin-top: 3.5rem; }
}

/* ======================================================================
   Promo icons (user-selected 2026-07-22: calendar week / open book /
   degrees+planet / transit entry). Stroke glyphs in currentColor navy with
   one Age-blue accent element each. The .p2-promo .p2-promo__card selector
   is two classes deep so it beats .p2-card{display:block} on SPECIFICITY
   (the round-1 trap was relying on source order).
   ====================================================================== */
.p2-promo .p2-promo__card {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}
.p2-promo__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-top: 0.15rem;
    color: var(--p2-navy);
}
.p2-promo__icon svg { display: block; width: 100%; height: 100%; }
.p2-promo__icon .p2i-acc { stroke: var(--p2-accent); }
.p2-promo__icon .p2i-accf { fill: var(--p2-accent); stroke: var(--p2-accent); }
@media (max-width: 767px) {
    .p2-promo__icon { width: 32px; height: 32px; }
}

/* ======================================================================
   Global nav (shared partial): mobile hamburger drawer (checkbox pattern,
   zero JS so it works on the generated issue pages) + details-based
   dropdown groups. Later rules here override the older button-based nav
   rules above.
   ====================================================================== */
.p2-navdrawer__check { position: absolute; opacity: 0; pointer-events: none; }
.p2-navdrawer__toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--p2-sans);
    font-size: 0.8125rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--p2-navy-text);
    padding: 0.55rem 0;
}
.p2-navdrawer__toggle:hover { color: var(--p2-navy-hover); }
details.p2-nav-group > summary { list-style: none; }
details.p2-nav-group > summary::-webkit-details-marker { display: none; }
summary.p2-nav-toggle { display: inline-flex; }
.p2-nav-group[open] .p2-nav-caret { transform: rotate(180deg); }
.p2-nav-group[open] > .p2-nav-panel { display: block; }
@media (max-width: 767px) {
    .p2-navdrawer__toggle { display: inline-flex; }
    .p2-navdrawer__check:not(:checked) ~ .p2-nav { display: none; }
    .p2-nav { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.4rem 0 0.8rem; }
    .p2-nav-group { position: static; }
    .p2-nav-panel {
        position: static;
        transform: none;
        min-width: 0;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--p2-accent);
        background: transparent;
        margin: 0.2rem 0 0.4rem 0.5rem;
        padding: 0 0 0 0.6rem;
    }
    .p2-nav-panel a { color: var(--p2-navy-text); padding: 0.35rem 0; }
    .p2-nav-panel a:hover { background: transparent; color: var(--p2-navy-hover); }
}

/* =====================================================================
 * NOTE: there is deliberately NO "p2-compat" Tailwind-guard layer here.
 * =====================================================================
 * A previous version of this file ended with:
 *
 *   .p2-masthead, .p2-masthead * { margin: revert; padding: revert; ... }
 *   .p2-footer,   .p2-footer   * { ...same... }
 *
 * intended to shield the chrome from Tailwind's Preflight. It was both
 * unnecessary and actively destructive. Do not reintroduce it.
 *
 * Why it was unnecessary: Preflight targets bare ELEMENT selectors
 * (h1-h6, p, ul, button ...) at specificity (0,0,1). Every rule in this
 * file targets CLASSES at (0,1,0), so the theme already wins on
 * specificity wherever it defines anything. There was nothing to guard.
 *
 * Why it was destructive: `.p2-masthead *` is also (0,1,0) - the SAME
 * specificity as the theme's own `.p2-masthead__inner` etc. - but it sat
 * last in source order, so it beat them. And `revert` rolls back to the
 * BROWSER default, not to "the previous layer". Measured damage on the
 * homepage at 1920px: masthead/footer inner wrappers lost `margin:0 auto`
 * and pinned left; `.p2-footer__grid` lost its 48px bottom padding;
 * `.p2-search-btn` collapsed 46px -> 16px with no padding (rendering as a
 * bare floating glyph); `.p2-nav-link` lost its 13px/uppercase/1.5px
 * tracking; `.p2-footer__colhead` lost uppercase + tracking; and
 * `.p2-footer__links` <ul> gained the browser-default 40px indent - i.e.
 * the guard caused precisely the class of damage it claimed to prevent.
 *
 * If Tailwind ever genuinely does threaten chrome styling, fix it with a
 * targeted higher-specificity rule on the specific property, or with
 * @layer so the cascade order is explicit. Never with a blanket
 * descendant reset.
 * ===================================================================== */