/* A full-viewport spiral of reference cards, with a quiet center for the copy. */
.hero{display:grid;place-items:center;width:100%;max-width:none;margin:0;height:100svh;min-height:max(760px,47.5rem);overflow:clip}
.hero .navigation{position:absolute;inset:0 0 auto;z-index:10}
.hero-copy{position:relative;z-index:3;align-self:center;width:min(780px,calc(100% - 48px));margin:0;padding:70px 0;pointer-events:none}
.hero-copy a,.hero-copy button{pointer-events:auto}
.hero h1{font-size:clamp(3.5rem,6.1vw,6rem);line-height:1.015;letter-spacing:-.05em}
.hero-description{margin-top:26px;font-size:1.125rem;line-height:1.5}
.hero-actions{margin-top:26px;gap:24px}
.hero-art{position:absolute;inset:0;z-index:1;pointer-events:none;contain:strict;mask-image:radial-gradient(ellipse 54% 45% at 50% 50%,transparent 0% 50.5%,#000 90%);-webkit-mask-image:radial-gradient(ellipse 54% 45% at 50% 50%,transparent 0% 50.5%,#000 90%)}
.hero-whirl{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.5s ease-out}
.hero-art.is-ready .hero-whirl{opacity:1}
.hero-art.is-ready .hero-fallback{opacity:0;visibility:hidden}
.hero-art.is-loading .hero-fallback{visibility:hidden}
.hero-fallback{position:absolute;inset:0;transition:opacity .6s ease}
.hero-fallback img{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:auto;max-height:140px;object-fit:cover;border-radius:12px;transform:translate(-50%,-50%) rotate(var(--turn));box-shadow:inset 0 0 0 1px #10111314}
.hero::before,.hero::after{content:"";position:absolute;inset-inline:0;pointer-events:none;z-index:2}
.hero::before{top:0;height:120px;background:linear-gradient(var(--paper),#f5f5f200)}
.hero::after{bottom:0;height:24%;background:linear-gradient(#f5f5f200,var(--paper) 92%)}
@media(min-width:1921px){.hero h1{font-size:6.5rem}}
@media(max-width:700px){
  .hero{height:100svh;min-height:max(760px,47.5rem);max-height:none}
  .hero-copy{width:calc(100% - 40px);margin:0;padding:80px 0}
  .hero h1{font-size:clamp(3.2rem,12.8vw,4.75rem);line-height:1.035}
  .hero-description{font-size:1rem;margin-top:24px;line-height:1.5}
  .hero-actions{flex-direction:column;gap:12px;margin-top:24px}
  .hero-art{mask-image:radial-gradient(ellipse 85% 40% at 50% 49%,transparent 0% 49%,#000 95%);-webkit-mask-image:radial-gradient(ellipse 85% 40% at 50% 49%,transparent 0% 49%,#000 95%)}
  .hero-fallback img{width:calc(var(--size) * .72)}
  .hero::before{height:100px}
}
@media(prefers-reduced-motion:reduce){.hero-whirl,.hero-fallback{transition:none}}