/* ===== the journey ===== */
#journey{position:relative;z-index:1}
.scene{position:relative;min-height:220vh}
.s01{min-height:280vh}
.s08{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:12vh 0 8vh}   /* the closing panel sits in one screen; the footer follows directly */
.scene-hold{min-height:100dvh}                /* ScrollTrigger pin spacing adds the rest */

:root{--rail:clamp(4rem,5vw,5rem)}
/* readable blocks hold at a fixed viewport position for a while, then release */
.ov{position:sticky;top:14vh;width:min(600px,100%);padding:0 1.5rem;margin-right:auto}
@media (min-width:1024px) and (min-height:561px){.scene > .ov{margin-left:max(var(--rail),calc((100% - 1280px) / 2 + 1.5rem))}}
.ov.side-r{margin-left:auto;margin-right:0}
.panel{padding:2rem}

/* 01 arrival: split screen, text left in a glass panel, the film is the visual on the right */
.s01 .hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:2rem;max-width:1280px;margin:0 auto;padding:0 1.5rem;min-height:280vh}
.ov-hero{position:sticky;top:22vh;width:min(540px,100%);padding:2rem}
html.js:not(.editorial) .ov-hero{opacity:0}
html.js:not(.editorial) .ov-hero > *{opacity:0;will-change:opacity,transform}
/* the name: the empty left third of the close-up, vertically centred. Scrolling in lifts it and fades it (JS drives --lift and opacity) */
.hero-name{position:absolute;left:max(1.5rem,var(--rail));top:50dvh;margin:0;z-index:2;color:var(--accent);
  font-size:clamp(2.5rem,5.4vw,7rem);line-height:.95;letter-spacing:-.03em;font-weight:700;white-space:nowrap;   /* 4.6vw below 1280px, see the desktop block */
  text-shadow:0 2px 24px rgba(20,20,22,.35);transform:translateY(calc(-50% - var(--lift,0px)));will-change:transform,opacity}
html.js:not(.editorial) .hero-name{opacity:0}
.editorial .hero-name,html:not(.js) .hero-name{position:static;transform:none;opacity:1;white-space:normal;width:100%;max-width:1280px;margin:0 auto 1.5rem;padding:0 1.5rem;font-size:clamp(2.5rem,6vw,5rem)}
@media (min-width:1024px) and (min-height:561px){.editorial .hero-name,html:not(.js) .hero-name{padding-left:max(1.5rem,var(--rail))}}
/* the close-up tag: bottom left of the first viewport, clear of her face; fades as the panel arrives */
.hero-tag{position:absolute;left:max(1.5rem,var(--rail));top:calc(100dvh - 5.5rem);margin:0;padding:.6rem .9rem;border-radius:999px;z-index:2}
html.js:not(.editorial) .hero-tag{opacity:0}
.editorial .hero-tag,html:not(.js) .hero-tag{display:none}
.cue{margin-top:1.75rem}
.cue i{width:1px;height:28px;background:var(--accent);display:block;animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* 02 the builder: a zig-zag row, portrait left, panels right, both hold while her walk begins */
.s02{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:2rem;max-width:1280px;margin:0 auto;padding:0 1.5rem}
.s02 .portrait{position:sticky;top:14vh;width:min(26vw,360px);margin:0 0 0 clamp(1rem,8vw,8rem);border-radius:var(--radius);overflow:hidden}
.s02 .portrait img{display:block;width:100%;height:auto}
.s02 .ov{width:min(620px,100%);padding:2rem}
.dims{display:grid;gap:1.25rem;margin-top:.5rem}
.dim{border-top:1px solid var(--border);padding-top:1rem}
.dim h3{margin-bottom:.4rem;font-size:1.25rem}
.dim p{font-size:.9375rem}

/* 03 / 05 holds: the section pins, the track pans */
.hold{position:relative;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:2rem;padding:8vh 0 5vh;overflow:hidden}
.ov-head{padding:0 1.5rem;max-width:1280px;margin:0 auto;width:100%}
.ov-head .panel{max-width:760px}
.track{display:flex;gap:1.5rem;padding:0 1.5rem;will-change:transform;align-items:stretch}   /* every card in a pan shares the tallest height */
.track .card{flex:0 0 min(76vw,880px)}

/* 04 / 06 / 07 flowing scenes */
.ov-wide{padding:12vh 1.5rem 8vh;max-width:1280px;margin:0 auto}
.ov-wide header{margin-bottom:3rem}
.ov-wide header .panel{max-width:760px}
.cards{display:grid;gap:3rem}

/* project card: zig-zag rows (image / text alternate), glass surface */
.card{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;padding:1.5rem;transition:transform var(--fast) var(--spring),box-shadow var(--fast) ease}
.card:hover{transform:scale(1.03);box-shadow:var(--shadow-lift)}
.cards .card.flip .media{order:2}                /* zig-zag only where cards stack vertically */
.card .media{overflow:hidden;border-radius:var(--radius);background:var(--surface);margin:0;min-height:280px;box-shadow:-1px 0 0 rgba(54,209,224,.25),1px 0 0 rgba(240,92,156,.25)}   /* fills the card's height */
.card .media img,.card .media video{width:100%;height:100%;object-fit:cover;display:block}
.card .body{display:flex;flex-direction:column;min-width:0}
.card .cat{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}
.card .cat .k{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500}
.card h3{margin-bottom:.5rem}
.desc{font-size:1rem;line-height:1.6;margin-bottom:1rem}
.fields{display:grid;gap:.5rem}
.f{display:grid;grid-template-columns:132px 1fr;gap:.75rem;font-size:.9375rem;line-height:1.5;border-top:1px solid var(--border);padding-top:.5rem}
.f dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding-top:.2rem;font-weight:500}
.f dd{color:var(--text-2)}
.feats{list-style:none;margin:1rem 0 0;display:grid;gap:.4rem;font-size:.9375rem}
.feats li{display:flex;justify-content:space-between;gap:.75rem;border-top:1px solid var(--border);padding-top:.4rem;align-items:center}
.plinks{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}

/* 08 closing: one screen, the panel centred */
.ov-end{position:relative;top:auto;padding:2rem}
.s08 .ov-end{margin-left:auto;margin-right:auto}
.links{list-style:none;margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem}

@media (min-width:1024px) and (max-width:1279px) and (min-height:561px){.hero-name{font-size:4.6vw}}

/* the content clears the rail on the left until the viewport is wide enough to centre past it. Declared after the
   panels' own padding shorthands so it wins the cascade. */
@media (min-width:1024px) and (min-height:561px){.s01 .hero,.s02,.ov-head,.ov-wide{padding-left:max(1.5rem,var(--rail))}}

/* ===== breakpoints =====
   desktop  (min-width:1024px) and (min-height:561px)   side rail, sticky panels, the two pins and their pans
   compact  (max-width:1023px), (max-height:560px)      native scroll, no pins, everything stacks, the index is a pill at the bottom
   tablet   768..1023px wide and tall enough            compact with more room: wider gutters, larger name, two-column fields
   short    (max-height:560px)                          landscape phones: a tighter opening panel, a longer scene 01
   js/main.js reads the same compact and phone queries, so the pins and the frame step follow the layout. */

/* ===== compact: phones first ===== */
@media (max-width:1023px), (max-height:560px){
  .scene{min-height:150vh}
  .s01{min-height:170vh}
  .s08{min-height:100dvh;padding:12vh 1rem calc(4.5rem + 4vh)}   /* a full screen, so the last dot can bring it to the top; side gutter; the bottom clears the index pill */
  .s01 .hero{display:block;padding:28vh 1rem 0;min-height:170vh}   /* padding, not a margin on the panel: a margin collapses through to the page and pushes scene 01 down */
  /* the opening text sits at the bottom of the first screen (svh: the screen as it is at load, before the browser
     chrome hides), over the jacket, clear of her face. The index pill is hidden until the content begins (main.js). */
  .hero-tag{left:1rem;right:auto;max-width:calc(100% - 2rem);top:auto;bottom:calc(100% - 100svh + 1.5rem);font-size:.6875rem}
  .hero-name{left:1rem;top:auto;bottom:calc(100% - 100svh + 6rem);transform:translateY(calc(0px - var(--lift,0px)));
    font-size:min(2.75rem,calc((100vw - 2rem) / 7.6))}   /* one line: the name is about 6.9em wide in the system face, 7.6 leaves room for other platforms' fonts */
  .hero-name br{display:none}
  .ov,.ov.side-r{position:static;width:auto;margin:0;padding:1.25rem}
  .ov-hero{position:sticky;top:10vh;width:auto;margin:0;padding:1.25rem}   /* holds on screen while it fades in */
  .s02{display:block;padding:0 1rem}
  .s02 .portrait{position:static;width:56vw;margin:14vh 0 1rem .25rem}
  .scene-hold{min-height:0}
  .hold{min-height:0;padding:10vh 0;overflow:visible}
  .ov-head{padding:0 1rem}
  .track{flex-direction:column;padding:0 1rem;gap:1.25rem;transform:none!important}
  .track .card{flex:none;width:auto}
  .ov-wide{padding:10vh 1rem}
  .card,.card.flip{grid-template-columns:1fr;padding:1rem;gap:1.25rem}
  .card .media{aspect-ratio:16/10;min-height:0}
  .cards .card.flip .media{order:0}
  .card:hover{transform:none;box-shadow:var(--shadow)}
  .f{grid-template-columns:1fr;gap:.2rem}
  .btn{min-height:44px;line-height:1.2;white-space:normal;text-align:center}   /* touch targets; long placeholder labels wrap */
  .index{left:50%;right:auto;top:auto;bottom:.9rem;transform:translateX(-50%)}   /* arrives with the content: main.js fades it in with the dim */
  .index ol{flex-direction:row;gap:.15rem;padding:.3rem .5rem;border-radius:999px;background:var(--surface-strong);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--border)}
  .index ol::before,.index ol::after{display:none}
  .index a{width:2rem;height:2rem}
  .index a.on::before{height:6px;width:18px}
  .index .lbl{display:none}
  .ft{padding-bottom:4.5rem}
}

/* ===== narrow phones: a smaller pill ===== */
@media (max-width:359px){.index a{width:1.75rem;height:1.75rem}}

/* ===== tablet: compact with more room ===== */
@media (min-width:768px) and (max-width:1023px) and (min-height:561px){
  .s01 .hero,.s02,.ov-wide,.s08{padding-left:1.5rem;padding-right:1.5rem}
  .ov-head,.track{padding-left:1.5rem;padding-right:1.5rem}
  .hero-name{left:1.5rem;font-size:min(3.5rem,calc((100vw - 3rem) / 7.6));bottom:calc(100% - 100svh + 5rem)}
  .hero-tag{left:1.5rem}
  .ov-hero{width:min(600px,100%);padding:2rem}
  .ov,.ov.side-r{padding:2rem}
  .s02 .portrait{width:min(44vw,360px);margin:12vh 0 1.5rem .5rem}
  .card,.card.flip{padding:1.5rem;gap:1.5rem}
  .cards{gap:2.5rem}
  .f{grid-template-columns:132px 1fr;gap:.75rem}
}

/* ===== short viewports (landscape phones): a tighter opening ===== */
@media (max-height:560px){
  .s01,.s01 .hero{min-height:260vh}
  .hero-name{font-size:2rem}                                /* the whole frame width shows: the name stays in the empty left third */
  .s02 .portrait{width:min(32vw,220px);margin:8vh 0 1rem .25rem}
  .s01 .hero{padding-top:14vh}
  .ov-hero{top:5vh;padding:1rem 1.25rem}
  .ov-hero .ident{margin-bottom:.6rem}
  .hero-h{font-size:1.625rem}
  .ov-hero .lede{font-size:1rem;margin-top:.5rem}
  .cue{margin-top:.9rem}
  .cue i{height:16px}
  .ov-end{padding:1rem 1.25rem}
  .ov-end h2{font-size:1.75rem}
  .ov-end .lede{margin-top:.5rem}
  .links{margin-top:1rem}
}