/* Vessel — THE REEL
   Every scene is a tall section with a sticky stage inside it. reel.js
   writes one number, --p (0 → 1), onto each section as the reader scrolls
   through it; the CSS below turns that number into the motion. Nothing here
   has a duration: it has a position. Scroll back, and it runs back. */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
:root{
  --ground:#0f1113; --panel:#16191c; --line:#2b3136;
  --ink:#ece7dc; --ink-2:#a9a49a; --ink-3:#6f6c66; --ember:#e8552c;
  --serif:"Bodoni Moda",Georgia,serif; --e:cubic-bezier(.22,1,.36,1); --sans:"Archivo",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --p:1;
}
html{scroll-behavior:auto}
body{background:var(--ground);color:var(--ink-2);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.02;letter-spacing:-.01em;
  font-variation-settings:"opsz" 96}
ol,ul{list-style:none;padding:0}
.demo{position:relative;z-index:20;background:var(--ink);color:var(--ground);font-family:var(--mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;padding:8px 16px;text-align:center}
.demo b{font-weight:400;color:#8a2a12}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:18px}

/* the header sits over everything, and is the one thing that does not scroll away */
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(16px,4vw,48px);mix-blend-mode:difference;color:#fff;
  transition:transform 520ms var(--e),opacity 520ms var(--e)}
.is-scrolled .top{transform:translateY(-110%);opacity:0;pointer-events:none}
.brand{font-family:var(--serif);font-size:1.375rem;letter-spacing:-.02em;font-variation-settings:"opsz" 40}
.top nav{display:flex;gap:26px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.top__book{border-bottom:1px solid currentColor;padding-bottom:2px}
@media(max-width:640px){.top nav a:not(.top__book){display:none}}

/* a scene is --len screens tall; the stage inside it is pinned for the whole length */
.scene{position:relative;height:calc(var(--len,2) * 100vh)}
.pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;
  padding:0 clamp(16px,4vw,48px)}

/* 1. the name grows towards the reader and clears, leaving the line behind it */
.scene--title .pin{grid-template-rows:1fr auto}
.title{position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(5rem,22vw,26rem);font-style:italic;font-variation-settings:"opsz" 96,"wght" 400;
  transform:scale(calc(1 + var(--p) * 2.6));
  opacity:calc(1 - var(--p) * 1.6);
  will-change:transform,opacity;pointer-events:none}   /* no blur: an 18px filter over a 26rem word scaled 3.6x was the chunk in the first scroll (owner, 15 Oct) */
.title{z-index:1}.title__line{z-index:1}.cue{z-index:1}
/* the fire behind the name: it fades and comes closer as the name clears (transform and opacity only) */
.title__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.title__bg picture,.room__photo picture{display:block;width:100%;height:100%}
.title__bg img{display:block;width:100%;height:100%;object-fit:cover;
  opacity:calc(.55 - var(--p) * .5);transform:scale(calc(1.04 + var(--p) * .12));will-change:transform,opacity}
.title__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 55%,rgba(15,17,19,.15),rgba(15,17,19,.7) 70%,var(--ground))}
.title__line{position:relative;align-self:center;text-align:center;font-family:var(--serif);font-size:clamp(1.25rem,1rem + 1.6vw,2.25rem);
  color:var(--ink);max-width:24ch;
  opacity:clamp(0, calc((var(--p) - .45) * 3), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--p) - .45) * 3), 1)) * 24px))}
.cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);
  opacity:calc(1 - var(--p) * 4)}
.cue span{display:block;width:1px;height:40px;background:var(--ember);transform-origin:top;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 2. seven courses on a track the scroll pulls left */
.scene--courses .pin{place-items:stretch;grid-template-rows:auto 1fr auto;padding-block:clamp(72px,12vh,120px) 40px}
.courses__head{display:flex;justify-content:space-between;align-items:baseline}
.courses__count{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--ink-3)}
.courses__count b{color:var(--ink);font-weight:400}
.track{display:flex;gap:clamp(20px,3vw,48px);align-items:center;width:max-content;
  transform:translateX(calc(var(--p) * (100vw - 100% - 2 * clamp(16px,4vw,48px))));
  will-change:transform}
.course{width:min(78vw,520px);flex:none;padding:28px 0 0;border-top:1px solid var(--line)}
.course__n{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ember);margin-bottom:22px}
.course h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);margin-bottom:14px;max-width:14ch}
.course p{max-width:38ch;color:var(--ink-2)}
.bar{height:1px;background:var(--line);position:relative}
.bar span{position:absolute;left:0;top:-1px;height:3px;width:calc(var(--p) * 100%);background:var(--ember)}

/* 3. the room, uncovered as the scroll arrives */
.scene--room .pin{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center;color:var(--ink)}
/* the room is uncovered as the scroll arrives: a panel of the ground lifts off it (transform only) */
.room__photo{position:relative;margin:0;overflow:hidden;justify-self:center;width:min(100%,calc(74vh * .8));aspect-ratio:4/5}
.room__photo img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.12 - clamp(0, calc(var(--p) * 1.7), 1) * .12));will-change:transform}
.room__photo::after{content:"";position:absolute;inset:0;background:var(--ground);transform:translateY(calc(clamp(0, calc(var(--p) * 1.7), 1) * -101%));will-change:transform}
.room__text h2{font-size:clamp(1.5rem,1rem + 2vw,2.75rem);margin-bottom:18px}
.room__text p{max-width:42ch}
.room__text>*{opacity:0;transform:translateY(16px);transition:opacity 900ms var(--e),transform 900ms var(--e)}
.room__text>*:nth-child(2){transition-delay:120ms}.room__text>*:nth-child(3){transition-delay:260ms}
.is-in .room__text>*{opacity:1;transform:none}
@media(max-width:800px){.scene--room .pin{grid-template-columns:1fr;align-content:center}}

/* 4. numbers that count as far as the scroll has come — reel.js sets the digits */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,48px);width:100%;max-width:1100px}
.numbers div{border-top:1px solid var(--line);padding-top:18px;opacity:0;transform:translateY(18px);transition:opacity 800ms var(--e),transform 800ms var(--e)}
.numbers div:nth-child(2){transition-delay:110ms}.numbers div:nth-child(3){transition-delay:220ms}.numbers div:nth-child(4){transition-delay:330ms}
.is-in .numbers div{opacity:1;transform:none}
.numbers dt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.numbers dd b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,2rem + 6vw,8rem);line-height:.9;color:var(--ink);
  font-variation-settings:"opsz" 96;font-variant-numeric:tabular-nums}
.numbers dd i{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-top:12px}
@media(max-width:700px){.numbers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the end is still — the only thing on the page that does not move */
.book{min-height:100vh;display:grid;align-content:center;padding:clamp(72px,12vh,140px) clamp(16px,4vw,48px);
  max-width:820px;margin-inline:auto}
.book__photo{margin:0 0 clamp(40px,7vh,72px)}
.book__photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.book__photo figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}
.book h2{font-size:clamp(2rem,1.2rem + 3vw,4rem);margin-bottom:22px}
.book__p{max-width:48ch;margin-bottom:34px}
.book__tel{display:inline-block;font-family:var(--serif);font-size:clamp(2rem,1.4rem + 3vw,4.5rem);color:var(--ink);
  border-bottom:2px solid var(--ember);padding-bottom:6px;margin-bottom:40px;width:max-content;font-variation-settings:"opsz" 96}
.book__small{font-size:14px;color:var(--ink-3);max-width:60ch;margin-top:10px}
.foot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding:18px clamp(16px,4vw,48px) 40px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.back{display:inline-flex;gap:9px;border:1px solid var(--ink-3);padding:9px 14px;color:var(--ink)}
.back:hover{background:var(--ink);color:var(--ground)}

/* the still version: no pinning, every scene at its end state, in order */
@media(prefers-reduced-motion:reduce){
  .scene{height:auto}
  .pin{position:static;height:auto;min-height:0;padding-block:clamp(60px,10vh,120px)}
  :root{--p:1}.scene{--p:1 !important}
  .title{position:static;transform:none;opacity:1;filter:none;font-size:clamp(4rem,14vw,12rem)}
  .title__line{opacity:1;transform:none;margin-top:24px}
  .cue{display:none}
  .track{width:auto;flex-wrap:wrap;transform:none}
  .course{width:min(100%,520px)}
  .room__text>*,.numbers div{opacity:1;transform:none;transition:none}
  .title__bg img{transform:none;opacity:.4}.room__photo img{transform:none}.room__photo::after{display:none}
  .top{transition:none}.is-scrolled .top{transform:none;opacity:1;pointer-events:auto}
}