/* Home page ("County at night"). Only index.html loads this file; home.css stays shared with /news, /gallery,
   /changelog and the SOP pages, so everything here is under body.front or uses f- names.
   Colours are the theme's own variables (site.css + theme.css), so every theme and seasonal effect recolours it.

   PHOTO SLOTS: four .f-slot divs in index.html wait for in-game screenshots. An empty slot is not shown at all; the
   hero then shows the patch, the county cards their line drawings. Paste the <img> line from the comment above a slot
   into it and that spot switches to the photo layout by itself (the :has(img) rules below).
   Shot list (in-game, no HUD, no minimap, no chat, no names over heads; game window 16:9 at 2560x1440 or larger;
   WebP quality 80, each under ~350 KB; put the file next to index.html and add it to the cp list in wrangler.jsonc):
   1. county-sandy-night.webp  2560x1440 landscape. Sandy Shores at night from the hills to the south-west, the town
      lights in the lower third, the lake and the dark ridge behind; the left half of the sky calm (the headline sits there).
   2. county-route68.webp      1200x1500 portrait. A BCSO cruiser on Route 68 at dusk, lights off, seen from behind at
      road height, the road running into the distance in the middle of the frame.
   3. county-chiliad.webp      1200x1500 portrait. Mount Chiliad from the forest road at sunset, trees in front.
   4. county-paleto.webp       1200x1500 portrait. Paleto Bay from the water or the beach, the town behind. */

.front { --wrap: 1280px; --gut: 80px; --sec: 112px; font-size: 16px; }
@media (max-width: 1023px) { .front { --gut: 48px; --sec: 96px; } }
@media (max-width: 639px) { .front { --gut: 20px; --sec: 72px; } }
.front main { max-width: none; margin: 0; padding: 0; }
.f-wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin: 0 auto; position: relative; z-index: 1; }
.front .eyebrow { color: var(--brass-hi); margin: 0; }
.front h1, .front h2, .front h3 { text-wrap: balance; }
.front p { text-wrap: pretty; }
.front h2 { font: 700 clamp(30px, 3.4vw, 46px)/1.1 var(--slab); margin: 12px 0 0; }

/* every link and button answers the keyboard */
.front a:focus-visible, .front button:focus-visible, .front summary:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 6px; }

/* buttons: one shape, two sizes; they step on hover and press on click */
.front .btn { white-space: nowrap; min-height: 44px; transition: transform .15s, background-color .15s, border-color .15s, color .15s, box-shadow .2s; }
.front .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--brass-rgb), .25); }
.front .btn:active { transform: translateY(1px); box-shadow: none; }
.front .btn.lg { min-height: 50px; padding: 0 1.6em; font-size: 15px; }
.front .btn.ghost { border-color: rgba(236, 228, 210, .4); color: var(--paper); }
.front .btn.ghost:hover { color: var(--brass-hi); border-color: var(--brass-hi); }
.f-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--brass-hi); font-weight: 600; }
.f-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.f-more .na-n { font-size: 12px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); }

/* skip link: off screen until it gets the keyboard */
.skip { position: absolute; left: 0; top: 8px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--paper); color: var(--night); font-weight: 600; transform: translateY(-200%); opacity: 0; }
.skip:focus { transform: none; opacity: 1; }

/* nav: clear over the hero, solid once the page moves (home.js) */
.f-nav { position: fixed; inset: 0 0 auto; z-index: 30; height: 72px; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.f-nav.solid { background: rgba(var(--night-rgb, 7, 13, 8), .9); backdrop-filter: blur(12px); border-color: var(--line-soft); }
.f-nav .f-wrap { display: flex; align-items: center; gap: 24px; }
.f-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--paper); text-decoration: none !important; }
.f-brand img { width: 30px; height: auto; }
.f-brand b { font: 700 17px var(--slab); letter-spacing: .02em; white-space: nowrap; }
.f-links { display: flex; gap: 24px; margin-left: auto; }
.f-links a { position: relative; padding: 12px 0; color: var(--paper); opacity: .8; font-size: 14px; font-weight: 500; transition: opacity .15s; }
.f-links a:hover { opacity: 1; text-decoration: none; }
.f-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--brass-hi); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.f-links a:hover::after, .f-links a:focus-visible::after { transform: scaleX(1); }
.f-nav #theme-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border-color: rgba(236, 228, 210, .28); color: var(--paper); }

/* photo slots: not shown while empty */
.f-slot { display: none; position: relative; overflow: hidden; background: var(--night); }
.f-slot:has(> img) { display: block; }
.f-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* hero: the headline, the two actions and the patch on one screen, the four facts docked at its foot */
.front .hero { position: relative; display: block; min-height: 100svh; padding: 0; margin: 0; overflow: hidden; grid-template-columns: none; }
.f-hero-in { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: 24px; align-items: center; padding: 120px 0 44px; }
.f-hero-copy { grid-column: 1 / span 7; grid-row: 1; }
.f-hero-badge { grid-column: 8 / span 5; grid-row: 1; position: relative; display: grid; place-items: center; }
.f-hero-badge::before { content: ''; position: absolute; inset: 6% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--hi-rgb, 224, 171, 98), .26), transparent 66%); filter: blur(8px); }
.f-hero-badge img { position: relative; width: min(440px, 100%); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55)); }
.front .hero h1 { font: 700 clamp(44px, 5.6vw, 80px)/1.02 var(--slab); max-width: 13ch; margin: 18px 0 22px; }
.front .hero h1 em { font-style: normal; color: var(--brass-hi); }
.f-lede { max-width: 46ch; margin: 0; font-size: 18px; line-height: 1.55; color: var(--paper-dim); }
.f-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.f-facts { grid-column: 1 / -1; grid-row: 2; align-self: end; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.f-facts b { display: block; font: 700 40px/1 var(--slab); color: var(--brass-hi); }
.f-facts span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .04em; color: var(--paper-dim); }
/* with William's screenshot in the slot: the photograph fills the hero, the words sit on its calm left side */
.f-slot-hero:has(> img) { position: absolute; inset: 0; }
.hero:has(.f-slot-hero > img)::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--night-rgb, 7, 13, 8), .55) 0%, transparent 28%, transparent 58%, rgba(var(--night-rgb, 7, 13, 8), .9) 100%),
              linear-gradient(90deg, rgba(var(--night-rgb, 7, 13, 8), .75) 0%, rgba(var(--night-rgb, 7, 13, 8), .15) 55%, transparent 80%); }
.hero:has(.f-slot-hero > img) .f-hero-in { position: relative; z-index: 2; }
.hero:has(.f-slot-hero > img) .f-hero-badge { display: none; }
.hero:has(.f-slot-hero > img) .f-lede { color: var(--paper); }
/* the entrance: once, on load (html.m-enter is set in the head) */
html.m-enter .hero[data-enter] .f-hero-copy > *, html.m-enter .hero[data-enter] .f-hero-badge, html.m-enter .hero[data-enter] .f-facts { animation: f-enter .8s cubic-bezier(.2, .7, .2, 1) both; }
html.m-enter .hero[data-enter] .f-hero-copy > :nth-child(2) { animation-delay: .08s; }
html.m-enter .hero[data-enter] .f-hero-copy > :nth-child(3) { animation-delay: .16s; }
html.m-enter .hero[data-enter] .f-hero-copy > :nth-child(4) { animation-delay: .24s; }
html.m-enter .hero[data-enter] .f-hero-badge { animation-delay: .12s; }
html.m-enter .hero[data-enter] .f-facts { animation-delay: .32s; }
@keyframes f-enter { from { opacity: 0; transform: translateY(14px); } }

/* sections: the same space above and below each one, the heading always on the container's left */
.f-sec, .front .f-news { position: relative; padding: var(--sec) 0; }
.f-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 48px; }
.f-head p { max-width: 44ch; margin: 0; color: var(--paper-dim); }

/* News: a teaser of the newest one or two posts (home-news.js); the PIO's New post / Edit / Delete stay.
   One post: a wide card, the picture big beside the words. Two: two cards side by side, the picture on top. */
.front .f-news { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(var(--night-rgb, 7, 13, 8), .35); }
.f-news .f-wrap { display: block; }
.f-news .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; margin: 0 0 40px; }
.f-news .section-head > div:first-child { max-width: none; }
.f-news .news-head .f-more { margin-top: 8px; }
.f-news .news-tools { margin: 0; }
.f-news .news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.f-news .news-card, .f-news .news-card.wide { grid-column: auto; display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: rgba(var(--night-rgb, 7, 13, 8), .6); transition: transform .2s, border-color .2s; }
.f-news .news-card:hover { transform: translateY(-2px); border-color: rgba(var(--brass-rgb), .5); }
.f-news .nc-media { position: relative; flex: none; overflow: hidden; background: #000; }
.f-news .nc-media, .f-news .news-card.wide .nc-media { aspect-ratio: 16 / 9; min-height: 0; }
.f-news .nc-media img { width: 100%; height: 100%; object-fit: cover; }
.f-news .nc-cap, .f-news .nc-thumbs { display: none; }
.f-news .nc-body, .f-news .news-card.wide .nc-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; justify-content: start; }
.f-news .nc-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.f-news .nc-meta span { display: inline; }
/* "Pinned" / "Story" has no dot after it (home.css), so it needs its own space before the date */
.f-news .nc-meta .nc-pin, .f-news .nc-meta .nc-kind { margin-right: 10px; }
.f-news .news-card h3, .f-news .news-card.wide h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.f-news .news-card h3 a { color: var(--paper); }
.f-news .news-card h3 a:hover { color: var(--brass-hi); text-decoration: none; }
.f-news .nc-text { font-size: 15.5px; line-height: 1.65; }
.f-news .nc-text p { margin: 0; }
.f-news .nc-read { margin-top: auto; padding-top: 6px; font-size: 14.5px; }
.f-news .nc-edit { padding-top: 4px; }
.f-news .news-empty { grid-column: 1 / -1; margin: 0; }
/* just one post: the card spans the row, the picture takes the left part */
.f-news .news-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.f-news .news-card:only-child .nc-media { aspect-ratio: auto; min-height: 380px; }
.f-news .news-card:only-child .nc-body { padding: 40px; justify-content: center; }
.f-news .news-card:only-child h3 { font-size: clamp(28px, 2.8vw, 38px); }
.f-news .news-card:only-child .nc-read { margin-top: 8px; }
.f-news .news-card.no-media:only-child { display: flex; }

/* mission: the sentence turns to ink word by word as it passes the middle of the screen (home.js) */
.f-statement { max-width: 28ch; margin: 32px 0 64px; font: 600 clamp(28px, 3.2vw, 44px)/1.24 var(--slab); color: var(--paper); }
.f-statement strong { font-weight: inherit; }
.f-statement .w { opacity: .3; transition: opacity .35s, color .35s; }
.f-statement .w.on { opacity: 1; }
.f-statement strong .w.on { color: var(--brass-hi); }
.f-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.f-pillars article { border-top: 1px solid var(--line); padding-top: 22px; }
.f-pillars .n { font: 600 13px var(--sans); letter-spacing: .14em; color: var(--brass); }
.f-pillars h3 { margin: 10px 0; font: 700 24px/1.2 var(--slab); }
.f-pillars p { margin: 0; color: var(--paper-dim); line-height: 1.65; }
.f-mission-more { max-width: 78ch; margin-top: 40px; }
.f-mission-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--brass-hi); font-weight: 600; list-style: none; }
.f-mission-more summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.f-mission-more summary::-webkit-details-marker { display: none; }
.f-mission-more summary::after { content: '+'; font-size: 18px; transition: transform .2s; }
.f-mission-more[open] summary::after { transform: rotate(45deg); }
.f-mission-more p { margin: 8px 0 14px; color: var(--paper-dim); line-height: 1.75; }

/* the county: three places, each with a line drawing (and, once added, its screenshot above it) */
.f-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.f-place { padding-top: 28px; border-top: 1px solid var(--line); }
.f-slot-card:has(> img) { aspect-ratio: 4 / 5; margin-bottom: 24px; border-radius: 14px; }
.f-slot-card > img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.f-place:hover .f-slot-card > img { transform: scale(1.03); }
.f-ico { display: block; width: 56px; height: 56px; color: var(--brass-hi); }
.f-place:has(.f-slot-card > img) .f-ico { display: none; }
.f-tag { display: block; margin: 22px 0 8px; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.f-place h3 { margin: 0 0 8px; font: 700 26px/1.15 var(--slab); }
.f-place p { margin: 0; color: var(--paper-dim); line-height: 1.65; }

/* the units (sub-divisions, from home.js): one row each, what it does and its teams */
.f-board { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--night-rgb, 7, 13, 8), .6); }
.f-row { display: grid; grid-template-columns: 112px minmax(0, 1.1fr) minmax(0, 2fr); gap: 24px; align-items: start; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); transition: background-color .15s; }
#div-grid .f-row:last-child { border-bottom: 0; }
#div-grid .f-row:hover { background: rgba(var(--brass-rgb), .07); }
.f-code { justify-self: start; padding: 4px 9px; border-radius: 4px; background: var(--brass-hi); color: var(--night); font: 700 14px/1.2 var(--slab); letter-spacing: .04em; }
.f-unit .f-grp { display: block; margin-bottom: 4px; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.f-unit h3 { margin: 0; font: 700 20px/1.2 var(--slab); }
.f-what p { margin: 0; color: var(--paper-dim); line-height: 1.55; }
.f-what .units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* the chain of command: today's ladder in the new section box (tier names are h3 now, styled as before) */
.front #command .ladder > li { background: rgba(var(--night-rgb, 7, 13, 8), .55); }
.front .ladder h3 { margin: 0; font: 700 18px var(--slab); }
.front .ladder h3 span { display: block; margin-bottom: 4px; font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }

/* Meet the team: unchanged (home.css), only spaced like the other sections */
.front #team .team-tier:last-child { margin-bottom: 0; }

/* join: the path to the star, four steps told large */
.f-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.f-path::before { content: ''; position: absolute; left: 0; right: 0; top: 56px; height: 1px; background: var(--line); }
.f-path li { position: relative; padding-right: 32px; }
.f-path .n { position: relative; display: block; width: max-content; padding-right: 16px; background: var(--pine); font: 700 100px/1 var(--slab); color: transparent; -webkit-text-stroke: 1.5px rgba(var(--hi-rgb, 224, 171, 98), .85); }
.f-path .when { display: inline-block; margin: 22px 0 10px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-hi); }
.f-path h3 { margin: 0 0 10px; font: 700 26px/1.15 var(--slab); }
.f-path p { margin: 0; color: var(--paper-dim); line-height: 1.65; }
.f-path-foot { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
.f-path-foot p { margin: 0; font: 600 20px/1.4 var(--slab); color: var(--paper-dim); }
.f-path-foot .btn { margin-left: auto; }

/* footer: today's, on the page's container */
.front .foot-in { width: min(var(--wrap), 100% - 2 * var(--gut)); max-width: none; padding-left: 0; padding-right: 0; }
.front .foot a { display: inline-flex; align-items: center; min-height: 44px; }
.front .foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1023px) {
  .f-links { display: none; } .f-nav .btn { margin-left: auto; }
  .f-hero-in { align-items: start; }
  .f-hero-copy { grid-column: 1 / span 8; grid-row: 1; }
  .f-hero-badge { grid-column: 9 / span 4; grid-row: 1; align-self: start; padding-top: 40px; }
  .f-news .news-card:only-child { grid-template-columns: 1fr; } .f-news .news-card:only-child .nc-media { min-height: 0; aspect-ratio: 16 / 9; } .f-news .news-card:only-child .nc-body { padding: 28px; }
  .f-row { grid-template-columns: 96px minmax(0, 1fr); } .f-what { grid-column: 2; }
  .f-places { gap: 24px; } .f-place h3 { font-size: 22px; }
  .f-path { grid-template-columns: 1fr 1fr; gap: 48px 0; } .f-path::before { display: none; }
}
@media (max-width: 639px) {
  .f-nav { height: 64px; } .f-nav .f-wrap { gap: 10px; }
  .f-brand b { white-space: normal; max-width: 7.5em; font-size: 14px; line-height: 1.1; }
  .f-nav .btn.sm { padding: .42em .8em; }
  .f-hero-in { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 96px 0 32px; }
  .f-hero-badge { grid-column: 1; grid-row: 1; justify-self: start; padding: 0; margin-bottom: 8px; }
  .f-hero-badge img { width: 132px; }
  .f-hero-copy { grid-column: 1; grid-row: 2; }
  .f-facts { grid-row: 3; }
  .front .hero h1 { font-size: 40px; } .f-lede { font-size: 16px; }
  .f-cta .btn { width: 100%; }
  .f-facts { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 36px; padding-top: 16px; } .f-facts b { font-size: 30px; }
  .f-head { display: block; margin-bottom: 32px; } .f-head p { margin-top: 14px; }
  .f-news .news-list { grid-template-columns: 1fr; } .f-news .section-head { display: block; }
  .f-pillars, .f-places { grid-template-columns: 1fr; }
  .f-row { grid-template-columns: 1fr; gap: 10px; padding: 18px; } .f-what { grid-column: 1; }
  .f-path { grid-template-columns: 1fr; gap: 36px; } .f-path .n { font-size: 72px; }
  .f-path-foot { flex-direction: column; align-items: stretch; } .f-path-foot .btn { margin-left: 0; white-space: normal; }
}
@media (max-width: 359px) { .f-brand b { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.m-enter .hero[data-enter] .f-hero-copy > *, html.m-enter .hero[data-enter] .f-hero-badge, html.m-enter .hero[data-enter] .f-facts { animation: none; }
  .f-statement .w { opacity: 1; transition: none; }
}

/* department pictures as corner light: greyscale, faint, tinted with the theme's accent and faded into the page colour on
   every side, so an orange sunset never clashes with Patrol Blue or Crimson (no blend modes or masks: the same in every browser) */
.f-ambient { position: absolute; z-index: 0; top: 0; right: 0; overflow: hidden; pointer-events: none; }
.f-ambient img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.8) contrast(1.1); opacity: .5; }
.f-ambient::before { content: ''; position: absolute; inset: 0; background: rgba(var(--brass-rgb), .16); }
/* the picture fades to see-through on its left, top and bottom, so the page and its contour lines carry on through it */
.f-ambient {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, transparent 0%, #000 22%, #000 50%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, transparent 0%, #000 22%, #000 50%, transparent 100%);
  mask-composite: intersect; }
.f-amb-county { width: 62%; height: 100%; }
.f-amb-county img { object-position: 70% 35%; }
.f-amb-join { width: 60%; height: 100%; }
.f-amb-join img { object-position: 80% 75%; filter: grayscale(1) brightness(.62) contrast(1.15); }
@media (max-width: 1023px) { .f-amb-county, .f-amb-join { width: 100%; height: 50%; } }
@media (max-width: 639px) { .f-amb-county, .f-amb-join { height: 40%; } .f-ambient img { opacity: .42; } }
/* the step numbers sit straight on the picture, so no line runs behind them */
.f-path::before { display: none; }
.f-path .n { background: none; }
/* where a picture fills the right side, the intro sits under the heading instead of over the picture */
#county .f-head, #join .f-head { display: block; max-width: 36rem; }
#county .f-head p, #join .f-head p { margin-top: 14px; }
/* tablets and phones: the hero is as tall as its content (no gap above the facts), headings stack over their intro,
   and the corner pictures stay quieter under the words */
@media (max-width: 1023px) {
  .front .hero, .f-hero-in { min-height: 0; }
  .f-hero-in { padding: 120px 0 56px; }
  .f-facts { margin-top: 56px; }
  .f-head { display: block; } .f-head p { margin-top: 14px; }
  .f-ambient img { opacity: .34; }
}
@media (max-width: 639px) { .f-hero-in { padding: 96px 0 40px; } .f-facts { margin-top: 36px; } }

.f-news .nc-meta span + span::before { margin: 0 8px; }

/* the hero photograph: a light wash of the theme's accent so it sits with every theme, the town kept in view on the right */
.f-slot-hero > img { object-position: 62% 60%; }
.f-slot-hero:has(> img)::after { content: ''; position: absolute; inset: 0; background: rgb(var(--brass-rgb)); mix-blend-mode: color; opacity: .14; }
.hero:has(.f-slot-hero > img)::before {
  background: linear-gradient(180deg, rgba(var(--night-rgb, 7, 13, 8), .45) 0%, rgba(var(--night-rgb, 7, 13, 8), 0) 22%, rgba(var(--night-rgb, 7, 13, 8), 0) 58%, rgba(var(--night-rgb, 7, 13, 8), .9) 100%),
              linear-gradient(90deg, rgba(var(--night-rgb, 7, 13, 8), .8) 0%, rgba(var(--night-rgb, 7, 13, 8), .4) 40%, rgba(var(--night-rgb, 7, 13, 8), 0) 66%); }
.hero:has(.f-slot-hero > img) .f-facts { border-top-color: rgba(236, 228, 210, .22); }
.hero:has(.f-slot-hero > img) .f-facts b { color: var(--paper); }
@media (max-width: 639px) { .hero:has(.f-slot-hero > img)::before { background: linear-gradient(180deg, rgba(var(--night-rgb, 7, 13, 8), .7) 0%, rgba(var(--night-rgb, 7, 13, 8), .6) 50%, rgba(var(--night-rgb, 7, 13, 8), .95) 100%); } }
/* the forest behind the mission: the right part of the top, clear of the three columns below */
.f-amb-about { width: 58%; height: 78%; }
.f-amb-about img { object-position: 60% 40%; }
@media (max-width: 1023px) { .f-amb-about { width: 100%; height: 42%; } }

/* no pills: buttons and tags are firm rectangles with small corners, one height per size */
.front { --r-btn: 6px; --r-tag: 4px; }
.front .btn { border-radius: var(--r-btn); font-weight: 700; letter-spacing: .01em; }
.front .btn.sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.front .btn.lg { min-height: 48px; padding: 0 22px; }
.f-nav #theme-btn { width: 40px; height: 40px; border-radius: var(--r-btn); border: 1px solid rgba(236, 228, 210, .22); background: rgba(var(--night-rgb, 7, 13, 8), .25); }
.f-nav #theme-btn:hover { border-color: var(--brass-hi); color: var(--brass-hi); }
.front .chip, .f-path .when, .f-more .na-n { border-radius: var(--r-tag); }
.front .news-tools .btn { border-radius: var(--r-btn); }

/* buttons in the department's own style (as on the unit tags and callsign plates):
   the main action is a brass plate with a slight bevel; the rest are stitched patches (tinted fill, solid edge, dashed
   inner line). Both press in on click. */
.front .btn:not(.ghost) {
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-lo); color: #1a1206; text-shadow: 0 1px 0 rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 2px 0 rgba(0, 0, 0, .35), 0 8px 18px rgba(0, 0, 0, .25); }
.front .btn:not(.ghost):hover { background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass-hi) 40%, var(--brass) 100%); border-color: var(--brass); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .15), 0 3px 0 rgba(0, 0, 0, .35), 0 10px 22px rgba(var(--brass-rgb), .25); }
.front .btn:not(.ghost):active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 rgba(0, 0, 0, 0); }
.front .btn.ghost, .f-nav #theme-btn {
  background: linear-gradient(180deg, rgba(236, 228, 210, .09), rgba(236, 228, 210, .03)); color: var(--paper);
  border: 1px solid rgba(236, 228, 210, .38); outline: 1px dashed rgba(236, 228, 210, .22); outline-offset: -5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3); backdrop-filter: blur(4px); }
.front .btn.ghost:hover, .f-nav #theme-btn:hover { color: var(--brass-hi); border-color: var(--brass-hi); outline-color: rgba(var(--hi-rgb, 224, 171, 98), .45); background: rgba(var(--brass-rgb), .12); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.front .btn.ghost:active, .f-nav #theme-btn:active { transform: translateY(2px); box-shadow: none; }
.front .btn.ghost:focus-visible, .f-nav #theme-btn:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }
/* the units' code plates and team tags in the same language */
.f-code { background: linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, var(--brass-lo)); border: 1px solid var(--brass-lo); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(0, 0, 0, .35); text-shadow: 0 1px 0 rgba(255, 255, 255, .2); }
.f-what .chip { border-radius: var(--r-tag); border: 1px solid rgba(var(--brass-rgb), .45); outline: 1px dashed rgba(var(--brass-rgb), .25); outline-offset: -4px; background: linear-gradient(180deg, rgba(var(--brass-rgb), .14), rgba(var(--brass-rgb), .05)); color: var(--paper); padding: .32em .75em; }

/* corner pictures, final: the whole section is the frame (so more of the picture shows), and one soft oval fade around
   its subject, centred per picture, takes it out to nothing on every side (a single mask layer: no seams) */
.f-ambient { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto;
  -webkit-mask-image: radial-gradient(ellipse var(--mw, 62%) var(--mh, 78%) at var(--mx, 78%) var(--my, 50%), #000 28%, rgba(0, 0, 0, .55) 58%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--mw, 62%) var(--mh, 78%) at var(--mx, 78%) var(--my, 50%), #000 28%, rgba(0, 0, 0, .55) 58%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.f-amb-about, .f-amb-county, .f-amb-join { width: auto; height: auto; }
.f-amb-about { --mx: 80%; --my: 38%; --mw: 55%; --mh: 70%; }
.f-amb-about img { object-position: 50% 40%; }
.f-amb-county { --mx: 82%; --my: 34%; --mw: 52%; --mh: 72%; }
.f-amb-county img { object-position: 50% 30%; }
.f-amb-join { --mx: 74%; --my: 58%; --mw: 62%; --mh: 80%; }
.f-amb-join img { object-position: 50% 62%; }
@media (max-width: 1023px) {
  .f-amb-about, .f-amb-county, .f-amb-join { --mx: 70%; --my: 20%; --mw: 90%; --mh: 40%; }
}
/* the oval reaches nothing at the section's top and bottom edges (its height = the distance to them), so no edge shows
   where one section meets the next; the sunset is kept brighter so the deputy and the car read as silhouettes */
.f-amb-about { --mx: 80%; --my: 50%; --mw: 56%; --mh: 50%; }
.f-amb-county { --mx: 80%; --my: 50%; --mw: 56%; --mh: 50%; }
.f-amb-county img { object-position: 50% 26%; }
.f-amb-join { --mx: 74%; --my: 50%; --mw: 62%; --mh: 50%; }
.f-amb-join img { object-position: 50% 70%; filter: grayscale(1) brightness(.95) contrast(1.15); opacity: .55; }
@media (max-width: 1023px) {
  .f-amb-about, .f-amb-county, .f-amb-join { --mx: 70%; --my: 30%; --mw: 100%; --mh: 30%; }
}
.f-amb-join { --mx: 66%; --my: 50%; --mw: 58%; --mh: 50%; }
.f-amb-join img { object-position: 62% 72%; filter: grayscale(1) brightness(1.1) contrast(1.25); opacity: .72; }
/* the sunset sits in the empty space right of the Join heading, above the four steps, small enough to show all of it */
.f-amb-join { top: 0; right: 0; bottom: auto; left: auto; width: 60%; height: 400px; --mx: 58%; --my: 50%; --mw: 58%; --mh: 50%; }
.f-amb-join img { object-position: 50% 60%; filter: grayscale(1) brightness(1) contrast(1.15); opacity: .6; }
@media (max-width: 1023px) {
  .f-amb-join { width: 100%; height: 320px; --mx: 60%; --my: 50%; --mw: 70%; --mh: 50%; }
  .f-amb-join img { opacity: .38; }
}
/* a long, even falloff (no visible oval) for the bright sunset sky */
.f-amb-join {
  -webkit-mask-image: radial-gradient(ellipse var(--mw) var(--mh) at var(--mx) var(--my), rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .7) 30%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .1) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--mw) var(--mh) at var(--mx) var(--my), rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .7) 30%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .1) 82%, transparent 100%);
  width: 64%; height: 440px; --mx: 60%; --my: 50%; --mw: 60%; --mh: 50%; }
.f-amb-join img { filter: grayscale(1) brightness(.82) contrast(1.2); opacity: .55; }
/* more of the sunset: wider and taller, a larger clear core, still dim enough behind the steps for their text */
.f-amb-join {
  -webkit-mask-image: radial-gradient(ellipse var(--mw) var(--mh) at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .9) 35%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .18) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--mw) var(--mh) at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .9) 35%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .18) 84%, transparent 100%);
  width: 74%; height: 640px; --mx: 58%; --my: 46%; --mw: 58%; --mh: 46%; }
.f-amb-join img { object-position: 55% 62%; filter: grayscale(1) brightness(.78) contrast(1.2); opacity: .62; }
@media (max-width: 1023px) { .f-amb-join { width: 100%; height: 380px; --mx: 60%; --my: 50%; --mw: 70%; --mh: 50%; } .f-amb-join img { opacity: .42; } }

/* the page ground (home page only; the other pages keep the contour lines from site.css):
   a surveyor's grid with small cross marks where its lines meet, a whisper of film grain and two soft glows of the
   theme's accent. Seamless by construction, in the theme's own colours, fixed behind the page. */
body.topo.front { background-color: var(--pine);
  background-image: radial-gradient(1200px 720px at 84% -8%, rgba(var(--brass-rgb), .11), transparent 62%),
                    radial-gradient(1000px 760px at -12% 62%, rgba(var(--brass-rgb), .05), transparent 66%);
  background-size: auto; background-repeat: no-repeat; background-attachment: fixed; }
body.front::before, body.front::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
/* the grid: drawn as a mask, so its colour is the theme's accent */
body.front::before { background-color: rgb(var(--brass-rgb)); opacity: .16;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0 .5H192M.5 0V192' stroke-opacity='.45'/%3E%3Cpath d='M0 96.5H192M96.5 0V192' stroke-opacity='.3' stroke-dasharray='2 6'/%3E%3Cpath d='M.5 -6V7M-6 .5H7M192.5 185V198M185 192.5H198M.5 185V198M-6 192.5H7M192.5 -6V7M185 .5H198' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 192px 192px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0 .5H192M.5 0V192' stroke-opacity='.45'/%3E%3Cpath d='M0 96.5H192M96.5 0V192' stroke-opacity='.3' stroke-dasharray='2 6'/%3E%3Cpath d='M.5 -6V7M-6 .5H7M192.5 185V198M185 192.5H198M.5 185V198M-6 192.5H7M192.5 -6V7M185 .5H198' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 192px 192px repeat;
  -webkit-mask-position: center top; mask-position: center top; }
/* the grain */
body.front::after { opacity: .05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px repeat; }
@media (prefers-contrast: more) { body.front::before, body.front::after { display: none; } }

/* the page ground, final: no grid or tiles. One large contour map drawn once (ground-topo.svg), stretched over the
   whole screen, fixed and very faint, in the theme's accent; the glows and grain above stay */
body.front::before { opacity: .13;
  -webkit-mask: url("/assets/ground-topo.svg") center / cover no-repeat;
          mask: url("/assets/ground-topo.svg") center / cover no-repeat; }

/* department portraits: framed like a stitched patch (solid edge, dashed inner line), shown in their own colours */
.f-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 48px; align-items: center; }
.f-split > :first-child { grid-column: span 8; }
.f-split > .f-portrait { grid-column: span 4; }
.f-split-ranks { align-items: start; }
.f-split-ranks .f-portrait { position: sticky; top: 104px; }
.f-portrait { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; border: 1px solid rgba(var(--brass-rgb), .55);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 24px 48px rgba(0, 0, 0, .35); background: var(--night); }
.f-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.f-portrait:hover img { transform: scale(1.03); }
.f-portrait::after { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(236, 228, 210, .35); border-radius: 6px; pointer-events: none; }
#about .f-split { margin-bottom: 64px; }
#about .f-statement { margin-bottom: 0; }

/* Join: the department's motto and three values (from its recruitment poster), then the four steps */
.f-motto { margin: 18px 0 0; font: 700 clamp(20px, 1.8vw, 24px)/1.3 var(--slab); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-hi); }
.f-values { list-style: none; margin: 0 0 64px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.f-values li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 4px 14px; padding: 20px 22px; border-radius: 10px; border: 1px solid rgba(var(--brass-rgb), .4);
  background: linear-gradient(180deg, rgba(var(--night-rgb, 7, 13, 8), .82), rgba(var(--night-rgb, 7, 13, 8), .7)); backdrop-filter: blur(6px); }
.f-values li::after { content: ''; position: absolute; inset: 5px; border: 1px dashed rgba(var(--brass-rgb), .25); border-radius: 6px; pointer-events: none; }
.f-values svg { grid-row: span 2; width: 26px; height: 26px; color: var(--brass-hi); }
.f-values b { font: 700 18px/1.25 var(--slab); }
.f-values span { color: var(--paper-dim); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 1023px) {
  .f-split > :first-child, .f-split > .f-portrait { grid-column: 1 / -1; }
  .f-split > .f-portrait { max-width: 420px; }
  .f-split-ranks .f-portrait { position: static; }
  .f-values { grid-template-columns: 1fr; margin-bottom: 48px; }
}
@media (max-width: 639px) { .f-split > .f-portrait { max-width: none; aspect-ratio: 4 / 4.4; } }
/* the portraits get more room and show more of each picture (their own shape, no tight crop) */
.f-split > :first-child { grid-column: span 7; }
.f-split > .f-portrait { grid-column: span 5; aspect-ratio: auto; }
.f-portrait img { height: auto; object-position: 50% 50%; }
@media (max-width: 1023px) { .f-split > .f-portrait { max-width: 640px; } }
@media (max-width: 639px) { .f-split > .f-portrait { aspect-ratio: auto; } }
@media (max-width: 1023px) { .f-split > :first-child, .f-split > .f-portrait { grid-column: 1 / -1; } }
@media (max-width: 1023px) { .f-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .f-split > :first-child, .f-split > .f-portrait { grid-column: 1; } }