:root { --reveal-at: 100%; --reveal-v-quick: 1500; --reveal-v-skip: 4000; --line-stagger-cap: 2; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-latin.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@property --m { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--color-bg); }
body { background: var(--color-bg); color: var(--color-text); font: var(--font-weight-regular) var(--font-size-body)/var(--line-height-body) var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: var(--font-weight-regular); }
figure { margin: 0; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-left: auto; margin-right: auto; padding: 0 var(--gut); }
.label { font: var(--font-weight-regular) var(--font-size-label)/var(--line-height-label) var(--font-mono); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-muted); }
.lockup { display: block; width: 120px; height: 20px; background: currentColor; -webkit-mask: url("ds/lockup.svg") left center / contain no-repeat; mask: url("ds/lockup.svg") left center / contain no-repeat; }
.title { font-size: var(--font-size-title); line-height: var(--line-height-title); letter-spacing: var(--letter-spacing-title); text-wrap: balance; }
.display { font-size: var(--font-size-display); line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; }
.lead { font-size: var(--font-size-lead); line-height: var(--line-height-lead); color: var(--color-text-muted); text-wrap: pretty; }
.grey { color: var(--color-text-muted); }
:focus { outline: none; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-focus); }
.btn { display: inline-flex; align-items: center; gap: var(--btn-gap); height: var(--control-h); padding: 0 var(--btn-pad); border: 0; border-radius: var(--radius-pill); font: inherit; font-size: var(--font-size-small); line-height: 1; background: var(--color-accent); color: var(--color-on-accent); white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-base) var(--ease-std), color var(--t-base) var(--ease-std), transform var(--t-base) var(--ease-out); }
.btn i { font-style: normal; transition: transform var(--t-move) var(--ease-out); }
.btn:hover { background-color: var(--color-accent-hover); } .btn:hover i { transform: translateX(var(--nudge)); }
.btn:active { transform: scale(var(--press)); transition-duration: var(--t-press); }
.tlink { display: inline-flex; gap: var(--space-8); align-items: center; font-size: var(--font-size-small); color: var(--color-text); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-exit) var(--ease-in-exit); }
.tlink:hover { background-size: 100% 1px; transition: background-size var(--t-move) var(--ease-out); }
.tlink i { font-style: normal; }


.nav { position: fixed; z-index: var(--z-nav); top: var(--nav-inset); left: 0; right: 0; pointer-events: none; }
.nav .bar { position: relative; pointer-events: auto; height: var(--nav-height-solid); }
.nav .wrap { position: relative; height: 100%; display: flex; align-items: center; gap: var(--nav-gap); padding: 0 calc(var(--gut) + var(--space-8)) 0 calc(var(--gut) + var(--space-24)); color: var(--color-text); }
.nav .wrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--gut); right: var(--gut); z-index: -1;
  border-radius: var(--radius-media); background: var(--color-surface-window); box-shadow: var(--ring-menu), var(--shadow-capsule); }
.nav .btn { height: var(--control-h-sm); }
.nav .links { display: flex; align-items: center; gap: var(--nav-links-gap); margin: 0 auto; font-size: var(--font-size-small); }
.nav .links > a { color: var(--color-text-muted); transition: color var(--t-base) var(--ease-std); white-space: nowrap; }
.nav .links > a:hover, .nav .links > a[aria-current="page"] { color: var(--color-text); }
.nav .menu { display: none; height: var(--control-h-sm); padding: 0 var(--space-4); border: 0; background: none; font: inherit; font-size: var(--font-size-small); color: inherit; cursor: pointer; }
.nav .sf { display: none; }
@media (min-width: 900px) and (max-width: 1099px) { .nav .wrap, .nav .links { gap: var(--space-24); } .nav .links .lf { display: none; } .nav .links .sf { display: inline; } }
@media (max-width: 899px) {
  .nav .menu { display: block; margin-left: auto; }
  .nav .links { position: absolute; top: calc(100% + var(--space-8)); left: var(--gut); right: var(--gut); flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: var(--space-8) var(--space-24) var(--space-16); max-height: calc(100svh - var(--nav-height-solid) - var(--nav-inset) - var(--space-24)); overflow-y: auto;
    color: var(--color-text); border-radius: var(--radius-media); background: var(--color-surface-window); box-shadow: var(--ring-menu), var(--shadow-capsule);
    opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none;
    transition: opacity var(--t-exit) var(--ease-in-exit), transform var(--t-exit) var(--ease-in-exit), visibility 0s linear var(--t-exit); }
  .nav.open .links { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: visibility 0s; animation: menu-in var(--t-move) var(--ease-out); }
  .nav .links > a { display: block; padding: var(--space-row) 0; font-size: var(--font-size-body); line-height: var(--line-height-small); color: var(--color-text); border-top: 1px solid var(--color-rule); }
  .nav .links > a:first-child { border-top: 0; }
}
@media (max-width: 860px) { .nav .btn { display: none; } }
@media (min-width: 861px) { .nav .m-only { display: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

html .ap-subnav { top: calc(2 * var(--nav-inset) + var(--nav-height-solid)); }
html .ap-subnav.stuck .in { border-top-color: var(--color-rule); }
html .ap-subnav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(2 * var(--nav-inset) + var(--nav-height-solid)); background: var(--color-bg); visibility: hidden; pointer-events: none; }
html .ap-subnav.under::before { visibility: visible; }
.ap-subnav ~ [id], .ap-subnav ~ * [id] { scroll-margin-top: calc(2 * var(--nav-inset) + var(--nav-height-solid) + var(--control-h) + var(--space-24)); }






.pending { display: none; } 
.gap { display: none; } 
.slot { padding: var(--space-24); border: 1px dashed var(--color-rule); border-radius: var(--radius-media); color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.slot .label { display: block; margin-bottom: var(--space-8); }



main { display: block; }
[id] { scroll-margin-top: calc(var(--nav-inset) + var(--nav-height-solid) + var(--space-24)); }
.phead { padding-top: calc(var(--nav-safe) + var(--space-section)); }   
.phead h1 { margin-top: var(--space-24); }
.phead.c { text-align: center; }   
.phead.c h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.phead.c .sub { max-width: 34em; margin: var(--space-24) auto 0; }
.phead .go { margin-top: var(--space-text-action); }
.ch { padding-top: var(--sec); }
.clip { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-film-fallback); aspect-ratio: 16 / 9; }
.clip.wide { aspect-ratio: 21 / 9; }
.clip > img, .clip > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cap { display: flex; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-12); }
.cap .label:last-child:not(:first-child) { text-align: right; }
.head { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-24) var(--gut); align-items: end; margin-bottom: var(--space-group); }
.head .title { margin-top: var(--space-16); max-width: 18ch; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-24) var(--gut); align-items: center; }
.split .title { margin-top: var(--space-16); max-width: 18ch; }
.plate img { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-media); background: var(--color-surface-window); }
.plate picture { display: block; }
.sig { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-signal); flex: none; }   
.tbd { display: grid; place-items: center; text-align: center; padding: var(--space-24); border-radius: var(--radius-media); background: var(--color-surface-panel); color: var(--color-text-muted); font-size: var(--font-size-small); line-height: var(--line-height-small); }
.ph { position: relative; display: grid; place-items: center; padding: var(--space-24); border-radius: var(--radius-media); background: var(--color-surface-placeholder); aspect-ratio: 16 / 9; text-align: center; }
.ph .phn { display: none; max-width: 30em; font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-muted); }

@media (max-width: 860px) {
  .head, .split { grid-template-columns: 1fr; }
  .clip.wide { aspect-ratio: 4 / 3; }
  .cap { flex-direction: column; gap: var(--space-4); } .cap .label:last-child:not(:first-child) { text-align: left; }
}
@media (max-width: 640px) { .plate img { aspect-ratio: 4 / 5; } }


.next { padding-top: var(--sec); display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-40); }
.next .tlink { font-size: var(--font-size-body); min-height: 44px; background-position: 0 calc(100% - 8px); }   
.closing { padding-top: var(--sec); }
.next + .closing { padding-top: var(--space-block); }
.cfilm { position: relative; margin: 0 auto; width: calc(100% * var(--cw, 1)); aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius-media); background: var(--color-surface-film-fallback); }
.cfilm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing .row { display: flex; justify-content: space-between; align-items: end; gap: var(--space-24) var(--gut); flex-wrap: wrap; margin-top: var(--space-group); }
.closing .display { max-width: 11ch; }
.closing .doors { display: flex; gap: var(--space-12); align-items: center; flex-wrap: wrap; }
@media (max-width: 860px) { .cfilm { aspect-ratio: 4 / 5; } }
footer.wrap { margin-top: var(--space-block); }
footer .cols { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: var(--space-24) var(--gut); padding: var(--space-32) 0 var(--space-48); border-top: 1px solid var(--color-rule); }
footer .cols .label { display: block; margin-bottom: var(--space-12); }
footer .cols a { display: block; font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-muted); transition: color var(--t-base) var(--ease-std); }
footer .cols a + a { margin-top: var(--space-8); } footer .cols a:hover { color: var(--color-text); }
footer .cols .lockup { color: var(--color-text); }
.credits { font-size: var(--font-size-caption); color: var(--color-text-muted); padding: 0 0 var(--space-24); max-width: 70em; }
footer .base { display: flex; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; padding: var(--space-16) 0 var(--space-40); border-top: 1px solid var(--color-rule); }
@media (max-width: 1023px) { footer .cols { grid-template-columns: repeat(2, 1fr); } footer .cols > :first-child { grid-column: 1 / -1; } }



.bl .line { display: inline-block; opacity: 0; filter: blur(var(--line-blur)); transform: translateY(var(--line-rise)); will-change: transform, filter, opacity;
  transition: opacity var(--t-move) var(--ease-out), filter var(--t-move) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(min(var(--i), var(--line-stagger-cap)) * var(--line-stagger) + var(--d, 0ms)); }
.bl.h2:not(.in) .line { filter: blur(6px); transform: translateY(16px); }
.bl.quick .line { filter: none; transition-duration: var(--t-move); transition-delay: 0s; }
.bl.in .line { opacity: 1; filter: blur(0); transform: none; }
.js .rv { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--t-move) var(--ease-std), transform var(--t-reveal) var(--ease-out); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d2 { transition-delay: var(--reveal-stagger); } .js .rv.d3 { transition-delay: calc(2 * var(--reveal-stagger)); }
.js .rv.quick { transition-duration: var(--t-move) !important; transition-delay: 0s !important; }
.now, .now .line, .js .rv.now { transition: none !important; }
.js .clip.rv, .js .mask.rv { -webkit-mask-image: linear-gradient(180deg, #000 var(--m), transparent calc(var(--m) + var(--mask-band))); mask-image: linear-gradient(180deg, #000 var(--m), transparent calc(var(--m) + var(--mask-band)));
  transition: --m var(--t-mask) var(--ease-out), opacity var(--t-move) var(--ease-std), transform var(--t-reveal) var(--ease-out); }
.js .clip.rv.in, .js .mask.rv.in { --m: 100%; }
.js .clip.rv.d2 { transition-delay: var(--reveal-stagger); }
@media (prefers-reduced-motion: reduce) {
  .bl .line, .bl.h2:not(.in) .line { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .js .rv, .btn, .btn i, .nav .links { transition: none !important; transform: none !important; animation: none !important; }
  .js .clip.rv, .js .mask.rv { -webkit-mask-image: none; mask-image: none; }
}