/* Upla's shared look (one file, linked by every Upla page so the chrome never drifts): colours, type, the header brand.
   Colours (2026-10-16, Scott: "go with the orange"): signal orange #ff5b1f for the mark, #c43d0b for text and buttons,
   a navy dot. Light first; dark follows the system. */
:root{
  --bg:#f5f7fb; --paper:#ffffff; --ink:#131b2b; --muted:#5d6779; --line:#dde3ee; --soft:#edf1f8;
  --u:#ff5b1f; --u-ink:#c43d0b; --btn:#c43d0b; --dot:#14213d; --fall:#14213d; --glow:#ff9a6b; --ok:#0f8a5f; --ok-soft:#e1f5ec; --drop:#c2412d; --drop-soft:#fdecea;
  --display:"Inter Tight","Helvetica Neue",Arial,sans-serif; --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0e1320; --paper:#161d2e; --ink:#e8edf7; --muted:#9aa5ba; --line:#28324a; --soft:#1d2539;
  --u:#ff6a33; --u-ink:#ff8a5c; --btn:#d9480f; --dot:#14213d; --fall:#f5f7fb; --glow:#ff7a45; --ok:#4fd39c; --ok-soft:#173528; --drop:#ff8a75; --drop-soft:#3a1d18; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--body)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:22px 56px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:clamp(20px,5vw,48px)}
.brand{display:flex;align-items:center;gap:10px;font:900 26px/1 var(--display);letter-spacing:-.045em;color:var(--ink);text-decoration:none}
.brand svg{width:34px;height:34px;flex:none}
.brand small{font:500 14px var(--body);letter-spacing:0;color:var(--muted);margin-left:4px}
footer{margin-top:44px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer b{color:var(--ink)}