:root{
    /* Ink and paper. Two ramps, both named, so a shade is chosen rather than
       typed: --ink for headlines and --ink-2 for body copy at 14-15px, where
       full-strength ink on warm paper reads as glare. */
    --paper:#FBF8F2; --panel:#fff; --ink:#1A2B3C; --ink-2:var(--ink-2);
    /* --faded was #8A94A0: 2.9:1 on paper, which fails WCAG AA and carries the
       whole colophon, every count and every line of metadata on the page. Same
       hue, dark enough to read. */
    --faded:#687381; --hairline:#E4DDD0; --hairline-2:#EFE9DE;
    /* Three accents, each with a wash for fills and a mid for borders. */
    /* Ochre stays as it is for rules, fills and 38px display type. Set as
       10.5px mono — which is how the hero states every figure — 3.07:1 is not
       readable, so text gets its own darker step. */
    --ochre:#C77E28; --ochre-ink:#A06520;
    --ochre-w:rgba(199,126,40,.10); --ochre-m:rgba(199,126,40,.30);
    --pine:#2E5E4E;  --pine-w:rgba(46,94,78,.08);    --pine-m:rgba(46,94,78,.28);
    --flag:#B3402E;  --flag-w:rgba(179,64,46,.07);   --flag-m:rgba(179,64,46,.28);
    /* One spacing scale. Sections were spaced by eye at 32/40/46/52px, which is
       why no two of them lined up. */
    --s1:4px; --s2:8px; --s3:12px; --s4:18px; --s5:26px;
    --s6:38px; --s7:56px; --s8:78px;
    --r1:3px; --r2:6px; --r3:10px; --r4:999px;
    /* The page has two column widths, not one. Prose is set to a measure a
       reader can track; maps, timelines and picture grids get the wider plate,
       and both sit inside the same shell so their edges agree. */
    --shell:1180px; --gutter:22px; --measure:68ch; --plate:1180px;
    /* The sticky bar's own height, so anything that scrolls to an anchor can
       subtract it instead of hiding the heading it just jumped to. */
    --navh:48px; --stick:60px;
  }
  .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);
    color:var(--paper);padding:10px 16px;border-radius:0 0 var(--r2) 0;
    font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;text-decoration:none}
  .skip:focus{left:0}
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{background:var(--paper);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
  /* The shell is the page's one vertical edge. The nav used to centre a 1180px
     box while the content centred a 900px one, so on any screen above 1180 the
     nav began 140px to the left of the first word under it. Both are hung on
     the same box now: the shell sets the edges, the measure sets the reading
     width inside them. */
  .wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
  /* Prose is capped at a measure a reader can track without losing the line.
     Everything else — maps, timelines, picture grids — keeps the full shell,
     which is what the extra 280px is for. */
  .kicker,.standfirst,.gintro,.cintro,.map-missing,.ldisc,.tl-hint,
  .story .lede,.gal-key,.news-h .lede,.lintro,.colophon p,
  .pdir-note,.osum-note{max-width:var(--measure)}
  /* Headlines are set at 30-38px, so a measure counted in the body's ch would
     break them after four words. They get their own, counted in their own. */
  h2.sect,.news-h h2{max-width:24ch;line-height:1.08}
  :target,[id]{scroll-margin-top:calc(var(--navh) + 10px)}
  a{color:inherit}
  .masthead{padding:46px 0 24px;border-bottom:3px solid var(--ink)}
  .issue-line{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faded);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  h1.mag{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(42px,8.5vw,80px);line-height:.95;letter-spacing:-.02em;margin:16px 0 10px}
  h1.mag .sun{color:var(--ochre)}
  .standfirst{font-size:16.5px;max-width:64ch}
  .standfirst b{color:var(--pine)}
  .kicker{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine);margin-bottom:8px}
  h2.sect{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(26px,4.8vw,38px);margin-bottom:8px}
  .story{padding:40px 0 20px;border-bottom:1px solid var(--hairline)}
  .story .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:16px}
  .story h3{font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin-bottom:6px}
  .story h3 .n{color:var(--ochre)}
  .story p{font-size:14.5px;color:var(--ink-2)}
  .tl-section{padding:32px 0 10px;border-bottom:1px solid var(--hairline)}
  .tl-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:12px}
  .tl-legend{display:flex;gap:16px;font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);flex-wrap:wrap}
  .lg{display:flex;align-items:center;gap:6px}
  .sw{width:14px;height:10px;border-radius:2px;display:inline-block}
  .sw.es{background:rgba(199,126,40,.18);border:1.5px solid var(--ochre)}
  .sw.fr{background:rgba(46,94,78,.14);border:1.5px solid var(--pine)}
  .sw.pj{background:transparent;border:1.5px dashed var(--faded)}
  .tl-viewport{position:relative;overflow-x:auto;overflow-y:hidden;cursor:grab;border:1px solid var(--hairline);border-radius:6px;background:#fff;-webkit-overflow-scrolling:touch;user-select:none;-webkit-user-select:none}
  .tl-viewport.dragging{cursor:grabbing}
  .tl-inner{position:relative}
  .tl-months{position:relative;height:34px;border-bottom:1px solid var(--hairline)}
  .tl-mlabel{position:absolute;top:8px;font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);letter-spacing:.06em;padding-left:8px;border-left:1px solid var(--hairline);height:26px;white-space:nowrap}
  .tl-mlabel.jan{color:var(--ink);font-weight:500}
  .tl-lanes{position:relative}
  .tl-grid{position:absolute;top:0;bottom:0;border-left:1px solid #F1ECE2}
  .tl-today{position:absolute;top:0;bottom:0;border-left:2px solid var(--flag);z-index:5}
  .tl-today::after{content:"TODAY";position:absolute;top:2px;left:5px;font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--flag);letter-spacing:.1em}
  .pill{position:absolute;appearance:none;-webkit-appearance:none;text-align:left;font:inherit;height:20px;line-height:18px;border-radius:3px;font-family:'Spline Sans Mono',monospace;font-size:10.5px;padding:0 7px;white-space:nowrap;cursor:pointer;z-index:3}
  .pill.es{background:rgba(199,126,40,.15);border:1.5px solid var(--ochre);color:#8a5a1d}
  .pill.fr{background:rgba(46,94,78,.12);border:1.5px solid var(--pine);color:var(--pine)}
  .pill.pj{background:transparent!important;border-style:dashed!important;color:var(--faded)!important}
  .pill:hover{z-index:9;filter:brightness(.92)}
  .pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px;z-index:10}
  .tl-tip{position:fixed;z-index:99;display:none;max-width:280px;background:var(--ink);color:var(--paper);padding:10px 13px;border-radius:5px;font-size:13px;line-height:1.45;pointer-events:none}
  .tl-tip .d{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--ochre-ink);display:block;margin-bottom:2px}
  .tl-hint{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);margin-top:8px}
  .profile{padding:44px 0 20px;border-bottom:1px solid var(--hairline)}
  .dstrip{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;border-top:3px solid var(--ink);padding-top:18px}
  .bignum{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(58px,10vw,96px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--ochre);user-select:none}
  .hblock{flex:1 1 360px;min-width:270px}
  .profile h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(25px,4.4vw,36px);line-height:1.06;margin-bottom:8px}
  .meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:'Spline Sans Mono',monospace;font-size:12.5px;margin:6px 0 2px}
  .meta b{color:var(--pine);font-weight:500}
  .stamps{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
  .stamp{font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.08em;border:2px solid var(--flag);color:var(--flag);padding:2px 8px;border-radius:3px;transform:rotate(-2deg);text-transform:uppercase;background:rgba(179,64,46,.04)}
  .stamp.win{border-color:var(--pine);color:var(--pine);transform:rotate(1.5deg);background:rgba(46,94,78,.05)}
  .prose p{margin-bottom:12px;max-width:70ch;font-size:15px}
  h3.sec{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin:26px 0 5px;display:flex;align-items:center;gap:12px}
  h3.sec::after{content:"";flex:1;height:1px;background:var(--hairline)}
  .ledger{list-style:none}
  .ledger li{padding:8px 0;border-bottom:1px dotted var(--hairline);max-width:76ch;font-size:14.5px}
  .ledger a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--ochre)}
  .ledger .desc{display:block;font-size:13.5px;color:#42505e;margin-top:2px}
  .chip{display:inline-block;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.06em;padding:1.5px 6px;border-radius:2px;margin-left:7px;vertical-align:2px;text-transform:uppercase}
  .chip.ok{background:rgba(46,94,78,.1);color:var(--pine)}
  .chip.press{background:rgba(26,43,60,.08);color:var(--ink)}
  .chip.warn{background:rgba(179,64,46,.12);color:var(--flag)}
  .chip.q{background:rgba(199,126,40,.12);color:var(--ochre)}
  .chip.new{background:var(--ochre);color:#fff}
  .qb{margin:12px 0;padding-left:16px;border-left:3px solid var(--ochre);max-width:66ch}
  .qb p{font-family:'Fraunces',serif;font-weight:300;font-size:17.5px;line-height:1.45;font-style:italic}
  .qb cite{display:block;font-style:normal;font-family:'Spline Sans Mono',monospace;font-size:11.5px;color:var(--faded);margin-top:4px}
  .intel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);margin-top:10px}


  /* One card per row on a phone put 3,000px of contents page in front of the
     first story. The icon moves up beside the title instead of sitting on its
     own line, which is most of the height, and two columns fit from 380px. */
  @media(max-width:720px){
    .hgrid{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px}
    .hcard{padding:13px 13px 11px;gap:6px}
    .hcard .ic{width:22px;height:22px;position:absolute;top:13px;right:12px;opacity:.7}
    .hcard{position:relative}
    .hcard h3{font-size:16px;padding-right:26px}
    .hcard .n{font-size:9.5px}
    .hcard p{font-size:12.5px;line-height:1.45}
    .hcard .go{font-size:9.5px}
  }
  @media(max-width:379px){.hgrid{grid-template-columns:1fr}}

  /* ---------- hero ---------- */
  .hero{padding:26px 0 30px;border-bottom:1px solid var(--hairline)}
  .hero-lede{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.15em;
    text-transform:uppercase;color:var(--faded);margin-bottom:12px}
  .hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:12px}
  .hcard{display:flex;flex-direction:column;gap:9px;padding:16px 17px 15px;border:1px solid var(--hairline);
    border-radius:6px;background:#fff;text-decoration:none;color:inherit;position:relative;
    transition:border-color .16s,transform .16s,box-shadow .16s}
  .hcard:hover{border-color:var(--ochre);transform:translateY(-2px);
    box-shadow:0 12px 26px -18px rgba(26,43,60,.55)}
  .hcard:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
  .hcard .ic{width:34px;height:34px;color:var(--pine)}
  .hcard:hover .ic{color:var(--ochre)}
  .hcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.15;display:flex;
    align-items:baseline;gap:8px;flex-wrap:wrap}
  .hcard .n{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ochre);font-weight:500}
  .hcard p{font-size:13.5px;color:#3a4756;line-height:1.5}
  .hcard .go{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded);margin-top:auto}
  .hcard:hover .go{color:var(--pine)}
  @media(max-width:560px){.hgrid{grid-template-columns:1fr;gap:9px}.hcard{padding:14px 15px}}
  /* ---------- NEWS TICKER ---------- */
  .news{padding:26px 0 22px;border-bottom:3px double var(--flag)}
  .news-h{display:block;margin-bottom:12px}
  .news-h .lede{display:block;margin-bottom:6px}
  .news-h h2{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(22px,4vw,30px)}
  .news-h .lede{font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--flag)}
  .news-h .lede::before{content:"●";margin-right:6px;animation:blip 1.9s infinite}
  @keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){.news-h .lede::before{animation:none}}
  /* Thirteen slides in one flex row means the box is always as tall as the
     longest story, so the short ones sat above 300px of empty white. The
     viewport takes the height of the slide actually showing. */
  /* The card is only as wide as the story it holds — at plate width the
     text stopped at the measure and left a third of the card empty. */
  .news-vp{max-width:calc(var(--measure) + 46px);
    position:relative;overflow:hidden;border:1px solid var(--hairline);
    border-radius:var(--r2);background:var(--panel);transition:height .35s cubic-bezier(.4,0,.2,1)}
  .news-track{display:flex;align-items:flex-start;touch-action:pan-y;transition:transform .5s cubic-bezier(.4,0,.2,1)}
  @media (prefers-reduced-motion:reduce){.news-vp{transition:none}}
  @media (prefers-reduced-motion:reduce){.news-track{transition:none}}
  .ncard{flex:0 0 100%;padding:20px 22px 18px;box-sizing:border-box}
  .ncard .tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
  .ncard h3{font-family:'Fraunces',serif;font-weight:600;font-size:20px;line-height:1.25;margin-bottom:7px}
  .ncard p,.ncard .q{max-width:var(--measure)}
  .ncard p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:8px}
  .ncard .q{font-family:'Fraunces',serif;font-size:15.5px;font-style:italic;color:var(--ink);border-left:3px solid var(--flag);padding-left:12px;margin:9px 0}
  .ncard .srcs{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded);line-height:1.7}
  .news-nav{max-width:calc(var(--measure) + 46px);display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:10px;flex-wrap:wrap}
  .news-dots{display:flex;gap:6px;flex-wrap:wrap}
  .nd{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--faded);background:transparent;cursor:pointer;padding:0}
  .nd[aria-current="true"]{background:var(--flag);border-color:var(--flag)}
  .news-btns{display:flex;gap:6px}
  .nb{font-family:'Spline Sans Mono',monospace;font-size:11px;padding:4px 10px;border:1px solid var(--hairline);border-radius:20px;background:#fff;color:#5b6875;cursor:pointer}
  .nb:hover{border-color:var(--flag);color:var(--flag)}
  /* shared content tags, also used inside cards */
  .t{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;padding:2.5px 7px;border-radius:3px;white-space:nowrap;font-weight:500}
  .t-off{background:rgba(46,94,78,.13);color:#24503f}
  .t-press{background:rgba(179,64,46,.12);color:var(--flag)}
  .t-blog{background:rgba(199,126,40,.15);color:#8a5a1d}
  .t-att{background:rgba(90,110,200,.13);color:#3d4f9e}
  .t-social{background:rgba(120,120,130,.13);color:#5b6875}
  .t-video{background:rgba(26,43,60,.10);color:var(--ink)}
  .t-legal{background:var(--flag);color:#fff}
  .t-live{background:var(--flag);color:#fff}
  .t-warn{background:#7a2718;color:#fff}
  .pulse li .t{margin-right:5px;vertical-align:1px}
  .ledger li .t{margin-right:5px}


  /* ---------- lead photography ---------- */
  .lead{margin:14px 0 4px}
  .lead-t{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ochre-ink);margin-bottom:8px}
  /* Four columns with a 2x2 lead fills exactly when there are five pictures.
     There are grids here with two, three, four, seven and eight — and a fixed
     two-row track stretched the empty cells into a square hole beside the lead
     that read as a missing photograph. Rows size to their contents now, and a
     grid too small for a lead cell does not pretend to have one. */
  .lead-g{display:grid;gap:6px;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
  .lead-g:not(:has(> a:nth-child(5))){grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .lead-g:not(:has(> a:nth-child(5))) > a:first-child{grid-column:auto;grid-row:auto}
  .lead-g a{position:relative;display:block;border-radius:4px;overflow:hidden;
    background:#F3EEE4;border:1px solid var(--hairline);line-height:0}
  .lead-g a:first-child{grid-column:span 2;grid-row:span 2}
  .lead-g img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
  .lead-g a:first-child img{aspect-ratio:3/2;height:100%}
  .lead-g a:hover{border-color:var(--ochre)}
  .lead-c{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;
    font-family:'Spline Sans Mono',monospace;font-size:9px;color:#fff;
    background:linear-gradient(transparent,rgba(26,43,60,.82));
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media(max-width:560px){.lead-g{grid-template-columns:repeat(2,1fr)}
    .lead-g a:first-child{grid-column:span 2;grid-row:span 1}}

  /* The lead sets the strip's height; the thumbs beside it have to reach the
     same baseline or the card shows a block of empty board under them, which
     read as a photograph that failed to load. The column count follows the
     number of pictures there actually are — 21 of the 64 cards have one or two.
  */
  .pcard-pics{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2px;
    background:var(--hairline-2);align-items:stretch}
  .pcard-pics:not(:has(> a:nth-child(3))){grid-template-columns:2fr 1fr}
  .pcard-pics:not(:has(> a:nth-child(2))){grid-template-columns:1fr}
  .pcard-pics a{display:block;line-height:0;position:relative;height:100%}
  .pcard-pics img{width:100%;height:100%;object-fit:cover;display:block}
  .pcard-pics > a:first-child img{aspect-ratio:3/2}
  /* The lead spanned two rows, which needs five pictures to fill. No place
     card has more than three, so every one of them drew a two-row strip
     with the second row empty. One row, and the lead is simply wider. */
  .pcard-pics:has(> a:nth-child(5)) > a:first-child{grid-row:span 2}
  .pcard-pics a:first-child img{aspect-ratio:1/1}
  .pcard-b{padding:12px 14px 13px}
  .pcard h4{font-family:'Fraunces',serif;font-size:18px;line-height:1.15;margin-bottom:4px}
  .ptier{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.09em;
    text-transform:uppercase;padding:1px 6px;border-radius:2px;color:#fff;margin-left:6px}
  .ptier.A{background:var(--pine)} .ptier.B{background:var(--ochre)}
  .ptier.C{background:rgba(26,43,60,.55)}
  .pmeta{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded);
    margin-bottom:8px}
  .plinks{list-style:none}
  .plinks li{padding:3px 0;border-bottom:1px dotted var(--hairline)}
  .plinks a{font-size:12.5px;color:var(--ink);text-decoration:none;line-height:1.3}
  .plinks a:hover{color:var(--ochre);text-decoration:underline}
  .plinks .pw{font-family:'Spline Sans Mono',monospace;font-size:9px;color:var(--faded)}
  /* a source that has gone: the citation still shows, struck through, because
     hiding it would hide that the claim ever had one */
  .gone{color:var(--faded);text-decoration:line-through;text-decoration-thickness:.5px;cursor:help}
  .pdir{margin-top:22px;border-top:1px solid var(--hairline)}
  .pdir h3{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--pine);margin:14px 0 8px}
  .pdir-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
  .pdir-g div{font-size:13px;padding:3px 0;border-bottom:1px dotted var(--hairline);
    display:flex;justify-content:space-between;gap:8px}
  .pdir-g span{font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--faded);
    white-space:nowrap}


  /* ---------- organisers' feeds ---------- */
  .ofeeds{margin-top:26px;padding-top:20px;border-top:1px solid var(--hairline)}
  .ofeeds h3{font-family:'Fraunces',serif;font-size:22px;margin-bottom:4px}
  .ofd{margin-top:16px}
  .ofd h4{font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ochre-ink);margin-bottom:6px}
  .ofd h4 span{color:var(--faded);text-transform:none;letter-spacing:0}
  .ofd-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:4px}
  .ofd-g a{display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#EFE9DC}
  .ofd-g img{width:100%;height:100%;object-fit:cover;display:block}
  .noshots{margin-top:14px;padding:11px 13px;background:#F7F3EA;border-radius:4px;
    font-size:13px;line-height:1.55;color:var(--ink-2)}
  .noshots a{color:var(--pine)}

  /* ---------- organisations ---------- */
  .osec{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  .osum{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 4px;border:1px solid var(--hairline);
    border-radius:6px;overflow:hidden;background:#fff}
  .osum div{flex:1 1 140px;padding:13px 15px;border-right:1px solid var(--hairline)}
  .osum div:last-child{border-right:0}
  .osum b{display:block;font-family:'Fraunces',serif;font-size:27px;line-height:1;color:var(--ink)}
  .osum span{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faded);display:block;margin-top:5px;line-height:1.4}
  .ochips{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 4px}
  .ogrid{display:grid;gap:14px;margin-top:14px}
  @media(min-width:760px){.ogrid{grid-template-columns:1fr 1fr}}
  @media(min-width:1120px){.ogrid{grid-template-columns:1fr 1fr 1fr}}
  .ocard{border:1px solid var(--hairline);border-radius:6px;background:#fff;
    padding:15px 17px 14px;display:flex;flex-direction:column}
  .ocard.correspondent{background:#FCFAF6}
  .ocard h4{font-family:'Fraunces',serif;font-size:18px;line-height:1.2;margin:0 0 3px}
  .octry{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ochre-ink)}
  .ocat{font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.07em;
    text-transform:uppercase;padding:2px 6px;border-radius:2px;background:var(--pine);
    color:#fff;margin-left:6px;white-space:nowrap}
  .ocard.correspondent .ocat{background:#8A8272}
  .ocard.sig .ocat{background:#7C5C9E}
  .oaddr{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:8px}
  .ocontact{font-family:'Spline Sans Mono',monospace;font-size:11.5px;margin-top:9px;
    line-height:1.7;word-break:break-word}
  .ocontact a{color:var(--pine)}
  .ocontact .k{color:var(--faded);display:inline-block;min-width:52px}
  .osoc{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .osoc a{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.05em;
    text-transform:uppercase;border:1px solid var(--hairline);border-radius:3px;
    padding:3px 7px;color:var(--faded);text-decoration:none}
  .osoc a:hover{border-color:var(--ochre);color:var(--ochre)}
  .opages{margin-top:auto;padding-top:10px;font-family:'Spline Sans Mono',monospace;
    font-size:10px;color:var(--faded)}
  .ostrip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:11px}
  .oth{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:#EFE9DC}
  .oth img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
  .oth:hover img{transform:scale(1.06)}
  .ofeed{margin-top:11px}
  .ofeed h5{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--faded);margin-bottom:5px}
  .opost{display:block;font-size:12.5px;line-height:1.42;color:var(--ink);text-decoration:none;
    padding:5px 0;border-top:1px dotted var(--hairline)}
  .opost:hover{color:var(--ochre)}
  .opl{font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.06em;
    text-transform:uppercase;color:#fff;background:var(--pine);border-radius:2px;
    padding:1px 5px;margin-right:5px;vertical-align:1px}
  .opost i{display:block;font-family:'Spline Sans Mono',monospace;font-size:9.5px;
    color:var(--faded);font-style:normal;margin-top:2px}
  .oread{margin:10px 0 0;padding:0;list-style:none}
  .oread li{font-size:12.5px;line-height:1.45;padding:4px 0;border-top:1px dotted var(--hairline)}
  .oread a{color:var(--pine);text-decoration:none}
  .oread a:hover{text-decoration:underline}
  .onone{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded);
    margin-top:9px;font-style:normal}

  /* ---------- event -> federation ---------- */
  .runby{margin-top:14px;padding:11px 13px;border-left:3px solid var(--pine);
    background:#F7F3EA;border-radius:0 4px 4px 0}
  .runby h5{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--faded);margin-bottom:4px}
  .runby b{font-family:'Fraunces',serif;font-size:16px;font-weight:600;display:block;
    line-height:1.25;margin-bottom:3px}
  .runby p{font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0}
  .runby .rl{font-family:'Spline Sans Mono',monospace;font-size:11px;margin-top:6px;
    display:flex;gap:12px;flex-wrap:wrap}
  .runby .rl a{color:var(--pine)}

  /* ---------- shared across editions ---------- */
  .prev-ed{margin-top:14px}
  .prev-ed h5{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--faded);margin-bottom:5px}
  .prev-ed .pe-n{font-size:12.5px;color:var(--ink-2);margin-bottom:7px;line-height:1.5}
  .pe-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
  .pe-g a{display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:#EFE9DC;
    position:relative}
  .pe-g img{width:100%;height:100%;object-fit:cover;display:block}
  .pe-g .yr{position:absolute;left:0;bottom:0;background:rgba(26,43,60,.82);color:#fff;
    font-family:'Spline Sans Mono',monospace;font-size:9px;padding:1px 4px}
  .gi:hover{border-color:var(--ochre)}
  .gi .xn{position:absolute;top:4px;right:4px;background:rgba(179,64,46,.92);color:#fff;
    font-family:'Spline Sans Mono',monospace;font-size:9px;padding:1px 5px;border-radius:2px}
  .gmore{display:block;margin:16px auto 0;font-family:'Spline Sans Mono',monospace;font-size:11.5px;
    padding:8px 18px;border:1px solid var(--hairline);border-radius:20px;background:#fff;cursor:pointer;color:#5b6875}
  .gmore:hover{border-color:var(--ochre);color:var(--ink)}
  /* ---------- creators ---------- */
  .csec{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  .cintro{max-width:62ch;color:var(--ink-2);margin:8px 0 14px}
  .ccats{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:12px 0 14px}
  .ccats button{font:500 12px/1 'Archivo',sans-serif;padding:7px 12px;border-radius:999px;
    border:1px solid var(--hairline);background:transparent;color:var(--ink-2);cursor:pointer}
  .ccats button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .ccount{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);margin-left:auto}
  .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .ccard{border:1px solid var(--hairline);border-radius:12px;padding:14px 14px 12px;
    background:var(--card,transparent)}
  .ccard.organisation{border-left:3px solid var(--accent,#B4543A)}
  .chead{display:flex;gap:11px;align-items:center;margin-bottom:8px}
  .cav{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px;
    background:var(--hairline)}
  .cavx{display:flex;align-items:center;justify-content:center;font:600 19px/1 'Fraunces',serif;
    color:var(--ink-2)}
  .ccard h4{margin:0;font:600 15px/1.25 'Fraunces',serif;display:flex;gap:7px;
    align-items:baseline;flex-wrap:wrap}
  .ccat{font:500 10px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.08em;
    color:var(--faded)}
  .chandle{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--accent,#B4543A);
    text-decoration:none}
  .cbio{font-size:13px;line-height:1.45;color:var(--ink-2);margin:2px 0 8px}
  .cfacts{display:flex;gap:12px;flex-wrap:wrap;font-family:'Spline Sans Mono',monospace;
    font-size:11px;color:var(--ink-2);margin-bottom:6px}
  .cfacts .k{color:var(--faded);margin-right:3px}
  .cheld{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);margin:0 0 8px}
  .cstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
  .cth{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:3px}
  .cth img{width:100%;height:100%;object-fit:cover;display:block}
  .cvp{position:absolute;left:2px;bottom:2px;background:rgba(12,20,28,.78);color:#fff;
    border-radius:8px;padding:1px 4px;font-family:'Spline Sans Mono',monospace;font-size:9px}
  @media(max-width:600px){ .cgrid{grid-template-columns:1fr} }


  .unrated{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;background:rgba(26,43,60,.55);padding:2px 7px;
    border-radius:2px;margin-left:8px}
  .eu-src{font-family:'Spline Sans Mono',monospace;font-size:11px;margin-top:10px}
  .eu-src a{color:var(--pine)}
  .eu-att{margin-top:10px;padding:9px 11px;background:#F7F3EA;border-radius:4px;font-size:13px;
    line-height:1.5;color:var(--ink-2)}
  .eu-att b{font-family:'Spline Sans Mono',monospace;color:var(--flag)}
  .gi:hover{border-color:var(--ochre)}
  .gi .xn{position:absolute;top:4px;right:4px;background:rgba(179,64,46,.92);color:#fff;
    font-family:'Spline Sans Mono',monospace;font-size:9px;padding:1px 5px;border-radius:2px}
  .gmore{display:block;margin:16px auto 0;font-family:'Spline Sans Mono',monospace;font-size:11.5px;
    padding:8px 18px;border:1px solid var(--hairline);border-radius:20px;background:#fff;cursor:pointer;color:#5b6875}
  .gmore:hover{border-color:var(--ochre);color:var(--ink)}


  .blogs{margin-top:14px}
  .blogs-t{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--pine);background:none;border:0;padding:0;cursor:pointer}
  .blogs-t:hover{text-decoration:underline}
  .blogs-n{font-size:12.5px;color:var(--faded);line-height:1.5;margin:6px 0 8px;max-width:70ch}
  .blogs.closed .blog-list{display:none}
  .blog-list{list-style:none;margin-top:8px;border-top:1px solid var(--hairline)}
  .blog-list li{padding:7px 0;border-bottom:1px dotted var(--hairline)}
  .blog-list a{color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
  .blog-list a:hover{color:var(--ochre);text-decoration:underline}
  .blog-meta{display:block;font-family:'Spline Sans Mono',monospace;font-size:10px;
    color:var(--faded);margin-top:2px}
  .blog-fp{color:var(--flag)}

  .shots.fromblogs .shots-t{color:var(--flag)}
  .shots.fromblogs .tk:hover{border-color:var(--flag)}
  .tk-src{position:absolute;top:5px;left:5px;background:rgba(26,43,60,.78);color:#fff;
    font-family:'Spline Sans Mono',monospace;font-size:8.5px;padding:1px 4px;border-radius:2px;
    max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


  /* ---------- legality ---------- */
  .lsec{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  .lsum{display:flex;flex-wrap:wrap;gap:0;margin:18px 0 6px;border:1px solid var(--hairline);
    border-radius:6px;overflow:hidden;background:#fff}
  .lsum div{flex:1 1 150px;padding:13px 15px;border-right:1px solid var(--hairline)}
  .lsum div:last-child{border-right:0}
  .lsum b{display:block;font-family:'Fraunces',serif;font-size:27px;line-height:1;color:var(--ink)}
  .lsum span{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faded);display:block;margin-top:5px;line-height:1.4}
  .lgrid{display:grid;gap:16px;margin-top:18px}
  @media(min-width:860px){.lgrid{grid-template-columns:1fr 1fr}}
  .lcard{border:1px solid var(--hairline);border-radius:6px;background:#fff;padding:0;
    overflow:hidden;display:flex;flex-direction:column}
  .lcard.open{border-left:3px solid var(--pine)}
  .lcard.split{border-left:3px solid var(--ochre)}
  .lcard.unverified{border-left:3px solid #B9B0A0}
  .lhead{padding:15px 19px 12px;border-bottom:1px solid var(--hairline)}
  .lcard h4{font-family:'Fraunces',serif;font-size:22px;display:flex;align-items:baseline;
    gap:9px;flex-wrap:wrap;margin:0 0 5px;line-height:1.15}
  .lcc{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);
    letter-spacing:.1em}
  .lstatus{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.07em;
    text-transform:uppercase;padding:3px 8px;border-radius:2px;color:#fff;background:var(--ochre)}
  .lcard.open .lstatus{background:var(--pine)}
  .lcard.unverified .lstatus{background:#8A8272}
  .levid{font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.07em;
    text-transform:uppercase;padding:3px 7px;border-radius:2px;border:1px solid var(--hairline);
    color:var(--faded);background:#FBF8F2}
  .levid.primary{color:var(--pine);border-color:rgba(58,90,74,.4)}
  .lrow{padding:13px 19px 12px;border-top:1px solid var(--hairline)}
  .lrow:first-of-type{border-top:0}
  .lrow h5{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--pine);margin-bottom:6px}
  .lcard.unverified .lrow h5{color:#8A8272}
  .lrow p{font-size:14px;line-height:1.58;color:var(--ink)}
  .lsrc{display:block;font-family:'Spline Sans Mono',monospace;font-size:10px;margin-top:7px}
  .lsrc a{color:var(--faded)} .lsrc a:hover{color:var(--ochre)}
  .llive{margin:0;padding:0}
  .llive li{list-style:none;padding:8px 0;border-bottom:1px dotted var(--hairline);font-size:13.5px;
    line-height:1.5}
  .llive li:last-child{border-bottom:0}
  .llive b.when{font-family:'Spline Sans Mono',monospace;font-size:10px;color:var(--flag);
    display:block;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
  .lprac{margin:auto 19px 16px;padding:11px 13px;background:#F7F3EA;border-radius:4px;
    font-size:13.5px;line-height:1.5;color:#3a4756}
  .ldisc{margin-top:18px;font-size:12.5px;color:var(--faded);line-height:1.55;max-width:76ch}

  /* ---------- map section ---------- */
  .mapsec{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  .mapwrap{position:relative;border:1px solid var(--hairline);border-radius:6px;overflow:hidden;
    background:#EAF0F2;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
  .mapwrap.drag{cursor:grabbing}
  .mapwrap svg{display:block;width:100%;height:auto}
  .mapland{fill:#F6F1E6;stroke:#DCD2BE;stroke-width:.8;stroke-linejoin:round}
  .mk{cursor:pointer}
  .mk circle.h{fill:transparent;stroke:none}
  .mk circle.d{stroke:#fff;stroke-width:1.6;transition:r .12s}
  .mk circle.d{fill:#8A94A6}
  .mk.at circle.d{fill:#A8506B}
  .mk.ch circle.d{fill:#C0392B}
  .mk.cz circle.d{fill:#9E6B3A}
  .mk.de circle.d{fill:#B4543A}
  .mk.es circle.d{fill:var(--ochre)}
  .mk.fr circle.d{fill:var(--pine)}
  .mk.gr circle.d{fill:#3F6FB5}
  .mk.hr circle.d{fill:#2F8B8B}
  .mk.ie circle.d{fill:#3F8B5C}
  .mk.int circle.d{fill:#5C5C5C}
  .mk.it circle.d{fill:#6E8B57}
  .mk.nl circle.d{fill:#C88A2E}
  .mk.no circle.d{fill:#4C6FA5}
  .mk.pt circle.d{fill:#7C5C9E}
  .mk.uk circle.d{fill:#4E6E8E}
  /* An event the deck rates highly should be findable without knowing there is
     a filter for it. Rated events get a larger dot, the best a ring as well. The
     unrated Europe-sweep entries stay small, which is honest: nobody has read
     their sources. */
  .mk.rated circle.d{r:7}
  .mk.top circle.d{r:9;stroke-width:2.4}
  .map-legend{display:flex;flex-wrap:wrap;gap:9px 15px;margin-top:9px;
    font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded)}
  .map-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;
    margin-right:5px;vertical-align:-1px}
  .map-missing{margin-top:9px;font-size:12px;color:var(--faded);line-height:1.5;
    border-left:2px solid var(--hairline);padding-left:10px}
  .mk.dim{opacity:.16}
  .mk.on circle.d,.mk:hover circle.d{r:9}
  .mk.on circle.ring{stroke:var(--flag);stroke-width:2;fill:none}
  .map-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:10px 0 0}
  .map-tools .gchip{font-size:11px}
  .map-count{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);margin-left:auto}
  .mapinfo{position:absolute;left:12px;bottom:12px;width:min(320px,calc(100% - 24px));background:#fff;
    border:1px solid var(--hairline);border-radius:5px;padding:11px 13px;box-shadow:0 10px 26px -14px rgba(26,43,60,.5);display:none}
  .mapinfo.on{display:block}
  .mapinfo h4{font-family:'Fraunces',serif;font-size:16px;margin-bottom:3px;line-height:1.2}
  .mapinfo .w{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--ochre);letter-spacing:.06em;text-transform:uppercase}
  .mapinfo.fr .w{color:var(--pine)}
  .mapinfo .p{font-size:12.5px;color:#3a4756;margin:5px 0 7px;line-height:1.45}
  .mapinfo a{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--pine)}
  .mapinfo .x{position:absolute;top:6px;right:9px;border:0;background:none;font-size:16px;color:var(--faded);cursor:pointer;line-height:1}
  .mapzoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:5px}
  .mapzoom button{width:31px;height:31px;border:1px solid var(--hairline);background:rgba(255,255,255,.94);
    border-radius:4px;font-size:16px;cursor:pointer;color:var(--ink);line-height:1}
  .mapzoom button:hover{border-color:var(--ochre)}
  @media(max-width:640px){.mapinfo{left:8px;right:8px;bottom:8px;width:auto}}

  /* ---------- gallery section ---------- */
  .gsec{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  .gintro{max-width:64ch;color:var(--ink-2);margin:8px 0 16px}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .gbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 14px;
    position:sticky;top:0;z-index:5;padding:10px 0;background:var(--paper)}
  .gsearch input{font:400 13px/1 'Archivo',sans-serif;padding:9px 13px;border-radius:999px;
    border:1px solid var(--hairline);background:transparent;color:var(--ink);
    min-width:min(320px,70vw)}
  .gsearch input:focus{outline:2px solid var(--accent,#B4543A);outline-offset:1px}
  .gcats{display:flex;gap:6px;flex-wrap:wrap}
  .gcats button{font:500 12px/1 'Archivo',sans-serif;padding:7px 12px;border-radius:999px;
    border:1px solid var(--hairline);background:transparent;color:var(--ink-2);cursor:pointer}
  .gcats button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .gsort{display:flex;gap:6px;flex-wrap:wrap}
  .gsort button{font:500 11px/1 'Spline Sans Mono',monospace;padding:7px 11px;
    border-radius:999px;border:1px dashed var(--hairline);background:transparent;
    color:var(--faded);cursor:pointer}
  .gsort button[aria-pressed="true"]{border-style:solid;color:var(--ink);
    border-color:var(--ink)}
  .gcount{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);
    margin-left:auto;white-space:nowrap}
  .gnone{font-size:13px;color:var(--faded);padding:26px 0}
  .ggrid{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
  @media(max-width:640px){ .ggrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:3px} }
  .gi{position:relative;padding:0;border:0;background:var(--hairline);cursor:zoom-in;
    border-radius:3px;overflow:hidden;aspect-ratio:1}
  .gi img{width:100%;height:100%;object-fit:cover;display:block;
    opacity:0;transition:opacity .18s ease}
  .gi img.on{opacity:1}
  .gi:focus-visible{outline:2px solid var(--accent,#B4543A);outline-offset:2px}
  .xn,.pl{position:absolute;background:rgba(12,20,28,.78);color:#fff;
    font-family:'Spline Sans Mono',monospace;font-size:10px;border-radius:10px;
    padding:2px 6px;pointer-events:none}
  .xn{right:5px;top:5px}
  .pl{left:5px;bottom:5px}
  .gmore{display:block;margin:20px auto 0;font:500 12px/1 'Archivo',sans-serif;
    padding:10px 20px;border-radius:999px;border:1px solid var(--hairline);
    background:transparent;color:var(--ink-2);cursor:pointer}
  /* the lightbox. NB: not a "----------" banner on purpose — the teardown that
     removes this stylesheet cuts at the next banner, and a banner inside the
     block being removed makes it delete half of itself and re-add the whole. */
  .glb{position:fixed;inset:0;z-index:60;background:rgba(8,12,16,.94);
    display:flex;align-items:center;justify-content:center;padding:20px}
  .glb[hidden]{display:none}
  .glb-in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;
    max-width:1180px;width:100%;max-height:90vh}
  .glb-img{background:#0d151c;display:flex;align-items:center;justify-content:center;
    border-radius:4px;overflow:hidden;min-height:0}
  .glb-img img,.glb-img video{max-width:100%;max-height:86vh;display:block;object-fit:contain}
  .glb-meta{color:#e8eef2;overflow:auto;font-size:13px;line-height:1.5}
  .glb-cat{font-family:'Spline Sans Mono',monospace;font-size:11px;
    text-transform:uppercase;letter-spacing:.08em;color:#8fa6b4;margin:0 0 6px}
  .glb-cap{margin:0 0 14px}
  .glb-meta h5{font:600 11px/1 'Archivo',sans-serif;text-transform:uppercase;
    letter-spacing:.08em;color:#8fa6b4;margin:0 0 8px}
  .glb-src{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
  .glb-src li{border-top:1px solid rgba(255,255,255,.12);padding-top:8px;font-size:12px}
  .glb-src a{color:#9fd0e8}
  .glb-x,.glb-nav{position:absolute;background:rgba(255,255,255,.1);color:#fff;
    border:0;cursor:pointer;border-radius:999px}
  .glb-x{top:14px;right:16px;width:38px;height:38px;font-size:16px}
  .glb-nav{top:50%;transform:translateY(-50%);width:40px;height:58px;font-size:26px}
  .glb-p{left:12px} .glb-n{right:12px}
  @media(max-width:820px){
    .glb-in{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;max-height:94vh}
    .glb-meta{max-height:30vh}
    .glb-img img,.glb-img video{max-height:56vh}
  }

  /* ---------- thumbnail lightbox ---------- */
  .tlb{position:fixed;inset:0;background:rgba(26,43,60,.94);z-index:120;display:none;
    align-items:center;justify-content:center;padding:22px}
  .tlb.on{display:flex}
  .tlb-in{background:var(--paper);border-radius:6px;max-width:min(1060px,96vw);
    max-height:92vh;display:grid;grid-template-columns:1fr;overflow:auto;position:relative}
  @media(min-width:820px){.tlb-in{grid-template-columns:1.45fr 1fr}}
  .tlb-img{background:#182733;display:flex;align-items:center;justify-content:center;min-height:220px}
  .tlb-img img{max-width:100%;max-height:78vh;display:block}
  .tlb-meta{padding:20px 22px;overflow:auto}
  .tlb-cat{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:#fff;background:var(--pine);padding:2px 7px;border-radius:2px}
  .tlb-cap{font-size:14.5px;color:var(--ink);line-height:1.55;margin:12px 0 14px}
  .tlb-cap.none{color:var(--faded);font-style:italic}
  .tlb-facts{list-style:none;border-top:1px solid var(--hairline);margin-bottom:14px}
  .tlb-facts li{display:flex;gap:10px;padding:6px 0;border-bottom:1px dotted var(--hairline);
    font-family:'Spline Sans Mono',monospace;font-size:11.5px;color:var(--faded)}
  .tlb-facts b{color:var(--ink);font-weight:500;min-width:88px;display:inline-block}
  .tlb-also h5{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--flag);margin:4px 0 7px}
  .tlb-also li{list-style:none;font-family:'Spline Sans Mono',monospace;font-size:11px;
    color:var(--faded);padding:4px 0;border-bottom:1px dotted var(--hairline);line-height:1.5}
  .tlb-also a{color:var(--pine)}
  .tlb-go{display:inline-block;margin-top:16px;font-family:'Spline Sans Mono',monospace;
    font-size:12px;padding:9px 16px;border:1px solid var(--ochre);border-radius:20px;
    color:var(--ochre);text-decoration:none}
  .tlb-go:hover{background:var(--ochre);color:#fff}
  .tlb-x{position:absolute;top:8px;right:12px;background:none;border:0;color:var(--ink);
    font-size:30px;line-height:1;cursor:pointer;z-index:2}
  .tlb-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.92);
    border:0;width:42px;height:58px;font-size:24px;cursor:pointer;color:var(--ink)}
  .tlb-nav.p{left:10px;border-radius:0 4px 4px 0} .tlb-nav.n{right:10px;border-radius:4px 0 0 4px}
  .tk{cursor:zoom-in}
  @media(max-width:560px){.tlb{padding:0}.tlb-in{max-height:100vh;border-radius:0}
    .tlb-nav{width:34px;height:48px}}
  /* ---------- end thumbnail lightbox ---------- */

  /* ---------- places ---------- */
  .psec{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:16px}
  .pcard{border:1px solid var(--hairline);border-radius:6px;background:#fff;overflow:hidden;
    display:flex;flex-direction:column}
  .pcard-pics{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2px;background:#F3EEE4}
  .pcard-pics a{display:block;line-height:0;position:relative}
  .pcard-pics img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2}
  .pcard-pics a:first-child{grid-row:span 2}
  .pcard-pics a:first-child img{aspect-ratio:1/1}
  .pcard-b{padding:12px 14px 13px}
  .pcard h4{font-family:'Fraunces',serif;font-size:18px;line-height:1.15;margin-bottom:4px}
  .ptier{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.09em;
    text-transform:uppercase;padding:1px 6px;border-radius:2px;color:#fff;margin-left:6px}
  .ptier.A{background:var(--pine)} .ptier.B{background:var(--ochre)}
  .ptier.C{background:rgba(26,43,60,.55)}
  .pmeta{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded);
    margin-bottom:8px}
  .plinks{list-style:none}
  .plinks li{padding:3px 0;border-bottom:1px dotted var(--hairline)}
  .plinks a{font-size:12.5px;color:var(--ink);text-decoration:none;line-height:1.3}
  .plinks a:hover{color:var(--ochre);text-decoration:underline}
  .plinks .pw{font-family:'Spline Sans Mono',monospace;font-size:9px;color:var(--faded)}
  .pdir{margin-top:22px;border-top:1px solid var(--hairline)}
  .pdir h3{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--pine);margin:14px 0 8px}
  .pdir-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
  .pdir-g div{font-size:13px;padding:3px 0;border-bottom:1px dotted var(--hairline);
    display:flex;justify-content:space-between;gap:8px}
  .pdir-g span{font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--faded);
    white-space:nowrap}
  /* ---------- EVENT GALLERY ---------- */
  .gal-section{padding:34px 0 26px;border-bottom:1px solid var(--hairline)}
  /* below the section bar, not behind it: .bnav sits at z-index 60 and was
     covering the top of this one wherever the two met. */
  .gal-controls{position:sticky;top:var(--navh);z-index:20;background:var(--paper);padding:12px 0 11px;border-bottom:1px solid var(--hairline);margin-bottom:18px}
  .gal-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
  .gal-row:last-child{margin-bottom:0}
  .gal-lab{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faded);margin-right:2px}
  .gchip .chn{font-weight:400;color:var(--faded);margin-left:2px}
  .gchip[aria-pressed="true"] .chn{color:inherit;opacity:.75}
  .gchip{font-family:'Spline Sans Mono',monospace;font-size:11.5px;padding:5px 11px;border:1px solid var(--hairline);border-radius:20px;background:#fff;color:#5b6875;cursor:pointer;white-space:nowrap;transition:all .13s}
  .gchip:hover{border-color:var(--ochre);color:var(--ink)}
  .gchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .gchip.es[aria-pressed="true"]{background:var(--ochre);border-color:var(--ochre)}
  .gchip.fr[aria-pressed="true"]{background:var(--pine);border-color:var(--pine)}
  #gq{font-family:'Archivo',sans-serif;font-size:13px;padding:6px 12px;border:1px solid var(--hairline);border-radius:20px;background:#fff;color:var(--ink);min-width:190px;flex:1;max-width:290px}
  #gq:focus{outline:none;border-color:var(--ochre)}
  #gmonth{font-family:'Spline Sans Mono',monospace;font-size:11.5px;padding:5px 9px;border:1px solid var(--hairline);border-radius:20px;background:#fff;color:#5b6875;cursor:pointer}
  .gal-count{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);letter-spacing:.06em;margin-left:auto;white-space:nowrap}
  .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:17px}
  .ecard{border:1px solid var(--hairline);border-radius:6px;background:#fff;overflow:hidden;display:flex;flex-direction:column;position:relative}
  .ecard.past{opacity:.66}
  .ecard-top{position:relative;background:#F3EEE4;aspect-ratio:16/10;overflow:hidden}
  .ecard-top img{width:100%;height:100%;object-fit:cover;display:block}
  .ecard-top.noimg{display:flex;align-items:center;justify-content:center}
  .ecard-top.noimg .mono{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:#B9AE99;letter-spacing:.14em;text-align:center;padding:0 14px;text-transform:uppercase}
  .rank{position:absolute;top:9px;left:9px;background:rgba(26,43,60,.92);color:var(--paper);font-family:'Spline Sans Mono',monospace;font-size:10.5px;padding:3px 7px;border-radius:3px;letter-spacing:.06em}
  .score{position:absolute;top:9px;right:9px;width:37px;height:37px;border-radius:50%;background:rgba(255,255,255,.95);border:2px solid var(--ochre);display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;font-weight:500;font-size:14px;color:var(--ink)}
  .score.hi{border-color:var(--flag)}
  .ecard-body{padding:12px 14px 13px;display:flex;flex-direction:column;flex:1}
  .ecard .when{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ochre-ink);margin-bottom:5px}
  .ecard.fr .when{color:var(--pine)}
  .ecard h4{font-family:'Fraunces',serif;font-weight:600;font-size:16.5px;line-height:1.24;margin-bottom:5px}
  .ecard h4 a{text-decoration:none}
  .ecard h4 a:hover{color:var(--ochre)}
  .ecard .where{font-size:12.5px;color:var(--faded);margin-bottom:9px;line-height:1.4}
  .ecard .sum{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin-bottom:9px}
  .ecard .story{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:9px;display:none;border-left:2px solid var(--hairline);padding-left:11px}
  .ecard.open .story{display:block}
  .ecard .more{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.09em;color:var(--ochre-ink);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-transform:uppercase}
  .ecard .more:hover{text-decoration:underline}
  .metrics{margin-top:auto;padding-top:10px;border-top:1px solid var(--hairline);display:grid;gap:3px}
  .met{display:grid;grid-template-columns:52px 1fr 17px;align-items:center;gap:6px;font-family:'Spline Sans Mono',monospace;font-size:9.5px;color:var(--faded);letter-spacing:.04em}
  .bar{height:4px;background:#EFE9DD;border-radius:2px;overflow:hidden}
  .bar i{display:block;height:100%;background:var(--ochre);border-radius:2px}
  .ecard.fr .bar i{background:var(--pine)}
  .met b{font-weight:500;color:#7d8792;text-align:right}
  .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
  .tg{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:#F3EEE4;color:#8a7c62}
  .tg.soon{background:rgba(179,64,46,.12);color:var(--flag)}
  .tg.done{background:#EDEFF1;color:#93a0ab}
  /* cover + score + social thumb gallery, on every card */
  /* location note — a pinned scrap in the corner, not a panel */
  .locnote{float:right;width:150px;margin:2px 0 12px 18px;position:relative;transform:rotate(-1.4deg);
    background:#fff;border:1px solid var(--hairline);border-radius:2px;padding:6px 6px 0;
    box-shadow:0 1px 0 rgba(26,43,60,.06),0 6px 14px -8px rgba(26,43,60,.35);transition:width .22s ease,transform .22s ease}
  .locnote::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(2deg);
    width:52px;height:16px;background:rgba(199,126,40,.28);border:1px solid rgba(199,126,40,.35)}
  .locnote.big{width:min(430px,86vw);transform:rotate(0)}
  .locnote button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0}
  .locnote.big button{cursor:zoom-out}
  .locnote img{width:100%;height:auto;display:block;border:1px solid var(--hairline)}
  .locnote figcaption,.locnote .cap{font-family:'Spline Sans Mono',monospace;font-size:9px;line-height:1.5;
    color:var(--faded);padding:5px 2px 6px;letter-spacing:.02em}
  .locnote .cap b{display:block;color:var(--ink);font-size:9.5px;font-weight:500;letter-spacing:.04em}
  .locnote.big .cap{font-size:10.5px}
  .locnote .cap a{color:var(--pine);text-decoration:none;border-bottom:1px solid rgba(46,94,78,.35)}
  .locnote .cap a:hover{color:var(--flag);border-color:var(--flag)}
  @media(max-width:560px){.locnote{float:none;width:100%;margin:14px 0;transform:none}.locnote::before{display:none}}
  figure.cover{margin:20px 0 4px;border:1px solid var(--hairline);border-radius:5px;overflow:hidden;background:#fff}
  figure.cover img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover}
  figure.cover figcaption{font-family:'Spline Sans Mono',monospace;font-size:11px;line-height:1.55;color:var(--faded);padding:8px 13px;border-top:1px solid var(--hairline)}
  figure.cover figcaption b{color:var(--pine)}
  /* Why a number is what it is. The researched cards earn their score from many
     sources; these sixteen earn it from the organiser's own page, and saying so
     under the bar is the difference between a judgement and an assertion. */
  .score-why{font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:8px 0 0;
    max-width:var(--measure);border-left:2px solid var(--hairline);padding-left:11px}
  /* a 1-10 bar drawn across 900px is a lot of ink for one digit */
  .scorebar{max-width:var(--measure);display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:18px 0 0;padding:13px 15px;border:1px solid var(--hairline);border-radius:5px;background:#fff}
  .sc-ring{width:52px;height:52px;flex:none;border-radius:50%;border:2.5px solid var(--ochre);display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;font-size:17px;color:var(--ink)}
  .sc-ring.hi{border-color:var(--flag)}
  .scorebar .metrics{flex:1;min-width:210px;margin:0;padding:0;border:0;display:grid;gap:3px}
  .shots{margin-top:14px}
  .shots-t{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ochre-ink);background:none;border:0;padding:0;cursor:pointer}
  .shots-t:hover{text-decoration:underline}
  .shots-t .ar{display:inline-block;transition:transform .16s}
  .shots-t[aria-expanded="false"] .ar{transform:rotate(180deg)}
  .shots-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px;margin-top:10px}
  .shots.closed .shots-g{display:none}
  .blogs.closed .blog-list,.blogs.closed .blogs-n{display:none}
  .blogs-t .ar{display:inline-block;transition:transform .16s}
  .blogs-t[aria-expanded="false"] .ar{transform:rotate(180deg)}
  .tk{position:relative;display:block;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;background:#F3EEE4;text-decoration:none}
  .tk img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
  .tk:hover{border-color:var(--ochre)}
  .tk-m{display:block;font-family:'Spline Sans Mono',monospace;font-size:9px;color:var(--faded);padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shots-n{font-size:12.5px;color:var(--faded);line-height:1.5;margin:6px 0 2px;max-width:70ch}
  .shots.place .shots-t{color:var(--pine)}
  .shots.place .tk:hover{border-color:var(--pine)}
  .tk-v{position:absolute;top:5px;right:5px;background:rgba(26,43,60,.85);color:#fff;font-size:9px;padding:1px 5px;border-radius:3px}
  /* Two sticky bars sit above the deck — the section bar and the filter bar —
     so a card jumped to must clear both or it opens with its own headline
     hidden. --stick is what the filter bar measures itself at. */
  #cards>.profile{scroll-margin-top:calc(var(--navh) + var(--stick, 60px) + 10px)}
  .gal-none{text-align:center;padding:44px 20px;font-family:'Spline Sans Mono',monospace;font-size:12.5px;color:var(--faded)}
  .gal-key{font-family:'Spline Sans Mono',monospace;font-size:10.5px;color:var(--faded);line-height:1.75;margin-top:16px;padding-top:13px;border-top:1px solid var(--hairline)}
  .gal-key b{color:var(--pine)}
  @media(max-width:560px){.gal-grid{grid-template-columns:1fr}.gal-count{margin-left:0;width:100%}}
  figure.fig{margin:20px 0 6px;border:1px solid var(--hairline);background:#fff;border-radius:5px;overflow:hidden}
  figure.fig img{display:block;width:100%;height:auto}
  figure.fig figcaption{font-family:'Spline Sans Mono',monospace;font-size:11.5px;line-height:1.5;color:var(--faded);padding:9px 13px;border-top:1px solid var(--hairline)}
  figure.fig figcaption b{color:var(--pine)}
  blockquote.xq{margin:16px 0;padding:14px 18px;border-left:3px solid var(--flag);background:rgba(179,64,46,.045)}
  blockquote.xq p{font-family:'Fraunces',serif;font-size:17px;line-height:1.45;margin-bottom:7px}
  blockquote.xq .src{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded);letter-spacing:.03em}
  .intel div{background:var(--paper);padding:11px 13px}
  .intel .k{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);margin-bottom:3px}
  .intel .v{font-size:13.5px}
  .pulse{border:1px solid var(--hairline);border-left:4px solid var(--ink);background:#fff;padding:13px 16px;margin-top:10px;max-width:760px}
  .pulse .pk{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--flag);margin-bottom:6px}
  .pulse ul{list-style:none}
  .pulse li{padding:6px 0;border-bottom:1px dotted var(--hairline);font-size:14px}
  .pulse li:last-child{border-bottom:none}
  .pulse .m{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--faded)}
  .pulse a{font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ochre)}
  .compact{padding:26px 0;border-bottom:1px solid var(--hairline)}
  .compact h3{font-family:'Fraunces',serif;font-weight:900;font-size:22px;margin-bottom:4px}
  .compact .meta{margin-bottom:8px}
  .compact p{font-size:14.5px;max-width:70ch;color:var(--ink-2);margin-bottom:8px}
  .crow{font-size:13.5px;padding:5px 0;border-top:1px dotted var(--hairline);max-width:76ch}
  .crow .lbl{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);display:inline-block;min-width:80px}
  .crow a{font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--pine)}
  .t2grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:18px}
  .t2c{border:1px solid var(--hairline);border-left:4px solid var(--pine);padding:14px 16px;background:#fff}
  .t2c.es{border-left-color:var(--ochre)}
  .t2c .date{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--ochre-ink);letter-spacing:.05em}
  .t2c h4{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin:3px 0 5px}
  .t2c p{font-size:13.5px;color:#42505e;margin-bottom:7px}
  .t2c .r{font-size:12.5px;padding:4px 0;border-top:1px dotted var(--hairline)}
  .t2c .r .lbl{font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);display:inline-block;min-width:64px}
  .t2c a{font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor}
  .dir{padding:44px 0 24px}
  .dir table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px}
  .dir th{font-family:'Spline Sans Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);text-align:left;padding:8px 10px;border-bottom:2px solid var(--ink)}
  .dir td{padding:8px 10px;border-bottom:1px dotted var(--hairline);vertical-align:top}
  .dir td a{text-decoration:none;border-bottom:1.5px solid var(--ochre);font-weight:700}
  /* Eleven paragraphs of 13.5px grey with no space between them and no rule
     anywhere: the last thing a reader sees was the one part of the issue that
     looked unedited. Each note is now a labelled entry — the bold lead-in
     becomes the label, in the same mono the rest of the issue uses for
     apparatus — and they set in two columns, because the width is there. */
  .colophon{padding:var(--s7) 0 var(--s8);border-top:3px solid var(--ink);
    margin-top:var(--s6);font-size:13.5px;color:var(--ink-2);max-width:none}
  .colophon p{max-width:64ch;margin:0 0 var(--s5);break-inside:avoid}
  .colophon b:first-child{display:block;font-family:'Spline Sans Mono',monospace;
    font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--ochre-ink);margin-bottom:3px;font-weight:400}
  .colophon b{color:var(--ink)}
  .colophon a{color:var(--pine)}
  @media(min-width:920px){.colophon{columns:2;column-gap:var(--s7)}}
  .colophon-h{font-family:'Fraunces',serif;font-weight:900;font-size:22px;
    color:var(--ink);margin:0 0 var(--s5);column-span:all}


  /* no sideways drift on small screens; clip (not hidden) keeps position:sticky working */
  html{overflow-x:clip}
  body{overflow-x:clip;max-width:100vw}
  .gal-controls,.gal-row{max-width:100%}
  @media(max-width:640px){.gal-count{margin-left:0}}
  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .wrap{padding:0 16px}
    .scorebar{gap:12px;padding:11px 12px}
    figure.cover img,figure.fig img{max-height:340px}
  }
  @media(max-width:640px){
    body{font-size:15.5px}
    .masthead{padding:30px 0 18px}
    .issue-line{font-size:11px;gap:5px}
    .story .cols{grid-template-columns:1fr;gap:16px}
    .dstrip{gap:12px}
    .bignum{font-size:44px}
    h2.sect{font-size:23px}
    .profile h2{font-size:24px}
    .meta{flex-direction:column;gap:4px;align-items:flex-start}
    .intel{grid-template-columns:1fr}
    .shots-g{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px}
    .scorebar{flex-direction:row;align-items:center}
    .sc-ring{width:44px;height:44px;font-size:15px}
    .metrics{min-width:150px}
    .ncard{padding:16px 15px 15px}
    .ncard h3{font-size:17.5px}
    .ncard .q{font-size:14.5px}
    .gal-controls{padding:10px 0 9px}
    .gal-row{gap:6px}
    .gchip{font-size:11px;padding:5px 9px}
    #gq{min-width:140px}
    .tl-viewport{touch-action:pan-x pan-y}
    figure.cover img,figure.fig img{max-height:260px}
  }
  @media(max-width:420px){
    .gal-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:3px}
    .gal-row::-webkit-scrollbar{display:none}
    .gal-count{position:static}
  }
  /* restore banner */
  #restored{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
    background:var(--ink);color:var(--paper);font-family:'Spline Sans Mono',monospace;font-size:11.5px;
    padding:9px 15px;border-radius:22px;box-shadow:0 8px 24px -10px rgba(26,43,60,.6);display:none;align-items:center;gap:11px}
  #restored button{background:none;border:0;color:var(--ochre);font:inherit;cursor:pointer;padding:0}
  #restored button:hover{text-decoration:underline}

  /* ===== phones =========================================================
     The page has to behave like an app here, not like a desktop page that
     happens to fit: one thumb, one hand, no zooming to hit a control, and
     no region that swallows a scroll gesture.
  */
  @media(max-width:720px){
    /* A row of filters that wraps to five lines is 300px of chrome above the
       thing being filtered. One line that scrolls sideways, like the section
       bar, and the map is on screen when you arrive at it. */
    .map-tools,.ochips,.ccats,.gcats,.gal-row,.map-legend{
      display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
      overscroll-behavior-x:contain;padding-bottom:2px;
      scroll-snap-type:x proximity}
    .map-tools::-webkit-scrollbar,.ochips::-webkit-scrollbar,.ccats::-webkit-scrollbar,
    .gcats::-webkit-scrollbar,.gal-row::-webkit-scrollbar,
    .map-legend::-webkit-scrollbar{display:none}
    .map-tools>*,.ochips>*,.ccats>*,.gcats>*,.gal-row>*,.map-legend>*{
      flex:0 0 auto;scroll-snap-align:start}
    /* the search field takes the row, the categories scroll under it */
    .gbar{flex-direction:column;align-items:stretch;gap:8px}
    .gsearch{width:100%}
    .gcats button{min-height:40px;padding:10px 14px;font-size:12px}

    /* 24px-tall pills need a precise finger. These are the page's controls;
       they get a target you can hit while walking. */
    .gchip,.ccats button,.ochip,.gmore,.pmore{min-height:40px;padding:10px 14px;font-size:12px}
    .map-tools .gchip{font-size:12px}
    .mapzoom button{width:44px;height:44px}
    .nd{width:14px;height:14px}
    /* any picker, wherever it sits: under 16px iOS zooms the page on focus */
    /* #gmonth carries an id, so a bare `select` here never reaches it however
       late it is declared. Named, or iOS keeps zooming on the month picker. */
    select,#gmonth{min-height:42px;font-size:16px;padding:0 10px}
    /* the timeline is a dense strip, but a 20px pill is still a target */
    .pill{height:26px;line-height:24px;font-size:11px}
    #ndots .nd{width:16px;height:16px}
    #ndots{gap:4px}
    .news-nav button{min-height:40px;padding:8px 14px}
    .shots-t,.blogs-t{min-height:40px}

    /* iOS zooms the whole page when a field under 16px takes focus, and then
       leaves you zoomed in on a magazine you now have to pan sideways. */
    #gq,#pq,input[type="search"],input[type="text"],select,textarea{font-size:16px}
    #gq,#pq{min-height:42px;padding:9px 14px}

    /* touch-action:none meant a thumb that landed on the map — 700px of the
       screen — could not scroll the page at all. Vertical goes to the page,
       everything else still goes to the map. */
    .mapwrap{touch-action:pan-y pinch-zoom}

    /* the notch and the home indicator */
    .wrap{padding-left:max(16px,env(safe-area-inset-left));
          padding-right:max(16px,env(safe-area-inset-right))}
    .colophon{padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom))}
    #restored{bottom:calc(18px + env(safe-area-inset-bottom))}

    /* a 230,000px page: let the browser skip the work of laying out what is
       nowhere near the viewport */
    #places,#organisations,#creators,#gallery-pictures,#legality{
      content-visibility:auto;contain-intrinsic-size:auto 1200px}

    /* the sticky filter bar has to clear the sticky section bar */
  }
  @media(max-width:420px){
    .locnote .cap{font-size:10px}
    .issue-line{flex-direction:column;gap:2px}
  }
  @media print{.gal-controls,#restored,.news-nav{display:none}.shots-g{display:grid !important}}

  .bnav{position:sticky;top:0;z-index:60;background:rgba(251,248,242,.94);
    backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);
    border-bottom:1px solid var(--hairline);padding-top:env(safe-area-inset-top)}
  /* Same box as .wrap, from the same variables: the bar and the first word
     under it share one left edge at every width. */
  /* Never wraps, at any width. A breakpoint here is a guess about how wide
     eleven words are in a font that has not loaded yet — at 720 it was right
     for a phone and wrong for a tablet, which put the bar on two rows again.
     Above the shell it never overflows, so the scroller costs nothing. */
  .bnav-in{max-width:var(--shell);margin:0 auto;padding:11px var(--gutter);display:flex;
    gap:16px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    font-family:'Spline Sans Mono',monospace;font-size:11.5px;
    letter-spacing:.06em;text-transform:uppercase}
  .bnav-in::-webkit-scrollbar{display:none}
  .bnav a{flex:0 0 auto;white-space:nowrap}
  .bnav a{color:var(--faded);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
  .bnav a:hover{color:var(--ink)}
  .bnav a.on{color:var(--ochre-ink);border-bottom-color:var(--ochre)}
  /* On a phone eleven links wrapped to two rows and took 140px — a sixth of the
     screen, permanently, on a page that is mostly scrolling. One row that
     scrolls sideways, with targets big enough to hit, the way a native app does
     its section bar. The fades say there is more to the right. */
  @media(max-width:900px){
    .bnav-in{gap:0;padding:0;scroll-snap-type:x proximity}
    .bnav a{padding:13px 13px;font-size:11px;border-bottom-width:2px;
      scroll-snap-align:center}
    .bnav a:first-child{padding-left:max(var(--gutter),env(safe-area-inset-left))}
    .bnav a:last-child{padding-right:max(var(--gutter),env(safe-area-inset-right))}
    /* sticky already makes this a containing block — declaring position:relative
       here would un-stick the bar, which is the whole point of it */
    .bnav::after{content:"";position:absolute;right:0;top:0;bottom:0;width:34px;
      pointer-events:none;background:linear-gradient(90deg,rgba(251,248,242,0),var(--paper))}
  }