/* ═══════════════════════════════════════════════════════════
   HOME — one unbroken journey (clips 1-5), coaching monitor,
   humanity scrub, photo album, contact.
   16:9 is never cropped: the stage IS 16:9.
   ═══════════════════════════════════════════════════════════ */

/* ── the journey stage ──
   Width-driven 16:9 box. Height follows from width, so the full
   frame is always visible — no object-fit:cover, no cropping. */
.stage{
  position:relative;width:100%;
  aspect-ratio:16/9;
  max-height:100vh;max-height:100dvh;
  margin-inline:auto;
  background:#04070A;
  overflow:hidden;
}
/* on very tall/narrow viewports the width cap keeps 16:9 intact.
   100% of the containing block, NOT 100vw: the viewport unit includes
   the vertical scrollbar, so on any page that scrolls — which is all of
   them — the stage came out exactly one scrollbar too wide and gave the
   document a 15px horizontal scroll. */
@media(max-aspect-ratio:16/9){ .stage{width:100%} }
@media(min-aspect-ratio:16/9){ .stage{width:calc(100vh * 16 / 9);width:calc(100dvh * 16 / 9)} }

.stage video,.stage .poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;                 /* never crop */
  background:#04070A;
}
.stage .poster{display:none}

/* the journey section: centers the stage in the viewport */
.journey{position:relative}
.journey__pin{height:100vh;height:100dvh;display:grid;place-items:center;background:var(--base)}

/* letterbox area is part of the design */
.journey__pin::before,.journey__pin::after{
  content:"";position:absolute;left:0;right:0;height:14vh;height:14dvh;pointer-events:none;z-index:4}
.journey__pin::before{top:0;background:linear-gradient(var(--base),transparent)}
.journey__pin::after{bottom:0;background:linear-gradient(transparent,var(--base))}

/* ── overlay text inside the stage ── */
.ov{position:absolute;z-index:6;pointer-events:none}
.ov .btn{pointer-events:auto}

/* hero — RIGHT third */
.ov--hero{right:5%;top:50%;transform:translateY(-50%);max-width:38%;text-align:right}
.ov--hero h1{font-size:clamp(1.8rem,4.4vw,4.4rem);line-height:.98}
.ov--hero p{font-family:var(--mono);font-size:clamp(.5rem,.72vw,.68rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-top:.9rem}
@media(max-width:760px){.ov--hero{max-width:52%;right:4%}}

/* science stats — right, lower */
.ov--sci{right:5%;bottom:12%;text-align:right}
.ov--sci .n{font-family:var(--serif);font-size:clamp(1.8rem,4vw,3.6rem);color:var(--w-science);line-height:1}
.ov--sci .l{font-family:var(--mono);font-size:clamp(.48rem,.68vw,.62rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-top:.4rem}

/* career glass panels — exactly one visible at a time */
.glasswrap{position:absolute;z-index:6;right:4%;bottom:9%;
  width:min(28rem,42%);padding:clamp(1rem,1.6vw,1.7rem) clamp(1.1rem,1.8vw,1.9rem);
  opacity:0;visibility:hidden;transform:translateY(22px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s}
.glasswrap.on{opacity:1;visibility:visible;transform:none}
.glasswrap .eyebrow{margin-bottom:.6rem;font-size:.56rem}
.glasswrap h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,1.9vw,1.9rem);line-height:1.1;margin-bottom:.5rem}
.glasswrap p{color:var(--ink-dim);font-size:clamp(.72rem,.95vw,.92rem);line-height:1.55}
.glasswrap .skills{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.glasswrap .skills span{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--hair);border-radius:100px;
  padding:.25rem .55rem;color:var(--ink)}
.glasswrap .btn{margin-top:.9rem;padding:.7rem 1.3rem;font-size:.58rem}

.journey__cue{position:absolute;left:50%;bottom:2.5vh;bottom:2.5dvh;transform:translateX(-50%);z-index:7;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);display:flex;flex-direction:column;align-items:center;gap:.5rem;
  transition:opacity .5s var(--ease)}
.journey__cue i{width:1px;height:1.8rem;background:linear-gradient(var(--accent),transparent);
  animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* progress rail for the whole journey */
.journey__rail{position:absolute;left:50%;transform:translateX(-50%);bottom:1.2vh;bottom:1.2dvh;z-index:7;
  display:flex;gap:.35rem}
.journey__rail i{width:1.8rem;height:2px;background:var(--hair);overflow:hidden;position:relative}
.journey__rail i b{position:absolute;inset:0;width:0;background:var(--accent);
  box-shadow:0 0 8px var(--accent)}

/* ── bar hides during the journey ── */
.bar{transition:transform .6s var(--ease),background .5s var(--ease)}
.bar.tucked{transform:translateY(-115%)}

/* ═══ COACHING — 30% video in a vitals monitor ═══ */
#coach{background:#0A0507;position:relative;overflow:hidden}
/* NOTE: no `place-items:center` here — justify-items:center makes grid
   items shrink-to-fit, so the monitor's percentage width had nothing to
   resolve against and the whole screen collapsed to zero height.
   The layout STACKS (text above, monitor below) so the monitor can be
   sized off viewport height and actually fill ~2/3 of the screen. */
.coach__wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(.7rem,1.8vh,1.3rem);gap:clamp(.7rem,1.8dvh,1.3rem);
  padding-block:clamp(1rem,3vh,2rem);padding-block:clamp(1rem,3dvh,2rem)}
.coach__left{width:100%;max-width:min(96vw, calc(66vh * 16 / 9));max-width:min(96vw, calc(66dvh * 16 / 9));
  padding-inline:var(--g);display:grid;gap:.6rem;
  grid-template-columns:1fr;align-items:end}
@media(min-width:900px){
  /* headline left, credential rail right — a caption bar above the screen */
  .coach__left{grid-template-columns:minmax(0,1.4fr) auto;
    column-gap:clamp(1.5rem,4vw,3rem);padding-inline:0}
}
.coach__right{width:100%;display:flex;justify-content:center;padding-inline:var(--g)}

/* the monitor — sized by HEIGHT so the screen is ~2/3 of the viewport */
.monitor{position:relative;
  width:min(96vw, calc(66vh * 16 / 9 + 1.7rem));width:min(96vw, calc(66dvh * 16 / 9 + 1.7rem));
  margin-inline:auto;
  border-radius:18px;padding:.85rem .85rem 2.6rem;
  background:linear-gradient(160deg,#15181C,#0A0C0F);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.06)}
.monitor__screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#04070A;box-shadow:inset 0 0 40px rgba(0,0,0,.8)}
.monitor__screen video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;background:#04070A}
.monitor__glare{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,rgba(255,255,255,.07) 0%,transparent 32%)}
.monitor__bezel{position:absolute;left:1.2rem;right:1.2rem;bottom:.75rem;height:1.4rem;
  display:flex;align-items:center;gap:.8rem}
.monitor__ecg{flex:1;height:100%;overflow:hidden;position:relative}
.monitor__ecg svg{position:absolute;inset:0;width:200%;height:100%;
  animation:ecgroll 3.2s linear infinite}
@keyframes ecgroll{to{transform:translateX(-50%)}}
.monitor__ecg path{fill:none;stroke:var(--w-coaching);stroke-width:1.5;
  filter:drop-shadow(0 0 4px var(--w-coaching))}
.monitor__rep{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  color:var(--w-coaching);white-space:nowrap}
.monitor__led{width:6px;height:6px;border-radius:50%;background:var(--w-coaching);
  box-shadow:0 0 8px var(--w-coaching);animation:led 1.4s ease-in-out infinite}
@keyframes led{50%{opacity:.25}}

/* text lives OUTSIDE the video, as a caption bar above the screen */
.coach__stampbox{min-height:4.2rem;display:flex;flex-direction:column;justify-content:flex-end}
.coach__big{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,3.2rem);line-height:1.02;
  color:#fff;text-shadow:0 4px 40px rgba(255,77,109,.35)}
.coach__sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--w-coaching);margin-top:.5rem}

/* credential rail — horizontal beside the headline */
.crail{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;justify-content:flex-start}
@media(min-width:900px){.crail{justify-content:flex-end}}
.crail div{display:flex;align-items:center;gap:.55rem;opacity:.2;
  transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateY(6px)}
.crail div.lit{opacity:1;transform:none}
.crail b{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--ink)}
.crail span{display:none}
.crail i{width:1.1rem;height:1px;background:var(--w-coaching);flex:none}

/* ── breathing gap ── */
.gap{height:52vh;height:52dvh;display:grid;place-items:center;position:relative;z-index:2;background:var(--base)}
.gap h2{font-size:clamp(1.8rem,4.6vw,3.4rem);text-align:center;padding-inline:var(--g)}

/* ── humanity ── */
#humanity .ov{left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(84%,40rem);text-align:center}
#humanity .breath h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,3.4vw,2.9rem);line-height:1.15;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.55)}
#humanity .breath .btn{margin-top:1.2rem}

/* ═══ ABOUT — 3D photo album ═══ */
#about{padding-block:clamp(5rem,10vw,8rem);position:relative;z-index:2;background:var(--base)}
#about .head{text-align:center;margin-bottom:2.5rem}
#about h2{font-size:clamp(2.2rem,5vw,3.8rem)}
#about .lede{color:var(--ink-dim);max-width:52ch;margin:1rem auto 0}
.album{position:relative;width:min(56rem,94%);margin-inline:auto;
  aspect-ratio:16/10;perspective:2200px;perspective-origin:50% 50%}
.album__spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(0,0,0,.6),transparent);z-index:20;pointer-events:none}
.album__book{position:absolute;inset:0;transform-style:preserve-3d}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.3,0,.2,1);
  will-change:transform}
.leaf__face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  background:#0C1016;border:1px solid rgba(255,255,255,.08)}
.leaf__face--back{transform:rotateY(180deg)}
.leaf__face img{width:100%;height:100%;object-fit:cover}
.leaf__ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1.5rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);background:linear-gradient(155deg,#141A22,#080B10)}
.leaf__ph b{display:block;color:var(--w-humanity);font-size:.74rem;margin-bottom:.4rem}
/* diary note over the lower part of each page */
.leaf__note{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.1rem 1.2rem 1.2rem;
  background:linear-gradient(transparent,rgba(6,8,12,.72) 26%,rgba(6,8,12,.95))}
.leaf__t{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--w-humanity);margin-bottom:.45rem}
.leaf__note p{font-family:var(--serif);font-size:clamp(.82rem,1.15vw,1.02rem);
  line-height:1.42;color:var(--ink);font-style:italic}
@media(max-width:700px){.leaf__note p{font-size:.74rem;line-height:1.35}
  .leaf__note{padding:.7rem .8rem .8rem}}
.leaf__shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,.45),transparent 22%);opacity:0;
  transition:opacity .6s}
.leaf.turning .leaf__shade{opacity:1}
.album__nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1.6rem}
.album__nav button{border:1px solid var(--hair);color:var(--ink);font-size:1.15rem;
  width:2.6rem;height:2.6rem;border-radius:50%;transition:all .3s var(--ease)}
.album__nav button:hover{border-color:var(--accent);color:var(--accent)}
.album__pos{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  color:var(--ink-dim);min-width:12rem;text-align:center}

/* ── CONTACT (calm) ── */
#contact{position:relative;z-index:2;background:var(--base-2);
  padding-block:clamp(5rem,10vw,9rem)}
#contact .media-slot{position:absolute;inset:0;overflow:hidden;opacity:.3}
#contact .media-slot img,#contact .media-slot video{width:100%;height:100%;object-fit:cover}
#contact .inner{position:relative;z-index:1}
#contact h2{font-size:clamp(2.4rem,6vw,5rem);max-width:14ch}
.ct__grid{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr;margin-top:3rem}
@media(min-width:900px){.ct__grid{grid-template-columns:1.1fr .9fr}}
.f{display:block;margin-bottom:1.3rem}
.f span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);display:block;margin-bottom:.5rem}
.f input,.f textarea,.f select{width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--hair);color:var(--ink);font-family:var(--sans);
  font-size:1rem;font-weight:300;padding:.6rem 0;transition:border-color .4s var(--ease)}
.f select{appearance:none;background:var(--base-2)}
.f select option{background:var(--base-2);color:var(--ink)}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-bottom-color:var(--accent)}
.f textarea{resize:vertical;min-height:5.5rem}
.lnks{border-top:1px solid var(--hair)}
.lnk{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:1.15rem;border-bottom:1px solid var(--hair);
  transition:padding-left .5s var(--ease),color .4s var(--ease)}
.lnk:hover{padding-left:.9rem;color:var(--accent)}
.lnk__n{font-family:var(--serif);font-size:1.3rem}
.lnk__h{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--ink-dim)}
#fnote{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-dim);margin-top:1rem}

/* read mode neutralises the stage */
body.read .journey__pin{height:auto;display:block}
body.read .stage{max-height:none;aspect-ratio:16/9}
body.read .stage video{display:none}
body.read .stage .poster{display:block;position:relative;object-fit:cover}
body.read .ov,body.read .glasswrap{position:relative!important;opacity:1!important;
  visibility:visible!important;transform:none!important;inset:auto!important;
  width:auto!important;max-width:none!important;text-align:left!important;margin:1.5rem 0}
body.read .bar.tucked{transform:none}
body.read .monitor__screen video{opacity:1;position:relative}