:root {
  --void: #070c0f; --paper: #0b1114; --warm: #0f1619; --panel: #121b1f;
  --ink: #eef2f2; --soft: #a8b6bb; --faint: #6d7f86; --rule: #212c31;
  --sea: #7fc9d3; --sea-deep: #10454f;
  --display: 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--display);overflow-x:hidden}
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.skip{position:fixed;left:-1000px;top:10px;z-index:10;padding:10px 14px;border:1px solid var(--sea);background:var(--void)}
.skip:focus{left:10px}
.topbar{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 clamp(20px,4vw,60px);border-bottom:1px solid var(--rule);background:var(--void)}
.brand img{width:205px;height:auto;filter:invert(1)}
.topbar>span,.topbar>a:last-child,.eyebrow,.code,.card-meta,.tray,.viewer-bar,footer{font:400 10px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.topbar>a:last-child{text-align:right}.topbar>a:last-child:hover{color:var(--sea)}
main{max-width:1600px;margin:auto;padding:clamp(70px,9vw,140px) clamp(20px,4vw,60px) clamp(120px,14vw,200px)}

/* Intro */
.intro{display:grid;grid-template-columns:1fr 2fr;gap:30px 6vw;align-items:start;margin-bottom:clamp(70px,9vw,130px)}
.eyebrow{color:var(--sea);margin:10px 0}
.intro h1{grid-column:2;margin:0;max-width:15ch;font-size:clamp(44px,6.4vw,100px);line-height:.95;letter-spacing:-.045em;font-weight:400}
.intro h1 em{font-style:normal;color:var(--sea)}
.intro-copy{grid-column:2;max-width:60ch;color:var(--soft);font-size:clamp(16px,1.4vw,20px);line-height:1.7}

/* Groups */
.group{margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--rule);padding-top:clamp(28px,4vw,52px)}
.group-head{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:20px 6vw;align-items:baseline;margin-bottom:clamp(34px,4vw,60px)}
.group-head h2{margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.03em;font-weight:400}
.group-head p{margin:0;max-width:62ch;color:var(--soft);font-size:15px;line-height:1.65}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(20px,2.4vw,34px)}
.card{display:flex;flex-direction:column;border:1px solid var(--rule);background:var(--warm);transition:border-color .35s var(--ease),transform .35s var(--ease)}
.card:hover{border-color:var(--faint);transform:translateY(-3px)}
.card.is-picked{border-color:var(--sea)}
.shot{display:block;width:100%;padding:0;border-bottom:1px solid var(--rule);background:var(--void);overflow:hidden}
.shot img{width:100%;height:auto;transition:transform .5s var(--ease)}
.shot:hover img{transform:scale(1.015)}
.shot:focus-visible,.pick:focus-visible,.tray-clear:focus-visible,.viewer-close:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.card-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px}
.card-meta{display:flex;gap:14px;margin:0}
.card-meta .num{color:var(--sea)}
.code{color:var(--soft)}
.card-body h3{margin:0;font-size:clamp(21px,1.7vw,27px);line-height:1.1;letter-spacing:-.02em;font-weight:400}
.card-body p:not(.card-meta){margin:0;color:var(--soft);font-size:14px;line-height:1.6}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.card-actions a{font:400 10px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.card-actions a:hover{color:var(--sea)}
.pick{margin-top:auto;align-self:start;padding:9px 16px;border:1px solid var(--rule);background:var(--panel);font:400 10px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--soft);transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.card-actions .pick{margin-top:0}
.pick:hover{border-color:var(--sea);color:var(--ink)}
.card.is-picked .pick{border-color:var(--sea);background:var(--sea-deep);color:var(--ink)}

/* Selection tray */
.tray{position:fixed;left:50%;bottom:22px;z-index:8;display:flex;align-items:center;gap:22px;max-width:calc(100% - 32px);padding:14px 20px;border:1px solid var(--sea);background:var(--void);transform:translateX(-50%)}
.tray[hidden]{display:none}
.tray-line{display:flex;align-items:center;gap:12px;margin:0}
.tray-label{color:var(--faint)}
.tray strong{color:var(--ink);font-weight:400;letter-spacing:.1em}
.tray-hint{margin:0;color:var(--faint)}
.tray-hint span{color:var(--sea)}
.tray-clear{padding:7px 12px;border:1px solid var(--rule);font:400 10px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.tray-clear:hover{border-color:var(--sea);color:var(--ink)}

/* Full-size viewer */
.viewer{width:min(1180px,94vw);max-height:92vh;padding:0;border:1px solid var(--rule);background:var(--void);color:var(--ink);overflow:auto}
.viewer::backdrop{background:var(--void);opacity:.92}
.viewer img{width:100%;height:auto}
.viewer-bar{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0;padding:14px 18px;border-top:1px solid var(--rule);background:var(--void)}
.viewer-close{padding:7px 12px;border:1px solid var(--rule);font:400 10px/1.2 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--soft)}
.viewer-close:hover{border-color:var(--sea);color:var(--ink)}

footer{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;padding:36px clamp(20px,4vw,60px);border-top:1px solid var(--rule);background:var(--void)}
footer span:nth-child(2){text-align:center}footer a{text-align:right;color:var(--soft)}
footer a:hover{color:var(--sea)}

html.js [data-reveal]{opacity:1;transform:translateY(18px);transition:transform .8s var(--ease)}
html.js [data-reveal].is-in{transform:none}

@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto}.topbar>span{display:none}.topbar .brand img{width:165px}
  .intro{grid-template-columns:1fr}.intro h1,.intro-copy{grid-column:1}
  .group-head{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .tray{flex-wrap:wrap;gap:12px}
  footer{grid-template-columns:1fr}footer span:nth-child(2),footer a{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal]{transform:none;transition:none}
  .card,.shot img{transition:none}
}