/* site.css — the one palette both rooms share. Divergence is structural if each page
   hardcodes its own :root; this file is the single source, so it cannot happen twice.
   LIGHT chrome, DARK objects: the page is a warm light paper so long prose reads, and the
   pieces are presented as dark framed objects on it (dark card, dark attractor stage) —
   additive-light attractors glow on a near-black stage and wash out on light, so the
   stage stays dark while the reading surface is light. The pair is the law: warm = the
   human hand, cool (turquoise) = the machine hand; turquoise is the action colour. */
:root{
  /* light chrome (page, prose, hairlines) */
  --paper:#f8f6f1; --ink:#23201b; --dim:#6f685c; --faint:#a79f8f; --line:#e7e2d8;
  /* dark objects (piece cards + attractor stages) carry their own light-on-dark text */
  --surface:#12161d; --stage:#05070a;
  --card-ink:#e9ede8; --card-dim:#9aa7a3; --card-faint:#66756f; --card-line:#273039;
  /* the pair — warm reads on light, cool has a light-page value and a bright on-dark value */
  --warm:#c65f43; --warm-d:#a84a2c; --cool:#128a79; --cool-d:#0c6f60; --cool-bright:#3fd3c0; --on-cool:#04241f;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
     font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--cool);text-decoration:none;border-bottom:1px solid rgba(18,138,121,.30)}
a:hover{color:var(--cool-d);border-bottom-color:var(--cool-d)}

/* --- shared chrome: the nav bar both rooms carry (like nemtar's header partial) --- */
.site{max-width:760px;margin:0 auto;padding:20px 22px 0;display:flex;align-items:center;
      justify-content:space-between;gap:16px;flex-wrap:wrap}
.site .brand{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink);border:0;
             display:inline-flex;align-items:baseline;gap:.02em}
.site .brand:hover{color:var(--ink)}
.site .brand .dots{display:inline-flex;flex-direction:column;gap:.09em;transform:translateY(-.42em);margin:0 .04em}
.site .brand .dots i{width:.14em;height:.14em;border-radius:50%}
.site .brand .dots .w{background:var(--warm)} .site .brand .dots .c{background:var(--cool)}
.site nav{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--sans);font-size:13.5px}
.site nav a{color:var(--dim);border:0}
.site nav a:hover{color:var(--cool)}

/* --- shared listing components: the pieces are DARK framed objects on the light page --- */
h1{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-.015em;line-height:1.05;margin:0 0 10px}
.lead{color:var(--dim);max-width:60ch;font-size:16px;margin:0 0 10px}
.piece{display:block;text-decoration:none;color:var(--card-ink);border:1px solid var(--card-line);border-radius:14px;
       padding:18px 20px;margin:0 0 14px;background:var(--surface);transition:border-color .18s,transform .08s}
.piece:hover{border-color:var(--cool-bright);transform:translateY(-1px)}
.piece .no{font-family:var(--mono);font-size:12px;color:var(--card-faint);letter-spacing:.06em}
.piece h3{font-family:var(--disp);margin:6px 0 6px;font-size:19px;font-weight:600;color:var(--card-ink)}
.piece p{margin:0 0 12px;color:var(--card-dim);font-size:14px}
.piece .who{font-family:var(--mono);font-size:12px;color:var(--card-faint)}
.piece .who b{color:var(--card-ink);font-weight:500}
.row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px}
.run{background:var(--cool-bright);color:var(--on-cool)} .src{border:1px solid var(--card-line);color:var(--card-dim)}
footer{font-family:var(--mono);margin-top:52px;padding-top:18px;border-top:1px solid var(--line);
       color:var(--faint);font-size:12.5px}