/* tlvphoto — shared design tokens (from the Claude Design handoff, verbatim values) */
:root{
  --bg:#0c0b0a; --bg-deep:#080807; --bg-deeper:#050504; --panel:#100f0d; --panel-warm:#16150f;
  --ink:#efece6; --ink-2:#f2efe9; --ink-3:#e9e5dd;
  --body:#c9c4bc; --body-2:#b8b3ab;
  --muted:#9a948b; --muted-2:#8d877f; --muted-3:#8a857d;
  --faint:#6b665f; --faint-2:#56514b; --faint-3:#4a4640;
  --accent:#c96442; --accent-2:#b8542f;
  --paper:#f4f1e8;
  --hair:rgba(255,255,255,.12); --hair-soft:rgba(255,255,255,.09); --hair-strong:rgba(255,255,255,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ui:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --serif:'Newsreader',Georgia,serif;
  --ground:12,11,10;               /* reactive shadow ground, mutated per focused frame */
}
*{box-sizing:border-box}
html,body{margin:0}
body{ background:rgb(var(--ground)); color:var(--ink); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; transition:background 1.7s var(--ease); }
img{display:block}
a{color:inherit}
.wordmark{ font-family:var(--ui); font-weight:200; letter-spacing:.4em; text-transform:uppercase }
.meta{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
.serif{ font-family:var(--serif); font-weight:300 }
.accent{ color:var(--accent) }
/* layout switcher chrome shared by every page */
.navbadge{ position:fixed; top:14px; right:16px; z-index:1000; display:flex; gap:8px; align-items:center }
.navbadge .name{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2) }
.navbadge select{ background:rgba(16,15,13,.82); color:var(--ink); border:1px solid var(--hair);
  border-radius:2px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 8px; backdrop-filter:blur(8px); cursor:pointer }
.pilotnote{ position:fixed; bottom:12px; left:16px; z-index:1000; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint) }
