/* ═══════════════════════════════════════════════
   my-kings-cadence.css — Styles specific to /my-kings-cadence
   frontendneeded.com

   The page is a fast NFL reference: this week's slate,
   a team's season, and the conference standings.

   Theme — "the cadence". A quarterback calls a rhythm
   at the line; a season keeps a rhythm of its own, one
   beat a week. The hard count is the page's organizing
   motif: the week selector is a row of tick marks, and
   the same ticks form the crown in the masthead mark.

   Deep green field, aged gold, bone type. Regal enough
   for the name, and the green-and-gold is a quiet nod
   to the most famously complicated cadence in football.

   This page deliberately does not load
   /assets/css/styles.css. The shared shell pins the body
   to 100vh with overflow hidden for the golden-ratio
   layout; this is a scrolling reference page. The nav,
   skip link and design tokens are ported below so the
   page still reads as part of the site. Same precedent
   as /doe-v-bonnell/ and /preside-by-side/.
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════ */

:root {
    --field: #09120d;
    --panel: #0e1b14;
    --panel-hi: #132419;
    --panel-edge: rgba(238, 241, 233, 0.07);

    --ink: #eef1e9;
    --muted: rgba(238, 241, 233, 0.46);
    --faint: rgba(238, 241, 233, 0.26);

    --gold: #c9a227;
    --gold-hi: #e3bd45;
    --gold-soft: rgba(201, 162, 39, 0.34);
    --gold-faint: rgba(201, 162, 39, 0.11);

    --rule: rgba(238, 241, 233, 0.08);
    --live: #e4563f;

    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;

    --shell: 1060px;
}

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

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

body {
    font-family: var(--sans);
    background: var(--field);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Tabular figures everywhere: this page is mostly numbers in
       columns — scores, records, kickoff times — and proportional
       digits make those columns jitter as data refreshes. */
    font-variant-numeric: tabular-nums;
    min-height: 100vh;
}

/* A single faint vertical seam down the centre of the field, like
   the hash rail on a pitch. Sits behind everything, never scrolls
   out of register because it is fixed. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%,
            rgba(201, 162, 39, 0.06),
            transparent 70%);
    z-index: 0;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--gold-hi);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════
   HASH RAIL

   A sideline down each outer margin: a thin rule, a
   short tick every yard, a longer gold tick every five.
   The script translates each strip at a fraction of the
   scroll, so the field drifts past slower than the slate
   sitting on it.

   The pattern is perfectly periodic, so the strip is
   only a little taller than the viewport and the script
   wraps its offset by one period instead of laying down
   copies to the bottom of the document. Nothing here
   depends on page height, which means nothing has to be
   remeasured when a week with fourteen games replaces
   one with thirteen.

   Inert: aria-hidden, unselectable, transparent to the
   pointer. With no script the sidelines simply sit still
   and become a static margin texture.
   ═══════════════════════════════════════════════ */

.hashrail {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    contain: layout paint style;
}

.hr-col {
    position: absolute;
    top: 0;
    bottom: 0;

    /* Never wider than the gutter beside the reading column, so the
       field cannot creep under a game card on a mid-width window. */
    width: clamp(46px, (100vw - var(--shell)) / 2, 92px);
    overflow: hidden;

    /* Ticks arrive and leave rather than being cut off by the
       viewport edge. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.hr-left {
    left: 0;
}

.hr-right {
    right: 0;
}

/* The sideline itself. */
.hr-col::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(238, 241, 233, 0.1) 18%,
            rgba(238, 241, 233, 0.1) 82%,
            transparent);
}

.hr-left::before {
    left: 12px;
}

.hr-right::before {
    right: 12px;
}

/* Two tick layers: one yard (15px wide, every 16px) and five yards
   (30px wide, every 80px, in gold). 80 is the period the script wraps
   on — changing either number here means changing PERIOD in the JS. */
.hr-strip {
    position: absolute;
    left: 0;
    right: 0;
    top: -96px;
    height: calc(100% + 192px);
    transform: translate3d(0, 0, 0);
    will-change: transform;

    background-image:
        linear-gradient(to bottom, var(--gold-soft) 0 2px, transparent 2px),
        linear-gradient(to bottom, rgba(238, 241, 233, 0.13) 0 1px, transparent 1px);
    background-size: 30px 80px, 15px 16px;
    background-repeat: repeat-y, repeat-y;
}

.hr-left .hr-strip {
    background-position: 13px 0, 13px 0;
}

.hr-right .hr-strip {
    background-position: right 13px top, right 13px top;
}

/* ═══════════════════════════════════════════════
   SITE NAV — ported from /assets/css/styles.css and
   re-tinted green/gold. Structure and sizing are kept
   identical so the bar lines up with every other page.
   ═══════════════════════════════════════════════ */

.site-nav {
    position: relative;
    z-index: 200;
    background: #060d09;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
            transparent,
            rgba(201, 162, 39, 0.3),
            rgba(201, 162, 39, 0.14),
            rgba(201, 162, 39, 0.3),
            transparent) 1;
    box-shadow: 0 1px 12px rgba(201, 162, 39, 0.05);
    padding: 0 56px;
    display: flex;
    align-items: center;
    gap: 28px;
    height: 44px;
    flex-shrink: 0;
}

.site-nav a[href="/hire-me"] {
    margin-left: auto;
}

.site-nav a {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a.active {
    color: #ffffff;
}

.site-nav .nav-home {
    color: var(--gold);
    margin-right: 8px;
}

.site-nav .nav-home:hover {
    color: #ffffff;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-dropdown-toggle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: default;
    transition: color 0.2s;
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle {
    color: #ffffff;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #060d09;
    border-top: 1px solid rgba(201, 162, 39, 0.12);
    min-width: 176px;
    padding: 6px 0;
    z-index: 100;
}

.nav-dropdown-menu a {
    display: block;
    padding: 9px 18px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
    color: #ffffff;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--ink);
    color: var(--field);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    transition: top 0.15s;
}

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

/* ═══════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════ */

.shell {
    position: relative;
    z-index: 1;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 28px 96px;
}

/* ═══════════════════════════════════════════════
   MASTHEAD

   The mark is five ticks of rising and falling height.
   Read one way it is a crown; read the other it is a
   count — the same shape the week rail below repeats.
   ═══════════════════════════════════════════════ */

.masthead {
    padding: 52px 0 0;
    text-align: center;
}

.crown {
    display: block;
    margin: 0 auto 22px;
    width: 46px;
    height: auto;
    color: var(--gold);
}

.wordmark {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: clamp(2.1rem, 6.4vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
}

.wordmark .kings {
    font-style: italic;
    color: var(--gold-hi);
}

.tagline {
    margin-top: 14px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Visible to a screen reader, to nothing else. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════
   SEASON BAR

   Reads as a dateline under the masthead rather than
   as a control, which is the right weight: most visits
   want the season they are already in.
   ═══════════════════════════════════════════════ */

.seasonbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 18px;
}

.season-step {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--faint);
    font-size: 0.85rem;
    line-height: 1;
    transition: color 0.16s, background 0.16s;
}

.season-step:hover:not(:disabled) {
    color: var(--gold-hi);
    background: var(--gold-faint);
}

.season-step:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.season-label {
    min-width: 132px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* An archived season is called out, so a reader who lands on a deep
   link never mistakes 2019 scores for this week's. */
.season-label.is-past {
    color: var(--gold);
}

/* ═══════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════ */

.tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 36px 0 0;
    border-bottom: 1px solid var(--rule);
}

.tab {
    position: relative;
    padding: 12px 22px 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.18s;
}

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

.tab[aria-selected='true'] {
    color: var(--ink);
}

/* The active marker is a short gold rule that reads as one
   more tick in the count rather than a generic underline. */
.tab[aria-selected='true']::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    background: var(--gold);
}

/* ═══════════════════════════════════════════════
   WEEK RAIL — the hard count

   Every week of the season is a tick. Played weeks are
   dimmed, the selected week is gold and tall, and the
   current week carries a dot. Clicking a tick jumps to
   that week, so the motif is also the fastest control
   on the page.
   ═══════════════════════════════════════════════ */

.weekbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 30px 0 0;
}

.weeknav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.weeknav button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1;
    transition: color 0.18s, border-color 0.18s, background 0.18s;
}

.weeknav button:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--gold-soft);
    background: var(--gold-faint);
}

.weeknav button:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.weeklabel {
    text-align: center;
    min-width: 0;
}

.weeklabel .wl-week {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.32rem;
    line-height: 1.15;
    white-space: nowrap;
}

.weeklabel .wl-range {
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

.rail {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 34px;
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

.tick {
    position: relative;
    width: 12px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
}

/* The bar itself. Height encodes nothing but rhythm —
   a repeating 9 / 13 / 9 / 17 pattern, so the rail reads
   as a cadence being counted rather than a bar chart. */
.tick::before {
    content: '';
    width: 2px;
    height: 9px;
    background: var(--faint);
    transition: height 0.18s, background 0.18s;
}

.tick:nth-child(2n)::before {
    height: 13px;
}

.tick:nth-child(4n)::before {
    height: 17px;
}

.tick:hover::before {
    background: var(--ink);
}

.tick[aria-current='true']::before {
    background: var(--gold);
    height: 26px;
    width: 3px;
}

/* A dot over the week the season is actually in, so you can
   always see how far the view has strayed from today. */
.tick.is-now::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold-hi);
}

.tick .tick-n {
    position: absolute;
    inset: 0;
    opacity: 0;
    font-size: 0;
}

.zonenote {
    margin: 22px 0 0;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: right;
}

.zonenote .today-btn {
    color: var(--gold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: 14px;
    border-bottom: 1px solid var(--gold-soft);
}

.zonenote .today-btn:hover {
    color: var(--gold-hi);
}

/* ═══════════════════════════════════════════════
   DAY GROUPS
   ═══════════════════════════════════════════════ */

.daygroup {
    margin-top: 34px;
}

.dayhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.dayhead h2 {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    white-space: nowrap;
}

.dayhead .dh-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-soft), transparent);
}

/* ═══════════════════════════════════════════════
   GAME CARD

   Two team rows, away above home — the way a matchup is
   spoken. Each row carries the team's own colour as a
   left edge bar, its logo, name, and a deliberately
   quiet record. Scores appear only once a game has
   started; before that the right column is the kickoff
   time in the reader's own zone.
   ═══════════════════════════════════════════════ */

.games {
    display: grid;
    gap: 10px;
}

.game {
    display: grid;
    grid-template-columns: 1fr 132px;
    background: var(--panel);
    border: 1px solid var(--panel-edge);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s;
}

.game:hover {
    background: var(--panel-hi);
    border-color: rgba(238, 241, 233, 0.13);
}

.game.is-live {
    border-color: rgba(228, 86, 63, 0.45);
}

.sides {
    display: grid;
    padding: 6px 0;
}

.side {
    display: grid;
    grid-template-columns: 34px 30px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 9px 16px 9px 0;
    position: relative;
}

/* Team colour rail. Set inline per team from the API's own
   colour field; the JS picks whichever of the team's two
   colours stays visible against this dark a field. */
.side::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--team, var(--faint));
}

.side .ha {
    grid-column: 1;
    padding-left: 13px;
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--faint);
    text-transform: uppercase;
}

/* Order already says which team is visiting, but only to someone who
   knows the convention. The label says it outright. */
.side .ha-short {
    display: none;
}

.side .logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.logo-sm-fallback,
.th-logo-fallback {
    display: grid;
    place-items: center;
    font-size: 0.56rem;
    font-weight: 700;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 50%;
    flex-shrink: 0;
}

.logo-sm-fallback {
    width: 22px;
    height: 22px;
}

.th-logo-fallback {
    width: 64px;
    height: 64px;
    font-size: 0.9rem;
}

.side .logo-fallback {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 50%;
}

.side .who {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}

.side .name {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The record is reference, not the point of the view —
   it stays small and dim on purpose. */
.side .rec {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--faint);
    white-space: nowrap;
    flex-shrink: 0;
}

.side .score {
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    min-width: 34px;
    text-align: right;
}

/* A loser's row recedes; the winner keeps full contrast and
   is marked with a gold caret so the result reads at a glance. */
.side.lost .name,
.side.lost .score {
    color: var(--muted);
    font-weight: 500;
}

.side.lost .logo {
    opacity: 0.45;
}

.side.won .score::after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid var(--gold);
}

.meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 14px 18px;
    border-left: 1px solid var(--panel-edge);
    text-align: right;
}

.meta .kick {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.meta .sub {
    font-size: 0.67rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
}

.meta .final {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.meta .livetag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--live);
}

.meta .livetag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--live);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

/* ═══════════════════════════════════════════════
   BYE STRIP — who is not playing this week
   ═══════════════════════════════════════════════ */

.byes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}

.byes h2 {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: 4px;
}

.byes .bye-team {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
}

.byes .bye-team img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.75;
}

/* ═══════════════════════════════════════════════
   TEAMS VIEW
   ═══════════════════════════════════════════════ */

/* Two divisions abreast, the same measure the standings tables use, so
   switching tabs does not re-flow the reader's sense of the page. Each
   division holds exactly four teams, which is why the track count is
   fixed rather than auto-fill — auto-fill leaves four dead tracks on
   every row. */
.pickwrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 26px 34px;
    margin-top: 30px;
}

.pickgroup {
    margin-bottom: 0;
}

.pickgroup h3 {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.pickgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--panel-edge);
    border-radius: 8px;
    background: var(--panel);
    transition: border-color 0.16s, background 0.16s;
}

.chip:hover {
    background: var(--panel-hi);
    border-color: var(--gold-soft);
}

.chip[aria-pressed='true'] {
    border-color: var(--gold);
    background: var(--gold-faint);
}

.chip img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.chip span {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Selected team header ── */

.teamhead {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 30px 0 4px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
}

.teamhead img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

.teamhead .th-name {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.4rem, 4.2vw, 2rem);
    line-height: 1.1;
}

.teamhead .th-sub {
    margin-top: 5px;
    font-size: 0.73rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.teamhead .th-back {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
}

.teamhead .th-back:hover {
    color: var(--gold);
}

/* ── Season rows ── */

.season {
    margin-top: 8px;
}

.srow {
    display: grid;
    grid-template-columns: 52px 74px 1fr 118px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule);
}

.srow:hover {
    background: var(--panel);
}

.srow.is-bye {
    color: var(--faint);
}

.srow .s-wk {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.srow .s-date {
    font-size: 0.76rem;
    color: var(--muted);
    white-space: nowrap;
}

.srow .s-opp {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.srow .s-opp img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.srow .s-at {
    font-size: 0.74rem;
    color: var(--faint);
    width: 18px;
    flex-shrink: 0;
}

.srow .s-name {
    font-size: 0.94rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srow .s-res {
    text-align: right;
    font-size: 0.9rem;
    white-space: nowrap;
}

.srow .s-res .wl {
    font-weight: 700;
    margin-right: 7px;
}

.srow .s-res .wl.W {
    color: var(--gold-hi);
}

.srow .s-res .wl.L {
    color: var(--muted);
}

.srow .s-res .wl.T {
    color: var(--muted);
}

.srow .s-res .upcoming {
    color: var(--muted);
    font-size: 0.84rem;
}

.srow.is-post .s-wk {
    color: var(--gold);
}

.srow .s-byelabel {
    grid-column: 3 / -1;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ═══════════════════════════════════════════════
   STANDINGS VIEW
   ═══════════════════════════════════════════════ */

.confswitch {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 30px 0 4px;
}

.confswitch button {
    padding: 9px 26px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--rule);
    border-radius: 999px;
    transition: color 0.16s, border-color 0.16s, background 0.16s;
}

.confswitch button:hover {
    color: var(--ink);
    border-color: var(--gold-soft);
}

.confswitch button[aria-pressed='true'] {
    color: var(--field);
    background: var(--gold);
    border-color: var(--gold);
}

.divisions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 30px 34px;
    margin-top: 28px;
}

.division h3 {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gold-soft);
}

table.stand {
    width: 100%;
    border-collapse: collapse;
}

table.stand th {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: right;
    padding: 9px 6px 7px;
}

table.stand th:first-child {
    text-align: left;
}

table.stand td {
    padding: 9px 6px;
    font-size: 0.86rem;
    text-align: right;
    border-top: 1px solid var(--rule);
}

table.stand td:first-child {
    text-align: left;
}

table.stand tbody tr:hover {
    background: var(--panel);
}

.stand .t-team {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stand .t-team img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.stand .t-team button {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stand .t-team button:hover {
    color: var(--gold-hi);
}

/* The division leader is the only row that carries weight. */
.stand tr.leader .t-team button {
    font-weight: 700;
}

.stand tr.leader td {
    background: var(--gold-faint);
}

.stand .num-strong {
    font-weight: 600;
}

.stand .num-dim {
    color: var(--muted);
}

.stand .strk-w {
    color: var(--gold-hi);
}

.stand .strk-l {
    color: var(--muted);
}

/* ═══════════════════════════════════════════════
   STATES
   ═══════════════════════════════════════════════ */

.state {
    text-align: center;
    padding: 72px 20px;
    color: var(--muted);
}

.state .state-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: 8px;
}

.state p {
    font-size: 0.88rem;
    max-width: 46ch;
    margin: 0 auto;
}

.state button {
    margin-top: 20px;
    padding: 9px 22px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
}

.state button:hover {
    background: var(--gold-faint);
}

/* Loading: a hard count. The three beats light in sequence —
   the page's own way of saying it is waiting on the snap. */
.count {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 80px 0;
}

.count span {
    width: 3px;
    height: 22px;
    background: var(--gold-soft);
    animation: beat 1.05s ease-in-out infinite;
}

.count span:nth-child(2) {
    animation-delay: 0.14s;
}

.count span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes beat {

    0%,
    100% {
        transform: scaleY(0.5);
        background: var(--gold-soft);
    }

    50% {
        transform: scaleY(1);
        background: var(--gold-hi);
    }
}

/* ═══════════════════════════════════════════════
   COLOPHON
   ═══════════════════════════════════════════════ */

.colophon {
    margin-top: 64px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    font-size: 0.7rem;
    line-height: 1.7;
    color: var(--faint);
    text-align: center;
}

.colophon a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
}

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

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 1180px) {
    .hashrail {
        display: none;
    }
}

@media (max-width: 860px) {
    .divisions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .site-nav {
        padding: 0 16px;
        gap: 14px;
        height: 40px;
        position: sticky;
        top: 0;
    }

    .site-nav a,
    .nav-dropdown-toggle {
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .nav-dropdown-menu {
        position: fixed;
        top: 40px;
        left: 0;
        width: 100%;
        min-width: unset;
    }

    .shell {
        padding: 0 16px 72px;
    }

    .masthead {
        padding-top: 36px;
    }

    .season-label {
        min-width: 112px;
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    .byes {
        gap: 8px;
    }

    .tabs {
        gap: 0;
    }

    .tab {
        flex: 1;
        padding: 12px 6px 14px;
        font-size: 0.65rem;
        letter-spacing: 0.1em;
    }

    /* The rail is the least essential control on a phone —
       prev / next and the label carry the navigation, so the
       ticks drop out rather than compress into mush. */
    .weekbar {
        justify-content: center;
    }

    .rail {
        display: none;
    }

    .zonenote {
        text-align: center;
    }

    .game {
        grid-template-columns: 1fr 96px;
    }

    .side {
        grid-template-columns: 22px 26px 1fr auto;
        gap: 9px;
        padding-right: 12px;
    }

    /* Down to one letter on a phone rather than losing the
       distinction entirely. */
    .side .ha {
        padding-left: 11px;
    }

    .side .ha-long {
        display: none;
    }

    .side .ha-short {
        display: inline;
    }

    .side .logo,
    .side .logo-fallback {
        width: 26px;
        height: 26px;
    }

    .side .who {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .side .name {
        font-size: 0.92rem;
    }

    .side .rec {
        font-size: 0.66rem;
    }

    .side .score {
        font-size: 1.1rem;
        min-width: 26px;
    }

    .meta {
        padding: 12px;
    }

    .meta .kick {
        font-size: 0.88rem;
    }

    .meta .sub {
        font-size: 0.6rem;
    }

    .srow {
        grid-template-columns: 40px 1fr 96px;
        gap: 10px;
        padding: 11px 6px;
    }

    .srow .s-date {
        display: none;
    }

    .srow .s-name {
        font-size: 0.86rem;
    }

    .teamhead img {
        width: 48px;
        height: 48px;
    }

    .pickwrap {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .chip {
        padding: 8px 7px;
        gap: 6px;
    }

    .chip span {
        font-size: 0.72rem;
    }

    table.stand td {
        font-size: 0.8rem;
        padding: 8px 4px;
    }

    /* PF / PA / DIFF are the first things to go on a narrow
       screen; W-L-T, PCT and streak carry the table. */
    table.stand .opt {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

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