/* Upzilla design v3 — the part every page shares: colours, type, buttons, nav, mobile menu, footer.
   Every page links this file after its own <style> (redesign-src/v3.py puts the link in), so a rule
   here wins over the page's own copy of the same selector. Page parts live in pages.css (inner pages)
   and in the homepage's own <style>. Change the look of the whole site here. */

/* ---------------------------------------------------------------- tokens */
:root{
  --paper:#F4F2EC; --paper-2:#EAE7DD; --card:#FFFFFF; --ink:#121212; --ink-soft:#4F4C45; --ink-faint:#6B675D;
  --line:#DCD8CB; --night:#0B0C0E; --night-2:#16181C; --night-line:#2A2D33; --night-soft:#9AA0AA;
  --yellow:#FFC21A; --yellow-2:#FFD65C; --yellow-deep:#C98F00; --yellow-tint:#FFF3CC;
  --up:#1F9D55; --up-ink:#136B32; --up-bg:#E3F4E8;
  --watch:#E8A400; --watch-ink:#7A4E00; --watch-bg:#FFF1CC;
  --down:#D6362B; --down-ink:#A8221A; --down-bg:#FBE4E1;
  /* v2 drew links and highlights in blue; v3 draws them in ink with a yellow underline */
  --accent:var(--ink); --accent-ink:var(--yellow-tint); --r:14px;
  /* the content width of the wide pages, the same as the nav's (.wrap-nav) */
  --wrap-wide:1200px;
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.55;}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px;}
::selection{background:var(--yellow);color:var(--ink);}
.hl{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%);padding:0 .06em;}

/* ---------------------------------------------------------------- buttons */
.btn{font-family:'IBM Plex Sans',sans-serif;font-size:14px;border-radius:999px;font-weight:600;padding:10px 20px;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;}
.btn-ghost,.btn-ghost-nav{background:transparent;border-color:transparent;}
.btn-ghost:hover,.btn-ghost-nav:hover{border-color:var(--ink);}
.btn-primary{background:var(--yellow);color:var(--ink);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink);}
.btn-primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
/* on dark blocks: yellow, with a deep-yellow shadow instead of an ink one */
.btn-inv{background:var(--yellow);color:var(--ink);border:1.5px solid var(--yellow);box-shadow:3px 3px 0 var(--yellow-deep);}
.btn-inv:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--yellow-deep);}
@media (prefers-reduced-motion:reduce){.btn{transition:none;}}

/* ---------------------------------------------------------------- nav */
nav{background:var(--paper);border-bottom:1px solid var(--line);}
.wrap-nav{max-width:var(--wrap-wide);}
/* top and bottom only: the side gutters are .wrap-nav's, the same as the content's */
.nav-row{padding-top:16px;padding-bottom:16px;}
.logo svg{width:112px;}
.mega-trigger,.mega-plain{font-weight:500;border-radius:999px;padding:9px 14px;}
.mega-trigger:hover,.mega-trigger.active{background:var(--paper-2);}
.mega-panel{background:var(--card);}
.mega-col a.mlink:hover,.mt-group a.mt-link:hover,.mt-group h4 a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px;}
.mt-head a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px;}
.mega-col .mlink .tag-soon,.mobile-panel .msub a .tag-soon,.mobile-panel .msub .soon-m .tag-soon,.mega-col .mlink.soon .tag-soon{background:var(--watch-bg);color:var(--watch-ink);}
.mega-featured{background:var(--yellow-tint);border:1.5px solid var(--ink);border-radius:16px;}
.nav-toggle,.mobile-close{border-radius:999px;border-color:var(--ink);}
.mobile-panel-head .logo svg{width:100px;}
@media (max-width:600px){.wrap-nav{padding-left:16px;padding-right:16px;}.logo svg{width:96px;}}

/* ---------------------------------------------------------------- footer */
footer.site-footer{background:var(--night);color:var(--night-soft);}
.sf-brand .logo svg{width:132px;}
.sf-brand .btn{background:var(--yellow);color:var(--ink);border-color:var(--yellow);box-shadow:none;}
.sf-col a{color:#D7DAE0;}
.sf-col a:hover{color:#fff;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px;}
.sf-mid,.sf-bottom{border-top-color:var(--night-line);}
.sf-mid,.sf-brand p{color:var(--night-soft);}
.sf-bottom{color:#7F8590;}