/* The public landing and lightweight editorial pages.

   One file rather than nine inline <style> blocks, for two reasons: when
   the front end is rebuilt this is a single deletion, and until then a
   wording or spacing correction does not have to be made nine times and
   get it wrong twice.

   Colours come from blotter-tokens.css, and only the five neutral ones.
   A holding page carries no severity, nothing a machine wrote, and
   nothing behind Blotter+, so it has no business borrowing the tokens
   that mean those things. --s0..--s5 especially: those are severity and
   only severity, and a grey "we'll be back" page tinted with them would
   be asserting a severity it does not have.

   No webfont and no application script. The public entry page should remain
   fast for readers and crawlers alike. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: dark; scrollbar-color: var(--line2) var(--bg); }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) { color-scheme: light; }
}
::selection { color: var(--text); background: color-mix(in srgb, var(--accent) 24%, var(--bg)); }
input, textarea { caret-color: var(--accent); }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.parked {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(40px, 11vh, 96px) 24px 72px;
}
.parked-home { max-width: 52rem; }

/* The site's name sits above the h1 rather than inside it, so the h1 is
   free to be the subject of this particular page. Every page saying
   "Fairfield County Scanner" as its heading is exactly the sameness
   that gets a set of URLs collapsed into one. */
.parked-mark {
  margin: 0 0 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.parked h1 {
  margin: 0 0 18px;
  font-size: clamp(27px, 5vw, 37px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.parked p {
  margin: 0 0 15px;
  color: var(--muted);
  text-wrap: pretty;
}

.parked p.lede {
  color: var(--text);
  font-size: 17px;
  line-height: 1.6;
}

.parked a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.parked a:hover {
  text-decoration-thickness: 2px;
}

.parked-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 27px;
}

.parked-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

.parked-actions .parked-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.parked-actions .parked-secondary {
  background: var(--surface);
  color: var(--text);
}

.home-activity {
  margin-top: 36px;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 8%, transparent);
}
.home-activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.home-activity-kicker { margin: 0 0 6px !important; color: var(--accent-t) !important; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.home-activity h2 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.home-live { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.home-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 14%, transparent); }
.home-live[data-ready="false"] i { display: none; }
.home-activity-note { max-width: 62ch; margin: 12px 0 18px !important; font-size: 13px; line-height: 1.55; }
.home-activity-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.home-activity-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.home-activity-list li:last-child { border-bottom: 0; padding-bottom: 2px; }
.home-activity-list strong { color: var(--text); font-size: 14px; line-height: 1.4; }
.home-activity-list span { grid-column: 1; color: var(--muted); font-size: 12px; }
.home-activity-list time { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--faint); font-size: 11px; white-space: nowrap; }
.home-activity-list .home-activity-empty { display: block; color: var(--muted); font-size: 13px; }
.home-activity-retry { display: block; min-height: 44px; margin-top: 10px; padding: 8px 13px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--surface2); color: var(--text); font: 650 13px var(--font-sans); cursor: pointer; }
.home-activity-retry:hover { border-color: var(--accent); }

/* The links are not decoration. They are how a crawler still reaches the
   town pages and the deeper sections now that no script builds a nav. */
.parked-links {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.parked-links h2 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.parked-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 20px;
  font-size: 14.5px;
}

/* Twenty-two towns read as a wall in a single flex row, so they get
   columns wide enough for "New Fairfield" and no wider. */
.parked-links ul.cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 8px 20px;
}

.parked-links ul.home-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.home-features li {
  display: grid;
  gap: 4px;
}

.home-features strong {
  color: var(--text);
  font-size: 15px;
}

.home-features span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.parked-note {
  margin-top: 30px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.parked-note p {
  margin: 0 0 9px;
}

.parked-note p:last-child {
  margin-bottom: 0;
}

/* /about is still a static, crawlable document, but it is part of the active
   product and uses the same compact masthead and generous dashboard measure. */
.about-product-head { position: sticky; top: 0; z-index: 20; }
.about-main { max-width: 52rem; padding-top: clamp(40px, 8vh, 72px); }
.about-main .parked-mark { color: var(--accent-t); }
.about-main .parked-note { padding: 20px 22px; border-radius: 12px; }

@media (max-width: 560px) {
  .parked-actions { display: grid; }
  .parked-links ul.home-features { grid-template-columns: 1fr; }
  .home-activity-head { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .home-activity-list li { grid-template-columns: minmax(0, 1fr); }
  .home-activity-list time { grid-column: 1; grid-row: auto; }
}


/* Public-surface motion keeps the same 120/180/240ms ceiling as the app.
   These pages have no router, so their one entrance is the document load and
   live activity arriving from the privacy-filtered endpoint. */
body {
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  opacity: .36;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
body::after {
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 31%),
    radial-gradient(circle at 88% 34%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 28%);
}
.parked { position: relative; z-index: 1; }
.about-product-head { position: sticky; z-index: 20; }

@keyframes parkedEnter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes parkedRowIn {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: none; }
}
@keyframes parkedScan {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}
@keyframes parkedSignal {
  0%, 100% { opacity: 1; }
  50% { opacity: .38; }
}

.parked > * {
  animation: parkedEnter 240ms cubic-bezier(.22, .61, .36, 1) both;
}
.parked > *:nth-child(2) { animation-delay: 28ms; }
.parked > *:nth-child(3) { animation-delay: 56ms; }
.parked > *:nth-child(4) { animation-delay: 84ms; }
.parked > *:nth-child(n+5) { animation-delay: 112ms; }

.parked-actions a {
  transition: transform 120ms cubic-bezier(.22, .61, .36, 1), border-color 120ms cubic-bezier(.22, .61, .36, 1), box-shadow 180ms cubic-bezier(.22, .61, .36, 1), background-color 120ms cubic-bezier(.22, .61, .36, 1);
}
.parked-actions a:hover,
.parked-actions a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 11%, transparent);
}
.parked-actions a:active { transform: translateY(0) scale(.98); }

.home-activity {
  position: relative;
  overflow: hidden;
  transition: transform 180ms cubic-bezier(.22, .61, .36, 1), border-color 180ms cubic-bezier(.22, .61, .36, 1), box-shadow 180ms cubic-bezier(.22, .61, .36, 1);
}
.home-activity::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: parkedScan 640ms cubic-bezier(.22, .61, .36, 1) 180ms both;
}
.home-activity:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line2));
  box-shadow: 0 22px 58px color-mix(in srgb, var(--text) 10%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 7%, transparent);
}
.home-live i { animation: parkedSignal 2s ease-in-out infinite; }
.home-activity-list.is-ready li {
  animation: parkedRowIn 240ms cubic-bezier(.22, .61, .36, 1) both;
}
.home-activity-list.is-ready li:nth-child(2) { animation-delay: 32ms; }
.home-activity-list.is-ready li:nth-child(3) { animation-delay: 64ms; }
.home-activity-list.is-ready li:nth-child(4) { animation-delay: 96ms; }

.home-features li,
.parked-note,
.parked-links li {
  transition: transform 120ms cubic-bezier(.22, .61, .36, 1), color 120ms cubic-bezier(.22, .61, .36, 1), border-color 120ms cubic-bezier(.22, .61, .36, 1), background-color 120ms cubic-bezier(.22, .61, .36, 1);
}
.home-features li:hover { transform: translateX(3px); }
.parked-note:hover { border-color: color-mix(in srgb, var(--accent) 24%, var(--line)); }
.parked-links li:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .home-live i { animation: none; }
}