/* Fold story hero: sky, code, copy, and the hand-tracked head.
   The base theme's sheet builds a page inside two frames as the source types;
   this layer carries none of that. One pinned screen, a deep blue sky with no
   pale wash anywhere in it, the demo living in the slot on the right, and the
   source scrolling underneath. Default (no JS / reduced motion) = the whole
   source composed and readable, the head already there. */

.hstory { background: #0b2444; color: #faf9f5; height: 180vh; position: relative;
  margin-top: -72px; padding: 0 !important; }
.hstory .hs-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: linear-gradient(180deg, #08203e 0%, #0e3159 30%, #144174 62%, #1a5088 100%); }
/* depth, not light: the wash over the sky only ever goes darker, so the top of
   the frame stays night blue and the warm code keeps its contrast */
.hs-pin::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,18,36,.42) 0%, rgba(6,18,36,.18) 46%, rgba(7,20,38,.46) 100%); }

/* real cloud cutouts drifting across the flight, behind everything */
.hs-cloud { position: absolute; z-index: 0; pointer-events: none; opacity: .5;
  will-change: transform; }
.hs-cloud img { display: block; width: 100%; height: auto; will-change: transform;
  transform-origin: 50% 50%; }
.hs-c1 { width: 46vw; min-width: 420px; top: 8%;  left: -18vw; animation: hsdrift1 92s linear infinite; }
.hs-c2 { width: 34vw; min-width: 320px; top: 46%; left: -14vw; animation: hsdrift2 128s linear infinite; opacity: .36; }
.hs-c3 { width: 54vw; min-width: 480px; top: 68%; left: -22vw; animation: hsdrift3 74s linear infinite; opacity: .3; }
.hs-c1 img { animation: hszoom 46s ease-in-out infinite; }
.hs-c2 img { animation: hszoom 62s ease-in-out -14s infinite; }
.hs-c3 img { animation: hszoom 54s ease-in-out -31s infinite; }
@keyframes hsdrift1 { from { transform: translateX(0); } to { transform: translateX(140vw); } }
@keyframes hsdrift2 { from { transform: translateX(0); } to { transform: translateX(132vw); } }
@keyframes hsdrift3 { from { transform: translateX(0); } to { transform: translateX(150vw); } }
@keyframes hszoom { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hs-cloud, .hs-cloud img { animation: none; } }

/* layer 0: the source that builds the head */
.hs-code {
  position: absolute; inset: 0; margin: 0; padding: 10vh 4vw; z-index: 1;
  font: 400 clamp(13.5px, 1.3vw, 17px)/1.62 ui-monospace, "SF Mono", Menlo, monospace;
  color: #e2dbcd; white-space: pre-wrap; overflow: hidden; opacity: 1;
  pointer-events: none;
}
.hs-code .tk-c { color: #a39c8d; font-style: italic; }
.hs-code .tk-t { color: #ef9d74; }
.hs-code .tk-a { color: #cdc5b5; }
.hs-caret { display: none; width: .62em; height: 1.08em; background: #ff8a5c; vertical-align: text-bottom; }

/* layer 0.5: the dark ground the hero text rides on */
.hs-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(25,25,23,.18) 0%, rgba(25,25,23,.08) 45%, rgba(25,25,23,.02) 75%, rgba(25,25,23,.08) 100%),
    linear-gradient(180deg, rgba(25,25,23,.14) 0%, rgba(25,25,23,0) 16%, rgba(25,25,23,0) 80%, rgba(25,25,23,.2) 100%);
}
.hs-textground {
  position: absolute; left: -12vw; top: -12vh; bottom: -12vh; width: 72vw;
  z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 40% 50%,
    rgba(6,18,36,.90) 0%, rgba(6,18,36,.80) 30%, rgba(6,18,36,.60) 46%,
    rgba(6,18,36,.38) 60%, rgba(6,18,36,.19) 72%, rgba(6,18,36,.06) 84%, rgba(6,18,36,0) 94%);
}

/* layer 1: the head. Size and opacity are its own, never the scrub's: it is
   there from the first frame, and the demo inside decides where the portrait
   sits in the space it is given (right of centre on wide frames). Everything
   but the buttons hands the pointer down, so the portrait can be dragged and
   folded from anywhere over the sky. */
.hs-hand { position: absolute; inset: 0; z-index: 2; opacity: 1; }
.hs-hand iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; background: transparent;
}

/* layer 2: the hero text, present from the first frame */
.hs-display {
  position: absolute; left: 6vw; top: calc(50% + 30px); transform: translateY(-50%);
  width: min(640px, 48vw); z-index: 3; pointer-events: none;
}
.hs-display a, .hs-display button { pointer-events: auto; }
.hs-display .eyebrow { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #b8ad9b; margin: 0 0 14px; }
.hs-display h1 {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: clamp(42px, 5vw, 72px); line-height: 1.06; letter-spacing: -.01em;
  color: #faf9f5; margin: 0 0 18px;
}
.hs-display h1 em { font-style: italic; color: #d97757; }
.hs-idline { font-family: 'Newsreader', Georgia, serif; font-size: clamp(21px, 1.9vw, 27px); color: #e8e2d6; margin: 0 0 16px; }
.hs-idline .pre { color: #b8ad9b; }
.hs-idline .hs-rot { font-style: italic; color: #d97757; display: inline-block; }
.hs-idline .hs-rot.swap { animation: hs-swap .5s ease; }
@keyframes hs-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hs-lede { font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.6; color: #cfc8bb; margin: 0 0 26px; max-width: 46ch; }
.hs-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
/* the accent button carries the shape; a second ring beside it competes */
.hs-ctas .btn-ghost { color: #e8e2d6; border-color: transparent; background: transparent; }
.hs-ctas .btn-ghost:hover { color: #191917; background: #e8e2d6; border-color: #e8e2d6; }

/* JS drives the typing; without it the plate is simply the whole file */
.js-hstory .hs-caret { display: inline-block; }

/* the scrub has a pulse: a hairline of terracotta along the screen bottom */
.hs-progress {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: #d97757; transform: scaleX(0); transform-origin: left center;
  z-index: 6;
}

/* one-screen fit on shorter windows */
@media (max-height: 840px) {
  .hs-display h1 { font-size: clamp(30px, 7vh, 52px); margin-bottom: 12px; }
  .hs-idline { font-size: 19px; margin-bottom: 10px; }
  .hs-lede { font-size: 14px; margin-bottom: 16px; }
  .hs-display .eyebrow { margin-bottom: 8px; }
}

/* narrow desktop windows: the portrait is sized off the window's height, so
   between 1000 and 1300 it reaches back toward the copy. The copy column
   yields rather than the portrait, which is the thing people came for. */
@media (min-width: 1001px) and (max-width: 1300px) {
  .hs-display { width: min(500px, 42vw); }
  .hs-display h1 { font-size: clamp(32px, 4.1vw, 50px); }
  .hs-lede { font-size: 15px; max-width: 40ch; }
}

/* the narrow half of the hero, phones and portrait tablets: the head IS the
   hero there. The demo fills the screen, the portrait runs
   nearly the full width of it with the camera inset live on top, and the
   studio's own copy shrinks to a strip at the bottom: one small line and one
   button. The lede and the rotating phrase are desktop luxuries; at 390 they
   would cost the portrait half its height. */
@media (max-width: 1000px) {
  .hs-textground { display: none; }
  .hs-code { padding: 7vh 5vw 22vh; opacity: .3 !important; font-size: 11.5px; }
  /* an even wash, and no band at the foot of it: the demo's own strip of
     buttons and the copy under it stand on the sky, not on a black plate */
  .hs-scrim { background:
    linear-gradient(180deg, rgba(7,20,38,.42) 0%, rgba(7,20,38,.20) 24%, rgba(7,20,38,.18) 100%); }
  /* the demo gets the screen less the strip the copy stands on and less the
     header over it, so the head inside has a frame of its own to be centred
     in, its camera inset clears the menu and the theme chip, and the chips
     along its floor never land under the button. The strip's real height is
     measured by the script; the fallback is two headline lines over one. */
  /* the frame runs from just under the header to just above the headline; the
     demo keeps its own camera inset clear of the design circles, so nothing
     up here needs the room any more */
  .hs-hand { top: var(--hs-top, 80px); right: 0; bottom: var(--hs-strip, 118px); left: 0; }
  /* the headline carries the page on a phone, so it is set at reading size and
     ranged left under the picture, with the line about the studio kept small
     beneath it. Centring a two-line headline against a left-hung portrait read
     as a caption; this reads as a hero. */
  .hs-display {
    left: 0; right: 0; width: auto; padding: 0 20px calc(12px + env(safe-area-inset-bottom, 0px));
    top: auto; bottom: 0; transform: none; text-align: left;
  }
  .hs-display .eyebrow, .hs-idline { display: none; }
  .hs-display h1 {
    font-size: clamp(23px, 7.4vw, 30px); line-height: 1.08; letter-spacing: -.01em;
    color: #f1ece2; margin: 0 0 6px; text-wrap: balance;
  }
  .hs-display .hs-lede {
    display: block; font-size: 11.5px; line-height: 1.45; color: #a9b6c6;
    margin: 0 0 10px; max-width: 42ch;
  }
  .hs-ctas { justify-content: flex-start; }
  .hs-ctas .btn-ghost { display: none; }
  .hs-ctas .btn-accent { padding: 11px 20px; font-size: .82rem; min-height: 44px; }
}
/* portrait tablets: the design circles hang lower than the header does, and
   the demo keeps its camera inset in that same top right corner, twelve pixels
   inside the frame it is given. So the frame starts under the circles, not
   under the header. Phones never see this: there the circles sit higher and
   the fold one is not offered at all. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hs-hand { top: var(--hs-top, 88px); }
}

/* short phones: the strip tightens rather than dropping the studio's own line,
   which is the only sentence on the screen that says what this place is */
@media (max-width: 1000px) and (max-height: 740px) {
  .hs-display h1 { font-size: clamp(21px, 6.6vw, 27px); margin-bottom: 5px; }
  .hs-display .hs-lede { font-size: 10.5px; line-height: 1.4; margin-bottom: 8px; }
}
@media (max-width: 1000px) and (max-height: 620px) {
  .hs-display .hs-lede { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hstory { height: auto; min-height: 100vh; }
  .hstory .hs-pin { position: relative; height: 100vh; }
}