/* Shared design tokens and base reset. Used by the portfolio and the blog,
   so the two can never drift apart. 5 brand values, everything else derived. */

:root {
  --paper:#FCF9F3; --ink:#2C3E50; --strong:#1A253A; --muted:#59524B; --quiet:#59524B;
  --edge:#CFC6B9; --rule:#E7E0D4; --sunk:#F8F4EC;
  --accent:#6E3E29; --accent-h:#55301F; --accent-lg:#A35C3D; --tint:#F9F1EA; --accent-edge:#D8BCAB;
  --sky:#EAF0F6; --sky-ink:#2C3E50; --sky-edge:#C3D2E0;
  --band:#1A253A; --on-band:#FCF9F3; --on-band-a:#CA8668;
  --shadow:rgba(26,37,58,.13);
  --r:10px;
  --sans:"Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --disp:"Fraunces", Georgia, "Times New Roman", serif;
  /* Fraunces is variable. SOFT rounds the terminals, WONK swaps in the
     playful alternates. This is the whole "playful yet professional" dial. */
  --disp-vf:"SOFT" 40, "WONK" 1;
  --wrap:76rem; --pad:clamp(1.25rem, 4vw, 3.75rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#16202D; --ink:#FCF9F3; --strong:#E6E1D8; --muted:#B7B0A6; --quiet:#B7B0A6;
    --edge:#3A4653; --rule:#26303D; --sunk:#18212D;
    --accent:#D39F88; --accent-h:#DFBAAA; --accent-lg:#CA8668; --tint:#271F18; --accent-edge:#6E4A38;
    --sky:#121E30; --sky-ink:#9DBEDA; --sky-edge:#33465A;
    --band:#1A253A; --on-band:#FCF9F3; --on-band-a:#CA8668;
    --shadow:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
--paper:#16202D; --ink:#FCF9F3; --strong:#E6E1D8; --muted:#B7B0A6; --quiet:#B7B0A6;
  --edge:#3A4653; --rule:#26303D; --sunk:#18212D;
  --accent:#D39F88; --accent-h:#DFBAAA; --accent-lg:#CA8668; --tint:#271F18; --accent-edge:#6E4A38;
  --sky:#121E30; --sky-ink:#9DBEDA; --sky-edge:#33465A;
  --band:#1A253A; --on-band:#FCF9F3; --on-band-a:#CA8668;
  --shadow:rgba(0,0,0,.45);
}

*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
       font-size:16px; line-height:1.55; text-rendering:optimizeLegibility; }
img { max-width:100%; display:block; }
h1,h2,h3,p,ul,ol { margin:0; }
ul { list-style:none; padding:0; }
a { color:var(--accent); text-underline-offset:2px; }
a:hover { color:var(--accent-h); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:3px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:20; background:var(--paper); color:var(--ink);
              padding:.7rem 1.1rem; border-radius:8px; box-shadow:0 4px 20px var(--shadow); }
.h2 { font-family:var(--disp); font-variation-settings:var(--disp-vf); font-weight:800; letter-spacing:-.025em; font-size:clamp(1.25rem,2.4vw,1.5rem); }