/* ===== Layout v2 — editorial scaffold =====
   Stripped of fake OS chrome. Replaced with a quiet wordmark + nav.
   Scene heads no longer carry a numbered eyebrow column.
*/

#root {
  position: relative;
  z-index: 2;
}

.os-shell {
  position: relative;
  min-height: 100vh;
}

/* ------ Topbar — editorial wordmark + thin inline nav -------- */
.os-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 22px max(4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--paper) 80%, transparent),
    transparent
  );
  backdrop-filter: blur(12px) saturate(105%);
  -webkit-backdrop-filter: blur(12px) saturate(105%);
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--ink-2);
}

.os-topbar .brand a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  border: none;
}
.os-topbar .brand-mark {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.os-topbar .brand-rule {
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ink-faint);
}
.os-topbar .brand-name {
  font-family: var(--ff-body);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.topbar-nav a {
  color: var(--ink-2);
  border: none;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: color .25s var(--easing);
}
.topbar-nav a:hover { color: var(--accent); }
.topbar-nav .contact-cta {
  color: var(--ink);
  padding: 8px 16px;
  border: 1px solid var(--ink-faint);
  border-radius: 100px;
  transition: all .25s var(--easing);
}
.topbar-nav .contact-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ------ Bottom dock — quieter, only on wide screens -------- */
.os-dock {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  gap: 2px;
  padding: 5px;
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  border: 1px solid var(--panel-stroke);
  border-radius: 100px;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  max-width: 88vw;
  overflow-x: auto;
  scrollbar-width: none;
  opacity: 0;
  transition: opacity .4s var(--easing);
}
.os-dock.visible { opacity: 1; }
.os-dock::-webkit-scrollbar { display: none; }

.dock-btn {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  padding: 7px 14px;
  border-radius: 100px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: all .25s var(--easing);
  white-space: nowrap;
}
.dock-btn:hover { color: var(--ink); }
.dock-btn.active {
  color: var(--paper);
  background: var(--ink);
}

/* ------ Side rail — thin index, hover labels -------- */
.os-rail {
  position: fixed;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--ink-dim);
}
.os-rail .r-item {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: color .2s var(--easing);
}
.os-rail .r-item .r-tick {
  width: 14px; height: 1px;
  background: var(--ink-faint);
  transition: all .25s var(--easing);
}
.os-rail .r-item .r-label {
  opacity: 0; transform: translateX(-4px);
  transition: all .25s var(--easing);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.os-rail .r-item:hover { color: var(--ink-2); }
.os-rail .r-item:hover .r-tick { background: var(--ink-2); width: 22px; }
.os-rail .r-item:hover .r-label { opacity: 1; transform: none; }
.os-rail .r-item.active { color: var(--accent); }
.os-rail .r-item.active .r-tick { background: var(--accent); width: 22px; }

/* ------ Scene scaffold -------- */
.scene {
  position: relative;
  width: 100%;
  padding: 104px max(6vw, 32px) 104px;

  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--easing-slow), transform 1.2s var(--easing-slow);
}
.scene.in-view { opacity: 1; transform: none; }

.scene .scene-head h2,
.scene .scene-head .lede,
.scene .scene-head .eyebrow {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--easing-slow), transform 0.9s var(--easing-slow);
}
.scene.in-view .scene-head .eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.scene.in-view .scene-head h2       { opacity: 1; transform: none; transition-delay: 0.18s; }
.scene.in-view .scene-head .lede    { opacity: 1; transform: none; transition-delay: 0.35s; }

/* Hero exempt — handled with its own boot-done class for cascade */
#hero { opacity: 1; }
#hero .hero-wrap > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.0s var(--easing-slow), transform 1.0s var(--easing-slow);
}
#hero.boot-done .hero-wrap .hero-eyebrow     { opacity: 1; transform: none; transition-delay: 0.15s; }
#hero.boot-done .hero-wrap .hero-name        { opacity: 1; transform: none; transition-delay: 0.35s; }
#hero.boot-done .hero-wrap .hero-statement   { opacity: 1; transform: none; transition-delay: 0.70s; }
#hero.boot-done .hero-wrap .hero-row         { opacity: 1; transform: none; transition-delay: 1.0s; }
#hero.boot-done .hero-wrap .hero-sig         { opacity: 1; transform: none; transition-delay: 1.2s; }
#hero .hero-scroll-cue {
  opacity: 0;
  transition: opacity 1s var(--easing-slow) 1.6s;
}
#hero.boot-done .hero-scroll-cue { opacity: 1; }

.scene.tall { min-height: auto; }
.scene.short { min-height: auto; }

/* ------ Scene head — NO numbered eyebrow column.
   Single confident heading + optional lede underneath.
   This kills the tag-left / heading-right pattern Hallmark gate 66 fails. */
.scene-head {
  max-width: 1080px;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scene-head .eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.scene-head .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.scene-head h2 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
.scene-head h2 em {
  color: var(--accent);
  font-style: italic;
}
.scene-head .lede {
  margin-top: 22px;
  max-width: 60ch;
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.55;
  font-family: var(--ff-body);
}

/* Legacy .num support — render as quieter eyebrow if a scene still uses it */
.scene-head .num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
  border-top: none;
  padding-top: 0;
}
.scene-head .num span { color: var(--accent); }

/* If a scene-head still uses the old two-column grid, collapse it gracefully */
.scene-head[style*="grid-template-columns"] { display: flex; flex-direction: column; grid-template-columns: none; gap: 8px; }

/* Panel — recurring card */
.panel {
  background: color-mix(in oklab, var(--paper-2) 70%, transparent);
  border: 1px solid var(--panel-stroke);
  border-radius: var(--r-3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.panel.elevated {
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55);
  border-color: var(--panel-stroke-strong);
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-stroke);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.panel-head .title { color: var(--ink); letter-spacing: 0.18em; }
.panel-head .meta { margin-left: auto; color: var(--ink-dim); }
.panel-body { padding: 22px 18px; }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }

/* ------ Scroll progress — kept, but ink not mint -------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 79;
  background: transparent;
  pointer-events: none;
}
#scroll-progress .fill {
  height: 100%;
  background: var(--accent);
  transform-origin: 0 0;
  transform: scaleX(0);
  transition: transform 0.06s linear;
  pointer-events: none;
}

/* ------ Mobile -------- */
@media (max-width: 880px) {
  .os-rail { display: none; }
  .os-topbar { padding: 16px 20px; }
  .os-topbar .brand-name { display: none; }
  .topbar-nav { gap: 14px; font-size: 12.5px; }
  .topbar-nav a:not(.contact-cta) { display: none; }
  .scene { padding: 84px 5vw 84px; }
  .scene-head { margin-bottom: 40px; }
  .scene-head h2 { font-size: clamp(34px, 9vw, 48px); }
  .os-dock { padding: 4px; gap: 1px; bottom: 12px; }
  .dock-btn { padding: 6px 10px; font-size: 11px; }
}