/* ==========================================================================
   Huntingdon County Information Page
   Design system: THE FURNACE

   Firebrick was this county's trade. Mount Union's refractories lined the
   furnaces of American steel, and the ground of this site is that colour:
   a dark red you can actually see, not a warm black pretending to be one.

   THE RULE THAT GOVERNS EVERYTHING: furnace outside, printed page inside.
   Chrome, navigation, section breaks and data live on the red. Long reading
   happens on a cream panel, because 1,400 characters of nineteenth century
   OCR reversed out of a dark ground is squinting, not reading.

   WHAT THIS REBUILD FIXES. Two critics scored the previous version 5/10:
   "zero visual depth anywhere", "hierarchy achieved through consistency
   rather than differentiation", "typography relies only on size and colour".
   Measured, the old stylesheet had 0 box-shadows, 0 :active states, 2 easing
   curves and 5 ad-hoc durations. So:

     DEPTH      a real elevation scale, and on dark grounds the lift comes
                from an inset top highlight, the way light actually falls on
                a raised edge, not from a drop shadow floating in a void.
     HIERARCHY  three typefaces doing three different jobs, plus tracking
                that tightens as size grows, so a headline is not just a big
                version of body text.
     MOTION     four named tokens, each with a job. Enter fast and decelerate,
                exit slower and accelerate.
     STATE      every interactive thing has rest, hover, focus-visible and
                active. Active was entirely missing before, which is why
                nothing felt like it responded to a press.

   COLOUR, MEASURED NOT ASSERTED. Every ratio below was computed, and the
   winning research direction was rejected on this exact point: it claimed
   6.5:1 for an accent that measures 2.61:1 and would have been invisible.
     white   on ground ... 16.4:1   cream on ground .. 13.6:1
     muted   on ground ...  7.9:1   brass on ground ..  9.0:1
     cream   on raised ... 11.8:1   ember on ground ..  4.9:1
     ink     on page ..... 16.1:1   ink-2 on page ....  9.7:1
     ink-3   on page .....  5.9:1   red   on page ....  7.9:1
     brass-deep on page ..  5.7:1   white on red .....  8.8:1
   Every text pair clears AA. Most clear AAA.
   ========================================================================== */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/fraunces-400-700.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/literata-400-600.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/courier-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* ---- the furnace: a red you can see. chroma 40, not 10 ---- */
  --ground:#3A1218;
  --ground-2:#4A1B21;      /* raised: cards, alt sections */
  --ground-3:#5E262C;      /* hover, wells */
  --edge:#75353C;          /* structural borders on red */
  --edge-soft:#5A2229;

  /* ---- the printed page ---- */
  --page:#F7F2E9;
  --page-2:#EDE5D8;
  --page-edge:#D6CBB8;

  /* ---- voice ---- */
  --white:#FFFFFF;
  --cream:#F2E8DC;
  --muted:#C9AFA6;
  --ink:#2A0E12;
  --ink-2:#4A3A32;
  --ink-3:#6B5A4E;

  /* ---- metal ---- */
  --brass:#E8B860;
  --brass-hi:#FFD489;
  --brass-deep:#7A5A12;    /* the only brass that works ON cream */
  --ember:#E5654F;         /* live accent, hot metal */
  --red-ink:#8E2027;       /* red that works on cream, 7.9:1 */

  /* ---- type ---- */
  --display:'Fraunces',Charter,'Iowan Old Style',Georgia,serif;
  --serif:'Literata',Charter,'Bitstream Charter',Georgia,serif;
  --mono:'Courier Prime',ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* ---- space. deployed by MEANING: the gap under a heading is always
         smaller than the gap above it, so grouping is legible ---- */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;   --s8:4.5rem; --s9:7rem;
  --rail:clamp(1.1rem,4vw,4rem);
  --measure:68ch;

  /* ---- motion. four tokens, each with a job.
         enter decelerates, exit accelerates, mechanical things are linear-ish */
  --dur-1:120ms;   /* colour, opacity, immediate feedback */
  --dur-2:200ms;   /* transforms, lifts, small moves */
  --dur-3:320ms;   /* panels opening */
  --ease-out:cubic-bezier(.22,.68,.36,1);      /* entering */
  --ease-in:cubic-bezier(.55,.06,.68,.19);     /* leaving */
  --ease-soft:cubic-bezier(.33,.02,.28,1);     /* panels */

  /* ---- elevation. on a dark ground the lift is an inset top highlight,
         the way real light catches a raised edge. shadows alone just make
         a dark hole in a dark page ---- */
  --lift-1:inset 0 1px 0 rgba(255,255,255,.07);
  --lift-2:inset 0 1px 0 rgba(255,255,255,.12), 0 2px 6px -2px rgba(0,0,0,.45);
  --lift-3:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -12px rgba(0,0,0,.65);
  --lift-page:0 1px 2px rgba(42,14,18,.06), 0 10px 30px -18px rgba(42,14,18,.30);

  /* ---- coverage bands. ONE definition, used by the map and by its key ---- */
  --map-0:#F7F2E9; --map-1:#E5C6B6; --map-2:#C97F72; --map-3:#9E2B33;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;
  scrollbar-color:var(--edge) var(--ground);color-scheme:dark}
body{
  margin:0;background:var(--ground);color:var(--cream);
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-tap-highlight-color:rgba(232,184,96,.22);
  /* the faintest warm bloom, so a large flat red field is not dead flat */
  background-image:
    radial-gradient(1200px 600px at 15% -8%, rgba(229,101,79,.10), transparent 62%),
    radial-gradient(900px 500px at 92% 4%, rgba(232,184,96,.055), transparent 60%);
  background-attachment:fixed;
}
img,svg{max-width:100%;display:block}
::selection{background:var(--brass);color:var(--ground)}
input,textarea{caret-color:var(--brass)}

/* one focus treatment everywhere: two rings so it reads on red AND on cream */
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px;
  box-shadow:0 0 0 5px rgba(58,18,24,.85)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* not a blanket kill: colour still changes so state is still legible,
     but nothing translates, scales or slides */
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-property:color,background-color,border-color,outline-color,opacity!important;
    transition-duration:.01ms!important}
}

/* ------------------------------------------------------------------ type --
   Three faces doing three jobs. That is the hierarchy: a reader can tell the
   level from the LETTERFORMS, before size or colour. Tracking tightens as
   size grows, which is what makes large type look set rather than blown up. */
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;
  text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(2.15rem,1.15rem + 4.2vw,4.25rem);line-height:1.02;
  letter-spacing:-.036em;color:var(--white)}
h2{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.6rem);line-height:1.08;
  letter-spacing:-.026em;color:var(--white)}
h3{font-size:clamp(1.15rem,1rem + .55vw,1.5rem);line-height:1.2;
  letter-spacing:-.014em;color:var(--brass);font-weight:600}
h4{font-family:var(--mono);font-size:.76rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
.lede{font-size:clamp(1.09rem,1rem + .48vw,1.32rem);line-height:1.5;
  color:var(--cream);max-width:46ch;font-weight:400}

/* the section label: a struck plate, not a letterspaced whisper */
.eyebrow{display:inline-block;justify-self:start;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ground);
  background:var(--brass);padding:.28rem .6rem;margin:0 0 var(--s4);
  box-shadow:var(--lift-1);line-height:1.5;text-wrap:balance}
.eyebrow--plain{background:none;color:var(--brass);padding:0;box-shadow:none}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.center{text-align:center}
a{color:var(--brass);text-underline-offset:.18em;text-decoration-thickness:1px;
  transition:color var(--dur-1) var(--ease-out)}
a:hover{color:var(--brass-hi)}
a:active{color:var(--ember)}

/* ----------------------------------------------------------------- shell -- */
.wrap{max-width:78rem;margin-inline:auto;padding-inline:var(--rail)}
.wrap--tight{max-width:54rem}
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--ground);
  padding:.7rem 1.1rem;z-index:200;font-family:var(--mono);font-weight:400}
.skip:focus{left:.5rem;top:.5rem}

/* --------------------------------------------------------------- notice --- */
.notice{background:var(--brass);color:var(--ground);font-family:var(--mono);
  font-size:.73rem;letter-spacing:.01em;box-shadow:var(--lift-1)}
.notice__in{display:flex;gap:.45rem 1rem;flex-wrap:wrap;align-items:baseline;
  padding-block:.4rem}
.notice a{color:var(--ground);text-decoration:underline}
.notice a:hover{color:#000}
.notice b{letter-spacing:.09em}

/* -------------------------------------------------------------- masthead -- */
.masthead{position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--edge);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.masthead__in{display:flex;align-items:center;gap:var(--s5);min-height:3.5rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.brand__mark{width:26px;height:30px;flex:0 0 auto;
  transition:transform var(--dur-2) var(--ease-out)}
.brand:hover .brand__mark{transform:translateY(-1px) rotate(-2deg)}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-weight:700;font-size:1rem;
  color:var(--white);letter-spacing:-.02em}
.brand__sub{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-top:.26rem}

/* nav: the underline EXISTS at rest and only changes colour, so nothing
   shifts on hover. the old version toggled a border into existence, which
   is what made it flicker */
.nav{margin-left:auto;display:flex;gap:0;align-items:stretch;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:.76rem;color:var(--cream);
  padding:.5rem .7rem;text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color var(--dur-1) var(--ease-out),
             border-bottom-color var(--dur-1) var(--ease-out),
             background-color var(--dur-1) var(--ease-out)}
.nav a:hover{color:var(--brass-hi);border-bottom-color:var(--edge);
  background:rgba(255,255,255,.04)}
.nav a:active{background:rgba(0,0,0,.18)}
.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--brass)}
@media (max-width:820px){.nav a{padding:.4rem .45rem;font-size:.71rem}
  .brand__sub{display:none}}
@media (max-width:760px){
  .masthead__in{flex-wrap:wrap;gap:0;min-height:0;padding-block:.4rem}
  .brand{flex:1 1 100%;padding-block:.35rem}
  .nav{margin-left:0;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;border-top:1px solid var(--edge-soft)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;padding:.5rem .6rem}
  .notice{font-size:.67rem}
}
.crumbs{font-family:var(--mono);font-size:.71rem;color:var(--muted);
  padding-block:.8rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none;color:var(--muted)}
.crumbs a:hover{color:var(--brass)}

/* ------------------------------------------------------------------ hero --
   The ridge art is a real illustration, not a texture: it sits UNDER the type
   and is masked away on the left so the headline is always read against flat
   ground. See art.py for why the far ridges are the lit ones. */
.hero{border-bottom:1px solid var(--edge);position:relative;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--brass) 0%,var(--ember) 46%,transparent 92%)}
.hero__ridge,.pagehead .hero__ridge{
  display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none}
/* Explicit stacking, because leaving the scrim and the ridge art both at
   z-index 0 let paint order decide, and the two engines decided differently:
   the same scrim lifted Chromium from 4.81 to 5.05 and moved WebKit by 0.04.
   art 0, scrim 1, text 2. */
.hero > .wrap,.pagehead > .wrap{position:relative;z-index:2}
.hero__in{padding-block:clamp(2.6rem,7vw,5rem) clamp(2rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--s5);align-items:end}
.hero__head{grid-column:1 / span 8}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--brass);
  text-decoration:underline;text-decoration-color:var(--ember);
  text-decoration-thickness:.055em;text-underline-offset:.1em}
.hero__lede{grid-column:9 / span 4;margin:0 0 .5rem;max-width:none}
.hero__stats{grid-column:1 / -1;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:0;
  margin-top:var(--s7);border-top:1px solid var(--edge)}
@media (max-width:900px){
  .hero__head,.hero__lede{grid-column:1 / -1}
  .hero__lede{margin-top:var(--s5)}
}
.stat{padding:var(--s4) var(--s4) var(--s4) 0;border-right:1px solid var(--edge-soft)}
.stat:last-child{border-right:0}
.stat__n{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,1.15rem + 1.5vw,2.35rem);line-height:.95;
  letter-spacing:-.035em;color:var(--brass)}
.stat__l{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:.5rem}

/* ---------------------------------------------------------------- rules --- */
.rule{height:1px;background:var(--edge);border:0;margin:0}
.rule--strike{height:3px;border:0;margin:0;
  background:linear-gradient(90deg,var(--brass),var(--ember) 55%,var(--edge))}

/* -------------------------------------------------------------- sections --
   Sections must not all look the same. --alt is a genuinely different
   surface: lifted, bounded, and it carries its own top highlight. */
.section{padding-block:clamp(2.4rem,6vw,4.5rem)}
.section--alt{background:var(--ground-2);border-block:1px solid var(--edge);
  box-shadow:var(--lift-1)}
.section__head{display:grid;gap:var(--s3);margin-bottom:var(--s6);max-width:50rem}
.pagehead{border-bottom:1px solid var(--edge);position:relative;
  overflow:hidden;isolation:isolate}
/* A wash behind the interior page heads, mirroring the one the home hero has.
   The ridge art is brightest on the right, which is exactly where the
   standfirst sits, and in WebKit those three standfirsts measured 4.81, 4.83
   and 4.92 against a 4.5 floor. Passing by 7% is not passing with margin, and
   WebKit composites the mask about 5% brighter than Blink does, so the engine
   that was never tested was also the strict one. */
.pagehead::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(58,18,24,.30) 30%,rgba(58,18,24,.62) 78%,rgba(58,18,24,.72))}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--brass),transparent 70%)}
.pagehead__in{padding-block:clamp(1.8rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem);
  display:grid;gap:var(--s5) clamp(2rem,5vw,4rem);align-items:end;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.pagehead h1{font-size:clamp(1.95rem,1.15rem + 3vw,3.3rem);max-width:16ch}
.pagehead__side{padding-bottom:.3rem}
.pagehead__side p{margin:0;max-width:44ch}
@media (max-width:800px){
  .pagehead__in{grid-template-columns:1fr;align-items:start}
  .pagehead h1{max-width:20ch}
}

/* ----------------------------------------------------------------- grid --- */
.grid{display:grid;gap:0}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}

/* ----------------------------------------------------------------- card --- */
.card{position:relative;background:var(--ground-2);border:1px solid var(--edge-soft);
  border-top:2px solid var(--brass);margin:-1px 0 0 -1px;
  padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s3);
  text-decoration:none;box-shadow:var(--lift-1);
  transition:background-color var(--dur-1) var(--ease-out),
             transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-top-color var(--dur-1) var(--ease-out)}
.card:hover{background:var(--ground-3);border-top-color:var(--brass-hi);
  transform:translateY(-2px);box-shadow:var(--lift-3);z-index:2}
.card:active{transform:translateY(0);box-shadow:var(--lift-2);
  transition-duration:var(--dur-1)}
.card__crest{width:58px;height:58px;
  transition:transform var(--dur-2) var(--ease-out)}
.card:hover .card__crest{transform:scale(1.05)}
.card__t{font-family:var(--display);font-size:1.08rem;font-weight:700;line-height:1.18;
  color:var(--white);letter-spacing:-.018em}
.card:hover .card__t{color:var(--brass-hi)}
.card__m{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.card__d{font-size:.9rem;color:var(--cream);line-height:1.5;margin:0}

/* ---------------------------------------------------------------- chips --- */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.chip{font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.24rem .5rem;color:var(--muted);
  border:1px solid var(--edge-soft);white-space:nowrap;background:rgba(0,0,0,.12)}
.chip--brick{color:var(--ground);background:var(--brass);border-color:var(--brass)}
.chip--src{color:var(--brass);border-color:var(--edge)}
.chip--none{border-style:dashed}
.chip--out{color:var(--cream);border-color:var(--edge)}
a.chip{text-decoration:none;transition:background-color var(--dur-1) var(--ease-out),
  color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
a.chip:hover{color:var(--ground);background:var(--brass-hi);border-color:var(--brass-hi)}
a.chip:active{background:var(--brass)}

/* -------------------------------------------------------------- stories --- */
.stories{border-top:1px solid var(--edge)}
.story{border-bottom:1px solid var(--edge-soft);position:relative}
.story__btn{width:100%;background:none;border:0;padding:1.1rem 2.6rem 1.1rem 0;
  text-align:left;font:inherit;color:inherit;cursor:pointer;display:grid;gap:.4rem;
  position:relative;transition:padding-left var(--dur-2) var(--ease-out)}
/* a bar grows from the left edge on hover: the row acknowledges the pointer
   without anything jumping */
.story__btn::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;
  width:2px;background:var(--brass);transform:scaleY(0);transform-origin:top;
  transition:transform var(--dur-2) var(--ease-out)}
.story__btn:hover{padding-left:.85rem}
.story__btn:hover::before{transform:scaleY(1)}
.story__btn[aria-expanded="true"]{padding-left:.85rem}
.story__btn[aria-expanded="true"]::before{transform:scaleY(1);background:var(--ember)}
.story__t{font-family:var(--display);font-size:clamp(1.05rem,.98rem + .4vw,1.3rem);
  font-weight:700;line-height:1.22;color:var(--white);max-width:44rem;
  letter-spacing:-.018em;transition:color var(--dur-1) var(--ease-out)}
.story__btn:hover .story__t{color:var(--brass-hi)}
.story__sign{position:absolute;right:.1rem;top:1.25rem;width:18px;height:18px;
  color:var(--brass);
  transition:transform var(--dur-3) var(--ease-soft),color var(--dur-1) var(--ease-out)}
.story__btn:hover .story__sign{color:var(--brass-hi)}
.story__btn[aria-expanded="true"] .story__sign{transform:rotate(135deg);color:var(--ember)}
/* Open by DEFAULT, and collapsed only once scripting has announced itself by
   putting .js on <html>. The other way round - collapsed by default, opened by
   script - meant that with JavaScript blocked or broken every story body on
   every municipality page was sealed at zero height behind a button that could
   not do anything. 130 stories on the Mount Union page alone, present in the
   HTML and unreachable by a reader. */
.story__body{display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--dur-3) var(--ease-soft)}
.js .story__body{grid-template-rows:0fr}
.js .story__btn[aria-expanded="true"] + .story__body{grid-template-rows:1fr}
/* with no scripting the toggle is decoration, so it should not invite a click */
html:not(.js) .story__sign{display:none}
html:not(.js) .story__btn{cursor:default;padding-right:0}
html:not(.js) .story__btn::before{transform:scaleY(1)}
.story__inner{overflow:hidden}
.story__pad{padding:0 0 var(--s6)}

/* ---------------------------------------------------------------- prose ---
   THE READING PANEL. Cream, lifted off the red, with a warm shadow so it
   sits ON the page rather than being a hole cut in it. */
.prose{background:var(--page);color:var(--ink);
  padding:clamp(1.5rem,3.5vw,3rem) clamp(1.3rem,3vw,2.8rem);
  border-top:3px solid var(--red-ink);box-shadow:var(--lift-page)}
.prose p{margin:0 0 1.05em;max-width:var(--measure);color:var(--ink)}
.prose h3{margin:2rem 0 .55rem;color:var(--red-ink);font-size:1.15rem;
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  text-transform:none}
.prose a{color:#8E2027;text-decoration-thickness:1px}
.prose a:hover{color:#6E161C}
.prose .muted{color:var(--ink-3)}
.prose blockquote{margin:1.4rem 0;padding:.1rem 0 .1rem 1.3rem;
  border-left:3px solid var(--brass-deep);color:var(--ink-2);font-style:normal;
  hanging-punctuation:first}
.prose blockquote cite{display:block;font-style:normal;font-family:var(--mono);
  font-size:.67rem;letter-spacing:.03em;color:var(--ink-3);margin-top:.6rem}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.4em;
  line-height:.8;padding:.05em .1em 0 0;color:var(--red-ink);font-weight:700}

/* ------------------------------------------------------------- figures --- */
.fig{margin:0 0 var(--s5)}
.fig img{width:100%;height:auto;border:1px solid var(--page-edge);
  background:var(--page-2);
  /* archival plates are warmed a touch so they sit in the palette instead of
     reading as cold grey rectangles dropped onto warm paper */
  filter:sepia(.14) contrast(1.03)}
.fig figcaption{font-family:var(--mono);font-size:.68rem;line-height:1.5;
  color:var(--ink-2);margin-top:.55rem;padding-left:.7rem;
  border-left:2px solid var(--brass-deep);max-width:44rem}
.fig__cr{display:block;margin-top:.28rem;font-size:.62rem;color:var(--ink-3)}
.fig__cr a{text-decoration:underline}

/* -------------------------------------------------------------- sources -- */
.sources{margin-top:1.6rem;padding-top:1rem;border-top:2px solid var(--brass-deep)}
/* --brass-deep is documented above as "the only brass that works ON cream",
   and then it was used for this heading everywhere - including inside the
   district cards, which sit on the dark ground. axe measured it at 2.24:1
   there, six times over. The token was right; the usage was not. Default to
   the brass that works on the dark ground, and switch inside a reading panel. */
.sources__h{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brass);margin:0 0 .6rem}
.prose .sources__h{color:var(--brass-deep)}
.sources{border-top-color:var(--edge)}
.prose .sources{border-top-color:var(--brass-deep)}
.sources ol{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.sources li{font-size:.85rem;line-height:1.45;color:var(--ink-2)}
.sources li a{text-decoration:underline}
.note{background:var(--ground-2);color:var(--cream);
  border-left:3px solid var(--brass);box-shadow:var(--lift-1);
  padding:.85rem 1rem;font-size:.87rem;margin:1.2rem 0}
.note strong{color:var(--white)}
.prose .note{background:var(--page-2);color:var(--ink-2);
  border-left-color:var(--red-ink);box-shadow:none}
.prose .note strong{color:var(--ink)}

/* ------------------------------------------------------------------ map -- */
.maprow{display:grid;gap:clamp(1.2rem,3vw,2.4rem);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.maprow__side{position:sticky;top:5.4rem}
@media (max-width:860px){.maprow{grid-template-columns:1fr}
  .maprow__side{position:static}}
.mapwrap{position:relative;background:var(--page);border:1px solid var(--page-edge);
  padding:.5rem;box-shadow:var(--lift-page)}
.cmap{width:100%;height:auto;display:block;touch-action:manipulation}
.cmap path{fill:var(--page);stroke:#A89684;stroke-width:1.6;cursor:pointer;
  transition:fill var(--dur-1) var(--ease-out),stroke var(--dur-1) var(--ease-out)}
.cmap path.has{fill:var(--map-1)}
.cmap path.has-lots{fill:var(--map-2)}
.cmap path.has-many{fill:var(--map-3)}
.cmap path.boro{stroke:var(--brass-deep);stroke-width:3}
.cmap path:hover,.cmap path:focus{fill:var(--brass);stroke:var(--ink);
  stroke-width:3.4;outline:none}
.cmap .lbl{font-family:var(--mono);font-size:15px;fill:var(--ink);
  pointer-events:none;text-anchor:middle;paint-order:stroke;stroke:var(--page);
  stroke-width:4;stroke-linejoin:round}
.cmap .lbl-dot{fill:var(--red-ink);pointer-events:none}
.cmap .lbl-lead{stroke:var(--red-ink);stroke-width:1.1;stroke-opacity:.55;
  pointer-events:none}
.maptip{position:absolute;pointer-events:none;background:var(--ground);
  color:var(--brass);font-family:var(--mono);font-size:.72rem;
  padding:.35rem .55rem;transform:translate(-50%,-140%);opacity:0;
  transition:opacity var(--dur-1) var(--ease-out);white-space:nowrap;z-index:5;
  box-shadow:var(--lift-2)}
.maptip.on{opacity:1}
.maplegend{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--mono);
  font-size:.64rem;color:var(--muted);margin-top:.7rem;align-items:center}
.maplegend i{display:inline-block;width:13px;height:13px;
  border:1px solid var(--page-edge);margin-right:.3rem;vertical-align:-2px}

/* ---------------------------------------------------------------- table -- */
.tablewrap{overflow-x:auto;border:1px solid var(--page-edge);background:var(--page);
  box-shadow:var(--lift-page)}
table.dir{border-collapse:collapse;width:100%;font-family:var(--mono);
  font-size:.8rem;color:var(--ink)}
table.dir th,table.dir td{text-align:left;padding:.55rem .7rem;vertical-align:top;
  border-bottom:1px solid var(--page-edge)}
table.dir thead th{position:sticky;top:0;z-index:2;background:var(--ground);
  color:var(--brass);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  border-bottom:2px solid var(--brass);white-space:nowrap;font-weight:400}
table.dir tbody tr{transition:background-color var(--dur-1) var(--ease-out)}
table.dir tbody tr:nth-child(even){background:var(--page-2)}
/* the old hover was 1.8% lighter than the row and effectively invisible */
table.dir tbody tr:hover{background:#E3D6C0}
table.dir .nm{font-family:var(--display);font-size:1rem;font-weight:700;
  line-height:1.25;color:var(--ink);letter-spacing:-.012em}
table.dir .cat{display:block;margin-top:.18rem;color:var(--ink-3);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase}
table.dir a{color:#8E2027}
table.dir a.tel{font-variant-numeric:tabular-nums;white-space:nowrap}
table.dir .blurb{color:var(--ink-2);font-family:var(--serif);font-size:.82rem;
  line-height:1.45;max-width:34rem;display:block;margin-top:.3rem}
table.dir thead th:has(.sortbtn){padding:0}
.sortbtn{display:flex;align-items:center;gap:.35rem;width:100%;background:none;
  border:0;cursor:pointer;font:inherit;color:inherit;text-align:left;
  padding:.55rem .7rem;letter-spacing:inherit;text-transform:inherit;
  transition:background-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out)}
.sortbtn:hover{color:var(--brass-hi);background:rgba(255,255,255,.07)}
.sortbtn:active{background:rgba(0,0,0,.25)}
.sortbtn__i{margin-left:auto;width:0;height:0;flex:0 0 auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.28;
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out)}
th[aria-sort="ascending"] .sortbtn__i{opacity:1;transform:rotate(180deg)}
th[aria-sort="descending"] .sortbtn__i{opacity:1}
th[aria-sort="ascending"] .sortbtn,th[aria-sort="descending"] .sortbtn{color:var(--brass-hi)}

/* -------------------------------------------------------------- filters -- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-bottom:var(--s4)}
.field{display:flex;align-items:center;gap:.45rem;border:1px solid var(--edge);
  background:var(--ground-2);padding:.4rem .6rem;flex:1 1 15rem;max-width:24rem;
  box-shadow:var(--lift-1);
  transition:border-color var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) var(--ease-out)}
.field:focus-within{border-color:var(--brass);
  box-shadow:var(--lift-1),0 0 0 3px rgba(232,184,96,.18)}
.field svg{width:14px;height:14px;color:var(--brass);flex:0 0 auto}
.field input{border:0;background:none;font-family:var(--mono);font-size:.82rem;
  color:var(--white);width:100%;padding:.08rem 0}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:none}
select.sel{font-family:var(--mono);font-size:.78rem;padding:.45rem .6rem;
  border:1px solid var(--edge);background:var(--ground-2);color:var(--white);
  /* Reserve the width. A select sized by its longest option resizes when the
     monospace face swaps in, and that was the only reproducible layout shift
     on the site: 0.011 of a 0.1 CLS budget, every run, on the directory. */
  min-width:12.5rem;max-width:15rem;box-shadow:var(--lift-1);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease-out)}
select.sel:hover{border-color:var(--brass)}
.tags{display:flex;flex-wrap:wrap;gap:.3rem}
.tag{font-family:var(--mono);font-size:.7rem;padding:.34rem .65rem;
  border:1px solid var(--edge);background:var(--ground-2);color:var(--cream);
  cursor:pointer;box-shadow:var(--lift-1);
  transition:background-color var(--dur-1) var(--ease-out),
             color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),
             transform var(--dur-1) var(--ease-out)}
.tag:hover{border-color:var(--brass);color:var(--brass-hi)}
.tag:active{transform:translateY(1px)}
.tag[aria-pressed="true"]{background:var(--brass);color:var(--ground);
  border-color:var(--brass)}
.count{font-family:var(--mono);font-size:.73rem;color:var(--muted);margin-left:auto}
button:disabled,input:disabled,select:disabled{opacity:.45;cursor:not-allowed}

/* -------------------------------------------------------------- sports --- */
.team{background:var(--ground-2);border:1px solid var(--edge-soft);
  border-top:4px solid var(--tc,var(--brass));margin:-1px 0 0 -1px;
  padding:var(--s5) var(--s4);display:grid;gap:.6rem;box-shadow:var(--lift-1);
  transition:background-color var(--dur-1) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out)}
.team:hover{background:var(--ground-3);transform:translateY(-2px);
  box-shadow:var(--lift-3)}
.team__badge{display:flex;gap:.45rem;align-items:center}
.swatch{width:14px;height:14px;border:1px solid rgba(255,255,255,.3);
  box-shadow:var(--lift-1)}
.team__n{font-family:var(--display);font-size:1.2rem;font-weight:700;
  line-height:1.15;color:var(--white);letter-spacing:-.02em}
.team__nick{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brass)}
.titles{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.title-yr{font-family:var(--mono);font-size:.84rem;padding:.3rem .55rem;
  background:var(--ground-3);color:var(--cream);font-variant-numeric:tabular-nums;
  border:1px solid var(--edge-soft);box-shadow:var(--lift-1)}
.title-yr.undef{background:var(--brass);color:var(--ground);border-color:var(--brass)}

/* -------------------------------------------------------------- footer --- */
.foot{border-top:1px solid var(--edge);background:var(--ground-2);
  padding-block:var(--s7) var(--s5);box-shadow:var(--lift-1)}
.foot__grid{display:grid;gap:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
/* The footer column headings were <h4> under an <h2>, which skips a level and
   is what axe reports as heading-order. They are <h2 class="foot__h"> now and
   keep exactly the same appearance: the level is for the outline, not the eye. */
.foot h4,.foot__h{color:var(--brass);margin:0 0 .7rem;
  font-family:var(--mono);font-size:.76rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.3}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.38rem}
.foot a{font-family:var(--mono);font-size:.76rem;text-decoration:none;
  color:var(--cream)}
.foot a:hover{color:var(--brass-hi)}
.foot__legal{margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid var(--edge-soft);font-family:var(--mono);font-size:.69rem;
  color:var(--muted);line-height:1.6}
.foot__legal p{max-width:60rem}
.foot__legal strong{color:var(--brass)}

/* ------------------------------------------------------------ utilities -- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);
  font-size:.67rem;letter-spacing:.04em;color:var(--ink-3)}

@media print{
  .masthead,.notice,.nav,.filters,.foot__grid,.story__sign{display:none}
  body{background:#fff;color:#000;background-image:none}
  .prose{border:0;padding:0;box-shadow:none}
  .story__body{grid-template-rows:1fr!important}
}

/* ====================================================================== */
/* PHOTOGRAPHS                                                            */
/*                                                                        */
/* The site held 55 archival plates and showed none of them on any index  */
/* page. Photographs are the most reliable thing on a page for drawing    */
/* the eye, but only when they carry information: Nielsen's eyetracking   */
/* found readers study photographs of real, relevant subjects and give    */
/* decorative stock images no fixations at all. These are dated Library   */
/* of Congress HABS and HAER plates of the actual buildings the stories   */
/* are about, so they are the kind that gets looked at.                   */
/*                                                                        */
/* THE RULE: a photograph may never sit under running text. The hero      */
/* image is masked away across the whole left column, so the headline is  */
/* still read against flat ground at its full 16.4:1. Contrast is not     */
/* traded for atmosphere.                                                 */
/* ====================================================================== */

.hero--photo{position:relative}
.hero__photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  /* Peak opacity of a hero plate, referenced from the crossfade keyframes below
     so the narrow-screen override reaches inside the animation too.
     ⚠ Raised from .66 once the hero became a moving album. At .66 with
     brightness(.80) the 1906 bird's eye map still read - it is hard black line
     on white - but every PHOTOGRAPHIC plate washed into the maroon and the
     background looked simply empty, which is what "I don't see it" meant on the
     second frame. Measured: that frame is the brightest of the five at mean
     luminance 150, so it was the treatment at fault, not the plate.
     The headline contrast is not being traded for this: .hero::before still
     lays a scrim over the whole band and the contrast gate re-runs in both
     engines. */
  --heroop:.86}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  /* warmed so an archival grey plate belongs to the palette. The brightness
     knock-down was .80 and is now .96: combined with the scrim it was hiding
     the picture entirely. Contrast is pushed up instead, which makes a
     photograph legible without making the band lighter behind the text. */
  filter:sepia(.34) contrast(1.16) brightness(.96);
  opacity:var(--heroop);
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 54%,
    rgba(0,0,0,.72) 70%,rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(100deg,transparent 0%,transparent 54%,
    rgba(0,0,0,.72) 70%,rgba(0,0,0,1) 100%)}
/* a second scrim under everything, so even the lit corner stays dark enough */
/* Every hero, not just the one with a photograph in it. The sports hero has
   the same ridge art and no scrim, which left its standfirst at 4.92 in WebKit
   while the pages that had one measured 8.8. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(58,18,24,.72),rgba(58,18,24,.30) 52%,rgba(58,18,24,.86))}
@media (max-width:900px){
  /* narrow screens have no right-hand column to spare, so the photo becomes a
     faint texture rather than a picture competing with the headline */
  .hero__photo{--heroop:.3}
  .hero__photo img{-webkit-mask-image:none;mask-image:none}
}

/* -------------------------------------------- the hero as a moving album ---
   The same crossfade as the .reel band, run behind the headline. It shipped as
   a still plate first and the moving version was put at the FOOT of the home
   page, where nobody scrolled to it - "I don't see it" was the entirely fair
   verdict. A background that moves belongs in the background.

   The cost is kept at zero on first paint by loading only frame 0 eagerly: it
   is the same LCP plate the still hero already used, at the same
   fetchpriority. Every later frame is loading="lazy", so it arrives at low
   priority well before its turn comes round at 8 seconds a plate.            */
/* ⚠ position:absolute is load-bearing and was missing for one build. Without
   it the five plates stack in normal flow inside a container that is
   overflow:hidden and height-constrained, so frame 0 fills the band and frames
   1-4 sit BELOW the visible area. Every symptom pointed elsewhere: the images
   all loaded (naturalWidth non-zero), the computed opacity animated to its peak
   on schedule, and the plate luminance was fine - the band just went empty
   after eight seconds. A pixel diff against an empty hero was what settled it:
   frames 1-4 changed exactly zero pixels. Measure the render, not the inputs. */
.hero__photo--reel img{position:absolute;inset:0;opacity:0;
  animation:herofade calc(var(--n)*8s) linear infinite;
  animation-delay:calc(var(--i)*8s)}
@keyframes herofade{
  0%{opacity:0}
  4%{opacity:var(--heroop)}
  20%{opacity:var(--heroop)}
  24%{opacity:0}
  100%{opacity:0}
}
/* Reduced motion gets the first plate, held. Same contract as .reel. */
@media (prefers-reduced-motion: reduce){
  .hero__photo--reel img{animation:none;opacity:0}
  .hero__photo--reel img[style*="--i:0"]{opacity:var(--heroop)}
}

/* ------------------------------------------------------- picture cards -- */
.card--pic{padding:0;overflow:hidden}
.card__pic{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--ground-3);border-bottom:1px solid var(--edge-soft)}
.card__pic img{width:100%;height:100%;object-fit:cover;
  filter:sepia(.24) contrast(1.04);
  transition:transform var(--dur-3) var(--ease-soft),filter var(--dur-2) var(--ease-out)}
.card--pic:hover .card__pic img{transform:scale(1.045);filter:sepia(.1) contrast(1.08)}
.card--pic .card__body{display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s5) var(--s4)}
.card--pic .card__t{color:var(--white)}
.card--pic:hover .card__t{color:var(--brass-hi)}
/* a thin brass wash across the image bottom ties it to the card frame */
.card__pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(58,18,24,.55));pointer-events:none}

/* ------------------------------------------------------------ gallery --- */
.gallery{display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.plate{position:relative;display:block;margin:-1px 0 0 -1px;
  border:1px solid var(--edge-soft);background:var(--ground-2);
  text-decoration:none;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),
             z-index 0s}
.plate:hover{transform:translateY(-3px);box-shadow:var(--lift-3);z-index:2}
.plate:active{transform:translateY(0);box-shadow:var(--lift-2)}
.plate__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ground-3)}
.plate__img img{width:100%;height:100%;object-fit:cover;filter:sepia(.26) contrast(1.04);
  transition:transform var(--dur-3) var(--ease-soft),filter var(--dur-2) var(--ease-out)}
.plate:hover .plate__img img{transform:scale(1.06);filter:sepia(.06) contrast(1.09)}
.plate__cap{display:block;padding:.7rem .8rem .9rem;font-size:.84rem;line-height:1.4;
  color:var(--cream)}
.plate:hover .plate__cap{color:var(--white)}
.plate__cr{display:block;margin-top:.35rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* a full-bleed archival band, used to break up long index pages */
.band{position:relative;overflow:hidden;border-block:1px solid var(--edge);
  background:var(--ground-3)}
.band img{width:100%;height:clamp(13rem,26vw,22rem);object-fit:cover;object-position:50% 45%;
  filter:sepia(.3) contrast(1.05) brightness(.86)}
a.band__cap{text-decoration:none;transition:background-color var(--dur-2) var(--ease-out)}
a.band__cap:hover{background:linear-gradient(180deg,transparent,rgba(42,14,18,.95))}
a.band__cap:hover b{color:var(--brass-hi)}
.band__cap{position:absolute;left:0;right:0;bottom:0;padding:2.6rem var(--rail) .9rem;
  background:linear-gradient(180deg,transparent,rgba(42,14,18,.88));
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--cream)}
.band__cap b{color:var(--brass);font-weight:400}

/* The standfirst sits in the brightest corner of the panorama, and measured
   4.06:1 against it - below AA. Dimming the whole photograph further would
   have thrown away the picture to fix one paragraph. Instead the standfirst
   gets its own scrim and becomes a deliberate panel: a brass rule, a dark
   wash, and its own edge. Measured 7.9:1 afterwards. */
.hero--photo .hero__lede{position:relative;padding:1rem 1.15rem 1.05rem;
  border-left:3px solid var(--brass);
  background:linear-gradient(90deg,rgba(42,14,18,.90),rgba(42,14,18,.66));
  box-shadow:var(--lift-1),0 8px 24px -14px rgba(0,0,0,.7);
  backdrop-filter:blur(2px)}
@media (max-width:900px){
  .hero--photo .hero__lede{background:linear-gradient(90deg,rgba(42,14,18,.88),rgba(42,14,18,.72))}
}

/* ------------------------------------------------ school district shades --
   Six fills for the district map. They differ in LIGHTNESS as well as hue, so
   the map still separates for a colour-blind reader, and colour is never the
   only cue: every shape carries its district name in a <title>, the legend
   names all six, and the full municipality lists remain below the map. */
:root{
  --dist-0:#7B1E24;   /* Huntingdon Area      dark red   */
  --dist-1:#B4685C;   /* Juniata Valley       terracotta */
  --dist-2:#E3C3B2;   /* Mount Union Area     pale blush */
  --dist-3:#6E5A2A;   /* Southern Huntingdon  olive      */
  --dist-4:#E8B860;   /* Tussey Mountain      brass      */
  --dist-5:#4A5D63;   /* Tyrone Area          slate      */
}
.cmap path.dist-0{fill:var(--dist-0)}
.cmap path.dist-1{fill:var(--dist-1)}
.cmap path.dist-2{fill:var(--dist-2)}
.cmap path.dist-3{fill:var(--dist-3)}
.cmap path.dist-4{fill:var(--dist-4)}
.cmap path.dist-5{fill:var(--dist-5)}
.cmap path.dist-none{fill:var(--page-2)}

/* ------------------------------------------------- dark tokens on cream ---
   .stat and .sources__h were built for the dark ground and then reused inside
   the cream reading panel, where brass reads 1.64:1 and muted 1.85:1. axe found
   ten of these on the sources page alone. Same mistake twice now, so it is
   worth stating as a rule: A TOKEN NAMED FOR A COLOUR IS NOT NAMED FOR A
   CONTEXT. Anything placed inside .prose has to be re-stated for cream. */
.prose .stat{border-right-color:var(--page-edge)}
.prose .stat__n{color:var(--red-ink)}          /* 7.9:1 on cream */
.prose .stat__l{color:var(--ink-3)}            /* 5.9:1 on cream */
.prose .hero__stats{border-top-color:var(--page-edge)}

/* A section heading that is an <h2> for the outline but should LOOK like the
   smaller brass sub-head. Heading level is for the document outline; size and
   colour are for the eye, and the two do not have to agree. */
.h-sub{font-family:var(--display);font-weight:600;
  font-size:clamp(1.15rem,1rem + .55vw,1.5rem);line-height:1.2;
  letter-spacing:-.014em;color:var(--brass)}
.prose .h-sub{color:var(--red-ink);font-weight:700}

/* ======================================================================= */
/* PHONE                                                                   */
/*                                                                         */
/* Measured at 390px with check_mobile.py, which reports three things a    */
/* desktop check cannot see: horizontal overflow, tap-target size and      */
/* computed text size. No page scrolls sideways, which is the one that     */
/* would have been fatal. The other two were bad.                          */
/*                                                                         */
/* The directory is the worst case and the most used: 217 telephone links  */
/* and 233 source links were 14px tall on a page whose entire purpose is   */
/* ringing a place up. WCAG 2.5.5 asks for 44px; below about 32px a thumb  */
/* starts landing on the neighbouring row instead.                         */
/*                                                                         */
/* The label sizes are the second half. A 0.63rem mono label is a          */
/* deliberate small-caps texture at desk distance and a squint at arm's    */
/* length, so the floor rises on small screens only. Nothing changes on    */
/* desktop.                                                                */
/* ======================================================================= */
@media (max-width: 760px) {
  /* --- tap targets --- */
  table.dir a,
  table.dir a.tel     {display:inline-block; padding:.55rem 0; min-height:34px}
  table.dir td        {padding-block:.35rem}
  .foot a             {display:inline-block; padding:.4rem 0; min-height:32px}
  .crumbs a           {display:inline-block; padding:.3rem 0; min-height:30px}
  .sources li a       {display:inline-block; padding:.45rem 0; min-height:32px}
  .sources li         {line-height:1.5}
  /* Padding on an INLINE element grows the hit area without changing the line
     box, so a link inside running prose becomes tappable without reflowing the
     paragraph around it. */
  .prose p a, .card__d a, .note a  {padding-block:.3em}
  .tag, .sel          {min-height:40px}
  .field              {min-height:44px}
  .field input        {min-height:32px}
  .chip               {padding:.42rem .6rem}
  a.chip              {min-height:32px; display:inline-flex; align-items:center}
  .plate              {min-height:44px}

  /* --- label legibility ---
     these are all mono labels sized for a desktop rhythm; on a phone they
     were computing to between 9.6px and 10.4px */
  /* .74rem computes to 11.84px, which is still under the 12px floor - close
     enough to look fixed in a diff and not fixed on a phone. .79rem is 12.6px. */
  .card__m, .chip, .cat, .stat__l, .plate__cr, .sources__h,
  .team__nick, .maplegend, .fig figcaption, .fig__cr,
  table.dir .cat      {font-size:.79rem; letter-spacing:.07em}
  .plate__cr, .fig__cr{font-size:.76rem}
  .crumbs             {font-size:.78rem}
  /* The disclaimer is the most consequential line on the site - it is the one
     that stops a reader thinking this is the county government's page - and it
     was rendering at 10.7px on a phone. */
  .notice             {font-size:.78rem}
  .notice__in         {padding-block:.5rem}
  .nav a              {font-size:.8rem}
  /* figure credits carry a link to the archive record; 14px tall is not a
     tap target */
  .fig__cr a          {display:inline-block; padding-block:.35rem; min-height:30px}
  .foot a             {font-size:.82rem}
  .foot__legal        {font-size:.76rem}
  table.dir           {font-size:.86rem}
  table.dir .blurb    {font-size:.86rem}
}

/* The source under each figure in a municipality's fact strip. Deliberately
   quiet: it must be readable, not compete with the number it qualifies. */
.stat__src{font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;
  color:var(--muted);margin-top:.3rem;line-height:1.35;max-width:14rem}
.prose .stat__src{color:var(--ink-3)}
@media (max-width:760px){.stat__src{font-size:.72rem}}

/* ---------------------------------------------------------------- reel ----
   A crossfade through archival plates, CSS only. Each frame is stacked in the
   same fixed-aspect box and given a share of one long animation cycle, offset
   by its index, so exactly one is opaque at a time and nothing moves.

   The frame keeps its own aspect ratio, so the space is reserved before any
   plate arrives and CLS stays at zero.                                      */
.reel{position:relative;aspect-ratio:16/7;overflow:hidden;border-radius:var(--r-2,6px);
  background:var(--ground,#3A1218)}
.reel__f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:reelfade calc(var(--n)*6s) linear infinite;
  animation-delay:calc(var(--i)*6s)}
@keyframes reelfade{
  0%{opacity:0}
  3%{opacity:1}
  14%{opacity:1}
  17%{opacity:0}
  100%{opacity:0}
}
/* A reader who has asked the operating system to stop animation gets the first
   plate, held still. Not a slower loop: no loop. */
@media (prefers-reduced-motion: reduce){
  .reel__f{animation:none;opacity:0}
  .reel__f[style*="--i:0"]{opacity:1}
}

/* ------------------------------------------------------------- support ----
   The donate ask. Two placements, both restrained: a footer column, and on
   wide screens a small fixed tab on the left edge. Nothing overlays the text
   and nothing appears on a phone but the footer panel, because a floating
   donate widget on a narrow screen covers the thing the reader came for.

   ⚠ Both are rendered only when a hosted payment URL is configured. There is
   no styling here for a "coming soon" state on purpose: a donate button that
   does not take a donation is worse than no button.                          */
.foot__p{margin:0 0 .8rem;font-size:.92rem;opacity:.9;max-width:34ch}
.btn--give{display:inline-block;background:var(--brass,#C8952F);color:#2A0D12;
  font-weight:700;padding:.55rem 1.15rem;border-radius:999px;text-decoration:none;
  border:1px solid rgba(0,0,0,.2)}
.btn--give:hover{filter:brightness(1.08)}
.btn--give:focus-visible{outline:3px solid #FFD489;outline-offset:2px}
.rail{display:none}
@media (min-width:64rem){
  .rail{display:block;position:fixed;left:0;top:50%;z-index:40;
    transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
    background:var(--brass,#C8952F);color:#2A0D12;font-weight:700;
    font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
    padding:1rem .5rem;text-decoration:none;
    border-radius:0 6px 6px 0;border:1px solid rgba(0,0,0,.25);border-left:0}
  .rail:hover{filter:brightness(1.08)}
  .rail:focus-visible{outline:3px solid #FFD489;outline-offset:2px}
}
@media (prefers-reduced-motion: no-preference){.rail{transition:filter .15s}}

/* ---------------------------------------------------------------- song ---- */
.band--song{background:var(--ground,#3A1218);color:var(--cream,#F7F2E9)}
.song{display:grid;gap:1.1rem;align-items:center;padding:2.2rem 0}
@media (min-width:60rem){.song{grid-template-columns:1.1fr .9fr;gap:2.4rem}}
.song__h{margin:0 0 .4rem;font-size:1.5rem}
.song__p{margin:0;opacity:.92;max-width:52ch}
.song__list{display:grid;gap:1.1rem}
.song__one{border:1px solid rgba(247,242,233,.22);border-radius:var(--r-2,6px);
  padding:.9rem 1rem 1rem}
.song__t{margin:0 0 .15rem;font-size:1.05rem}
.song__one .song__p{font-size:.92rem;margin-bottom:.7rem}
/* The native <audio> element is a single tab stop and, on this dark band, the
   browser's default focus ring is invisible. The keyboard gate caught it the
   first time this shipped. Give it the same brass ring everything else uses. */
.song__a{width:100%;min-height:44px;border-radius:999px}
/* box-shadow, not outline. An `outline` shorthand on this replaced element
   computed to style:none with width:3px - the initial value, i.e. the
   declaration was being dropped - and two attempts to fix it in place failed.
   A box-shadow ring is drawn reliably on replaced elements and the keyboard
   gate accepts it as a visible ring. */
.song__a:focus,.song__a:focus-visible,.song__a:focus-within{box-shadow:0 0 0 3px #FFD489}

/* ------------------------------------------------------- gallery filter ---
   Only shown when JavaScript is running, because the control does nothing
   without it and a dead dropdown is worse than no dropdown. */
.js-only{display:none}
.js .js-only{display:flex}
.galfilter{align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1.4rem}
.galfilter__l{font-weight:600}
.galfilter select{min-height:44px;padding:.4rem .6rem;border-radius:6px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:inherit}
.galfilter select:focus,.galfilter select:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}