/* newsflashohio.com v1.1.0: one stylesheet; the only script of our own is assets/ae-size.js (the ad slot size). Tokens first; contrast pairs are checked by tools/qa/contrast.py. */

@font-face {
  font-family: "NFO Display";
  src: url("fonts/nfo-display-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  /* optional: the preloaded font is used when it arrives in time, otherwise the fallback stays (never a layout shift) */
  font-display: optional;
}

:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #4d4d4d;
  --panel: #f3f2ee;
  --line: #d6d4cc;
  --line-strong: #77746a;
  --red: #c8102e;
  --red-ink: #b00d27;
  --yellow: #ffd200;
  --black: #111111;
  --white: #ffffff;
  --sec-ohio: #c8102e;
  --sec-cleveland: #12284c;
  --sec-columbus: #4b2a7b;
  --sec-cincinnati: #a3401a;
  --sec-sports: #0f5e36;
  --sec-weather: #0b57a4;
  --sec-entertainment: #9b0f6b;
  --display: "NFO Display", "Oswald", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --ink: #f1f1f1;
    --muted: #bdbdbd;
    --panel: #1b1b1b;
    --line: #3a3a3a;
    --line-strong: #8f8f8f;
    --red-ink: #ff6b78;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--text); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: .005em; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
a:hover { color: var(--red-ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* focus: a dark ring with a yellow halo reads on every background the page uses */
:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 6px var(--yellow); }
main:focus { outline: none; box-shadow: none; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 10; background: var(--yellow); color: var(--black); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

/* every link is a >= 24 px target */
main a, .site-footer a, .latest a { display: inline-block; min-height: 24px; }

/* top strip + header */
.topstrip { background: var(--black); color: var(--white); font-size: .875rem; }
.topstrip-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding-top: 6px; padding-bottom: 6px; }
.topstrip p:first-child { font-weight: 700; }
.site-header { border-bottom: 5px solid var(--red); background: var(--bg); }
.header-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 10px; padding-bottom: 10px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 8.5vw, 2.6rem); max-width: 100%; flex-wrap: wrap; line-height: 1; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wm-flash { background: var(--red); color: var(--white); padding: 2px 8px 4px; transform: skew(-8deg); display: inline-block; }
.nav { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; text-decoration: none; border-bottom: 4px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--red); }

/* latest banner */
.latest { background: var(--red); color: var(--white); }
.latest a { color: var(--white); text-decoration: none; }
.latest a:hover { text-decoration: underline; }
.latest a:hover { color: var(--yellow); }
.alert-row { background: var(--yellow); color: var(--black); font-weight: 700; }
.alert-row a, .alert-row a:hover { color: var(--black); }
.alert-in, .latest-in { display: flex; align-items: flex-start; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.tag { flex: none; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1rem; padding: 2px 8px; line-height: 1.4; }
.tag-latest { background: var(--yellow); color: var(--black); }
.tag-alert { background: var(--black); color: var(--yellow); }
.latest-list { display: flex; flex-wrap: wrap; gap: 4px 0; }
.latest-list li { flex: 1 1 260px; padding-right: 18px; font-weight: 600; line-height: 1.35; }
.latest-src { display: block; font-size: .8rem; font-weight: 400; opacity: 1; }
.latest-empty { font-weight: 600; }

/* hero */
.hero { padding: 22px 0 8px; }
.hero-h { font-size: 1.6rem; text-transform: uppercase; border-left: 8px solid var(--red); padding-left: 10px; margin-bottom: 16px; }
.hero-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.lead { background: var(--black); color: var(--white); }
.lead .art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 900px) { .lead .art { aspect-ratio: 2 / 1; } }
.lead-body { padding: 16px 18px 20px; display: grid; gap: 10px; justify-items: start; }
.lead-title { font-size: clamp(1.9rem, 4.6vw, 3.3rem); text-transform: uppercase; }
.lead-title a { color: var(--white); text-decoration: none; }
.lead-title a:hover { color: var(--yellow); text-decoration: underline; }
.lead .meta { color: #e0e0e0; }
.lead .src { color: var(--yellow); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; background: var(--yellow); color: var(--black); font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; text-decoration: none; }
.btn:hover { background: var(--white); color: var(--black); }
.rail { background: var(--panel); padding: 16px 18px; border-top: 6px solid var(--black); }
.rail-h { font-size: 1.35rem; text-transform: uppercase; margin-bottom: 10px; }
.rail-list { counter-reset: r; display: grid; gap: 14px; }
.rail-list li { counter-increment: r; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 8px; }
.rail-list li::before { content: counter(r); grid-row: span 2; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--red-ink); }
.rail-title { font-size: 1.15rem; text-transform: uppercase; font-weight: 600; }
.rail-title a, .card-title a { text-decoration: none; }
.rail-title a:hover, .card-title a:hover { text-decoration: underline; }

.meta { font-size: .875rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 4px; }
.src { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--red-ink); }
.sec-tag { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: .85rem; padding: 0 6px; color: var(--white); background: var(--sec-ohio); line-height: 1.6; }
.sec-tag-cleveland { background: var(--sec-cleveland); }
.sec-tag-columbus { background: var(--sec-columbus); }
.sec-tag-cincinnati { background: var(--sec-cincinnati); }
.sec-tag-sports { background: var(--sec-sports); }
.sec-tag-weather { background: var(--sec-weather); }
.sec-tag-entertainment { background: var(--sec-entertainment); }

/* sections */
.sec { padding: 26px 0 4px; --c: var(--sec-ohio); }
.sec-cleveland { --c: var(--sec-cleveland); }
.sec-columbus { --c: var(--sec-columbus); }
.sec-cincinnati { --c: var(--sec-cincinnati); }
.sec-sports { --c: var(--sec-sports); }
.sec-weather { --c: var(--sec-weather); }
.sec-entertainment { --c: var(--sec-entertainment); }
.sec-bar { background: var(--c); color: var(--white); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 8px 14px; margin-bottom: 14px; }
.sec-bar h2 { font-size: 2rem; text-transform: uppercase; }
.sec-src { font-size: .9rem; font-weight: 600; }
.sec-src a { color: var(--white); }
.sec-src a:hover { color: var(--yellow); }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { border-top: 5px solid var(--c); background: var(--bg); }
.card .art { width: 100%; aspect-ratio: 16 / 9; }
/* phones: small cards become thumbnail rows so the page stays scannable */
@media (max-width: 759px) {
  .cards { gap: 12px; }
  .card:not(.card-big) { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: start; padding-top: 8px; }
  .card:not(.card-big) .card-body { padding: 0; }
  .card:not(.card-big) .card-title { font-size: 1.05rem; }
  .latest-list li:nth-child(n+3) { display: none; }
}
.card-body { padding: 10px 2px 4px; }
.card-title { font-size: 1.2rem; text-transform: uppercase; font-weight: 600; }
@media (min-width: 760px) {
  .card-big { grid-column: span 2; grid-row: span 2; }
  .card-big .card-title { font-size: 2rem; font-weight: 700; }
}

.slot { border: 3px dashed var(--line-strong); padding: 16px; display: grid; gap: 14px; align-items: center; background: var(--panel); }
@media (min-width: 640px) { .slot { grid-template-columns: 220px 1fr; } .slot-hero, .slot-sm { grid-template-columns: 1fr; } }
.slot-h { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; margin-bottom: 4px; }
.slot-art { opacity: .9; }

.weather { display: grid; gap: 16px; align-items: center; }
@media (min-width: 640px) { .weather { grid-template-columns: 260px 1fr; } }
.weather-h { font-family: var(--display); font-weight: 600; font-size: 1.45rem; text-transform: uppercase; line-height: 1.2; margin-bottom: 8px; }
.weather-none a, .about a, .site-footer a { text-decoration: underline; }
.alerts { display: grid; gap: 12px; }
.alert { border-left: 6px solid var(--sec-weather); padding: 6px 12px; background: var(--panel); }
.alert-severe, .alert-extreme { border-left-color: var(--red); }
.alert-area { font-size: .95rem; }

/* about + footer */
.about { margin-top: 32px; padding: 28px 0; background: var(--panel); border-top: 6px solid var(--black); }
.about-in { display: grid; gap: 24px; }
@media (min-width: 900px) { .about-in { grid-template-columns: 1fr 1fr; } }
.about h2 { font-size: 1.8rem; text-transform: uppercase; margin-bottom: 10px; }
.about-h3 { font-size: 1.3rem; text-transform: uppercase; margin-bottom: 10px; }
.how { list-style: square; padding-left: 1.2rem; display: grid; gap: 6px; }
.sources { display: grid; gap: 6px; }
.sources-sec { font-size: .85rem; color: var(--muted); text-transform: uppercase; font-weight: 600; margin: 0 6px; }
.terms { font-size: .9rem; }
.about-note { margin-top: 10px; color: var(--muted); }

.site-footer { background: var(--black); color: var(--white); padding: 24px 0 32px; }
.footer-in { display: grid; gap: 12px; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--yellow); }
.wordmark-footer { font-size: clamp(1.4rem, 7vw, 1.8rem); color: var(--white); }
.footer-lines { display: grid; gap: 4px; font-size: .95rem; }

.notfound { padding: 48px 0 56px; }
.kicker { font-weight: 700; text-transform: uppercase; color: var(--red-ink); margin-bottom: 6px; }
.intro { margin: 10px 0 18px; font-size: 1.15rem; }

@media (max-width: 520px) {
  .sec-bar h2 { font-size: 1.6rem; }
  .nav a { padding: 0 8px; font-size: 1rem; }
}

/* ---------- v1.1.0 (REQ-20261027): archive pages, republished stories, NWS alert pages, search, privacy ---------- */
.nav a[aria-current="page"] { border-bottom-color: var(--red); }
.sec-more { margin: -6px 0 12px; font-weight: 700; }
.sec-more a { text-decoration: underline; }
.kind { font-weight: 700; color: var(--ink); }
.kind-out { font-weight: 400; color: var(--muted); }

.page-sec { padding-top: 22px; }
.page-sec .sec-bar h1 { font-size: 2.2rem; text-transform: uppercase; }
.archive-note { color: var(--muted); margin: 0 0 14px; }
.rows { display: grid; gap: 0; border-top: 3px solid var(--c, var(--red)); }
.row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.row-title { font-size: 1.3rem; text-transform: uppercase; font-weight: 600; line-height: 1.15; }
.row-title a { text-decoration: none; }
.row-title a:hover { text-decoration: underline; }
.row-area { margin-top: 4px; }
.row-out { margin-top: 14px; }
.row-out a { text-decoration: underline; }
.state { font-weight: 700; padding: 0 6px; }
.state-expired { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); }
.state-active { background: var(--yellow); color: var(--black); }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 8px; font-weight: 700; }
.pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); text-decoration: none; }
.pager a:hover { background: var(--ink); color: var(--bg); }

/* a republished story: a readable column, the newsroom's credit lines framed above and below */
.story { padding: 22px 0 8px; }
.story-wrap { max-width: 760px; }
.story-kicker { margin-bottom: 10px; }
.story-kicker a { text-decoration: none; }
.story-h { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.08; margin-bottom: 14px; }
.credit { display: grid; gap: 6px; padding: 12px 14px; background: var(--panel); border-left: 6px solid var(--red); }
.credit a, .repub-note a, .prose a, .story-body a { text-decoration: underline; }
.credit-top { margin-bottom: 20px; }
.credit-end { margin-top: 22px; }
.byline { font-weight: 700; }
.story-body { font-size: 1.125rem; line-height: 1.65; overflow-wrap: anywhere; }
.story-body > * + * { margin-top: 1em; }
.story-body h2, .story-body h3, .story-body h4, .story-body h5, .story-body h6 { font-family: var(--text); font-weight: 700; line-height: 1.25; margin-top: 1.4em; }
.story-body h2 { font-size: 1.4rem; }
.story-body h3 { font-size: 1.25rem; }
.story-body ul, .story-body ol { padding-left: 1.4rem; }
.story-body ul { list-style: disc; }
.story-body ol { list-style: decimal; }
.story-body li + li { margin-top: .35em; }
.story-body blockquote { margin: 1em 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--line-strong); }
.story-body table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; font-size: 1rem; }
.story-body th, .story-body td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.story-body pre { overflow-x: auto; white-space: pre-wrap; }
.story-body p:empty, .story-body div:empty { display: none; }
.story-body hr { border: 0; border-top: 1px solid var(--line); }
.story-body a { display: inline; min-height: 0; padding: 2px 0; } /* inline links: 2px padding makes a 25px target without moving the text */
.repub-note { margin-top: 18px; padding: 12px 14px; border: 2px dashed var(--line-strong); display: grid; gap: 6px; color: var(--ink); }
.alert-status { margin: 0 0 8px; font-size: 1.1rem; }
.alert-status-expired { color: var(--ink); }
.alert-text p { white-space: normal; }
.alert-headline { font-weight: 700; }

/* search, privacy */
.page { padding: 22px 0 8px; }
.page-wrap { max-width: 860px; }
.search { display: grid; gap: 6px; margin: 4px 0 18px; }
.search label { font-weight: 700; }
.search-row { display: flex; flex-wrap: wrap; gap: 8px; }
.search input { flex: 1 1 240px; min-height: 44px; padding: 8px 10px; font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--ink); border-radius: 0; }
.search button { border: 0; cursor: pointer; }
.prose h2 { font-size: 1.6rem; text-transform: uppercase; margin: 26px 0 10px; }
.prose ul { list-style: square; padding-left: 1.2rem; display: grid; gap: 8px; margin-bottom: 12px; }
.prose p + p { margin-top: 10px; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer on every public page except a republished story (the
   controllers opt in). The label and the reserved height are on the <ins>, so when tag.js (or ae-size.js) hides a slot it
   cannot fill, the label and the space go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250).
   display stays in this file and is never !important: tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 16px; }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 32px auto 40px; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 700 11px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin: 24px auto 32px; } }
@media print { .ae-slot { display: none; } }