/* VX · Front doors: the gallery's own styles, separate from every concept's.
   Deep navy ground, a static night sky behind everything, quiet glass on the cards, one easing curve. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/geist-mono-latin.woff2) format("woff2")}

:root{
  --bg:#060912;
  --ink:#EEF1FA;
  --ink-2:#B7BFD6;
  --ink-3:#8F99B6;
  --line:rgba(166,180,255,.13);
  --line-2:rgba(178,190,255,.30);
  --glass-1:rgba(148,163,255,.060);
  --glass-2:rgba(148,163,255,.016);
  --accent:#5E6AD2;
  --accent-2:#8E98F0;
  --focus:#AEB6FF;
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4.4vw,64px);
  --max:1360px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* the sky sits behind the body at z-index -1, so the body itself stays transparent */
body{margin:0;min-height:100vh;background:transparent;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
::selection{background:rgba(142,152,240,.35);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------------ the sky (static, painted once)
   It spans the whole document and scrolls with it: glows at the top and the foot, stars throughout. */
body{position:relative}
.sky{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1150px 760px at 4% -160px,rgba(94,106,210,.24),transparent 70%),
    radial-gradient(900px 640px at 104% 380px,rgba(44,92,196,.15),transparent 70%),
    radial-gradient(1300px 760px at 36% calc(100% + 260px),rgba(118,86,206,.16),transparent 70%),
    radial-gradient(800px 600px at 100% 58%,rgba(70,82,190,.07),transparent 70%),
    linear-gradient(180deg,#080C1B 0,#060912 1100px,#05070F 100%)}
.sky::before{content:"";position:absolute;inset:0;opacity:.9;
  background:url(stars.svg) 0 0/1200px 1200px repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.6) 1400px,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.6) 1400px,rgba(0,0,0,.35) 100%)}
/* film grain, very faint, so the gradients never band */
.sky::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------------ chrome */
.skip{position:absolute;left:16px;top:-80px;z-index:20;padding:10px 14px;border-radius:10px;
  background:#121831;color:var(--ink);border:1px solid var(--line-2);text-decoration:none;font-size:14px}
.skip:focus{top:12px}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none;font-size:14px;font-weight:450;letter-spacing:.005em;
  color:var(--ink);border-radius:8px}
.brand img{width:28px;height:28px;border-radius:7px;box-shadow:0 0 0 1px rgba(166,180,255,.16),0 10px 24px -10px rgba(94,106,210,.6)}
.meta{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.meta a{color:var(--ink-2);text-decoration:none;border-radius:4px}
.meta a:hover{color:var(--ink)}
@media (max-width:519px){.top .meta{display:none}.top .meta:has(a){display:block}}
@media (max-width:379px){.top:has(.meta a) .brand span{display:none}}

.eyebrow{display:flex;align-items:center;gap:12px;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:"";flex:none;width:28px;height:1px;background:var(--accent-2);opacity:.85}

/* ------------------------------------------------------------------ intro */
.intro{display:grid;gap:26px;padding-top:clamp(52px,9vw,136px);padding-bottom:clamp(40px,6vw,84px)}
.intro h1{margin:0;font:400 clamp(4.25rem,1.2rem + 9.6vw,9.6rem)/.86 var(--serif);letter-spacing:-.018em;color:var(--ink)}
.intro h1 em{font-style:italic;letter-spacing:-.01em;color:#DCE1FF}
.lede{max-width:33rem;font-size:clamp(1.0625rem,.98rem + .34vw,1.25rem);line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.count{display:flex;flex-wrap:wrap;gap:8px 22px;font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
@media (min-width:960px){
  .intro{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:64px;row-gap:30px;align-items:end}
  .intro .eyebrow{grid-column:1/-1}
  .intro .side{display:grid;gap:22px;justify-self:end;padding-bottom:.85rem}
}
.side{display:grid;gap:20px}

/* ------------------------------------------------------------------ the grid */
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2.3vw,32px)}
@media (min-width:720px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card--lead{grid-column:1/-1}
}

.card{position:relative;display:flex;flex-direction:column;padding:9px;border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--glass-1),var(--glass-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 40px 80px -48px rgba(0,0,0,.9);
  transition:border-color .6s var(--ease),background-color .6s var(--ease)}
.shot{position:relative;margin:0;aspect-ratio:16/10;border-radius:13px;overflow:hidden;background:#0B1122}
.shot img{width:100%;height:100%;object-fit:cover;transform:scale(1.0001);transition:transform 1.4s var(--ease)}
.shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}

.body{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px 13px 13px}
.head{display:flex;align-items:center;gap:14px}
.num{flex:none;font:500 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.card h2{margin:0;flex:1;min-width:0;font:400 clamp(1.95rem,1.4rem + 1.2vw,2.6rem)/1.02 var(--serif);letter-spacing:-.006em}
.card h2 a{text-decoration:none;color:inherit;border-radius:2px}
/* the whole card is the link: the name's link stretches over it */
.card h2 a::after{content:"";position:absolute;inset:-1px;z-index:1;border-radius:20px}
.card h2 a:focus-visible{outline:none}
.card h2 a:focus-visible::after{outline:2px solid var(--focus);outline-offset:3px}
.go{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--ink-2);transition:border-color .6s var(--ease),color .6s var(--ease),transform .6s var(--ease)}
.go svg{width:15px;height:15px}
.idea{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:38em;text-wrap:pretty}
.tags{list-style:none;margin:auto 0 0;padding:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font:450 11.5px/1 var(--mono);letter-spacing:.01em;color:var(--ink-2);padding:7px 10px 7px;border-radius:999px;
  border:1px solid var(--line);background:rgba(148,163,255,.035)}

@media (min-width:1024px){
  .card--lead{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);gap:0 6px;align-items:stretch}
  .card--lead .body{justify-content:flex-end;padding:28px 26px 22px 30px;gap:16px}
  .card--lead h2{font-size:clamp(2.8rem,1.6rem + 2.4vw,4.2rem)}
  .card--lead .idea{font-size:16.5px}
  .card--lead .tags{margin-top:6px}
}

@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:var(--line-2);background-color:rgba(148,163,255,.02)}
  .card:hover .shot img{transform:scale(1.028)}
  .card:hover .go{border-color:var(--line-2);color:var(--ink);transform:translateX(3px)}
}
.card:focus-within{border-color:var(--line-2)}

/* ------------------------------------------------------------------ footer */
.foot{margin-top:clamp(72px,10vw,140px)}
.foot .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;
  padding-block:26px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.foot a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(183,191,214,.35);text-underline-offset:4px;
  transition:color .4s var(--ease),text-decoration-color .4s var(--ease)}
.foot a:hover{color:var(--ink);text-decoration-color:currentColor}
.foot .links{display:flex;flex-wrap:wrap;gap:10px 24px}

/* ------------------------------------------------------------------ credits page */
.doc{padding-top:clamp(44px,7vw,104px)}
.doc h1{margin:14px 0 0;font:400 clamp(3rem,1.4rem + 6vw,6.4rem)/.9 var(--serif);letter-spacing:-.015em}
.doc .lede{margin-top:24px;max-width:44rem}
.doc h2{margin:0 0 6px;font:400 clamp(1.8rem,1.3rem + 1.4vw,2.6rem)/1.05 var(--serif)}
.doc section{margin-top:clamp(48px,6vw,80px)}
.doc section > p{max-width:46rem;color:var(--ink-2)}
.doc section > p + p{margin-top:10px}
.panel{margin-top:22px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--glass-1),var(--glass-2));overflow:hidden}
.panel table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.panel th,.panel td{text-align:left;vertical-align:top;padding:13px 16px;border-top:1px solid var(--line)}
.panel thead th{border-top:0;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  background:rgba(148,163,255,.03)}
.panel td{color:var(--ink-2)}
.panel td:first-child{color:var(--ink)}
.panel a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(183,191,214,.35);text-underline-offset:3px;overflow-wrap:anywhere}
.panel a:hover{text-decoration-color:currentColor}
.panel .sub{display:block;margin-top:2px;font-size:13px;color:var(--ink-3)}
.panel .sub.flat{margin:0}
.panel .nw{white-space:nowrap}
.panel th:first-child{width:24%}
.lede-note{max-width:46rem}
.mono{font-family:var(--mono);font-size:.92em}
.note{margin-top:14px;font-size:14px;color:var(--ink-3)}
/* phones: each table row becomes a small card */
@media (max-width:719px){
  .panel thead{display:none}
  .panel table,.panel tbody,.panel tr,.panel td{display:block;width:100%}
  .panel tr{padding:14px 16px;border-top:1px solid var(--line)}
  .panel tr:first-child{border-top:0}
  .panel td{padding:3px 0;border:0}
  .panel td[data-label]::before{content:attr(data-label);display:block;margin-top:6px;font:500 10px/1.4 var(--mono);
    letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .panel td:first-child::before{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .card:hover .shot img{transform:scale(1.0001)}
  .card:hover .go{transform:none}
}