/* ============================================================
   ILANS.NET / WRITING - shared editorial system
   Type: Instrument Serif (display) · Inter (body) · JetBrains Mono (meta)
   ============================================================ */

:root{
  --bg:#0b0b0d; --bg-elev:#121215; --bg-card:#131318; --bg-card-hi:#17171d;
  --ink:#ededea; --ink-muted:#a0a0a8; --ink-dim:#80808a;
  --accent:#8a7bff; --accent-ink:#b9afff; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --line:#1f1f24; --line-strong:#2e2e35; --radius:14px;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ink-strong:#fff;
  --sel-bg:rgba(138,123,255,.28); --sel-ink:#fff;
  --nav-bg:rgba(11,11,13,.72);
  --chip-on-ink:#0b0b0d;
  --featured-bg:linear-gradient(160deg,#16161d 0%,#131318 55%);
  --ambient:radial-gradient(60% 55% at 50% 0%, rgba(138,123,255,.10), rgba(138,123,255,0) 70%);
  --row-hi:rgba(74,222,128,.05);
  --card-shadow:none; --card-shadow-hi:none;
  --accent-wash:rgba(138,123,255,.08); --accent-line:rgba(138,123,255,.32);
  --accent-glow:rgba(138,123,255,.6);
  --progress-fill:linear-gradient(90deg,var(--accent),#c9a7ff);
}

/* ============================================================
   LIGHT THEME - warm paper, re-tokenized to match ilans.net
   ============================================================ */
html[data-theme="light"]{
  --bg:#faf9f7; --bg-elev:#f1f0ed; --bg-card:#f4f3f0; --bg-card-hi:#efeeea;
  --ink:#17171c; --ink-muted:#54545e; --ink-dim:#7c7c86;
  --accent:#5b4de0; --accent-ink:#4d3ed1; --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --line:#e7e5e0; --line-strong:#d6d4cd;
  --ink-strong:#000;
  --sel-bg:rgba(91,77,224,.18); --sel-ink:#17171c;
  --nav-bg:rgba(250,249,247,.82);
  --chip-on-ink:#faf9f7;
  --featured-bg:linear-gradient(160deg,#f7f5ff 0%,#f4f3f0 55%);
  --ambient:radial-gradient(60% 55% at 50% 0%, rgba(91,77,224,.07), rgba(91,77,224,0) 70%);
  --row-hi:rgba(21,128,61,.07);
  --card-shadow:0 1px 2px rgba(23,23,28,.04); --card-shadow-hi:0 18px 44px rgba(23,23,28,.10);
  --accent-wash:rgba(91,77,224,.07); --accent-line:rgba(91,77,224,.28);
  --accent-glow:rgba(91,77,224,.45);
  --progress-fill:linear-gradient(90deg,var(--accent),#8a7bff);
}
html[data-theme="light"] a:hover{color:#3527ad}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--sel-bg); color:var(--sel-ink)}
a{color:var(--accent-ink); text-decoration:none; transition:color .2s var(--ease)}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
img{max-width:100%; height:auto}

/* ambient glow, cheap and static */
body::before{
  content:""; position:fixed; inset:-30vh 0 auto 0; height:80vh; z-index:0; pointer-events:none;
  background:var(--ambient);
}
body > *{position:relative; z-index:1}

.wrap{max-width:760px; margin:0 auto; padding:0 24px}
.wrap-wide{max-width:980px; margin:0 auto; padding:0 24px}


/* ============================================================
   PER-POST COLOUR
   Each post owns a hue that runs from the index row through the
   whole article: eyebrow, italics, rules, tags, progress bar.
   --c falls back to the site violet so nothing can render unstyled.
   ============================================================ */
:root{ --c:var(--accent); }
.c-amber  { --c:#f0a33c; }
.c-green  { --c:#34d399; }
.c-teal   { --c:#22d3ee; }
.c-coral  { --c:#fb7185; }
.c-lime   { --c:#a3e635; }
.c-violet { --c:#8a7bff; }
/* the dark-surface hues are too light to read on warm paper */
html[data-theme="light"] .c-amber  { --c:#a35f00; }
html[data-theme="light"] .c-green  { --c:#047857; }
html[data-theme="light"] .c-teal   { --c:#0e7490; }
html[data-theme="light"] .c-coral  { --c:#be123c; }
html[data-theme="light"] .c-lime   { --c:#4d7c0f; }
html[data-theme="light"] .c-violet { --c:#5b4de0; }

/* ---------- nav ---------- */
nav.top{
  position:sticky; top:0; z-index:20;
  background:var(--nav-bg); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
nav.top .wrap,nav.top .wrap-wide{display:flex; align-items:center; justify-content:space-between; height:60px}
.logo{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink); text-transform:uppercase}
.logo:hover{text-decoration:none; color:var(--ink-strong)}
.logo span{color:var(--accent)}
.back{font-family:var(--mono); font-size:12px; color:var(--ink-muted); display:inline-flex; gap:7px; align-items:center}
.back:hover{color:var(--ink); text-decoration:none}
.back svg{transition:transform .25s var(--ease)}
.back:hover svg{transform:translateX(-3px)}
.nav-right{display:flex; align-items:center; gap:14px}
.theme-toggle{
  background:none; border:1px solid var(--line-strong); border-radius:8px;
  width:38px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-muted); cursor:pointer; flex-shrink:0;
  transition:color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover{color:var(--ink); border-color:var(--ink-dim); background:var(--bg-card)}
.theme-toggle svg{width:16px; height:16px}
.theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:inline}

/* reading progress (article pages) */
#progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:30;
  background:var(--c); box-shadow:0 0 12px color-mix(in srgb, var(--c) 55%, transparent)}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--c)}
h1{font-family:var(--serif); font-weight:400; letter-spacing:-.01em}
h1 em,h2 em{font-style:italic; color:var(--c)}

/* ---------- index hero ---------- */
header.hero{padding:84px 0 40px}
header.hero .eyebrow{margin-bottom:22px}
header.hero h1{font-size:clamp(42px,7vw,68px); line-height:1.03; margin-bottom:18px}
header.hero .sub{font-size:19.5px; color:var(--ink-muted); max-width:58ch}
.hero-meta{display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim)}
.hero-meta b{color:var(--ink); font-weight:500}

/* ---------- filters ---------- */
.filters{display:flex; gap:8px; flex-wrap:wrap; padding:26px 0 8px}
.chip{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); background:transparent; border:1px solid var(--line-strong);
  border-radius:999px; padding:7px 14px; cursor:pointer; transition:all .2s var(--ease);
}
.chip:hover{color:var(--ink); border-color:#3d3d47}
.chip[aria-pressed="true"]{color:var(--chip-on-ink); background:var(--accent-ink); border-color:var(--accent-ink)}

/* ---------- post index (editorial rows, no boxes) ---------- */
.posts{list-style:none; padding:10px 0 0}
.row{
  position:relative; display:grid; grid-template-columns:54px 1fr; gap:18px;
  padding:26px 0; border-bottom:1px solid var(--line); align-items:start;
}
.row:first-child{border-top:1px solid var(--line)}
.row > a.hit{position:absolute; inset:0; z-index:2}
.row > a.hit:hover{text-decoration:none}
.row .n{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--c); padding-top:7px; opacity:.9}
.row .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row .meta b{color:var(--c); font-weight:400}
.row .dot{width:3px; height:3px; border-radius:50%; background:var(--line-strong); flex-shrink:0}
.row h2{font-family:var(--serif); font-weight:400; font-size:clamp(25px,3.6vw,31px); line-height:1.12;
  letter-spacing:-.01em; color:var(--ink); margin-bottom:9px; transition:color .25s var(--ease)}
.row h2 em{font-style:italic; color:var(--c)}
.row:hover h2{color:var(--c)}
.row p.dek{color:var(--ink-muted); font-size:15.5px; line-height:1.62; max-width:62ch}
.row .foot{display:flex; align-items:center; gap:8px; margin-top:15px; flex-wrap:wrap}
.row .arrow{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:7px; transition:color .25s var(--ease), gap .25s var(--ease)}
.row:hover .arrow{color:var(--c); gap:11px}

/* the lead post simply gets more air and a bigger head */
.row.lead{padding:30px 0 32px}
.row.lead h2{font-size:clamp(30px,4.8vw,42px); line-height:1.06}
.row.lead p.dek{font-size:16.5px; max-width:58ch}
.row.lead .flag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 34%, transparent);
  background:color-mix(in srgb, var(--c) 10%, transparent); border-radius:999px; padding:4px 9px}
.row.hidden{display:none}

/* tags take the post's hue */
.tag{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--c); border:1px solid color-mix(in srgb, var(--c) 32%, transparent);
  background:color-mix(in srgb, var(--c) 8%, transparent); border-radius:999px; padding:4px 10px}

.empty{color:var(--ink-dim); font-family:var(--mono); font-size:13px; padding:34px 0}

/* ---------- article ---------- */
header.post-hero{padding:72px 0 8px}
header.post-hero .eyebrow{margin-bottom:22px}
header.post-hero h1{font-size:clamp(38px,6.4vw,60px); line-height:1.06; margin-bottom:20px}
.dek{font-size:20px; color:var(--ink-muted); line-height:1.6; max-width:60ch}
.byline{font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-top:26px; padding-bottom:28px;
  border-bottom:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.byline .tags{display:flex; gap:8px; margin-left:auto; flex-wrap:wrap}

article{padding:40px 0 8px}
article h2{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.15; letter-spacing:-.01em; margin:48px 0 14px}
article h3{font-family:var(--sans); font-weight:600; font-size:18px; letter-spacing:.01em; margin:30px 0 10px; color:var(--ink-strong)}
article p{margin:0 0 22px}
article p + p{margin-top:-4px}
article strong{color:var(--ink-strong); font-weight:600}
article ul,article ol{margin:0 0 22px; padding-left:22px}
article li{margin:0 0 10px}
article li::marker{color:var(--c)}
code{font-family:var(--mono); font-size:.86em; background:var(--bg-elev); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px; color:var(--c); overflow-wrap:anywhere}
pre{background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:26px 0; overflow-x:auto}
pre code{background:none; border:0; padding:0; font-size:13px; line-height:1.7; color:var(--ink-muted); white-space:pre}

.pull{font-family:var(--serif); font-style:italic; font-size:26px; line-height:1.32; color:var(--ink);
  border-left:2px solid var(--c); padding:6px 0 6px 24px; margin:34px 0}
.note{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin:30px 0; font-size:16px; color:var(--ink-muted)}
.note b{color:var(--ink); font-weight:600}
.note.accent{border-color:color-mix(in srgb, var(--c) 30%, transparent); background:color-mix(in srgb, var(--c) 7%, transparent)}

/* number strip */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:30px 0}
.stat{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.stat .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px}
.stat .v{font-family:var(--serif); font-size:30px; line-height:1; color:var(--ink)}
.stat .v.bad{color:var(--bad)} .stat .v.ok{color:var(--ok)} .stat .v.accent{color:var(--c)}
.stat .n{font-size:13px; color:var(--ink-dim); margin-top:8px; line-height:1.5}

/* data table */
.tablewrap{overflow-x:auto; margin:30px 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-card)}
table.data{width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px}
table.data th{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-dim); text-align:left; padding:14px 18px; border-bottom:1px solid var(--line-strong); font-weight:400; white-space:nowrap}
table.data td{padding:13px 18px; border-bottom:1px solid var(--line); color:var(--ink-muted); vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data td.mono{font-family:var(--mono); font-size:13px; color:var(--ink); white-space:nowrap}
table.data td .bad{color:var(--bad)} table.data td .ok{color:var(--ok)}
table.data tr.hi td{background:var(--row-hi)}

/* end matter */
.end{margin:56px 0 0; padding:30px 0 0; border-top:1px solid var(--line)}
.card{display:flex; gap:16px; align-items:center; background:var(--bg-card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; transition:border-color .25s var(--ease)}
.card:hover{border-color:var(--line-strong)}
.card .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:6px}
.card .t{font-family:var(--serif); font-size:22px}
.card a.cta{margin-left:auto; font-family:var(--mono); font-size:13px; border:1px solid var(--line-strong);
  border-radius:999px; padding:9px 16px; color:var(--ink); white-space:nowrap}
.card a.cta:hover{border-color:var(--c); color:var(--c); text-decoration:none}

.morenav{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:26px 0 0}
.morenav a{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; display:block; transition:border-color .25s var(--ease), background .25s var(--ease)}
.morenav a:hover{border-color:var(--line-strong); background:var(--bg-card-hi); text-decoration:none}
.morenav .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px}
.morenav .t{font-family:var(--serif); font-size:19px; line-height:1.24; color:var(--ink)}
.morenav a:hover .t{color:var(--c)}
.morenav a.next{text-align:right}

footer{padding:50px 0 70px; text-align:center; color:var(--ink-dim); font-family:var(--mono); font-size:12px; line-height:1.9}
footer a{color:var(--ink-muted)}

@media (max-width:640px){
  body{font-size:17px}
  .post .body{padding:22px 20px}
  .post.featured .body{padding:26px 22px}
  .card{flex-direction:column; align-items:flex-start; gap:14px}
  .card a.cta{margin-left:0}
  .morenav{grid-template-columns:1fr}
  .morenav a.next{text-align:left}
  .byline .tags{margin-left:0; width:100%}
  header.hero{padding:56px 0 30px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}