/* ==========================================================================
   journey.css: From plant to decision, the 3D system film on the home page.

   Everything under "the section" is the approved Emerald section's own CSS,
   exactly as supplied. The rules above it only fit it to this site, and
   change nothing about how it looks. The block at the end is the one
   deliberate change: on a desktop screen the film fills the screen.
   ========================================================================== */

/* ---- fitting it to the site ----
   site.css sets type on the body and on every heading and paragraph, and the
   section was drawn against the browser's own defaults. These put the defaults
   back inside it: without them the chapter headings take the page's dark ink
   on the dark film. They come first, so anything the section sets for itself
   still wins. */
.jpv{font-size:1rem;line-height:normal}
.jpv h3{color:inherit;letter-spacing:normal}
.jpv p{margin:1em 0}
.jpv button:focus-visible{border-radius:0}
/* the site's kicker, in the film's accent, for the static version */
.jpv-static .kicker{color:var(--film-accent)}
/* heights for browsers that predate svh; the svh values below win everywhere else */
.jpv.is-ready{height:620vh}
.jpv-pin{height:100vh}
.jpv-picture{width:min(100%,177.778vh)}
@media(max-width:700px){.jpv.is-ready{height:560vh}}

/* ---- the section ---- */

.jpv{--film-accent:#97e2bc;--film-bg:#050e0e;position:relative;isolation:isolate;background:var(--film-bg);color:#edf0e6;font-family:'Hanken Grotesk',sans-serif}
.jpv.jpv-gold{--film-accent:#e7bf7c;--film-bg:#0a0d0c}.jpv.is-ready{height:620svh}.jpv-pin{height:100svh;position:relative;overflow:hidden;background:var(--film-bg)}.jpv.is-ready .jpv-pin{position:sticky;top:0}
.jpv-picture{position:absolute;top:50%;left:50%;width:min(100%,177.778svh);aspect-ratio:16/9;transform:translate(-50%,-50%);overflow:hidden;background:#050e0e}
.jpv video{display:block;width:100%;height:100%;object-fit:contain;background:#050e0e}
.jpv-controls{position:absolute;z-index:5;left:5.5%;right:7.5%;bottom:4.4%;display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(transparent,var(--film-bg) 35%);padding-top:18px}
.jpv-control{border:1px solid #ffffff30;border-radius:30px;padding:9px 17px;color:#dce5d6;background:#07120fb3;font:10px 'IBM Plex Mono',monospace;cursor:pointer;letter-spacing:.06em;white-space:nowrap}.jpv-control:hover{border-color:var(--film-accent);color:var(--film-accent)}.jpv button:focus-visible{outline:2px solid var(--film-accent);outline-offset:4px}.jpv-instruction{font:9px 'IBM Plex Mono',monospace;color:#9eafa0;letter-spacing:.08em}.jpv-time{color:var(--film-accent);font:10px 'IBM Plex Mono',monospace;margin-right:18px}
.jpv-nav{position:absolute;left:5.4%;right:7.3%;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;background:var(--film-bg);z-index:6;padding:0 0 2.3%;height:9%}
.jpv-nav button{border:0;border-top:1px solid #3e5047;background:none;color:#a1b1a3;font:10px 'IBM Plex Mono',monospace;text-transform:uppercase;text-align:left;padding:12px 0 0;cursor:pointer;position:relative;letter-spacing:.03em}.jpv-nav button[aria-current=step]{border-top:2px solid var(--film-accent);color:var(--film-accent)}.jpv-nav small{font-size:8px;margin-right:8px;opacity:.6}
.jpv-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.jpv-copy article{display:none}.jpv-copy article.on{display:block}.jpv-copy h3{font:400 42px/1.05 'Fraunces',Georgia,serif;letter-spacing:-.04em;margin:12px 0 16px}.jpv-copy p{font:14px/1.6 'Hanken Grotesk',sans-serif;color:#afc2b2;max-width:320px;margin:0}.jpv-copy small{font:9px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--film-accent);text-transform:uppercase}
.jpv-status{position:absolute;left:7%;top:13%;z-index:7;max-width:320px;padding:10px 16px;border:1px solid #ffffff30;background:#06100ef2;font:12px/1.5 'Hanken Grotesk',sans-serif}.jpv-status[hidden]{display:none}
.jpv-static{padding:100px 7%;max-width:1200px;margin:auto}.jpv-static h3{font:400 44px/1.15 'Fraunces',Georgia,serif;margin:24px 0}.jpv-static p{font-size:18px;line-height:1.6;color:#b6c5b9}.jpv-static ol{line-height:2.2;color:#c1cfbf}.jpv.is-ready .jpv-static{display:none}.jpv:not(.is-ready) .jpv-pin{display:none}
.jpv.is-calm{height:auto}.jpv.is-calm .jpv-pin{position:relative;display:block;height:auto;aspect-ratio:16/9}.jpv.is-calm .jpv-picture{inset:0;transform:none;width:100%;height:100%}.jpv.is-calm .jpv-static{display:block}.jpv.is-calm .jpv-instruction{display:none}
@media(max-width:700px){.jpv.is-ready{height:560svh}.jpv-pin{min-height:min(620px,100svh)}.jpv-picture{top:0;left:0;width:100%;height:100%;aspect-ratio:auto;transform:none}.jpv video{position:absolute;width:177.778svh;height:100svh;max-width:none;left:50%;top:0;transform:translateX(-68.5%);object-fit:fill}.jpv-picture:after{content:'';position:absolute;inset:0;background:linear-gradient(#050e0ef0 0%,#050e0ed9 30%,transparent 52%,transparent 71%,#050e0e 88%);pointer-events:none}.jpv-gold .jpv-picture:after{background:linear-gradient(#0a0d0cf0,#0a0d0ccd 30%,transparent 52%,transparent 71%,#0a0d0c 88%)}.jpv-copy{position:absolute;clip-path:none;left:7%;top:135px;width:86%;height:auto;z-index:3;overflow:visible}.jpv-copy h3{font-size:36px;max-width:330px}.jpv-copy p{font-size:13px;line-height:1.6;max-width:295px}.jpv-controls{left:7%;right:7%;bottom:99px;padding:5px 0;background:none}.jpv-instruction{max-width:125px;font-size:8px;line-height:1.6}.jpv-time{display:none}.jpv-control{font-size:9px;padding:10px 14px}.jpv-nav{left:7%;right:7%;bottom:22px;height:62px;gap:9px;padding:0}.jpv-nav button{font-size:9.5px;line-height:1.3;padding-top:10px;letter-spacing:0}.jpv-nav small{display:block;font-size:9px;margin:0 0 5px}.jpv-status{top:90px;left:7%;max-width:86%;font-size:11px}.jpv.is-calm{height:auto}.jpv.is-calm .jpv-pin{aspect-ratio:auto;height:740px}.jpv.is-calm .jpv-picture{height:100%}}
@media(prefers-reduced-motion:reduce){.jpv *{scroll-behavior:auto!important}}
@media(min-width:701px){.jpv-controls{top:12%;bottom:auto;left:5.5%;right:7.5%;background:none;padding:0}}
@media(max-width:700px){.jpv video{width:142.222svh;height:80svh;top:14svh;clip-path:inset(10% 0 28% 0)}.jpv-picture:after,.jpv-gold .jpv-picture:after{background:linear-gradient(var(--film-bg) 0%,transparent 40%,transparent 74%,var(--film-bg) 90%)}}
@media(max-width:700px){.jpv video{mask-image:linear-gradient(#000 0%,#000 64%,transparent 72%)}.jpv[data-chapter="1"] video{clip-path:inset(26% 0 28% 0)}}
@media(max-width:700px){.jpv[data-chapter="1"] video{mask-image:linear-gradient(transparent 26%,#000 29%,#000 64%,transparent 72%)}}
@media(max-width:700px){.jpv video,.jpv[data-chapter="1"] video{width:106.667svh;height:60svh;top:max(230px,26svh);clip-path:inset(14% 0 14% 0);mask-image:linear-gradient(transparent 14%,#000 20%,#000 79%,transparent 86%)}.jpv-picture:after,.jpv-gold .jpv-picture:after{background:linear-gradient(var(--film-bg) 0%,transparent 39%,transparent 76%,var(--film-bg) 90%)}}

/* ---- desktop: the film fills the screen ----
   Letterboxed on a wide screen, the 16:9 frame left dark bands at the sides and
   its lettering small, because the words are part of the picture and can only
   grow with it. So above the phone breakpoint the words are set in the page, at
   a size the screen can carry, and the film is reduced to its drawing: masks
   fade out its own lettering, top labels and progress bar, and journey.js scales
   and places the frame (--fx, --fy, --fw) so the drawing fills the height beside
   the words. The ground behind is the film's own glow, drawn to meet the frame.
   The phone layout and the reduced motion version are unchanged. */
.jpv-spec,.jpv-count,.jpv-br{display:none}
@media(min-width:701px){
  .jpv.is-ready:not(.is-calm) .jpv-pin{background:#020c0d radial-gradient(var(--grw,50%) var(--grh,60%) at var(--gcx,70%) var(--gcy,42%),#0e231f 0%,#0a1b1a 35%,#061414 62%,#020c0d 100%)}
  .jpv.is-ready:not(.is-calm) .jpv-picture{inset:0;width:auto;height:auto;aspect-ratio:auto;transform:none;background:none}
  .jpv.is-ready:not(.is-calm) video{position:absolute;left:var(--fx,0px);top:var(--fy,0px);width:var(--fw,100%);height:auto;aspect-ratio:16/9;background:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 39.5%,#000 50.5%,#000 97%,transparent),linear-gradient(transparent 7.9%,#000 9.4%,#000 84.5%,transparent 89.5%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 39.5%,#000 50.5%,#000 97%,transparent),linear-gradient(transparent 7.9%,#000 9.4%,#000 84.5%,transparent 89.5%);
    mask-composite:intersect}

  /* the words, where the film had them, at the screen's size */
  .jpv.is-ready:not(.is-calm) .jpv-copy{clip-path:none;overflow:visible;left:5.5%;right:auto;width:min(42.5%,780px);top:0;bottom:calc(var(--navh,90px) + clamp(64px,12vh,130px));width:auto;height:auto;display:grid;align-content:center;z-index:3}
  .jpv.is-ready:not(.is-calm) .jpv-copy article{grid-area:1/1;align-self:center;display:block;opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .3s ease,transform .6s cubic-bezier(.16,.72,.24,1),visibility 0s linear .3s}
  .jpv.is-ready:not(.is-calm) .jpv-copy article.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .jpv.is-ready:not(.is-calm) .jpv-copy small{display:flex;align-items:center;gap:1.1em;font-size:clamp(11px,calc(.45vw + 5.5px),16px);letter-spacing:.08em}
  .jpv.is-ready:not(.is-calm) .jpv-copy small::before{content:"";flex:none;width:3.4em;height:2px;background:currentColor}
  .jpv.is-ready:not(.is-calm) .jpv-n{display:none}
  .jpv.is-ready:not(.is-calm) .jpv-br{display:inline}
  .jpv.is-ready:not(.is-calm) .jpv-copy h3{font-size:clamp(34px,min(calc(4.6vw - 3px),9.6vh),92px);line-height:1.03;letter-spacing:-.018em;margin:.42em 0 .5em;max-width:none}
  .jpv.is-ready:not(.is-calm) .jpv-copy p{font-size:clamp(15px,calc(1.05vw + 5px),24px);line-height:1.6;max-width:22em;text-wrap:balance}
  .jpv.is-ready:not(.is-calm) .jpv-spec{display:block;margin-top:clamp(22px,5vh,60px);font:clamp(10.5px,calc(.35vw + 6.5px),14px)/1.4 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#6f9483}
  .jpv.is-ready:not(.is-calm) .jpv-count{display:block;position:absolute;z-index:3;left:5.5%;bottom:calc(var(--navh,90px) + clamp(16px,3vh,34px));
    font:clamp(10px,calc(.3vw + 6px),13px)/1 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#7d8f86}
  .jpv.is-ready:not(.is-calm) .jpv-count b{font-weight:400;font-size:clamp(24px,calc(1.9vw + 4px),46px);letter-spacing:0;color:var(--film-accent);margin-right:.45em}

  /* the chapter bar, larger, with the film's own progress fill drawn in the page */
  .jpv.is-ready:not(.is-calm) .jpv-nav{left:5.5%;right:5.5%;height:auto;padding:0 0 clamp(18px,3.6vh,42px);gap:clamp(12px,1.6vw,30px);background:none}
  .jpv.is-ready:not(.is-calm) .jpv-nav button{font-size:clamp(11px,calc(.45vw + 6px),16px);line-height:1.3;padding-top:clamp(12px,1.9vh,22px)}
  .jpv.is-ready:not(.is-calm) .jpv-nav small{font-size:.76em;margin-right:.8em}
  .jpv.is-ready:not(.is-calm) .jpv-nav button::before{content:"";position:absolute;left:0;top:-2px;width:0;height:3px;background:var(--film-accent)}
  .jpv.is-ready:not(.is-calm) .jpv-nav button[aria-current=step]::before{width:calc(var(--cp,0) * 100%)}
}
/* a tall screen, a tablet held upright: the words above, the drawing under them */
@media(min-width:701px) and (max-aspect-ratio:4/5){
  .jpv.is-ready:not(.is-calm) .jpv-copy{right:7%;width:auto;top:clamp(88px,9vh,150px);bottom:auto;align-content:start}
  .jpv.is-ready:not(.is-calm) .jpv-copy h3{font-size:clamp(38px,6.2vw,76px)}
  .jpv.is-ready:not(.is-calm) .jpv-copy p{font-size:clamp(16px,2.2vw,22px);max-width:30em}
}

/* A phone held sideways gets neither the desktop frame nor the phone rules below
   700px: the chapter strip is 9% of a 390px screen, so its buttons come out 28px
   tall. On a touch screen the strip takes the room it needs instead. */
@media (pointer:coarse){
  .jpv-nav button{min-height:44px}
}
@media (pointer:coarse) and (max-height:560px){
  .jpv-nav{height:auto;min-height:58px;bottom:8px}
}

/* Phones, October 2026: the chapter strip's names were 8px and the kicker over the
   film 9px. The strip stays six columns, so its names take a second line instead. */
@media(max-width:700px){
  .jpv-copy small,.jpv-copy .jpv-n{font-size:10.5px}
  .jpv-nav{height:auto;min-height:62px}
}