/* Velorete — one stylesheet for the news surface.
   The front page, the article pages, how-it-works and offers all pull from
   here, so the four cannot drift apart the way four inline <style> blocks did.

   TWO THEMES, BOTH DESIGNED. Light is warm paper, not stark white; dark is the
   Budget Explorer's own deep navy and cyan, so /demo and /budget read as one
   publication rather than two sites that happen to share a domain. Neither is
   derived from the other by inverting it. */

:root{
  color-scheme:light dark;
  /* Body marks: one hue per body (--h, set on the mark); lightness and chroma
     come from the theme so every mark flips together. */
  --mk-bg-l:.925;--mk-bg-c:.036;--mk-ink-l:.37;--mk-ink-c:.085;--mk-fill-l:.80;--mk-fill-c:.075;--mk-edge:.10;
  --scrim:rgba(20,26,33,.45);

  --paper:#f6f3ec;
  --bg:var(--paper);
  --surface:#fffdf8;
  --sunk:#efe9dd;
  --ink:#141a21;
  --muted:#5d6a76;
  --faint:#5a6571;
  --rule:#ddd5c6;
  --hair:#e8e1d4;
  --accent:#0d5570;
  --accent-soft:#e3edf1;
  --warn:#9a5800;
  --warn-bg:#f8eeda;
  --bad:#96271b;
  --bad-bg:#f8e6e2;
  --good:#1c6b45;

  /* Newsreader is a news face: Production Type drew it for reading journalism
     on screen, with optical sizing so a headline and a paragraph are cut
     differently rather than scaled from one drawing. It sets the headlines AND
     the article body, because serif body copy is a large part of what makes a
     page read as reporting rather than as a blog.

     Public Sans is the United States Web Design System's typeface — the face
     of federal government interfaces. On a site whose entire job is reading
     county government documents back to residents, the civic sans is the
     furniture: nav, datelines, labels, tags, forms. It is also simply not
     Inter, which is on every other site on the internet. */
  --display:Newsreader,Georgia,"Times New Roman",serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --measure:72rem;
  /* 60ch, not 66ch. `ch` is the advance of "0", and Newsreader's zero is
     narrower than its average lowercase letter — 66ch measured 75 characters
     per line in the browser, at the very top of the readable band. 60ch lands
     near 68, which is the middle of it. Measured, not assumed. */
  --read:60ch;
}

/* Three states, not two. Unset follows the system; an explicit choice from the
   toggle stamps data-theme on <html> and overrides it in BOTH directions, which
   is why the media query is guarded — without :not([data-theme=light]) a reader
   on a dark OS could never choose light. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --mk-bg-l:.255;--mk-bg-c:.045;--mk-ink-l:.85;--mk-ink-c:.085;--mk-fill-l:.40;--mk-fill-c:.07;--mk-edge:.14;
    --scrim:rgba(0,0,0,.6);
    /* The explorer's palette, deliberately. Same site, same voice. */
    --paper:#080d16;
    --bg:var(--paper);
    --surface:#0f1629;
    --sunk:#0c1220;
    --ink:#e8ecf1;
    --muted:#8892a4;
    --faint:#7d899b;
    --rule:#1d2637;
    --hair:#161e2c;
    --accent:#00d4ff;
    --accent-soft:#0d2634;
    --warn:#ff9f43;
    --warn-bg:#241a0e;
    --bad:#ff7a6d;
    --bad-bg:#2a1210;
    --good:#2ed573;
  }
}

:root[data-theme=dark]{
  --mk-bg-l:.255;--mk-bg-c:.045;--mk-ink-l:.85;--mk-ink-c:.085;--mk-fill-l:.40;--mk-fill-c:.07;--mk-edge:.14;
  --scrim:rgba(0,0,0,.6);
  --paper:#080d16;
  --bg:var(--paper);
  --surface:#0f1629;
  --sunk:#0c1220;
  --ink:#e8ecf1;
  --muted:#8892a4;
  --faint:#7d899b;
  --rule:#1d2637;
  --hair:#161e2c;
  --accent:#00d4ff;
  --accent-soft:#0d2634;
  --warn:#ff9f43;
  --warn-bg:#241a0e;
  --bad:#ff7a6d;
  --bad-bg:#2a1210;
  --good:#2ed573;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 var(--body);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent);text-underline-offset:.18em}
article p a,article li a{text-decoration:underline;text-decoration-thickness:.06em}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.25rem}

/* ── Nameplate ──────────────────────────────────────────────────────────────
   A masthead, not a logo bar: display serif, a hairline pair beneath it, and
   the county set in spaced caps. This is the single strongest signal that the
   page is a publication rather than a template. */

header{padding:2.1rem 0 0;margin-bottom:1.8rem;border-bottom:3px double var(--rule);position:relative}

/* Top right of the masthead, where a paper puts the edition line. Absolute so
   it cannot push the nameplate around at any width. */
.themetoggle{
  position:absolute;
  top:2.1rem;
  right:0;
  font:inherit;
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .7rem;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--surface);
  color:var(--muted);
  cursor:pointer;
  line-height:1;
}
.themetoggle:hover{border-color:var(--accent);color:var(--accent)}
.themetoggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.themetoggle .glyph{font-size:.95rem;line-height:1}
@media (max-width:34rem){
  .themetoggle{top:1.6rem;padding:.35rem .5rem}
  .themetoggle .lbl{display:none}
}

/* Broadsheet masthead: the date at the left rail, the nameplate optically
   centred, and the right rail left clear for the theme toggle — which is
   absolutely positioned, so a matching empty third column is what keeps the
   nameplate on the true centre rather than pushed off it. */
/* One line: date · Velorete · county, centred as a set and tight against the
   nameplate. The two small lines sit on the display face's BASELINE, not its
   centre box — a 3.1rem line-height boxed against .7rem type centres to
   something that reads as drifting, and a masthead is where that shows. */
.brand{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.7rem;
}
.nameplate{display:contents}

.brand h1,.brand .np{
  margin:0;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:800;
  font-size:clamp(2rem,6vw,3.1rem);
  line-height:.95;
  letter-spacing:-.025em;
}
.brand h1 a,.brand .np a{color:inherit;text-decoration:none}

.brand span{
  font-size:.7rem;
  color:var(--muted);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
}

/* The date sits to the LEFT of the nameplate, the county line to its RIGHT —
   one row of chrome above the news instead of three. */
.dateline{
  margin:0;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:700;
  white-space:nowrap;
}
/* Measured, not guessed: the one-line masthead is 656px wide once the display
   face hits its clamp ceiling, and the theme toggle occupies 121px of the right
   edge. Centred, that runs under the toggle below about 936px — so the stack
   takes over at 60rem with room to spare rather than at the width where the
   three parts merely stop touching. Date becomes a centred eyebrow, then the
   nameplate, then the county line; the DOM already reads that way, so nothing
   moves. */
@media (max-width:60rem){
  .brand{flex-direction:column;align-items:center;gap:.3rem}
  .nameplate{display:flex;flex-direction:column;align-items:center;gap:.15rem}
  .dateline{font-size:.7rem}
}
nav{margin:.9rem 0 .85rem;display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;font-size:.87rem}
nav a{text-decoration:none;color:var(--muted);font-weight:500}
nav a:hover{color:var(--accent)}

/* ── Section headings ───────────────────────────────────────────────────────
   Spaced caps with a short leading rule. Cheap, and it reads as edited. */

h2{
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
  margin:2.8rem 0 1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
h2::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ── The live strip ─────────────────────────────────────────────────────────
   Ferries and weather, which is the reason to come back daily. Treated as an
   instrument panel: a sunk band, spaced-caps labels, one place at a time. */

/* A band across the top, not a card in the flow. Ferries, weather and the tide
   are the reason to come back daily, so they sit above the news — and they are
   ONE place at a time, chosen by the reader, rather than a table of five.

   Minimal on purpose: a glyph and a number. Everything else is a subtitle. */
.livebar{
  max-width:var(--measure);
  margin:0 auto 2rem;
  padding:.55rem 1.25rem .6rem;
  background:var(--sunk);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  font-size:.88rem;
}
.places{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.pl{
  font:inherit;font-family:var(--body);font-size:.72rem;font-weight:600;
  letter-spacing:.06em;padding:.24rem .7rem;border:1px solid transparent;min-height:2rem;
  border-radius:999px;background:transparent;color:var(--faint);cursor:pointer;line-height:1.2;
}
.pl:hover{color:var(--accent)}
.pl[aria-pressed=true]{background:var(--surface);border-color:var(--rule);color:var(--ink)}
.pl:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.readings{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 2rem}
.rd{display:inline-flex;align-items:baseline;gap:.45rem;min-width:0}
.rd .ic{font-size:1rem;line-height:1;color:var(--muted);flex:0 0 auto}
.rd b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rd i{font-style:normal;color:var(--muted);font-size:.84rem;min-width:0}
.rd.gap b{color:var(--warn)}
.rd.gap .ic{color:var(--warn)}
.rd.alert b{color:var(--bad)}
.rd.alert .ic{color:var(--bad)}
.rd.warn-item{flex:1 0 100%}
/* The age sits top right, on the same row as the place pills, so it never
   needs a line of its own. The readings then take the full width below. */
.livebar{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem}
.livebar .places{grid-column:1;grid-row:1}
.rdrow{display:contents}
.rdrow .readings{grid-column:1 / -1;min-width:0}
.livebar .firedetail{grid-column:1 / -1}

.livebar .age{
  grid-column:2;
  grid-row:1;
  align-self:center;
  margin-bottom:.5rem;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
/* Stale is the one state worth colouring: it is the case where the number on
   screen might not be true any more. */
.livebar .age.is-stale{color:var(--warn)}

.livebar .gap{color:var(--warn)}
.livebar .ok{color:var(--muted)}

/* Phones: the whole strip in three short lines. The place pills become one
   row that scrolls sideways (the fade says there is more), the update time
   sits at the end of that row, and the readings keep their numbers while the
   subtitles a glance does not need (weather words, tide height) step aside.
   The ferry keeps its row: a full or cancelled boat must never be cut. */
@media (max-width:34rem){
  .livebar{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
    gap:.3rem .6rem;margin-bottom:1.2rem;padding:.4rem .7rem .45rem;font-size:.82rem;
  }
  .places{
    position:relative;flex-wrap:nowrap;overflow-x:auto;margin:0;gap:.15rem;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
    mask-image:linear-gradient(90deg,#000 85%,transparent);
  }
  .places::-webkit-scrollbar{display:none}
  .pl{flex:0 0 auto;font-size:.68rem;letter-spacing:.04em;padding:.15rem .55rem;min-height:1.8rem;white-space:nowrap}
  .rdrow{display:contents}
  .livebar .age{grid-column:2;grid-row:1;margin:0;font-size:.62rem;letter-spacing:.04em}
  .livebar .age .up{display:none}
  .readings{grid-column:1 / -1;gap:.2rem .75rem;align-items:center}
  .rd{gap:.3rem}
  .rd .ic{font-size:.9rem}
  .rd i{font-size:.76rem}
  .readings > .rd:first-child{flex:1 0 100%;overflow:hidden}
  .readings > .rd:first-child i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rd-wx i,.rd-tide i{display:none}
  .rd-btn .fl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .rd-btn{min-height:1.8rem;align-items:center}
  .rd-btn .more{font-size:0;text-decoration:none}
  .rd-btn .more::after{content:"\25BE";font-size:.8rem;display:inline-block}
  .rd-btn[aria-expanded=true] .more::after{transform:rotate(180deg)}
  .rd.warn-item{overflow:hidden}
  .rd.warn-item i{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .firedetail{grid-column:1 / -1;margin:.3rem 0 .05rem;padding:.55rem .7rem;font-size:.8rem;line-height:1.45}
}

/* ── Stories ────────────────────────────────────────────────────────────────
   The lead gets display type and room; the rest step down. A uniform list of
   equally-sized links is the thing that makes an automated feed look automated. */

.story{border-bottom:1px solid var(--hair);padding:1.35rem 0}
.story:last-child{border-bottom:0}

.story a.t{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:1.32rem;
  font-weight:600;
  text-decoration:none;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.25;
  display:block;
}
.story a.t:hover{color:var(--accent)}
.story .dek{font-family:var(--serif);color:var(--muted);margin:.45rem 0 0;font-size:1.02rem;line-height:1.5}
.story .meta{margin-top:.6rem;font-size:.78rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* The lead dominates and the rest fall into a two-up field. A list of
   identically sized links is the single clearest tell that nobody chose an
   order. Sized by the FEED's width (a container query), not the window's: the
   centre column is narrower than the page once the rails are up, and a
   viewport breakpoint would put two cards side by side in a column that
   cannot hold them. */
.well{container:feed/inline-size;min-width:0}
#stories{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
#stories .story:first-child{
  padding:0 0 1.6rem;
  border-bottom:2px solid var(--rule);
  margin-bottom:.4rem;
}
#stories .story:first-child a.t{
  font-size:clamp(1.65rem,3.4vw,2.3rem);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.025em;
}
#stories .story:first-child .dek{font-size:1.06rem;margin-top:.6rem;max-width:var(--read)}
#stories .tipcard{grid-column:1/-1}
@container feed (min-width:32rem){
  #stories.view-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.8rem}
  #stories.view-grid .story:first-child{grid-column:1/-1}
  #stories.view-grid .story:not(:first-child) a.t{font-size:1.16rem}
}
/* Wide enough, the lead sits beside its picture instead of under it. */
@container feed (min-width:38rem){
  #stories.view-grid .story:first-child:has(> .shot){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0 1.8rem;align-items:start}
  #stories.view-grid .story:first-child .shot{margin:0}
  #stories.view-grid .story:first-child .credit{grid-column:1;margin:.35rem 0 0}
  #stories.view-grid .story:first-child .txt{grid-column:2;grid-row:1/span 2}
}

.brief{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:10px;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--hair);
  margin-bottom:.6rem;
}
.brief a.t{font-size:1.02rem;font-family:var(--body);font-weight:600}
.brief .meta a{color:var(--accent)}

.empty{color:var(--muted);font-size:.94rem;padding:1rem 0}

/* Story images. The lead gets a full-bleed shot; the two-up field gets a
   16:9 crop so cards in a row share a baseline whatever the source aspect. */
.story .shot{display:block;margin:0 0 .85rem;border-radius:10px;overflow:hidden;background:var(--sunk)}
.story .shot img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.story .shot.is-mark{background:none}
#stories .story:first-child .shot{margin-bottom:1.1rem;border-radius:12px}
/* A mark has a drawing per shape: the wide card in grid, the square in compact. */
.view-grid .sqm{display:none}
.view-compact .wdm{display:none}

article .hero{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200/630;
  object-fit:cover;
  border-radius:12px;
  margin:0 0 1.5rem;
  background:var(--sunk);
}

/* ── Cards, forms, tools ────────────────────────────────────────────────── */

.tiphint{color:var(--muted);font-size:.93rem;margin:0 0 .9rem}

#tip,#sub{
  border:1px solid var(--rule);
  border-radius:12px;
  padding:1.15rem;
  display:grid;
  gap:.65rem;
  max-width:36rem;
  background:var(--surface);
}
#sub{margin-bottom:1rem}

#tip textarea,#tip input,#sub input,#sub select{
  font:inherit;
  padding:.6rem .7rem;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--bg);
  color:var(--ink);
  width:100%;
}
#tip textarea:focus,#tip input:focus,#sub input:focus,#sub select:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}
#tip textarea{resize:vertical;min-height:5.5rem}
/* Visible labels: a placeholder vanishes as you type and was the only name
   each field had. Pulled up to their field so each reads as one unit. */
#tip .tl{font-size:.84rem;font-weight:600;color:var(--ink);margin-bottom:-.4rem}
#tip .tl span{font-weight:500;color:var(--faint)}
#tip ::placeholder{color:var(--faint);opacity:1}
.tiprow{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
@media (max-width:30rem){.tiprow{grid-template-columns:1fr}}
#tip input[name=_website],#sub input[name=_website]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

#tip button,#sub button{
  justify-self:start;
  font:inherit;
  font-weight:600;
  padding:.58rem 1.3rem;
  border:0;
  border-radius:8px;
  background:var(--accent);
  color:var(--paper);
  cursor:pointer;
  letter-spacing:.01em;
}
#tip button:hover,#sub button:hover{filter:brightness(1.08)}
#tip button[disabled],#sub button[disabled]{opacity:.55;cursor:default}
#tipmsg,#submsg{font-size:.88rem;color:var(--muted)}
#tipmsg.bad,#submsg.bad{color:var(--bad)}

.topics{display:flex;flex-wrap:wrap;gap:.45rem}
.topics label{
  font-size:.86rem;
  border:1px solid var(--rule);
  border-radius:20px;
  padding:.32rem .8rem;
  cursor:pointer;
  user-select:none;
}
.topics input{position:absolute;opacity:0;width:0;height:0}
.topics input:checked + span{color:var(--accent);font-weight:600}
.topics label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

#offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem;margin-bottom:.6rem}
.offer{border:1px solid var(--hair);border-radius:12px;padding:1rem 1.1rem;background:var(--surface)}
.offer strong{display:block;font-size:1rem;margin-bottom:.2rem}
.offer .biz{font-size:.84rem;color:var(--muted)}
.offer .terms{font-size:.83rem;color:var(--muted);margin-top:.4rem}
.offer .till{font-size:.72rem;color:var(--faint);margin-top:.45rem;letter-spacing:.06em;text-transform:uppercase}

.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.85rem}
.tool{
  border:1px solid var(--hair);
  border-radius:12px;
  padding:1.05rem 1.15rem;
  text-decoration:none;
  color:inherit;
  display:block;
  background:var(--surface);
  transition:border-color .15s ease,transform .15s ease;
}
.tool:hover{border-color:var(--accent);transform:translateY(-2px)}
.tool strong{display:block;font-size:1rem;margin-bottom:.25rem;font-family:var(--display);font-weight:600}
.tool span{font-size:.87rem;color:var(--muted);line-height:1.5}

footer{margin:4rem 0 4.5rem;padding-top:1.3rem;border-top:1px solid var(--rule);font-size:.81rem;color:var(--faint);line-height:1.6}

.demobanner{
  margin:0 0 1.6rem;
  padding:.65rem .9rem;
  border:1px solid var(--warn);
  border-left:3px solid var(--warn);
  border-radius:0 8px 8px 0;
  background:var(--warn-bg);
  font-size:.82rem;
  color:var(--warn);
  letter-spacing:.01em;
}
.demobanner a{color:inherit;font-weight:600}

/* ── Article pages ──────────────────────────────────────────────────────────
   The claim this whole site rests on is that every figure traces to a county
   document. So citations are a designed element, not a footnote: a raised chip
   on the sentence that carries the number. */

article{padding-bottom:1rem}
article h1{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(1.9rem,5.2vw,2.9rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:.3rem 0 .5rem;
}
article .dek{font-family:var(--serif);font-size:1.22rem;color:var(--muted);margin:0 0 1.3rem;line-height:1.45;max-width:var(--read)}
article .meta{font-size:.8rem;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding-bottom:1.4rem;border-bottom:1px solid var(--hair)}
article p{font-family:var(--serif);font-size:1.19rem;line-height:1.75;margin:1.2rem 0;max-width:var(--read)}
article{max-width:44rem}

.artbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.artbar .themetoggle{position:static;top:auto;right:auto}

.masthead{
  font-family:var(--display);
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--ink);
  display:inline-block;
}

.box{
  border:1px solid var(--hair);
  border-radius:12px;
  padding:1.05rem 1.2rem;
  margin:1.6rem 0;
  background:var(--surface);
  font-size:.94rem;
}
.box h2,.box h3{display:block;margin:0 0 .55rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.box h2::after{display:none}
.box ol,.box ul{margin:0;padding-left:1.15rem}
.box li{margin-bottom:.5rem}
.box a{color:var(--accent)}
.note{color:var(--muted)}

.retracted{border:1px solid var(--bad);background:var(--bad-bg);color:var(--bad)}
.corrected{
  border:1px solid var(--warn);
  border-left:3px solid var(--warn);
  background:var(--warn-bg);
  color:var(--warn);
  padding:.85rem 1rem;
  border-radius:0 8px 8px 0;
  margin:0 0 1.4rem;
  font-size:.93rem;
}
.corrected strong{display:block;margin-bottom:.25rem;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem}

blockquote{margin:1.4rem 0;padding-left:1.1rem;border-left:3px solid var(--rule);color:var(--muted);font-style:italic}

/* Citations. The whole product claim, made visible. */
sup a{
  color:var(--accent);
  text-decoration:none;
  font-size:.62em;
  font-weight:700;
  padding:.1em .3em;
  border-radius:4px;
  background:var(--accent-soft);
  margin-left:.15em;
  vertical-align:.35em;
}
sup a:hover{filter:brightness(1.12)}
/* One source: named once under the byline instead of a marker on every line. */
.srcline{margin:.9rem 0 0;font-size:.84rem;color:var(--muted)}
.srcline a{color:var(--accent)}

article ul{font-family:var(--serif);font-size:1.19rem;line-height:1.75;margin:0 0 1.2rem;padding-left:1.2rem;max-width:var(--read)}
blockquote cite{display:block;font-size:.85rem;color:var(--faint);font-style:normal;margin-top:.45rem}


/* ── Feed toolbar: topic chips and the grid/compact switch ─────────────────
   A reader who checks daily wants density; a first-time visitor wants the
   pictures. Both are right, so it is their call. */
.toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:0 0 1rem}
.toolbar h2{margin:0;flex:0 0 auto}
.toolbar h2::after{display:none}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;flex:1 1 auto;min-width:0}
.chip{
  font:inherit;font-family:var(--body);font-size:.78rem;font-weight:500;
  padding:.28rem .7rem;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);color:var(--muted);cursor:pointer;line-height:1.2;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--paper);font-weight:600}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.viewswitch{display:inline-flex;border:1px solid var(--rule);border-radius:8px;overflow:hidden;flex:0 0 auto;margin-left:auto}
.viewswitch button{
  font:inherit;font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:.04em;
  padding:.38rem .7rem;border:0;background:var(--surface);color:var(--muted);cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;line-height:1;
}
.viewswitch button + button{border-left:1px solid var(--rule)}
.viewswitch button[aria-pressed=true]{background:var(--sunk);color:var(--ink)}
.viewswitch button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:34rem){.viewswitch .lbl{display:none}}
/* On a phone the topics scroll sideways in one row rather than stacking four
   rows of chips between the reader and the news. */
@media (max-width:47.99rem){
  .toolbar{flex-wrap:nowrap}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
}

/* Topic tag on a card. */
.story .tag{
  display:inline-block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin:0 0 .35rem;
}

/* Photo credit. Small, present, and a link when the licence wants one. */
.credit{display:block;font-size:.74rem;color:var(--faint);margin:-.45rem 0 .7rem;letter-spacing:.02em}
.credit a{color:inherit}
article .credit{margin:-1rem 0 1.4rem}

/* Skeletons: the card's own aspect, so seven photographs arriving does not
   move anything a reader has already started reading. */
.skel{
  border-radius:12px;background:var(--sunk);
  aspect-ratio:1200/630;position:relative;overflow:hidden;
}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 55%,transparent),transparent);
  transform:translateX(-100%);animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}
#stories .skel:first-child{grid-column:1/-1}

/* Compact view: a dense list, each row led by a square thumbnail: the photo
   cropped square, or the body's square mark. The column is there on every
   row, so headlines line up down the page. */
#stories.view-compact{display:block}
#stories.view-compact .story{display:grid;grid-template-columns:4.25rem minmax(0,1fr) auto;gap:.15rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--hair);align-items:start;margin:0}
#stories.view-compact .story:first-child{padding-top:0;border-bottom:1px solid var(--hair)}
#stories.view-compact .story .shot{grid-column:1;grid-row:1/span 3;aspect-ratio:1;border-radius:14%;margin:0}
#stories.view-compact .story .shot img{aspect-ratio:1;height:100%}
#stories.view-compact .story .shot .mark{border-radius:0}
#stories.view-compact .story .txt{display:contents}
#stories.view-compact .story .tag{grid-column:2;grid-row:1;margin:0}
#stories.view-compact .story a.t,#stories.view-compact .story:first-child a.t{grid-column:2;grid-row:2;font-size:1.04rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
#stories.view-compact .story .credit{grid-column:2;grid-row:3;margin:.15rem 0 0;font-size:.64rem}
#stories.view-compact .story .meta{grid-column:3;grid-row:1/span 3;margin:0;white-space:nowrap}
#stories.view-compact .story .dek{display:none}
#stories.view-compact .brief{display:block}
@container feed (max-width:30rem){
  #stories.view-compact .story{grid-template-columns:3.5rem minmax(0,1fr);gap:.15rem .8rem}
  #stories.view-compact .story .meta{grid-column:2;grid-row:4;white-space:normal;margin-top:.2rem}
}

/* ── Coming up: the meeting calendar ──────────────────────────────────────
   Grouped by day; each meeting wears its body's small mark, so a reader
   who knows the Hearing Examiner's purple scale finds it without reading. */
.agenda{list-style:none;margin:0;padding:0;font-size:.88rem}
.agenda .day{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--faint);padding:.7rem 0 .25rem;border-top:1px solid var(--hair)}
.agenda .day:first-child{padding-top:0;border-top:0}
.agenda .mt{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.1rem .6rem;padding:.25rem 0 .45rem}
.agenda .mt .mslot{grid-row:1/span 2;margin-top:.15rem}
.agenda .mt a,.agenda .mt .nolink{grid-column:2}
.agenda .mt a,.agenda .mt .nolink{color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
.agenda .mt a:hover{color:var(--accent)}
.agenda .mt small{grid-column:2;color:var(--muted);font-size:.76rem;line-height:1.35;font-variant-numeric:tabular-nums}
.agenda .empty{display:block;padding:.4rem 0}

/* ── The body marks ────────────────────────────────────────────────────────
   A story with no real photograph wears the mark of the county body it is
   about. Our own design on one 12-unit square, NEVER the county seal: an
   independent paper must not look official. The motif sits in the top-right
   7x7 block, the monogram on the unit-11 baseline. Lines keep one pixel
   weight at every size (non-scaling stroke), so a 28px calendar icon and a
   full card are drawn with the same pen. Only the hue (--h) differs by body. */
.mark{
  --ground:oklch(var(--mk-bg-l) var(--mk-bg-c) var(--h));
  --pen:oklch(var(--mk-ink-l) var(--mk-ink-c) var(--h));
  --fill:oklch(var(--mk-fill-l) var(--mk-fill-c) var(--h));
  display:block;position:relative;width:100%;overflow:hidden;
  background:var(--ground);color:var(--pen);
  box-shadow:inset 0 0 0 1px oklch(var(--mk-ink-l) var(--mk-ink-c) var(--h) / var(--mk-edge));
  container-type:inline-size;--sw:2px;
}
.mark svg{position:absolute;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mark svg *{vector-effect:non-scaling-stroke;stroke-width:var(--sw)}
.mark svg .f{fill:var(--fill);stroke:none}
.mark svg .k{fill:currentColor;stroke:none}
.mark .lab{position:absolute;display:flex;flex-direction:column;line-height:1}
.mark .mono{font-family:var(--body);font-weight:800;letter-spacing:.02em;line-height:.8}
.mark .nm{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap}
/* square: compact rows and the article header */
.mark--sq{aspect-ratio:1;border-radius:14%}
.mark--sq svg{right:8.33%;top:8.33%;width:58.33%;height:58.33%}
.mark--sq .lab{left:10%;bottom:9%}
.mark--sq .mono{font-size:22cqw}
.mark--sq .nm{display:none}
/* xs: calendar rows and chips; too small for letters, so the motif alone */
.mark--xs{aspect-ratio:1;border-radius:22%;--sw:1.25px}
.mark--xs svg{left:16%;top:16%;width:68%;height:68%}
.mark--xs .lab{display:none}
/* wide: the 1200x630 slot a photo would fill */
.mark--wide{aspect-ratio:1200/630;border-radius:10px;--sw:2.5px}
.mark--wide svg{right:7%;top:50%;height:74%;width:auto;aspect-ratio:1;transform:translateY(-50%)}
.mark--wide .lab{left:6.5cqw;bottom:7cqw;gap:2.2cqw}
.mark--wide .mono{font-size:12.5cqw}
.mark--wide .nm{font-size:max(9px,2.5cqw)}
.mark--wide::before{content:"";position:absolute;left:6.5cqw;top:7cqw;width:8cqw;height:2px;background:currentColor;opacity:.55}
/* No oklch (pre-2023 browsers): a neutral tile rather than an invisible one. */
@supports not (color:oklch(50% 0.1 200)){
  .mark{background:var(--sunk);color:var(--muted);box-shadow:inset 0 0 0 1px var(--rule)}
  .mark svg .f{fill:var(--hair)}
}

/* ── The front page LAYOUT ─────────────────────────────────────────────────
   Phone (default): one column. Coming-up is a strip of dates above the feed;
   Suggest-a-story is a card in the feed that opens a bottom sheet; offers
   follow the feed; the tools are the masthead nav, which carries the same
   links, so the right rail goes entirely.
   Tablet (48rem+): feed + right rail (tools, then coming up), offers under
   them; Suggest-a-story stays a card in the feed, its sheet centred.
   Desktop (75rem+): left rail (Suggest a story, offers) · feed · right rail
   (tools, then coming up). Rails stick when the window is tall enough to show
   the whole of one. */
.wrap.wide{max-width:none}
@media (min-width:90rem){.wrap.wide{padding:0 2.5rem}}
@media (min-width:110rem){.wrap.wide{padding:0 4rem}}
.wrap.wide .livebar{max-width:none;border-radius:8px}
.fp{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"well" "rr" "rl";gap:0 2rem;align-items:start}
.fp .well{grid-area:well}
.rail{min-width:0}
.rail-r{grid-area:rr}
/* On a phone the masthead carries no links, so the Tools panel follows the
   feed; the calendar is already the strip at the top, so its rail copy goes. */
@media (max-width:47.99rem){.rail-r .upbox{display:none}}
.rail-l{grid-area:rl}
.rail section > h2:first-child{margin-top:2.2rem}
.upstrip{display:block;margin:0 0 1.2rem}
.upstrip h2{margin:0 0 .6rem}
.tipcard{display:grid}

@media (min-width:48rem){
  .fp{grid-template-columns:minmax(0,1fr) 17rem;grid-template-areas:"well rr" "well rl";grid-template-rows:auto 1fr}
  .rail-r section:first-child > h2:first-child{margin-top:0}
  .upstrip{display:none}
}
@media (min-width:75rem){
  .fp{grid-template-columns:21rem minmax(0,1fr) 18rem;grid-template-areas:"rl well rr";grid-template-rows:auto;gap:0 2.2rem}
  /* The Turnstile widget is a fixed 300px, and it has to fit inside the
     tinted panel: 21rem (336px) less .9rem of padding a side leaves 307px, and
     the form drops its own card chrome here. */
  .rail #tip{padding:0;border:0;background:none}
  .rail-l .tippanel{background:var(--sunk);border-radius:12px;padding:1rem .9rem 1.1rem}
  .rail-l section:first-child h2{margin-top:0}
  .tipcard{display:none}
}
@media (min-width:75rem) and (min-height:50rem){
  .rail{position:sticky;top:1rem}
}

/* The phone's calendar strip: swipe sideways, snap to a meeting. */
.chiprow{display:flex;gap:.55rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1.25rem .5rem;margin:0 -1.25rem;scroll-padding-inline:1.25rem;scrollbar-width:thin}
.dchip{scroll-snap-align:start;flex:0 0 12.5rem;display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.1rem .6rem;padding:.6rem .7rem;border:1px solid var(--hair);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--ink)}
.dchip .mslot{grid-row:1/span 2;align-self:start;margin-top:.1rem}
.dchip .when,.dchip .what{grid-column:2}
.dchip .when{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--faint);line-height:1.4;white-space:nowrap}
.dchip .what{font-size:.85rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
a.dchip:hover{border-color:var(--accent)}
.chiprow .empty{padding:.2rem 0}

/* Two panels carry a tint, to break the rails up: Suggest a story (the one
   thing on the page that asks the reader to DO something) and Tools. Offers
   and the calendar stay plain lists. Tint, no border: a border AND a fill is
   one frame too many beside a feed of cards. */
.toolsbox{background:var(--sunk);border-radius:12px;padding:1rem 1.1rem}
.rail .toolsbox > h2:first-child{margin:0 0 .8rem}
@media (max-width:47.99rem){.toolsbox{margin-top:2.4rem}}

/* Tools & investigations, as a list in the rail. */
.toollist{list-style:none;margin:0;padding:0;display:grid}
.toollist a{display:block;padding:.6rem 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.toollist li:first-child a{padding-top:0}
.toollist strong{display:block;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.3}
.toollist span{display:block;font-size:.8rem;color:var(--muted);line-height:1.45}
.toollist a:hover strong{color:var(--accent)}

/* ── Local offers: two coupon slots ─────────────────────────────────────────
   Always two, golden-ratio cards (1.618:1) with a dashed edge and a notch
   bitten out of each side, so they read as coupons at a glance. An empty
   slot is the invitation to post one. Stacked one above the other at every
   width (Philip, 09-23): side by side left each one too small to read. */
#offers.coupons{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin-bottom:.4rem}
.coupon{
  aspect-ratio:1.618/1;position:relative;display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  padding:1rem 1.6rem;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--rule));border-radius:10px;
  background:var(--surface);color:var(--ink);text-decoration:none;overflow:hidden;line-height:1.25;
  -webkit-mask:radial-gradient(circle .65rem at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,
               radial-gradient(circle .65rem at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle .65rem at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,
               radial-gradient(circle .65rem at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  transition:border-color .15s ease,background-color .15s ease;
}
.coupon:hover{border-color:var(--accent);background:var(--accent-soft)}
.coupon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.coupon span{font-size:.9rem;color:var(--muted)}
.coupon b{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.coupon.open b{color:var(--accent)}
.coupon .biz{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.coupon .till{font-size:.78rem;color:var(--faint)}
#offersmore{margin:.2rem 0 0;font-size:.84rem}
.rail .tiphint{font-size:.86rem}

/* The in-feed prompt for the story form (below the desktop width only). */
.tipcard{border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:1rem 1.1rem;margin:1.1rem 0;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center}
.tipcard b{font-family:var(--display);font-size:1.12rem;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.tipcard p{margin:0;grid-column:1;color:var(--muted);font-size:.86rem;line-height:1.45}
.tipcard button{grid-column:2;grid-row:1/span 2;font:inherit;font-weight:600;font-size:.9rem;padding:.55rem 1rem;border:0;border-radius:8px;background:var(--accent);color:var(--paper);cursor:pointer;white-space:nowrap}
@container feed (max-width:26rem){.tipcard{grid-template-columns:minmax(0,1fr)}.tipcard button{grid-column:1;grid-row:auto;justify-self:start;margin-top:.4rem}}

/* The story form. In the desktop rail it is simply there. Narrower, the same
   element is a sheet: from the bottom on a phone, centred on a tablet. It is
   hidden with visibility, not display:none, so the Turnstile widget inside it
   renders at load and holds a token by the time the reader opens it. */
.tipsheet .sheettop{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem}
.tipsheet .sheettop h2{margin:0;flex:1}
.sheetx{font:inherit;font-size:.8rem;font-weight:600;border:1px solid var(--rule);background:var(--surface);color:var(--muted);border-radius:999px;padding:.3rem .7rem;cursor:pointer}
.tipsheet .grab{display:none}
@media (max-width:74.99rem){
  .tipsheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s linear .15s}
  .tipsheet.open{visibility:visible;opacity:1;transition:opacity .15s ease}
  .tippanel{width:100%;max-width:32rem;background:var(--bg);border-radius:16px 16px 0 0;padding:.6rem 1rem 1.2rem;max-height:92%;overflow:auto;overscroll-behavior:contain}
  .tipsheet .grab{display:block;width:2.5rem;height:4px;border-radius:2px;background:var(--rule);margin:0 auto .7rem}
  .tipsheet .sheettop h2::after{display:none}
}
@media (min-width:48rem) and (max-width:74.99rem){
  .tipsheet{align-items:center}
  .tippanel{border-radius:14px;padding:1.2rem}
  .tipsheet .grab{display:none}
}
@media (min-width:75rem){
  .sheetx{display:none}
}
html.sheet-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.tipsheet,.tipsheet.open{transition:none}}

footer .sitecredit{margin:.6rem 0 0}
footer .sitecredit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ── Article header: body line (no real photo) ─────────────────────────────
   An article without a real photograph opens like a text post: the body's
   mark and name, then the headline. A 1200x630 mark here would be a picture
   of nothing. */
.bodyline{display:flex;align-items:center;gap:.85rem;margin:0 0 1.1rem}
.bodyline .mark{width:56px;flex:0 0 56px}
.bodyline b{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.bodyline small{display:block;font-size:.8rem;color:var(--muted);margin-top:.15rem}

/* ── Every page inside the front page's chrome ─────────────────────────────
   Articles, offers and how-it-works are served in the front page itself with
   the middle column swapped (functions/_chrome.js). The page fills the well
   exactly as the feed does, edge to edge between the rails; only running text
   keeps its reading measure. A capped, centred column left gutters inside the
   well on a wide screen that the front page does not have. */
.well--article article,.well--offers .page,.well--page .page{max-width:none}
.backlink{display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--muted);text-decoration:none;margin-bottom:1.1rem}
.backlink:hover{color:var(--accent)}
/* The offers page IS the offers board, so the rail's copy of it goes. */
body[data-page=offers] .rail-l .offersbox{display:none}

/* ── Plain pages: offers, how-it-works ─────────────────────────────────── */
.page{max-width:44rem;padding-bottom:1rem}
.page .kicker{margin:0 0 .55rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.page h1{font-family:var(--display);font-optical-sizing:auto;font-weight:700;font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 .75rem}
.page .lede{font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--muted);margin:0 0 .5rem;max-width:var(--read)}
.page > p,.page > ol,.page > ul{max-width:var(--read)}
.page ol,.page ul{padding-left:1.2rem}
.page li{margin-bottom:.55rem}
.page .note{background:var(--sunk);border-radius:12px;padding:1rem 1.1rem;color:var(--ink)}
.page table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1rem 0 0}
.page th{text-align:left;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);padding:.4rem .8rem .5rem 0;border-bottom:1px solid var(--rule)}
.page td{padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--hair);vertical-align:top}
.page td.use{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.7rem}
.stat{display:flex;flex-direction:column;gap:.15rem;padding:.85rem .95rem;border:1px solid var(--hair);border-radius:12px;background:var(--surface)}
.stat b{font-family:var(--display);font-size:1.8rem;font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{font-size:.78rem;color:var(--muted);line-height:1.35}
.fineprint{margin:2.6rem 0 0;font-size:.82rem;color:var(--faint)}

/* ── The offers page ────────────────────────────────────────────────────────
   The board uses the front page's own coupon, so what a business previews is
   exactly what a reader sees. The form is a card with three steps, one at a
   time, and a live coupon beside the offer fields. */
.coupons--board{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.9rem}
.coupons--board .coupon{aspect-ratio:auto;min-height:9.25rem}
.coupon .terms{font-size:.82rem;line-height:1.4;color:var(--muted)}
.coupon.is-loading{min-height:9.25rem;background:var(--sunk);border-style:solid;border-color:var(--hair)}

.stepper{list-style:none;margin:0 0 .9rem;padding:0;display:flex;gap:.45rem}
.stepper li{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border-radius:10px;background:var(--sunk);color:var(--faint);font-size:.8rem;font-weight:600;line-height:1.2}
.stepper .n{flex:0 0 1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-size:.72rem;font-variant-numeric:tabular-nums}
.stepper .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper li.is-on{background:var(--accent-soft);color:var(--ink)}
.stepper li.is-on .n{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.stepper li.is-done{color:var(--muted)}
.stepper li.is-done .n{font-size:0;border-color:var(--good);color:var(--good)}
.stepper li.is-done .n::after{content:"\2713";font-size:.8rem}
/* On a phone only the current step keeps its words. */
@media (max-width:34rem){
  .stepper li{flex:0 0 auto}
  .stepper li.is-on{flex:1 1 auto}
  .stepper li:not(.is-on) .t{display:none}
}

.offerform{border:1px solid var(--hair);border-radius:14px;background:var(--surface);padding:1.3rem 1.3rem 1.1rem}
.offerform .step{display:none}
.offerform .step.on{display:block}
.offerform .hint{margin:0 0 1.1rem;color:var(--muted);font-size:.92rem;line-height:1.5}
.offerform .hint b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.offerform input[name=_website]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fld{display:flex;flex-direction:column;gap:.35rem;margin:0 0 .95rem;min-width:0}
.fld > span,.fld > label{display:flex;align-items:baseline;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--ink)}
.fld em{font-style:normal;font-weight:500;color:var(--faint)}
.fld .count{align-self:flex-end;font-weight:500;font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.fld input,.fld select,.fld textarea{
  width:100%;min-width:0;font:inherit;font-size:1rem;line-height:1.35;color:var(--ink);
  padding:.65rem .75rem;border:1px solid var(--rule);border-radius:9px;background:var(--bg);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.fld textarea{resize:vertical;min-height:4.2rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.fld [aria-invalid=true]{border-color:var(--bad)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint);opacity:1}
.fld .codein{max-width:12rem;font-size:1.45rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:0 .8rem}
.row--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:34rem){.row,.row--even{grid-template-columns:minmax(0,1fr)}}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin-top:.2rem}
.btn{font:inherit;font-weight:600;font-size:.95rem;padding:.7rem 1.25rem;border:0;border-radius:9px;background:var(--accent);color:var(--paper);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible,.linkbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:default}
.linkbtn{font:inherit;font-size:.86rem;font-weight:500;padding:.3rem 0;border:0;background:none;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
.offergrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
.preview{margin:0}
.preview figcaption{margin:0 0 .5rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.preview .coupon{aspect-ratio:auto;min-height:9.25rem;pointer-events:none}
@container feed (min-width:40rem){
  .offergrid{grid-template-columns:minmax(0,1fr) 15rem;align-items:start}
  .preview{position:sticky;top:1rem;margin-top:1.45rem}
}
.msg{margin:.8rem 0 0;min-height:1.3em;font-size:.88rem;color:var(--muted)}
.msg:empty{margin:0;min-height:0}
.msg.bad{color:var(--bad)}
.done{padding:.4rem 0 .2rem}
.done b{display:block;font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.2;margin-bottom:.35rem}
.done p{margin:0;color:var(--muted)}

/* ── Accessibility helpers ──────────────────────────────────────────────── */
/* Read by screen readers, not drawn: the live strip's "Next ferry:" etc. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Skip link: off-screen until focused, then the first thing on the page. */
.skip{position:absolute;left:1rem;top:-3rem;z-index:60;padding:.55rem .9rem;border-radius:8px;background:var(--accent);color:var(--paper);font-weight:600;text-decoration:none}
.skip:focus{top:.75rem;outline:2px solid var(--ink);outline-offset:2px}
/* The skip link's target takes focus programmatically; no ring around a whole column. */
.well:focus{outline:none}

/* ── Fire danger: a reading that opens its details ─────────────────────── */
.rd-btn{font:inherit;color:inherit;background:none;border:0;padding:.15rem .1rem;margin:-.15rem -.1rem;cursor:pointer;text-align:left;border-radius:6px;min-height:2rem}
.rd-btn .more{font-style:normal;font-size:.8rem;color:var(--accent);text-decoration:underline;text-underline-offset:.18em}
.rd-btn:hover .more{filter:brightness(1.1)}
.rd-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.firedetail{margin:.7rem 0 .1rem;padding:.75rem .9rem;border-radius:8px;background:var(--surface);border:1px solid var(--hair);font-size:.88rem;line-height:1.5;max-width:44rem}
.firedetail p{margin:0 0 .45rem}
.firedetail p:last-child{margin:0}
.firedetail a{color:var(--accent)}

/* ── What's on (weekend box, events page) and the island papers ─────────── */
.whatson{margin-top:0}
.evlist{list-style:none;margin:0;padding:0;font-size:.88rem}
.evlist .ev{display:grid;gap:.05rem;padding:.5rem 0;border-top:1px solid var(--hair)}
.evlist .ev:first-child{border-top:0;padding-top:0}
.evlist .when{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.evlist a,.evlist .ev > span:not(.when){color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
.evlist a:hover{color:var(--accent)}
.evlist small{color:var(--muted);font-size:.78rem;line-height:1.35}
.evlist .empty{display:block;color:var(--muted)}
.paperlist{list-style:none;margin:0;padding:0;font-size:.9rem}
.paperlist li{display:grid;gap:.1rem;padding:.55rem 0;border-top:1px solid var(--hair)}
.paperlist li:first-child{border-top:0;padding-top:0}
.paperlist .outlet{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.paperlist a{color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.3}
.paperlist a:hover{color:var(--accent)}
.paperlist small{color:var(--faint);font-size:.76rem}
.paperlist .empty{display:block;color:var(--muted)}
.papersbox > h2{margin-top:2.2rem}
.evfilter{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.4rem 0 .4rem}
.evcount{margin:.2rem 0 0;font-size:.84rem;color:var(--muted)}
.evday h2{margin:2rem 0 .7rem}
.evrows{list-style:none;margin:0;padding:0}
.evrows li{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.2rem 1rem;padding:.75rem 0;border-top:1px solid var(--hair)}
.evrows li:first-child{border-top:0;padding-top:.1rem}
.evrows .t{font-size:.84rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.15rem}
.evrows .what{display:grid;gap:.15rem;min-width:0}
.evrows b{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.3}
.evrows b a{color:var(--ink);text-decoration:none}
.evrows b a:hover{color:var(--accent);text-decoration:underline}
.evrows small{font-size:.84rem;color:var(--muted);line-height:1.4}
.evrows .runs{font-size:.8rem;font-weight:600;color:var(--accent)}
.evrows .via{font-size:.76rem;color:var(--faint)}
@media (max-width:30rem){.evrows li{grid-template-columns:minmax(0,1fr)}.evrows .t{padding:0}}

/* ── Share ───────────────────────────────────────────────────────────────── */
/* One button everywhere (story cards, articles, events, offers, pages). The
   menu is the computer's; a phone opens its own share sheet instead. */
.sharebtn{
  display:inline-flex;align-items:center;gap:.35rem;min-height:2rem;padding:.25rem .6rem;
  border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--muted);
  font:600 .74rem/1 var(--body);letter-spacing:.04em;text-transform:none;cursor:pointer;
}
.sharebtn svg{width:.95rem;height:.95rem;flex:none}
.sharebtn:hover,.sharebtn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
.sharebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sharebtn--icon{width:2rem;height:2rem;min-height:0;padding:0;justify-content:center}
.story .meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.story .meta .sharebtn{min-height:1.75rem;padding:.15rem .55rem}
#stories.view-compact .story .meta{flex-direction:column;align-items:flex-end;gap:.35rem}
@media (max-width:40rem){#stories.view-compact .story .meta{flex-direction:row;align-items:center}}
.sharemenu{
  position:absolute;z-index:60;display:flex;flex-direction:column;min-width:11rem;padding:.35rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.sharemenu a,.sharemenu button{
  display:block;width:100%;text-align:left;padding:.55rem .7rem;border:0;border-radius:6px;background:none;
  color:var(--ink);font:500 .9rem/1.2 var(--body);text-decoration:none;cursor:pointer;
}
.sharemenu a:hover,.sharemenu button:hover,.sharemenu :focus-visible{background:var(--accent-soft);color:var(--accent);outline:none}
article .meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.shareend{margin:2rem 0 1rem;padding-top:1.2rem;border-top:1px solid var(--hair)}
.shareend h2{margin:0 0 .6rem;font:700 .78rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.shareend h2::after{display:none}
.shareend__row{display:flex;flex-wrap:wrap;gap:.5rem}
.shareend__row a,.shareend__row button{
  display:inline-flex;align-items:center;min-height:2.5rem;padding:.4rem .95rem;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);color:var(--ink);font:600 .86rem/1 var(--body);text-decoration:none;cursor:pointer;
}
.shareend__row a:hover,.shareend__row button:hover{border-color:var(--accent);color:var(--accent)}
.pageshare{margin:-.25rem 0 1.4rem}
.coupons--board .coupon .sharebtn{position:absolute;top:.6rem;right:1.1rem}
.coupon.hit{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.evlist .ev{position:relative;padding-right:2.4rem}
.evlist .ev .sharebtn{position:absolute;right:0;top:.45rem;width:1.9rem;height:1.9rem}
.evlist .ev:first-child .sharebtn{top:0}
.evrows li{grid-template-columns:5.2rem minmax(0,1fr) auto}
.evrows li .sharebtn{align-self:start}

/* ── Developing stories ──────────────────────────────────────────────────── */
/* A thread is one card: its latest chapter, the earlier ones under it. */
.story .thread{margin-top:.8rem;padding:.65rem .8rem;border-left:3px solid var(--accent);background:var(--sunk);border-radius:0 8px 8px 0}
.story .thlbl{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent);text-decoration:none}
.story .thlbl:hover{text-decoration:underline}
.story .thread ul{list-style:none;margin:.4rem 0 0;padding:0}
.story .thread li{font-size:.9rem;line-height:1.35;padding:.2rem 0}
.story .thread li a{color:var(--ink);text-decoration:none;font-weight:500}
.story .thread li a:hover{color:var(--accent);text-decoration:underline}
.story .thread .when{color:var(--faint);font-size:.78rem;white-space:nowrap}
#stories.view-compact .story .thread{grid-column:2;grid-row:4;margin-top:.35rem;padding:.35rem .6rem}
#stories.view-compact .story .thread ul{display:none}
@media (max-width:40rem){#stories.view-compact .story .thread{grid-row:5}}
.threadline{margin:.9rem 0 0;font-size:.84rem;font-weight:600;color:var(--accent)}
.threadline a{color:var(--accent)}
.box.thread ol{list-style:none;padding:0;margin:0;border-left:2px solid var(--rule)}
.box.thread li{position:relative;padding:0 0 .7rem 1rem;margin:0}
.box.thread li::before{content:"";position:absolute;left:-.4rem;top:.4rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--rule)}
.box.thread li[aria-current]::before{background:var(--accent)}
.box.thread .when{display:block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--faint)}
.box.thread .here{font-size:.74rem;font-weight:600;color:var(--accent);white-space:nowrap}

/* ── Send us a story: photo first ────────────────────────────────────────── */
.photopick{display:grid;gap:.55rem}
.photoadd{
  display:flex;align-items:center;gap:.8rem;padding:.85rem .9rem;border:1.5px dashed color-mix(in srgb,var(--accent) 55%,var(--rule));
  border-radius:12px;background:var(--surface);color:var(--ink);cursor:pointer;line-height:1.3;
}
.photoadd svg{width:2rem;height:2rem;flex:none;color:var(--accent)}
.photoadd b{display:block;font-size:.98rem;font-weight:700}
.photoadd small{display:block;font-size:.8rem;color:var(--muted)}
.photoadd:hover{border-color:var(--accent);background:var(--accent-soft)}
.photopick:has(input:focus-visible) .photoadd{outline:2px solid var(--accent);outline-offset:2px}
.photoadd.full{pointer-events:none;opacity:.6}
.thumbs{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;flex-wrap:wrap}
.thumbs:empty{display:none}
.thumbs li{position:relative;width:5.2rem;height:5.2rem;margin:0;padding:0}
.thumbs li::before{display:none}
.thumbs img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
#tip .thumbs button{
  position:absolute;top:-.4rem;right:-.4rem;width:1.7rem;height:1.7rem;min-height:0;padding:0;border-radius:50%;
  border:2px solid var(--bg);background:var(--ink);color:var(--bg);font-size:1rem;line-height:1;display:grid;place-items:center;
}
.tipmore summary{cursor:pointer;font-size:.84rem;font-weight:600;color:var(--accent)}
.tipmore summary span{font-weight:500;color:var(--faint)}
.tipmore[open] summary{margin-bottom:.5rem}
.tipmore .tl{display:block;margin-bottom:.35rem}
.consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.84rem;line-height:1.4;color:var(--ink)}
.consent[hidden]{display:none}
#tip .consent input{margin:.2rem 0 0;padding:0;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--accent)}

/* A reader report on its own page: who sent it, and that it is theirs. */
.kicker{margin:0 0 .4rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.box.reader p{margin:0;font-family:var(--body);font-size:.95rem;line-height:1.5}
article figure{margin:1.6rem 0;max-width:var(--read)}
article figure img{width:100%;height:auto;border-radius:10px;display:block}
article figure figcaption{margin-top:.4rem;font-size:.78rem;color:var(--faint)}
.linkish{font:inherit;color:var(--accent);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* ── Just added + New badges ─────────────────────────────────────────────── */
.justadded{margin:0 0 1.6rem;padding:1rem 1.1rem 1.05rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.justadded[hidden]{display:none}
.justadded h2{margin:0 0 .15rem}
.jasub{margin:0 0 .7rem;font-size:.84rem;color:var(--muted)}
.jalist{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.jalist li{margin:0;padding:.5rem 0;border-top:1px solid var(--hair);line-height:1.3}
.jalist li::before{display:none}
.jalist li:first-child{border-top:0;padding-top:.1rem}
.jalist li[hidden]{display:none}
.jalist a{color:var(--ink);text-decoration:none;font-weight:600;font-family:var(--display);font-size:1.02rem}
.jalist a:hover{color:var(--accent);text-decoration:underline}
.jalist small{display:block;margin-top:.15rem;font-size:.78rem;color:var(--muted)}
.jamore{margin-top:.55rem;font:600 .84rem/1 var(--body);color:var(--accent);background:none;border:0;padding:.3rem 0;cursor:pointer}
.jamore:hover{text-decoration:underline}
.newtag{display:inline-block;margin-right:.45rem;padding:.12rem .42rem;border-radius:999px;background:var(--accent);color:var(--paper);
  font:700 .62rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;vertical-align:.12em}

/* ── Phones (2026-09-27) ──────────────────────────────────────────────────
   Philip: "the mobile view needs work". On a 375px screen the masthead took a
   quarter of the first screen, "Just added" the rest of it, and every story
   without a photo wore a full-width drawing of its county body, so each one
   filled a whole screen. Below 40rem: a tighter masthead; a drawing becomes a
   small square beside the headline (a photograph keeps its full width); and
   a floating button reaches the story form, which
   on a phone is otherwise a card halfway down the feed. */
.fab{display:none}
@media (max-width:40rem){
  header{padding-top:1.15rem;margin-bottom:1.1rem}
  .themetoggle{top:1.05rem}
  .brand{gap:.1rem}
  .nameplate{gap:.05rem}
  .brand h1,.brand .np{font-size:2.15rem}
  .dateline{font-size:.6rem;letter-spacing:.12em}
  .brand span{font-size:.58rem;letter-spacing:.16em}

  #stories.view-grid .story:has(> .shot.is-mark){
    display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:0 .9rem;align-items:start;
  }
  #stories.view-grid .story > .shot.is-mark{margin:.2rem 0 0;border-radius:14%}
  #stories.view-grid .story > .shot.is-mark .wdm{display:none}
  #stories.view-grid .story > .shot.is-mark .sqm{display:block}
  #stories.view-grid .story:has(> .shot.is-mark) > .txt{grid-column:2}
  #stories.view-grid .story:not(:first-child) a.t{font-size:1.12rem;line-height:1.25}
  #stories.view-grid .story:not(:first-child) .dek{font-size:.95rem;line-height:1.45}
  .story{padding:1.05rem 0}

  .justadded{padding:.85rem .95rem .9rem;margin-bottom:1.3rem}
  .jalist a{font-size:.98rem}
  .jasub{font-size:.8rem;margin-bottom:.5rem}

  .chiprow{scrollbar-width:none}
  .chiprow::-webkit-scrollbar{display:none}

  .fab{
    position:fixed;z-index:25;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));
    display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.05rem .7rem .9rem;
    border:0;border-radius:999px;background:var(--accent);color:var(--paper);
    font:700 .92rem/1 var(--body);box-shadow:0 6px 20px rgba(0,0,0,.28);cursor:pointer;
  }
  .fab svg{width:1.3rem;height:1.3rem;flex:none}
  .fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
  html.sheet-open .fab{display:none}
  body{padding-bottom:4.5rem}
}
.pl-near{color:var(--accent)}
.pl-near[disabled]{opacity:.7}
@media (max-width:40rem){
  .pl-near .nl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #stories > .justadded{grid-column:1/-1;margin:1rem 0 .4rem}
}
@media (max-width:40rem){
  /* The row scrolls to keep the chosen place in view; Near me stays pinned
     at its left edge so it is never scrolled away. */
  .pl-near{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:-.6rem 0 0 var(--surface),6px 0 8px -4px var(--surface)}
}

/* ── Send us a story: two steps (09-27) ─────────────────────────────────── */
.tstep{display:grid;gap:.75rem}
.tstep[hidden]{display:none}
.stepno{margin:0;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.stepno span{color:var(--faint);letter-spacing:.04em;text-transform:none;font-weight:600}
.credit{border:0;margin:0;padding:0;display:grid;gap:.5rem}
.credit legend{padding:0;margin-bottom:.5rem}
.opt{display:flex;gap:.65rem;align-items:flex-start;padding:.65rem .75rem;border:1px solid var(--rule);border-radius:10px;background:var(--surface);cursor:pointer}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
#tip .opt input{width:1.05rem;height:1.05rem;margin:.2rem 0 0;padding:0;flex:none;accent-color:var(--accent)}
.opt b{display:block;font-size:.92rem}
.opt small{display:block;font-size:.8rem;color:var(--muted);line-height:1.35}
#tipnamewrap{display:grid;gap:.75rem}
#tipnamewrap[hidden]{display:none}
.tipactions{display:flex;gap:.6rem}
.tipactions [hidden]{display:none}
#tip .tipback{background:var(--surface);color:var(--ink);border:1px solid var(--rule)}

/* A public Facebook post in a reader report: a placeholder until tapped. */
.embed{margin:1.6rem 0;max-width:var(--read)}
.embedph{display:grid;gap:.3rem;justify-items:start;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.embedph b{font-family:var(--body);font-size:.95rem}
.embedph span{font-size:.84rem;color:var(--muted)}
.embedph button{margin-top:.4rem;font:600 .88rem/1 var(--body);padding:.6rem 1rem;border:0;border-radius:999px;background:var(--accent);color:var(--paper);cursor:pointer}
.embedph button[disabled]{opacity:.7}
.embedph small{font-size:.74rem;color:var(--faint)}
.embed .fb-post{max-width:100%;overflow-x:auto;border-radius:12px;background:#fff}
.embed figcaption{margin-top:.45rem;font-size:.8rem}