/* ==========================================================================
   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}
.hero > .wrap,.pagehead > .wrap{position:relative;z-index:1}
.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}
.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)}
.story__body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease-soft)}
.story__btn[aria-expanded="true"] + .story__body{grid-template-rows:1fr}
.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)}
.sources__h{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brass-deep);margin:0 0 .6rem}
.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);
  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))}
.foot h4{color:var(--brass);margin:0 0 .7rem}
.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}
}