/* Next Whistle: the Game Program design (locked 2026-10-16).
   A weekly game program for the coaching job market. Newspaper structure; every job wears its
   school's colors (rounded cards, sleeve stripes). Light only, by choice.
   School colors arrive per job as --c1 (primary), --c2 (secondary), --fg (text on primary). */

/* Self-hosted type (SIL OFL 1.1, licences in /assets/fonts). Variable files from Google Fonts, split
   latin / latin-ext so a page loads four small files. swap: text shows in the fallback at once. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800 900; font-display: swap; src: url(/assets/fonts/big-shoulders-display-800-900-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800 900; font-display: swap; src: url(/assets/fonts/big-shoulders-display-800-900-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-400-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/schibsted-grotesk-400-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-mono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-mono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --newsprint: #FCFCFB; --sheet: #F3F4F2; --program-ink: #16181C; --track-red: #B5452B;
  --hairline: #DDE0E3; --caption: #5E636B; --open-green: #2B6B3F;
  --unknown-1: #9AA1AA; --unknown-2: #C9CDD3;
  --head: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --data: "DM Mono", ui-monospace, Menlo, monospace;
  --gutter: 24px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--newsprint); color: var(--program-ink); font: 400 16px/1.55 var(--body); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--track-red); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; background: var(--program-ink); color: var(--newsprint); padding: 10px 14px; z-index: 10; }
.page { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.muted { color: var(--caption); }
.mono { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* Masthead and nav */
.mast { padding-block: 16px 10px; border-bottom: 4px double var(--program-ink); display: grid; gap: 4px; }
.mast-row { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font: 400 11px/1.3 var(--data); text-transform: uppercase; letter-spacing: .08em; color: var(--caption); }
.logo { font: 900 clamp(46px, 8vw, 92px)/.84 var(--head); text-transform: uppercase; letter-spacing: -.005em; text-decoration: none; display: inline-block; }
.logo span { color: var(--track-red); }
.logo.sm { font-size: 26px; line-height: 1; }
.nav { display: flex; gap: 4px 18px; flex-wrap: wrap; align-items: center; padding-block: 10px; border-bottom: 1px solid var(--program-ink); font: 600 14px/1.3 var(--body); }
.nav a { text-decoration: none; padding: 4px 0; }
.nav a[aria-current="page"] { color: var(--track-red); }
.nav .r { margin-left: auto; font: 400 12px/1.4 var(--data); color: var(--caption); }
.picker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--hairline); }
.picker label { font: 500 11px/1 var(--data); letter-spacing: .08em; text-transform: uppercase; color: var(--caption); }
.picker select { font: 600 15px/1.2 var(--body); color: var(--program-ink); background: var(--newsprint); border: 1.5px solid var(--program-ink); border-radius: 2px; padding: 9px 30px 9px 10px; min-height: 44px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--program-ink) 50%), linear-gradient(135deg, var(--program-ink) 50%, transparent 50%); background-position: right 14px top 50%, right 9px top 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.picker small { font: 400 12px/1.4 var(--data); color: var(--caption); margin-left: auto; }

/* Front page */
.frontpage { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.lead { padding: 22px var(--gutter) 22px 0; border-right: 1px solid var(--hairline); display: grid; gap: 12px; align-content: start; }
.side { padding: 22px 0 22px var(--gutter); display: grid; gap: 14px; align-content: start; }
.kick { font: 500 11px/1.3 var(--data); letter-spacing: .1em; text-transform: uppercase; color: var(--track-red); }
h1, h2, h3 { margin: 0; }
.hed { font: 900 clamp(34px, 4.6vw, 56px)/.9 var(--head); text-transform: uppercase; text-wrap: balance; }
.dek { font-size: 17.5px; line-height: 1.5; max-width: 40em; margin: 0; }
.by { font: 400 12px/1.4 var(--data); color: var(--caption); }
.boxhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-top: 2px solid var(--program-ink); padding-top: 8px; margin-top: 6px; }
.boxhead h2 { font: 700 13px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; }
.boxhead span { font: 400 11px/1.3 var(--data); color: var(--caption); }
.ofw { display: grid; grid-template-columns: 6px minmax(0, 1fr) 64px minmax(0, .8fr); gap: 0 10px; font-size: 14px; }
.ofw > * { padding: 8px 0; border-bottom: 1px solid var(--hairline); min-width: 0; }
.ofw .h { font: 500 10.5px/1.3 var(--data); color: var(--caption); text-transform: uppercase; letter-spacing: .06em; }
.ofw a { text-decoration: none; } .ofw a:hover { text-decoration: underline; }
.stripe { background: linear-gradient(to bottom, var(--c1, var(--unknown-1)) 0 66%, var(--c2, var(--unknown-2)) 66% 100%); border-radius: 1px; padding: 0 !important; }
.st { font: 500 11px/1.6 var(--data); text-transform: uppercase; }
.st.open { color: var(--open-green); } .st.filled { color: var(--track-red); }
.bysport { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 2px solid var(--program-ink); }
.bysport a { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; display: block; }
.bysport b { font: 800 28px/1 var(--head); display: block; font-variant-numeric: tabular-nums; }
.bysport span { font-size: 12.5px; color: var(--caption); }
.spons { border: 1px solid var(--program-ink); padding: 10px 12px; font-size: 13.5px; display: grid; gap: 4px; }
.spons small { font: 500 10px/1 var(--data); letter-spacing: .1em; text-transform: uppercase; color: var(--caption); }

/* Signup */
.signup { background: var(--program-ink); color: var(--newsprint); padding: 18px; display: grid; gap: 10px; border-radius: 2px; }
.signup h2 { font: 900 28px/1 var(--head); text-transform: uppercase; }
.signup p { font-size: 14px; margin: 0; opacity: .9; }
.signup form { display: grid; gap: 8px; }
.signup .row { display: flex; gap: 6px; flex-wrap: wrap; }
.signup input[type=email] { flex: 1 1 180px; font: 400 16px var(--body); padding: 11px 12px; border: 0; border-radius: 2px; background: var(--newsprint); color: var(--program-ink); min-height: 44px; }
.signup select { font: 400 15px var(--body); padding: 10px; border: 0; border-radius: 2px; background: var(--newsprint); color: var(--program-ink); min-height: 44px; }
.signup button { font: 800 18px/1 var(--head); text-transform: uppercase; letter-spacing: .03em; background: var(--track-red); color: #FFF; border: 0; padding: 12px 16px; border-radius: 2px; cursor: pointer; min-height: 44px; }
.signup button[disabled] { opacity: .6; cursor: wait; }
.signup .msg { font-size: 14px; min-height: 1.4em; }
.signup .msg.ok { color: #9FD8B4; } .signup .msg.err { color: #F2A38F; }
.signup .fine { font-size: 12px; opacity: .75; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rounded school-color cards that flip (Game Program + Roster Card) */
.deckwrap, .mapwrap { border-top: 1px solid var(--program-ink); padding-block: 4px 28px; display: grid; gap: 14px; }
.deckwrap > header, .mapwrap > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-top: 14px; }
.deckwrap h2, .mapwrap h2 { font: 900 30px/1 var(--head); text-transform: uppercase; }
.deckwrap header span, .mapwrap header span { font: 400 11.5px/1.3 var(--data); color: var(--caption); }
.deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.card { perspective: 1400px; min-width: 0; }
.card-in { position: relative; display: grid; transition: transform .5s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; height: 100%; }
.face { grid-area: 1 / 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); backface-visibility: hidden; -webkit-backface-visibility: hidden; min-width: 0; }
.face.front { background: var(--sheet); display: grid; grid-template-rows: auto 1fr; position: relative; min-height: 236px; }
.face.front .cover { position: absolute; inset: 0; border-radius: 14px; }
.card:not(.flipped) .face.front:hover { box-shadow: 0 6px 18px rgba(22,24,28,.10); }
.back { position: absolute; inset: 0; overflow: auto; transform: rotateY(180deg); background: var(--program-ink); color: var(--newsprint); border: 6px solid var(--c1, var(--unknown-1)); padding: 10px 12px 12px; display: grid; gap: 8px; grid-template-rows: auto auto 1fr; }
.card.flipped .card-in { transform: rotateY(180deg); }
.back-top { display: grid; gap: 2px; border-bottom: 3px solid var(--c2, var(--unknown-2)); padding-bottom: 8px; }
.back-top small { font: 600 10.5px/1.25 var(--data); letter-spacing: .07em; text-transform: uppercase; opacity: .8; }
.back-top b { font: 900 19px/1 var(--head); text-transform: uppercase; overflow-wrap: anywhere; }
.back dl { margin: 0; display: grid; gap: 2px; font-size: 12.5px; }
.back dl div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.back dt { font: 400 10.5px/1.6 var(--data); text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.back dd { margin: 0; overflow-wrap: anywhere; }
.back-actions { display: flex; gap: 6px; align-self: end; }
.back-actions .unflip { margin-left: auto; font-size: 16px; padding: 6px 10px; }
.back-actions a, .back-actions button { font: 600 13px/1 var(--body); padding: 9px 10px; border-radius: 6px; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid rgba(252,252,251,.35); color: var(--newsprint); background: transparent; cursor: pointer; }
.back-actions a.go { background: var(--newsprint); color: var(--program-ink); border-color: var(--newsprint); }
.jersey { padding: 14px 14px 18px; color: var(--fg, var(--program-ink)); background: var(--c1, var(--unknown-1)); position: relative; display: grid; gap: 4px; min-height: 116px; align-content: end; }
.jersey::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--c2, var(--unknown-2)); }
.jersey small { font: 600 11px/1.25 var(--data); letter-spacing: .07em; text-transform: uppercase; }
.jersey b { font: 900 24px/.96 var(--head); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.badge { font: 500 10px/1 var(--data); text-transform: uppercase; color: var(--track-red); border: 1.5px solid var(--track-red); border-radius: 999px; padding: 3px 6px; white-space: nowrap; }
.jersey .badge { position: absolute; top: 11px; right: 11px; background: var(--newsprint); border-color: var(--newsprint); }
.info { padding: 12px 14px 14px; display: grid; gap: 10px; align-content: start; }
.meta { display: flex; gap: 6px; flex-wrap: wrap; }
.meta span { font-size: 12px; line-height: 1.3; padding: 4px 8px; border-radius: 999px; background: var(--newsprint); border: 1px solid var(--hairline); }
.pay { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hairline); padding-top: 9px; gap: 8px; }
.pay b { font: 500 17px/1 var(--data); font-variant-numeric: tabular-nums; }
.pay b.none { font: 400 13px/1 var(--data); color: var(--caption); }
.pay span { font-size: 12px; color: var(--caption); }
@media (prefers-reduced-motion: reduce) {
  .card-in { transition: none; transform: none !important; }
  .back { transform: none; visibility: hidden; }
  .card.flipped .back { visibility: visible; } .card.flipped .face.front { visibility: hidden; }
}

/* USA map (Census boundaries) */
.usmap { margin: 0; display: grid; gap: 10px; }
.usmap svg { width: 100%; height: auto; display: block; }
.usmap .st { stroke: none; transition: fill .15s; }
.usmap .none { fill: #ECEEEC; } .usmap .b1 { fill: #F2D6CC; } .usmap .b2 { fill: #E3A28F; } .usmap .b3 { fill: #CB6A51; } .usmap .b4 { fill: var(--track-red); }
.usmap .borders { fill: none; stroke: var(--newsprint); stroke-width: 1.2; stroke-linejoin: round; pointer-events: none; }
.usmap a .st:hover, .usmap a:focus-visible .st { fill: var(--program-ink); }
.usmap a:focus-visible { outline: none; }
.usmap .cur { stroke: var(--program-ink); stroke-width: 2.5; }
.usmap .lab { font: 600 11px var(--data); text-anchor: middle; fill: var(--program-ink); pointer-events: none; }
.usmap .lab .n { font: 800 13px var(--head); }
.usmap .lab.b4 { fill: #FFFFFF; }
.usmap .lab.co { font-size: 11px; }
.usmap .lead { stroke: var(--caption); stroke-width: .8; }
.usmap a:hover .lab, .usmap a:focus-visible .lab { fill: #FFFFFF; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 12px/1.4 var(--data); color: var(--caption); align-items: center; }
.legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend i.none { background: #ECEEEC; } .legend i.b1 { background: #F2D6CC; } .legend i.b2 { background: #E3A28F; } .legend i.b3 { background: #CB6A51; } .legend i.b4 { background: var(--track-red); }

/* State board */
.boardtop { padding-block: 22px 12px; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px; }
.boardtop .hed { font-size: clamp(48px, 7vw, 84px); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 12px; position: sticky; top: env(safe-area-inset-top, 0px); background: var(--newsprint); z-index: 2; padding-top: 8px; border-bottom: 1px solid var(--hairline); }
.chip { font: 500 13.5px/1 var(--body); padding: 8px 11px; min-height: 36px; border: 1.5px solid var(--program-ink); border-radius: 2px; background: var(--newsprint); color: var(--program-ink); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.chip em { font: 400 11px/1 var(--data); font-style: normal; color: var(--caption); }
.chip[aria-pressed="true"] { background: var(--program-ink); color: var(--newsprint); }
.chip[aria-pressed="true"] em { color: var(--newsprint); opacity: .75; }
.chip select { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background: transparent; border: 0; margin: -8px -11px; padding: 8px 11px; min-height: 36px; cursor: pointer; }
.chip select:focus-visible { outline: none; }
.chip:focus-within { outline: 3px solid var(--track-red); outline-offset: 2px; }
.sporthead { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0 6px; border-bottom: 2px solid var(--program-ink); }
.sporthead h2 { font: 900 26px/1 var(--head); text-transform: uppercase; }
.sporthead span { font: 400 12px/1 var(--data); color: var(--caption); }
.rowx { display: grid; grid-template-columns: 8px minmax(0, 1.7fr) minmax(0, .8fr) 100px 70px 92px; gap: 0 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline); align-items: center; font-size: 14px; text-decoration: none; }
.rowx:hover b { text-decoration: underline; }
.rowx .stripe { align-self: stretch; }
.rowx b { font-weight: 700; font-size: 15px; }
.rowx .sub { display: block; font-size: 13px; color: var(--caption); }
.rowx .r { text-align: right; font: 400 13px/1.25 var(--data); font-variant-numeric: tabular-nums; }
.rowx.filled b { text-decoration: line-through; text-decoration-color: var(--track-red); text-decoration-thickness: 2px; color: var(--caption); }
.rowx .badge { margin-left: 6px; vertical-align: 2px; }
.empty { font-size: 14.5px; color: var(--caption); border: 1px dashed var(--hairline); padding: 14px; border-radius: 2px; }
.count-live { font: 400 12px/1.4 var(--data); color: var(--caption); padding-top: 10px; }

/* Job page */
.jobhead { background: var(--c1, var(--program-ink)); color: var(--fg, var(--newsprint)); position: relative; }
.jobhead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--c2, var(--track-red)); }
.jobhead .page { padding-block: 22px 26px; display: grid; gap: 8px; }
.jobhead .crumbs { font: 400 12px/1.4 var(--data); }
.jobhead .crumbs a { text-decoration: none; } .jobhead .crumbs a:hover { text-decoration: underline; }
.jobhead .school { font: 600 13px/1.25 var(--data); text-transform: uppercase; letter-spacing: .08em; }
.jobhead h1 { font: 900 clamp(36px, 5.4vw, 64px)/.9 var(--head); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.closedbar { background: var(--track-red); color: #FFF; }
.closedbar .page { padding-block: 10px; font-weight: 600; }
.jobbody { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.jobmain { padding: 22px var(--gutter) 28px 0; border-right: 1px solid var(--hairline); display: grid; gap: 20px; align-content: start; }
.jobaside { padding: 22px 0 28px var(--gutter); display: grid; gap: 14px; align-content: start; }
.jobaside h2 { font: 700 13px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--program-ink); padding-bottom: 6px; }
.money { display: grid; gap: 4px; }
.money .big { font: 900 60px/.9 var(--head); font-variant-numeric: tabular-nums; }
.money .big.none { font-size: 34px; color: var(--caption); }
.money .src { font: 400 12px/1.45 var(--data); color: var(--caption); }
.ruler { display: grid; gap: 6px; max-width: 440px; }
.track { position: relative; height: 8px; background: var(--hairline); border-radius: 4px; margin: 4px 0; }
.track i { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--caption); border-radius: 2px; }
.track i.me { background: var(--track-red); width: 6px; }
.ends { display: flex; justify-content: space-between; font: 400 11px/1 var(--data); color: var(--caption); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--program-ink); margin: 0; }
.facts div { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--hairline); min-width: 0; }
.facts dt { font: 500 10.5px/1.4 var(--data); letter-spacing: .06em; text-transform: uppercase; color: var(--caption); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.apply { display: inline-block; font: 900 22px/1 var(--head); text-transform: uppercase; letter-spacing: .03em; background: var(--program-ink); color: var(--newsprint); padding: 15px 18px; border-radius: 2px; text-decoration: none; }
.apply:hover { background: #000; }
.source { font: 400 12.5px/1.5 var(--data); color: var(--caption); }
.title-raw { font-size: 14px; color: var(--caption); }
.stack { display: grid; gap: 12px; }

/* States index */
.statelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 24px; border-top: 2px solid var(--program-ink); margin-bottom: 32px; }
.statelist a { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; font-weight: 600; }
.statelist a span { font: 400 13px/1.6 var(--data); color: var(--caption); }
.statelist a:hover { color: var(--track-red); }

/* Footer */
.foot { border-top: 4px double var(--program-ink); margin-top: 24px; padding-block: 18px 40px; display: grid; gap: 8px; font-size: 13px; color: var(--caption); }
.foot nav { display: flex; gap: 6px 18px; flex-wrap: wrap; font-weight: 600; color: var(--program-ink); }
.foot nav a { text-decoration: none; }

@media (max-width: 900px) {
  .frontpage, .jobbody { grid-template-columns: 1fr; }
  .lead, .jobmain { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--hairline); }
  .side, .jobaside { padding-left: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rowx { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .rowx .hide { display: none; }
  .nav .r, .picker small { display: none; }
}

/* ===================== Motion and photography (design/motion) =====================
   Rule: every page is complete and readable with no motion. JS adds .motion to <html> only when
   the viewer allows motion; everything below only moves things that are already visible. */

/* Photo strips: full-bleed, one film grade, parallax on scroll */
.strip { position: relative; overflow: hidden; overflow: clip; height: clamp(170px, 30vw, 360px); background: var(--program-ink); }
.strip.sm { height: clamp(110px, 16vw, 190px); }
.strip img { position: absolute; inset: -14% 0; width: 100%; height: 128%; object-fit: cover; display: block; will-change: transform; }
.strip .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,24,28,.72) 0%, rgba(22,24,28,.12) 55%, rgba(22,24,28,0) 100%); }
.strip .over { position: absolute; left: 0; right: 0; bottom: 0; }
.strip .over .page { padding-block: 0 18px; color: #FCFCFB; display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.strip .over b { font: 900 clamp(30px, 5vw, 60px)/.88 var(--head); text-transform: uppercase; text-wrap: balance; max-width: 16ch; }
.strip .over span { font: 500 11.5px/1.4 var(--data); letter-spacing: .08em; text-transform: uppercase; }
@supports (animation-timeline: view()) {
  .motion .strip img { animation: strip-par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes strip-par { from { transform: translateY(-9%); } to { transform: translateY(9%); } }
}

/* Scoreboard crawl of this week's new jobs */
.ticker { display: flex; align-items: stretch; background: var(--program-ink); color: var(--newsprint); border-block: 3px solid var(--track-red); overflow: hidden; }
.ticker .tk-label { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--track-red); font: 900 17px/1 var(--head); text-transform: uppercase; letter-spacing: .03em; z-index: 1; }
.ticker .tk-label i { width: 8px; height: 8px; border-radius: 50%; background: #FCFCFB; }
.ticker .tk-track { overflow: hidden; flex: 1; min-width: 0; }
.ticker ul { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.ticker li a { display: flex; align-items: center; gap: 9px; padding: 11px 18px; text-decoration: none; white-space: nowrap; font: 500 14px/1 var(--body); border-right: 1px solid rgba(252,252,251,.14); }
.ticker li a:hover { background: rgba(252,252,251,.08); }
.ticker li .sw { width: 10px; height: 16px; border-radius: 2px; background: linear-gradient(to bottom, var(--c1, var(--unknown-1)) 0 62%, var(--c2, var(--unknown-2)) 62% 100%); flex: none; }
.ticker li em { font: 400 12px/1 var(--data); font-style: normal; opacity: .75; }
.motion .ticker ul { animation: crawl var(--crawl, 90s) linear infinite; }
.motion .ticker:hover ul, .motion .ticker:focus-within ul { animation-play-state: paused; }
@keyframes crawl { to { transform: translateX(-50%); } }
.ticker ul .dup { display: none; } .motion .ticker ul .dup { display: list-item; }
.motion .ticker .tk-track { overflow: hidden; }
.ticker .tk-track { overflow-x: auto; }

/* Color bands */
.band-ink { background: var(--program-ink); color: var(--newsprint); }
.band-ink .page { padding-block: 28px; }
.band-red { background: var(--track-red); color: #FFFFFF; }
.cta-band { position: relative; overflow: hidden; overflow: clip; color: #FCFCFB; background: var(--program-ink); margin-top: 28px; }
.cta-band img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; opacity: .55; will-change: transform; }
.cta-band .page { position: relative; padding-block: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: center; }
.cta-band h2 { font: 900 clamp(40px, 6vw, 76px)/.88 var(--head); text-transform: uppercase; }
.cta-band p { font-size: 18px; max-width: 34em; margin: 10px 0 0; }
.cta-band .signup { background: rgba(22,24,28,.86); border-top: 6px solid var(--track-red); }
@media (max-width: 820px) { .cta-band .page { grid-template-columns: 1fr; } }
@supports (animation-timeline: view()) {
  .motion .cta-band img { animation: strip-par linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
.statesband { background: var(--sheet); }

/* Cards rise into place as they scroll in (they are visible the whole time) */
.motion .deck .card { transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.motion .deck .card.in { transform: none; }
.card .face.front { transition: box-shadow .2s, transform .2s; }
.card:not(.flipped) .face.front:hover { transform: translateY(-3px) rotate(-.4deg); }

/* Map states settle in, west to east, when the map is first seen */
.motion .usmap.go .st { transform-box: fill-box; transform-origin: center; animation: settle .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes settle { from { transform: scale(.82); } to { transform: none; } }

/* Headline count-up and the masthead period */
.motion .logo span { display: inline-block; animation: dot 1.4s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes dot { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .strip img, .cta-band img, .ticker ul, .usmap .st, .logo span, .deck .card { animation: none !important; transform: none !important; transition: none !important; }
}
.mapband { background: var(--sheet); border-top: 1px solid var(--program-ink); }

/* Text pages: /contact/, /privacy/ */
.prose h2 { font: 900 24px/1 var(--head); text-transform: uppercase; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--program-ink); }
.prose p { margin: 0; max-width: 62ch; }