/* ==========================================================================
   Huntingdon County Information Page
   Design system: THE MUSEUM (2 September 2026)

   The 105 archival plates are the collection and the page is the warm-white
   wall they hang on: plates at their true aspect behind a 1px keyline,
   undimmed, each with a museum label under it, and text never printed over
   a photograph. One serif headline set light and very large, one madder red
   for the play button, the Donate pill, links and the word "prove", and a
   thin rule system doing all the structure, so nothing on the page lacks a
   job. Every left edge sits on one rail. The only movement is a slow
   breathing halo on the play button while a song is actually playing.

   PARCHMENT AND BURGUNDY (31 October 2026). The wall was #FBF8F2, 94% of
   white's luminance, and read as white. It is now parchment #F0E8D9 (81%):
   the polarity research says keep dark-on-light by day because the bright
   ground is what sharpens small type, so it is dimmed, not darkened. The
   accent moved from madder to burgundy, and the notice, masthead and footer
   are a burgundy band with cream type, the institutional pattern of a
   brand-colour bar over a light reading page. Readers whose device is set to
   dark get a warm charcoal page automatically (prefers-color-scheme); there
   is no default dark mode, because light reads better for most readers.

   Every pair was computed with the WCAG 2.2 relative-luminance formula, and
   check_contrast.py measures the rendered pages in both schemes:
     light  ink on paper 14.59  ink-2 on paper-3 7.00  ink-3 on paper-3 5.10
            madder on paper-3 6.73  white on madder 10.06
            on-wine on wine 11.16  on-wine-3 on wine 7.09  on-wine-acc on wine 7.78
     dark   ink on paper 13.69  ink-2 on paper-3 7.85  ink-3 on paper-3 5.16
            madder on paper-3 6.32  button text on madder 7.82
            on-wine on wine 11.89  on-wine-3 on wine 7.29  on-wine-acc on wine 8.21
   Forbidden: madder on ink.
   ========================================================================== */

@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 palette, light scheme. Rules use the names below it, never these,
     so a section can re-theme itself and the search box can restore them ---- */
  --c-paper:#F0E8D9; --c-paper-2:#E7DDCB; --c-paper-3:#DDD2BE;
  --c-rule:#D2C6B1; --c-rule-2:#A89B84;
  --c-ink:#1C1714; --c-ink-2:#463E37; --c-ink-3:#5B524A;
  --c-acc:#7D1D2E; --c-acc-deep:#5E1522; --c-on-acc:#FFFFFF;
  /* ---- the burgundy band: notice, masthead, footer ---- */
  --wine:#5B1B2A; --wine-deep:#45131F; --wine-rule:#7B3B47;
  --on-wine:#F6EEE2; --on-wine-2:#E6D6CE; --on-wine-3:#D2BCB4; --on-wine-acc:#F2BDB5;

  /* ---- the wall ---- */
  --paper:var(--c-paper);
  --paper-2:var(--c-paper-2);
  --paper-3:var(--c-paper-3);
  --rule:var(--c-rule);          /* decorative hairline */
  --rule-2:var(--c-rule-2);      /* plate keylines, scrollbars, control borders */
  /* ---- the ink ---- */
  --ink:var(--c-ink);
  --ink-2:var(--c-ink-2);
  --ink-3:var(--c-ink-3);
  /* ---- the one colour, burgundy (the token keeps its old name) ---- */
  --madder:var(--c-acc);
  --madder-deep:var(--c-acc-deep);
  --white:var(--c-on-acc);       /* type set on the accent */
  --halo:rgba(125,29,46,.18);
  /* ---- map fills: one definition for the map and its key ---- */
  --map-0:var(--c-paper-2); --map-1:#E3C6C2; --map-2:#D3A0A0; --map-3:var(--c-acc); --map-hover:var(--c-acc);
  --dist-0:var(--c-acc); --dist-1:#C2837A; --dist-2:#E3C6C2; --dist-3:#8A7A4E; --dist-4:#C9A24C; --dist-5:#6F7F86;

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

  /* ---- scale ---- */
  --fs-h1:clamp(2.05rem,min(1.2rem + 3.6vw,7vh),4rem);
  --fs-h2:clamp(1.6rem,1.1rem + 1.8vw,2.5rem);
  --fs-h3:clamp(1.1rem,1rem + .5vw,1.35rem);
  --fs-page-h1:clamp(1.9rem,1rem + 2.4vw,3.2rem);
  --fs-stat:clamp(2rem,1.4rem + 2.2vw,3.4rem);
  --fs-body:clamp(1rem,.96rem + .2vw,1.06rem);
  --fs-stand:clamp(1rem,.95rem + .25vw,1.08rem);
  --fs-ui:.9rem;
  --fs-meta:.8rem;         /* running mono: time readout, captions, footer */
  --fs-label:.75rem;       /* uppercase mono labels, place lines, table heads */
  --measure:64ch;

  /* ---- space ---- */
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;--s9:7rem;
  --rail:clamp(1.25rem,5vw,4.5rem);
  --wall:86rem;
  --rail-edge:max(var(--rail),calc((100% - var(--wall))/2 + var(--rail)));
  --ph:clamp(130px,min(13vw,calc(100vh - 690px)),200px);   /* plate height on the wall */
  --tap:2.75rem;

  /* ---- names the SVG art and a few inline styles still use ---- */
  --brass:var(--ink); --brass-hi:var(--madder); --brass-deep:var(--madder); --ember:var(--madder);
  --ground:var(--paper); --page-2:var(--paper-2); --mark-water:var(--madder);

  /* ---- radii: nothing rounded except what is round ---- */
  --r-0:0; --r-pill:999px; --r-disc:50%; --r-2:0;

  /* ---- motion: three durations, two curves, one animation ---- */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-halo:3000ms;
  --ease-out:cubic-bezier(.22,.68,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --ease-soft:cubic-bezier(.33,.02,.28,1);
}

/* ---- the dark scheme: only when the reader's device asks for it. Screen only,
   so a page printed from a dark-mode phone still prints dark on white ---- */
@media screen and (prefers-color-scheme:dark){
  :root{
    --c-paper:#1E1A17; --c-paper-2:#27221E; --c-paper-3:#312B26;
    --c-rule:#3D3630; --c-rule-2:#5E554C;
    --c-ink:#ECE4D6; --c-ink-2:#CBC1B2; --c-ink-3:#A69C8E;
    --c-acc:#EA98A1; --c-acc-deep:#F5BCC2; --c-on-acc:#1E1A17;
    --wine:#4A1622; --wine-deep:#38101A; --wine-rule:#6A2E39;
    --on-wine:#EFE6D9; --on-wine-2:#DDCDC5; --on-wine-3:#C8B2AB; --on-wine-acc:#EFB3AE;
    --halo:rgba(234,152,161,.22);
    --map-1:#4C2A2D; --map-2:#7A3D45;
    --dist-1:#B8706A; --dist-2:#6B3A3E; --dist-3:#9C8C5E; --dist-5:#7F8F96;
  }
}

/* ---- the burgundy band. It re-themes by redefining the names, so every rule
   inside it (nav, pills, focus rings, the mark) follows without its own colour.
   The search box keeps the page palette: a light field on the dark bar ---- */
@media screen{
  .notice,.masthead,.foot{
    --paper:var(--wine); --paper-2:var(--wine-deep); --paper-3:var(--wine-deep);
    --rule:var(--wine-rule); --rule-2:var(--on-wine-3);
    --ink:var(--on-wine); --ink-2:var(--on-wine-2); --ink-3:var(--on-wine-3);
    --madder:var(--on-wine-acc); --madder-deep:var(--on-wine); --white:var(--wine);
    --brass:var(--on-wine); --ground:var(--wine); --mark-water:var(--on-wine-acc)}
  .masthead .mast__search{
    --paper:var(--c-paper); --paper-2:var(--c-paper-2); --paper-3:var(--c-paper-3);
    --rule:var(--c-rule); --rule-2:var(--c-rule-2);
    --ink:var(--c-ink); --ink-2:var(--c-ink-2); --ink-3:var(--c-ink-3);
    --madder:var(--c-acc); --madder-deep:var(--c-acc-deep); --white:var(--c-on-acc)}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;
  scrollbar-color:var(--rule-2) var(--paper);color-scheme:light dark}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:var(--fs-body);line-height:1.6;font-synthesis-weight:none;
  -webkit-tap-highlight-color:rgba(125,29,46,.15)}
img,svg{max-width:100%;display:block}
::selection{background:var(--madder);color:var(--white)}
input,textarea{caret-color:var(--madder)}
:focus-visible{outline:2px solid var(--madder);outline-offset:2px}
[hidden]{display:none !important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
/* with scripting off, controls that only script can drive are not shown;
   with it on, each keeps its own display value */
html:not(.js) .js-only{display:none}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;
  font-optical-sizing:auto;color:var(--ink)}
h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:-.028em}
h1 em{font-style:normal;font-weight:600;color:var(--madder)}
h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.01em;font-weight:600}
h4{font-family:var(--mono);font-size:var(--fs-label);font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0}
p{margin:0 0 1em;max-width:var(--measure);text-wrap:pretty}
.lede{font-size:var(--fs-stand);line-height:1.5;color:var(--ink-2);max-width:62ch}
.eyebrow,.eyebrow--plain{display:block;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3);
  line-height:1.5;text-wrap:balance}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.center{text-align:center}
a{color:var(--madder);text-underline-offset:.2em;text-decoration-thickness:1px;
  transition:color var(--dur-1) var(--ease-out)}
a:hover{color:var(--madder-deep)}
.h-sub{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);
  line-height:1.15;color:var(--ink)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule--strike{height:1px;border:0;margin:0;background:var(--ink)}

/* ----------------------------------------------------------------- shell -- */
.wrap{max-width:var(--wall);margin-inline:auto;padding-inline:var(--rail)}
.wrap--tight{max-width:calc(var(--measure) + 2 * var(--rail))}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;z-index:200;font-family:var(--serif);font-weight:600;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

/* --------------------------------------------------------------- notice --- */
.notice{background:var(--paper-2);color:var(--ink-2);font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.06em;border-bottom:1px solid var(--rule)}
.notice__in{display:flex;gap:.3rem .9rem;flex-wrap:wrap;align-items:baseline;padding-block:.42rem}
.notice b{color:var(--ink);letter-spacing:.12em;font-weight:400}
.notice a{color:var(--ink);text-decoration:underline}

/* -------------------------------------------------------------- masthead -- */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:100}
.masthead__in{display:flex;align-items:center;gap:var(--s5);min-height:4.5rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto;color:var(--ink)}
.brand__mark{width:26px;height:30px;flex:0 0 auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-weight:600;font-size:1.28rem;color:var(--ink);letter-spacing:-.02em}
.brand__sub{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.3rem}
.nav{margin-left:auto;display:flex;gap:0;align-items:stretch}
.nav a{font-family:var(--serif);font-weight:600;font-size:var(--fs-ui);color:var(--ink);
  padding:.5rem .7rem;text-decoration:none;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;border-bottom:2px solid transparent;
  transition:color var(--dur-1) var(--ease-out),border-bottom-color var(--dur-1) var(--ease-out)}
.nav a:hover{color:var(--madder);border-bottom-color:var(--rule-2)}
.nav a[aria-current="page"]{color:var(--madder);border-bottom-color:var(--madder)}
.masthead__cta{display:flex;gap:.5rem;align-items:center;margin-left:var(--s4);flex:0 0 auto}
.crumbs{font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3);
  padding-block:.8rem 0;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.crumbs a{text-decoration:none;color:var(--ink-3)}
.crumbs a:hover{color:var(--madder)}
@media (max-width:74rem){
  .masthead__in{flex-wrap:wrap;gap:0 var(--s4);padding-block:.4rem}
  .brand{order:1}
  .masthead__cta{order:2;margin-left:auto}
  .nav{order:3;flex:1 1 100%;margin-left:0;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);border-top:1px solid var(--rule)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;padding:.45rem .6rem}
}
@media (max-width:760px){
  .masthead__in{min-height:0;padding-block:.35rem}
  .brand__mark,.brand__sub{display:none}
  .brand__name{font-size:1.02rem}
  .brand{min-height:44px}
  .nav a{font-size:.85rem;padding:.4rem .55rem}
}

/* -------------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--serif);font-weight:600;font-size:var(--fs-ui);line-height:1;
  padding:.55rem 1.15rem;border-radius:var(--r-pill);text-decoration:none;min-height:44px;
  cursor:pointer;border:1px solid var(--ink);color:var(--ink);background:transparent;
  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-2) var(--ease-out)}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn--give{background:var(--madder);border-color:var(--madder);color:var(--white)}
.btn--give:hover{background:var(--madder-deep);border-color:var(--madder-deep);color:var(--white)}
.btn--ghost{background:transparent}
.btn--mast{min-height:40px;padding:.45rem 1.05rem;white-space:nowrap}
.btn--submit{padding:.8rem 1.8rem}
@media (max-width:760px){.btn--mast{font-size:.8rem;padding:.3rem .7rem;min-height:40px}
  .masthead__cta{gap:6px;margin-left:auto}}

/* ------------------------------------------------------------------ hero -- */
.hero{position:relative;border-bottom:1px solid var(--rule)}
.hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(20rem,5fr);
  gap:var(--s4) clamp(2rem,6vw,6rem);align-items:start;
  padding-block:clamp(.9rem,2vw,1.4rem) clamp(.8rem,1.6vw,1.2rem)}
.hero__head{grid-column:1}
.hero .eyebrow{margin-bottom:var(--s3)}
.hero h1{max-width:18ch}
.hero__lede{grid-column:1;margin:var(--s4) 0 0}
.hero--v2 .play{grid-column:2;grid-row:1 / span 2}
.lede--narrow{display:none}
@media (max-width:1000px){
  .hero__in{grid-template-columns:1fr;gap:var(--s4)}
  .hero__head,.hero__lede,.hero--v2 .play{grid-column:1}
  .hero--v2 .play{grid-row:auto;order:-1}
  .hero__lede{display:none}
  .lede--narrow{display:block;margin:0 0 var(--s5);max-width:62ch}
  .hero h1{font-size:clamp(1.6rem,1rem + 2.6vw,2.4rem);max-width:none}
}
@media (max-width:760px){
  .hero__in{padding-block:var(--s4) var(--s4)}
  .hero .eyebrow{font-size:var(--fs-label)}
}

/* ---------------------------------------------------------------- player -- */
.play{background:var(--paper-2);border:1px solid var(--rule);padding:clamp(1rem,1.6vw,1.25rem)}
.play .eyebrow{display:none}
.play__h{margin:0 0 .2rem;font-family:var(--display);font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.play__p{margin:0 0 var(--s3);font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3);max-width:none}
/* the chooser: two real radio rows */
.play__pick{border:0;margin:0 0 var(--s3);padding:0;display:grid;border-top:1px solid var(--rule)}
.play__seg{position:relative;display:block;border-bottom:1px solid var(--rule)}
.play__seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.play__opt{display:grid;grid-template-columns:1.1rem 1fr auto;gap:.2rem .8rem;align-items:center;
  min-height:44px;padding:.45rem 0;cursor:pointer;color:var(--ink)}
.play__opt::before{content:"";grid-row:1 / span 2;width:1.1rem;height:1.1rem;border-radius:50%;
  border:1px solid var(--ink-3);background:var(--paper);box-shadow:inset 0 0 0 .32rem var(--paper);
  transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.play__name{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.2}
.play__desc{grid-column:2;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.35}
.play__dur{grid-column:3;grid-row:1 / span 2;font-family:var(--mono);font-size:var(--fs-meta);
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.play__seg input:checked + .play__opt::before{border-color:var(--madder);background:var(--madder)}
.play__seg input:checked + .play__opt .play__name{color:var(--madder)}
.play__seg input:focus-visible + .play__opt{outline:2px solid var(--madder);outline-offset:2px}
.play__seg:hover .play__name{color:var(--madder)}
/* the transport */
.play__deck{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"btn meta" "btn seek";
  gap:.3rem var(--s4);align-items:center}
.play__btn{grid-area:btn;width:64px;height:64px;border-radius:var(--r-disc);border:0;
  background:var(--madder);color:var(--white);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
  transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.play__btn:hover{background:var(--madder-deep)}
.play__btn:active{transform:scale(.96)}
.play__btn:focus-visible{outline:2px solid var(--madder);outline-offset:3px}
.play__btn[data-state="playing"]{animation:halo var(--dur-halo) ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 var(--halo)}50%{box-shadow:0 0 0 8px var(--halo)}}
.play__ic{display:none;fill:currentColor}
.play__btn[data-state="paused"] .play__ic--play{display:block;margin-left:3px}
.play__btn[data-state="playing"] .play__ic--pause{display:block}
.play__meta{grid-area:meta;display:flex;gap:var(--s3);align-items:baseline;min-width:0;flex-wrap:wrap}
.play__t{font-family:var(--serif);font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.2}
.play__sub{display:none}
.play__time{margin-left:auto;font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.play__slash{margin:0 .3em}
.play__status{flex:1 1 100%;font-family:var(--mono);font-size:var(--fs-label);color:var(--madder);min-height:0}
.play__status:empty{display:none}
.play__seek{grid-area:seek;width:100%;margin:0;height:44px;cursor:pointer;background:none;
  accent-color:var(--madder);min-width:0;-webkit-appearance:none;appearance:none}
.play__seek::-webkit-slider-runnable-track{height:2px;background:var(--rule-2)}
.play__seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--madder);border:2px solid var(--paper-2);margin-top:-6px;cursor:pointer}
.play__seek::-moz-range-track{height:2px;background:var(--rule-2)}
.play__seek::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--madder);border:2px solid var(--paper-2)}
.play__seek:focus-visible{outline:2px solid var(--madder);outline-offset:4px}
/* the native players: the whole story with scripting off, gone with it on */
.play__native{display:grid;gap:var(--s3)}
.js .play__native{display:none}
.play__one-t{margin:0 0 .3rem;font-size:.92rem;color:var(--ink)}
.play__one-t b{font-weight:600}
.play__one audio{width:100%;min-height:44px}
.play__one audio:focus,.play__one audio:focus-visible{outline:2px solid var(--madder);outline-offset:2px}
@media (max-width:760px){
  .play{padding:.85rem 1rem}
  .play__h{font-size:1.1rem}
  .play__p{display:none}
  .play__pick{grid-template-columns:1fr 1fr;gap:.5rem;border-top:0;margin-bottom:var(--s3)}
  .play__seg{border:1px solid var(--ink-3)}
  .play__seg:has(input:checked){border-color:var(--madder)}
  .play__opt{grid-template-columns:1fr;min-height:46px;padding:.4rem .6rem;justify-items:center;text-align:center}
  .play__opt::before,.play__desc,.play__dur{display:none}
  .play__name{font-size:.92rem}
  .play__btn{width:52px;height:52px}
}

/* ---------------------------------------------------------------- the wall */
.strip{position:relative;border-block:1px solid var(--rule);padding-top:clamp(.8rem,1.4vw,1.1rem)}
/* a short screen (a 768px laptop) gets a tighter hero so the first plate and
   its label still land inside it */
@media (max-height:820px) and (min-width:761px){
  .hero__in{padding-block:.6rem .5rem}
  .play{padding:.8rem 1rem}
  .play__h{font-size:1.1rem}
  .strip{padding-top:.5rem}
  .strip__bar{padding-bottom:.5rem}
}
.strip .skip:focus{left:var(--rail);top:.6rem;z-index:5}
.strip__bar{display:flex;align-items:center;gap:var(--s3) var(--s5);flex-wrap:wrap;padding-bottom:var(--s3)}
.strip__bar .eyebrow{margin:0}
.strip__lead{margin:0;font-size:.95rem;color:var(--ink-2);max-width:none;flex:1 1 24rem}
.strip__nav{margin-left:auto;gap:.5rem;display:flex}
.strip__btn{width:44px;height:44px;border-radius:var(--r-disc);border:1px solid var(--ink-3);
  background:var(--paper);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.strip__btn:hover{background:var(--paper-3)}
.strip__btn:active{transform:translateY(1px)}
.strip.at-start [data-strip-prev],.strip.at-end [data-strip-next]{opacity:.35;pointer-events:none}
.strip__track{list-style:none;margin:0;padding:0 var(--rail) var(--s5) var(--rail-edge);
  display:flex;gap:clamp(1.25rem,2.6vw,2.5rem);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-padding-inline-start:var(--rail-edge);
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.strip__track::-webkit-scrollbar{height:6px}
.strip__track::-webkit-scrollbar-thumb{background:var(--rule-2)}
.strip__i{flex:0 0 auto;scroll-snap-align:start;width:max(calc(var(--ph) * var(--ar,1.4)),12rem)}
.strip__a{position:relative;display:block;text-decoration:none;color:var(--ink)}
.strip__fig{margin:0}
.strip__pic{display:block;height:var(--ph);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--rule-2)}
.strip__pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-3) var(--ease-out)}
.strip__a:hover img{transform:scale(1.02)}
.strip__cap{display:grid;gap:.15rem;padding:.6rem 0 0;margin-top:.6rem;border-top:1px solid var(--rule)}
.strip__place{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.strip__n{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.strip__t{font-family:var(--serif);font-size:var(--fs-meta);line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.strip__a:hover .strip__t{color:var(--madder)}
.strip__cr{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){
  .strip{--ph:128px}
  .strip__bar{gap:var(--s2) var(--s3);padding-bottom:var(--s3)}
  .strip__bar{display:none}
  .js .strip__nav,.strip__nav{display:none}
  .strip__i{width:max(calc(var(--ph) * var(--ar,1.4)),9.5rem)}
}

/* ------------------------------------------------------------ stats band -- */
.stats-band{border-bottom:1px solid var(--rule);padding-block:clamp(1.6rem,4vw,3rem)}
.hero__stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5) var(--s6);
  border-top:1px solid var(--ink);padding-top:var(--s4)}
.stat{padding:0}
.stat__n{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;
  font-size:var(--fs-stat);line-height:.95;letter-spacing:-.025em;color:var(--ink)}
.stat__l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.5rem}
.stat__src{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);margin-top:.3rem;
  line-height:1.35;max-width:14rem}
@media (max-width:700px){
  .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__stats .stat:last-child{grid-column:1 / -1}
}

/* -------------------------------------------------------------- sections -- */
.section{padding-block:clamp(2.4rem,6vw,4.5rem)}
.section--alt{background:var(--paper-2);border-block:1px solid var(--rule)}
.section__head{display:grid;gap:var(--s3);margin-bottom:var(--s6);max-width:50rem}
.section--head{padding-block:clamp(1.8rem,4vw,3rem) clamp(1rem,2vw,1.4rem)}
.section--body{padding-top:0}
.section--ask{padding-block:var(--s6);border-bottom:1px solid var(--rule)}
.section--note{padding-bottom:var(--s7)}
.section__more{margin:1.6rem 0 0}
.sec__h{font-family:var(--display);font-weight:400;font-size:var(--fs-h2);margin:0 0 var(--s4)}
.story__h1{font-size:var(--fs-page-h1);max-width:22ch}
.contrib-ask{margin-top:1rem;font-size:.95rem}

/* --------------------------------------------------------------- pagehead -- */
.pagehead{border-bottom:1px solid var(--rule)}
.pagehead__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(18rem,5fr);
  gap:var(--s4) clamp(2rem,5vw,4rem);align-items:end;
  padding-block:clamp(2rem,4vw,3rem) clamp(1.4rem,2.5vw,2rem)}
.pagehead h1{font-size:var(--fs-page-h1);max-width:18ch}
.pagehead__side p{margin:0;max-width:44ch}
.pagehead__side .lede{font-size:var(--fs-stand)}
@media (max-width:800px){
  .pagehead__in{grid-template-columns:1fr;align-items:start}
  .pagehead h1{max-width:none}
}

/* ------------------------------------------------------------------ grid -- */
.grid{display:grid;gap:var(--s6) var(--s5);align-items:stretch}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
@media (min-width:60rem){.grid--feature{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid--feature .card--featured{grid-column:span 2;grid-row:span 2}
@media (max-width:40rem){.grid--feature .card--featured{grid-column:auto;grid-row:auto}}
.cards{display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}

/* ------------------------------------------------------------------ card -- */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s3);
  padding:.9rem 0 0;border-top:1px solid var(--ink);text-decoration:none;color:var(--ink);
  background:transparent;height:100%}
.card--pic{padding-top:0;border-top:0}
.card__pic{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--rule-2)}
.card__pic img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease-out)}
.card--pic:hover .card__pic img{transform:scale(1.02)}
.card--pic .card__body{display:flex;flex-direction:column;gap:var(--s3);
  padding:.9rem 0 0;margin-top:.6rem;border-top:1px solid var(--ink)}
.card__m{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.card__t{font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.2;
  letter-spacing:-.015em;color:var(--ink);transition:color var(--dur-1) var(--ease-out)}
.card--featured .card__t{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem)}
a.card:hover .card__t{color:var(--madder)}
.card__d{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.5}
.card__h{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
.card__p{margin:0;font-size:.92rem;color:var(--ink-2)}
.card--ask{gap:var(--s4)}
.card--ask .card__t{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
.card--ask .btn{align-self:flex-start;margin-top:auto}

/* ------------------------------------------------------------------ map --- */
.maprow{display:grid;gap:clamp(2rem,6vw,6rem);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.maprow__side{position:sticky;top:1.5rem}
@media (max-width:860px){.maprow{grid-template-columns:1fr}.maprow__side{position:static}}
.mapwrap{position:relative;background:var(--paper-2);border:1px solid var(--rule-2);padding:.5rem}
.cmap{width:100%;height:auto;display:block;touch-action:manipulation}
.cmap path{fill:var(--map-0);stroke:var(--paper);stroke-width:1.4;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(--ink);stroke-width:2}
.cmap path:hover{fill:var(--map-hover);stroke:var(--ink);stroke-width:2}
/* focus is not hover: a shape already filled madder must still show it */
.cmap path:focus,.cmap path:focus-visible{fill:var(--paper-3);stroke:var(--ink);stroke-width:3;outline:2px solid var(--madder);outline-offset:2px}
.cmap .lbl{font-family:var(--mono);font-size:15px;fill:var(--ink);pointer-events:none;
  text-anchor:middle;paint-order:stroke;stroke:var(--paper-2);stroke-width:4;stroke-linejoin:round}
.cmap .lbl-dot{fill:var(--madder);pointer-events:none}
.cmap .lbl-lead{stroke:var(--madder);stroke-width:1.1;stroke-opacity:.6;pointer-events:none}
.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(--paper)}
.maptip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:var(--fs-label);padding:.35rem .55rem;
  transform:translate(-50%,-140%);opacity:0;transition:opacity var(--dur-1) var(--ease-out);
  white-space:nowrap;z-index:5}
.maptip.on{opacity:1}
.maplegend{display:flex;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:var(--fs-label);
  color:var(--ink-3);margin-top:.7rem;align-items:center}
.maplegend i{display:inline-block;width:13px;height:13px;border:1px solid var(--rule-2);
  margin-right:.3rem;vertical-align:-2px}

/* ----------------------------------------------------------------- prose -- */
.prose{color:var(--ink)}
.prose p{margin:0 0 1.05em;max-width:var(--measure);color:var(--ink);line-height:1.65}
.prose h3{margin:2rem 0 .55rem;color:var(--ink);font-size:1.2rem;font-family:var(--display);
  font-weight:600;letter-spacing:-.01em}
.prose a{color:var(--madder)}
.prose a:hover{color:var(--madder-deep)}
.prose .muted{color:var(--ink-3)}
.prose blockquote{margin:1.4rem 0;padding:.1rem 0 .1rem 1.3rem;border-left:2px solid var(--madder);
  color:var(--ink-2);font-style:normal;font-size:.98rem}
.prose blockquote cite{display:block;font-style:normal;font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.03em;color:var(--ink-3);margin-top:.6rem}
.dropcap::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0;color:inherit;font-weight:inherit}
.fig{margin:0 0 var(--s5)}
.fig img{width:100%;height:auto;border:1px solid var(--rule-2);background:var(--paper-2)}
.fig figcaption{font-family:var(--mono);font-size:var(--fs-meta);line-height:1.5;color:var(--ink-2);
  margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--rule);max-width:44rem}
.fig__cr{display:block;margin-top:.28rem;font-size:var(--fs-label);color:var(--ink-3)}
.fig__cr a{text-decoration:underline}
.sources{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--ink)}
.sources__h{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
.sources ol{margin:0;padding-left:1.4rem;display:grid;gap:.35rem;font-variant-numeric:tabular-nums}
.sources li{font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.sources li a{text-decoration:underline}
.note{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--rule);
  border-left:2px solid var(--madder);padding:1rem 1.25rem;font-size:.9rem;margin:1.2rem 0}
.note strong{color:var(--ink)}
.note--warn{border-left-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);
  font-size:var(--fs-meta);letter-spacing:.04em;color:var(--ink-3);background:var(--paper-2);
  padding:.35rem .6rem;border:1px solid var(--rule)}

/* ---------------------------------------------------------------- chips --- */
.chips{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0}
.chip{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .55rem;color:var(--ink-2);border:1px solid var(--rule-2);white-space:nowrap;background:transparent}
.chip--brick{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.chip--src{color:var(--madder);border-color:var(--madder)}
.chip--none{border-style:dashed}
.chip--out{color:var(--ink)}
a.chip{text-decoration:none;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
a.chip:hover{color:var(--paper);background:var(--ink);border-color:var(--ink)}

/* -------------------------------------------------------------- stories --- */
.stories{border-top:1px solid var(--ink)}
.story{border-bottom:1px solid var(--rule);position:relative}
.story__btn{width:100%;background:none;border:0;padding:1rem 2.6rem 1rem 0;text-align:left;
  font:inherit;color:inherit;cursor:pointer;display:grid;gap:.4rem;position:relative;min-height:48px}
.story__t{font-family:var(--display);font-size:clamp(1.05rem,.98rem + .4vw,1.25rem);font-weight:600;
  line-height:1.22;color:var(--ink);max-width:44rem;letter-spacing:-.012em;
  transition:color var(--dur-1) var(--ease-out)}
.story__btn:hover .story__t{color:var(--madder)}
.story__sign{position:absolute;right:.1rem;top:1.15rem;width:18px;height:18px;color:var(--ink);
  transition:transform var(--dur-3) var(--ease-soft)}
.story__btn[aria-expanded="true"] .story__sign{transform:rotate(135deg);color:var(--madder)}
.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}
html:not(.js) .story__sign{display:none}
html:not(.js) .story__btn{cursor:default;padding-right:0}
.story__inner{overflow:hidden}
.story__pad{padding:0 0 var(--s6)}

/* ---------------------------------------------------------------- table --- */
.tablewrap{overflow-x:auto;border-top:1px solid var(--ink);
  -webkit-mask-image:none;mask-image:none}
table.dir{border-collapse:collapse;width:100%;font-family:var(--serif);font-size:.92rem;color:var(--ink)}
table.dir th,table.dir td{text-align:left;padding:.65rem .7rem;vertical-align:top;border-bottom:1px solid var(--rule)}
table.dir thead th{position:sticky;top:0;z-index:2;background:var(--paper-2);color:var(--ink-3);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);white-space:nowrap;font-weight:400}
table.dir tbody tr{transition:background-color var(--dur-1) var(--ease-out)}
table.dir tbody tr:hover{background:var(--paper-3)}
table.dir .nm{font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.25;color:var(--ink)}
table.dir .cat{display:block;margin-top:.18rem;color:var(--ink-3);font-family:var(--mono);
  font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase}
table.dir a{color:var(--madder)}
table.dir a.tel{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.dir .blurb{color:var(--ink-2);font-size:.86rem;line-height:1.45;max-width:34rem;display:block;margin-top:.3rem}
table.dir tr[data-sectionof] th{background:var(--paper-2);font-family:var(--display);font-weight:600;
  font-size:1.1rem;letter-spacing:0;text-transform:none;color:var(--ink);position:static}
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:.65rem .7rem;letter-spacing:inherit;text-transform:inherit;min-height:44px}
.sortbtn:hover{color:var(--ink);background:var(--paper-3)}
.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:.35;
  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(--ink)}
table.dir tr[id]{scroll-margin-top:4rem}

/* -------------------------------------------------------------- filters --- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:var(--s4)}
.field{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ink-3);background:var(--paper);
  padding:0 .7rem;flex:1 1 15rem;max-width:24rem;min-height:44px}
.field:focus-within{border-color:var(--madder)}
.field svg{width:14px;height:14px;color:var(--ink-3);flex:0 0 auto}
.field input{border:0;background:none;font-family:var(--serif);font-size:.95rem;color:var(--ink);width:100%;padding:.4rem 0;min-height:40px}
.field input::placeholder{color:var(--ink-3)}
.field input:focus-visible{outline:2px solid var(--madder);outline-offset:-2px}
select.sel{font-family:var(--serif);font-size:.92rem;padding:.5rem .7rem;border:1px solid var(--ink-3);
  background:var(--paper);color:var(--ink);min-width:12.5rem;max-width:15rem;min-height:44px;cursor:pointer}
select.sel:hover{border-color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-family:var(--serif);font-weight:600;font-size:var(--fs-ui);padding:.45rem .9rem;min-height:44px;
  border:1px solid var(--ink-3);border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)}
.tag .muted{font-family:var(--mono);font-size:var(--fs-meta);margin-left:.3rem}
.tag:hover{border-color:var(--ink)}
.tag[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag[aria-pressed="true"] .muted{color:var(--paper-2)}
.count{font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3);margin-left:auto}
button:disabled,input:disabled,select:disabled{opacity:.45;cursor:not-allowed}
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;font-family:var(--serif);
  font-weight:600;font-size:var(--fs-ui);margin:0 0 1rem}
.jump__l{font-family:var(--mono);font-weight:400;color:var(--ink-3);letter-spacing:.08em;
  text-transform:uppercase;font-size:var(--fs-label)}
.jump a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule-2)}
.jump a:hover{color:var(--madder);border-bottom-color:var(--madder)}

/* -------------------------------------------------------------- gallery --- */
.galfilter{align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1.4rem}
.js .galfilter{display:flex}
.galfilter__l{font-weight:600}
.galfilter select{min-height:44px;padding:.4rem .6rem;border:1px solid var(--ink-3);background:var(--paper);color:var(--ink);font:inherit}
.gallery{display:grid;gap:var(--s6) var(--s5);grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.plate{position:relative;display:block;text-decoration:none;color:var(--ink)}
.plate__img{display:block;overflow:hidden;background:var(--paper-2);border:1px solid var(--rule-2)}
.plate__img img{width:100%;height:auto;display:block;transition:transform var(--dur-3) var(--ease-out)}
.plate:hover .plate__img img{transform:scale(1.02)}
.plate__cap{display:block;padding:.6rem 0 0;margin-top:.6rem;border-top:1px solid var(--rule);
  font-size:var(--fs-meta);line-height:1.4;color:var(--ink)}
.plate:hover .plate__cap{color:var(--madder)}
.plate__cr{display:block;margin-top:.35rem;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.06em;color:var(--ink-3)}
@media (max-width:52rem){.gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr))}}

/* --------------------------------------------------------------- sports --- */
.team{border-top:2px solid var(--tc,var(--ink));padding:.9rem 0 0;display:grid;gap:.6rem}
.team__badge{display:flex;gap:.45rem;align-items:center}
.swatch{width:14px;height:14px;border:1px solid var(--rule-2)}
.team__n{font-family:var(--display);font-size:1.2rem;font-weight:600;line-height:1.15;color:var(--ink);letter-spacing:-.015em}
.team__nick{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.titles{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.25rem}
.title-yr{font-family:var(--mono);font-size:var(--fs-meta);padding:.3rem .55rem;background:var(--paper-2);
  color:var(--ink);font-variant-numeric:tabular-nums;border:1px solid var(--rule)}
.title-yr.undef{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ------------------------------------------------------------- calendar --- */
.cal{display:grid;gap:1.6rem 2.4rem;margin-top:1.4rem}
@media (min-width:52rem){.cal{grid-template-columns:1fr 1fr}}
.cal__mh{margin:0 0 .5rem;font-size:1.05rem;padding-bottom:.35rem;border-bottom:1px solid var(--ink)}
.cal__l{list-style:none;margin:0;padding:0}
.cal__day{display:flex;gap:.8rem;padding:.45rem 0;border-bottom:1px solid var(--rule)}
.cal__d{flex:0 0 2ch;text-align:right;font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3);padding-top:.15rem}
.cal__t{flex:1}
.cal__y{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);margin-top:.1rem}
.cal__day.is-today{background:var(--paper-2);outline:2px solid var(--madder);outline-offset:2px}

/* --------------------------------------------------------------- footer --- */
.foot{border-top:1px solid var(--ink);padding-block:var(--s6) var(--s7);margin-top:var(--s6)}
@media screen{.foot{background:var(--paper);border-top-color:var(--paper)}}
.foot__grid{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.foot h4,.foot__h{color:var(--ink-3);margin:0 0 .7rem;font-family:var(--mono);font-size:var(--fs-label);
  font-weight:400;letter-spacing:.12em;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(--serif);font-size:.95rem;text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--madder)}
.foot__p{margin:0 0 .8rem;font-size:.92rem;color:var(--ink-2);max-width:34ch}
.foot__legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3);line-height:1.6}
.foot__legal p{max-width:70ch}
.foot__legal strong{color:var(--ink)}
.rail{display:none}
.band,.reel,.hero__ridge{display:none}

/* ------------------------------------------------------------------ form -- */
.form{display:grid;gap:var(--s5)}
.form__row{display:grid;gap:.4rem}
.form__row > label,.form__choice legend{font-family:var(--serif);font-weight:600;font-size:.9rem;color:var(--ink)}
.req{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-left:.4rem;font-weight:400}
.form input[type=text],.form input[type=email],.form textarea{font:inherit;font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink-3);padding:.6rem .75rem;min-height:44px;width:100%}
.form textarea{min-height:12rem;resize:vertical;line-height:1.55}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--madder);outline-offset:2px;border-color:var(--madder)}
.form input[type=file]{font:inherit;font-size:.92rem;color:var(--ink-2);padding:.4rem 0}
.form__choice{border:0;padding:0;margin:0}
.form__choice label{display:flex;gap:.6rem;align-items:center;min-height:48px;font-weight:400;
  color:var(--ink);cursor:pointer;border-bottom:1px solid var(--rule)}
.form__choice input,.form__consent input{width:1.1rem;height:1.1rem;accent-color:var(--madder);flex:0 0 auto;margin:0}
.form__consent label{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;background:var(--paper-2);
  border:1px solid var(--rule);padding:1rem 1.25rem;font-size:.95rem;line-height:1.5;color:var(--ink)}
.form__consent input{margin-top:.2rem}
.form__hint{font-family:var(--mono);font-size:var(--fs-meta);color:var(--ink-3)}
.form__err{display:none;font-size:.88rem;color:var(--madder);font-weight:600}
.form__err.on{display:block}
.form__note{font-size:.88rem;color:var(--ink-3);margin:0}
.form__status{margin:0;font-weight:600;color:var(--ink)}
.form__status.is-error{color:var(--madder)}
.form__hp{position:absolute!important;left:-999px;top:0;width:1px;height:1px;overflow:hidden}
.form.is-sending{opacity:.7;pointer-events:none}
.form__done{background:var(--paper-2);border:1px solid var(--rule);border-left:2px solid var(--madder);padding:1rem 1.25rem}

/* ------------------------------------------------------- the phone, once -- */
@media (max-width:760px){
  .foot a,.crumbs a,.sources li a,.fig__cr a,.foot__p a,.muted a{display:inline-flex;align-items:center;min-height:44px}
  .prose p a,.card__d a{padding-block:.3em}
  .note a{display:inline-flex;align-items:center;min-height:36px;padding-inline:.15rem}
  p > a:only-child{display:inline-flex;align-items:center;min-height:44px}
  .card__crest{width:44px;height:44px}
  .crumbs a{padding-inline:.35rem;min-width:44px;justify-content:center}
  a.chip{display:inline-flex;align-items:center;min-height:40px}
  td a,.prose li a,.section li a{display:inline-flex;align-items:center;min-height:36px;padding-inline:.15rem}
  .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
  /* the directory becomes cards: name, then address, telephone and source on one line */
  table.dir thead{position:absolute;left:-999px;top:0}
  table.dir,table.dir tbody,table.dir tr,table.dir td{display:block;width:100%}
  table.dir tr[data-row]{padding:.55rem 0 .6rem;border-bottom:1px solid var(--rule)}
  table.dir tr[data-row] td{display:inline;padding:0;border:0}
  table.dir tr[data-row] td:first-child{display:block;margin-bottom:.15rem}
  table.dir tr[data-row] td:nth-child(2){display:block;font-size:.85rem;color:var(--ink-2);margin-bottom:.1rem}
  table.dir tr[data-row] td:nth-child(4)::before{content:"\00b7";margin:0 .5rem;color:var(--ink-3)}
  table.dir .cat{display:none}
  table.dir .blurb{display:none}
  table.dir tr[data-row] td a,table.dir a.tel{display:inline-flex;align-items:center;min-height:36px;min-width:44px;padding:0 .4rem;margin:0}
  table.dir tr[data-sectionof] th{display:block;padding:.9rem 0 .5rem}
  .jump__l{font-size:var(--fs-meta)}
}

/* ------------------------------------------------------- site search ------ */
.mast__search{position:relative;display:none;align-items:center;gap:.4rem;order:4;flex:1 1 100%;
  margin:.5rem 0 .3rem;min-width:0;border:1px solid var(--ink-3);border-radius:var(--r-pill);
  padding:0 .8rem;background:var(--paper);min-height:40px;
  transition:border-color var(--dur-1) var(--ease-out)}
.js .mast__search.is-open{display:flex}
.mast__search:focus-within{border-color:var(--madder);outline:2px solid var(--madder);outline-offset:2px}
.masthead__in{flex-wrap:wrap}
.mast__glass{display:inline-flex;color:var(--ink-3);flex:0 0 auto}
.mast__glass svg,.mast__sbtn svg{width:15px;height:15px}
.mast__q{border:0;background:none;font-family:var(--serif);font-size:.95rem;color:var(--ink);
  width:100%;min-width:0;padding:.3rem 0;min-height:38px;outline:0}
.mast__q::placeholder{color:var(--ink-3)}
.mast__q::-webkit-search-cancel-button{-webkit-appearance:none}
.mast__panel{position:absolute;top:calc(100% + .45rem);right:0;left:auto;width:min(26rem,92vw);
  background:var(--paper);border:1px solid var(--rule-2);z-index:120;padding:.3rem 0;
  box-shadow:0 22px 44px -20px rgba(28,23,20,.45)}
.mast__status{margin:0;padding:.4rem .9rem .2rem;font-family:var(--mono);font-size:var(--fs-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mast__status:empty{display:none}
.mast__list{list-style:none;margin:0;padding:0}
.mast__r{display:grid;grid-template-columns:4.6rem 1fr;gap:.05rem .7rem;align-items:baseline;
  padding:.5rem .9rem;text-decoration:none;color:var(--ink);min-height:44px}
.mast__r:hover,.mast__r:focus-visible{background:var(--paper-2)}
.mast__r:focus-visible{outline:0;box-shadow:inset 4px 0 0 var(--madder)}
.mast__r:focus-visible .mast__rt{text-decoration:underline}
.mast__rk{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--madder)}
.mast__rt{font-family:var(--serif);font-weight:600;font-size:.95rem;line-height:1.25}
.mast__rp{grid-column:2;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.3}
.mast__all{display:flex;align-items:center;padding:.5rem .9rem;min-height:44px;margin-top:.2rem;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-top:1px solid var(--rule)}
.mast__all:hover{color:var(--madder)}
.mast__sbtn{display:inline-flex;width:40px;height:40px;border-radius:var(--r-disc);border:1px solid var(--ink);
  background:transparent;color:var(--ink);align-items:center;justify-content:center;cursor:pointer;
  padding:0;flex:0 0 auto}
.mast__sbtn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.mast__sbtn:focus-visible{outline:2px solid var(--madder);outline-offset:2px}
.mast__panel{width:100%}
/* between the nav's own-row breakpoint and about 1344px the masthead must
   still hold brand, eight nav items, the search toggle and the pills on one
   row: with the toggle it wrapped at 1280px and pushed the first plate off
   the 800px fold. Tighter link padding and gaps buy the 90px it needs. */
@media (max-width:96rem) and (min-width:74.01rem){
  .nav a{padding:.5rem .5rem}
  .masthead__in{gap:var(--s4)}
  .masthead__cta{margin-left:.5rem}
}
/* and with a Donate pill beside Send a story, 1280px needs the pills a size
   smaller too (measured with a placeholder link: the row wrapped otherwise) */
@media (max-width:84rem) and (min-width:74.01rem){
  .btn--mast{padding:.38rem .8rem;font-size:.9rem;min-height:38px}
  .mast__sbtn{width:38px;height:38px}
  .masthead__cta{gap:.35rem}
  .nav a{padding:.5rem .45rem}
  .brand__name{font-size:1.18rem}
}
@media (max-width:74rem){.mast__search{margin:.3rem 0 .35rem}}

/* ------------------------------------------------------- enlarge ---------- */
.plate{position:relative}
.plate__a{display:block;text-decoration:none;color:inherit}
.fig{position:relative}
.zoom{position:absolute;right:.5rem;top:.5rem;width:44px;height:44px;border-radius:var(--r-disc);
  border:1px solid rgba(255,255,255,.65);background:rgba(28,23,20,.62);color:#fff;padding:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:zoom-in;z-index:2;
  opacity:0;transition:opacity var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.zoom svg{width:18px;height:18px}
.plate:hover .zoom,.fig:hover .zoom,.zoom:focus-visible{opacity:1}
.zoom:hover{background:var(--madder)}
.zoom:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:none){.zoom{opacity:1}}
.js [data-zoom-src] img{cursor:zoom-in}
.lightbox{border:0;padding:0;margin:auto;background:transparent;color:var(--paper);
  max-width:min(96vw,1400px);max-height:96vh;overflow:visible}
.lightbox::backdrop{background:rgba(20,16,14,.93)}
.lightbox__fig{margin:0;display:grid;justify-items:center;gap:.7rem}
.lightbox__img{max-width:min(96vw,1400px);max-height:min(78vh,1000px);width:auto;height:auto;
  display:block;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.lightbox__cap{font-family:var(--mono);font-size:var(--fs-meta);line-height:1.5;text-align:center;
  max-width:70ch;display:grid;gap:.3rem;color:rgba(251,248,242,.88);padding-inline:1rem}
.lightbox__cr{font-size:var(--fs-label);color:rgba(251,248,242,.62)}
.lightbox__go{color:#fff;text-decoration:underline;text-underline-offset:.2em;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.lightbox__x,.lightbox__nav{position:fixed;width:48px;height:48px;border-radius:var(--r-disc);
  border:1px solid rgba(255,255,255,.5);background:rgba(28,23,20,.6);color:#fff;font-size:1.7rem;
  line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  z-index:2;padding:0;font-family:var(--serif)}
.lightbox__x{top:1rem;right:1rem}
.lightbox__nav--prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox__nav--next{right:1rem;top:50%;transform:translateY(-50%)}
.lightbox__x:hover,.lightbox__nav:hover{background:var(--madder)}
.lightbox__x:focus-visible,.lightbox__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lightbox__nav[hidden]{display:none}
@media (max-width:760px){
  .lightbox__nav--prev,.lightbox__nav--next{top:auto;bottom:1rem;transform:none}
  .lightbox__img{max-height:66vh}
}

/* ------------------------------------------------------- share ------------ */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.8rem 0 0;
  padding-top:1rem;border-top:1px solid var(--rule)}
.share__l{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-right:.3rem}
.btn--sm{font-size:.85rem;padding:.4rem .9rem;min-height:40px}
.share__s{font-family:var(--mono);font-size:var(--fs-label);color:var(--madder)}
@media (max-width:760px){.btn--sm{min-height:44px}}

/* ------------------------------------------------------- same-place plates */
.section--plates{border-top:1px solid var(--rule);padding-top:clamp(1.8rem,4vw,2.8rem)}
.gallery--row{grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr))}

/* ------------------------------------------------------- nearby ----------- */
.near{margin-top:1.6rem}
.near .eyebrow{margin-bottom:.4rem}
.near__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.near__a{display:inline-flex;align-items:baseline;gap:.55rem;border:1px solid var(--rule-2);
  border-radius:var(--r-pill);padding:.45rem .9rem;min-height:40px;text-decoration:none;
  color:var(--ink);font-family:var(--serif);font-size:.9rem;
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.near__a:hover{border-color:var(--madder);color:var(--madder)}
.near__d{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3)}

/* ------------------------------------------------------- timeline --------- */
.tl{list-style:none;margin:0 0 var(--s6);padding:0;border-top:1px solid var(--rule)}
.tl__i{display:grid;grid-template-columns:4.5rem 1fr;gap:.15rem 1rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--rule)}
.tl__y{font-family:var(--mono);font-size:var(--fs-meta);color:var(--madder);
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.tl__t{font-family:var(--serif);font-weight:600;font-size:1rem;line-height:1.3;
  text-decoration:none;color:var(--ink)}
.tl__t:hover{color:var(--madder)}
.tl__p{grid-column:2;font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3)}
.tl__h{margin:var(--s6) 0 var(--s3);display:flex;align-items:baseline;gap:.8rem}
.tl__h small{font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);letter-spacing:.08em}
@media (max-width:760px){.tl__i{grid-template-columns:3.6rem 1fr}}

/* ------------------------------------------------------- markers ---------- */
.cmap .mk circle{fill:var(--madder);stroke:var(--paper);stroke-width:2.5;cursor:pointer;
  transition:r var(--dur-1) var(--ease-out)}
.cmap .mk:hover circle,.cmap .mk:focus-visible circle{r:13;stroke:var(--ink)}
.cmap .mk:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mkrs{display:grid;gap:var(--s6) var(--s5);margin-top:var(--s7);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.mkr{border-top:1px solid var(--ink);padding-top:var(--s4);display:grid;gap:.55rem;align-content:start}
.mkr__meta{margin:0;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;
  color:var(--ink-3);line-height:1.7}
.mkr__meta a{color:var(--ink-2)}
.mkr__t{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.2;margin:0}
.mkr__q{margin:.2rem 0 0;padding:0 0 0 1rem;border-left:2px solid var(--madder);font-size:.95rem;
  line-height:1.55;color:var(--ink)}
.mkr__q cite{display:block;margin-top:.45rem;font-style:normal;font-family:var(--mono);
  font-size:var(--fs-label);color:var(--ink-3)}
.mkr__loc{margin:0;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.mkr:target{outline:2px solid var(--madder);outline-offset:10px}

/* ------------------------------------------------------- directory extras */
.hrs{display:block;margin-top:.25rem;font-family:var(--mono);font-size:var(--fs-label);color:var(--ink-3);line-height:1.4}
.chip--also{display:inline-block;margin:0 .4rem .2rem 0;color:var(--madder);border-color:var(--madder)}

/* ----------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .play__btn[data-state="playing"]{animation:none}
}

/* ------------------------------------------------------------------ print -- */
@media print{
  .masthead,.notice,.nav,.filters,.foot__grid,.story__sign,.strip__nav,.play__deck,.play__pick,.share,.zoom,.mast__search{display:none}
  body{background:#fff;color:#000}
  .story__body{grid-template-rows:1fr!important}
}