/* ==========================================================================
   WhatsOpening design system
   --------------------------------------------------------------------------
   Palette drawn from municipal planning documents rather than the editorial
   default: verdigris is the colour of an approval stamp, survey orange is
   borrowed from site-marking paint and appears ONLY where construction is
   genuinely the subject. Neutrals carry a faint green-grey bias toward the
   accent so the ground reads as chosen rather than inherited.

   No framework. No utility classes. Custom properties + semantic selectors.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/newsreader-dd08b472.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("/assets/plexsans-bf0c3289.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/assets/plexmono-3f7bbac1.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --paper:#F1F4F2; --paper-2:#E8ECE9; --panel:#FBFCFB;
  --ink:#0E1A1B; --ink-2:#2B3A39; --muted:#5C6C6A; --faint:#8A9895;
  --rule:#CBD4D1; --rule-strong:#A8B5B2;
  --verdigris:#0B5D51; --verdigris-lift:#0E7666;
  --survey:#B44E16;

  --s-rumored:#7C8A87; --s-proposed:#3F6597; --s-approved:#0B5D51;
  --s-under_construction:#B44E16; --s-opening_soon:#9C1F3D; --s-open:#1F7A3D;
  --s-closing_soon:#8A6316; --s-closed:#77807E;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Spacing rhythm: a 4px base, used everywhere rather than ad-hoc values. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --measure:64ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0D1414; --paper-2:#121B1B; --panel:#151F1F;
    --ink:#E7EDEA; --ink-2:#C4D0CD; --muted:#8FA09D; --faint:#6B7A78;
    --rule:#25332F; --rule-strong:#3A4A46;
    --verdigris:#4FB39F; --verdigris-lift:#63C8B3;
    --survey:#E08148;
    --s-rumored:#8B9996; --s-proposed:#6E9BD1; --s-approved:#4FB39F;
    --s-under_construction:#E08148; --s-opening_soon:#E0687F; --s-open:#5CC97E;
    --s-closing_soon:#D2A54A; --s-closed:#7C8785;
  }
}
:root[data-theme="dark"] {
  --paper:#0D1414; --paper-2:#121B1B; --panel:#151F1F;
  --ink:#E7EDEA; --ink-2:#C4D0CD; --muted:#8FA09D; --faint:#6B7A78;
  --rule:#25332F; --rule-strong:#3A4A46;
  --verdigris:#4FB39F; --verdigris-lift:#63C8B3;
  --survey:#E08148;
  --s-rumored:#8B9996; --s-proposed:#6E9BD1; --s-approved:#4FB39F;
  --s-under_construction:#E08148; --s-opening_soon:#E0687F; --s-open:#5CC97E;
  --s-closing_soon:#D2A54A; --s-closed:#7C8785;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 {
  font-family: var(--serif); font-weight: 600; line-height: 1.12;
  margin: 0; text-wrap: balance; letter-spacing: -.012em;
}
p { margin: 0; }
a { color: var(--verdigris); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--verdigris-lift); }
:focus-visible { outline: 2px solid var(--verdigris); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--sp-5); }

/* Screen-reader-only, for skip links and table captions. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink);
  color: var(--paper); padding: var(--sp-3) var(--sp-4); z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Type utilities ------------------------------------------------------ */
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.measure { max-width: var(--measure); }

/* --- Masthead ------------------------------------------------------------ */
.masthead { border-bottom: 2px solid var(--ink); background: var(--panel); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding: var(--sp-4) 0; flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  letter-spacing: -.022em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.wordmark .apos { color: var(--verdigris); }
.masthead nav { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.masthead nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); }

/* --- Search -------------------------------------------------------------- */
.searchbar { display: flex; border: 1px solid var(--rule-strong); background: var(--panel); }
.searchbar input {
  flex: 1; border: 0; background: transparent; padding: var(--sp-3) var(--sp-4);
  font-family: var(--sans); font-size: 16px; color: var(--ink); min-width: 0;
}
.searchbar input::placeholder { color: var(--faint); }
.searchbar button {
  border: 0; border-left: 1px solid var(--rule); background: var(--ink);
  color: var(--paper); font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; padding: 0 var(--sp-5);
  cursor: pointer;
}
.searchbar button:hover { background: var(--verdigris); }

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: var(--sp-4) 0 0;
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--verdigris); }

/* --- Status marker -------------------------------------------------------
   A typographic marker with a colour-coded rule. Never a pill, never a badge. */
.status {
  display: inline-flex; align-items: center; font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; padding: 3px 0 3px 9px;
  border-left: 3px solid var(--status-color, var(--muted));
  color: var(--status-color, var(--muted)); white-space: nowrap;
}
.status--lg { font-size: 12.5px; padding-left: 11px; border-left-width: 4px; }
.status-rumored            { --status-color: var(--s-rumored); }
.status-proposed           { --status-color: var(--s-proposed); }
.status-approved           { --status-color: var(--s-approved); }
.status-under_construction { --status-color: var(--s-under_construction); }
.status-opening_soon       { --status-color: var(--s-opening_soon); }
.status-open               { --status-color: var(--s-open); }
.status-closing_soon       { --status-color: var(--s-closing_soon); }
.status-closed             { --status-color: var(--s-closed); }

/* --- Page headers -------------------------------------------------------- */
.page-head { padding: var(--sp-6) 0 var(--sp-4); border-bottom: 2px solid var(--ink); }
.page-head h1 { font-size: clamp(28px, 4.2vw, 44px); }
.page-head .sub { font-family: var(--serif); font-size: 20px; color: var(--ink-2); margin-top: var(--sp-1); }

/* Count line: the headline data strip. Generated from counts, never prose. */
.countline {
  display: flex; flex-wrap: wrap; margin-top: var(--sp-3);
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
}
.countline > * {
  padding-right: var(--sp-3); margin-right: var(--sp-3);
  border-right: 1px solid var(--rule);
}
.countline > *:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.countline b { color: var(--ink); font-weight: 500; }

/* --- Filters ------------------------------------------------------------- */
.filters {
  display: flex; margin: var(--sp-5) 0 0; border: 1px solid var(--rule);
  width: fit-content; max-width: 100%; overflow-x: auto;
}
.filters a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; padding: var(--sp-2) var(--sp-4);
  border-right: 1px solid var(--rule); color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.filters a:last-child { border-right: 0; }
.filters a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* --- Group label + rows -------------------------------------------------- */
/* The count sits at the far right, not beside the heading. Adjacent, it read
   as an index — "Closing Soon 2" looked like the second of several closing
   sections rather than a count of two records. */
.group-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin: var(--sp-6) 0 0; padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule-strong);
}
.group-label .n {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}

.rows { border-bottom: 1px solid var(--rule); }
/* Fixed 168px and 132px tracks reserved space whether or not the content
   needed it — "Open" held the same width as "Under Construction" — and the
   name was left with whatever remained, so it wrapped while a third of the
   row sat empty.
   Status now takes exactly its content. The date is capped rather than sized
   to content, because spelling dates out in full ("Saturday, September 12,
   2026") would otherwise claim more of the row than the business name it is
   describing; capped, it wraps to two lines in its own column and the name
   keeps the space. */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 13ch);
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
/* The ONLY change from the three-column row: the status column is gone and
   the status is a kicker over the name instead. Everything about the date —
   its width, its alignment, its baseline — is untouched. */
.row .status-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; margin-bottom: 3px;
  color: var(--status-color, var(--muted));
}
/* A 1fr grid track refuses to shrink below its content's min-content width,
   so a long business name would push the date column off-screen on mobile.
   min-width:0 lets the track actually shrink; the name wraps instead. */
.row > * { min-width: 0; }
.row .nm, .row .meta { overflow-wrap: break-word; }
.row .nm { text-wrap: balance; }
.row:last-child { border-bottom: 0; }
.row .nm {
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.2;
}
.row .nm a { color: var(--ink); text-decoration: none; }
.row .nm a:hover { color: var(--verdigris); }
.row .meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.row .when {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  text-align: right; font-variant-numeric: tabular-nums;
}
/* The date may wrap inside its own track rather than pushing the name out of
   shape. A record page has room for the weekday; a dense list does not always. */
.row .when > span:not(.lbl) { display: block; text-wrap: balance; }
.row .when .lbl {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 2px;
}

/* --- The record ---------------------------------------------------------- */
.record { border: 1px solid var(--rule-strong); background: var(--panel); margin-top: var(--sp-5); }
.record-top { padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--rule); }
.record-brandline {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
}
.record-name {
  font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.04;
}
.record-place { font-family: var(--serif); font-size: 20px; color: var(--ink-2); margin-top: var(--sp-1); font-weight: 400; }
.record-tags { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-3); flex-wrap: wrap; }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.facts > * { min-width: 0; }
.fact .v { overflow-wrap: anywhere; }
.fact { padding: var(--sp-4) var(--sp-6); border-right: 1px solid var(--rule); }
.fact:last-child { border-right: 0; }
.fact .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-2);
}
.fact .v {
  font-family: var(--serif); font-size: 26px; font-weight: 600;
  line-height: 1.15; letter-spacing: -.015em;
}
/* An unknown is stated plainly, in the UI face — never dressed up as data. */
.fact .v.unknown {
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  color: var(--muted); line-height: 1.4;
}
.fact .sub { font-size: 12.5px; color: var(--muted); margin-top: var(--sp-1); }

.latest {
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--rule);
  background: var(--paper-2); display: flex; gap: var(--sp-4); align-items: flex-start;
}
.latest .bar { width: 3px; align-self: stretch; background: var(--verdigris); flex: none; }
.latest .h { font-size: 17px; font-weight: 600; margin-top: var(--sp-1); line-height: 1.3; }

/* --- Timeline ------------------------------------------------------------ */
.timeline { padding: var(--sp-5) var(--sp-6) var(--sp-2); border-top: 1px solid var(--rule); }
.tl-item { display: grid; grid-template-columns: 112px 1fr; gap: var(--sp-5); padding-bottom: var(--sp-5); }
.tl-item > * { min-width: 0; }
.tl-h, .tl-src { overflow-wrap: anywhere; }
.tl-date {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  padding-top: 2px; font-variant-numeric: tabular-nums;
}
.tl-body { border-left: 1px solid var(--rule); padding: 0 0 var(--sp-1) var(--sp-5); position: relative; }
.tl-body::before {
  content: ""; position: absolute; left: -4.5px; top: 6px; width: 8px; height: 8px;
  background: var(--paper); border: 2px solid var(--rule-strong); border-radius: 50%;
}
.tl-item:first-child .tl-body::before { background: var(--verdigris); border-color: var(--verdigris); }
.tl-h { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.tl-src { font-size: 12.5px; color: var(--muted); margin-top: var(--sp-1); }
.tl-src a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tl-src a:hover { color: var(--verdigris); border-color: var(--verdigris); }

/* --- Sources ------------------------------------------------------------- */
.sources { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--rule); }
.source-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.source-item:last-child { border-bottom: 0; }
.source-item .pub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-1);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.source-item .tier {
  color: var(--verdigris); border: 1px solid var(--verdigris);
  padding: 1px 5px; font-size: 9.5px; letter-spacing: .08em;
}
.source-item .hl { font-size: 14.5px; line-height: 1.4; }
.source-item .hl a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.source-item .hl a:hover { border-color: var(--verdigris); color: var(--verdigris); }
.source-item .dt { font-family: var(--mono); font-size: 11.5px; color: var(--faint); white-space: nowrap; }

/* --- Section blocks ------------------------------------------------------ */
.section { padding: var(--sp-7) 0; border-bottom: 1px solid var(--rule); }
.section:last-of-type { border-bottom: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.section-head h2 { font-size: clamp(22px, 3vw, 30px); }
.section-head a { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

/* Link lists (popular cities, related brands) — ruled, not carded. */
.linklist { display: grid; gap: 0; }
.linklist a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  overflow-wrap: anywhere;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.linklist a:hover { color: var(--verdigris); }
.linklist .c { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* --- Empty + notices ----------------------------------------------------- */
.notice {
  border-left: 3px solid var(--rule-strong); padding: var(--sp-3) var(--sp-4);
  background: var(--paper-2); color: var(--muted); font-size: 14px;
}
.notice.thin { border-left-color: var(--survey); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  border-top: 2px solid var(--ink); margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8); background: var(--panel);
}
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-6); }
.site-footer h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: var(--sp-3); }
.site-footer a { display: block; color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 3px 0; }
.site-footer a:hover { color: var(--verdigris); }
.site-footer .colophon { color: var(--muted); font-size: 13px; max-width: 52ch; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .grid-2, .grid-3, .site-footer .cols { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* Was two columns here before, with the status hidden and reintroduced as a
     rule. The kicker carries the status at every width now, so this only has
     to narrow the gap. */
  .row { gap: var(--sp-3); }
  .fact { border-right: 0; border-bottom: 1px solid var(--rule); }
  .facts { grid-template-columns: 1fr 1fr; }
  .record-top, .fact, .latest, .timeline, .sources { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .tl-item { grid-template-columns: 88px 1fr; gap: var(--sp-3); }
}
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .masthead nav, .filters, .searchbar { display: none; }
  body { background: #fff; color: #000; }
}

/* --- Admin forms --------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.field input[type=text], .field input[type=url], .field input[type=number],
.field select, .field textarea {
  padding: 9px 10px; border: 1px solid var(--rule-strong); background: var(--panel);
  color: var(--ink); font-family: var(--sans); font-size: 14.5px; width: 100%;
}
.field textarea { font-family: var(--mono); font-size: 13px; min-height: 90px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--muted); }
.field-wide { grid-column: 1 / -1; }
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-4); }
.data-table th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--rule-strong);
  font-weight: 500; white-space: nowrap; }
.data-table td { padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule); font-size: 14px; vertical-align: top; }
/* Right-aligned numeric columns still need their own gutter, or the value
   runs straight into the next column's heading ("0never"). */
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; font-size: 13px; padding-right: var(--sp-5); }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table a { color: var(--ink); text-decoration: none; }
.data-table a:hover { color: var(--verdigris); }
.tier-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; padding: 2px 5px; border: 1px solid currentColor; }
.tier-primary { color: var(--verdigris); }
.tier-trusted { color: var(--s-proposed); }
.tier-other   { color: var(--muted); }
.state-pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.state-applied, .state-extracted { color: var(--s-open); }
.state-error { color: var(--survey); }
.state-prefiltered_out, .state-irrelevant { color: var(--faint); }