:root{color-scheme:dark;--ink:#f1f0f5;--muted:#aaa5b5;--violet:#b5a0ff}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#111116;color:var(--ink);font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--violet);outline-offset:5px}
#motion-story{height:330svh;position:relative}
.stage{height:calc(100svh - var(--am-bar-height));min-height:600px;position:sticky;top:var(--am-bar-height);overflow:hidden;background:radial-gradient(ellipse at 68% 46%,#1c2026,#13161b 38%,#0c0f13 76%)}
.scene-header{height:92px;position:absolute;inset:0 4% auto;z-index:4;display:flex;align-items:center}
.brand{width:185px;line-height:0}
.brand svg{width:100%;height:auto;overflow:visible}
.ambient{position:absolute;left:32%;top:20%;width:53%;height:60%;border-radius:50%;background:radial-gradient(ellipse,#8370bd0a,transparent 65%);opacity:.25;pointer-events:none}
.scene-wrap{position:absolute;inset:82px 1% 74px 27%}
#keyboard{display:block;width:100%;height:100%;outline:none;touch-action:pan-y}
#loading{position:absolute;inset:50% 0 auto;text-align:center;font-size:14px;color:var(--muted)}
#loading.done{display:none}
#webgl-message{position:absolute;inset:40% 15% auto;font-size:16px;line-height:1.7;text-align:center}
.editorial{position:absolute;top:32%;left:4%;width:30%;max-width:430px;pointer-events:none;z-index:2}
.chapter-copy h1{margin:0 0 25px;font-size:clamp(42px,4.45vw,76px);font-weight:500;letter-spacing:-.065em;line-height:1.03}
.chapter-copy em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.065em;color:#b9a5f5}
.chapter-copy p{max-width:310px;margin:0;color:var(--muted);font-size:16px;line-height:1.65}
.chapter-copy{transform-origin:left center}
.chapter-specs{max-width:330px;margin-top:24px;padding-top:16px;border-top:1px solid #b5a0ff26}
.chapter-specs[hidden]{display:none}
.chapter-specs .spec-caption{margin:0 0 12px;font-size:11px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#aaa5b5}
.chapter-specs dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
.chapter-specs dl>div{display:flex;flex-direction:column;gap:7px;min-width:0}
.chapter-specs dt{font-size:12px;line-height:1.4;color:#aaa5b5}
.chapter-specs dd{order:-1;margin:0;color:#ddd4f7;font-size:30px;font-weight:500;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap}
.chapter-specs dd span{font-size:13px;font-weight:400;letter-spacing:0;color:#c1b8d5}
footer.am-portfolio-bottom{margin:0;padding-inline:4%;color:#aaa5b5}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.noscript{position:fixed;inset:50% 10% auto;text-align:center;background:#111;padding:30px;z-index:50}
@media(min-width:1800px){.editorial{left:6%}.scene-wrap{left:28%;right:4%}.scene-header{left:6%;right:6%}}
@media(max-width:1000px){.editorial{width:32%}.chapter-copy h1{font-size:45px}.chapter-copy p{font-size:15px}.scene-wrap{left:24%;right:-3%}}
@media(max-width:650px){
  #motion-story{height:305svh}.stage{min-height:610px}
  .scene-header{height:78px;left:6%;right:6%}.brand{width:139px}
  .editorial{top:112px;left:7%;width:86%;max-width:none}
  .chapter-copy h1{font-size:43px;margin-bottom:17px}.chapter-copy h1 br{display:none}.chapter-copy h1 em{display:block}
  .chapter-copy p{max-width:340px;font-size:14px;line-height:1.6}
  .chapter-specs{max-width:310px;margin-top:18px;padding-top:12px}
  .chapter-specs .spec-caption{margin-bottom:10px;font-size:10px}
  .chapter-specs dl{gap:12px}
  .chapter-specs dd{font-size:26px}
  .chapter-specs dd span{font-size:12px}
  .chapter-specs dt{font-size:11px}
  .scene-wrap{inset:276px -10% 54px}.ambient{left:0;top:40%;width:100%;height:40%}
  footer.am-portfolio-bottom{flex-direction:column;align-items:flex-start;padding-inline:7%;gap:8px}
  footer.am-portfolio-bottom .am-portfolio-credit{margin-left:0}
}
@media(max-width:370px){.brand{width:120px}.chapter-copy h1{font-size:38px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Intro only. The keyboard canvas, camera and later chapters keep their layout. */
.hero-eyebrow,.hero-scroll{display:none}
.stage[data-chapter="0"] .editorial{top:29%;width:30%;max-width:470px}
.stage[data-chapter="0"] .hero-eyebrow{display:flex;align-items:center;gap:14px;max-width:none;margin:0 0 26px;color:#c1b8d5;font-size:12px;font-weight:500;letter-spacing:.18em;line-height:1.4;text-transform:uppercase}
.stage[data-chapter="0"] .hero-eyebrow::before{content:"";width:24px;height:1px;background:#a899cc}
.stage[data-chapter="0"] h1{margin:0 0 30px;font-size:clamp(48px,4.85vw,94px);font-weight:600;line-height:.97;letter-spacing:-.062em}
.stage[data-chapter="0"] h1 em{display:block;font-family:Arial,sans-serif;font-size:1em;font-style:normal;font-weight:400;line-height:1.02;letter-spacing:-.055em;color:#c7b6f4}
.stage[data-chapter="0"] h1 br{display:none}
.stage[data-chapter="0"] #chapter-description{max-width:320px;font-size:16px;line-height:1.7;color:#b3b4bf;text-wrap:pretty}
.stage[data-chapter="0"] .hero-scroll{display:flex;align-items:center;gap:15px;position:absolute;bottom:36px;left:4%;color:#9698a5;font-size:12px;letter-spacing:.04em;pointer-events:none}
.hero-scroll-line{width:40px;height:1px;background:#77758566}
@media(min-width:1800px){.stage[data-chapter="0"] .hero-scroll{left:6%}}
@media(min-width:651px) and (max-width:1000px){.stage[data-chapter="0"] .editorial{width:33%;top:29%}.stage[data-chapter="0"] h1{font-size:clamp(39px,5.2vw,50px)}.stage[data-chapter="0"] #chapter-description{font-size:14px}.stage[data-chapter="0"] .hero-eyebrow{font-size:11px;letter-spacing:.12em;gap:9px}.stage[data-chapter="0"] .hero-eyebrow::before{width:14px}}
@media(max-width:650px){
  .stage[data-chapter="0"] .editorial{top:105px;left:6%;width:88%;max-width:none;text-align:center}
  .stage[data-chapter="0"] .hero-eyebrow{justify-content:center;margin-bottom:19px;font-size:11px;letter-spacing:.17em}
  .stage[data-chapter="0"] .hero-eyebrow::before{display:none}
  .stage[data-chapter="0"] h1{margin-bottom:22px;font-size:clamp(44px,11.2vw,64px);line-height:.98;letter-spacing:-.055em}
  .stage[data-chapter="0"] h1 em{font-weight:400;line-height:1.05}
  .stage[data-chapter="0"] #chapter-description{max-width:290px;margin-inline:auto;font-size:14px;line-height:1.65;text-wrap:balance}
  .stage[data-chapter="0"] .hero-scroll{left:50%;bottom:30px;transform:translateX(-50%);gap:12px;font-size:11px;white-space:nowrap}
  .hero-scroll-line{width:26px}
}
@media(max-width:370px){.stage[data-chapter="0"] .editorial{top:95px}.stage[data-chapter="0"] .hero-eyebrow{margin-bottom:17px}.stage[data-chapter="0"] h1{font-size:43px;margin-bottom:20px}.stage[data-chapter="0"] #chapter-description{max-width:252px;font-size:13px}}

/* One calm composition for the entire mobile story, including the intro. */
@media(max-width:650px){
  .stage{min-height:0}
  .stage .editorial,.stage[data-chapter="0"] .editorial{top:96px;left:6%;width:88%;max-width:none;text-align:center}
  .chapter-copy{transform-origin:center top}
  .stage .hero-eyebrow,.stage[data-chapter="0"] .hero-eyebrow{display:block;max-width:none;margin:0 0 20px;color:#b4adbf;font-size:10px;font-weight:500;letter-spacing:.15em;line-height:1.4;text-transform:uppercase}
  .stage .hero-eyebrow::before{display:none}
  .stage .chapter-copy h1,.stage[data-chapter="0"] h1{margin:0 0 20px;font-size:clamp(40px,11.2vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.055em}
  .stage .chapter-copy h1 em{display:block;font-family:Arial,sans-serif;font-size:1em;font-style:normal;font-weight:400;line-height:1.06;letter-spacing:-.05em;color:#c7b6f4}
  .stage .chapter-copy h1 br{display:none}
  .stage #chapter-description,.stage[data-chapter="0"] #chapter-description{max-width:310px;margin-inline:auto;font-size:14px;line-height:1.6;color:#b3b4bf;text-wrap:balance}
  .chapter-specs{max-width:292px;margin:17px auto 0;padding-top:12px}
  .chapter-specs .spec-caption{max-width:none;margin-bottom:10px;font-size:10px;text-align:center}
  .chapter-specs dl{gap:18px}.chapter-specs dl>div{align-items:center;gap:6px}
  .chapter-specs dd{font-size:25px}.chapter-specs dt{font-size:11px}
  .scene-wrap{inset:382px -10% 28px}
}
@media(max-width:650px) and (max-height:740px){
  .stage .editorial,.stage[data-chapter="0"] .editorial{top:83px}
  .stage .hero-eyebrow,.stage[data-chapter="0"] .hero-eyebrow{margin-bottom:14px;font-size:9px}
  .stage .chapter-copy h1,.stage[data-chapter="0"] h1{font-size:36px;margin-bottom:14px}
  .stage #chapter-description,.stage[data-chapter="0"] #chapter-description{max-width:295px;font-size:13px;line-height:1.5}
  .chapter-specs{margin-top:12px;padding-top:10px}.chapter-specs dd{font-size:22px}
  .scene-wrap{top:340px;bottom:24px}
  .stage[data-chapter="0"] .hero-scroll{bottom:16px}
}