/* ==========================================================================
   Wandering Waveforms — Hybrid Landing Page (hyb7)
   - ZERO Lines Anywhere on Landing Page (0 borders, 0 button boxes, 0 underlines)
   - Brand Masthead ("Wandering Waveforms"): Exact Alt 10 Style (16px Herbik 600)
   - Top-Bar-to-Index Distance & Margins: Exact Alt 10 Geometry (48px + 12px = 60px, 44px pad-x)
   - Background & Figure Colors: Exact Alt 10 (#121212 / #FCFCFA + --p-bg-warm / --p-bg-tint)
   - Section Palette: Quiet Monochrome Muted Ink (matching Alt 10, zero rainbow tag noise)
   - Dates: Hyphen ISO Format (2026-12) in Both Index & Preview
   - Landing Figures: Interactive Across Preview Section + Preview Top Bar ONLY (Not Index Section)
   - Split & Columns: Balanced 44% Index / 56% Preview on Wide Desktop; Length Shown in Preview Meta Only
   ========================================================================== */

@font-face {
  font-family: 'Herbik';
  src: url('/fonts/Herbik.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

html,
body {
  background-color: #fcfcfa !important;
  color: #111111;
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: #121212 !important;
  color: #eaeaea;
}

/* 1. Exact Edition 10 Archival Paper Palette (Light Mode) */
#live-stage .ww-s1-refined {
  --s1-bg: #fcfcfa !important;
  --s1-ink: #111111 !important;
  --s1-muted: #666666 !important;
  --s1-summary: #262626 !important;
  --s1-rule-soft: transparent !important;
  --s1-rule-year: transparent !important;
  --s1-row-hover: rgba(17, 17, 17, 0.032) !important;
  --s1-row-active: rgba(17, 17, 17, 0.048) !important;
  --s1-accent: #111111 !important;
  --s1-rel: #444444 !important;
  --s1-rel-rule: transparent !important;
  --s1-btn-border: transparent !important;
  --s1-plate-border: transparent !important;

  /* Exact Edition 10 Paper SVG Inks (alts.css lines 1538-1557) */
  --p-bg: #fcfcfa !important;
  --p-bg-warm: #f4f4f0 !important;
  --p-bg-tint: #f2f2ee !important;
  --p-ink: #111111 !important;
  --p-monolith: #111111 !important;
  --p-ink-mid: rgba(17, 17, 17, 0.56) !important;
  --p-ink-soft: rgba(17, 17, 17, 0.22) !important;
  --p-ink-faint: rgba(17, 17, 17, 0.08) !important;
  --p-blue: #0038cc !important;
  --p-blue-soft: rgba(0, 56, 204, 0.32) !important;
  --p-red: #b8251e !important;
  --p-red-soft: rgba(184, 37, 30, 0.32) !important;
  --p-green: #1f663b !important;
  --p-green-soft: rgba(31, 102, 59, 0.32) !important;
  --p-ochre: #875a12 !important;
  --p-ochre-soft: rgba(135, 90, 18, 0.32) !important;
  --p-plum: #593b6e !important;
  --p-plum-soft: rgba(89, 59, 110, 0.32) !important;
  --p-teal: #1b5c69 !important;
  --p-teal-soft: rgba(27, 92, 105, 0.32) !important;

  /* Quiet Monochrome Archival Section Labels (Alt 10 Harmony — Zero Rainbow Tag Noise) */
  --sec-Writings: var(--s1-muted) !important;
  --sec-Lab: var(--s1-muted) !important;
  --sec-Visuals: var(--s1-muted) !important;
  --sec-Radio: var(--s1-muted) !important;
  --sec-Fragments: var(--s1-muted) !important;
  --sec-Artists: var(--s1-muted) !important;
  --sec-Directory: var(--s1-muted) !important;

  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif !important;
}

/* 2. Exact Edition 10 Matte Carbon Palette (Dark Mode — alts.css lines 1559-1587) */
#live-stage .ww-s1-refined[data-theme="dark"] {
  --s1-bg: #121212 !important;
  --s1-ink: #eaeaea !important;
  --s1-muted: #8c8c8c !important;
  --s1-summary: #cccccc !important;
  --s1-rule-soft: transparent !important;
  --s1-rule-year: transparent !important;
  --s1-row-hover: rgba(234, 234, 234, 0.032) !important;
  --s1-row-active: rgba(234, 234, 234, 0.048) !important;
  --s1-accent: #eaeaea !important;
  --s1-rel: #b8b8b8 !important;
  --s1-rel-rule: transparent !important;
  --s1-btn-border: transparent !important;
  --s1-plate-border: transparent !important;

  /* Exact Edition 10 Darkroom SVG Inks (alts.css lines 1567-1586) */
  --p-bg: #121212 !important;
  --p-bg-warm: #1a1a1a !important;
  --p-bg-tint: #1c1c1c !important;
  --p-ink: #eaeaea !important;
  --p-monolith: #eaeaea !important;
  --p-ink-mid: rgba(234, 234, 234, 0.56) !important;
  --p-ink-soft: rgba(234, 234, 234, 0.23) !important;
  --p-ink-faint: rgba(234, 234, 234, 0.09) !important;
  --p-blue: #7aa2ff !important;
  --p-blue-soft: rgba(122, 162, 255, 0.36) !important;
  --p-red: #ef6f6c !important;
  --p-red-soft: rgba(239, 111, 108, 0.36) !important;
  --p-green: #68c78e !important;
  --p-green-soft: rgba(104, 199, 142, 0.36) !important;
  --p-ochre: #e0ae58 !important;
  --p-ochre-soft: rgba(224, 174, 88, 0.36) !important;
  --p-plum: #b594e0 !important;
  --p-plum-soft: rgba(181, 148, 224, 0.36) !important;
  --p-teal: #62bac9 !important;
  --p-teal-soft: rgba(98, 186, 201, 0.36) !important;

  /* Quiet Monochrome Archival Section Labels (Alt 10 Harmony — Zero Rainbow Tag Noise) */
  --sec-Writings: var(--s1-muted) !important;
  --sec-Lab: var(--s1-muted) !important;
  --sec-Visuals: var(--s1-muted) !important;
  --sec-Radio: var(--s1-muted) !important;
  --sec-Fragments: var(--s1-muted) !important;
  --sec-Artists: var(--s1-muted) !important;
  --sec-Directory: var(--s1-muted) !important;
}

/* 3. Top Bar — Borderless Alt 10 Height (48px) & Margins (44px) + Alt 10 Brand Title */
#live-stage .ww-s1-refined .s1-topbar {
  height: 48px;
  flex: 0 0 48px;
  padding: 0 44px;
  border-bottom: 0 !important;
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif !important;
  font-size: 13.5px;
}

#live-stage .ww-s1-refined .s1-topbar-left {
  align-items: baseline;
  gap: 14px;
}

/* Exact Alt 10 Brand Style: Herbik 16px Semibold (600), 0em tracking */
#live-stage .ww-s1-refined .s1-brand-link {
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0em !important;
  color: var(--s1-ink) !important;
  text-decoration: none !important;
  border: 0 !important;
}

#live-stage .ww-s1-refined .s1-head-sep {
  display: none !important;
}

#live-stage .ww-s1-refined .s1-head-about,
#live-stage .ww-s1-refined .s1-head-about:hover {
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif !important;
  font-size: 13.5px;
  font-weight: 400;
  border: 0 !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
}
#live-stage .ww-s1-refined .s1-head-about:hover {
  color: var(--s1-ink) !important;
}

/* Hide Redundant Toolbar Clutter (01/33, Open →, Prev, Next) & Remove All Button Boxes */
#live-stage .ww-s1-refined #s1-stage-counter,
#live-stage .ww-s1-refined #s1-open-link,
#live-stage .ww-s1-refined #s1-prev,
#live-stage .ww-s1-refined #s1-next {
  display: none !important;
}

#live-stage .ww-s1-refined .s1-stage-controls {
  gap: 18px;
}

#live-stage .ww-s1-refined .s1-step-btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--s1-muted) !important;
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 4px 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#live-stage .ww-s1-refined .s1-step-btn:hover,
#live-stage .ww-s1-refined .s1-step-btn.is-on {
  background: transparent !important;
  color: var(--s1-ink) !important;
  border: 0 !important;
}

/* 4. Balanced Column Sizing (44% Index / 56% Preview on Wide Desktop) & Alt 10 Vertical Spacing */
#live-stage .ww-s1-refined .s1-head-row {
  display: none !important;
}

#live-stage .ww-s1-refined:not(.is-focus-mode) .s1-workspace {
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
}

@media (min-width: 1220px) {
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-workspace {
    grid-template-columns: 44% 56%;
  }
}

@media (min-width: 960px) and (max-width: 1219px) and (hover: hover) and (pointer: fine),
       (min-width: 960px) and (max-width: 1219px) and (min-aspect-ratio: 10/11) {
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-workspace {
    grid-template-columns: 48% 52%;
  }
}

#live-stage .ww-s1-refined:not(.is-focus-mode) .s1-ledger-pane {
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
  /* 36px + 8px (.s1-grid-row) = 44px exact left plumb line with Wandering Waveforms; 20px right pad closes dead gutter */
  padding: 12px 20px 20px 36px;
}

#live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
  --s1-stage-col-w: min(100%, 648px, calc(clamp(176px, min(58vh, 100vh - 316px), 820px) * 1.31818));
  --s1-stage-col-w: min(100%, 648px, calc(clamp(176px, min(58dvh, 100dvh - 316px), 820px) * 1.31818));
  top: 48px;
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  padding: 20px 44px 28px 28px;
}

@media (min-width: 1720px) {
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
    --s1-stage-col-w: min(100%, 720px, calc(clamp(176px, min(58dvh, 100dvh - 316px), 860px) * 1.31818));
  }
}

/* 5. Preview-Zone-Only Interactivity (Driven via hybrid.js Across Preview Pane + Preview Top Bar; Calm Default Cursor) */
#live-stage .ww-s1-refined #s1-stage-svg {
  pointer-events: none !important;
  cursor: default !important;
}

#live-stage .ww-s1-refined #s1-plate-well {
  cursor: default !important;
  touch-action: none;
}

/* 6. 3-Column Index (No Extent Column in Left Table) + Length Included in Right Preview Meta */
#live-stage .ww-s1-refined .s1-col-ext {
  display: none !important;
}

#live-stage .ww-s1-refined .s1-meta-ext-wrap {
  display: inline !important;
}

#live-stage .ww-s1-refined .s1-grid-row {
  grid-template-columns: 62px 78px minmax(0, 1fr);
  column-gap: 12px;
}

/* 7. Edition 10 Herbik Text Style, Tabular Hyphen Dates (2026-12) & Calm Preview Caption */
#live-stage .ww-s1-refined .s1-workspace .s1-dig {
  width: 7.2px;
}

#live-stage .ww-s1-refined .s1-workspace .s1-dot {
  width: 5.4px;
}

#live-stage .ww-s1-refined .s1-col-date,
#live-stage .ww-s1-refined .s1-col-sec {
  font-size: 12.5px;
  color: var(--s1-muted) !important;
}

#live-stage .ww-s1-refined .s1-col-title {
  font-size: 14px;
  letter-spacing: -0.005em;
}

#live-stage .ww-s1-refined #s1-meta {
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--s1-muted) !important;
  font-variant-numeric: tabular-nums;
}

#live-stage .ww-s1-refined #s1-meta-sec,
#live-stage .ww-s1-refined #s1-meta-fmt,
#live-stage .ww-s1-refined #s1-meta-ext {
  color: var(--s1-muted) !important;
  font-weight: 400 !important;
}

#live-stage .ww-s1-refined #s1-title {
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#live-stage .ww-s1-refined #s1-summary {
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif;
  font-size: 15px;
  line-height: 1.56;
}

#live-stage .ww-s1-refined .s1-rel-label,
#live-stage .ww-s1-refined .s1-rel-btn {
  font-family: 'Herbik', 'WWMathSym', 'WWSubSup', Georgia, serif;
  font-size: 12.5px;
}

/* Responsive Breakpoints Aligned to Alt 10 */
@media (min-width: 960px) and (max-width: 1180px) and (hover: hover) and (pointer: fine),
       (min-width: 960px) and (max-width: 1180px) and (min-aspect-ratio: 10/11) {
  #live-stage .ww-s1-refined .s1-topbar {
    padding: 0 26px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-ledger-pane {
    padding: 12px 16px 18px 20px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
    padding: 16px 26px 24px 20px;
  }
  #live-stage .ww-s1-refined .s1-grid-row {
    grid-template-columns: 60px 74px minmax(0, 1fr);
    column-gap: 10px;
  }
}

@media (min-width: 620px) and (max-width: 959px) and (hover: hover) and (pointer: fine) and (min-height: 540px),
       (min-width: 620px) and (max-width: 959px) and (any-hover: hover) and (any-pointer: fine) and (min-height: 540px),
       (min-width: 900px) and (max-width: 959px) and (min-aspect-ratio: 10/11) and (min-height: 540px) {
  #live-stage .ww-s1-refined .s1-topbar {
    height: 44px;
    flex: 0 0 44px;
    padding: 0 18px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-workspace {
    min-height: calc(100dvh - 44px);
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-ledger-pane {
    min-height: calc(100dvh - 44px);
    padding: 10px 14px 16px 14px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
    top: 44px;
    height: calc(100dvh - 44px);
    padding: 14px 18px 22px 18px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-grid-row {
    grid-template-columns: 58px 70px minmax(0, 1fr);
    column-gap: 9px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-title {
    font-size: 20px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-summary {
    font-size: 13.5px;
    line-height: 1.48;
  }
}

@media (min-width: 480px) and (max-width: 619px),
       (min-width: 620px) and (max-width: 899px) and (hover: none) and (any-hover: none) and (min-height: 540px),
       (min-width: 620px) and (max-width: 899px) and (pointer: coarse) and (any-pointer: coarse) and (min-height: 540px) {
  #live-stage .ww-s1-refined .s1-topbar {
    height: 42px;
    flex: 0 0 42px;
    padding: 0 16px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
    top: 0;
    height: 204px;
    padding: 8px 16px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-ledger-pane {
    min-height: 0;
    height: 100%;
    padding: 8px 12px 14px 12px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-grid-row {
    grid-template-columns: 58px 68px minmax(0, 1fr);
    column-gap: 8px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-meta { font-size: 11.5px; }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-title { font-size: 18.5px; line-height: 1.14; }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-summary { font-size: 13px; line-height: 1.4; }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-rel-btn { font-size: 11.5px; }
}

@media (max-width: 479px) {
  #live-stage .ww-s1-refined .s1-topbar {
    height: 40px;
    flex: 0 0 40px;
    padding: 0 16px;
  }
  #live-stage .ww-s1-refined .s1-brand-link {
    font-size: 15px !important;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
    top: 0;
    height: 100%;
    padding: 6px 16px 8px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-ledger-pane {
    min-height: 0;
    height: 100%;
    padding: 8px 12px 14px 12px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-grid-row {
    grid-template-columns: 56px 66px minmax(0, 1fr);
    column-gap: 8px;
  }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-meta { font-size: 11.5px; }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-title { font-size: 17px; line-height: 1.15; }
  #live-stage .ww-s1-refined:not(.is-focus-mode) #s1-summary { font-size: 12.8px; line-height: 1.38; }
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-rel-btn { font-size: 11.5px; }
}

@media (min-width: 960px) and (min-height: 760px) and (hover: hover) and (pointer: fine) {
  #live-stage .ww-s1-refined:not(.is-focus-mode) .s1-caption-sheet {
    height: 202px;
  }
}

/* 8. Zero Lines Anywhere on Page & Neutral Ink Highlights (Zero Blue) */
#live-stage .ww-s1-refined .s1-ledger-pane {
  border-right: 0 !important;
}

#live-stage .ww-s1-refined .s1-row,
#live-stage .ww-s1-refined .s1-row[data-year-break="1"],
#live-stage .ww-s1-refined .s1-row[data-last-row="1"] {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

#live-stage .ww-s1-refined .s1-row[data-year-break="1"] {
  margin-bottom: 5px;
}

#live-stage .ww-s1-refined .s1-row.is-active {
  box-shadow: none !important;
}

#live-stage .ww-s1-refined .s1-row.is-active .s1-col-title {
  color: var(--s1-ink) !important;
  font-weight: 600;
  text-shadow: none !important;
}

#live-stage .ww-s1-refined #s1-plate-well {
  border: 0 !important;
}

#live-stage .ww-s1-refined .s1-caption-sheet,
#live-stage .ww-s1-refined.is-focus-mode .s1-caption-sheet {
  border-top: 0 !important;
  padding-top: 10px;
}

#live-stage .ww-s1-refined #s1-title-link,
#live-stage .ww-s1-refined #s1-title-link:hover {
  color: var(--s1-ink) !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
}
#live-stage .ww-s1-refined #s1-title-link:hover {
  opacity: 0.72;
}

#live-stage .ww-s1-refined .s1-rel-btn,
#live-stage .ww-s1-refined .s1-rel-btn:hover {
  border-bottom: 0 !important;
  text-decoration: none !important;
}
#live-stage .ww-s1-refined .s1-rel-btn:hover {
  color: var(--s1-ink) !important;
  opacity: 0.72;
}

#live-stage .ww-s1-refined .s1-stage-pane,
#live-stage .ww-s1-refined:not(.is-focus-mode) .s1-stage-pane {
  border-bottom: 0 !important;
}