/* The Bruce/Grey Brief — main stylesheet.
   Lifted verbatim from sketch 004 (sketches/004-broadsheet-hybrid/index.html).
   --paper is the LOCKED value #f6f1e4 (Scott's pick, 2026-09-07);
   sticky-nav background rgba(246,241,228,.92) is the matched cream.
   System serif (Georgia) + system sans only — no web fonts, no CDN. */

:root{
  --paper:#f6f1e4;          /* 001 classic paper cream (Scott's pick, 2026-09-07) — LOCKED */
  --ink:#17171a;
  --muted:#6b6a68;
  --rule:#c9c0ad;
  --hair:#e2ddd2;
  --accent:#0f5b4e;         /* deep Georgian-Bay pine */
  --accent-soft:#e8f1ee;
  --gold:#916310;           /* Phase 6 a11y: darkened from #b07a1e so gold TEXT on
                               cream clears WCAG AA (was 3.30:1 → 4.66:1) AND white
                               on the .k.brief pill clears AA (was 3.72:1 → 5.26:1).
                               Minimal hue-preserving shift; DESIGNER: review/revert. */
  --serif:Georgia,"Iowan Old Style",Charter,"Times New Roman","Liberation Serif",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  background-image:radial-gradient(rgba(120,110,90,.05) 1px,transparent 1px);
  background-size:4px 4px;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---- Top strip ---- */
.topstrip{
  font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--hair);
}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:6px;padding-bottom:6px}
.topstrip .alert{color:var(--gold);font-weight:700}
.topstrip .weather b{color:var(--ink)}

/* ---- Masthead ---- */
.masthead{text-align:center;padding:20px 0 10px;border-bottom:3px double var(--ink)}
.masthead .kicker{font-family:var(--sans);font-size:11px;letter-spacing:.30em;text-transform:uppercase;color:var(--accent);font-weight:600}
.masthead h1{
  font-size:clamp(42px,8vw,86px);line-height:.94;letter-spacing:-.02em;font-weight:700;
  margin:8px 0 8px;
}
.masthead .dateline{
  font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:7px 0;margin-top:6px;
}
.masthead .dateline .sep{color:var(--rule)}

/* ---- Nav ---- */
nav.sections{border-bottom:1px solid var(--ink);position:sticky;top:0;z-index:40;background:rgba(246,241,228,.92);backdrop-filter:saturate(1.3) blur(6px)}
nav.sections .wrap{display:flex;gap:0;flex-wrap:wrap;justify-content:center}
nav.sections a{
  font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 16px;color:var(--muted);border-right:1px solid var(--hair);
}
nav.sections a:first-child{border-left:1px solid var(--hair)}
nav.sections a:hover{color:var(--accent);background:var(--accent-soft)}

/* ---- Lead (with hero photo slot) ---- */
.lead{display:grid;grid-template-columns:1.9fr 1fr;gap:0;border-bottom:2px solid var(--ink);}
.lead .main{padding:26px 28px 26px 0;border-right:1px solid var(--rule)}
.lead .flag{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:700}
.lead h2{font-size:clamp(30px,4.6vw,50px);line-height:1.04;margin:8px 0 14px;letter-spacing:-.015em}
.lead h2 a:hover{color:var(--accent)}

/* hero photo slot with graceful fallback */
.hero-slot{position:relative;aspect-ratio:16/9;margin:0 0 14px;overflow:hidden;border:1px solid var(--rule);background:var(--accent-soft)}
.hero-slot img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slot .fallback{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0f5b4e,#1c7d6b 55%,#2f9c86);
}
.hero-slot .fallback::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 12%,rgba(255,255,255,.30),transparent 55%)}
.hero-slot .cap{
  position:absolute;left:0;right:0;bottom:0;padding:9px 14px;
  font-family:var(--sans);font-size:11px;letter-spacing:.10em;text-transform:uppercase;font-weight:600;
  color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
}
.hero-slot .cap .credit{color:rgba(255,255,255,.72);font-weight:400;letter-spacing:.04em;text-transform:none}
.lead .teaser{font-size:19px;color:#39352d;max-width:52ch}
.lead .byline{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:14px;letter-spacing:.03em}
.lead .cta{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:2px}
.lead .cta:hover{background:var(--accent);color:var(--paper);padding:2px 6px;border:0}
.lead .aside{padding:26px 0 26px 26px}
.lead .aside h3{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink);padding-bottom:5px;margin-bottom:10px}
.lead .aside ul{list-style:none}
.lead .aside li{padding:9px 0;border-bottom:1px dotted var(--rule);font-size:16px}
.lead .aside li:last-child{border-bottom:0}
.lead .aside li a:hover{color:var(--accent)}
.lead .aside .tag{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block}

/* ---- Section head ---- */
.sechead{display:flex;align-items:baseline;gap:14px;margin:34px 0 4px;border-bottom:2px solid var(--ink);padding-bottom:6px}
.sechead h2{font-size:26px;letter-spacing:-.01em}
.sechead .sub{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- Across the counties grid ---- */
.counties{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:2px solid var(--ink)}
.counties .col{padding:16px 18px;border-right:1px solid var(--rule)}
.counties .col:last-child{border-right:0}
.counties .label{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.counties h3{font-size:19px;line-height:1.14;margin-bottom:6px}
.counties h3 a:hover{color:var(--accent)}
.counties .meta{font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.03em}
.counties .dek{font-size:15px;color:#39352d;margin-top:8px}
.counties .col + .col .item + .item{margin-top:14px}
.counties .item + .item{margin-top:14px;padding-top:14px;border-top:1px dotted var(--rule)}

/* ---- Two-column zone ---- */
.zone{display:grid;grid-template-columns:1.35fr 1fr;gap:0;border-bottom:2px solid var(--ink)}
.zone .left{border-right:1px solid var(--rule);padding-right:26px}
.zone .right{padding-left:26px}

/* ---- Week at a glance: day tabs + type filter (the hybrid control) ---- */
.week{padding:16px 0 22px}
.week .controls{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}
.week .daytabs{display:flex;gap:0;border:1px solid var(--ink);flex-wrap:wrap}
.week .daytabs button{
  flex:1;min-width:64px;font-family:var(--sans);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  background:transparent;border:0;border-right:1px solid var(--hair);padding:9px 6px;cursor:pointer;color:var(--muted)
}
.week .daytabs button:last-child{border-right:0}
.week .daytabs button.active{background:var(--ink);color:var(--paper)}
.week .daytabs button:hover:not(.active){background:rgba(23,23,26,.06);color:var(--ink)}
.week .typefilter{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.week .typefilter .flabel{font-family:var(--sans);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.week .typefilter button{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);background:var(--paper);border:1px solid var(--rule);padding:5px 12px;cursor:pointer;transition:.15s;border-radius:999px
}
.week .typefilter button:hover:not(.active){border-color:var(--accent);color:var(--accent)}
.week .typefilter button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.week .count{font-family:var(--sans);font-size:11px;color:var(--muted);margin-left:auto;letter-spacing:.03em}

.week .daypanel{min-height:132px}
.week .daypanel h3{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.week .evt{padding:9px 0;border-bottom:1px dotted var(--rule);display:flex;gap:12px;align-items:baseline}
.week .evt:last-child{border-bottom:0}
.week .evt .k{font-family:var(--sans);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;min-width:74px;color:#fff;padding:2px 7px;text-align:center}
.week .evt .k.brief{background:var(--gold)}
.week .evt .k.meeting{background:var(--accent)}
.week .evt .k.filing{background:var(--muted)}
.week .evt .k.event{background:#8a6a16}
.week .evt .k.recap{background:var(--ink)}
.week .evt .t{font-size:16px}
.week .evt .t a:hover{color:var(--accent)}
.week .evt .when{font-family:var(--sans);font-size:11px;color:var(--muted);margin-left:6px}
.week .empty{font-style:italic;color:var(--muted);padding:14px 0}

/* ---- Events (expandable rows) ---- */
.events .row{display:flex;gap:16px;padding:12px 0;border-bottom:1px dotted var(--rule);align-items:baseline;cursor:pointer;transition:.15s}
.events .row:last-of-type{border-bottom:0}
.events .row:hover{padding-left:6px}
.events .date{font-family:var(--sans);text-align:center;min-width:52px}
.events .date .d{font-size:24px;font-weight:700;line-height:1}
.events .date .m{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.events .body{flex:1}
.events .body h4{font-size:17px}
.events .body .where{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:2px}
.events .body .extra{font-family:var(--sans);font-size:13px;color:#4a463d;margin-top:9px;line-height:1.5;display:none}
.events .row.open .body .extra{display:block}
.events .chev{font-family:var(--sans);font-size:15px;color:var(--muted);align-self:center;min-width:16px;text-align:center;background:transparent;border:0;padding:0 4px;cursor:pointer;line-height:1}
button.chev{font-size:18px}
.events .row:hover .chev,.events .chev:hover{color:var(--accent)}
.events .ical{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--rule);padding:6px 12px;cursor:pointer}
.events .ical:hover{border-color:var(--accent);color:var(--accent)}
.events .icalrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.events .ical.webcal{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.events .ical.webcal:hover{opacity:.88;color:var(--paper)}

/* ---- Obituaries ---- */
.obits h3 a:hover{color:var(--accent)}
.obits .ob{padding:11px 0;border-bottom:1px dotted var(--rule)}
.obits .ob:last-child{border-bottom:0}
.obits .ob .name{font-size:18px}
.obits .ob .name a:hover{color:var(--accent)}
.obits .ob .det{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:2px}
.obits .src{font-family:var(--sans);font-size:11px;color:var(--muted);font-style:italic;margin-top:12px}

/* ---- Archive ---- */
.archive{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin-top:34px;padding:16px 0}
.archive ul{list-style:none;columns:2;column-gap:40px}
.archive li{padding:7px 0;border-bottom:1px dotted var(--rule);break-inside:avoid;font-size:16px}
.archive li a:hover{color:var(--accent)}
.archive .day{font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);min-width:66px;display:inline-block}

/* ---- Newsletter ---- */
.news{text-align:center;padding:34px 0;border-bottom:2px solid var(--ink)}
.news .kick{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.news h2{font-size:clamp(26px,4vw,40px);max-width:22ch;margin:10px auto 8px;line-height:1.08}
.news p{color:var(--muted);max-width:52ch;margin:0 auto 16px;font-size:17px}
.news form{display:inline-flex;gap:0;border:1px solid var(--ink)}
.news input{font-family:var(--sans);font-size:14px;border:0;padding:11px 14px;background:transparent;min-width:min(64vw,300px);color:var(--ink)}
.news input::placeholder{color:var(--muted)}
.news button{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;padding:11px 20px;cursor:pointer}
.news button:hover{background:var(--accent)}
.news .fine{font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:10px}

footer{text-align:center;padding:26px 0 40px;font-family:var(--sans);font-size:12px;color:var(--muted)}
footer .rule{width:60px;height:2px;background:var(--ink);margin:0 auto 16px}
footer a:hover{color:var(--accent)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13px;padding:11px 20px;letter-spacing:.03em;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:820px){
  .lead,.zone{grid-template-columns:1fr}
  .lead .main{border-right:0;border-bottom:1px solid var(--rule);padding:22px 0}
  .lead .aside{padding:22px 0}
  .zone .left{border-right:0;border-bottom:1px solid var(--rule);padding:0 0 20px}
  .zone .right{padding:20px 0 0}
  .counties{grid-template-columns:1fr 1fr}
  .counties .col:nth-child(2){border-right:0}
  .counties .col{border-bottom:1px solid var(--rule)}
  .archive ul{columns:1}
}
@media(max-width:520px){.counties{grid-template-columns:1fr}.counties .col{border-right:0}}

/* Accessibility: honour reduced-motion for all Phase-3 transitions (FEASIBILITY §6 a11y).
   The toast, type-filter pills, and expandable event rows all animate; disable that. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   PHASE 6 — Accessibility, no-JS, print polish.
   Additive only; nothing above this line changed except the --gold token.
   ========================================================================= */

/* ---- Visible focus (keyboard) ----------------------------------------------
   One consistent pine focus ring on every interactive element. :focus-visible
   so mouse clicks don't draw a ring but keyboard/AT users always get one. The
   fallback :focus (no -visible) block below covers older engines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[role="radio"]:focus-visible,
.events .row:focus-visible,
.lead .cta:focus-visible,
.events .ical:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Sticky nav links sit on a busy hairline grid — give the ring a paper backing
   so it reads clearly, and pull it inside so it isn't clipped by the bar edge. */
nav.sections a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  background: var(--accent-soft);
  color: var(--accent);
}
/* Newsletter input already carries its own border; make the focus obvious. */
.news input:focus-visible { outline: 3px solid var(--accent); outline-offset: -1px; }
/* Event rows are role=button; the ring hugs the row without shifting layout. */
.events .row:focus-visible { outline-offset: -2px; }
/* Legacy fallback for engines without :focus-visible — never remove focus. */
a:focus, button:focus, input:focus, [role="radio"]:focus, .events .row:focus {
  outline: 2px solid var(--accent);
}
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  [role="radio"]:focus:not(:focus-visible),
  .events .row:focus:not(:focus-visible) { outline: none; }
}

/* ---- No-JS graceful paths --------------------------------------------------
   <html> ships with class="no-js"; the head swaps it to "js" the instant the
   script runs. So these rules apply ONLY when JS is unavailable/blocked. A
   <noscript> block in <head> also reveals .extra as belt-and-suspenders. */
.no-js .week .controls { display: none; }      /* dead filter buttons → hide; all rows show anyway */
.no-js .events .body .extra { display: block; } /* reveal detail that JS would gate */
.no-js .events .chev { display: none; }          /* no toggle affordance without JS */
.no-js .events .row { cursor: default; }
/* When JS IS present the chevron is a live control — keep it out of the a11y
   tree (state is on aria-expanded) and stop text-selection on double-tap. */
.events .chev { user-select: none; }

/* Screen-reader-only helper (available for future visually-hidden labels). */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Print ----------------------------------------------------------------
   Cheap readable paper: drop the sticky nav, interactive controls, toast and
   the (inert) newsletter form; flatten grids to single column; black on white,
   reveal all hidden detail so a printout is complete. */
@media print {
  :root { --paper:#fff; --ink:#000; }
  body { background: #fff; background-image: none; color: #000; }
  nav.sections, .topstrip, .toast, .week .controls,
  .news form, .events .icalrow { display: none !important; }
  .lead, .zone, .counties { grid-template-columns: 1fr !important; }
  .lead .main, .zone .left { border-right: 0 !important; }
  .events .body .extra { display: block !important; }
  .events .chev { display: none !important; }
  a { color: #000 !important; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color:#333; }
  .hero-slot { break-inside: avoid; }
  section, .zone, .counties { break-inside: avoid-page; }
}