@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dmmono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url("../fonts/dmmono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --mat:#9fb0a5;
  --mat-line:rgba(255,255,255,.26);
  --paper:#f6f5f1;
  --paper-2:#e9e7e1;
  --ink:#121722;
  --ink-2:#1d2330;
  --muted:#55605a;
  --muted-on-ink:#aab3ad;
  --accent:#2e46d6;
  --tape:#f2c455;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,56px);
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* aliases used by ported case-page inline styles */
  --char:var(--ink);--gold:var(--accent);--bone-dim:var(--muted);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mat);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* cutting-mat ground, used when WebGL is off and on case pages */
.matbg{background-color:var(--mat);
  background-image:
    linear-gradient(var(--mat-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--mat-line) 1px,transparent 1px);
  background-size:48px 48px}

/* top bar (shared) */
.top{position:fixed;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) var(--gutter) 12px;pointer-events:none}
.top>*{pointer-events:auto}
.brand{font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none;background:var(--paper);padding:7px 14px;border-radius:99px}
.nav{display:flex;gap:2px;background:var(--paper);padding:4px;border-radius:99px;box-shadow:0 6px 24px rgba(18,23,34,.16)}
.nav a{font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;padding:10px 13px;border-radius:99px;transition:background .25s,color .25s}
.nav a:hover,.nav a[aria-current]{background:var(--ink);color:var(--paper)}
@media (max-width:720px){
  .nav a{padding:9px 9px;font-size:10.5px}
  .nav a.hide-s{display:none}
  .brand{font-size:17px;padding:6px 12px}
}

/* page curtain */
.curtain{position:fixed;inset:0;background:var(--accent);z-index:100;pointer-events:none;visibility:hidden}

.lightbox{position:fixed;inset:0;z-index:90;background:rgba(18,23,34,.92);display:grid;place-items:center;padding:56px 16px 16px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:100%;max-width:min(1200px,100%);object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.5)}
.lightbox button{position:absolute;right:16px;top:calc(14px + env(safe-area-inset-top,0px));font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--paper);border:0;padding:11px 14px;border-radius:99px;cursor:pointer}

/* credit line */
.made{margin:0;font:400 13px/1.55 var(--mono);letter-spacing:.02em;max-width:58ch}
.made b{display:inline-block;font-weight:500;letter-spacing:.06em;text-transform:uppercase;background:var(--tape);color:var(--ink);padding:3px 10px;border-radius:99px;margin-right:8px}
.case-made{text-align:center;margin:0 auto;padding:0 var(--gutter) calc(36px + env(safe-area-inset-bottom,0px));color:var(--ink)}