/* ==========================================================================
   ASHFORD CORNERS TOWNSHIP — "The Township Record"
   Its own system. Newspaper of record: a centred masthead, rules instead of
   boxes, multi-column story grids with column rules, hanging dates, a drop
   cap on the lead. No cards, no tiles, no sidebar rail, no rounded corners.
   ========================================================================== */

:root {
  --stock:    oklch(96% 0.014 75);   /* newsprint */
  --sheet:    oklch(98.5% 0.008 75);
  --tint:     oklch(93% 0.014 75);
  --ink:      oklch(16% 0 0);
  --ink-2:    oklch(38% 0.01 60);
  --ink-3:    oklch(52% 0.012 60);
  --hair:     oklch(80% 0.015 70);
  --rule:     oklch(16% 0 0);
  --spot:     oklch(40% 0.16 27);    /* one red, used sparingly */
  --spot-2:   oklch(33% 0.15 27);

  --ff-head: 'Bitter', Georgia, 'Times New Roman', serif;
  --ff-text: 'Source Sans 3', system-ui, -apple-system, sans-serif;

  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 18px; --sp5: 26px;
  --sp6: 36px; --sp7: 52px; --sp8: 72px;

  --x-kicker: 0.6875rem;
  --x-meta:   0.75rem;
  --x-small:  0.875rem;
  --x-body:   1rem;
  --x-stand:  clamp(1.0625rem, 1.01rem + 0.27vw, 1.1875rem);
  --x-h3:     clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --x-h2:     clamp(1.375rem, 1.21rem + 0.8vw, 1.875rem);
  --x-lead:   clamp(1.625rem, 1.28rem + 1.7vw, 2.625rem);
  --x-name:   clamp(1.875rem, 1.1rem + 3.8vw, 3.5rem);

  --col: 1180px;
  --gut: clamp(16px, 4vw, 30px);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--stock); color: var(--ink);
  font-family: var(--ff-text); font-size: var(--x-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3 { font-family: var(--ff-head); margin: 0; line-height: 1.14; font-weight: 700; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--spot-2); text-underline-offset: 2px; }
svg { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--spot); outline-offset: 2px; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--sheet); padding: var(--sp3) var(--sp5); font-weight: 700; }
.skip:focus { left: 0; }

.sheet { max-width: var(--col); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- Masthead ---------- */
.dateline {
  border-bottom: 1px solid var(--hair); font-size: var(--x-meta);
  color: var(--ink-2); letter-spacing: 0.02em;
}
.dateline .sheet { display: flex; flex-wrap: wrap; gap: var(--sp2) var(--sp5); padding-block: var(--sp2); }
.dateline a { color: inherit; }
@media (max-width: 46.99em) { .dateline [data-drop] { display: none; } }

.flag { background: var(--stock); border-bottom: 3px double var(--rule); text-align: center; }
.flag .sheet { padding-block: var(--sp5) var(--sp4); }
.flag-kicker, .flag-sub {
  font-size: var(--x-kicker); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-2); font-weight: 600;
}
.flag h1, .flag .name {
  font-family: var(--ff-head); font-size: var(--x-name); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.02; margin-block: var(--sp2);
  display: block; color: var(--ink); text-decoration: none;
}
.flag .rule-pair { display: flex; align-items: center; gap: var(--sp3); }
.flag .rule-pair::before, .flag .rule-pair::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hair); }

/* ---------- Section nav ---------- */
.sections { background: var(--stock); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 50; }
.sections .sheet { display: flex; align-items: center; gap: var(--sp4); padding-block: var(--sp2); }
.sections nav { display: flex; flex-wrap: wrap; gap: var(--sp5); margin-inline: auto; }
.sections a {
  font-size: var(--x-kicker); text-transform: uppercase; letter-spacing: 0.11em;
  font-weight: 700; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 40px;
}
.sections a:hover { color: var(--spot); }
.sections a[aria-current="page"] { color: var(--spot); box-shadow: inset 0 -3px 0 var(--spot); }
.sections .compact { display: none; font-family: var(--ff-head); font-weight: 700; font-size: 1rem; }

.menu-btn {
  display: none; align-items: center; gap: var(--sp2); margin-left: auto;
  min-height: 42px; padding: 0 var(--sp3); background: none;
  border: 1px solid var(--rule); color: var(--ink); font: inherit;
  font-size: var(--x-kicker); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; cursor: pointer;
}
.menu-btn i { display: block; width: 16px; height: 2px; background: currentColor; position: relative; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
[aria-expanded="true"] i { background: transparent; }
[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 55.99em) {
  .menu-btn { display: inline-flex; }
  .sections .compact { display: block; }
  .sections nav {
    position: fixed; inset: var(--nav-top, 48px) 0 0 auto; width: min(300px, 86vw); z-index: 70;
    background: var(--sheet); border-left: 1px solid var(--rule);
    flex-direction: column; gap: 0; margin: 0; padding: var(--sp4) var(--gut) var(--sp8);
    transform: translateX(100%); transition: transform 200ms ease; overflow-y: auto;
  }
  .sections nav[data-open="true"] { transform: none; }
  .sections nav a { min-height: 50px; border-bottom: 1px solid var(--hair); font-size: var(--x-small); letter-spacing: 0.08em; }
  .shade { position: fixed; inset: var(--nav-top, 48px) 0 0 0; background: oklch(16% 0 0 / 0.4); z-index: 65; opacity: 0; pointer-events: none; transition: opacity 200ms; }
  .shade[data-open="true"] { opacity: 1; pointer-events: auto; }
  body[data-fixed="true"] { overflow: hidden; }
}

/* ---------- Story grid with column rules ---------- */
.edition { padding-block: var(--sp5) var(--sp8); }
.split { display: grid; gap: var(--sp5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: var(--sp7); }
  .split > * + * { border-left: 1px solid var(--hair); padding-left: var(--sp7); }
}

.kicker {
  font-size: var(--x-kicker); text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--spot); display: block; margin-bottom: var(--sp2);
}
.headline { font-size: var(--x-lead); letter-spacing: -0.02em; }
.standfirst { font-size: var(--x-stand); color: var(--ink-2); margin-top: var(--sp3); }
.byline {
  font-size: var(--x-meta); color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.08em; margin-top: var(--sp3);
  padding-block: var(--sp2); border-block: 1px solid var(--hair);
}
.story > p + p { margin-top: var(--sp4); }
.story p { max-width: 64ch; }
/* Drop cap belongs on the opening body paragraph, not on the standfirst —
   the standfirst is a summary deck and already carries its own emphasis. */
.story--lead .cut + p::first-letter {
  float: left; font-family: var(--ff-head); font-weight: 700;
  font-size: 3.2em; line-height: 0.82; padding: 6px var(--sp2) 0 0; color: var(--spot);
}
.cut { margin-block: var(--sp5); }
.cut figcaption {
  font-size: var(--x-meta); color: var(--ink-3); padding-top: var(--sp2);
  border-bottom: 1px solid var(--hair); padding-bottom: var(--sp3);
}

/* ---------- Column heads ---------- */
.head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp3);
  flex-wrap: wrap; border-bottom: 2px solid var(--rule); padding-bottom: var(--sp2); margin-bottom: var(--sp4);
}
.head h2 { font-size: var(--x-h3); text-transform: uppercase; letter-spacing: 0.06em; }
.head a { font-size: var(--x-meta); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-decoration: none; }
.head a:hover { text-decoration: underline; }

/* ---------- Briefs: short items separated by rules ---------- */
.briefs li { border-bottom: 1px solid var(--hair); padding-block: var(--sp3); }
.briefs li:last-child { border-bottom: 0; }
.briefs b { display: block; font-family: var(--ff-head); font-size: var(--x-body); }
.briefs span { font-size: var(--x-small); color: var(--ink-2); }

/* ---------- Three-column story row ---------- */
.trio { display: grid; gap: var(--sp5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 38em) { .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp6); } }
@media (min-width: 62em) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.piece { display: flex; flex-direction: column; gap: var(--sp2); }
.piece a { text-decoration: none; color: inherit; }
.piece a:hover h3 { color: var(--spot); text-decoration: underline; }
.piece h3 { font-size: var(--x-h3); }
.piece time { font-size: var(--x-meta); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
.piece figure { margin: 0 0 var(--sp2); }

/* ---------- The record: hanging dates, no boxes ---------- */
.record { border-top: 2px solid var(--rule); }
.record li { border-bottom: 1px solid var(--hair); }
.record .entry { display: flex; gap: var(--sp5); padding-block: var(--sp4); align-items: baseline; }
.record .stamp {
  flex: 0 0 5.5rem; font-family: var(--ff-head); font-weight: 700; font-size: var(--x-small);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.record .what { flex: 1 1 auto; }
.record .what b { font-family: var(--ff-head); font-size: var(--x-h3); font-weight: 700; display: block; }
.record .what span { font-size: var(--x-small); color: var(--ink-2); }
.record .files { display: flex; gap: var(--sp3); flex-wrap: wrap; margin-top: var(--sp2); }
.record .files a {
  font-size: var(--x-meta); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  border-bottom: 2px solid var(--spot); text-decoration: none; padding-bottom: 1px;
  display: inline-flex; align-items: center; min-height: 34px;
}
@media (max-width: 38em) { .record .entry { flex-direction: column; gap: var(--sp2); } .record .stamp { flex: none; } }

.status { font-size: var(--x-meta); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.status--open { color: var(--spot); }
.status--filed { color: var(--ink-3); }

/* ---------- Tabs / filters ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp5); border-bottom: 1px solid var(--hair); margin-bottom: var(--sp5); }
.tabs button {
  font: inherit; font-family: var(--ff-head); font-weight: 700; font-size: var(--x-small);
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-2);
  padding: var(--sp2) 0; min-height: 42px; cursor: pointer;
}
.tabs [aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--spot); }

/* ---------- Definition rows ---------- */
.facts { border-top: 1px solid var(--hair); }
.facts div { display: flex; gap: var(--sp4); padding-block: var(--sp3); border-bottom: 1px solid var(--hair); font-size: var(--x-small); }
.facts dt { flex: 0 0 40%; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--x-meta); font-weight: 700; }
.facts dd { margin: 0; flex: 1 1 auto; }

/* ---------- Forms ---------- */
.paper-form { display: grid; gap: var(--sp4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46em) { .paper-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld--wide { grid-column: 1 / -1; }
label { font-size: var(--x-meta); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-2); }
input, select, textarea {
  font: inherit; font-size: var(--x-body); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--hair); border-radius: 0; padding: 10px var(--sp3); min-height: 44px; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--spot); }
textarea { min-height: 130px; resize: vertical; }
.press {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 var(--sp5);
  background: var(--ink); color: var(--stock); border: 0; border-radius: 0;
  font: inherit; font-family: var(--ff-head); font-weight: 700; font-size: var(--x-small);
  text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; text-decoration: none;
}
.press:hover { background: var(--spot-2); }
.press--quiet { background: none; color: var(--ink); border: 1px solid var(--rule); }
.press--quiet:hover { background: var(--tint); color: var(--ink); }
.filed { border-top: 2px solid var(--spot); padding-top: var(--sp4); }

/* ---------- Calendar ---------- */
.almanac { display: none; }
@media (min-width: 52em) {
  .almanac { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 2px solid var(--rule); }
  .almanac > div { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: var(--sp2); min-height: 82px; }
  .almanac > div:nth-child(7n) { border-right: 0; }
  .almanac .wd { min-height: 0; font-size: var(--x-kicker); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--ink-3); text-align: center; border-bottom: 1px solid var(--rule); }
  .almanac .dd { font-family: var(--ff-head); font-size: var(--x-small); color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .almanac .note { display: block; margin-top: 3px; font-size: var(--x-meta); font-weight: 700; color: var(--spot); }
}

/* ---------- Colophon ---------- */
.colophon { border-top: 3px double var(--rule); background: var(--stock); margin-top: var(--sp8); }
.colophon .sheet { padding-block: var(--sp6); display: grid; gap: var(--sp5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46em) { .colophon .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.colophon h3 { font-size: var(--x-kicker); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--ff-text); color: var(--ink-3); margin-bottom: var(--sp3); }
.colophon p, .colophon a { font-size: var(--x-small); color: var(--ink-2); }
.colophon a { display: inline-flex; align-items: center; min-height: 34px; text-decoration: none; color: var(--ink); }
.colophon a:hover { color: var(--spot); text-decoration: underline; }
.imprint { border-top: 1px solid var(--hair); }
.imprint .sheet { padding-block: var(--sp4); display: flex; flex-wrap: wrap; gap: var(--sp3); justify-content: space-between; font-size: var(--x-meta); color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }

/* ---------- Cuts: newspapers run modest images, not full-bleed heroes ---------- */
.cut--md { max-width: 460px; }
.cut--sm { max-width: 260px; }
.piece .cut--sm { max-width: 100%; }
@media (min-width: 38em) { .piece .cut--sm { max-width: 220px; } }

/* ---------- Index list: rules and columns, still no cards ---------- */
.index-list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hair); }
@media (min-width: 40em) { .index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp7); } }
@media (min-width: 64em) { .index-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.index-list a {
  display: block; padding: var(--sp3) 0; border-bottom: 1px solid var(--hair);
  text-decoration: none; color: var(--ink); min-height: 56px;
}
.index-list a:hover b { color: var(--spot); text-decoration: underline; }
.index-list b { display: block; font-family: var(--ff-head); font-size: var(--x-body); font-weight: 700; }
.index-list span { font-size: var(--x-small); color: var(--ink-2); }

/* ---------- Editable flag ---------- */
.edit {
  font-size: var(--x-meta); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--ink-3);
}

/* ---------- Questions ---------- */
.qa { border-bottom: 1px solid var(--hair); }
.qa summary {
  list-style: none; cursor: pointer; padding: var(--sp4) 0; min-height: 48px;
  font-family: var(--ff-head); font-weight: 700; font-size: var(--x-body);
  display: flex; align-items: center; gap: var(--sp3);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; margin-left: auto; color: var(--spot); font-size: 1.3em; line-height: 1; }
.qa[open] summary::after { content: "\2212"; }
.qa summary:hover { color: var(--spot); }
.qa-a { padding-bottom: var(--sp4); font-size: var(--x-small); color: var(--ink-2); max-width: 64ch; }