/* The home page (Dinos, "Web Changes Nov 2026"; live 2026-11-04): the scroll journey hero, its opening, and the small
   additions around the home's sections (his Why Core Concepts points, the case studies from the Work page). Built in
   home-dinos-lab (src/jy.css, src/intro.css, src/dh.css), where the frames are made (journey_frames.py). pages/nov2026.py
   puts the page together. */

/* journey.html hero (2026-11-03): Dinos' four Higgsfield scenes as one scroll film, his words for each part.
   Always dark (it is footage), like the film hero on index.html; uses the same tokens. */
.jy{--jy-bg:#050908;--jy-mint:#17FFC5;--jy-soft:rgba(255,255,255,.8);--jy-mute:rgba(255,255,255,.56);--jy-line:rgba(255,255,255,.16);
  --jy-ease:cubic-bezier(.22,1,.36,1);--jy-gut:clamp(20px,4.2vw,72px);--jy-len:6.4;
  position:relative;height:calc(var(--jy-len) * 100lvh + 100dvh);background:var(--jy-bg);color:#fff;font-family:"Mona Sans",system-ui,sans-serif}
.jy *{box-sizing:border-box}
.jy-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jy-stage{position:sticky;top:0;height:100dvh;min-height:560px;overflow:hidden;isolation:isolate}

/* the film: scene A, and the window scene B opens out of */
.jy-film{position:absolute;inset:0;z-index:0;background:#0b100f}
.jy-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .5s ease}
.jy-poster img{display:block;width:100%;height:100%;object-fit:cover}
.jy.is-ready .jy-poster{opacity:0;pointer-events:none}
.jy-a,.jy-b{position:absolute;left:0;top:0;width:100%;height:100%;display:block;transform-origin:0 0;will-change:transform}
.jy-win{position:absolute;inset:0;z-index:1;overflow:hidden;will-change:clip-path}
.jy-win[hidden]{display:none}
.jy-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(180deg,rgba(5,9,8,.55) 0%,rgba(5,9,8,0) 20%),
  linear-gradient(0deg,rgba(5,9,8,.9) 0%,rgba(5,9,8,.62) 24%,rgba(5,9,8,.16) 46%,rgba(5,9,8,0) 62%),
  linear-gradient(90deg,rgba(5,9,8,.62) 0%,rgba(5,9,8,.22) 38%,rgba(5,9,8,0) 60%)}

/* the end (Kyro, 2026-11-04: "blend the hero with the below section"): over the last part of the scroll the film dims
   and its lower half turns into the colour of the section below (--jy-next, read from that section by jy.js, so the
   light theme matches too), and the four-part bar steps back. When the hero scrolls away there is no edge left. */
.jy{background:var(--jy-next,var(--jy-bg))}
.jy-fade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--jy-end,0);
  background:linear-gradient(180deg,color-mix(in srgb,var(--jy-next,#070C0B) 30%,transparent) 0%,color-mix(in srgb,var(--jy-next,#070C0B) 55%,transparent) 45%,var(--jy-next,#070C0B) 92%)}
.jy-rail,.jy-hint{opacity:calc(1 - var(--jy-end,0))}
/* light theme: the ground under the words turns pale, so the white words leave before it does */
html[data-theme="light"] .jy-ui{opacity:clamp(0,calc((.8 - var(--jy-end,0)) * 2.2),1)}

/* the words: four parts stacked in one cell, the newest grows upward from the buttons */
.jy-ui{position:absolute;inset:auto 0 0 0;z-index:4;width:calc(100% - 2 * var(--jy-gut));max-width:1400px;margin:0 auto;
  padding-bottom:clamp(18px,3.2vh,32px);display:flex;flex-direction:column;gap:clamp(22px,3.6vh,40px)}
.jy-say{display:grid;max-width:min(980px,100%)}
.jy-c{grid-area:1/1;align-self:end;display:flex;flex-direction:column;gap:clamp(14px,2.2vh,22px);pointer-events:none}
.jy-q{margin:0;font-size:clamp(40px,4.9vw,86px);font-weight:540;line-height:1.02;letter-spacing:-.042em;text-wrap:balance;max-width:13.6em}
.jy-q .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.jy-q .w>i{display:inline-block;font-style:normal;transform:translateY(132%);transition:transform .9s var(--jy-ease);transition-delay:calc(var(--i) * 45ms)}
.jy-q .w--m>i{color:var(--jy-mint)}
.jy-q em{font-style:normal;color:var(--jy-mint)}   /* before the script cuts the words, and without it */
.jy-a2{margin:0;max-width:36em;font-size:clamp(16px,1.25vw,20px);font-weight:420;line-height:1.5;color:var(--jy-soft);text-wrap:pretty;
  opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s var(--jy-ease)}
.jy-c.is-on .jy-q .w>i{transform:none}
.jy-c.is-on .jy-a2{opacity:1;transform:none;transition-delay:.28s}
.jy-c.is-out .jy-q .w>i{transform:translateY(-132%);transition:transform .45s cubic-bezier(.5,0,.75,0);transition-delay:calc(var(--i) * 12ms)}
.jy-c.is-out .jy-a2{opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s ease}

.jy-c.is-reset .jy-q .w>i,.jy-c.is-reset .jy-a2{transition:none!important}

.jy-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.jy .cc-btn--primary{background:var(--jy-mint);color:#062226;border-color:transparent}
.jy-more{display:inline-flex;align-items:center;gap:10px;padding:10px 0;color:#fff;font-size:15px;font-weight:560;text-decoration:none}
.jy-more span{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .25s}
.jy-more svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--jy-ease)}
.jy-more:hover span{border-color:var(--jy-mint)}
.jy-more:hover svg{transform:translateX(4px)}
.jy-more:focus-visible{outline:2px solid var(--jy-mint);outline-offset:4px;border-radius:4px}
.jy-hint{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:520;color:var(--jy-mute);transition:opacity .4s}
.jy-hint i{position:relative;width:1px;height:26px;background:var(--jy-line);overflow:hidden}
.jy-hint i::after{content:"";position:absolute;left:0;top:0;width:1px;height:10px;background:var(--jy-mint);animation:jy-drop 1.8s cubic-bezier(.6,0,.3,1) infinite}
.jy-hint.is-gone{opacity:0}
@keyframes jy-drop{0%{transform:translateY(-12px)}70%,100%{transform:translateY(28px)}}

/* the four parts: a button each, with a line that fills as the part plays */
.jy-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:clamp(10px,1.6vw,24px);align-items:end}
.jy-r{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:12px;padding:6px 0 4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jy-r__t{display:flex;align-items:baseline;gap:10px;font-size:12px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:var(--jy-mute);transition:color .3s}
.jy-r__t b{font-weight:650;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.4);transition:color .3s}
.jy-r__l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jy-r__bar{position:relative;display:block;height:2px;background:var(--jy-line);overflow:hidden;border-radius:2px}
.jy-r__f{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.jy-r.is-on .jy-r__t{color:#fff}
.jy-r.is-on .jy-r__t b{color:var(--jy-mint)}
.jy-r.is-on .jy-r__f{background:var(--jy-mint)}
.jy-r:hover .jy-r__t{color:#fff}
.jy-r:focus-visible{outline:2px solid var(--jy-mint);outline-offset:6px;border-radius:4px}
.jy-skip{align-self:end;padding:6px 0 10px;font-size:12px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:var(--jy-mute);text-decoration:none;white-space:nowrap;transition:color .25s}
.jy-skip:hover{color:#fff}
.jy-skip:focus-visible{outline:2px solid var(--jy-mint);outline-offset:4px;border-radius:4px}
.jy-now{display:none}
/* the site's sound button sits in the bottom left corner: the bar starts to its right (as on index.html) */
@media (min-width:768px) and (min-aspect-ratio:17/20){ .jy-rail{padding-left:max(0px,calc(150px - max(var(--jy-gut),(100vw - 1400px) / 2)))} }

/* light theme: the hero stays dark, so its buttons keep the dark theme's colours (as on index.html) */
:root[data-theme="light"] body .jy .cc-site{--cc-ink:#FFFFFF;--cc-soft:rgba(255,255,255,.74);--cc-mute:rgba(255,255,255,.54);--cc-line:rgba(255,255,255,.12);--cc-mint:#17FFC5;--cc-on-mint:#04110D;color:#fff}

/* tablets */
@media (max-width:1100px){ .jy-q{font-size:clamp(38px,6vw,64px)} }

/* phones: a portrait crop of the film that pans to the screen; one line names the part, four short lines below */
@media (max-width:767.98px), (max-aspect-ratio:17/20){
  .jy{--jy-gut:18px}
  .jy-scrim{background:linear-gradient(180deg,rgba(5,9,8,.6) 0%,rgba(5,9,8,0) 18%),
    linear-gradient(0deg,rgba(5,9,8,.94) 0%,rgba(5,9,8,.78) 30%,rgba(5,9,8,.25) 52%,rgba(5,9,8,0) 66%)}
  .jy-ui{gap:18px;padding-bottom:calc(max(10px,env(safe-area-inset-bottom)) + 44px)}   /* clear of the sound button */
  .jy-q{font-size:clamp(32px,9.4vw,46px);line-height:1.04}
  .jy-a2{font-size:16px}
  .jy-act{gap:10px 22px}
  .jy-hint{display:none}
  .jy-now{display:flex;align-items:baseline;gap:10px;margin:0 0 -8px;font-size:12px;font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:#fff}
  .jy-now b{color:var(--jy-mint);font-variant-numeric:tabular-nums}
  .jy-rail{gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .jy-r{padding:10px 0 8px}
  .jy-r__t{display:none}
  .jy-skip{display:none}
}

/* reduced motion: no scrubbing, no fly-through, the words fade */
@media (prefers-reduced-motion:reduce){
  .jy-q .w>i,.jy-c.is-out .jy-q .w>i{transform:none;transition:none}
  .jy-c{opacity:0;transition:opacity .4s ease}
  .jy-c.is-on{opacity:1}
  .jy-a2,.jy-c.is-out .jy-a2{transform:none}
  .jy-hint i::after{animation:none}
}

/* The opening of journey.html (2026-11-04, Kyro: "an opening animation when someone gets in the website").
   Core's own logo plays it: the mint pill (the O of CORE) draws itself in as the film loads, C and RE slide out from
   behind it, CONCEPTS lights up inside it, then the film appears inside the pill and the pill opens to the whole
   screen, pushing C and RE off the edges. You enter the film through the O. About 2.5 seconds; any scroll, key or tap
   plays the rest faster. Once per visit (a reload plays it again, ?intro forces it); never under reduced motion.
   html.cc-intro (set by the inline script in <head>) keeps the film inside the pill; html.cc-intro-hide keeps the
   header, the words and the sound button back until the pill opens. intro.js runs it and removes both. */
.cci{display:none}
html.cc-intro .cci{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;contain:strict}
.cci-ring{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.cci-ring path{fill:none;stroke:#5FFFD6;stroke-linecap:round;stroke-linejoin:round}
.cci-logo{position:absolute;left:50%;top:50%;width:min(60vw,820px);aspect-ratio:2535/716;transform:translate(-50%,-50%)}
.cci-logo>span{position:absolute;display:block;overflow:hidden}      /* a window each letter group slides out of */
.cci-logo img{display:block;width:100%;height:100%;will-change:transform}
.cci-c{left:0;top:19.553%;width:17.041%;height:60.754%}
.cci-re{left:67.653%;top:19.553%;width:32.347%;height:60.754%}
.cci-w{left:27.811%;top:41.899%;width:29.191%;height:13.687%}
.cci-c img{transform:translateX(101%)}
.cci-re img{transform:translateX(-101%)}
.cci-w{opacity:0}
@media (max-width:767.98px),(max-aspect-ratio:17/20){ .cci-logo{width:min(84vw,440px)} }

/* while it plays: the film shows only inside the pill, everything around it waits */
html.cc-intro .jy-film{clip-path:var(--cci-clip,inset(50% 50% 50% 50%));opacity:var(--cci-f,0)}
html.cc-intro .jy-a,html.cc-intro .jy-poster{transform:scale(var(--cci-z,1.16));transform-origin:50% 50%}
html.cc-intro-hide .jy-scrim,html.cc-intro-hide .jy-ui,html.cc-intro-hide .cc-h,html.cc-intro-hide .cc-snd{opacity:0!important;pointer-events:none}
html.cc-intro-out .jy-scrim{transition:opacity 1.1s ease}
html.cc-intro-out .jy-ui{transition:opacity .5s ease}
html.cc-intro-out .cc-h,html.cc-intro-out .cc-snd{transition:opacity .9s ease .2s}

/* ---------- Why Core Concepts: his intro line and the seventh part (everything connected) ---------- */
/* his closing statement sits under the wall, so the line is wider than the live one */
@media (min-width:768px){ .mf .mf-whatwins{max-width:54ch;font-size:clamp(20px,1.85vw,30px);line-height:1.18;bottom:calc(100% - 100vh + clamp(36px,7vh,80px))} }   /* the stage is taller than the screen */
.mf .mf-s1-sub{margin:0;max-width:48ch;text-align:center;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--soft)}
.mf .r6{display:flex;flex-direction:column;gap:10px}
.mf .r6-map{position:relative;flex:1;min-height:0}
.mf .r6-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mf .r6-lines path{fill:none;stroke:rgba(var(--cc-mint-rgb, 23, 255, 197),.6);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mf .r6-core,.mf .r6-n{position:absolute;translate:-50% -50%;z-index:1}
.mf .r6-core{left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 20px;border-radius:14px;background:var(--lift);border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.55);box-shadow:0 0 34px -8px rgba(var(--cc-mint-rgb, 23, 255, 197),.5)}
.mf .r6-core b{font-size:15px;font-weight:600;white-space:nowrap;color:var(--cc-fff, #fff)}
.mf .r6-core small{font-size:11px;color:var(--soft)}
.mf .r6-n{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;white-space:nowrap;font-size:12.5px;font-weight:550;color:var(--mute);background:var(--lift);border:1px solid rgba(var(--cc-fg, 255, 255, 255),.12);transition:color .3s,border-color .3s}
.mf .r6-n i{width:7px;height:7px;border-radius:50%;background:rgba(var(--cc-fg, 255, 255, 255),.25);transition:background .3s,box-shadow .3s}
.mf .r6-n.on{color:var(--cc-fff, #fff);border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.55)}
.mf .r6-n.on i{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.mf .r6-msg{margin:0;font-size:14px;color:var(--soft)}
.mf .r6-msg b{font-weight:600;color:var(--mint)}
.mf .mf-solo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:0 10px}
.mf .mf-miss{font-size:11px;padding:6px 10px;border-radius:999px;border:1px dashed rgba(var(--cc-fg, 255, 255, 255),.24);color:rgba(var(--cc-fg, 255, 255, 255),.42)}
@media (max-width:767.98px){
  .mf .r6-n{font-size:10.5px;padding:5px 9px;gap:5px}
  .mf .r6-core{padding:8px 12px}
  .mf .r6-core b{font-size:12.5px}
  .mf .r6-msg{font-size:12px}
}

/* ---------- case studies: the Work page's hero, with bigger screens ---------- */
.dw .dw-rows{margin-top:clamp(30px,4vw,56px)}
.dw .mq-track{gap:22px}
.dw .mq + .mq{margin-top:22px}
.dw .mq-track a{width:clamp(280px,30vw,500px);border-radius:20px}
@media (max-width:767.98px){ .dw .mq-track a{width:min(78vw,340px)} }

/* Inside WordPress (the rehearsal of docs/site-rebuild/live/make_live.py, 4 Nov 2026) the theme's own tag rules, such as
   its h2 sizes for phones and tablets and its bold weight, outrank a few of the one-class rules above.
   The same values again, one class stronger, so the live page looks like this one. */
.jy .jy-q{font-size:clamp(40px,4.9vw,86px)}
.jy .jy-vh{font-size:2em}
.jy .jy-now b{font-weight:bolder}
@media (max-width:1100px){ .jy .jy-q{font-size:clamp(38px,6vw,64px)} }
@media (max-width:767.98px), (max-aspect-ratio:17/20){ .jy .jy-q{font-size:clamp(32px,9.4vw,46px)} .jy p.jy-now{margin:0 0 -8px} }