:root {
    --pf-cream:  #F5F2EC;
    --pf-navy:   #0B1F3A;
    --pf-brick:  #8C1D18;
    --pf-ink:    #3D3A34;
    --pf-rule:   #B5A98C;
}

.pf-wk-page {
    background: var(--pf-cream);
    color: var(--pf-ink);
    font-family: 'Source Serif 4', Georgia, serif;
    /* No bottom padding here -- .pf-wk-page__closing now owns the
       spacing before the newsletter block. This used to be 80px, left
       over from before that section existed (when the page just ended
       abruptly and needed some breathing room); with both in place it
       was stacking into a much bigger gap than intended. */
}

/* ── Masthead: full-bleed navy band, text aligned to the same
   max-width column as the rest of the page via the -inner wrapper. ──── */
.pf-wk-page__masthead {
    background: linear-gradient(90deg, #081527 0%, var(--pf-navy) 45%, #17335C 100%);
    width: 100%;
}
.pf-wk-page__masthead-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 24px 34px;
}
.pf-wk-page__crumb {
    display: block !important;
    float: none !important;
    clear: both;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #8A94A8;
    margin-bottom: 18px;
}
.pf-wk-page__crumb a { color: #C9CEDB; text-decoration: none; }
.pf-wk-page__crumb a:hover { text-decoration: underline; }
.pf-wk-page__crumb span[aria-current] { color: #fff; }
.pf-wk-page__eyebrow {
    display: inline-flex;
    float: none !important;
    clear: both;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pf-brick);
    padding: 4px 10px 4px 8px;
    border-radius: 3px;
    margin-bottom: 14px;
}
.pf-wk-page__eyebrow::before { content: '\25CF'; font-size: 7px; opacity: .7; }
.pf-wk-page__title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(32px, 5.5vw, 52px);
    color: #fff;
    margin: 0 0 14px;
    line-height: 1.05;
}
.pf-wk-page__intro {
    font-size: 16.5px;
    line-height: 1.65;
    color: #C9CEDB;
    max-width: 62ch;
    opacity: .92;
}
.pf-wk-page__stat-row {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #8A94A8;
    margin-top: 16px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Stat strip lives just outside the header, on the cream page
   background -- pulled up to overlap the band boundary so it "pops"
   forward rather than sitting flatly beneath it. */
.pf-wk-page__stat-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Quick-stat strip (record / coach-year / playoff outcome / moments) --
   only appears when the page has a Schedule block to source data from. */
.pf-wk-page__stat-strip {
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(11,31,58,.12);
}
.pf-wk-page__stat-item {
    flex: 1;
    padding: 12px 22px;
    border-right: 1px solid #EDE8DD;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pf-wk-page__stat-item:last-child { border-right: none; }
.pf-wk-page__stat-value {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 20px;
    color: var(--pf-navy);
    line-height: 1;
}
.pf-wk-page__stat-value--brick { color: var(--pf-brick); }
.pf-wk-page__stat-item--outcome .pf-wk-page__stat-value { font-size: 14px; font-weight: 700; }
.pf-wk-page__stat-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #948C77;
}

/* ── Timeline spine (blocks) ─────────────────────────────────────────── */
.pf-wk-page__layout {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px 0;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0 48px;
    align-items: start;
}
.pf-wk-page__main { min-width: 0; }
.pf-wk-page__sidebar { min-width: 0; }

.pf-wk-block {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 0 24px;
    margin-bottom: 6px;
}
.pf-wk-block__marker { position: relative; }
.pf-wk-block__marker::before {
    content: '';
    position: absolute;
    top: 4px;
    left: calc(100% + 12px - 1px);
    width: 2px;
    height: 100%;
    background: var(--pf-rule);
}
.pf-wk-block__date {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pf-brick);
    margin-bottom: 4px;
    position: sticky;
    top: 24px;
}
.pf-wk-block__summary {
    font-size: 12.5px;
    line-height: 1.5;
    color: #948C77;
    font-style: italic;
    margin-top: 6px;
    position: sticky;
    top: 44px;
}
.pf-wk-block__body { padding-bottom: 10px; }
.pf-wk-block__plain-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--pf-navy);
    padding: 2px 0 10px;
}
.pf-wk-tweet-embed {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

/* ── Clipping (expand-in-place via <details>) ────────────────────────── */
.pf-wk-clip {
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-left: 4px solid var(--pf-brick);
    border-radius: 3px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(11,31,58,.06);
    position: relative;
}
.pf-wk-clip::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 22px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pf-cream);
    border: 2px solid var(--pf-brick);
}
.pf-wk-clip__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.pf-wk-clip__summary::-webkit-details-marker { display: none; }
.pf-wk-clip__headline {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--pf-navy);
    line-height: 1.3;
}
.pf-wk-clip__meta {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    color: #948C77;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pf-wk-clip__icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 1px solid var(--pf-rule);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--pf-brick);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    transition: transform .15s ease;
}
.pf-wk-clip[open] .pf-wk-clip__icon { transform: rotate(45deg); }

.pf-wk-clip__body { padding: 0 20px 20px; }
.pf-wk-clip__quote {
    margin: 0 0 14px;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--pf-rule);
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    color: var(--pf-ink);
}
.pf-wk-clip__anecdote {
    font-size: 14.5px;
    line-height: 1.6;
    color: #4A4536;
    margin: 0 0 16px;
}
.pf-wk-clip__anecdote p, .pf-wk-clip__quote p { margin: 0 0 10px; }
.pf-wk-clip__anecdote p:last-child, .pf-wk-clip__quote p:last-child { margin-bottom: 0; }
.pf-wk-clip__anecdote a, .pf-wk-clip__quote a {
    color: var(--pf-brick); text-decoration: none; border-bottom: 1px solid var(--pf-brick);
}
.pf-wk-clip__source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pf-brick);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.pf-wk-clip__source:hover { border-bottom-color: var(--pf-brick); }

/* ── Section label (used above Summary / Facts Panel blocks) ─────────── */
.pf-wk-section-label {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 27px;
    color: var(--pf-navy);
    line-height: 1.15;
    /* A heading should read as closer to the content it introduces than
       to whatever preceded it -- previously this had 0 margin above but
       30px below (20px margin + 10px padding), backwards from that, so
       it visually hugged the prior section instead of its own body
       text. Now: real separation above (32px), tight coupling below
       (16px total) to the paragraph that follows. */
    margin: 32px 0 6px;
    padding-bottom: 8px;
    position: relative;
    /* Same underline technique as the H3s below it, scaled up so this
       clearly reads as the parent heading rather than getting lost
       under its own subheadings -- thicker line, longer brick lead-in. */
    border-bottom: 2px solid var(--pf-rule);
}
.pf-wk-section-label::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 64px;
    height: 2px;
    background: var(--pf-brick);
}

/* ── Timeline's own section heading (shown once, above its entries) ──── */
.pf-wk-timeline__label {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--pf-navy);
    margin: 0 0 20px;
}

/* ── Topic block (heading + italic summary + clippings, no marker) ───── */
.pf-wk-topic { margin-bottom: 32px; }
.pf-wk-topic__date {
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pf-brick);
    margin-bottom: 6px;
}
.pf-wk-topic__label {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--pf-navy);
    margin: 0 0 8px;
}
.pf-wk-topic__summary {
    font-size: 15px;
    line-height: 1.6;
    color: #6B6558;
    margin: 0 0 18px;
    max-width: 68ch;
    font-style: italic;
}

/* ── Bulleted lists (toolbar's list button) -- one shared rule rather
   than repeating per block type, since the same button is available on
   every rich-text field: Summary/Topic body, clipping quote/anecdote,
   Highlight quote, Did You Know body, Game Summary recap. ──────────── */
.pf-wk-page ul {
    margin: 0 0 16px;
    padding-left: 1.25em;
    max-width: 72ch;
}
.pf-wk-page ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}
.pf-wk-page ul li::marker {
    color: var(--pf-brick);
}
.pf-wk-page ul li:last-child {
    margin-bottom: 0;
}

/* ── Summary block (story-style prose, drop cap on first paragraph) ──── */
.pf-wk-summary { margin-bottom: 32px; }
.pf-wk-summary p {
    font-size: 16.5px;
    line-height: 1.7;
    color: #4A4536;
    margin: 0 0 16px;
    max-width: 72ch;
}
.pf-wk-summary p a { color: var(--pf-brick); text-decoration: none; border-bottom: 1px solid var(--pf-brick); }
.pf-wk-summary h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--pf-navy);
    line-height: 1.3;
    /* The preceding <p> already contributes its own 16px bottom margin,
       so "6px 0 11px" here works out to a total gap of ~22px above this
       heading vs. ~11px below it -- a deliberate 2:1 ratio (more room
       separating from what came before, tighter to what follows) rather
       than the previous mismatch that just looked accidental. */
    margin: 6px 0 11px;
    max-width: 72ch;
    display: inline-block;
    padding-bottom: 4px;
    position: relative;
    /* Same 1px thickness as .pf-wk-section-label's rule, so this reads
       as part of the same design system rather than a heavier one-off.
       The ::before below lays a short brick-red accent over the start
       of that line -- same technique used for section titles elsewhere. */
    border-bottom: 1px solid var(--pf-rule);
}
.pf-wk-summary h3::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 44px;
    height: 1px;
    background: var(--pf-brick);
}
.pf-wk-summary h3:first-child { margin-top: 0; }
.pf-wk-summary--dropcap p:first-of-type::first-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 54px;
    color: var(--pf-brick);
    float: left;
    line-height: .85;
    padding: 6px 8px 0 0;
}

/* ── Narrow section-label variant -- used for a Summary block's own
   heading when it's nested inside a Timeline (instead of the full-width
   divider a top-level block gets), so several small nested blocks read
   like a run of H3 sub-headings rather than each competing for the same
   heavy section-break treatment. Deliberately mirrors .pf-wk-summary h3
   property-for-property so the two are visually indistinguishable. ──── */
.pf-wk-section-label--narrow {
    font-weight: 700;
    font-size: 20px;
    display: inline-block;
    width: auto;
    max-width: 72ch;
    padding-bottom: 4px;
    margin: 6px 0 11px;
    border-bottom: 1px solid var(--pf-rule);
}
.pf-wk-section-label--narrow::before {
    width: 44px;
    height: 1px;
    bottom: -1px;
}

/* ── Highlight block ("Time Capsule" style callout) ───────────────────── */
.pf-wk-highlight {
    background: var(--pf-navy);
    color: #E8E4D8;
    border-radius: 4px;
    padding: 20px 24px;
    margin: 0 0 32px;
}
.pf-wk-highlight__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #D8A66B;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pf-wk-highlight__label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #D8A66B; }
.pf-wk-highlight__quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.45;
    margin: 0 0 10px;
    color: #fff;
}
.pf-wk-highlight__quote a { color: #D8A66B; text-decoration: underline; }
.pf-wk-highlight__context { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: #B8B2A0; }

/* ── Did You Know block ("Sound Familiar?" style cross-link) ──────────── */
.pf-wk-dyk {
    border: 1px solid var(--pf-brick);
    border-radius: 4px;
    padding: 16px 20px;
    margin: 0 0 32px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #FBF3EE;
}
.pf-wk-dyk__icon {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--pf-brick);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 16px;
}
.pf-wk-dyk__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pf-brick);
    margin-bottom: 4px;
}
.pf-wk-dyk__text { font-size: 14.5px; line-height: 1.55; color: var(--pf-ink); }
.pf-wk-dyk__text a { color: var(--pf-brick); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--pf-brick); }

/* ── Facts Panel block (inline card -- not a floated sidebar in this pass) */
.pf-wk-facts {
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-radius: 4px;
    margin: 0 0 32px;
    overflow: hidden;
}
.pf-wk-facts--sidebar {
    max-width: 320px;
}
.pf-wk-facts--sticky {
    position: sticky;
    top: 24px;
}
.pf-wk-facts__header {
    background: var(--pf-navy);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 18px;
}
.pf-wk-facts__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid #EDE8DD;
    font-size: 13.5px;
}
.pf-wk-facts__row:last-child { border-bottom: none; }
.pf-wk-facts__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: #6B6558;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
    padding-top: 1px;
}
.pf-wk-facts__value { text-align: right; color: var(--pf-ink); font-weight: 600; }
.pf-wk-facts__footer {
    padding: 12px 18px;
    background: #EDE8DD;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    color: #6B6558;
}

/* ── Related Articles (simple reading list, same infobox shell as
   Facts Panel) ──────────────────────────────────────────────────────── */
.pf-wk-related__list { display: flex; flex-direction: column; }
.pf-wk-related__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid #EDE8DD;
    text-decoration: none;
    transition: background .1s ease;
}
.pf-wk-related__item:last-child { border-bottom: none; }
.pf-wk-related__item:hover { background: #FBF9F4; }
.pf-wk-related__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--pf-navy);
    line-height: 1.3;
}
.pf-wk-related__meta {
    flex-shrink: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    color: #948C77;
    white-space: nowrap;
}
.pf-wk-related__item:hover .pf-wk-related__title { color: var(--pf-brick); }

/* ── Related Articles: inline (main-column) variant. Reuses
   .pf-wk-section-label--narrow for the heading so it matches every
   other subsection heading on the page (e.g. "Free Agent Additions").
   Each row is styled as a thinner echo of .pf-wk-clip above (white
   background, brick left border, full column width) rather than a
   bare divided list -- since these sections mostly sit sandwiched
   between Timeline/Game Summary blocks, borrowing that same card
   language keeps the transition from feeling like a jump to a
   different component. */
.pf-wk-related--inline {
    margin: 0 0 32px;
}
.pf-wk-related--inline .pf-wk-related__list {
    max-width: none;
}
.pf-wk-related--inline .pf-wk-related__item {
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-left: 3px solid var(--pf-brick);
    border-radius: 3px;
    align-items: center;
    padding: 10px 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(11,31,58,.06);
    transition: border-color .1s ease, box-shadow .1s ease;
}
.pf-wk-related--inline .pf-wk-related__item:last-child { margin-bottom: 0; }
.pf-wk-related--inline .pf-wk-related__item:hover {
    background: #fff;
    border-color: var(--pf-brick);
    box-shadow: 0 2px 6px rgba(11,31,58,.08);
}
.pf-wk-related__footer {
    margin-top: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    color: #6B6558;
    max-width: 72ch;
}

/* ── Draft Picks (same infobox shell as Facts Panel, richer rows) ──────── */
.pf-wk-draft__pick {
    padding: 12px 18px;
    border-bottom: 1px solid #EDE8DD;
}
.pf-wk-draft__pick:last-child { border-bottom: none; }

/* Wide (main-column) variant: lay the four fields out in a single row
   instead of stacking, so the block actually fills the available width.
   Explicit grid-column per field (rather than relying on source order)
   keeps every row's columns aligned even when a given pick has no
   position/college or no pick number -- those divs simply don't exist
   for that row, but the remaining fields still land in their assigned
   column instead of shifting left to fill the gap. */
.pf-wk-draft__pick--wide {
    display: grid;
    grid-template-columns: 64px 1.4fr 1fr 130px;
    align-items: center;
    gap: 4px 20px;
}
.pf-wk-draft__pick--wide .pf-wk-draft__round  { grid-column: 1; margin-bottom: 0; }
.pf-wk-draft__pick--wide .pf-wk-draft__name   { grid-column: 2; }
.pf-wk-draft__pick--wide .pf-wk-draft__meta   { grid-column: 3; margin-top: 0; }
.pf-wk-draft__pick--wide .pf-wk-draft__pickno { grid-column: 4; margin-top: 0; text-align: right; }

.pf-wk-draft__round {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pf-brick);
    margin-bottom: 3px;
}
.pf-wk-draft__name {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--pf-navy);
    line-height: 1.3;
}
.pf-wk-draft__meta {
    font-size: 12.5px;
    color: #6B6558;
    margin-top: 2px;
}
.pf-wk-draft__pickno {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-style: italic;
    color: #948C77;
    margin-top: 3px;
}

/* ── Schedule widget ──────────────────────────────────────────────────── */
.pf-wk-schedule {
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 32px;
}
.pf-wk-schedule__header {
    background: var(--pf-navy);
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pf-wk-schedule__playoff-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--pf-navy);
    background: #fff;
    padding: 4px 10px;
    border-radius: 12px;
}
.pf-wk-schedule__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px;
    background: #F9F7F1;
    border-bottom: 1px solid var(--pf-rule);
}
.pf-wk-schedule__pill {
    flex: 1;
    min-width: 90px;
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-radius: 20px;
    padding: 8px 16px;
    text-align: center;
}
/* Overall is the headline stat -- give it real width of its own rather
   than splitting evenly with Home, which was making Away orphan onto
   its own full-width row whenever the container got narrow. */
.pf-wk-schedule__pill--overall { flex: 1.6; min-width: 150px; }
/* Home/Away wrap as a single paired unit -- same width as each other,
   and they never separate from one another even when the row wraps. */
.pf-wk-schedule__pill-group {
    display: flex;
    gap: 10px;
    flex: 2;
    min-width: 200px;
}
.pf-wk-schedule__pill-group .pf-wk-schedule__pill { flex: 1; min-width: 0; }
.pf-wk-schedule__pill--points { flex: 1.6; min-width: 168px; }
.pf-wk-schedule__pill-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #948C77;
    margin-bottom: 3px;
}
.pf-wk-schedule__pill-value {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 17px;
    color: var(--pf-navy);
    white-space: nowrap;
}
.pf-wk-schedule__pill-value .pos { color: #15803D; }
.pf-wk-schedule__pill-value .neg { color: var(--pf-brick); }
.pf-wk-schedule__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pf-wk-schedule__table th {
    text-align: left;
    padding: 8px 18px;
    background: #F3F1EA;
    color: #948C77;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pf-wk-schedule__table td {
    padding: 8px 18px;
    border-top: 1px solid #F3F1EA;
    color: var(--pf-ink);
}
.pf-wk-schedule__row--playoff td { background: #FBF3EE; }
.pf-wk-schedule__badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}
.pf-wk-schedule__badge--win { background: #15803D; }
.pf-wk-schedule__badge--loss { background: var(--pf-brick); }
.pf-wk-schedule__badge--tie { background: #948C77; }
.pf-wk-schedule__badge--upcoming { background: none; color: #C4BCA8; }

/* ── Game Summary card. Deliberately compact -- built to be stacked
   16-21 at a time for a full season, so every element is smaller than
   its Schedule/Draft Picks equivalents by design, not by oversight. ──── */
.pf-wk-game {
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-left: 3px solid var(--pf-navy);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 0 0 12px;
}
.pf-wk-game__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.pf-wk-game__icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    border: 1px solid var(--pf-rule);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--pf-brick);
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    transition: transform .15s ease;
}
.pf-wk-game__expand[open] .pf-wk-game__expand-toggle .pf-wk-game__icon { transform: rotate(45deg); }
.pf-wk-game__expand {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #F3F1EA;
}
.pf-wk-game__expand-toggle {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-brick);
}
.pf-wk-game__expand-toggle::-webkit-details-marker { display: none; }
.pf-wk-game__body { margin-top: 10px; }
.pf-wk-game__matchup { display: flex; flex-direction: column; gap: 2px; }
.pf-wk-game__week {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #948C77;
}
.pf-wk-game__opponent {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pf-navy);
}
.pf-wk-game__result { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pf-wk-game__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; color: #fff;
}
.pf-wk-game__badge--win { background: #15803D; }
.pf-wk-game__badge--loss { background: var(--pf-brick); }
.pf-wk-game__badge--tie { background: #948C77; }
.pf-wk-game__score {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 17px;
    color: var(--pf-navy);
}
.pf-wk-game__upcoming {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #C4BCA8;
}
.pf-wk-game__quarters {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
}
.pf-wk-game__quarters th {
    text-align: center;
    padding: 3px 4px;
    color: #948C77;
    font-family: 'DM Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
}
.pf-wk-game__quarters th:first-child { text-align: left; }
.pf-wk-game__quarters td {
    text-align: center;
    padding: 3px 4px;
    color: var(--pf-ink);
    border-top: 1px solid #F3F1EA;
}
.pf-wk-game__quarters td:first-child {
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--pf-navy);
}
.pf-wk-game__recap {
    font-size: 13.5px;
    line-height: 1.55;
    color: #4A4536;
    margin-top: 10px;
}
.pf-wk-game__recap p { margin: 0 0 6px; }
.pf-wk-game__recap p:last-child { margin-bottom: 0; }
.pf-wk-game__recap a { color: var(--pf-brick); text-decoration: none; border-bottom: 1px solid var(--pf-brick); }
.pf-wk-game__highlights { margin-top: 10px; }
.pf-wk-game__highlights summary {
    cursor: pointer;
    list-style: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pf-brick);
}
.pf-wk-game__highlights summary::-webkit-details-marker { display: none; }
.pf-wk-game__highlights-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-wk-game__highlights-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--pf-ink);
    text-decoration: none;
}
.pf-wk-game__highlights-list a:hover { color: var(--pf-brick); }
.pf-wk-game__highlight-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
    font-size: 10px; color: #fff;
}
.pf-wk-game__highlight-badge--youtube { background: #CC0000; }
.pf-wk-game__highlight-badge--x { background: #000; }
.pf-wk-game__highlight-badge--link { background: #948C77; }

.pf-wk-game__articles {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #F3F1EA;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pf-wk-game__article-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
}
.pf-wk-game__article-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--pf-navy);
    line-height: 1.3;
}
.pf-wk-game__article-item:hover .pf-wk-game__article-title { color: var(--pf-brick); }
.pf-wk-game__article-meta {
    flex-shrink: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: #948C77;
    white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.pf-wk-page__empty {
    max-width: 560px;
    margin: 50px auto;
    text-align: center;
    color: #77715F;
    font-size: 15px;
    padding: 0 24px;
}

/* ── Closing section: Prev/Next navigation + Last Updated. Gives the
   page a deliberate ending -- somewhere to click next -- rather than
   just running out of content right before the newsletter pitch. ────── */
.pf-wk-page__closing {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 24px 40px;
    /* Grid row-gap owns all vertical spacing in this section instead of
       margins on the nav/updated line -- gap can't collapse, can't be
       eaten by a child box rendering taller/shorter than its layout
       height, and doesn't depend on the nav's internal layout (flex,
       block, whatever) behaving correctly. This is the most bulletproof
       option, independent of any flex-sizing quirk in .pf-wk-page__prevnext. */
    display: grid;
    row-gap: 24px;
}
.pf-wk-page__prevnext {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--pf-rule);
}
/* Deliberately plain block-level, NOT a nested flex column inside the
   row-direction flex nav above -- nesting flex-direction:column inside
   a flex-direction:row parent is a well-known source of unpredictable
   sizing across browsers (the previous version of this rule did that,
   and the box collapsed to hug only its first line while the title
   rendered outside it, unstyled). A plain block box containing two
   block-level spans stacks them via completely ordinary flow -- no
   flex sizing ambiguity possible. */
.pf-wk-page__prevnext-link {
    display: block;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--pf-rule);
    border-radius: 6px;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pf-wk-page__prevnext-link:hover {
    border-color: var(--pf-brick);
    box-shadow: 0 2px 8px rgba(11,31,58,.08);
}
/* margin-left: auto pushes the Next link to the far right whether
   Previous is present or not, since .pf-wk-page__prevnext-link is a
   flex ITEM of the row-direction nav above (its own display:block just
   means it's not a flex/grid CONTAINER itself -- flex-item behavior as
   a child of the nav is unaffected). Previous needs no matching rule --
   as the first (or only) flex child it already sits at the start. */
.pf-wk-page__prevnext-link--next { text-align: right; margin-left: auto; }
.pf-wk-page__prevnext-dir {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pf-brick);
    margin-bottom: 4px;
}
.pf-wk-page__prevnext-title {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pf-navy);
    line-height: 1.3;
}
.pf-wk-page__updated {
    display: block;
	margin:15px;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    color: #948C77;
    text-align: center;
}

/* ── Mobile / Tablet ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pf-wk-block { grid-template-columns: 44px 1fr; gap: 0 14px; }
    .pf-wk-block__marker::before { left: calc(100% + 8px - 1px); }
    .pf-wk-clip { margin-left: 2px; }
    .pf-wk-clip::before { left: -20px; }
    /* Switching off flexbox entirely for this nav at mobile widths,
       rather than continuing to fight flex's column-direction cross-
       axis sizing (align-items:flex-start leaving items shrink-to-fit
       width, which this file's own comments already flag as a past
       source of a collapsed/misaligned box). display:block + normal
       margin-based stacking has no cross-axis concept at all, so
       there's no sizing ambiguity left for any browser to get wrong. */
    .pf-wk-page__prevnext {
        display: block;
    }
    .pf-wk-page__prevnext-link {
        width: auto;
        margin-bottom: 12px;
    }
    .pf-wk-page__prevnext-link:last-child { margin-bottom: 0; }
    /* margin-left:0 since the button now spans the full column width
       regardless (auto no longer has anything to push against) --
       text-align stays right (inherited from the base rule) so a Next
       button still reads as "forward" even when stacked full-width. */
    .pf-wk-page__prevnext-link--next { margin-left: 0; }

    /* This is a genuinely narrow breakpoint (phones), separate from the
       1024px one below where the page's sidebar column collapses. Those
       are two different concerns: at medium/landscape widths (641-
       1024px), the sidebar drops below main content, but the single
       column left behind still has plenty of room for a 4-column Draft
       Picks grid -- it's only down here, at genuine phone widths, that
       the grid actually runs out of space and needs to fall back to
       stacked rows. */
    .pf-wk-draft__pick--wide { display: block; }
    .pf-wk-draft__pick--wide .pf-wk-draft__round  { margin-bottom: 3px; }
    .pf-wk-draft__pick--wide .pf-wk-draft__meta   { margin-top: 2px; }
    .pf-wk-draft__pick--wide .pf-wk-draft__pickno { margin-top: 3px; text-align: left; }

    /* Schedule pill row on a phone: Overall and the Home/Away group
       each take a full row of their own, Points spans full-width too --
       simpler and more legible than trying to keep several pills per
       row at this width. */
    .pf-wk-schedule__pill--overall { flex-basis: 100%; }
    .pf-wk-schedule__pill-group { flex-basis: 100%; min-width: 0; }
    .pf-wk-schedule__pill--points { flex-basis: 100%; }

    /* Masthead stat strip: stack full-width on a phone rather than
       squeezing four items into one cramped row. */
    .pf-wk-page__stat-strip { flex-direction: column; }
    .pf-wk-page__stat-item { border-right: none; border-bottom: 1px solid #EDE8DD; }
    .pf-wk-page__stat-item:last-child { border-bottom: none; }
}

/* Stacks the sidebar below main content at or under 1024px, in a
   single width-only breakpoint. An earlier version tried to keep the
   two-column layout for landscape tablets specifically by also
   requiring `orientation: portrait` -- that broke ordinary desktop
   testing, though: a resized desktop browser window keeps its height
   fixed while only the width shrinks, so CSS reports "portrait" as
   soon as width drops below whatever the window's height happens to
   be (often 800-900px), well before the intended 1024px cutoff,
   causing premature stacking that had nothing to do with the actual
   breakpoint. A plain width check is far more predictable, at the
   (much smaller, rarer) cost of also stacking on the very few tablets
   whose landscape width happens to land at/under 1024px. */
@media (max-width: 1024px) {
    .pf-wk-page__layout { grid-template-columns: 1fr; }
    .pf-wk-page__sidebar { margin-top: 8px; width: 100%; }
    .pf-wk-facts--sticky { position: static; }
    .pf-wk-facts--sidebar { max-width: none; width: 100%; }
}

/* Once the page has collapsed to a single column (<=1024px) but isn't
   down to phone width yet (>640px), a Sidebar-placed Draft Picks block
   is sitting in the exact same full-width column everything else is --
   the 320px constraint that justified its stacked layout is gone. This
   targets EVERY .pf-wk-draft__pick, not just the ones already tagged
   --wide server-side (which only reflects placement, not viewport), so
   a Sidebar block picks up the same single-row grid a Main block has
   in this range. Below 640px it still falls back to stacked for
   everyone -- see the phone breakpoint above -- since a genuine phone
   width doesn't have room for four columns regardless of placement. */
@media (min-width: 641px) and (max-width: 1024px) {
    .pf-wk-draft__pick {
        display: grid;
        grid-template-columns: 64px 1.4fr 1fr 130px;
        align-items: center;
        gap: 4px 20px;
    }
    .pf-wk-draft__pick .pf-wk-draft__round  { grid-column: 1; margin-bottom: 0; }
    .pf-wk-draft__pick .pf-wk-draft__name   { grid-column: 2; }
    .pf-wk-draft__pick .pf-wk-draft__meta   { grid-column: 3; margin-top: 0; }
    .pf-wk-draft__pick .pf-wk-draft__pickno { grid-column: 4; margin-top: 0; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-wk-clip__icon { transition: none; }
}

.pf-wk-clip__summary:focus-visible {
    outline: 2px solid var(--pf-brick);
    outline-offset: 3px;
}

/* Deep-linked clipping gets a brief highlight so it's obvious which one
   the admin/reader was sent to, and scroll-margin keeps it from landing
   flush under any fixed site header. */
.pf-wk-clip { scroll-margin-top: 90px; }
.pf-wk-clip--highlight { animation: pf-wk-clip-flash 1.8s ease; }
@keyframes pf-wk-clip-flash {
    0%   { box-shadow: 0 0 0 3px var(--pf-brick), 0 1px 3px rgba(11,31,58,.06); }
    100% { box-shadow: 0 1px 3px rgba(11,31,58,.06); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-wk-clip--highlight { animation: none; }
}