:root { color-scheme:dark; --blue:#173bea; --paper:#f0f0dc; --acid:#e0ff00; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); }
* { box-sizing:border-box; }
body { margin:0; background:var(--blue); color:var(--paper); font-family:"Avenir Next",Avenir,"Trebuchet MS",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); z-index:3; }
.page { max-width:1920px; margin:auto; padding:24px 4vw 20px; overflow:hidden; }
header { display:flex; align-items:center; gap:24px; position:relative; z-index:2; }
.brand { font-family:Baskerville,"Palatino Linotype",Palatino,serif; font-size:64px; font-weight:700; line-height:.8; letter-spacing:-7px; color:inherit; text-decoration:none; padding-right:7px; }
.brand-dot { color:var(--acid); }
.company { font-size:12px; line-height:1.35; margin:0; }
.edition { margin-left:auto; font-size:12px; }
main { position:relative; }
.art-heading { display:flex; justify-content:space-between; margin-top:45px; font-size:10px; letter-spacing:.18em; position:relative; z-index:2; }
.artwork { position:relative; margin:-38px auto -40px; max-width:1080px; }
svg { display:block; width:100%; overflow:visible; }
.sculpture { transform-origin:500px 365px; }
.sun { transform-origin:729px 211px; }
.satellite { transform-origin:500px 381px; }
.shadow { transform-origin:485px 660px; }
figcaption { position:absolute; bottom:5%; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:11px; }
button { border:1px solid #ffffff55; border-radius:30px; background:transparent; color:var(--paper); padding:10px 15px; font:inherit; cursor:pointer; display:flex; gap:8px; align-items:center; }
button[hidden] { display:none; }
button:active { transform:scale(.97); }
a:focus-visible,button:focus-visible { outline:2px solid var(--acid); outline-offset:6px; }
h1 { font-family:Baskerville,"Palatino Linotype",Palatino,serif; font-weight:400; font-size:clamp(120px,29vw,530px); letter-spacing:-.065em; line-height:.72; margin:0 0 30px -.045em; position:relative; pointer-events:none; }
h1 span { color:var(--acid); }
.baseline { display:flex; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.13em; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #ffffff40; margin-top:35px; padding-top:18px; font-size:11px; }
@media (prefers-reduced-motion:no-preference) {
  .sculpture { animation:float 18s var(--ease-in-out) infinite alternate; }
  .sun { animation:breathe 14s var(--ease-in-out) infinite alternate; }
  .satellite { animation:orbit 36s linear infinite; }
  .shadow { animation:shadow 18s var(--ease-in-out) infinite alternate; }
  header { animation:arrive .7s var(--ease-out) both; }
  .art-heading { animation:arrive .7s .06s var(--ease-out) both; }
  h1 { animation:arrive .9s .12s var(--ease-out) both; }
  button { transition:transform 150ms var(--ease-out); }
}
@keyframes float { from { transform:translateY(-9px) rotate(-7deg); } to { transform:translateY(11px) rotate(7deg); } }
@keyframes breathe { from { transform:translate(0,0) scale(1); } to { transform:translate(12px,-16px) scale(.94); } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes shadow { from { opacity:.6; transform:scaleX(.9); } to { opacity:1; transform:scaleX(1.05); } }
@keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
body.paused .sculpture,body.paused .sun,body.paused .satellite,body.paused .shadow { animation-play-state:paused; }
@media (hover:hover) and (pointer:fine) { button:hover { background:#ffffff16; } }
@media (prefers-reduced-motion:reduce) { header,.art-heading,h1 { animation:fade 200ms ease both; } button:active { transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@media (min-width:1400px) { .artwork { max-width:1050px; margin-top:-70px; margin-bottom:-65px; } }
@media (max-width:680px) {
  .page { padding:22px 6vw 18px; }
  .brand { font-size:54px; }
  .company { font-size:11px; }
  .edition { display:none; }
  .art-heading { margin-top:42px; font-size:9px; }
  .artwork { width:136%; max-width:none; margin:2px -18% 48px; }
  figcaption { left:13.24%; right:13.24%; bottom:-22px; font-size:10px; }
  figcaption>span { max-width:130px; line-height:1.4; }
  button { padding:9px 11px; }
  h1 { font-size:29vw; margin-bottom:25px; }
  .baseline { font-size:8px; letter-spacing:.06em; }
  .baseline span:last-child { display:none; }
  footer { margin-top:25px; font-size:9px; line-height:1.5; }
}