/* ============================================================================
   RADIO DAD · SITE V2 · sub.css — the subpage layer.
   Loaded AFTER tokens.css and v2.css: shared identity (.mat, .broadcast,
   .wrap, .coord, .btn, .colophon, grain) comes from v2.css; this file only
   adds what subpages need — the topbar, prose typography, and a few small
   components. Keep it lean; anything two pages share belongs here, anything
   every page shares probably belongs in v2.css.
   ========================================================================== */

/* ---- topbar: the one piece of chrome the homepage doesn't wear ---------- */
.topbar { position: sticky; top: 0; z-index: 40;
  background: rgba(22,19,16,.86);
  background: color-mix(in srgb, var(--n1) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-2); }
.tb { display: flex; align-items: center; gap: 18px; min-height: 60px; }
.tb-brand { display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-family: var(--serif); font-weight: 600; font-size: 1.12rem; }
.tb-brand img { border-radius: 50%; display: block; }
.tb-freq { margin: 0; margin-right: auto; font-family: var(--mono);
  font-size: var(--fs-mono-sm); letter-spacing: .18em; color: var(--ink-35); }
.tb-links { display: flex; align-items: center; gap: 22px; }
.tb-links a { color: var(--ink-70); text-decoration: none; font-size: 14.5px; }
.tb-links a:hover { color: var(--ink); }
.tb-links a.tb-cta { color: var(--ember); border: 1px solid var(--hair);
  border-radius: var(--r-pill); padding: 8px 16px; }
.tb-links a.tb-cta:hover { border-color: var(--ember); color: var(--ember); }
.tb-toggle { display: none; background: none; border: 0; color: var(--ink-70);
  padding: 10px; margin: 0 -10px 0 auto; cursor: pointer; }
@media (max-width: 760px) {
  .tb-freq { display: none; }
  .tb-toggle { display: block; }
  .tb-links { display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 0 14px;
    background: var(--n1); border-bottom: 1px solid var(--hair-2); }
  .tb-links a { padding: 12px clamp(18px, 3.4vw, 40px); }
  .tb-links a.tb-cta { border: 0; padding: 12px clamp(18px, 3.4vw, 40px); }
  .topbar.open .tb-links { display: flex; }
}

/* ---- page skeleton ------------------------------------------------------ */
.sub-hero { padding: clamp(56px, 9vw, 110px) 0 clamp(28px, 4vw, 48px); }
.sub-hero h1 { font-family: var(--serif); font-weight: 550;
  font-size: clamp(38px, 5.6vw, 76px); letter-spacing: var(--track-h2);
  line-height: 1.02; margin: 14px 0 18px; }
.sub-hero h1 em { font-style: italic; color: var(--ember); }
.sub-hero .lead { max-width: 58ch; }
.sub-section { padding: clamp(28px, 4vw, 52px) 0; }
.sub-section:last-of-type { padding-bottom: clamp(64px, 8vw, 110px); }

/* ---- prose: long-form reading (learn, legal, about) --------------------- */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em;
  margin: 2.2em 0 .6em; }
.prose h3 { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; margin: 1.8em 0 .5em; }
.prose p, .prose li { color: var(--ink-70); line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--ink-35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ember); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .45em 0; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.4em 0; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 18px;
  border-left: 2px solid var(--ember); color: var(--ink-70); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose th { text-align: left; font-family: var(--mono); font-size: var(--fs-mono-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50);
  font-weight: 400; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); }
.prose td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair-2); color: var(--ink-70); }
.prose .table-scroll { overflow-x: auto; }

/* eyebrow above h1/h2: mono furniture, same voice as act-heads */
.eyebrow2 { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember); margin: 0; }

/* ---- note plate: "a note from the maker", callouts ---------------------- */
.plate { background: var(--n2); border: 1px solid var(--hair);
  border-radius: var(--r-plate); padding: clamp(18px, 3vw, 28px); margin: 1.8em 0; }
.plate > :first-child { margin-top: 0; }
.plate > :last-child { margin-bottom: 0; }
.plate .sig { font-family: var(--serif); font-style: italic; color: var(--ink); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--hair-2); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: baseline;
  gap: 14px; padding: 18px 0; font-family: var(--serif); font-weight: 600;
  font-size: 1.12rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--mono); color: var(--ember);
  flex: none; transition: transform var(--settle-fast) var(--settle-ease); }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details > :not(summary) { margin: 0 0 18px 26px; }
.faq details p, .faq details li { color: var(--ink-70); line-height: 1.6; }

/* ---- figures: screenshots + character art ------------------------------- */
.shot { margin: 2em 0; }
.shot img { max-width: min(320px, 100%); height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--hair); }
/* genis sahne kareleri (16:9 uretim sanati): telefon vuruslarinin aksine tam genislik */
.shot--scene img { max-width: 100%; }
.shot figcaption, .portrait figcaption { font-family: var(--mono);
  font-size: var(--fs-mono-sm); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-50); margin-top: 12px; }
.portrait { margin: 1.4em 0 1.8em; }
.portrait img { width: min(220px, 60%); height: auto; display: block;
  border-radius: 50%; border: 1px solid var(--hair); background: var(--n2); }

/* ---- station directory (stations.html, generated body) ------------------ */
.dir-lede { max-width: 68ch; color: var(--ink-70); line-height: 1.65; }
.dir-close { max-width: 68ch; color: var(--ink-50); margin: clamp(28px, 4vw, 44px) 0 0; }
.stations-sec { margin-top: clamp(30px, 5vw, 48px); }
.dir-region { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.6vw, 28px);
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.dir-region span { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-50); }
.stations-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 24px; }
.stations-grid a { display: flex; align-items: baseline; gap: 8px; padding: 9px 2px;
  color: var(--ink-70); text-decoration: none; border-bottom: 1px solid var(--hair-2);
  font-size: 14.5px; }
.stations-grid a:hover { color: var(--ink); border-bottom-color: var(--ember); }
.dir-flag { flex: none; }
.dir-n { margin-left: auto; font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--ink-50); }

/* ---- CTA band at the foot of content pages ------------------------------ */
.sub-cta { background: var(--n2); border: 1px solid var(--hair);
  border-radius: var(--r-plate); padding: clamp(24px, 4vw, 40px);
  margin-top: clamp(36px, 5vw, 64px); }
.sub-cta h2 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 40px); margin: 10px 0 8px; }
.sub-cta .lead { max-width: 52ch; }
.sub-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

/* ---- quiet entrance: one CSS-only fade, no JS, honest under RM ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sub-hero > .wrap { animation: subin var(--settle-t) var(--settle-ease) both; }
  @keyframes subin {
    from { opacity: 0; filter: blur(var(--settle-blur)); transform: translateY(8px); }
    to   { opacity: 1; filter: none; transform: none; }
  }
}

/* ---- print: legal pages get printed; drop the theatre ------------------- */
@media print {
  .topbar, .colophon, .sub-cta, .skip { display: none !important; }
  body, .broadcast { background: none !important; border: 0 !important; }
  body::after { display: none !important; }
  .prose p, .prose li { color: inherit; }
}