/* ==========================================================================
   Nest design tokens · v0.1
   Colour follows the visitor's system setting. Force a theme on any subtree
   with data-theme="light|dark"; density with data-density="compact|comfortable|spacious".
   ========================================================================== */

/* ---- Fonts: self-hosted only. The @font-face rules live in fonts.css.
   All four are SIL Open Font License. local() first, then the bundled file. ---- */

:root{
  color-scheme:light dark;

  /* ---- Families ---- */
  --font-display:"Nest Display","Newsreader",Georgia,"Times New Roman",serif;
  --font-text:"Nest Text","Literata",Georgia,serif;
  --font-ui:"Nest UI","Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Nest Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* ---- Admin type scale (fixed px, ratio ~1.2, base 15) ---- */
  --ui-xs:12px; --ui-sm:13px; --ui-base:15px; --ui-md:17px; --ui-lg:20px; --ui-xl:24px; --ui-2xl:30px; --ui-3xl:38px;
  --ui-display:400 38px/1.1 var(--font-display);
  --ui-h1:450 30px/1.15 var(--font-display);
  --ui-h2:500 24px/1.2 var(--font-display);
  --ui-h3:600 17px/1.3 var(--font-ui);
  --ui-cap:600 14px/1.25 var(--font-ui);
  --ui-body:400 15px/1.5 var(--font-ui);
  --ui-strong:600 15px/1.5 var(--font-ui);
  --ui-label:600 13px/1.3 var(--font-ui);
  --ui-small:400 13px/1.45 var(--font-ui);
  --ui-micro:600 12px/1.3 var(--font-ui);
  --ui-mono:400 13px/1.5 var(--font-mono);
  --ui-num:500 30px/1 var(--font-display);

  /* ---- Published-post type scale (fluid, ratio ~1.25, base 19) ---- */
  --p-body:400 clamp(18px, 17px + .25vw, 20px)/1.65 var(--font-text);
  --p-lead:400 clamp(20px, 18px + .5vw, 24px)/1.5 var(--font-text);
  --p-title:420 clamp(38px, 28px + 2.8vw, 64px)/1.04 var(--font-display);
  --p-h2:450 clamp(28px, 23px + 1.2vw, 38px)/1.14 var(--font-display);
  --p-h3:550 clamp(22px, 20px + .5vw, 26px)/1.25 var(--font-display);
  --p-h4:650 18px/1.35 var(--font-ui);
  --p-quote:italic 400 clamp(24px, 21px + .8vw, 31px)/1.32 var(--font-display);
  --p-caption:italic 400 15px/1.45 var(--font-text);
  --p-meta:600 13px/1.3 var(--font-ui);            /* pair with letter-spacing:.06em; uppercase */
  --p-small:400 15px/1.5 var(--font-ui);
  --p-code:400 15px/1.6 var(--font-mono);
  --p-num:400 clamp(44px, 36px + 2vw, 64px)/1 var(--font-display);
  --measure:66ch;          /* reading column */
  --content-w:680px; --wide-w:1040px; --full-w:100vw;

  /* ---- Space (4px base) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* ---- Radius: small, bookish ---- */
  --r-1:3px; --r-2:6px; --r-3:10px; --r-pill:999px;

  /* ---- Motion: quiet ---- */
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-count:1400ms;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.45,0,.2,1);

  /* ---- Density (comfortable default) ---- */
  --ctl-h:40px; --cap-h:44px; --row-h:52px; --pad-x:16px; --pad-y:14px; --gap:16px;
  --hit:24px;              /* minimum target on mouse; 44px on touch (below) */
  --z-sheet:100; --z-toast:1000; --z-tip:1100;
}
[data-density="compact"]{--ctl-h:32px;--cap-h:36px;--row-h:40px;--pad-x:12px;--pad-y:10px;--gap:12px}
[data-density="spacious"]{--ctl-h:48px;--cap-h:52px;--row-h:64px;--pad-x:24px;--pad-y:20px;--gap:24px}
@media (pointer:coarse){:root{--hit:44px}}

/* ---- Colour · light ---- */
:root,[data-theme="light"]{
  --bg:oklch(0.975 0.008 85);  --surface:oklch(0.993 0.004 85); --sunken:oklch(0.955 0.010 85);
  --cap:oklch(0.940 0.013 82); --line:oklch(0.865 0.012 80);    --line-strong:oklch(0.620 0.014 75);
  --ink:oklch(0.240 0.014 60); --ink-2:oklch(0.460 0.014 65);   --ink-3:oklch(0.600 0.012 70); /* ink-3: icons & disabled only, not text */
  --accent:oklch(0.460 0.080 195); --accent-hover:oklch(0.400 0.080 195); --on-accent:oklch(0.990 0.004 85);
  --accent-soft:oklch(0.935 0.030 195); --accent-text:oklch(0.430 0.080 195); --icon-fill:oklch(0.820 0.070 195);
  --focus:oklch(0.520 0.160 255); --highlight:oklch(0.910 0.090 92);
  --ok:oklch(0.520 0.110 150);  --ok-soft:oklch(0.945 0.035 150);  --ok-ink:oklch(0.380 0.080 150);  --ok-line:oklch(0.780 0.070 150);  --ok-fill:oklch(0.820 0.100 150);
  --warn:oklch(0.640 0.130 70); --warn-soft:oklch(0.950 0.045 85); --warn-ink:oklch(0.420 0.090 60); --warn-line:oklch(0.800 0.090 75); --warn-fill:oklch(0.860 0.120 82);
  --err:oklch(0.520 0.160 27);  --err-soft:oklch(0.945 0.030 25);  --err-ink:oklch(0.420 0.130 27);  --err-line:oklch(0.780 0.080 25);  --err-fill:oklch(0.800 0.100 25);
  --info:oklch(0.520 0.100 250);--info-soft:oklch(0.945 0.025 250);--info-ink:oklch(0.400 0.090 250);--info-line:oklch(0.780 0.060 250);--info-fill:oklch(0.820 0.070 250);
  --scrim:oklch(0.200 0.010 60 / .42);
  --media-scrim:linear-gradient(to top, oklch(0.16 0.01 60 / .78), oklch(0.16 0.01 60 / .15) 70%);
  --shadow-1:0 1px 2px oklch(0.30 0.02 60 / .08);
  --shadow-2:0 1px 3px oklch(0.30 0.02 60 / .08), 0 12px 32px -10px oklch(0.30 0.02 60 / .22);
  --shadow-3:0 2px 6px oklch(0.30 0.02 60 / .12), 0 24px 60px -16px oklch(0.30 0.02 60 / .35);
  --ph:repeating-linear-gradient(135deg, oklch(0.925 0.012 80) 0 7px, oklch(0.950 0.009 80) 7px 14px);
  --code-bg:oklch(0.955 0.010 85); --code-kw:oklch(0.450 0.110 300); --code-str:oklch(0.440 0.090 150); --code-com:oklch(0.500 0.012 70); --code-var:oklch(0.440 0.090 30);
}

/* ---- Colour · dark ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:oklch(0.195 0.008 60); --surface:oklch(0.228 0.009 60); --sunken:oklch(0.170 0.008 60);
    --cap:oklch(0.268 0.010 62); --line:oklch(0.335 0.010 62); --line-strong:oklch(0.540 0.012 65);
    --ink:oklch(0.930 0.010 85); --ink-2:oklch(0.760 0.012 80); --ink-3:oklch(0.580 0.010 75);
    --accent:oklch(0.770 0.080 195); --accent-hover:oklch(0.830 0.080 195); --on-accent:oklch(0.200 0.010 60);
    --accent-soft:oklch(0.300 0.040 195); --accent-text:oklch(0.790 0.080 195); --icon-fill:oklch(0.470 0.070 195);
    --focus:oklch(0.760 0.130 255); --highlight:oklch(0.460 0.080 88);
    --ok:oklch(0.740 0.120 150);  --ok-soft:oklch(0.280 0.040 150);  --ok-ink:oklch(0.860 0.090 150);  --ok-line:oklch(0.460 0.070 150);  --ok-fill:oklch(0.520 0.100 150);
    --warn:oklch(0.810 0.120 80); --warn-soft:oklch(0.300 0.045 75); --warn-ink:oklch(0.890 0.090 85); --warn-line:oklch(0.510 0.080 75); --warn-fill:oklch(0.620 0.110 78);
    --err:oklch(0.720 0.150 27);  --err-soft:oklch(0.290 0.050 25);  --err-ink:oklch(0.870 0.080 25);  --err-line:oklch(0.490 0.100 25);  --err-fill:oklch(0.540 0.130 27);
    --info:oklch(0.740 0.100 250);--info-soft:oklch(0.280 0.040 250);--info-ink:oklch(0.870 0.060 250);--info-line:oklch(0.470 0.070 250);--info-fill:oklch(0.520 0.090 250);
    --scrim:oklch(0.100 0.010 60 / .6);
    --shadow-1:0 1px 2px oklch(0 0 0 / .3);
    --shadow-2:0 1px 3px oklch(0 0 0 / .3), 0 12px 32px -10px oklch(0 0 0 / .55);
    --shadow-3:0 2px 6px oklch(0 0 0 / .35), 0 24px 60px -16px oklch(0 0 0 / .7);
    --ph:repeating-linear-gradient(135deg, oklch(0.255 0.010 62) 0 7px, oklch(0.235 0.009 62) 7px 14px);
    --code-bg:oklch(0.170 0.008 60); --code-kw:oklch(0.790 0.090 300); --code-str:oklch(0.800 0.090 150); --code-com:oklch(0.640 0.012 70); --code-var:oklch(0.800 0.090 40);
  }
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:oklch(0.195 0.008 60); --surface:oklch(0.228 0.009 60); --sunken:oklch(0.170 0.008 60);
  --cap:oklch(0.268 0.010 62); --line:oklch(0.335 0.010 62); --line-strong:oklch(0.540 0.012 65);
  --ink:oklch(0.930 0.010 85); --ink-2:oklch(0.760 0.012 80); --ink-3:oklch(0.580 0.010 75);
  --accent:oklch(0.770 0.080 195); --accent-hover:oklch(0.830 0.080 195); --on-accent:oklch(0.200 0.010 60);
  --accent-soft:oklch(0.300 0.040 195); --accent-text:oklch(0.790 0.080 195); --icon-fill:oklch(0.470 0.070 195);
  --focus:oklch(0.760 0.130 255); --highlight:oklch(0.460 0.080 88);
  --ok:oklch(0.740 0.120 150);  --ok-soft:oklch(0.280 0.040 150);  --ok-ink:oklch(0.860 0.090 150);  --ok-line:oklch(0.460 0.070 150);  --ok-fill:oklch(0.520 0.100 150);
  --warn:oklch(0.810 0.120 80); --warn-soft:oklch(0.300 0.045 75); --warn-ink:oklch(0.890 0.090 85); --warn-line:oklch(0.510 0.080 75); --warn-fill:oklch(0.620 0.110 78);
  --err:oklch(0.720 0.150 27);  --err-soft:oklch(0.290 0.050 25);  --err-ink:oklch(0.870 0.080 25);  --err-line:oklch(0.490 0.100 25);  --err-fill:oklch(0.540 0.130 27);
  --info:oklch(0.740 0.100 250);--info-soft:oklch(0.280 0.040 250);--info-ink:oklch(0.870 0.060 250);--info-line:oklch(0.470 0.070 250);--info-fill:oklch(0.520 0.090 250);
  --scrim:oklch(0.100 0.010 60 / .6);
  --shadow-1:0 1px 2px oklch(0 0 0 / .3);
  --shadow-2:0 1px 3px oklch(0 0 0 / .3), 0 12px 32px -10px oklch(0 0 0 / .55);
  --shadow-3:0 2px 6px oklch(0 0 0 / .35), 0 24px 60px -16px oklch(0 0 0 / .7);
  --ph:repeating-linear-gradient(135deg, oklch(0.255 0.010 62) 0 7px, oklch(0.235 0.009 62) 7px 14px);
  --code-bg:oklch(0.170 0.008 60); --code-kw:oklch(0.790 0.090 300); --code-str:oklch(0.800 0.090 150); --code-com:oklch(0.640 0.012 70); --code-var:oklch(0.800 0.090 40);
}
[data-theme="light"]{color-scheme:light}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--ui-body);-webkit-font-smoothing:antialiased;font-kerning:normal}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--ink);text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--highlight);color:var(--ink)}
button,input,select,textarea{font:inherit;color:inherit}
:lang(es){quotes:"«" "»" "“" "”"}
@media (prefers-reduced-motion:reduce){
  :root{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-count:1ms}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}