/* ============================================================
   THE 8 HOUSES DAILY — stylesheet
   ------------------------------------------------------------
   Mobile-first. Base rules target a 360px phone; wider layouts are
   additive via min-width queries. 360 is the floor, not an
   afterthought — Galaxy S8 and older Androids are still 360.

   Palette is verified to WCAG 2.2 AA on every surface it is used
   against; worst ratio anywhere is 5.10:1. Three tiers of ink, not
   four: newspapers have ink and less ink, and hierarchy comes from
   size, weight, caps and rules. site/test_build.py re-derives the
   ratios from this file, so a regression fails the build.
   ============================================================ */

:root{
  /* paper stock */
  --paper:#f2ede1;        /* the sheet */
  --paper-2:#e8e1d1;      /* boxed ads, plates */
  --tint:#ded5c2;         /* section fills */
  --red-tint:#f0d9d5;     /* stop-press boxes */

  /* ink */
  --ink:#17130f;          /* body, headlines            15.8:1 */
  --ink-2:#453c33;        /* decks, secondary            9.2:1 */
  --ink-3:#5a5044;        /* labels, captions            6.7:1 */
  --red:#9e2b23;          /* spot colour, stamps, links  6.4:1 */
  --rule:#b8ae98;         /* hairlines only, never text */

  /* Chosen for legibility first, period character second.
     display  Fraunces — variable old-style with an engraved feel. Moderate
              contrast at heavy weights, so it holds at 21px where a didone's
              hairlines disappear. Replaces Bodoni Moda.
     body     Literata — built for long-form reading on screen. Generous
              x-height and sturdy strokes, so 18px reads as 18px. EB Garamond
              at the same size read like 14.
     label    Archivo — grotesque engineered for small sizes, open counters.
              Oswald's condensed caps at 9px were the least readable thing here.
     Blackletter is gone. It was the least load-bearing part of the newspaper
     reference and by far the most expensive for legibility, and a masthead is
     the most-read type on the site. Roman mastheads are entirely orthodox —
     the FT, the Economist and Le Monde all use one. */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Literata',Georgia,'Times New Roman',serif;
  --label:'Archivo','Helvetica Neue',Arial,sans-serif;
  --masthead:'Fraunces',Georgia,serif;

  --gut:16px;             /* page gutter, grows with viewport */
  --tap:44px;             /* minimum touch target */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;                /* Literata holds its size; 18 reads as 18 */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;             /* rotated stamps must never scroll the page */
}

/* newsprint tooth. No network request, no image file. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  text-align:left}
img,svg{max-width:100%}
a{color:var(--red);text-decoration:none;
  border-bottom:1px solid rgba(158,43,35,.34)}
a:hover{border-bottom-color:var(--red)}
h1,h2,h3{font-weight:inherit}
[hidden]{display:none!important}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:var(--paper);padding:12px 18px;
  font-family:var(--label);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;border:0;
}
.skip:focus{left:0}

/* ─────────────── rules & ornament ─────────────── */
.r-thin{border-top:1px solid var(--ink)}
.r-hair{border-top:1px solid var(--rule)}
.doublerule{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);
  height:5px}
.fleuron{text-align:center;color:var(--rule);font-size:15px;letter-spacing:.5em;
  padding:14px 0}

/* ─────────────── masthead ─────────────── */
.masthead{padding-top:12px}
.earpiece{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--label);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:6px 0 7px;
}
.earpiece span{white-space:nowrap}
.earpiece .mid{display:none}          /* no room at 360 */

.title{
  display:block;text-align:center;padding:10px 0 6px;
  font-family:var(--masthead);font-weight:900;
  font-size:clamp(32px,9.6vw,76px);
  line-height:.96;letter-spacing:-.02em;text-transform:uppercase;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  border-bottom:0;color:var(--ink);
  text-wrap:balance;
}
.title:hover{border-bottom:0}
.title .the{
  display:block;font-family:var(--label);font-weight:500;
  font-size:clamp(11.5px,2.4vw,15px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:5px;
}
.dateline{
  display:flex;align-items:center;justify-content:center;
  gap:6px 9px;flex-wrap:wrap;
  font-family:var(--label);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);padding:8px 0;
  text-align:center;
}
.dateline i{font-style:normal;color:var(--rule)}
.dateline b{font-weight:600;color:var(--red)}
.dateline .drop{display:none}

/* ─────────────── publisher's notice / decay banner ─────────────── */
.notice{
  border:1px solid var(--ink);background:var(--red-tint);
  padding:11px 13px;margin:14px 0;font-size:16px;line-height:1.55;
}
.notice b{
  display:block;font-family:var(--label);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);
  margin-bottom:4px;
}
.notice.grey{background:var(--tint)}
.notice.grey b{color:var(--ink-2)}

/* ─────────────── lead ─────────────── */
.lead{padding:18px 0 6px;text-align:center}
.kicker{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px;
}
.lead h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(30px,8.6vw,74px);line-height:.94;letter-spacing:-.022em;
  text-transform:uppercase;text-wrap:balance;
}
.dek{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:clamp(15.5px,4vw,21px);line-height:1.34;color:var(--ink-2);
  max-width:30em;margin:12px auto 0;text-wrap:pretty;
}
.byline{
  font-family:var(--label);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:12px;line-height:1.9;
}

/* ─────────────── the three ways ─────────────── */
/* These are the only things on the front page a reader can act on, so they sit
   directly under the masthead and each ends in an unmistakable button. A
   newspaper would not box its lead stories, so the hairline column rules stay
   and the button carries the affordance. */
.cols{display:grid;grid-template-columns:1fr;margin-top:6px}
.cols-lead{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.doorcta{
  display:block;margin-top:auto;text-align:center;
  border:1px solid var(--ink);border-top:3px solid var(--ink);
  background:var(--red-tint);color:var(--red);
  padding:13px 10px;min-height:var(--tap);
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;
}
.doorcta:hover,.col:hover .doorcta{
  background:var(--red);color:var(--paper);border-color:var(--red);
}
.col{padding-bottom:0}
.col p{margin-bottom:16px}

.col{
  padding:18px 0;border-top:1px solid var(--rule);position:relative;
  display:flex;flex-direction:column;
}
.col:first-child{border-top:0}
.col-head{
  display:flex;justify-content:space-between;gap:8px;
  font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:7px;margin-bottom:11px;border-bottom:1px solid var(--ink);
}
.col-head em{font-style:normal;color:var(--red)}
.col h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(22px,6vw,28px);line-height:1.03;letter-spacing:-.016em;
  text-transform:uppercase;margin-bottom:9px;
}
.col h2 a{color:inherit;border-bottom:0}
.col h2 a:hover{border-bottom:2px solid var(--red)}
.col p{font-size:17px;line-height:1.58;color:var(--ink-2)}
.col .more{
  display:inline-block;margin-top:11px;align-self:flex-start;
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
  border-bottom:1.5px solid var(--red);padding:4px 0;
  min-height:0;
}

/* ─────────────── engraved plates ─────────────── */
.plate{border:1px solid var(--ink);padding:6px;background:var(--paper-2);
  margin:0 0 12px}
.plate svg{display:block;width:100%;height:auto}
.plate figcaption{
  font-family:var(--label);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);text-align:center;
  padding-top:5px;margin-top:5px;border-top:1px solid var(--rule);
}
.eng{stroke:var(--ink);fill:none;stroke-width:1.05;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.eng-fill{fill:var(--ink);stroke:none}
.hatch{stroke:var(--ink);stroke-width:.55;opacity:.5}
.steam{stroke:var(--ink);stroke-width:.9;fill:none;opacity:0}
.flame{transform-origin:50% 100%}
.coat{transform-origin:50% 8%}
.glow{opacity:.16}

@media (prefers-reduced-motion:no-preference){
  .steam{animation:rise 3.4s ease-in-out infinite}
  .steam:nth-of-type(2){animation-delay:1.15s}
  .steam:nth-of-type(3){animation-delay:2.3s}
  .flame{animation:gutter 2.6s ease-in-out infinite}
  .glow{animation:pulse 2.6s ease-in-out infinite}
  .coat{animation:sway 5.4s ease-in-out infinite}
  .stamp{animation:slam .34s cubic-bezier(.2,1.5,.4,1) backwards}
  .stoppress{animation:flash .5s steps(2) 3}
  .bt.lit{animation:inked .45s ease-out backwards}
}
@keyframes rise{
  0%{opacity:0;transform:translateY(2px) scaleX(.85)}
  22%{opacity:.85}70%{opacity:.35}
  100%{opacity:0;transform:translateY(-13px) scaleX(1.3)}
}
@keyframes gutter{0%,100%{transform:scaleY(1) skewX(0)}
  35%{transform:scaleY(.86) skewX(-5deg)}70%{transform:scaleY(1.07) skewX(3deg)}}
@keyframes pulse{0%,100%{opacity:.14}50%{opacity:.32}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes slam{from{transform:rotate(-7deg) scale(2.4);opacity:0}
  to{transform:rotate(-7deg) scale(1);opacity:.88}}
@keyframes flash{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes inked{from{background:var(--paper);border-color:var(--ink-3)}
  to{background:var(--red-tint);border-color:var(--red)}}

/* ─────────────── section bars ─────────────── */
.section{margin-top:30px}
.section-bar{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:7px 0;margin-bottom:4px;
}
.section-bar h2{
  font-family:var(--label);font-size:clamp(14px,3.6vw,18px);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}
.section-bar .n{
  font-family:var(--label);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ─────────────── form of enquiry (the coupon) ─────────────── */
.coupon{
  border:1px solid var(--ink);background:var(--paper-2);
  padding:15px 15px 13px;margin:14px 0 20px;position:relative;
  box-shadow:2px 2px 0 rgba(23,19,15,.1);
}
.coupon::after{content:"";position:absolute;inset:4px;
  border:1px dashed var(--rule);pointer-events:none}
h2.coupon-head,.coupon-head{
  display:flex;align-items:center;gap:9px;
  font-family:var(--label);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);margin-bottom:10px;
  position:relative;z-index:1;
}
.coupon-head::after{content:"";flex:1;border-top:1px solid var(--rule)}

/* On a phone the coupon is a printed form: labelled rows with a rule to
   write on. Inline prose with dropdowns wraps into nonsense below ~640px. */
.fillin{position:relative;z-index:1}
.slot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 2px;border-bottom:1px dotted var(--ink-3);
  min-height:var(--tap);
}
.slot:last-child{border-bottom:0}
/* Connective words belong to the prose sentence, not the coupon rows. */
.d640{display:none}
.slot > .lbl{
  font-family:var(--body);font-size:16px;color:var(--ink-2);flex-shrink:0;
}
.slot select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--label);font-weight:500;font-size:16px; /* <16 => iOS zooms */
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:0;
  padding:8px 22px 8px 6px;cursor:pointer;
  text-align:right;text-align-last:right;direction:ltr;
  max-width:60%;min-height:var(--tap);
}
.slot.filled{border-bottom-style:solid;border-bottom-color:var(--red)}
.slot.filled select{color:var(--red);background:var(--red-tint)}
.slot .caret{position:absolute;right:4px;font-size:10px;color:var(--ink-3);
  pointer-events:none}
.slot{position:relative}
.slot.filled .caret{color:var(--red)}
.coupon-foot{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--rule);position:relative;z-index:1;
  font-family:var(--label);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.coupon-foot b{font-weight:600;color:var(--ink);font-size:12.5px}
.stoppress{color:var(--red);font-weight:600}
.coupon-foot .rst{margin-left:auto;color:var(--ink-3);
  border-bottom:1px solid var(--rule);font-family:var(--label);font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:6px 0;min-height:0}
.coupon-foot .rst:hover{color:var(--red);border-bottom-color:var(--red)}

/* ─────────────── refinements ─────────────── */
.refine{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 6px}
.refine select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--label);font-size:16px;   /* <16 => iOS zooms on focus */
  letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--rule);
  padding:9px 24px 9px 10px;cursor:pointer;min-height:var(--tap);
}
.refine select.on{border-color:var(--red);color:var(--red);
  background:var(--red-tint)}
.linkline{
  font-family:var(--label);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;
  word-break:break-all;
}
.linkline button{font-family:var(--label);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding:6px 0}

/* ─────────────── classifieds ─────────────── */
.colnote{
  border-left:3px solid var(--red);background:var(--red-tint);
  padding:11px 13px;margin:14px 0 4px;font-size:16px;line-height:1.55;
}
.colnote b{font-weight:600;color:var(--red)}
.ads{margin-top:12px}
.ad{
  border:1px solid var(--ink);border-top:3px solid var(--ink);
  padding:12px 13px 11px;margin-bottom:16px;background:var(--paper);
  position:relative;transition:background .16s;
}
.ad:hover{background:var(--paper-2)}
.ad-org{
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
  font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:6px;margin-bottom:7px;border-bottom:1px solid var(--rule);
}
.ad-org a{color:inherit;border-bottom:0}
.ad-org a:hover{color:var(--red)}
.ad h3{
  /* Sentence case, not caps. These are the most-read headings after the h1, and
     caps cost roughly 15% of reading speed for no gain at 21px. */
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1.14;
  letter-spacing:-.008em;margin-bottom:6px;
}
.ad h3 a{color:inherit;border-bottom:0}
.ad h3 a:hover{border-bottom:2px solid var(--red)}
.ad .what{font-size:17px;line-height:1.55;color:var(--ink-2);margin-bottom:9px}
.ad dl{font-size:16px;line-height:1.62;border-top:1px solid var(--rule);
  padding-top:6px;margin:0}
.ad dt{
  font-family:var(--label);font-size:11px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);display:inline;
}
.ad dt::after{content:"\00a0"}
.ad dd{display:inline;color:var(--ink);margin:0}
.ad dd::after{content:"\A";white-space:pre}
.ad .apply{
  display:block;margin-top:10px;padding:11px 8px;
  border:0;border-top:1px solid var(--ink);
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;text-align:center;color:var(--red);
  min-height:var(--tap);
}
.ad .apply:hover{background:var(--red);color:var(--paper);
  border-top-color:var(--red)}

/* Stamps mark exceptions only. On a phone they sit in the flow so they can
   never cover the particulars; from 700px up they are struck across the ad. */
.stamp{
  display:block;margin:9px 0 0;
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);text-align:center;
  border:2px solid var(--red);border-top-width:1px;border-bottom-width:1px;
  padding:5px 10px;background:rgba(242,237,225,.6);
  text-shadow:.5px .5px 0 rgba(158,43,35,.24);
}
.stamp.grey{color:var(--ink-3);border-color:var(--ink-3);
  text-shadow:.5px .5px 0 rgba(90,80,68,.2)}

/* ─────────────── district map ─────────────── */
/* Real borough outlines. The SVG holds no text at all: font-size inside a scaled
   viewBox resolves in user units, which is how an earlier version rendered its
   labels at 43px. Counts are HTML badges positioned by percentage over the top,
   so they use ordinary responsive type.

   The field is pinned to the data's own aspect ratio. Without that the SVG
   letterboxes inside its box and every percentage-positioned badge drifts off
   its borough. */
.mapwrap{border:1px solid var(--ink);background:var(--paper-2);
  padding:13px 13px 10px;margin-top:14px}
.maphead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding-bottom:8px;margin-bottom:11px;border-bottom:1px solid var(--ink)}
.maphead h2{font-family:var(--label);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
.maphead span{font-family:var(--label);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.maphead button{margin-left:auto;font-family:var(--label);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--red);
  border-bottom:1px solid var(--red);padding:6px 0}

/* the shapes are for wider screens; a phone gets the chips */
.mapfield{display:none}

.boroughs{position:absolute;inset:0;width:100%;height:100%;display:block}
.bo{fill:var(--paper);stroke:var(--ink-3);stroke-width:.9;
  vector-effect:non-scaling-stroke;transition:fill .16s}
.bo.lit{stroke:var(--red)}
.bo.q1{fill:#f0d9d5}
.bo.q2{fill:#d9938c}
.bo.q3{fill:var(--red)}
.bo.lit:hover{fill:#7d1f18}
.bo.on{stroke:var(--ink);stroke-width:2.4}
.thames-w{fill:none;stroke:var(--paper-2);stroke-width:5.5;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.thames-l{fill:none;stroke:var(--ink);stroke-width:1.5;opacity:.55;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}

.leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.leader{stroke:var(--ink);stroke-width:1;opacity:.45;
  vector-effect:non-scaling-stroke;stroke-dasharray:2 2}
.badges{position:absolute;inset:0;pointer-events:none}
.badge{
  position:absolute;transform:translate(-50%,-50%);
  background:var(--paper);border:1px solid var(--ink);
  padding:2px 6px;white-space:nowrap;
  font-family:var(--label);font-size:11.5px;letter-spacing:.02em;
  color:var(--ink);box-shadow:1px 1px 0 rgba(23,19,15,.18);
}
.badge b{font-weight:600;color:var(--red)}
.badge.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge.on b{color:var(--paper)}
.badge.terse{padding:2px 5px}

/* chips: the control, and the whole map on a phone */
.tilemap{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.bt{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--red);background:var(--red-tint);
  padding:9px 12px;min-height:var(--tap);
  font-family:var(--label);font-size:14px;letter-spacing:.01em;
  color:var(--red);text-align:left;cursor:pointer;
}
.bt-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-n{font-weight:600;font-size:13px;line-height:1;background:var(--red);
  color:var(--paper);padding:3px 6px;flex-shrink:0}
.bt:hover{background:var(--red);color:var(--paper)}
.bt:hover .bt-n{background:var(--paper);color:var(--red)}
.bt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.bt.on .bt-n{background:var(--paper);color:var(--ink)}
.bt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nodistrict{font-size:15px;color:var(--ink-2);line-height:1.5}
.maplegend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:11px;
  font-family:var(--label);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.maplegend i{display:inline-block;width:11px;height:11px;margin-right:6px;
  vertical-align:-1px;border:1px solid var(--ink-3)}
.maplegend .sw-lit{background:var(--red);border-color:var(--red)}
.maplegend .sw-river{width:18px;height:0;border:0;border-top:1.5px solid var(--ink);
  opacity:.55}
.maplegend .sw-river-row{display:none}
.mapnote{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:9px;
  padding-top:8px;border-top:1px solid var(--rule)}
.mapattr{font-family:var(--label);font-size:11px;letter-spacing:.03em;
  color:var(--ink-3);margin-top:8px;line-height:1.6}

/* ─────────────── article (role detail) ─────────────── */
.article{padding-top:16px}
.article h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(27px,7.4vw,52px);line-height:.96;letter-spacing:-.022em;
  text-transform:uppercase;text-wrap:balance;
}
.article .standfirst{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(16px,4.2vw,21px);line-height:1.34;color:var(--ink-2);
  margin-top:11px;
}
.article .prose{margin-top:16px;font-size:18px;line-height:1.65}
.article .prose > p + p{margin-top:11px}
.dropcap::first-letter{
  float:left;font-family:var(--display);font-weight:900;
  font-size:3.6em;line-height:.8;padding:4px 9px 0 0;color:var(--red);
  font-variation-settings:"SOFT" 0,"WONK" 1;   /* one letter, so let it be odd */
}
.particulars{
  border:1px solid var(--ink);border-top:3px solid var(--ink);
  background:var(--paper-2);padding:13px 14px;margin:18px 0;
}
.particulars h2{
  font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
  padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid var(--rule);
}
.particulars dl{display:grid;grid-template-columns:1fr;gap:2px 14px;
  font-size:16.5px;line-height:1.58}
.particulars dt{font-family:var(--label);font-size:11px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding-top:7px}
.particulars dd{margin:0 0 5px}
.footnote{
  border-top:1px solid var(--ink);margin-top:22px;padding-top:11px;
  font-size:15.5px;line-height:1.58;color:var(--ink-2);
}
.footnote b{font-family:var(--label);font-size:11.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:5px}

/* An engraving in an article is an inset, not a hero. Full width on a phone
   where there is no room beside it; from 700px it sits in the first column with
   the text running past, as a newspaper cut does. */
.article .plate{margin:16px 0 14px}
@media (min-width:700px){
  .article .plate{float:right;width:44%;margin:6px 0 14px 22px}
  .article .prose{clear:none}
  .article .particulars{clear:both}
}
@media (min-width:900px){
  /* the prose is two columns here, so a float would trap itself in one of them */
  .article .plate{float:none;width:100%;margin:16px 0 14px}
}

.applybig{
  display:block;text-align:center;border:1px solid var(--ink);
  border-top:3px solid var(--ink);background:var(--red-tint);
  padding:14px 12px;margin:18px 0;color:var(--red);
  font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;min-height:var(--tap);
}
.applybig:hover{background:var(--red);color:var(--paper);border-color:var(--red)}
.alsolist{list-style:none;margin-top:10px}
.alsolist li{border-bottom:1px solid var(--rule);padding:10px 0;font-size:17px}
.alsolist li:last-child{border-bottom:0}
.alsolist a{border-bottom:0;font-family:var(--display);font-weight:700;
  font-size:18px}
.alsolist a:hover{border-bottom:2px solid var(--red)}

/* Public notice — /help/. Deliberately plain: heavy rules, big type, no
   ornament, no columns, no drop caps. Someone in trouble needs a phone number,
   not a period voice. The frame stays; the charm does not. */
.pubnotice{border:4px double var(--ink);padding:18px 16px;margin:16px 0}
.pubnotice h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(25px,7vw,42px);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;
}
.pubnotice .plain{font-size:19px;line-height:1.6;margin-top:12px}
.helpitem{border-top:1px solid var(--ink);margin-top:18px;padding-top:14px}
.helpitem h2{
  font-family:var(--display);font-weight:700;font-size:clamp(19px,5vw,24px);
  text-transform:uppercase;letter-spacing:-.012em;margin-bottom:6px;
}
.helpitem p{font-size:18px;line-height:1.6;color:var(--ink-2);margin-bottom:10px}
.helpitem a.big{
  display:inline-block;border:1px solid var(--ink);padding:12px 16px;
  font-family:var(--label);font-size:14px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;min-height:var(--tap);color:var(--red);
}
.helpitem a.big:hover{background:var(--red);color:var(--paper);border-color:var(--red)}

/* ─────────────── directory (five-minute etc) ─────────────── */
.five{display:grid;grid-template-columns:1fr;gap:0;margin-top:12px}
.five a,.five div{
  display:block;border-top:1px solid var(--rule);padding:13px 0;
  text-decoration:none;border-bottom:0;color:inherit;
}
.five a:first-child,.five div:first-child{border-top:0}
.five b{display:block;font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:-.008em;margin-bottom:5px}
.five a:hover b{color:var(--red)}
.five p{font-size:16.5px;line-height:1.55;color:var(--ink-2)}

/* ─────────────── lookup (back of the paper) ─────────────── */
.lookup{margin-top:34px}
.lookup-note{font-size:16px;line-height:1.5;color:var(--ink-2);margin:12px 0 10px}

/* ─────────────── typeahead ─────────────── */
.ta{position:relative;width:100%;max-width:520px}
.ta input{
  width:100%;background:var(--paper);border:1px solid var(--ink);
  padding:11px 12px;font-family:var(--body);font-size:16px;  /* 16 = no iOS zoom */
  color:var(--ink);min-height:var(--tap);
}
.ta input::placeholder{color:var(--ink-3);font-style:italic}
.ta input:focus{outline:2px solid var(--red);outline-offset:-1px}
.ta ul{
  position:absolute;top:calc(100% - 1px);left:0;right:0;z-index:50;
  background:var(--paper);border:1px solid var(--ink);list-style:none;
  max-height:300px;overflow:auto;box-shadow:3px 3px 0 rgba(23,19,15,.14);
}
.ta li{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:11px 12px;font-size:15.5px;cursor:pointer;min-height:var(--tap);
  border-bottom:1px solid var(--rule);
}
.ta li:last-child{border-bottom:0}
.ta li[aria-selected=true],.ta li:hover{background:var(--red-tint)}
.ta li em{font-style:normal;font-family:var(--label);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  flex-shrink:0}

/* ─────────────── empty state ─────────────── */
.empty{border:1px dashed var(--ink-3);padding:18px 15px;margin-top:14px}
.empty h3{font-family:var(--display);font-weight:700;font-size:21px;
  margin-bottom:7px}
.empty p{font-size:17px;line-height:1.55;color:var(--ink-2);margin-bottom:12px}
.empty .opts{display:flex;gap:8px;flex-wrap:wrap}
.empty .opts a,.empty .opts button{
  border:1px solid var(--ink);padding:10px 13px;
  font-family:var(--label);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);min-height:var(--tap);
  display:inline-flex;align-items:center;
}
.empty .opts a:hover,.empty .opts button:hover{background:var(--red);
  color:var(--paper);border-color:var(--red)}

/* ─────────────── colophon ─────────────── */
.colophon{
  margin-top:30px;padding:14px 0 46px;border-top:3px double var(--ink);
  font-family:var(--label);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);line-height:2.1;text-align:center;
}
.colophon a{color:var(--ink-2);border-bottom-color:var(--rule)}
.colophon a:hover{color:var(--red)}
.back{
  display:inline-block;font-family:var(--label);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--rule);margin-bottom:14px;padding:6px 0;
}
.back:hover{color:var(--red);border-bottom-color:var(--red)}

/* ════════════════════════════════════════════
   480px — larger phones
   ════════════════════════════════════════════ */
@media (min-width:480px){
  :root{--gut:20px}
  .earpiece .mid{display:inline}
  .ad h3{font-size:22px}
  .five{gap:0}
}

/* ════════════════════════════════════════════
   640px — the coupon can be prose again
   ════════════════════════════════════════════ */
@media (min-width:640px){
  .fillin{
    font-family:var(--display);font-size:20px;line-height:2.1;
    display:block;
  }
  .slot{
    display:inline-flex;width:auto;padding:0;border-bottom:0;min-height:0;
    vertical-align:baseline;
  }
  .slot > .lbl{display:none}          /* the prose carries the label */
  .d640{display:inline}
  .slot select{
    max-width:none;min-height:0;
    padding:4px 21px 4px 8px;text-align:left;text-align-last:left;
    border-bottom:2px dotted var(--ink-3);
  }
  .slot.filled select{border-bottom:2px solid var(--red)}
  .slot .caret{right:6px;top:5px}
  .five{grid-template-columns:repeat(3,1fr);gap:0 20px}
  .five a,.five div{border-top:0;border-left:1px solid var(--rule);
    padding:0 0 0 16px}
  .five a:first-child,.five div:first-child{border-left:0;padding-left:0}
}

/* ════════════════════════════════════════════
   640px — the district grid becomes geographic
   ════════════════════════════════════════════ */
@media (min-width:640px){
  /* aspect-ratio matches the projected data, so the SVG fills the box exactly
     and the percentage-positioned badges land on their boroughs. */
  .mapfield{display:block;position:relative;aspect-ratio:1000 / 773;
    background:var(--paper);border:1px solid var(--rule)}
  .maplegend .sw-river-row{display:inline-flex;align-items:center}
  .tilemap{margin-top:13px}
}
@media (min-width:900px){
  .bt{min-height:60px;font-size:12px;padding:9px 5px}
}

/* ════════════════════════════════════════════
   700px — tablets: three columns, struck stamps
   ════════════════════════════════════════════ */
@media (min-width:700px){
  :root{--gut:24px}
  body{font-size:18.5px}
  .cols{grid-template-columns:repeat(3,1fr)}
  .col{border-top:0;border-left:1px solid var(--rule);padding:20px 18px 18px}
  .col:first-child{border-left:0;padding-left:0}
  .col:last-child{padding-right:0}
  /* margin-top:auto on the button pins it to the bottom, so three columns of
     unequal prose still line their calls to action up. */
  .col{justify-content:flex-start}
  .col p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
  .cols::before{content:"";display:none}

  /* struck across the ad, as a stamp should be */
  .stamp{
    position:absolute;right:-12px;top:38px;display:block;margin:0;
    max-width:70%;transform:rotate(-7deg);opacity:.88;line-height:1.15;
    z-index:2;
  }
  .stamp.low{top:auto;bottom:52px;right:-8px;transform:rotate(5deg)}
  .ad{overflow:hidden}
  .ad h3{padding-right:34%}

  .particulars dl{grid-template-columns:auto 1fr;gap:0 16px}
  .particulars dt{padding-top:5px}
  .particulars dd{padding-top:5px}


}

/* ════════════════════════════════════════════
   900px — two columns of classifieds
   ════════════════════════════════════════════ */
@media (min-width:900px){
  .ads{columns:2;column-gap:24px;column-rule:1px solid var(--rule)}
  .ad{break-inside:avoid;-webkit-column-break-inside:avoid}
  .article .prose{columns:2;column-gap:28px;column-rule:1px solid var(--rule)}
  .article .prose > p{break-inside:avoid-column}
  .dateline .drop{display:inline}
}

/* ════════════════════════════════════════════
   fine pointer — denser type is safe without touch,
   and iOS focus-zoom cannot apply
   ════════════════════════════════════════════ */
@media (pointer:fine){
  .refine select{font-size:12.5px;padding:7px 22px 7px 10px;min-height:0}
  .slot select{font-size:15px}
  .ta li{min-height:0;padding:8px 11px;font-size:14.5px}
}

/* ════════════════════════════════════════════
   print — it is a newspaper, after all
   ════════════════════════════════════════════ */
@media print{
  body{background:#fff;font-size:11pt}
  body::before,.ta,.refine,.linkline,.skip,.mapwrap{display:none!important}
  .ad,.coupon,.particulars{break-inside:avoid}
  a{color:#000;border-bottom:0}
  .ad .apply::after{content:" — " attr(href)}
}

/* ════════════════════════════════════════════
   landscape phones — short viewports
   ════════════════════════════════════════════ */
@media (max-height:480px) and (orientation:landscape){
  .title{font-size:clamp(26px,6vw,44px)}
  .lead{padding:12px 0 2px}
  .lead h1{font-size:clamp(24px,5.4vw,40px)}
}

/* honour a user's own high-contrast preference */
@media (prefers-contrast:more){
  :root{--ink-2:#2a231c;--ink-3:#3a3128;--rule:#8f8672}
}