@font-face{font-family:Montreal;src:url('assets/neue-montreal-regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ink:#fffef5;--line:rgba(255,254,245,.3);--step:46px;--nav-height:322px;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#17221b}
body{color:var(--ink);font-family:Montreal,Arial,sans-serif;font-weight:400;font-size:12px;-webkit-font-smoothing:antialiased;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.nav-scroll:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
::selection{background:#eed698;color:#17221b}
.atmosphere{position:fixed;inset:0;background:url('assets/atmosphere.png') center center/cover no-repeat;pointer-events:none}
.composition{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 2.75vw}
.slogan{font:inherit;font-size:12.5px;line-height:1.45;margin:0;text-transform:uppercase;width:max-content;max-width:100%}
.navigation{width:200px;justify-self:center;position:relative}
.nav-scroll{height:var(--nav-height);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto;cursor:grab;user-select:none;scrollbar-width:none;mask-image:linear-gradient(transparent,black 20%,black 80%,transparent);-webkit-mask-image:linear-gradient(transparent,black 20%,black 80%,transparent)}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-spacer{height:calc((var(--nav-height) - var(--step))/2)}
.nav-scroll a{height:var(--step);display:flex;align-items:center;justify-content:center;position:relative;text-decoration:none;color:var(--ink);font-size:12.5px;opacity:var(--opacity,.3);transition:opacity .25s ease;white-space:nowrap}
.nav-scroll a::before,.nav-scroll a::after{position:absolute;opacity:0;transition:opacity .25s ease}
.nav-scroll a::before{content:'[';left:calc(50% - 47px)}
.nav-scroll a::after{content:']';right:calc(50% - 47px)}
.nav-scroll a[aria-current='page']{opacity:1!important}
.nav-scroll a[aria-current='page']::before,.nav-scroll a[aria-current='page']::after{opacity:1}
.nav-scroll a:hover{opacity:1!important}
.content{width:270px;justify-self:end;position:relative}
.detail{width:100%;max-height:76svh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.nav-scroll.dragging,.nav-scroll.dragging a{cursor:grabbing}
.detail-copy{animation:reveal .2s var(--ease) both}
.detail-copy h2{font:inherit;font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:0 0 16px;text-wrap:balance}
.mobile-heading-break{display:none}
.detail-copy p{font-size:13px;line-height:1.6;margin:0 0 18px;text-wrap:pretty}
.detail-copy .note{font-size:11px;line-height:1.5;opacity:.75}
.detail-copy dl{margin:24px 0;font-size:12px;line-height:1.5}
.detail-copy dl div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:10px 0}
.detail-copy dt,.detail-copy dd{margin:0}
.detail-copy>:last-child{margin-bottom:0}
.detail-copy a{color:inherit;text-underline-offset:3px}
.app-store-download{display:none}
.no-script{position:fixed;bottom:20px;left:3vw}
@keyframes reveal{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.content{width:290px}.navigation{width:235px}}
@media(max-width:800px){
  :root{--step:116px;--mobile-top:calc(60px + env(safe-area-inset-top,0px));--mobile-nav-top:calc(var(--mobile-top) + 60px);--mobile-content-offset:clamp(0px,calc(21.5svh - 131.365px),60px);--mobile-content-top:calc(var(--mobile-nav-top) + 64px + 52px + var(--mobile-content-offset))}
  .composition{padding:0 24px;display:block;min-height:100svh}
  .content,.detail,.slogan{touch-action:pan-y pinch-zoom}
  .slogan{position:absolute;left:24px;top:var(--mobile-top);transform:none;text-align:left;font-size:12px;line-height:1.5}
  .navigation{position:absolute;left:24px;top:var(--mobile-nav-top);width:calc(100% - 48px)}
  .nav-scroll{display:flex;height:64px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;mask-image:linear-gradient(to right,black 80%,transparent);-webkit-mask-image:linear-gradient(to right,black 80%,transparent)}
  .nav-spacer{flex:0 0 0;height:64px}
  .nav-spacer:last-child{flex-basis:max(0px,calc(100% - var(--step)))}
  .nav-scroll a{flex:0 0 var(--step);height:64px;font-size:12px;justify-content:flex-start;gap:8px}
  .nav-scroll a::before,.nav-scroll a::after{position:static}
  .content{position:absolute;left:24px;right:24px;top:var(--mobile-content-top);width:auto;min-width:0;transform:none}
  .detail{width:100%;max-height:calc(100svh - var(--mobile-content-top) - 80px - env(safe-area-inset-bottom,0px))}
  .app-store-download{position:fixed;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:4px;min-height:44px;padding-top:20px;font-size:13px;line-height:24px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;z-index:1}
  .mobile-heading-break{display:inline}
  .detail-copy h2{font-size:24px;line-height:28px;margin-bottom:20px}
  .detail-copy p{font-size:16px;line-height:24px;font-weight:400;margin-bottom:24px}
  .detail-copy .note{font-size:12px;line-height:1.5}
  .atmosphere{background-position:43% center}
}
@media(max-width:480px){.composition{padding:0 24px}.slogan{left:24px}.navigation{left:24px;width:calc(100% - 48px)}.content{left:24px;right:24px}.detail-copy dl div{display:block}.detail-copy dd{margin-top:3px;opacity:.75}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}