/* Layout: one reading column (~68ch) under a masthead; a station-log slug line opens each page. */
:root {
  --paper: #f6f8f3;
  --paper-2: #eaeee4;
  --ink: #1b2118;
  --ink-soft: #4a5344;
  --rule: #cfd6c6;
  --green: #8dbf41;          /* Fort Dodge Radio green: marks, rules, fills */
  --green-ink: #4c7619;      /* readable green for links and small text on paper */
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --measure: 68ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121611; --paper-2: #1b2119; --ink: #e5eadd; --ink-soft: #a9b39f;
    --rule: #333d2e; --green: #97c94a; --green-ink: #a9d662; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121611; --paper-2: #1b2119; --ink: #e5eadd; --ink-soft: #a9b39f;
  --rule: #333d2e; --green: #97c94a; --green-ink: #a9d662; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--body);
  padding-inline: 1rem;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--green-ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 64rem; margin-inline: auto; }
.col { max-width: var(--measure); }

/* Masthead */
.mast {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.75rem 2rem; padding-block: 1.25rem 1rem; border-bottom: 1px solid var(--rule);
}
.mark { font: 800 1.35rem/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.mark span { color: var(--green); }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font: 500 0.8rem/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.nav a { color: var(--ink-soft); text-decoration: none; padding-block: 0.25rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--green); }

/* Slug line: the page's log entry */
.slug {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 2.5rem;
  font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.slug b { color: var(--green-ink); font-weight: 600; }

main { padding-block: 0 4rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 8vw, 4.75rem); overflow-wrap: break-word; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; margin: 0.5rem 0 1rem; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); font-weight: 700; text-transform: uppercase; margin: 3.25rem 0 0.75rem; padding-top: 1rem; border-top: 3px solid var(--green); max-width: var(--measure); }
h3 { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 0.4rem; letter-spacing: 0.01em; }
p, ul, ol, blockquote, table, figure { max-width: var(--measure); }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }
li::marker { color: var(--green-ink); }
strong { font-weight: 700; }
code { font: 0.88em/1 var(--mono); background: var(--paper-2); padding: 0.1em 0.35em; border-radius: 3px; }

.lede { font-size: 1.25rem; line-height: 1.55; color: var(--ink); max-width: 60ch; }
.byline { font: 500 0.85rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 2rem; }

blockquote {
  margin: 2rem 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--green);
  font: italic 400 1.4rem/1.45 var(--body); color: var(--ink);
}
blockquote p { margin: 0; }

/* Tables: award log, protocol declarations */
.table-wrap { overflow-x: auto; max-width: var(--measure); margin: 1rem 0 1.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th { text-align: left; font: 600 0.72rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); padding: 0.5rem 0.75rem 0.5rem 0; }
td { border-bottom: 1px solid var(--rule); padding: 0.55rem 0.75rem 0.55rem 0; vertical-align: top; }
td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

pre { max-width: var(--measure); overflow-x: auto; background: var(--paper-2); border-left: 3px solid var(--green); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; border-radius: 2px; }
pre code { background: none; padding: 0; font: 400 0.8rem/1.55 var(--mono); white-space: pre; }

/* Photos */
.photo { margin: 1.5rem 0 2rem; max-width: 100%; }
.photo img { display: block; width: 100%; border-radius: 2px; }
.photo figcaption { font: 400 0.8rem/1.45 var(--mono); color: var(--ink-soft); margin-top: 0.5rem; }
.photo.side { max-width: 22rem; }
.photo.wide { max-width: 64rem; }

/* Home */
.hero { padding-block: 1rem 0; }
.hero h1 { font-size: clamp(2.1rem, 9.5vw, 6.25rem); max-width: 12ch; margin-bottom: 0.75rem; }
.hero h1 span { color: var(--green); }
.tagline { font: 500 1.2rem/1.4 var(--body); font-style: italic; color: var(--ink-soft); margin-bottom: 0.5rem; }
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2rem 3rem; align-items: start; margin-top: 2.5rem; }
.case-grid > div { min-width: 0; }
@media (max-width: 52rem) { .case-grid { grid-template-columns: minmax(0, 1fr); } }

.clock { margin: 0; }
.clock figcaption { font: 400 0.78rem/1.5 var(--mono); color: var(--ink-soft); margin-top: 0.5rem; }
.clock .face { fill: var(--paper-2); stroke: var(--rule); }
.clock .s80 { fill: var(--green); }
.clock .s70 { fill: var(--green); opacity: 0.55; }
.clock .brk { fill: var(--ink); }
.clock .tick { stroke: var(--ink-soft); stroke-width: 1.5; }
.clock .num { fill: var(--ink-soft); font: 600 11px var(--mono); }
.clock .hub { fill: var(--paper); }
.clock .ctr { fill: var(--ink); font: 800 22px var(--display); }
.clock .ctr2 { fill: var(--ink-soft); font: 500 9px var(--mono); letter-spacing: 0.08em; }
.key { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; list-style: none; padding: 0; margin: 0.5rem 0 0; font: 400 0.75rem/1.4 var(--mono); color: var(--ink-soft); }
.key li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.key i { width: 0.8rem; height: 0.8rem; border-radius: 2px; display: inline-block; }
.key .k80 { background: var(--green); }
.key .k70 { background: var(--green); opacity: 0.55; }
.key .kb { background: var(--ink); }

.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; margin: 3rem 0 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); max-width: 64rem; }
.numbers div { padding: 1rem 1rem 1rem 0; }
.numbers dt { font: 800 2.4rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.numbers dd { margin: 0.35rem 0 0; font: 400 0.8rem/1.4 var(--mono); color: var(--ink-soft); }

.sections { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 64rem; }
.sections li { margin: 0; border-bottom: 1px solid var(--rule); }
.sections a { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 0.25rem 2rem; padding-block: 1.1rem; text-decoration: none; color: var(--ink); }
.sections a:hover .t { color: var(--green-ink); }
.sections .t { font: 700 1.35rem/1.15 var(--display); text-transform: uppercase; }
.sections .d { color: var(--ink-soft); }
@media (max-width: 40rem) { .sections a { grid-template-columns: minmax(0, 1fr); } }

/* Case studies: labeled parts */
.part { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-ink); display: block; margin-top: 1.25rem; }
.lesson { background: var(--paper-2); padding: 1rem 1.25rem; border-radius: 2px; max-width: var(--measure); }
.lesson p { margin: 0; }
.rounds { counter-reset: none; }

.cta { font: 600 0.85rem/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }

.email { font: 500 1.1rem/1.4 var(--mono); user-select: all; }

/* Footer */
.foot {
  border-top: 1px solid var(--rule); padding-block: 1.5rem 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  font: 400 0.8rem/1.5 var(--mono); color: var(--ink-soft);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.foot a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }