/* untold.css — the loud one. Everything the clinic page is not.

   The idea that runs the whole page: it starts at noon and ends after midnight.
   --night goes 0 to 1 as you scroll and every colour on the page is mixed
   against it, so the background, the type and the rules all darken together.
   Heavy condensed capitals, electric accents, nothing polite. */

:root{
  --night   :0;   /* 0 = daylight, 1 = after midnight. Drives the background. */
  --nightT  :0;   /* the same walk, but steeper, and it drives the TEXT.
                     If type and background fade at the same rate they meet in
                     the middle as grey on grey and the copy disappears. The
                     text therefore stays dark until the background is properly
                     dark, then flips. */
  --pad     :clamp(20px,5vw,84px);
  --sans    :"Helvetica Neue",-apple-system,BlinkMacSystemFont,Inter,Arial,sans-serif;
  --magenta :#FF2E7E;
  --cyan    :#22E3FF;
  --ease    :cubic-bezier(.22,1,.36,1);

  /* day values on the left, night values on the right */
  --bg  :color-mix(in srgb, #EFEAE3 calc((1 - var(--night)) * 100%), #08070B);
  --fg  :color-mix(in srgb, #14131A calc((1 - var(--nightT)) * 100%), #F4F2F7);
  --dim :color-mix(in srgb, rgba(20,19,26,.62) calc((1 - var(--nightT)) * 100%), rgba(244,242,247,.62));
  --line:color-mix(in srgb, rgba(20,19,26,.18) calc((1 - var(--nightT)) * 100%), rgba(244,242,247,.20));
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s linear,color .25s linear}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* older browsers with no color-mix still get a readable page, just not the
   day to night shift */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root{--bg:#08070B;--fg:#F4F2F7;--dim:rgba(244,242,247,.62);--line:rgba(244,242,247,.2)}
}

.tag{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--dim);
  font-weight:700}
.huge{font-weight:800;letter-spacing:-.035em;line-height:.88;text-transform:uppercase;
  font-size:clamp(2.9rem,11vw,9rem)}
.big{font-weight:800;letter-spacing:-.03em;line-height:.94;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,4.2rem)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;
  align-items:center;justify-content:space-between;gap:14px;padding:16px var(--pad);
  mix-blend-mode:difference;color:#fff}
.nav__brand{font-weight:800;letter-spacing:.28em;text-transform:uppercase;font-size:.72rem}
.nav__cta{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.6);border-radius:100px;padding:11px 20px;
  min-height:44px;display:inline-flex;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__shot{position:absolute;inset:0}
.hero__shot img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,5,10,.42) 0%,rgba(6,5,10,.08) 40%,rgba(6,5,10,.78) 100%)}
.hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(48px,9vh,110px);
  z-index:2;color:#fff}
.hero__in .tag{color:rgba(255,255,255,.72)}
.hero h1{margin:14px 0 16px}
.hero h1 span{display:block}
.hero h1 em{font-style:normal;color:var(--magenta)}
.hero__sub{color:rgba(255,255,255,.86);max-width:44ch}

/* ---------- full bleed chapters ---------- */
.chap{position:relative;height:100svh;min-height:520px;overflow:hidden}
.chap__shot{position:absolute;inset:0}
.chap__shot img{width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.02 + var(--k,0) * .07));will-change:transform}
.chap__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,5,10,.3) 0%,rgba(6,5,10,0) 36%,rgba(6,5,10,.72) 100%)}
.chap__in{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(48px,9vh,104px);z-index:2;color:#fff;max-width:30ch}
.chap__in .tag{color:var(--cyan)}
.chap__in h2{margin:12px 0 12px}
.chap__in p{color:rgba(255,255,255,.84)}

/* the clock in the corner, so the day to night arc is legible */
.clock{position:absolute;right:var(--pad);bottom:clamp(48px,9vh,104px);z-index:2;
  color:#fff;text-align:right}
.clock b{display:block;font-weight:800;font-size:clamp(1.6rem,4vw,3rem);
  letter-spacing:-.02em;line-height:1}
.clock span{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
@media (max-width:640px){ .clock{display:none} }

/* ---------- a loud statement between the pictures ---------- */
.shout{padding:clamp(90px,18vh,220px) var(--pad);max-width:1200px;margin:0 auto}
.shout p{font-weight:800;letter-spacing:-.03em;line-height:.98;text-transform:uppercase;
  font-size:clamp(1.9rem,6.4vw,5rem)}
.shout p em{font-style:normal;color:var(--magenta)}
.shout small{display:block;margin-top:26px;font-size:1rem;font-weight:400;
  line-height:1.65;text-transform:none;letter-spacing:0;color:var(--dim);max-width:54ch}

/* ---------- the live 360 ---------- */
.pano{position:relative;background:#08070B}
.pano__track{height:230vh}
.pano__sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .8s var(--ease)}
.pano.is-loaded .pano__canvas{opacity:1}
.pano.is-dragging .pano__canvas{cursor:grabbing}
.pano__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8)}
.pano.is-loaded .pano__poster{opacity:0;transition:opacity .8s var(--ease)}
.pano__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,11,.66) 0%,rgba(8,7,11,0) 36%,rgba(8,7,11,.82) 100%)}
.pano__copy{position:absolute;left:var(--pad);right:var(--pad);
  bottom:clamp(52px,10vh,110px);z-index:2;pointer-events:none;color:#fff}
.pano__copy h2{max-width:15ch;margin:12px 0 18px}
.pano__copy .tag{color:var(--cyan)}
.pano__hint{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.4);
  border-radius:100px;padding:11px 20px;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:700}
.pano__hint i{width:17px;height:17px;border:1px solid currentColor;border-radius:50%;
  position:relative;flex:0 0 auto}
.pano__hint i::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:1px;
  background:currentColor;transform:translate(-50%,-50%);animation:nudge 2.2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translate(-140%,-50%)}50%{transform:translate(40%,-50%)}}
.pano.is-fallback .pano__canvas,.pano.is-fallback .pano__hint{display:none}
.pano.is-fallback .pano__poster{opacity:1}

/* ---------- the strip of smaller frames ---------- */
.strip{padding:clamp(60px,10vh,120px) var(--pad) clamp(80px,14vh,170px);
  max-width:1400px;margin:0 auto;display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(3,1fr)}
.strip figure{position:relative;overflow:hidden}
.strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.strip figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:700;
  font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.9)}
@media (max-width:760px){ .strip{grid-template-columns:1fr} }

/* ---------- reveal. Visible by default, hidden only once JS is in ---------- */
.js-anim [data-rise]{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-anim [data-rise].is-in{opacity:1;transform:none}

.foot{border-top:1px solid var(--line);padding:34px var(--pad);display:flex;
  flex-wrap:wrap;gap:9px 30px;justify-content:space-between;color:var(--dim);
  font-size:.72rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim [data-rise]{opacity:1;transform:none;transition:none}
  .chap__shot img{transform:none}
  .pano__hint i::after{animation:none}
}

/* ---------- the form, dark like the end of the night ---------- */
.lead{
  --lf-bg     :#0C0B11;
  --lf-fg     :#F4F2F7;
  --lf-accent :var(--magenta);
  --lf-line   :rgba(244,242,247,.22);
  --lf-muted  :rgba(244,242,247,.62);
}
.lead__title{font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.lead__btn{color:#fff;font-weight:800;letter-spacing:.2em}
.lead__field select option{background:#0C0B11;color:#F4F2F7}

/* the link out to the full tour. The copy block ignores pointer events so
   the 360 stays draggable underneath, so the link has to take them back. */
.pano__copy a{pointer-events:auto}
.pano__hint--go{margin-left:10px;transition:background .3s ease,color .3s ease}
.pano__hint--go:hover{background:#fff;color:#111}