/* ============================================================================
   Broadsheet — dense multi-column news layout
   ----------------------------------------------------------------------------
   A layer ON TOP of civic.css.

   Why this is built on CSS columns rather than cards:
   a printed newspaper has no blank space because body copy FLOWS — it fills
   each column edge to edge and images sit inside the flow. A card grid cannot
   do that: every card is a fixed box whose leftover height becomes a gap, and
   short excerpts leave most of each box empty. Earlier passes here failed for
   exactly that reason. So the page sets long-form text in `columns` with a
   `column-rule` between them, floats plates into the flow, and justifies with
   hyphenation so lines reach both margins.

   Photographs are NOT desaturated: these are pictures of real council sessions
   and real people, and recolouring a news photograph is an editorial act.
   ========================================================================= */

:root{
  --ed-stock:#f7f4ec;
  --ed-ink:#141310;
  --ed-ink-soft:#43403a;
  --ed-rule:#16150f;
  --ed-hair:#c9c2b0;
  --ed-accent:#7a1f1f;
  --ed-link:#1f3e23;

  --ed-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
               Georgia,"Times New Roman",serif;
  --ed-body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --ed-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.ed{
  margin:0;background:var(--ed-stock);color:var(--ed-ink);
  font-family:var(--ed-body);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.ed *,.ed *::before,.ed *::after{box-sizing:border-box;}
.ed a{color:var(--ed-link);}
.ed a:focus-visible{outline:3px solid var(--ed-accent);outline-offset:2px;}
.ed img{max-width:100%;display:block;}

.ed-wrap{max-width:74rem;margin:0 auto;padding:0 1rem;}

/* -- masthead: boxed, like the reference plate --------------------------- */
.ed-mast{border-bottom:4px solid var(--ed-rule);margin-bottom:.85rem;}
.ed-mast-in{
  display:grid;grid-template-columns:1fr;gap:.4rem;
  padding:.85rem 0 .7rem;
}
@media (min-width:46rem){
  .ed-mast-in{grid-template-columns:auto 1fr auto;align-items:end;gap:1.25rem;}
}
.ed-mast-label{
  font-family:var(--ed-sans);font-size:.625rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ed-ink-soft);
  border:1px solid var(--ed-rule);padding:.2rem .45rem;justify-self:start;
}
.ed-brand{
  font-family:var(--ed-display);font-weight:700;
  font-size:clamp(1.7rem,1rem + 2.6vw,3rem);
  line-height:.95;letter-spacing:-.022em;text-transform:uppercase;
  margin:0;text-align:left;
}
@media (min-width:46rem){ .ed-brand{text-align:center;} }
.ed-brand a{color:var(--ed-ink);text-decoration:none;}
.ed-brand a:hover{text-decoration:underline;text-underline-offset:4px;}
.ed-mast-meta{
  font-family:var(--ed-sans);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ed-ink-soft);text-align:left;
  line-height:1.7;
}
@media (min-width:46rem){ .ed-mast-meta{text-align:right;} }
.ed-mast-rule{border-top:1px solid var(--ed-rule);margin-bottom:1rem;}

/* -- shared furniture ----------------------------------------------------- */
.ed-kicker{
  font-family:var(--ed-sans);font-size:.625rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ed-accent);
  margin:0 0 .2rem;
}
.ed-byline{
  font-family:var(--ed-sans);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ed-ink-soft);
  margin:.15rem 0 .5rem;font-variant-numeric:tabular-nums;
}
.ed-more{font-family:var(--ed-sans);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;font-weight:700;white-space:nowrap;}

/* -- story columns -------------------------------------------------------- */
.ed-secthead{
  font-family:var(--ed-sans);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;border-top:3px solid var(--ed-rule);
  border-bottom:1px solid var(--ed-rule);padding:.3rem 0;margin:0 0 .8rem;
}
/* One continuous multi-column river of stories; each story avoids breaking. */
.ed-river{
  columns:1;column-gap:1.6rem;column-rule:1px solid var(--ed-hair);
  padding-bottom:1.2rem;
}
@media (min-width:34rem){ .ed-river{columns:2;} }
@media (min-width:52rem){ .ed-river{columns:3;} }
@media (min-width:70rem){ .ed-river{columns:4;} }
.ed-item{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  padding:0 0 .7rem;margin:0 0 .7rem;border-bottom:1px solid var(--ed-hair);
}
.ed-item:last-child{border-bottom:0;}
.ed-hed{
  font-family:var(--ed-display);font-weight:700;font-size:1.08rem;
  line-height:1.16;letter-spacing:-.004em;margin:0 0 .25rem;
}
.ed-hed a{color:var(--ed-ink);text-decoration:none;}
.ed-hed a:hover{text-decoration:underline;text-underline-offset:2px;}
.ed-item p.ed-text{
  margin:0 0 .4rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  font-size:.9375rem;line-height:1.5;color:var(--ed-ink);
}
.ed-item .ed-cut{margin-bottom:.4rem;}

/* -- notices / colophon --------------------------------------------------- */
.ed-notice{
  border:1px solid var(--ed-rule);border-left:5px solid var(--ed-accent);
  padding:.75rem .9rem;margin:.9rem 0;font-family:var(--ed-sans);font-size:.875rem;
}
.ed-notice h2{font-family:var(--ed-display);font-size:1rem;margin:0 0 .25rem;color:var(--ed-accent);}
.ed-notice p{margin:0 0 .3rem;} .ed-notice p:last-child{margin-bottom:0;}

.ed-colophon{
  border-top:3px double var(--ed-rule);padding:.9rem 0 2rem;
  font-family:var(--ed-sans);font-size:.8125rem;color:var(--ed-ink-soft);
  columns:2;column-gap:1.6rem;
}
@media (max-width:46rem){ .ed-colophon{columns:1;} }
.ed-colophon section{break-inside:avoid;margin:0 0 .7rem;}
.ed-colophon h2{font-family:var(--ed-display);font-size:1.05rem;margin:0 0 .2rem;color:var(--ed-ink);}
.ed-colophon p{margin:0;}

.ed-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.ed-skip{position:absolute;left:-9999px;top:0;background:var(--ed-stock);color:var(--ed-ink);padding:.75rem 1rem;z-index:50;}
.ed-skip:focus{left:.5rem;top:.5rem;}

@media (prefers-reduced-motion:reduce){ .ed *{animation:none!important;transition:none!important;} }
@media print{
  .ed{background:#fff;font-size:10pt;}
  .ed-more{display:none;}
  .ed-river{columns:3;}
}

/* -- inverted band -------------------------------------------------------- */
/* The reference alternates ivory spreads with black ones. One inverted band
   gives the page that contrast without turning the whole thing dark, which
   would hurt long-form reading. Ink and stock simply swap, so every rule,
   caption and hairline inverts with them and contrast stays far above AA. */
.ed-invert{
  background:var(--ed-rule);
  color:var(--ed-stock);
  margin:1.4rem 0;
  padding:1.15rem 0 1.3rem;
}
.ed-invert .ed-secthead{
  color:var(--ed-stock);
  border-top-color:var(--ed-stock);
  border-bottom-color:#6d6758;
}
.ed-invert .ed-river{column-rule-color:#4a453a;}
.ed-invert .ed-item{border-bottom-color:#3a362d;}
.ed-invert .ed-hed a{color:var(--ed-stock);}
.ed-invert .ed-item p.ed-text{color:#ded8c8;}
.ed-invert .ed-kicker{color:#e2a3a3;}
.ed-invert .ed-byline{color:#a9a293;}
.ed-invert .ed-cut img{border-color:#4a453a;}
.ed-invert .ed-cut figcaption{color:#a9a293;border-top-color:#4a453a;}
.ed-invert a{color:#e8e2d2;}
.ed-invert .ed-more a{color:#f7f4ec;}
.ed-invert a:focus-visible{outline-color:#e2a3a3;}
@media print{ .ed-invert{background:#fff;color:#000;} .ed-invert .ed-hed a{color:#000;} }

/* -- hero slider ---------------------------------------------------------- */
/* The lead used to be a plate floated into a multi-column flow. At tablet
   widths the float collapsed to a narrow vertical strip beside a ~130px text
   column, which hyphenated badly ("capita-tion") and left the rest of the row
   empty. A hero needs ONE full-width picture and a headline over it, so the
   lead is now a slider: big plate, large headline, one story at a time.
   Autoplay is a convenience, never the only way through — arrows, dots,
   keyboard and a pause control all work, and prefers-reduced-motion disables
   both the animation and the automatic advance. */
.ed-hero{position:relative;margin:0 0 1.1rem;background:var(--ed-rule);overflow:hidden;}
.ed-slides{position:relative;}
.ed-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .55s ease;
}
.ed-slide.is-on{position:relative;opacity:1;visibility:visible;}
.ed-slide-fig{margin:0;aspect-ratio:16/9;background:#26241c;}
@media (max-width:44rem){ .ed-slide-fig{aspect-ratio:4/3;} }
.ed-slide-fig img{width:100%;height:100%;object-fit:cover;}
.ed-slide-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.6rem 1.15rem 1.1rem;
  background:linear-gradient(to top,rgba(10,9,6,.94) 12%,rgba(10,9,6,.78) 46%,rgba(10,9,6,0) 100%);
  color:#f7f4ec;
}
.ed-slide-hed{
  font-family:var(--ed-display);font-weight:700;
  font-size:clamp(1.3rem,.85rem + 2.1vw,2.5rem);
  line-height:1.09;letter-spacing:-.016em;margin:0 0 .35rem;max-width:34ch;
}
.ed-slide-hed a{color:#fff;text-decoration:none;}
.ed-slide-hed a:hover{text-decoration:underline;text-underline-offset:4px;}
.ed-slide-sum{
  margin:0 0 .45rem;color:#e5dfd0;font-size:.9375rem;line-height:1.45;
  max-width:62ch;
}
@media (max-width:34rem){ .ed-slide-sum{display:none;} }
.ed-slide-cap .ed-kicker{color:#f0b0b0;}
.ed-slide-cap .ed-byline{color:#c8c1b0;}
.ed-slide-cap .ed-more a{color:#fff;}

.ed-hero-ctl{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .6rem;background:var(--ed-rule);border-top:1px solid #3a362d;
}
.ed-hero-btn{
  font:inherit;font-family:var(--ed-sans);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:#f7f4ec;border:1px solid #5b5548;
  padding:.4rem .6rem;cursor:pointer;min-height:32px;
}
.ed-hero-btn:hover{background:#2a2721;}
.ed-hero-btn:focus-visible{outline:3px solid #e2a3a3;outline-offset:2px;}
.ed-dots{display:flex;gap:.35rem;margin-left:auto;}
.ed-dot{
  width:26px;height:32px;padding:0;background:transparent;border:0;cursor:pointer;
  display:grid;place-items:center;
}
.ed-dot::before{content:"";width:100%;height:3px;background:#5b5548;}
.ed-dot[aria-current="true"]::before{background:#f7f4ec;}
.ed-dot:focus-visible{outline:3px solid #e2a3a3;outline-offset:-2px;}

@media (prefers-reduced-motion:reduce){ .ed-slide{transition:none;} }
@media print{ .ed-hero-ctl{display:none;} .ed-slide{position:relative!important;opacity:1!important;visibility:visible!important;} }

/* -- hero overlay navigation --------------------------------------------- */
/* Arrows sit ON the picture, as on pagkaron, rather than in a bar underneath:
   at a glance the picture then reads as something you can move through. They
   are 48px (above the 44px touch minimum) and carry their own dark disc so
   they stay legible over any photograph, light or dark. The control bar below
   keeps Pause and the dots — overlaying those too would crowd the image. */
.ed-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(10,9,6,.62);border:1px solid rgba(247,244,236,.5);
  color:#fff;font:inherit;font-size:1.35rem;line-height:1;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.ed-nav:hover{background:rgba(10,9,6,.85);}
.ed-nav:focus-visible{outline:3px solid #f0b0b0;outline-offset:3px;}
.ed-nav-prev{left:.7rem;}
.ed-nav-next{right:.7rem;}
@media (max-width:34rem){ .ed-nav{width:44px;height:44px;font-size:1.15rem;} }

/* Slide counter, bottom-right of the picture. */
.ed-count{
  position:absolute;right:.7rem;bottom:.7rem;z-index:3;
  background:rgba(10,9,6,.72);color:#f7f4ec;
  font-family:var(--ed-sans);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .6rem;border:1px solid rgba(247,244,236,.28);
  font-variant-numeric:tabular-nums;
}

/* -- site navigation ------------------------------------------------------ */
/* The news page previously had no route back into the archive except the
   colophon at the very bottom. */
.ed-nav-bar{border-bottom:1px solid var(--ed-rule);}
.ed-nav-list{
  display:flex;flex-wrap:wrap;gap:0 1.25rem;list-style:none;margin:0;padding:.5rem 0;
  font-family:var(--ed-sans);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.ed-nav-list a{color:var(--ed-ink);text-decoration:none;padding:.25rem 0;display:inline-block;}
.ed-nav-list a:hover{text-decoration:underline;text-underline-offset:4px;}
.ed-nav-list a[aria-current="page"]{border-bottom:3px solid var(--ed-accent);}
.ed-nav-list .is-out a{color:var(--ed-accent);}

/* The slide picture opens the story for mouse users. The headline remains the
   single keyboard/screen-reader link so the same story is not announced twice,
   which is why this anchor is aria-hidden and out of the tab order. */
.ed-slide-link{display:block;width:100%;height:100%;cursor:pointer;}
.ed-slide-link img{transition:transform .5s ease;}
.ed-slide:hover .ed-slide-link img{transform:scale(1.02);}
@media (prefers-reduced-motion:reduce){ .ed-slide-link img{transition:none;} .ed-slide:hover .ed-slide-link img{transform:none;} }

/* -- stage: hero + top-stories rail --------------------------------------- */
/* The slider alone left the right third of the row empty on wide screens.
   A rail of compact story links fills it and gives a reader more than one way
   in — the same shape pagkaron uses. Below 62rem the rail stacks under the
   hero rather than squeezing both. */
.ed-stage{display:grid;grid-template-columns:1fr;gap:1rem;margin:0 0 1.1rem;}
@media (min-width:62rem){ .ed-stage{grid-template-columns:minmax(0,1fr) 272px;gap:1.05rem;} }
@media (min-width:86rem){ .ed-stage{grid-template-columns:minmax(0,1fr) 300px;} }
.ed-stage .ed-hero{margin:0;}

.ed-aside{display:flex;flex-direction:column;gap:.9rem;min-width:0;}
.ed-panel{border:1px solid var(--ed-rule);background:#fffdf7;}
.ed-panel-hd{
  font-family:var(--ed-sans);font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--ed-rule);color:var(--ed-stock);
  padding:.45rem .7rem;margin:0;
}
.ed-toplist{list-style:none;margin:0;padding:0;counter-reset:t;}
.ed-toplist li{
  border-bottom:1px solid var(--ed-hair);padding:.55rem .65rem;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem;align-items:start;
}
.ed-toplist li > div{min-width:0;}
.ed-toplist li:last-child{border-bottom:0;}
.ed-toplist li::before{
  counter-increment:t;content:counter(t);
  font-family:var(--ed-sans);font-size:.8125rem;font-weight:700;
  color:var(--ed-accent);line-height:1.3;min-width:1.1em;
}
.ed-topcat{
  display:block;font-family:var(--ed-sans);font-size:.5938rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ed-accent);
  margin:0 0 .12rem;
}
.ed-tophed{
  font-family:var(--ed-display);font-weight:700;font-size:.875rem;
  line-height:1.28;margin:0;overflow-wrap:anywhere;
}
.ed-tophed a{color:var(--ed-ink);text-decoration:none;}
.ed-tophed a:hover{text-decoration:underline;text-underline-offset:2px;}
.ed-topdate{
  font-family:var(--ed-sans);font-size:.5938rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ed-ink-soft);margin:.18rem 0 0;
  font-variant-numeric:tabular-nums;
}

/* Category tallies — real counts from the feed, never decorative numbers. */
.ed-cats{list-style:none;margin:0;padding:0;}
.ed-cats li{
  display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
  padding:.5rem .7rem;border-bottom:1px solid var(--ed-hair);
  font-family:var(--ed-sans);font-size:.8125rem;
}
.ed-cats li:last-child{border-bottom:0;}
.ed-cats b{font-weight:700;}
.ed-cats span{color:var(--ed-ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ed-panel-foot{padding:.55rem .7rem;border-top:1px solid var(--ed-hair);
  font-family:var(--ed-sans);font-size:.75rem;}

/* -- hero fills its column, no dead ground -------------------------------- */
/* In the stage grid the hero column stretches to whatever the rail needs. The
   slide kept a fixed 16/9 ratio, so any surplus height showed as a black band
   under the controls. Letting the picture grow into that space removes the band
   AND makes the photograph larger, which is what the space was wanted for.
   Only applies where the two actually sit side by side. */
@media (min-width:62rem){
  .ed-stage{align-items:stretch;}
  .ed-stage .ed-hero{display:flex;flex-direction:column;}
  .ed-stage .ed-slides{flex:1 1 auto;min-height:0;display:flex;}
  .ed-stage .ed-slide{width:100%;}
  .ed-stage .ed-slide.is-on{display:flex;flex-direction:column;min-height:0;}
  .ed-stage .ed-slide-fig{flex:1 1 auto;aspect-ratio:auto;min-height:320px;}
  .ed-stage .ed-hero-ctl{flex:0 0 auto;}
}