/* An approach through typography, then a direction study in the same frame. */
.horizon-hero{height:330svh;background:var(--paper);isolation:isolate;--approach-p:0;--handoff-p:0;--type-yield:0;--type-exit-p:0;--type-left-open-x:0px;--type-left-open-y:0px;--type-right-open-x:0px;--type-right-open-y:0px;--type-open-scale:1;--type-corridor:0px;--media-top:178px;--media-bottom:220px;--media-height:calc(100svh - var(--media-top) - var(--media-bottom));--media-width:min(calc(100% - var(--gutter)*2),calc(var(--media-height)*16/9))}
.horizon-hero .horizon-stage{position:sticky;top:0;height:100svh;min-height:0;max-height:none;overflow:clip;padding:112px var(--gutter) 30px;background:var(--paper)}
.horizon-room{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:calc(.52 - var(--handoff-p)*.52);transform:scale(calc(1 + var(--approach-p)*.09));transform-origin:50% 51%}
.horizon-wall{position:absolute;inset:0;background:#dedfd9}
.horizon-wall-left{clip-path:polygon(0 16%,46% 43%,46% 56%,0 100%);opacity:.28}
.horizon-wall-right{clip-path:polygon(100% 16%,54% 43%,54% 56%,100% 100%);opacity:.2}
.horizon-rear{display:none}
.horizon-floor{position:absolute;inset:56% 0 0;border-top:1px solid #dcded5;background:#eeeFE8;clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);opacity:.5}
.horizon-hero .hero-topline{position:relative;z-index:8;font-size:15px;line-height:1.5;pointer-events:none;opacity:calc(1 - var(--handoff-p)*2)}
.horizon-hero h1{position:absolute;z-index:3;top:45%;left:2.3vw;width:95.4%;font-family:Archivo,Switzer,sans-serif;font-size:15.2vw;font-weight:700;letter-spacing:-.04em;line-height:.87;white-space:nowrap;color:var(--ink);transform:translateY(calc(-50% - var(--type-exit-p)*50px)) scale(calc(1 - var(--type-exit-p)*.04));opacity:calc(1 - var(--type-exit-p));transform-origin:center center;will-change:transform,opacity;pointer-events:none}
.horizon-hero h1>span{display:inline-block;align-self:flex-start;transform-origin:center center;transition:none;transform:translate3d(calc(var(--type-left-open-x)*var(--type-yield)),calc(var(--type-left-open-y)*var(--type-yield)),0) scale(calc(1 - (1 - var(--type-open-scale))*var(--type-yield)))}
.horizon-hero h1>span:last-child{transform:translate3d(calc(var(--type-right-open-x)*var(--type-yield)),calc(var(--type-right-open-y)*var(--type-yield)),0) scale(calc(1 - (1 - var(--type-open-scale))*var(--type-yield)))}
.horizon-hero[data-type-state="parting"] h1>span{will-change:transform}
.horizon-hero[data-title-state="hidden"] h1{visibility:hidden}
.horizon-hero .horizon-actor-canvas,.horizon-hero .horizon-actor-fallback,.horizon-background-canvas{position:absolute;top:var(--media-top);bottom:auto;left:50%;width:var(--media-width);height:var(--media-height);max-width:none;transform:translateX(-50%);pointer-events:none}
.horizon-actor-canvas{z-index:2;opacity:0}.horizon-hero.has-crossed-plane .horizon-actor-canvas{z-index:4}
.horizon-hero.has-walk-frame .horizon-actor-canvas{opacity:calc(1 - var(--handoff-p)*1.35)}
.horizon-hero .horizon-actor-fallback{z-index:2;opacity:calc(1 - var(--handoff-p)*1.35)}
.horizon-actor-fallback>img{width:100%;height:100%;object-fit:contain;object-position:center}
.horizon-hero.has-walk-frame .horizon-actor-fallback{visibility:hidden}
.horizon-background-canvas{z-index:1;opacity:0}
.horizon-source{position:absolute;width:1px;height:1px;left:0;top:0;opacity:0;pointer-events:none}
.horizon-hero .hero-bottomline{z-index:8;left:var(--gutter);right:var(--gutter);bottom:28px;align-items:flex-end;pointer-events:none}
.horizon-hero .hero-action{pointer-events:auto;gap:24px}.horizon-hero .hero-action p{font-size:13px;line-height:1.6;max-width:28ch}
.horizon-hero .hero-study-note{display:flex;flex-direction:column;gap:5px;font-size:12px;line-height:1.45;text-align:right;color:var(--muted)}
.hero-chapter-name{font-size:14px;color:var(--ink)}.hero-action-short{display:none}
.horizon-controls{position:absolute;z-index:8;left:50%;bottom:124px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:24px;opacity:calc(1 - var(--handoff-p)*3);pointer-events:auto}
.horizon-controls button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 0;background:transparent;font-size:13px;line-height:1.3;white-space:nowrap;border-bottom:1px solid #9caaa8}
.horizon-controls button[hidden]{display:none}.horizon-controls button:hover{border-color:var(--ink)}.horizon-controls button:disabled{opacity:.5;cursor:default}.horizon-controls button:focus-visible{outline:2px solid #164e70;outline-offset:5px}.horizon-controls svg{width:16px;height:16px}.horizon-controls-divider{display:none}
.horizon-hero.is-scene-present .horizon-controls{visibility:hidden;pointer-events:none}
.horizon-seam{position:absolute;z-index:6;left:50%;top:calc(var(--media-top) - 18px);height:1px;width:var(--media-width);background:var(--line);opacity:var(--handoff-p);transform:translateX(-50%) scaleX(var(--handoff-p));pointer-events:none}
@media(min-width:1900px){.horizon-hero{--media-top:195px;--media-bottom:235px}.horizon-hero .horizon-stage{padding-top:128px}.horizon-hero .hero-topline{font-size:19px}.horizon-hero .hero-action p{font-size:16px}.horizon-hero .hero-study-note{font-size:14px}.hero-chapter-name{font-size:17px}.horizon-controls button{font-size:16px}}
@media(max-width:1100px) and (min-width:701px){.horizon-hero{--media-top:190px;--media-bottom:280px}.horizon-hero .hero-action p{font-size:12px}.horizon-controls{bottom:162px}.horizon-hero h1{top:44%;transform:translateY(calc(-50% - var(--type-exit-p)*50px)) scale(calc(1 - var(--type-exit-p)*.04))}}
@media(max-width:700px){
.horizon-hero{height:300svh;--media-top:180px;--media-bottom:294px;--media-width:calc(100% - 32px)}
.horizon-hero .horizon-stage{padding-top:104px;height:100svh;min-height:0}
.horizon-hero .hero-topline{font-size:13px;line-height:1.5}.horizon-hero .hero-side-note{display:none}
.horizon-hero h1{top:36%;left:17px;width:calc(100% - 34px);font-size:32vw;display:flex;flex-direction:column;line-height:.87;transform:translateY(calc(-50% - var(--type-exit-p)*50px)) scale(calc(1 - var(--type-exit-p)*.04))}.horizon-hero h1>span:last-child{align-self:flex-end;font-size:28vw}
.horizon-hero .horizon-actor-canvas,.horizon-hero .horizon-actor-fallback,.horizon-background-canvas{top:var(--media-top);height:var(--media-height);width:var(--media-width)}
.horizon-actor-fallback>img{object-fit:cover}.horizon-wall-left{clip-path:polygon(0 25%,45% 45%,45% 56%,0 87%)}.horizon-wall-right{clip-path:polygon(100% 25%,55% 45%,55% 56%,100% 87%)}.horizon-rear{left:45%;right:45%;top:45%;height:11%}.horizon-floor{top:56%;bottom:13%}
.horizon-controls{bottom:143px;gap:20px;width:calc(100% - 36px)}.horizon-controls button{font-size:12px;gap:7px}.horizon-explore svg{display:none}
.horizon-hero .hero-bottomline{left:24px;right:24px;bottom:21px;display:block}.horizon-hero .hero-action{align-items:center;justify-content:space-between;gap:18px}.horizon-hero .hero-action .button{padding:13px 16px;gap:20px;font-size:13px;min-height:50px}.horizon-hero .hero-action p{font-size:12px;line-height:1.5;max-width:20ch}.horizon-hero .hero-study-note{margin-top:12px;flex-direction:row;justify-content:space-between;font-size:11px;text-align:left}.hero-chapter-name{font-size:12px}
}
@media(max-width:700px) and (max-height:740px){.horizon-hero{--media-top:165px;--media-bottom:274px;--media-width:min(calc(100% - 32px),calc(var(--media-height)*16/9))}.horizon-hero h1{top:38%;transform:translateY(calc(-50% - var(--type-exit-p)*50px)) scale(calc(1 - var(--type-exit-p)*.04))}.horizon-hero .horizon-stage{padding-top:96px}.horizon-hero .hero-topline{font-size:12px}.horizon-controls{bottom:129px;gap:16px}.horizon-controls button{font-size:11px}.horizon-hero .hero-bottomline{bottom:16px}.horizon-hero .hero-study-note{margin-top:9px}.horizon-hero .hero-action p{font-size:11px}.horizon-hero .hero-chapter-name,.horizon-hero .hero-action-story{display:none}.horizon-hero .hero-action-short{display:inline}.horizon-hero .hero-study-note{display:block;width:100%;max-width:none;font-size:11px;line-height:1.4}}
@media(max-height:520px) and (orientation:landscape){.horizon-hero{--media-top:108px;--media-bottom:165px}.horizon-hero .horizon-stage{padding-top:90px}.horizon-hero .hero-topline{font-size:11px}.horizon-hero h1{top:49%;font-size:15.2vw;display:block;transform:translateY(calc(-50% - var(--type-exit-p)*50px)) scale(calc(1 - var(--type-exit-p)*.04))}.horizon-hero h1>span:last-child{font-size:inherit}.horizon-hero .hero-bottomline{bottom:10px}.horizon-hero .hero-action .button{padding:9px 12px;min-height:42px}.horizon-hero .hero-action p,.horizon-hero .hero-study-note{font-size:11px}.horizon-controls{bottom:78px}.horizon-controls button{font-size:11px;min-height:36px}.hero-chapter-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){.horizon-hero{height:100svh}.horizon-hero .horizon-stage{position:relative}.horizon-room{transform:none}.horizon-hero h1{transform:translateY(-50%);will-change:auto}.horizon-hero h1>span{transform:none;will-change:auto}.horizon-hero .horizon-actor-fallback{visibility:visible;z-index:4}.horizon-hero.has-walk-frame .horizon-actor-fallback{visibility:hidden}.horizon-hero.is-scene-present .horizon-actor-fallback{visibility:hidden}.horizon-controls{gap:18px}}

/* A real white doorway, enabled only after the matching photographic asset set is installed. */
.horizon-hero[data-media-mode="white-door"] .horizon-room{display:none}
.horizon-hero[data-media-mode="white-door"] h1{color:#fff;mix-blend-mode:difference}
/* The blend would invert the walker's skin, so a solid copy of the type covers the dark doorway he walks out of.
   --door-l/--door-r: the doorway's inner edges as fractions of the media box (measured from the plate). */
.hero-title-occluder{display:none}
.horizon-hero[data-media-mode="white-door"] .hero-title-occluder{--door-l:.36;--door-r:.608;display:block;position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(var(--media-top) calc(50% - var(--media-width)/2 + var(--media-width)*(1 - var(--door-r))) calc(100% - var(--media-top) - var(--media-height)*.7) calc(50% - var(--media-width)/2 + var(--media-width)*var(--door-l)))}
.horizon-hero[data-media-mode="white-door"] .hero-title-occluder h1{color:#e1e7ef;mix-blend-mode:normal}
.horizon-hero[data-media-mode="white-door"] .horizon-background-canvas{opacity:0}
.horizon-hero[data-media-mode="white-door"].has-walk-frame .horizon-background-canvas{opacity:calc(1 - var(--handoff-p)*1.35)}
.horizon-hero[data-media-mode="white-door"] .horizon-plate-fallback{position:absolute;z-index:1;top:var(--media-top);left:50%;width:var(--media-width);height:var(--media-height);transform:translateX(-50%);pointer-events:none;opacity:calc(1 - var(--handoff-p)*1.35)}
.horizon-hero[data-media-mode="white-door"] .horizon-plate-fallback>img,.horizon-hero[data-media-mode="white-door"] .horizon-actor-fallback>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.horizon-hero[data-media-mode="white-door"].has-walk-frame .horizon-plate-fallback{visibility:hidden}
.horizon-hero[data-media-mode="white-door"].has-crossed-plane .horizon-actor-fallback,.horizon-hero[data-media-mode="white-door"].hero-media-failed .horizon-actor-fallback{z-index:4}
@media(max-width:700px) and (min-height:741px) and (orientation:portrait){
.horizon-hero[data-media-mode="white-door"]{--media-height:min(calc(100svh - var(--media-top) - var(--media-bottom)),calc((100vw - 32px)/.92))}
.horizon-hero[data-media-mode="white-door"] .horizon-plate-fallback>img,.horizon-hero[data-media-mode="white-door"] .horizon-actor-fallback>img{object-fit:cover}
.horizon-hero[data-media-mode="white-door"] .hero-title-occluder{--door-l:.229;--door-r:.709}
}

/* One physical scroll rail carries the door, clothing films and editorial detail. */
.horizon-hero{height:100svh}
.horizon-hero.rail-ready{height:780svh}
.horizon-hero .hero-study-note{max-width:27ch}
.horizon-hero .hero-topline,.horizon-hero .hero-action-story{transition:none}
.horizon-hero[data-title-state="hidden"] h1{visibility:hidden;opacity:0}
.horizon-hero.is-scene-open .hero-action-story{display:none}
.horizon-hero .hero-bottomline{pointer-events:none}
.horizon-hero .hero-bottomline .button{pointer-events:auto}
.horizon-hero.is-scene-open .hero-bottomline{bottom:21px}
.horizon-hero.is-scene-open .hero-study-note{font-size:11px}
@media(max-width:700px){.horizon-hero.rail-ready{height:640svh}.horizon-hero .hero-bottomline{left:24px;right:24px}.horizon-hero.is-scene-open .hero-bottomline{bottom:12px;display:flex;align-items:center;gap:16px}.horizon-hero.is-scene-open .hero-study-note{display:block;margin:0;text-align:right;max-width:15ch;line-height:1.4}.horizon-hero.is-scene-open .hero-chapter-name{display:none}.horizon-hero.is-scene-open .hero-action p{display:none}.horizon-hero.is-scene-open .hero-action .button{min-height:44px;padding:10px 14px}}
@media(max-height:520px) and (orientation:landscape){.horizon-hero.is-scene-open .hero-bottomline{bottom:8px}.horizon-hero.is-scene-open .hero-study-note{display:none}.horizon-hero.is-scene-open .hero-action .button{min-height:36px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){
  .horizon-hero,.horizon-hero.rail-ready{height:auto}
  .horizon-hero .horizon-stage{position:relative;height:auto;min-height:100svh;overflow:visible;padding-bottom:0}
  .horizon-hero .hero-topline{opacity:1}
  .horizon-hero h1{top:45svh;visibility:visible;opacity:1}
  .horizon-hero .horizon-controls,.horizon-hero.is-scene-present .horizon-controls{visibility:visible;opacity:1;pointer-events:auto;top:calc(100svh - 180px);bottom:auto}
  .horizon-hero .hero-bottomline,.horizon-hero.is-scene-open .hero-bottomline{top:calc(100svh - 100px);bottom:auto}
  .horizon-hero .hero-action-story,.horizon-hero.is-scene-open .hero-action-story{display:inline}
  .horizon-hero .hero-study-note{display:none}
  .horizon-hero .horizon-seam{display:none}
  .horizon-hero[data-media-mode="white-door"] .horizon-plate-fallback,.horizon-hero[data-media-mode="white-door"] .horizon-actor-fallback,.horizon-hero[data-media-mode="white-door"].has-walk-frame .horizon-background-canvas,.horizon-hero.has-walk-frame .horizon-actor-canvas{opacity:1}
  .horizon-hero[data-media-mode="white-door"] .horizon-plate-fallback{visibility:visible}
  .horizon-hero[data-media-mode="white-door"].has-walk-frame .horizon-plate-fallback{visibility:hidden}
  .horizon-hero.is-scene-present .horizon-actor-fallback{visibility:visible}
  .horizon-hero.has-walk-frame .horizon-actor-fallback{visibility:hidden}
}

/* The opening promise becomes the threshold to the next direction. */
.horizon-hero .hero-bridge{position:absolute;z-index:7;top:112px;right:var(--gutter);width:max-content;margin:0;font-size:15px;font-weight:400;line-height:1.32;letter-spacing:-.02em;text-align:left;color:var(--ink);pointer-events:none;transform-origin:center center;transition:none;opacity:var(--bridge-opacity,1);transform:translate3d(calc(var(--bridge-open-x,0px)*var(--bridge-focus,0)),calc(var(--bridge-open-y,0px)*var(--bridge-focus,0) - var(--bridge-exit,0)*28px),0) scale(calc(1 + (var(--bridge-open-scale,1) - 1)*var(--bridge-focus,0)))}
.horizon-hero[data-bridge-state="gathering"] .hero-bridge,.horizon-hero[data-bridge-state="leading"] .hero-bridge,.horizon-hero[data-bridge-state="leaving"] .hero-bridge{will-change:transform,opacity}
.horizon-hero[data-bridge-state="hidden"] .hero-bridge{visibility:hidden}
@media(min-width:1900px){.horizon-hero .hero-bridge{top:128px;font-size:19px}}
@media(max-width:700px){.horizon-hero .hero-bridge{top:152px;right:24px;font-size:13px;opacity:var(--bridge-opacity,0)}}
@media(max-width:700px) and (max-height:740px){.horizon-hero .hero-bridge{top:145px;font-size:12px}}
@media(max-height:520px) and (orientation:landscape){.horizon-hero .hero-bridge{top:90px;font-size:11px}}
@media(prefers-reduced-motion:reduce){
.horizon-hero .hero-bridge{transform:none;opacity:1;visibility:visible;will-change:auto}
}
@media(prefers-reduced-motion:reduce) and (max-width:700px){
.horizon-hero .hero-bridge{top:calc(100svh - 240px);left:24px;right:24px;width:auto;font-size:14px;line-height:1.4}
}

/* The bridge owns the handoff; scene labels arrive only with the open scene. */
@media(prefers-reduced-motion:no-preference){
.horizon-hero:not(.is-scene-open) .ltx-scene .look-signature,.horizon-hero:not(.is-scene-open) .ltx-copy,.horizon-hero:not(.is-scene-open) .ltx-direction-rail{visibility:hidden;opacity:0}
.horizon-hero.is-scene-open .ltx-scene .look-signature{visibility:visible;opacity:1}
}