/* Enso v2 — one shore, one dawn. */
:root{
  --night:#071316; --deep:#10262B; --pearl:#F2F0E9; --glass:#82BEB0; --mineral:#7E9BAE; --ivory:#DFE8D7; --gold:#C9B786; --ink:#071316;
  --fg:var(--pearl); --fg2:rgba(242,240,233,.86);
  --gutter:max(22px, 7vw);
  --f:'Schibsted Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif;
  color-scheme:dark;
}
html[data-tone="light"]{ --fg:var(--ink); --fg2:rgba(7,19,22,.82); color-scheme:light }
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--night);color:var(--fg);font-family:var(--f);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--pearl);color:var(--ink);padding:10px 14px;border-radius:6px}
.skip:focus{left:12px}

/* the stage: fixed layers of the same place, dissolving by scroll */
.stage{position:fixed;inset:0;z-index:0;background:var(--night);overflow:hidden}
.layer{position:absolute;inset:0;opacity:0}
.layer canvas,.layer img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.no-js .layer[data-scene="night"]{opacity:1}

/* the bar follows the text polarity */
.bar{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gutter) 0;pointer-events:none}
.bar a{pointer-events:auto;color:var(--fg);text-decoration:none}
.mark{font-weight:500;font-size:21px;letter-spacing:-.015em}
.bar-link{font-size:15px;text-decoration:underline !important;text-underline-offset:4px;text-decoration-thickness:1px}

/* content: the words are titles over one continuous shot. Each block is fixed over the stage and shown by the
   timeline in main.js (its window is in data-in / data-out, in the scene's own progress). Sections only give
   the scroll its length and keep the reading order for assistive technology. */
main{position:relative;z-index:1}
.scene{position:relative}
.copy{position:fixed;left:0;right:0;top:0;padding-inline:var(--gutter);display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}
.copy.on{visibility:visible;pointer-events:auto}
.js .copy[data-text="night"]{opacity:1;visibility:visible}
.no-js .copy{position:relative;opacity:1;visibility:visible;padding-block:12svh}
.at-hero{padding-top:max(92px,11svh)}
.at-top{padding-top:max(96px,13svh)}
.at-side{height:100svh;justify-content:center;max-width:min(46vw,760px)}
h1,.copy .h1like{margin:0;font-weight:500;font-size:clamp(48px,6.6vw,100px);line-height:.98;letter-spacing:-.035em;max-width:11ch}
h1 span,.copy .h1like span{display:block}
h1 .l2,.copy .h1like .l2{font-weight:400;font-size:.74em;letter-spacing:-.025em;color:var(--fg2);margin-top:.14em}
h2{margin:0;font-weight:500;font-size:clamp(34px,4.6vw,72px);line-height:1.0;letter-spacing:-.03em;max-width:14ch;text-wrap:balance}
h2.h1like{max-width:11ch}
.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.copy :where(p:not(.h1like):not(.close)){margin:0;font-size:clamp(20px,1.55vw,23px);line-height:1.42;max-width:34em;color:var(--fg2);text-wrap:pretty}
.at-side p{max-width:26em}
.narrow p{max-width:27em}
/* the person: the photograph whole, as it was taken (3:4, never cropped), the name beside it in the sky */
.person{display:flex;align-items:flex-start;gap:clamp(18px,2vw,32px)}
.portrait{margin:0;flex:none;height:min(50svh,470px);aspect-ratio:3/4;max-width:100%}
.portrait img{width:100%;height:100%;display:block;border-radius:2px}
.person p{min-width:0}
.person .name{display:block;color:var(--fg);font-weight:500;font-size:clamp(22px,1.8vw,26px)}
.person .role{display:block;margin-top:2px}
.person .bio{display:block;margin-top:12px;max-width:24em}
.team h2{max-width:none}
.cta{margin-top:6px}
.cta a{color:var(--fg);font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;margin-right:16px}
.cta .addr{user-select:all;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--fg2)}
a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

@media (max-width:760px){
  .at-hero{padding-top:max(88px,12svh)}
  /* the longest word decides: «superintelligence.» measures ~7.8 em in Schibsted Grotesk 500 (rule below) */
  .at-side{max-width:none;height:auto;justify-content:flex-start;padding-top:max(96px,13svh)}
  h1,.copy .h1like{max-width:none;font-size:min(46px, calc((100vw - 2 * var(--gutter)) / 7.9))}
  .copy :where(p:not(.h1like):not(.close)){font-size:18px}
  .person{flex-direction:column-reverse;gap:18px}       /* the name in the sky, the photograph below it */
  .portrait{height:auto;width:min(64vw,300px,calc((100svh - 380px) * .75))}
}