/* ============================================================
   SPOKE.CSS — Shared layout for all spoke pages
   (left.html, right.html, dream.html, pfc.html)
   Zone identity is applied via body class: zone-left, zone-right,
   zone-dream, zone-pfc. All color/font tokens are set per-zone
   in tokens.css (zone-tokens section).
   Sizing: prefer var(--sz-*) tokens > bare rem > px. See SIZING.md.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--c-zone-bg);
  color:      var(--c-zone-text);
  font-family: var(--f-zone-body);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100svh;
  transition: background var(--t-slow) var(--ease-out),
              color      var(--t-slow) var(--ease-out);
}

/* ── Page shell ────────────────────────────────────────────── */
.spoke-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.spoke-sidebar {
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the scrollbar drawable while keeping scroll functional.
     The sidebar can still be scrolled natively; no visible track is drawn. */
  scrollbar-width: none;                          /* Firefox */
  &::-webkit-scrollbar { display: none; }         /* Chrome, Safari (CSS nesting) */
  border-right: 0.5px solid var(--c-zone-border);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) 0 0;
  background: var(--c-zone-sidebar-bg);
  transition: background var(--t-slow) var(--ease-out),
              border-color var(--t-slow) var(--ease-out);
}

/* Fallback for browsers without CSS nesting support (pre-Chrome 112, pre-Safari 16.5) */
.spoke-sidebar::-webkit-scrollbar { display: none; }

/* Home link — back to splash */
.sidebar-home {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-zone-sidebar-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--space-md) var(--space-lg);
  border-bottom: 0.5px solid var(--c-zone-border);
  margin-bottom: var(--space-md);
  text-decoration: none;
  color: var(--c-zone-text-muted);
  /* Lock font so it renders identically in every zone */
  font-family: var(--font-nav);
  font-size: var(--sz-xs);
  letter-spacing: 0.06em;
  transition: color var(--t-fast), background var(--t-slow) var(--ease-out);
}
.sidebar-home:hover { color: var(--c-zone-text); }
.sidebar-home-glyph {
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.6;
  font-family: var(--font-nav); /* neutral font so glyph renders same size in all zones */
  display: flex;
  align-items: center;
}

/* Zone nav blocks */
.sidebar-zone {
  padding: 0 0 var(--space-sm);
}

.sidebar-zone-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs) var(--space-md);
  transition: background var(--t-fast);
}
.sidebar-zone-trigger:hover {
  background: var(--c-zone-hover);
}
.sidebar-caret-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.sidebar-zone-name {
  font-size: var(--sz-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-zone-text-muted);
  transition: color var(--t-fast);
  /* When it's an <a>, strip default link styles */
  text-decoration: none;
}
a.sidebar-zone-name:hover {
  color: var(--c-zone-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sidebar-zone.is-current .sidebar-zone-name {
  color: var(--c-zone-accent);
}
.sidebar-zone.is-current .sidebar-zone-trigger {
  cursor: default;
}
/* Show a left-pointing triangle for the current zone — greyed, non-interactive */
.sidebar-zone.is-current .sidebar-zone-trigger::after {
  content: '\25C0';   /* ◀ */
  font-size: var(--sz-2xs); /* ← inactive ◀ size; match active caret below */
  color: var(--c-zone-text-muted);
  opacity: 0.5;    /* ← inactive ◀ opacity (~line 131) */
  margin-left: auto;
  pointer-events: none;
}

.sidebar-caret {
  font-size: var(--sz-2xs); /* ← active ▶/▼ size; tweak alongside inactive ◀ above */
  color: var(--c-zone-text-muted);
  transition: transform var(--t-fast);
}
.sidebar-zone.is-open .sidebar-caret {
  transform: rotate(90deg);
}

/* Section links within a zone */
.sidebar-links {
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--t-med) var(--ease-out);
}
.sidebar-zone.is-open .sidebar-links,
.sidebar-zone.is-current .sidebar-links {
  max-height: 400px;
}

.sidebar-links a {
  display: block;
  padding: 5px var(--space-md) 5px calc(var(--space-md) + 12px);
  font-size: var(--sz-sm);
  color: var(--c-zone-text-muted);
  text-decoration: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.sidebar-links a:hover {
  color: var(--c-zone-text);
  background: var(--c-zone-hover);
}
.sidebar-links a.is-active {
  color: var(--c-zone-accent);
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--c-zone-active-bg);
}

/* Sidebar divider */
.sidebar-divider {
  height: 0.5px;
  background: var(--c-zone-border);
  margin: var(--space-sm) var(--space-md);
}

/* Theme toggle in sidebar footer */
.sidebar-footer {
  position: sticky;
  bottom: 0;
  background: var(--c-zone-sidebar-bg);
  z-index: 1;
  padding: var(--space-md);
  border-top: 0.5px solid var(--c-zone-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--t-slow) var(--ease-out);
}
.sidebar-theme-btn {
  background: var(--c-zone-toggle-bg);
  border: 0.5px solid var(--c-zone-toggle-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-family: var(--f-zone-body);
  color: var(--c-zone-toggle-text);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.sidebar-theme-btn:hover {
  color: var(--c-zone-text);
  border-color: var(--c-zone-accent);
}

/* ── Main content area ─────────────────────────────────────── */
.spoke-main {
  grid-column: 2;
  padding: var(--space-xl) clamp(var(--space-lg), 5vw, 4rem);
  max-width: 860px;
}

/* Page hero */
.spoke-hero {
  padding-bottom: var(--space-xl);
  border-bottom: 0.5px solid var(--c-zone-border);
  margin-bottom: var(--space-xl);
}

.spoke-hero-label {
  font-size: var(--sz-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-zone-accent);
  margin-bottom: var(--space-sm);
  font-family: var(--f-zone-label);
}

.spoke-hero h1 {
  font-family: var(--f-zone-heading);
  font-size: var(--sz-h1);
  font-weight: 700;
  line-height: 1.15;
  color: var(--c-zone-heading);
  margin-bottom: var(--space-md);
}

.spoke-hero-sub {
  font-size: var(--sz-md);
  color: var(--c-zone-text-muted);
  max-width: 560px;
  line-height: 1.6;
}

/* ── Sections ──────────────────────────────────────────────── */
.spoke-section {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 0.5px solid var(--c-zone-border);
}
.spoke-section:last-child {
  border-bottom: none;
}

.spoke-section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.spoke-section h2 {
  font-family: var(--f-zone-heading);
  font-size: var(--sz-h2);
  font-weight: 700;
  color: var(--c-zone-heading);
  line-height: 1.2;
}

.spoke-section-rule {
  flex: 1;
  height: 0.5px;
  background: var(--c-zone-border);
}

/* Content blocks within a section */
.spoke-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--space-md);
  padding: var(--space-md) 0;
  border-top: 0.5px solid var(--c-zone-border);
}
.spoke-entry:first-of-type { border-top: none; }

.spoke-entry-title {
  font-size: var(--sz-base);
  font-weight: 500;
  color: var(--c-zone-text);
  grid-column: 1;
}
.spoke-entry-meta {
  font-size: var(--sz-sm);
  color: var(--c-zone-text-muted);
  grid-column: 1;
  font-family: var(--f-zone-label);
}
.spoke-entry-date {
  font-size: var(--sz-sm);
  color: var(--c-zone-text-muted);
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  font-family: var(--f-zone-label);
  text-align: right;
}
.spoke-entry-detail {
  font-size: 0.875rem;
  color: var(--c-zone-text-entry);
  grid-column: 1 / -1;
  line-height: 1.5;
}
.spoke-entry-bullets {
  font-size: 0.875rem;
  color: var(--c-zone-text-entry);
  grid-column: 1 / -1;
  line-height: 1.5;
  margin: 0;
  padding-left: 1.25rem;
}
.spoke-entry-bullets li + li {
  margin-top: 0.25rem;
}

/* Tag pills */
.spoke-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-sm);
  grid-column: 1 / -1;
}
.spoke-tag {
  font-size: var(--sz-xs);
  font-family: var(--f-zone-label);
  padding: 2px 10px;
  border-radius: 20px;
  border: 0.5px solid var(--c-zone-accent);
  color: var(--c-zone-accent);
  letter-spacing: 0.04em;
}

/* Download / CTA button */
.spoke-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  border: 0.5px solid var(--c-zone-accent);
  background: transparent;
  color: var(--c-zone-accent);
  font-family: var(--f-zone-body);
  font-size: var(--sz-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  margin-top: var(--space-md);
}
.spoke-btn:hover {
  background: var(--c-zone-accent);
  color: var(--c-zone-bg);
}
.spoke-btn--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Bio prose (left professional bio, right actor bio) ─────── */
.spoke-bio-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.spoke-bio-prose p {
  font-size: var(--sz-base);
  line-height: 1.75;
  color: var(--c-zone-text);
}
.spoke-bio-prose a {
  color: var(--c-zone-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.spoke-bio-prose a:hover { opacity: 0.75; }

.spoke-bio-note {
  margin-top: var(--space-md);
  font-size: 0.75rem;
  color: var(--c-zone-text-muted);
  opacity: 0.7;
}

/* ── Sidebar font-size compensation (desktop only) ─────────── */
/*
   Each zone uses a different typeface with a different optical size.
   At the same px value they render visually unequal (PFC > Dream > Right > Left).
   These overrides nudge each zone toward visual parity.

   Scoped to min-width: 701px intentionally — mobile uses its own
   font sizes for the tab row and shouldn't inherit these corrections.

   Baseline (spoke.css defaults):
     .sidebar-zone-name  → var(--sz-xs)  [0.6875rem / ~11px]
     .sidebar-links a    → var(--sz-sm)  [0.8125rem / ~13px]

   Tune the values below by eye — zone-name and links move independently.
*/
@media (min-width: 701px) {
  /* Left / Courier Prime — smallest optical size */
  .zone-left .sidebar-zone-name { font-size: 0.75rem; } /* +1 from baseline — Courier Prime has smaller optical size */
  /* .zone-left .sidebar-links a   { font-size: var(--sz-sm); } */

  /* Right / Outfit */
  /* .zone-right .sidebar-zone-name { font-size: var(--sz-xs); } */
  /* .zone-right .sidebar-links a   { font-size: var(--sz-sm); } */

  /* Dream / Quicksand */
  /* .zone-dream .sidebar-zone-name { font-size: var(--sz-xs); } */
  /* .zone-dream .sidebar-links a   { font-size: var(--sz-sm); } */

  /* PFC / Inter — reference; no correction needed */
  /* .zone-pfc .sidebar-zone-name { font-size: var(--sz-xs); } */
  /* .zone-pfc .sidebar-links a   { font-size: var(--sz-sm); } */
}

/* ── Placeholder / empty state ─────────────────────────────── */
.spoke-placeholder {
  font-size: 0.875rem;
  color: var(--c-zone-text-muted);
  font-style: italic;
  padding: var(--space-md) 0;
  opacity: 0.6;
}

/* ── Layout wrappers (desktop behaviour) ───────────────────── */
/*
   These divs exist to enable the mobile 3-row layout. On desktop they
   are invisible to the flex algorithm — their children behave as direct
   children of .spoke-sidebar.

   Exception: .sidebar-zones is NOT display:contents so it can flex-grow
   and push .sidebar-footer to the viewport bottom when content is short.
*/
.sidebar-brand-row {
  display: contents;
}
.sidebar-zones {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Mobile strip and current-zone caret are desktop-invisible */
.sidebar-mobile-strip,
.sidebar-caret--current {
  display: none;
}


/* Footer must sort after all zones in the flex column.
   With .sidebar-brand-row { display:contents }, home and footer become
   direct flex children of .spoke-sidebar — but footer appears before
   .sidebar-zones in DOM order. A high order value keeps it last so
   position:sticky bottom:0 anchors it correctly. */
.sidebar-footer {
  order: 999;
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 700px) {

  .spoke-shell {
    grid-template-columns: 1fr;
  }

  .spoke-sidebar {
    position: sticky;
    top: 0;
    z-index: 50; /* content scrolls behind the header */
    height: auto;
    border-right: none;
    border-bottom: none; /* each row provides its own bottom border */
    flex-direction: column;
    padding: 0;
    overflow-x: clip;
  }

  /* Very short viewports (landscape phone, etc.) — unfreeze the header so
     it doesn't consume the usable screen. Threshold is ~350px tall. */
  @media (max-height: 350px) {
    .spoke-sidebar {
      position: static;
    }
  }

  /* ── Row 1: brand bar (home left, theme toggle right) ──── */
  .sidebar-brand-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 0.5px solid var(--c-zone-border);
  }
  .sidebar-brand-row .sidebar-home {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
  }
  .sidebar-brand-row .sidebar-footer {
    margin-top: 0;
    border-top: none;
    padding: 0;
  }

  /* ── Row 2: zone tabs ──────────────────────────────────── */
  .sidebar-zones {
    display: flex;
    flex-direction: row;
    border-bottom: 0.5px solid var(--c-zone-border);
  }
  .sidebar-zone {
    flex: 1;
    padding: 0;
  }
  .sidebar-zone-trigger {
    padding: var(--space-xs) var(--space-sm);
    justify-content: center;
    gap: 4px;
    cursor: pointer;
  }
  .sidebar-zone-name {
    font-size: var(--sz-2xs);
  }
  /* No dividers inside the tab row */
  .sidebar-divider {
    display: none;
  }
  /* Suppress the desktop CSS-generated ◀ indicator — mobile uses the
     .sidebar-caret--current span instead */
  .sidebar-zone.is-current .sidebar-zone-trigger::after {
    display: none;
  }
  /* Section links are hidden on mobile — sections live in the strip */
  .sidebar-links {
    display: none !important;
  }

  /* ◀ caret on the current zone tab.
     ◀ when another zone's strip is showing (not is-open).
     Rotates to ▼ (rotate -90deg) when this zone's strip is showing (is-open). */
  .sidebar-caret--current {
    display: flex;
    align-items: center;
    font-size: var(--sz-2xs);
    color: var(--c-zone-text-muted);
    opacity: 0.6;
    transition: transform var(--t-fast);
  }
  .sidebar-zone.is-open .sidebar-caret--current {
    transform: rotate(-90deg); /* ◀ → ▼ */
  }

  /* ── Row 3: section strip ──────────────────────────────── */
  .sidebar-mobile-strip {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-md);
    gap: 0;
    border-bottom: 0.5px solid var(--c-zone-border);
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
  }
  .sidebar-mobile-strip a {
    white-space: nowrap;
    font-size: 0.75rem;
    font-family: var(--font-nav);
    color: var(--c-zone-text-muted);
    text-decoration: none;
    padding: var(--space-xs) calc(var(--space-md) / 2);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color var(--t-fast), background var(--t-fast);
  }
  .sidebar-mobile-strip a:hover {
    color: var(--c-zone-accent);
  }
  .sidebar-mobile-strip a.is-active {
    color: var(--c-zone-accent);
    font-weight: 600;
    letter-spacing: 0.03em;
    background: var(--c-zone-active-bg);
  }

  .spoke-main {
    grid-column: 1;
    padding: var(--space-lg) var(--space-md);
  }

}

/* ════════════════════════════════════════════════════════════
   PFC PAGE — Styles specific to pfc.html
   (formerly pfc.css — merged here since pfc is a spoke page
   like any other and the separation added no real benefit)
   ════════════════════════════════════════════════════════════ */

/* ── Photo strip ────────────────────────────────────────────── */
.about-photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px;
  gap: 8px;
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-photo-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* When a real <img> is added, it fills the slot */
.about-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.photo-placeholder {
  width: 100%;
  height: 100%;
  background: var(--c-zone-border);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px dashed var(--c-zone-text-muted);
  border-radius: var(--radius-md);
}

.photo-placeholder-label {
  font-family: var(--f-zone-label);
  font-size: var(--sz-xs);
  letter-spacing: 0.1em;
  color: var(--c-zone-text-muted);
  opacity: 0.5;
}

/* ── Prose paragraphs ───────────────────────────────────────── */
.about-concept + .about-prose { margin-top: var(--space-lg); }

.about-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-prose p {
  font-size: var(--sz-base);
  line-height: 1.75;
  color: var(--c-zone-text);
}

.about-prose a {
  color: var(--c-zone-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--t-fast);
}
.about-prose a:hover { opacity: 0.75; }

/* ── Left / right concept split ────────────────────────────── */
.about-concept {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-sm);
}

.concept-half {
  border: 0.5px solid var(--c-zone-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.concept-half:hover { border-color: var(--c-zone-accent); }

.concept-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-md) var(--space-lg);
  text-decoration: none;
}

.concept-half--left .concept-link {
  background: color-mix(in srgb, var(--c-left-fill) 60%, transparent);
}
.concept-half--right .concept-link {
  background: color-mix(in srgb, var(--c-right-grad-b) 20%, transparent);
}

.concept-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.concept-half--left  .concept-label { font-family: var(--font-left-body);  color: var(--c-left-text); }
.concept-half--right .concept-label { font-family: var(--font-right-body); color: var(--c-right-text); }

.concept-desc {
  font-size: var(--sz-sm);
  line-height: 1.5;
  color: var(--c-zone-text-muted);
}
.concept-half--left  .concept-desc { font-family: var(--font-left-body); }
.concept-half--right .concept-desc { font-family: var(--font-right-body); }

.concept-arrow {
  font-size: 1rem;
  color: var(--c-zone-accent);
  margin-top: 4px;
  transition: transform var(--t-fast);
}
.concept-half:hover .concept-arrow { transform: translateX(4px); }

.concept-divider {
  font-size: 1.125rem;
  color: var(--c-zone-text-muted);
  opacity: 0.4;
  text-align: center;
}

/* ── Currently ──────────────────────────────────────────────── */
.about-currently {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.currently-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.currently-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}
.currently-dot--left  { background: var(--c-left-stroke); }
.currently-dot--right { background: var(--c-right-stroke); }
.currently-dot--cloud { background: var(--c-cloud-stroke); }
.currently-dot--pfc   { background: var(--c-pfc-stroke); }

.currently-label {
  font-size: var(--sz-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-zone-text-muted);
  font-family: var(--f-zone-label);
  margin-bottom: 2px;
}
.currently-value {
  font-size: var(--sz-base);
  color: var(--c-zone-text);
}

/* ── PFC mobile overrides ───────────────────────────────────── */
@media (max-width: 700px) {
  .about-photos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 120px;
  }
  .about-photo-slot:first-child {
    grid-column: 1 / -1;
  }

  .about-concept {
    grid-template-columns: 1fr;
  }
  .concept-divider { display: none; }
}