/* ==========================================================================
   KE8OIR: stylesheet

   RE-THEMING: change the variables in the first two blocks (light, then dark).
   Page markup never needs to change. Keep text/background pairs at WCAG AA
   contrast (4.5:1 for body text, 3:1 for large text and UI outlines).
   ========================================================================== */

/* ---- 1. Design tokens: light theme (default) ----------------------------- */
:root {
  /* Color */
  --color-bg: #fbf7ef;            /* page background (warm paper) */
  --color-surface: #ffffff;       /* cards, header */
  --color-surface-2: #f3ead8;     /* subtle panels, table heads */
  --color-text: #231d12;
  --color-muted: #5c5140;
  --color-border: #d9cbb0;
  --color-accent: #e39a0b;        /* amber: decoration, meter, ticks */
  --color-accent-strong: #8a4a00; /* amber for TEXT/links on light backgrounds */
  --color-link: #8a4a00;
  --color-link-hover: #5e3000;
  --color-button-bg: #f2a81d;     /* primary button */
  --color-button-text: #1d1405;
  --color-focus: #0b57d0;         /* focus ring (distinct from the amber accent) */
  --color-notice-bg: #fff2cc;
  --color-notice-text: #3a2c00;

  /* Typography: system stacks only, so nothing is downloaded */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale (fluid) */
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 1.95rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.8vw, 2.7rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  --leading: 1.6;
  --leading-tight: 1.2;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;

  /* Shape and layout */
  --radius: 0.6rem;
  --radius-s: 0.35rem;
  --gutter: var(--space-s);
  --measure: 68ch;                /* comfortable reading width */
  --maxw: 68rem;
  --tap: 2.75rem;                 /* minimum touch target */
  --shadow: 0 1px 2px rgb(60 40 0 / 0.08), 0 4px 14px rgb(60 40 0 / 0.06);
}

/* ---- 2. Dark theme (follows the visitor's system setting) --------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14110c;
    --color-surface: #1d1912;
    --color-surface-2: #29231a;
    --color-text: #f3ecdd;
    --color-muted: #bfb29b;
    --color-border: #3d3426;
    --color-accent: #ffb52e;
    --color-accent-strong: #ffc766;
    --color-link: #ffc766;
    --color-link-hover: #ffe0a3;
    --color-button-bg: #ffb52e;
    --color-button-text: #1a1204;
    --color-focus: #8ab4ff;
    --color-notice-bg: #3a2f10;
    --color-notice-text: #ffe9b0;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 14px rgb(0 0 0 / 0.35);
  }
}

/* ---- 3. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-m); }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
main:focus { outline: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: var(--leading-tight); margin: 0 0 var(--space-xs); text-wrap: balance; }
h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p, ul, ol, dl { margin: 0 0 var(--space-s); }
a { color: var(--color-link); text-underline-offset: 0.15em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--color-link-hover); }
.mono, code, time.mono { font-family: var(--font-mono); font-size: 0.94em; }
.muted { color: var(--color-muted); }
.lead { font-size: var(--step-1); max-width: var(--measure); color: var(--color-text); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--space-xs); top: -4rem; z-index: 100;
  background: var(--color-button-bg); color: var(--color-button-text);
  padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-s); font-weight: 700;
}
.skip-link:focus { top: var(--space-xs); }

/* ---- 4. Layout ------------------------------------------------------------ */
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--space-l); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2xs) var(--space-m); }
.page-head { padding-top: var(--space-l); padding-bottom: var(--space-s); }
.prose { max-width: var(--measure); }
.wrap.prose { margin-inline: auto; }
@media (min-width: 72rem) { .wrap.prose { margin-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2)); } }
.prose h2 { margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-strong); margin-bottom: var(--space-2xs);
}

/* ---- 5. Header and navigation -------------------------------------------- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-m); padding-block: var(--space-2xs); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-text); min-height: var(--tap); }
.brand:hover { color: var(--color-text); }
.smeter { color: var(--color-muted); flex: none; }
.smeter__hot { fill: var(--color-accent); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__call { font-size: var(--step-1); font-weight: 700; letter-spacing: 0.06em; }
.brand__tag { font-size: var(--step--1); color: var(--color-muted); }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-3xs); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--space-xs); text-decoration: none; color: var(--color-text);
  font-weight: 600; font-size: var(--step--1); border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: var(--color-link-hover); border-bottom-color: var(--color-border); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-accent); color: var(--color-accent-strong); }

/* ---- 6. Dial motif: a frequency-scale ruler used as a divider ----------- */
.dial-rule {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--color-accent) 0 2px, transparent 2px 40px) bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--color-accent) 0 1px, transparent 1px 8px) bottom / 100% 7px no-repeat;
  opacity: 0.8;
}

/* ---- 7. Hero -------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(60rem 22rem at 90% -40%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.hero__inner { padding-block: var(--space-xl) var(--space-l); }
.hero h1 { margin-bottom: var(--space-s); }
.callsign { letter-spacing: 0.06em; color: var(--color-accent-strong); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-m); }

/* ---- 8. Buttons, tags, notices ------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: var(--space-2xs) var(--space-m); border-radius: var(--radius-s);
  background: var(--color-button-bg); color: var(--color-button-text);
  font-weight: 700; text-decoration: none; border: 2px solid var(--color-button-bg);
}
.button:hover { color: var(--color-button-text); filter: brightness(1.06); }
.button--ghost { background: transparent; color: var(--color-link); border-color: var(--color-accent); }
.button--ghost:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-link-hover); filter: none; }

.tag {
  display: inline-block; padding: 0.1rem 0.55rem; border: 1px solid var(--color-border);
  border-radius: 999px; font-size: var(--step--1); background: var(--color-surface-2); color: var(--color-text);
}
.tag--sample { border-style: dashed; border-color: var(--color-accent-strong); color: var(--color-accent-strong); background: transparent; font-weight: 700; }
.notice {
  background: var(--color-notice-bg); color: var(--color-notice-text);
  border-left: 5px solid var(--color-accent); padding: var(--space-xs) var(--space-s);
  margin-block: var(--space-s); border-radius: var(--radius-s);
}
.empty { padding: var(--space-m); border: 2px dashed var(--color-border); border-radius: var(--radius); color: var(--color-muted); }
.empty[hidden] { display: none; }

/* ---- 9. Events ------------------------------------------------------------ */
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); }
.event {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--space-s);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-s); box-shadow: var(--shadow);
}
.event[hidden] { display: none; }
.event__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent); border-radius: var(--radius-s);
  padding: var(--space-3xs); text-align: center; align-self: start; line-height: 1.1;
}
.event__month { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); font-weight: 700; }
.event__day { font-size: var(--step-2); font-weight: 700; }
.event__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-2xs); }
.event__title { margin-bottom: var(--space-3xs); font-size: var(--step-1); }
.event__title a { color: var(--color-text); text-decoration-color: var(--color-accent); }
.event__title a:hover { color: var(--color-link-hover); }
.event__when { margin-bottom: var(--space-3xs); font-weight: 600; }
.event__when .mono { font-weight: 500; }
.event__when .sep { margin-inline: var(--space-3xs); color: var(--color-muted); }
.event__where { color: var(--color-muted); margin-bottom: var(--space-2xs); }
.event__desc { margin-bottom: var(--space-xs); max-width: var(--measure); }
.event__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); margin: 0; font-size: var(--step--1); font-weight: 600; }
.event__links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.event-list--past .event { box-shadow: none; background: transparent; }
.event-list--past .event__date { border-top-color: var(--color-border); }

.subscribe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }

details.past > summary {
  cursor: pointer; min-height: var(--tap); display: flex; align-items: center;
  font-size: var(--step-1); font-weight: 700; padding-block: var(--space-2xs);
}
details.past[open] > summary { margin-bottom: var(--space-s); }
details.past[hidden] { display: none; }

/* ---- 10. Cards, spec lists ------------------------------------------------ */
.cards { list-style: none; margin: var(--space-s) 0; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-s); box-shadow: var(--shadow); }
.card h3 { margin-bottom: var(--space-2xs); }
.card p:last-child { margin-bottom: 0; }
.cards--past .card { box-shadow: none; background: transparent; }
.specs { margin: 0 0 var(--space-xs); display: grid; gap: var(--space-2xs); }
.specs > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--space-xs); }
.specs dt { color: var(--color-muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.15em; }
.specs dd { margin: 0; overflow-wrap: anywhere; }
.card__verified { font-size: var(--step--1); margin-top: var(--space-xs); }
.card__note { color: var(--color-muted); }

.jump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-s); }
.jump a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--space-xs); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); text-decoration: none; font-weight: 600; font-size: var(--step--1); }
.jump a:hover { border-color: var(--color-accent); }

.teaser { border-top: 1px solid var(--color-border); }
.teaser p { max-width: var(--measure); }
.steps { padding-left: var(--space-m); }
.steps li { margin-bottom: var(--space-2xs); padding-left: var(--space-3xs); }
.glossary { display: grid; gap: var(--space-2xs) var(--space-s); grid-template-columns: max-content 1fr; }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 0; }
@media (max-width: 34rem) { .glossary { grid-template-columns: 1fr; } .glossary dd { margin-bottom: var(--space-xs); } }

/* ---- 11. Special event pages ---------------------------------------------- */
.special__hero { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding-top: var(--space-l); }
.special__hero .wrap { padding-bottom: var(--space-m); }
.facts { list-style: none; padding: 0; margin: var(--space-m) 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.facts li { border-left: 4px solid var(--color-accent); padding-left: var(--space-xs); }
.facts__label { display: block; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); }
.facts__value { display: block; font-weight: 600; }
.facts__call { font-size: var(--step-2); letter-spacing: 0.06em; color: var(--color-accent-strong); }
.special .prose { padding-block: var(--space-m) var(--space-xl); }
.schedule { list-style: none; padding: 0; }
.schedule li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--space-xs); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-border); }
.schedule__time { color: var(--color-accent-strong); font-weight: 700; }
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-s); }
table { border-collapse: collapse; width: 100%; min-width: 28rem; background: var(--color-surface); }
th, td { text-align: left; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { background: var(--color-surface-2); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: 0; }
.gallery { list-style: none; padding: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: var(--radius-s); border: 1px solid var(--color-border); }
.gallery figcaption { font-size: var(--step--1); color: var(--color-muted); margin-top: var(--space-3xs); }

/* ---- 12. Footer ------------------------------------------------------------ */
.site-footer { margin-top: var(--space-xl); background: var(--color-surface); border-top: 1px solid var(--color-border); font-size: var(--step--1); }
.site-footer .dial-rule { margin-top: -14px; }
.site-footer__inner { padding-block: var(--space-m); }
.site-footer p { margin-bottom: var(--space-2xs); }

/* ---- 13. Wider screens ------------------------------------------------------ */
@media (min-width: 48rem) {
  :root { --gutter: var(--space-m); }
  .event { grid-template-columns: 5rem 1fr; gap: var(--space-m); padding: var(--space-m); }
  .site-nav a { font-size: var(--step-0); padding-inline: var(--space-s); }
}

/* ---- 14. Motion: a gentle meter sweep, only if the visitor allows motion --- */
@media (prefers-reduced-motion: no-preference) {
  .smeter__hot { animation: meter-glow 4s ease-in-out infinite alternate; }
  @keyframes meter-glow { from { opacity: 0.55; } to { opacity: 1; } }
  .button, .site-nav a, .jump a { transition: background-color 0.15s, border-color 0.15s, filter 0.15s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- 15. Print --------------------------------------------------------------- */
@media print {
  .site-nav, .skip-link, .hero__actions, .subscribe, .dial-rule { display: none; }
  body { background: #fff; color: #000; }
  .event, .card { box-shadow: none; break-inside: avoid; }
}