/* ============================================================
   PENROSE / TESSRA — Shared internal hub design tokens.
   Nothing-Inspired Grid: off-white canvas + brutal black ink.
   Used by: index.html, viewer.html, penrose/versions/index.html
   ============================================================ */

:root{
  --canvas:#f4f2ec;
  --canvas-warm:#ebe8df;
  --ink:#111111;
  --ink-muted:#666666;
  --ink-soft:#8a8a8a;
  --inverse-canvas:#0b0b0b;
  --inverse-ink:#ffffff;
  --surface-1:#e8e5dc;
  --surface-2:#dedacf;
  --surface-dark:#171717;
  --hairline:rgba(0,0,0,0.16);
  --hairline-strong:rgba(0,0,0,0.32);
  --ghost:rgba(0,0,0,0.04);
  --accent-red:#ff3b30;
  --accent-green:#49f7a5;
  --accent-green-ink:#0a8a4a;
  --accent-amber:#f2c200;

  --maxw:1280px;
  --margin:clamp(16px,3vw,48px);

  --font-display:"Space Grotesk","Arial",sans-serif;
  --font-body:"Inter","Arial",sans-serif;
  --font-mono:"IBM Plex Mono","Space Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.45;min-height:100vh}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--canvas)}

/* film grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky;top:0;z-index:100;background:var(--canvas);
  display:flex;align-items:center;justify-content:space-between;height:64px;
  border-bottom:1px solid var(--hairline);margin-bottom:56px;
  padding:0 var(--margin);
}
.topbar .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.topbar .brand canvas{width:32px;height:32px;flex:none;display:block}
.topbar .title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.topbar .title .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-green);margin-right:8px;vertical-align:1px}
.topbar nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.topbar nav a{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);padding:6px 12px;border-radius:999px;transition:color .15s, background .15s;white-space:nowrap}
.topbar nav a:hover{color:var(--ink);background:var(--ghost)}
.topbar nav a.cta{color:var(--ink);border:1px solid var(--hairline-strong)}
.topbar nav a.cta:hover{background:var(--ink);color:var(--canvas)}
.topbar nav a.green{color:var(--accent-green-ink)}
.topbar nav a.green:hover{background:rgba(73,247,165,.18)}
@media (max-width:760px){
  .topbar nav a.hide-sm{display:none}
}

/* ============ PILLS ============ */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--hairline-strong);background:var(--canvas);color:var(--ink);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.pill.current{background:var(--accent-green-ink);color:var(--inverse-ink);border-color:var(--accent-green-ink);font-weight:600}
.pill.current::before{background:var(--inverse-canvas)}
.pill.mirror{color:var(--ink-muted);border-color:var(--hairline-strong)}
.pill.mirror::before{background:var(--ink-soft)}
.pill.lab{color:var(--ink-muted);border-color:var(--hairline)}
.pill.lab::before{background:var(--ink-muted)}
.pill.live::before{background:var(--accent-green)}
.pill.store{border-color:var(--accent-green-ink);color:var(--accent-green-ink)}
.pill.store::before{background:var(--accent-green-ink)}
.pill.frozen{color:var(--ink-muted)}
.pill.frozen::before{background:var(--ink-muted)}
.pill.wip{border-color:var(--accent-amber);color:#a98300}
.pill.wip::before{background:var(--accent-amber)}
.pill.planned{color:var(--ink-soft);border-style:dashed}
.pill.planned::before{background:transparent;border:1px dashed var(--ink-soft)}

/* ============ SECTION ============ */
.section{margin-bottom:96px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:0}
.section-head h2{font-family:var(--font-display);font-weight:500;font-size:28px;letter-spacing:-.02em}
.section-head .idx{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.section-head .desc{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-muted);text-align:right;max-width:380px;text-transform:none;line-height:1.45}

/* ============ FOOTER ============ */
.footer-hub{margin-top:96px;background:var(--inverse-canvas);color:var(--inverse-ink);padding:48px var(--margin) 36px;overflow:hidden}
.footer-hub .foot-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
@media (max-width:760px){.footer-hub .foot-inner{grid-template-columns:1fr;gap:32px}}
.footer-hub .studio{display:flex;flex-direction:column;gap:16px;min-width:0}
.footer-hub .studio img{width:180px;height:auto;filter:invert(1) brightness(1.1);image-rendering:-webkit-optimize-contrast}
.footer-hub .studio .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a;max-width:340px;line-height:1.5}
.footer-hub .studio .tag strong{color:var(--inverse-ink);font-weight:500}
.footer-hub .meta-foot{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a;text-align:right;min-width:0}
.footer-hub .meta-foot .r{display:block;margin-bottom:6px}
.footer-hub .meta-foot a{color:#cfcfcf;transition:color .15s}
.footer-hub .meta-foot a:hover{color:var(--inverse-ink)}
.footer-hub .meta-foot .sep{opacity:.4;margin:0 6px}