/* Horizon homepage layer. Loaded only by index.html; assets/signal/style.css stays shared with /about/ and /insights/. */
.hz{background:var(--bg)}
/* This file only loads on the homepage: keep keyboard focus clear of the fixed rail (72px tall plus the safe area). */
html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
.hz-canvas{position:fixed;left:0;top:0;width:100vw;height:100lvh;z-index:0;display:block;pointer-events:none}
.hz .site-header{z-index:5}
.hz main,.hz .site-footer{position:relative;z-index:1}
.hz-capture .site-header,.hz-capture main,.hz-capture .site-footer,.hz-capture .hz-rail{visibility:hidden}

/* Hero: the field is the hero; the headline sits on its horizon. */
.hz-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--pad) calc(96px + env(safe-area-inset-bottom))}
.hz-still{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.scene-static .hz-still{display:block}
.hz-hero h1{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(48svh - .14em);margin:0;text-align:center;font-size:clamp(64px,8vw,150px);line-height:.9;letter-spacing:-.045em;white-space:nowrap;text-shadow:0 0 24px var(--bg),0 0 6px #10121299}
.hz-hero h1 em{font-size:1.1em;letter-spacing:-.03em}
.hz-br{display:none}
.hz-hero-foot{width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hz-hero-foot .intro-description{margin:0;max-width:440px;font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:var(--ink);text-shadow:0 1px 16px var(--bg)}
.hz-hero-foot .hero-actions{margin:0;display:flex;align-items:center;gap:28px}

/* Chapter 2: text left, plate right; the copy holds while the plate changes mode. */
.hz-method{position:relative;min-height:190svh;display:grid;grid-template-columns:minmax(0,40%) 1fr;align-items:start}
.hz-method-copy{position:sticky;top:clamp(110px,18svh,180px);max-width:520px}
.hz-method-copy h2{margin-top:22px}
.hz-method-copy>p:not(.eyebrow){margin-top:22px;color:var(--muted);max-width:430px}
.hz-method .system-steps{margin-top:34px}

/* Every chapter is transparent so the scene shows through. */
.hz .work,.hz .about,.hz .endorsement,.hz .engage,.hz .notes,.hz .homepage-faq,.hz .closing{background:transparent;border-top-color:#343a3966}
.hz .work{min-height:140svh}
.hz .work-stage{grid-template-columns:minmax(0,36%) 1fr;align-items:start}
.hz .project-panels{width:min(560px,100%);justify-self:end;margin-top:clamp(140px,30svh,320px)}
.hz .about{min-height:130svh;grid-template-columns:40% 1fr;color:var(--ink);--accent:#dda884;--line:#343a39;--muted:#a7aaa5}
.scene-live .about-portrait>img{opacity:0}
.hz .about-copy>p:not(.eyebrow){color:var(--muted)}
.hz .about-copy>p.about-lead{color:var(--ink)}
.hz .about-copy>.text-link{border-bottom-color:var(--line)}
.hz .portrait-caption{color:var(--muted);border-top-color:var(--line)}
.hz .portrait-caption small{display:block;margin-top:6px;font:13px/1.4 var(--sans);letter-spacing:0;color:var(--ink)}
.hz .credentials{border-top-color:var(--line)}
.hz .endorsement{min-height:100svh;align-items:flex-start;padding-top:8svh;color:var(--ink);--accent:#dda884}
.hz .quote-mark{color:var(--accent)}
.hz .endorsement small{color:var(--muted)}
.hz .engage{min-height:130svh;display:flex;flex-direction:column;justify-content:space-between}
.hz .engagement:hover{background:#10121299}
.hz .closing{min-height:110svh}
.scene-live .closing-art{display:none}
.hz .site-footer{padding-bottom:calc(35px + 64px)}

/* Instrument rail: form name, live equation, pause. */
.hz-rail{position:fixed;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:18px var(--pad) calc(10px + env(safe-area-inset-bottom));font:11px/1.2 var(--mono);letter-spacing:.08em;color:var(--muted);background:linear-gradient(to top,var(--bg) 35%,#10121200);pointer-events:none}
.hz-rail-eq{color:var(--accent);letter-spacing:.02em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62vw}
.hz-rail-pause{grid-column:-2;justify-self:end;pointer-events:auto;display:flex;align-items:center;gap:9px;min-height:44px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--ink);cursor:pointer}

/* Narrow: phones, landscape phones, portrait tablets and tall windows. The scene uses the same query (chapters.js NARROW_QUERY). */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  /* The hero stacks in normal flow: header clearance (91px phone header + 16px), headline, foot, then the terrain band.
     The band is 8svh of padding plus a spacer that grows to 23svh (31svh in all) only when there is room, so on short
     screens the band gives way first and then the hero grows; the headline can never ride up into the header. */
  .hz-hero{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-top:107px;padding-bottom:calc(8svh + env(safe-area-inset-bottom))}
  .hz-hero::after{content:'';flex:1 1 0;max-height:23svh}
  .hz-hero h1{position:static;margin:0 0 38px;white-space:normal;text-align:left;font-size:min(clamp(70px,19vw,118px),13svh);line-height:.88}
  .hz-br{display:block}
  .hz-hero-foot{flex-direction:column;align-items:flex-start;gap:22px}
  .hz-method{grid-template-columns:1fr;min-height:0;padding-top:48svh;background:linear-gradient(to bottom,#10121200 calc(48svh - 14svh),#101212d9 calc(48svh - 2svh))}
  .hz-method-copy{position:static}
  .hz .work,.hz .about,.hz .endorsement,.hz .engage,.hz .closing{min-height:0}
  .hz .work,.hz .about,.hz .engage,.hz .closing{padding-top:46svh;background:linear-gradient(to bottom,#10121200 calc(46svh - 14svh),#101212d9 calc(46svh - 2svh))}
  .hz .endorsement{padding-top:12svh;padding-bottom:40svh;background:linear-gradient(to bottom,#10121200 calc(12svh - 14svh),#101212d9 calc(12svh - 2svh))}
  .hz .work-stage,.hz .about{grid-template-columns:1fr}
  .hz .project-panels{width:100%;margin-top:28px}
  .scene-live .about-portrait>img{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Above 860px the shared header is taller (up to 115px), so narrow portrait windows clear more of it. */
@media (min-width:861px) and (max-aspect-ratio:1/1){.hz-hero{padding-top:131px}}
.hz main p,.hz main h2,.hz main h3{text-shadow:0 1px 14px var(--bg),0 0 2px var(--bg)}
@media(max-width:600px){.hz-rail{grid-template-columns:1fr auto}.hz-rail-eq{display:none}}