/* HERverse lander (canvas artboard). Layout: the HERverse ad's sky and three planes as the hero, then the pack and the form side by side, sample pages, setup, Katie, and a sky close. Tokens, type and components match the Oct 2026 site. */
:root{
  --surface:#fcf9f2; --paper:#f4efe5; --ink:#212020; --soft:#4a4845; --muted:#6b675f; --rule:#ddd6c8;
  --sky:#4587c2; --sky-deep:#1f4d77; --cream:#fcf9f2; --paper-light:#e7d6b4; --paper-mid:#cdb38a; --burgundy:#84433e;
  --grain-blend:multiply; --grain-op:.07; --panel:#fcf9f2; --panel-shadow:0 1px 2px rgba(60,40,20,.05), 0 24px 48px -28px rgba(60,40,20,.28); --show-light:block; --show-dark:none;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Source Code Pro', ui-monospace, Menlo, monospace;
  --wrap:1120px; --gutter:48px; --section:clamp(88px, 10vw, 150px);
  --ease-settle:cubic-bezier(.22,.61,.36,1); --ease-drift:cubic-bezier(.45,0,.55,1); --ease-soft:cubic-bezier(.33,1,.68,1);
  --dur-quick:300ms; --dur-settle:600ms; --rise:8px;
  --band:#212020; --band-ink:#fcf9f2; --band-soft:#cfc8bb; --band-rule:#3d3b38; --band-field:#2c2b2a;
  --step-tone:#3d3226;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --surface:#1d1c1b; --paper:#262524; --ink:#fcf9f2; --soft:#d6cfc2; --muted:#a8a196; --rule:#3a3835;
  --sky-deep:#9cc3e6; --grain-blend:screen; --grain-op:.05; --panel:#181716; --panel-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 28px 56px -26px rgba(0,0,0,.7); --show-light:none; --show-dark:block; color-scheme:dark;
  --band:#2b2a29; --band-rule:#45423e; --band-field:#353331; --step-tone:#000;
}}
:root[data-theme="dark"]{
  --surface:#1d1c1b; --paper:#262524; --ink:#fcf9f2; --soft:#d6cfc2; --muted:#a8a196; --rule:#3a3835;
  --sky-deep:#9cc3e6; --grain-blend:screen; --grain-op:.05; --panel:#181716; --panel-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 28px 56px -26px rgba(0,0,0,.7); --show-light:none; --show-dark:block; color-scheme:dark;
  --band:#2b2a29; --band-rule:#45423e; --band-field:#353331; --step-tone:#000;
}
@media (max-width:1000px){ :root{ --gutter:32px; } }
@media (max-width:640px){ :root{ --gutter:20px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--surface); color:var(--ink); font:400 17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%; height:auto; display:block}
a{color:var(--sky-deep); text-underline-offset:3px; text-decoration-thickness:1px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:4px}
[hidden]{display:none !important}
.wrap{max-width:calc(var(--wrap) + var(--gutter)*2); margin:0 auto; padding-inline:var(--gutter)}
.light-only{display:var(--show-light)} .dark-only{display:var(--show-dark)}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance}
h2{font-size:clamp(38px, 5vw, 56px); line-height:1.04; letter-spacing:-.02em; max-width:15em}
p{margin:0}
.lede{font-size:21px; line-height:1.55; color:var(--soft); max-width:32em}
.label{font:500 12.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.note{font-family:var(--sans); font-size:14px; line-height:1.45; color:var(--muted)}
.tm{font:400 12.5px/1.5 var(--sans); color:var(--muted); max-width:60em}

/* buttons (site version: arrow always there, leans in on hover) */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 24px 15px 28px; border-radius:999px; border:0; background:var(--ink); color:var(--surface); font:400 16px/1 var(--sans); cursor:pointer; text-decoration:none; white-space:nowrap; isolation:isolate; transition:transform 675ms var(--ease-soft)}
.btn::before{content:""; position:absolute; inset:0; border-radius:inherit; background:currentColor; opacity:0; z-index:-1; pointer-events:none; transition:opacity 1050ms var(--ease-soft)}
.btn:hover::before,.btn:focus-visible::before{opacity:.07}
.btn .arr{width:13px; height:13px; opacity:.5; transition:opacity 1050ms var(--ease-soft), transform 1350ms var(--ease-soft)}
.btn:hover .arr,.btn:focus-visible .arr{opacity:1; transform:translateX(3px)}
.btn:active{transform:scale(.985); transition-duration:225ms}
.btn.small{gap:8px; padding:11px 16px 11px 20px; font-size:14px}
.btn.small .arr{width:12px; height:12px}
.btn.cream{background:var(--cream); color:#212020}
.btn.line{background:transparent; color:inherit; box-shadow:inset 0 0 0 1px currentColor}

/* nav (site version) */
.bar{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); color:var(--cream); transition:background var(--dur-settle) var(--ease-settle), color var(--dur-settle) var(--ease-settle), box-shadow var(--dur-settle) var(--ease-settle)}
.bar .wrap{display:flex; align-items:center; gap:32px; min-height:72px}
.bar .logo{flex:none; display:block; position:relative; height:38px; width:162px}
.bar .logo img{position:absolute; inset:0; height:38px; width:auto; transition:opacity var(--dur-settle) var(--ease-settle)}
.bar .logo .on-light{opacity:0}
.bar nav{display:flex; align-items:center; gap:28px; margin-left:auto}
.bar nav a.lk{font:400 15px/1 var(--sans); color:inherit; opacity:.86; text-decoration:none; padding-block:8px; transition:opacity var(--dur-quick) var(--ease-settle)}
.bar nav a.lk:hover{opacity:1}
.bar .btn{background:var(--cream); color:#212020}
.bar.solid{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
.bar.solid .logo .on-sky{opacity:0}
.bar.solid .logo .on-light{opacity:1}
.bar.solid .btn{background:var(--ink); color:var(--surface)}
.menu-btn{display:none; margin-left:auto; background:none; border:0; padding:10px 0; font:400 15px/1 var(--sans); color:inherit; cursor:pointer}
@media (max-width:820px){
  .bar nav{display:none}
  .menu-btn{display:block}
  .bar.open{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
  .bar.open .logo .on-sky{opacity:0} .bar.open .logo .on-light{opacity:1}
  .bar.open nav{display:grid; position:absolute; top:100%; left:0; right:0; gap:0; padding:8px var(--gutter) 24px; background:var(--surface); box-shadow:0 1px 0 var(--rule)}
  .bar.open nav a.lk{font-size:22px; font-family:var(--serif); padding-block:14px; border-bottom:1px solid var(--rule); opacity:1}
  .bar.open nav .btn{margin-top:20px; justify-self:start; background:var(--ink); color:var(--surface)}
}
.bar .logo .on-light.dark-swap{display:var(--show-dark)} .bar .logo .on-light.light-swap{display:var(--show-light)}

/* hero: the ad's sky, three planes climbing up and right */
.hero{position:relative; overflow:hidden; background:var(--sky); color:var(--cream); isolation:isolate}
.hero .sky{position:absolute; inset:-2%; width:104%; height:104%; max-width:none; object-fit:cover; object-position:50% 20%; z-index:-2; animation:skyIn 4.2s var(--ease-settle) both}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(31,77,119,.28), rgba(31,77,119,0) 38%, rgba(31,77,119,0) 70%, rgba(31,77,119,.18))}
@keyframes skyIn{from{transform:scale(1.05)}}
.hero .wrap{position:relative; min-height:clamp(600px, 88vh, 900px); display:grid; align-content:center; padding-block:calc(112px + env(safe-area-inset-top, 0px)) 88px}
.hero h1{font-size:clamp(52px, 7.4vw, 108px); line-height:.98; letter-spacing:-.03em; text-shadow:0 1px 30px rgba(31,77,119,.3)}
.hero h1 span{display:block}
.hero .sub{margin-top:26px; font:400 clamp(21px, 2.2vw, 27px)/1.35 var(--sans); letter-spacing:-.005em; max-width:20em; text-shadow:0 1px 18px rgba(31,77,119,.45)}
.hero .go{margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px}
.hero .go .note{color:var(--cream); opacity:.92; text-shadow:0 1px 12px rgba(31,77,119,.5)}
.hero .in{animation:rise 1.65s var(--ease-settle) both}
.hero .sub.in{animation-delay:0.525s} .hero .go.in{animation-delay:0.9s}
@keyframes rise{from{opacity:0; transform:translateY(var(--rise))}}
.planes{position:absolute; inset:0; z-index:-1; pointer-events:none}
.pl{position:absolute; filter:drop-shadow(0 22px 26px rgba(31,77,119,.28))}
.pl .arrive{animation:arrive 3.3s var(--ease-settle) both}
.pl.a{right:4%; top:46%; width:min(34vw, 480px)}
.pl.b{right:27%; top:20%; width:min(11vw, 150px); filter:drop-shadow(0 10px 14px rgba(31,77,119,.22)) blur(.3px)}
.pl.c{right:8%; top:13%; width:min(6.6vw, 92px); filter:drop-shadow(0 6px 10px rgba(31,77,119,.2)) blur(.5px)}
.pl.a .arrive{animation-delay:0.3s} .pl.b .arrive{animation-delay:0.75s} .pl.c .arrive{animation-delay:1.125s}
@keyframes arrive{from{opacity:0; transform:translate(-26px, 22px)}}
.drift{animation:drift 13.5s var(--ease-drift) infinite alternate}
.pl.b .drift{animation-duration:16.5s; animation-delay:-4.5s}
.pl.c .drift{animation-duration:15s; animation-delay:-9s}
@keyframes drift{to{transform:translate3d(4.4px,-6.6px,0)}}
@media (max-width:820px){
  .hero .wrap{min-height:0; align-content:start; padding-block:calc(120px + env(safe-area-inset-top, 0px)) 0}
  .planes{position:relative; inset:auto; height:clamp(240px, 70vw, 400px); margin-top:20px}
  .pl.a{right:2%; top:30%; width:min(62vw, 360px)}
  .pl.b{right:auto; left:10%; top:12%; width:min(22vw, 110px)}
  .pl.c{right:14%; top:2%; width:min(13vw, 64px)}
  .drift{animation:none}
}

/* sections */
section{padding-block:var(--section)}
section.paper{background:var(--paper)}
.head{display:grid; gap:24px; margin-bottom:56px}

/* the pack + the form */
.sp{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:64px; align-items:start}
@media (max-width:900px){ .sp{grid-template-columns:minmax(0,1fr); gap:48px} }
.sp h2{font-size:clamp(36px, 4.4vw, 52px)}
.sp .lede{margin-top:24px; font-size:19px}
/* cadence: each row a shade darker, week lightest, anytime darkest */
.cad{list-style:none; margin:40px 0 0; padding:0; display:grid; gap:3px}
.cad li{--k:0; display:grid; grid-template-columns:minmax(0, 8.5em) minmax(0,1fr); gap:24px; padding:20px 22px; border-radius:6px; align-items:baseline;
  background:color-mix(in srgb, var(--surface), var(--step-tone) calc(var(--k) * 5%));
  transition:opacity var(--dur-settle) var(--ease-settle), transform 1050ms var(--ease-soft), box-shadow 1050ms var(--ease-soft)}
.cad li:nth-child(1){--k:.6} .cad li:nth-child(2){--k:1.6} .cad li:nth-child(3){--k:2.6} .cad li:nth-child(4){--k:3.6} .cad li:nth-child(5){--k:4.6}
.cad li:hover{transform:translateY(-3px); box-shadow:0 14px 28px -20px rgba(60,40,20,.45)}
.cad .when{font:500 12.5px/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.cad .what{font-size:19px; line-height:1.5}
@media (max-width:560px){ .cad li{grid-template-columns:minmax(0,1fr); gap:8px; padding:18px} .cad .what{font-size:18px} }
.sp .after{margin-top:20px}

/* the form panel: ink */
.wl{background:var(--band); color:var(--band-ink); box-shadow:0 30px 60px -36px rgba(33,32,32,.55); border-radius:6px; padding:clamp(26px, 3vw, 38px); display:grid; gap:18px; position:sticky; top:104px}
.wl.is-done{position:static}
@media (max-width:900px){ .wl{position:static} }
.wl h2{font-size:clamp(30px, 3vw, 38px); line-height:1.08}
.wl form > p:not(.fine):not(.hp){font-size:17px; line-height:1.55; color:var(--band-soft)}
.wl form{display:grid; gap:14px}
.wl label.f{display:grid; gap:6px; font:400 14px/1.3 var(--sans); color:var(--band-soft)}
.wl input:not([type=checkbox]){font:400 16px/1.3 var(--sans); padding:13px 14px; border-radius:6px; border:0; box-shadow:inset 0 0 0 1px var(--band-rule); background:var(--band-field); color:var(--band-ink); width:100%}
.wl input:focus{outline:2px solid #d8effe; outline-offset:1px}
.wl fieldset{border:0; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.wl legend{font:400 14px/1.3 var(--sans); color:var(--band-soft); padding:0; margin-bottom:8px}
.chip{background:none; border:0; min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--band-rule); font:400 14px/1.2 var(--sans); color:var(--band-soft); cursor:pointer; transition:box-shadow var(--dur-quick) var(--ease-settle), background var(--dur-quick) var(--ease-settle), color var(--dur-quick) var(--ease-settle)}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip:hover{color:var(--band-ink); box-shadow:inset 0 0 0 1px var(--band-soft)}
.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--band-ink); color:#212020; box-shadow:none}
.chip:has(input:focus-visible){outline:2px solid #d8effe; outline-offset:2px}
.wl .btn{justify-self:start; margin-top:4px; background:var(--cream); color:#212020}
.wl .btn.line{background:transparent; color:var(--band-ink)}
.fine{font:400 13.5px/1.45 var(--sans); color:var(--muted)}
.wl .fine{color:var(--band-soft); opacity:.85}
.wl a{color:#d8effe}
.hp{position:absolute; left:-9999px}

/* after the form */
.tabs{display:flex; flex-wrap:wrap; gap:8px}
.tab{background:none; border:0; box-shadow:inset 0 0 0 1px var(--band-rule); border-radius:999px; padding:9px 14px; font:400 14px/1.2 var(--sans); color:var(--band-soft); cursor:pointer}
.tab:hover{color:var(--band-ink)}
.tab[aria-selected="true"]{background:var(--band-ink); color:#212020; box-shadow:none}
.tp{display:grid; gap:14px}
.tp .fit{font-style:italic; color:var(--band-soft); font-size:17px}
.copyline{display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--band-rule); background:var(--band-field)}
.copyline code{flex:1; min-width:0; overflow-wrap:anywhere; font:500 14.5px/1.4 var(--mono); color:var(--band-ink)}
.copy{flex:none; background:none; border:0; box-shadow:inset 0 0 0 1px var(--band-rule); border-radius:999px; padding:6px 12px; font:400 12.5px/1 var(--sans); color:var(--band-soft); cursor:pointer}
.copy:hover{color:var(--band-ink)}
.tp ol{margin:0; padding-left:1.3em; display:grid; gap:8px; font:400 15.5px/1.5 var(--sans); color:var(--band-soft)}
.tp ol b{font-weight:400; color:var(--band-ink)}
.tp details{border-top:1px solid var(--band-rule); padding-top:12px}
.tp summary{cursor:pointer; font:400 14px/1.4 var(--sans); color:var(--band-ink)}
.notebox{margin-top:10px; display:grid; gap:8px; padding:12px 14px; border-radius:6px; background:var(--band-field)}
.notebox b{font:400 13px/1.3 var(--sans); color:var(--band-soft)}
.notebox p{font-size:14.5px; line-height:1.5; color:var(--band-soft)}
.notebox .copy{justify-self:start}
.tlink{font:400 15px/1.4 var(--sans)}

/* sample pages */
.shots{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; align-items:start}
@media (max-width:820px){
  .shots{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 16px; scroll-padding-inline:var(--gutter); scrollbar-width:none}
  .shots::-webkit-scrollbar{display:none}
  .shots figure{scroll-snap-align:start}
}
.shots figure{margin:0; display:grid; gap:14px}
.shots img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:0 0; border-radius:4px; box-shadow:0 0 0 1px var(--rule), 0 30px 60px -40px rgba(60,40,20,.5)}
.shots figcaption{display:grid; gap:6px}
.shots figcaption span:last-child{font-size:17px; line-height:1.5; color:var(--soft)}

/* setup */
.two{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:64px; align-items:start}
@media (max-width:900px){ .two{grid-template-columns:minmax(0,1fr); gap:36px} }
.two .prose{display:grid; gap:1em; margin-top:28px; max-width:30em}
.two .prose p{font-size:18px; line-height:1.6; color:var(--soft)}
.inside{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.inside li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding-block:22px; border-bottom:1px solid var(--rule)}
.inside .n{width:28px; height:28px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; font:400 13px/1 var(--sans)}
.inside b{font-weight:400; font-size:24px; line-height:1.2; letter-spacing:-.01em; display:block}
.inside p{margin-top:6px; font-size:17px; line-height:1.55; color:var(--soft)}

/* setup: ink band; numbers fill in and glow as you scroll past them */
.band{background:var(--band); color:var(--band-ink)}
.band .two .prose p,.band .inside p{color:var(--band-soft)}
.band .inside{border-top-color:var(--band-ink)}
.band .inside li{border-bottom-color:var(--band-rule)}
.band .inside .n{background-color:#cdb38a; border-color:#cdb38a; color:#212020; box-shadow:0 0 0 5px rgba(205,179,138,.14), 0 0 22px rgba(205,179,138,.42)}

/* Katie */
.statement h2{font-size:clamp(36px, 4.8vw, 60px); line-height:1.08; max-width:14em}
.statement .cols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px; margin-top:44px}
@media (max-width:820px){ .statement .cols{grid-template-columns:minmax(0,1fr); gap:20px} }
.statement .cols p{font-size:19px; line-height:1.62; max-width:30em}

/* close */
.close{position:relative; overflow:hidden; color:var(--cream); background:var(--sky); isolation:isolate}
.close > img.bg{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 70%; z-index:-1}
.close .wrap{display:grid; gap:28px; justify-items:start; position:relative}
.close h2{font-size:clamp(44px, 6vw, 80px); line-height:1; letter-spacing:-.025em; max-width:10em; text-shadow:0 1px 26px rgba(31,77,119,.35)}
.close .sub{font:400 21px/1.45 var(--sans); max-width:26em; text-shadow:0 1px 16px rgba(31,77,119,.45)}
.close .row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:8px}
.close .note{color:var(--cream); opacity:.92}
.close .mini{position:absolute; right:8%; bottom:18%; width:min(18vw, 220px); filter:drop-shadow(0 16px 20px rgba(31,77,119,.28))}
@media (max-width:760px){ .close .mini{position:relative; right:auto; bottom:auto; width:120px; justify-self:end; margin-top:12px} }

/* footer */
footer{padding-block:56px 72px; border-top:1px solid var(--rule)}
footer .wrap{display:grid; gap:22px}
footer .brand img{height:38px; width:auto}
.mail{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:14px; color:var(--soft)}
.mail span{user-select:all}
.mail button{background:none; border:0; padding:4px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--rule); font:400 12.5px/1 var(--sans); color:var(--muted); cursor:pointer}
.mail button:hover{color:var(--ink)}
footer .links{display:flex; flex-wrap:wrap; gap:10px 24px; font-family:var(--sans); font-size:14px}
footer .links a{color:var(--ink); text-decoration:none} footer .links a:hover{text-decoration:underline}

/* settle-in for content that starts off screen */
.armed-up{opacity:0; transform:translateY(var(--rise))}
.up{transition:opacity var(--dur-settle) var(--ease-settle), transform var(--dur-settle) var(--ease-settle); transition-delay:calc(var(--i, 0) * 90ms)}

/* mobile pass */
@media (max-width:640px){
  .btn{white-space:normal; text-align:left; line-height:1.25}
  h2{font-size:clamp(34px, 9.4vw, 44px)}
  .lede{font-size:19px}
  .close h2{font-size:clamp(40px, 11vw, 52px)}
  .close .sub{font-size:19px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero .in,.hero .sky,.pl .arrive,.drift{animation:none !important}
  .cad li{translate:none; transition:none} .cad li:hover{transform:none}
  .band .inside .n{--g:1 !important}
  .btn,.btn .arr{transition:none}
  .btn:hover .arr{transform:none}
}

/* ---- canvas version: no page script, so motion is CSS scroll-driven where supported ---- */
.hero h1.sans{font-family:var(--sans); font-weight:900; letter-spacing:-.025em; line-height:1}
.bar{position:absolute}
.cad li:nth-child(1){--amp:3px} .cad li:nth-child(2){--amp:4.5px} .cad li:nth-child(3){--amp:6px} .cad li:nth-child(4){--amp:7.5px} .cad li:nth-child(5){--amp:9px}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .bar{position:fixed; animation:barSolid linear both; animation-timeline:scroll(root); animation-range:620px 720px}
    .bar .logo .on-sky{animation:fadeOut linear both; animation-timeline:scroll(root); animation-range:620px 720px}
    .bar .logo .on-light{animation:fadeIn linear both; animation-timeline:scroll(root); animation-range:620px 720px}
    .bar .btn{animation:btnSolid linear both; animation-timeline:scroll(root); animation-range:620px 720px}
    .cad li{animation:cadDrift linear both; animation-timeline:view(); animation-range:cover}
    .band .inside .n{animation:numGlow linear both; animation-timeline:view(); animation-range:cover 15% cover 45%}
  }
}
@keyframes barSolid{from{background:transparent; color:#fcf9f2; box-shadow:0 1px 0 transparent} to{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}}
@keyframes btnSolid{from{background:#fcf9f2; color:#212020} to{background:var(--ink); color:var(--surface)}}
@keyframes fadeOut{from{opacity:1} to{opacity:0}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes cadDrift{from{translate:0 var(--amp)} to{translate:0 calc(var(--amp) * -1)}}
@keyframes numGlow{
  from{background-color:transparent; border-color:#a8a196; color:#fcf9f2; box-shadow:0 0 0 0 rgba(205,179,138,0), 0 0 0 rgba(205,179,138,0)}
  to{background-color:#cdb38a; border-color:#cdb38a; color:#212020; box-shadow:0 0 0 5px rgba(205,179,138,.14), 0 0 22px rgba(205,179,138,.42)}
}