/* ═══════════════════════════════════════════════════════════
   Bill Beacham for Mayor — Township of Greater Madawaska
   Direction: The Broadsheet. A small-town newspaper front page,
   black ink on newsprint with a single spot colour.
   ═══════════════════════════════════════════════════════════ */

:root{
  --newsprint:#e9e6dd;
  --newsprint-2:#e0dcd1;
  --ink:#16150f;
  --ink-soft:#4c483e;
  --ink-faint:#6f6a5c;
  --press:#1f4e79;
  --rule:#16150f;
  --hair:rgba(22,21,15,.28);

  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --util:"Archivo Narrow","Source Sans 3",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--newsprint);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.58;
}

/* faint newsprint tooth */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(22,21,15,.05) 1px,transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:multiply;
}

.paper{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 28px}

a{color:var(--press)}
a:focus-visible{outline:3px solid var(--press);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--ink);color:var(--newsprint);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:14px;padding:14px 22px;text-decoration:none;
}
.skip:focus{left:8px;top:8px}

/* ── rules ─────────────────────────────────────────────── */
.rule-double{border:0;border-top:5px solid var(--rule);border-bottom:1.5px solid var(--rule);height:4px;margin:0}
.rule-thin{border:0;border-top:1.5px solid var(--rule);margin:0}
.rule-gap{margin-top:32px}
.rule-gap-b{margin-bottom:26px}

/* ── masthead ──────────────────────────────────────────── */
.masthead{padding:34px 0 0;text-align:center}
.masthead .flag{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.34em;
  font-size:12px;color:var(--ink-soft);margin:0 0 16px;
}
.masthead h1{
  font-family:var(--display);font-optical-sizing:auto;
  font-weight:900;font-size:clamp(52px,12.5vw,148px);
  line-height:.84;margin:0;letter-spacing:-.015em;
}
.masthead .for{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(20px,3.6vw,38px);margin:14px 0 22px;
}

.dateline{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 22px;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;padding:9px 2px;color:var(--ink-soft);
}
.dateline .mid{color:var(--press);font-weight:700;letter-spacing:.2em}

/* ── inside index ──────────────────────────────────────── */
.index{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:10px 2px;
}
.index-label{
  font-family:var(--display);font-style:italic;font-weight:700;
  font-size:19px;line-height:1;
}
.index ul{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;
}
.index li + li{border-left:1px solid var(--hair)}
.index a{
  display:block;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;
  font-size:12.5px;font-weight:600;text-decoration:none;color:var(--ink);
  padding:4px 14px;
}
.index a:hover{color:var(--press);text-decoration:underline}

/* ── front page grid ───────────────────────────────────── */
.front{
  display:grid;grid-template-columns:1fr 300px;gap:0 30px;
  padding-top:26px;scroll-margin-top:20px;
}
.front > .col-main{padding-right:30px;border-right:1px solid var(--hair)}

.kicker{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-size:12.5px;font-weight:700;color:var(--press);margin:0 0 10px;
}
.kicker-spaced{margin:26px 0 10px}

.hed{
  font-family:var(--display);font-weight:700;line-height:1.02;
  font-size:clamp(34px,5.4vw,58px);margin:0 0 10px;letter-spacing:-.01em;
}
.dek{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(19px,2.2vw,24px);line-height:1.34;color:var(--ink-soft);
  margin:0 0 20px;
}
.byline{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;color:var(--ink-faint);padding:8px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin:0 0 20px;
}

.cols2{column-count:2;column-gap:30px;column-rule:1px solid var(--hair)}
.cols2 p{margin:0 0 1.05em}

.dropcap::first-letter{
  font-family:var(--display);font-weight:900;
  float:left;font-size:76px;line-height:.72;
  padding:6px 9px 0 0;color:var(--press);
}

/* ── portrait rail ─────────────────────────────────────── */
.portrait figure{margin:0}
.portrait img{
  width:100%;border:1px solid var(--ink);
  filter:saturate(.88) contrast(1.03);
}
.portrait figcaption{
  font-family:var(--util);font-size:12.5px;line-height:1.42;
  color:var(--ink-soft);padding:8px 0 0;
}
.rail-note{margin-top:22px;padding-top:14px;border-top:3px solid var(--rule)}
.rail-note h3{
  font-family:var(--display);font-weight:700;font-size:22px;
  margin:0 0 8px;line-height:1.12;
}
.rail-list{list-style:none;margin:0;padding:0;font-size:16px}
.rail-list li{padding:7px 0;border-bottom:1px solid var(--hair);display:flex;gap:10px}
.rail-list li:last-child{border-bottom:0}
.rail-list .n{font-family:var(--util);font-weight:700;color:var(--press);letter-spacing:.06em}

/* ── section stories ───────────────────────────────────── */
.story{padding:30px 0 34px;scroll-margin-top:20px}
.story-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.story-head .theme{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-size:12.5px;font-weight:700;color:var(--press);
  border:1.5px solid var(--press);padding:3px 9px;white-space:nowrap;
}
.story h2{
  font-family:var(--display);font-weight:700;line-height:1.04;
  font-size:clamp(30px,4.4vw,46px);margin:0;letter-spacing:-.01em;
}
.story .dek{margin:8px 0 18px}
.story-intro{max-width:62ch;margin:0 0 18px;color:var(--ink-soft)}

.pull{
  font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(24px,3.4vw,34px);line-height:1.2;
  border-top:3px solid var(--rule);border-bottom:3px solid var(--rule);
  padding:16px 0;margin:22px 0;text-align:center;
}
.pull-gap{margin-top:30px}

.planks{list-style:none;margin:0;padding:0}
.planks li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.planks li:first-child{border-top:1.5px solid var(--rule)}
.planks .mark{
  font-family:var(--util);font-weight:700;font-size:13px;letter-spacing:.1em;
  color:var(--press);text-transform:uppercase;padding-top:3px;
  min-width:4.2em; /* keeps the text column flush across rows */
}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;
  font-size:12.5px;font-weight:600;
  border:1px solid var(--ink);padding:6px 11px;background:var(--newsprint-2);
}

/* ── the record ────────────────────────────────────────── */
.record{width:100%;border-collapse:collapse;margin:6px 0 0;font-size:17px}
.record th{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:11.5px;text-align:left;padding:8px 12px 8px 0;color:var(--ink-faint);
  border-bottom:1.5px solid var(--rule);font-weight:700;
}
.record td{padding:13px 12px 13px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.record td:first-child{white-space:nowrap;font-family:var(--util);font-weight:700;letter-spacing:.03em}
.record td:nth-child(2){width:38%}
.record .yrs{display:block;font-weight:500;color:var(--ink-faint);font-size:14px;letter-spacing:.06em}
.record .why{color:var(--ink-soft)}

.service{
  columns:2;column-gap:30px;column-rule:1px solid var(--hair);
  list-style:none;margin:0;padding:0;font-size:16.5px;
}
.service li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--hair);line-height:1.42}
.service b{font-weight:600}

/* ── commitments ───────────────────────────────────────── */
.commit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.commit li{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--hair);font-size:17.5px;
}
.commit .tick{color:var(--press);font-weight:700;font-size:20px;line-height:1}

/* ── call to action ────────────────────────────────────── */
.cta{
  border:5px double var(--rule);padding:30px 28px;margin:10px 0 34px;
  text-align:center;background:var(--newsprint-2);
}
.cta h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(28px,4.4vw,42px);margin:0 0 8px;line-height:1.06;
}
.cta p{max-width:52ch;margin:0 auto 20px;color:var(--ink-soft)}
.btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.18em;font-weight:700;font-size:14px;
  background:var(--ink);color:var(--newsprint);text-decoration:none;
  padding:15px 30px;border:1.5px solid var(--ink);
}
.btn:hover{background:var(--press);border-color:var(--press)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--newsprint)}

/* ── colophon ──────────────────────────────────────────── */
.colophon{padding:30px 0 60px;text-align:center;scroll-margin-top:20px}
.colophon .sign{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(20px,3vw,28px);line-height:1.34;max-width:44ch;margin:0 auto 26px;
}
.contact{
  display:flex;justify-content:center;flex-wrap:wrap;
  border-top:3px solid var(--rule);border-bottom:3px solid var(--rule);margin-bottom:18px;
}
.contact a{
  font-family:var(--util);font-size:17px;letter-spacing:.06em;
  padding:16px 26px;text-decoration:none;color:var(--ink);
  border-right:1px solid var(--hair);
}
.contact a:last-child{border-right:0}
.contact a:hover{color:var(--press);text-decoration:underline}
.colophon .imprint{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-size:11.5px;color:var(--ink-faint);
}

/* ── error page ────────────────────────────────────────── */
.lost{max-width:52ch;margin:0 auto;padding:90px 0 120px;text-align:center}
.lost h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(44px,9vw,96px);line-height:.9;margin:0 0 16px;
}
.lost p{margin:0 0 26px;color:var(--ink-soft)}

/* ── narrow screens ────────────────────────────────────── */
@media (max-width:900px){
  body{font-size:18px}
  .paper{padding:0 20px}
  .front{grid-template-columns:1fr;gap:26px}
  .front > .col-main{padding-right:0;border-right:0}
  .cols2,.service{column-count:1;columns:1;column-rule:0}
  .commit{grid-template-columns:1fr}
  .portrait{max-width:340px}
  .record td:nth-child(2){width:auto}
  .record thead{display:none}
  .record tr{display:block;border-bottom:1.5px solid var(--rule);padding:12px 0}
  .record td{display:block;border:0;padding:2px 0}
  .record td:first-child{font-size:19px;white-space:normal}
}
@media (max-width:520px){
  .dateline{justify-content:center;text-align:center;font-size:11px}
  .index{justify-content:center}
  .index a{padding:4px 10px}
  /* the rules read as strays once the list wraps onto several rows */
  .index li + li{border-left:0}
  .index ul{gap:2px 14px}
  .contact a{border-right:0;padding:12px 18px}
}

/* ── print ─────────────────────────────────────────────── */
@media print{
  body{background:#fff;font-size:11pt}
  body::before,.skip,.index,.btns{display:none}
  .paper{max-width:none;padding:0}
  a{color:#000;text-decoration:none}
  .story,.front{page-break-inside:avoid}
}