/* DotnetDailyNews — site styles.
   Three voices: headlines in a soft optical-size serif (Fraunces, SOFT 40, served as a fixed instance), everything a
   reader reads in a geometric humanist sans (Manrope), and the machine in monospace (JetBrains Mono: identifiers, tags,
   meta lines, cover tiles).
   Colour is content: only the category tiles and pressed reader states carry hue; chrome is ink on paper.
   Light is default, dark via [data-theme="dark"] or the system preference. */
:root{
  --paper:#f6f5f1; --paper-2:#ecebe5; --paper-3:#e2e1da; --ink:#16161b; --ink-2:#55555e; --ink-3:#8a8a93;
  --rule:#dcdbd4; --rule-2:#c9c8c0;
  --accent:#512bd4; --accent-ink:#ffffff; --accent-soft:#ebe6fa;
  /* the masthead, menus and footer used to be a dark terminal; they now share the paper */
  --term:var(--paper); --term-fg:var(--ink); --term-muted:var(--ink-2); --term-line:var(--rule); --term-hi:var(--paper-2);
  --good:#1e8a5e; --warn:#c47a1c; --bad:#c2403d;
  --hue-kp:#512bd4; --hue-uc:#13867a; --hue-why:#b86e12; --hue-note:#2f6fc4; --hue-tip:#1e8a5e; --hue-warn:#c47a1c; --hue-bad:#c2403d; --box-bg:7%; --box-line:24%;
  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-read:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ink-base:#000; --ink-pct:70%; --tint-pct:13%; --tint-2:26%; --r:8px; --rt:14px; --pill:999px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#101013; --paper-2:#18181d; --paper-3:#222228; --ink:#ecebe6; --ink-2:#b4b4bc; --ink-3:#7e7e88;
  --rule:#2a2a31; --rule-2:#3a3a43;
  --accent:#a48fff; --accent-ink:#16122e; --accent-soft:#2a2250;
  --good:#5fd39e; --warn:#f0a94e; --bad:#f08481;
  --hue-kp:#a48fff; --hue-uc:#4cc9b6; --hue-why:#f0b45a; --hue-note:#7fb0f5; --hue-tip:#5fd39e; --hue-warn:#f0a94e; --hue-bad:#f08481; --box-bg:11%; --box-line:30%;
  --ink-base:#fff; --ink-pct:64%; --tint-pct:20%; --tint-2:34%; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#101013; --paper-2:#18181d; --paper-3:#222228; --ink:#ecebe6; --ink-2:#b4b4bc; --ink-3:#7e7e88;
  --rule:#2a2a31; --rule-2:#3a3a43;
  --accent:#a48fff; --accent-ink:#16122e; --accent-soft:#2a2250;
  --good:#5fd39e; --warn:#f0a94e; --bad:#f08481;
  --hue-kp:#a48fff; --hue-uc:#4cc9b6; --hue-why:#f0b45a; --hue-note:#7fb0f5; --hue-tip:#5fd39e; --hue-warn:#f0a94e; --hue-bad:#f08481; --box-bg:11%; --box-line:30%;
  --ink-base:#fff; --ink-pct:64%; --tint-pct:20%; --tint-2:34%; color-scheme:dark}

*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--ff-read);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body>main{flex:1}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-inline:20px;width:100%}
[hidden]{display:none!important}
button{font:inherit}
::selection{background:color-mix(in oklab,var(--accent) 25%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
svg{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mono,.m,.fine,.n,.tag,.chip,.btn,.rx,.ltab,.tabs,.kpis,.edition,.src,.byline,.pager,.hint{font-family:var(--ff-mono)}

/* masthead: one translucent bar that stays on top, categories on a second row */
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:var(--r);z-index:50;font-family:var(--ff-mono);font-size:.8rem}
.skip:focus{left:8px}
.mast{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--rule);color:var(--ink);font-size:.85rem}
.mast .row1{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.logo .mark svg{display:block}
.logo .word{font-family:var(--ff-read);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;line-height:1}
.logo .word b{font-weight:700;color:var(--accent)}
.logo .beta{font-family:var(--ff-mono);font-size:.62rem;color:var(--ink-3);border:1px solid var(--rule);border-radius:var(--pill);padding:1px 7px;margin-left:2px;font-weight:400}
/* the main nav is one segmented pill: the current page sits on a raised paper tab */
.primary{display:flex;gap:2px;align-items:center;padding:3px;background:var(--paper-2);border-radius:var(--pill);font-size:.86rem}
.primary a{color:var(--ink-2);text-decoration:none;padding:6px 13px;border-radius:var(--pill);white-space:nowrap;font-weight:500;transition:color .15s,background .15s,box-shadow .15s}
.primary a:hover{color:var(--ink)}
.primary a.on{color:var(--ink);background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.search{margin-left:auto;width:min(280px,30vw);min-width:160px;height:36px;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--rule-2);border-radius:var(--pill);padding:0 8px 0 12px;color:var(--ink-3);transition:border-color .15s}
.search:focus-within{border-color:var(--ink-3)}
.search input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);padding:6px 0;font:inherit;font-size:.86rem}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none}
.search kbd{font-family:var(--ff-mono);font-size:.62rem;border:1px solid var(--rule);border-radius:5px;padding:1px 5px;color:var(--ink-3);line-height:1.4}
.tools{display:flex;align-items:center;gap:6px;flex:none}
/* language: a native select dressed as a pill; the chevron sits over the select's right padding */
.lang{position:relative;display:inline-flex;align-items:center;color:var(--ink-2)}
.lang select{appearance:none;-webkit-appearance:none;font-family:var(--ff-mono);font-size:.7rem;font-weight:600;letter-spacing:.02em;color:inherit;background:transparent;border:1px solid var(--rule);border-radius:var(--pill);height:36px;padding:0 26px 0 12px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.lang select:hover{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink)}
.lang select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lang svg{position:absolute;right:10px;pointer-events:none}
.ibtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s;list-style:none}
.ibtn:hover{background:var(--paper-2);border-color:var(--ink-3);color:var(--ink)}
.ibtn::-webkit-details-marker{display:none}
#theme-toggle .i-sun{display:none}
:root[data-theme="dark"] #theme-toggle .i-sun{display:block}
:root[data-theme="dark"] #theme-toggle .i-moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #theme-toggle .i-sun{display:block}:root:not([data-theme="light"]) #theme-toggle .i-moon{display:none}}
.menu{display:none;position:relative}
.menu.user{display:block}
.menu .sheet{position:absolute;right:0;top:44px;width:min(320px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--rule);border-radius:var(--rt);padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 20px 50px -20px rgba(0,0,0,.35);z-index:40}
.menu .sheet a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:var(--r)}
.menu .sheet a:hover{background:var(--paper-2)}
.menu.adm{display:block}
.menu.adm summary{list-style:none;cursor:pointer;color:var(--ink-2);padding:7px 12px;border-radius:var(--pill);display:flex;align-items:center;gap:6px;font-weight:500}
.menu.adm summary::-webkit-details-marker{display:none}
.menu.adm summary:hover,.menu.adm[open] summary{color:var(--ink);background:var(--paper-2)}
.menu.adm summary.on{color:var(--paper);background:var(--ink)}
.menu.adm .sheet{left:0;right:auto;top:40px;width:170px}
.menu .msearch input{width:100%;box-sizing:border-box;background:transparent;border:1px solid var(--rule);border-radius:var(--pill);padding:8px 12px;color:var(--ink);font:inherit;margin-bottom:6px}
.menu .msec{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:10px 10px 4px}
.menu .mcats{display:flex;flex-wrap:wrap;gap:4px;padding:0 4px 4px}
.menu .mcats a{font-size:.76rem;padding:4px 10px;border:1px solid var(--rule);border-radius:var(--pill)}
/* the category row: unboxed links with the category's colour as a dot, the current one on a filled pill */
.row2{display:flex;align-items:center;gap:12px;height:44px;border-top:1px solid var(--rule)}
.cats{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.cats::-webkit-scrollbar{display:none}
.cats a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink-2);font-size:.82rem;font-weight:500;padding:6px 11px;border-radius:var(--pill);white-space:nowrap;flex:none;transition:color .15s,background .15s}
.cats a i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--ink-3))}
.cats a:hover{color:var(--ink);background:var(--paper-2)}
.cats a.on{color:var(--ink);background:var(--paper-2);font-weight:600}
.live{flex:none;display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-3);white-space:nowrap;text-decoration:none;padding:4px 10px 4px 8px;border-radius:var(--pill);border:1px solid var(--rule)}
.live:hover{color:var(--ink);border-color:var(--ink-3)}
.live .lbl{color:var(--ink-2);font-weight:600}
.live i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}
.live i.run{background:var(--warn)}
.live i.bad{background:var(--bad)}

/* page header: a quiet mono line, then one big serif headline */
.ph{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;padding-block:44px 28px}
/* a faint accent glow behind the heading and the day rail; it fades out before the edges of the column */
.ph::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 36% 100% at 72% 0%,color-mix(in oklab,var(--accent) 11%,transparent),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 65%,transparent)}
.ph h1{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.6rem,6vw,4.9rem);line-height:1.02;letter-spacing:-.025em;margin:0;text-wrap:balance}
.ph h1 br{display:none}
.ph h1 span{color:inherit;font-style:normal} /* one face, one colour: no emphasised second word */
.ph h1>span:first-child:has(+br){display:block;font-family:var(--ff-mono);font-style:normal;font-size:.72rem;letter-spacing:.02em;color:var(--ink-3);margin-bottom:12px;line-height:1.3}
/* the date is a pill; on today's edition a green dot pulses in it */
.ph h1 .eyebrow{display:flex;width:fit-content;align-items:center;gap:8px;margin-bottom:20px;padding:5px 13px 5px 11px;font-family:var(--ff-mono);font-size:.72rem;font-weight:500;letter-spacing:.01em;line-height:1.3;color:var(--ink-2);background:color-mix(in srgb,var(--paper-2) 70%,transparent);border:1px solid var(--rule);border-radius:var(--pill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ph h1 .eyebrow.live::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent);animation:ping 2.4s ease-out infinite}
@keyframes ping{70%,100%{box-shadow:0 0 0 7px transparent}}
@media (prefers-reduced-motion:reduce){.ph h1 .eyebrow.live::before{animation:none}}
.ph:has(.tl) h1{flex-basis:100%}
.ph:has(.tl){align-items:flex-end;row-gap:22px}
.ph .kpis{margin-left:auto;display:flex;gap:18px;font-size:.74rem;color:var(--ink-2);padding-bottom:.45em;flex-wrap:wrap}
.ph .kpis b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:.35em}
.edition{flex:1 1 auto;margin:0;font-family:var(--ff-read);font-size:1rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* cover tiles: the one place with colour */
.cover{--ink:color-mix(in oklab,var(--cv,var(--accent)) var(--ink-pct),var(--ink-base));position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;aspect-ratio:16/9;max-width:100%;padding:16px 18px;border-radius:var(--rt);overflow:hidden;color:var(--ink);font-family:var(--ff-mono);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in oklab,var(--cv,var(--accent)) var(--tint-2),var(--paper)) 0%,transparent 60%),color-mix(in oklab,var(--cv,var(--accent)) var(--tint-pct),var(--paper))}
.cover .eyebrow{position:absolute;left:18px;top:16px;font-size:.66rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.cover .lbl{font-weight:600;font-size:1.2rem;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;overflow-wrap:anywhere}
.cover .lbl::after{content:"";display:inline-block;width:.5em;height:.92em;margin-left:.12em;background:currentColor;vertical-align:-.1em}
.lead .cover{flex:1;aspect-ratio:auto;min-height:380px;padding:28px}
.lead .cover .eyebrow{left:28px;top:28px;font-size:.72rem}
.lead .cover .lbl{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.02}
.lead .cover .lbl::after{animation:cursor 1.1s steps(2,jump-none) 3}
@keyframes cursor{from{opacity:0}to{opacity:1}}
.sm .cover{aspect-ratio:16/9;container-type:inline-size}
/* the mid-size cards beside the lead: the tile's text scales with the tile's width (cqw), a 600px tile gets a ~36px label and ~16px eyebrow */
.sm .cover .eyebrow{font-size:clamp(.78rem,2.6cqw,1rem)}
.sm .cover .lbl{font-size:clamp(1.6rem,6cqw,2.6rem)}

/* cards: tile + text, separated by rules, not boxes */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:32px 32px;margin-bottom:40px;padding-top:28px;border-top:1px solid var(--rule)}
.feat .lead{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;padding-bottom:36px;border-bottom:1px solid var(--rule)}
.card{display:flex;flex-direction:column;position:relative;min-width:0}
.card:hover h3 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.card .stretch{position:absolute;inset:0;z-index:1}
.card .cardfoot .act,.card .cardfoot .act button,.card .cardfoot .act a,.card .srclink,.card .tag{position:relative;z-index:2}
.card .body{padding:14px 0 0;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.card.lead .body{flex:none;justify-content:flex-end;padding:4px 0;gap:14px}
.src{display:flex;align-items:center;gap:10px;font-size:.7rem;color:var(--ink-2);flex-wrap:wrap;line-height:1.3}
.src .h{color:var(--ink-3)}
.fav{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;font-family:var(--ff-mono);font-size:.58rem;font-weight:600;color:#fff;background:var(--fv,#444);flex:none}
.srclink{text-decoration:none;display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.srclink:hover{color:var(--accent)}
.card h3{font-family:var(--ff-display);font-weight:400;font-size:1.45rem;line-height:1.15;letter-spacing:0;margin:0;text-wrap:balance}
.card h3 a{text-decoration:none}
.lead h3{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.05;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:64ch}
.lead p{-webkit-line-clamp:5;font-size:1.03rem;line-height:1.55}
.cardfoot{margin-top:auto;display:flex;align-items:center;gap:6px;padding-top:4px;flex-wrap:wrap}
.tag{font-size:.68rem;line-height:1.5;color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);border-radius:6px;padding:1px 6px;transition:color .15s,border-color .15s}
.tag::before{content:"#";color:var(--ink-3)}
.tag:hover{color:var(--ink);border-color:var(--ink-3)}
.cardfoot .rt{margin-left:auto;font-size:.7rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* the story list: horizontal rows, tile on the left */
.grid{display:flex;flex-direction:column;margin-bottom:32px}
.grid .card{display:grid;grid-template-columns:176px minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid var(--rule)}
.grid .card:first-child{border-top:0;padding-top:4px}
.grid .card .body{padding:0;gap:8px}
.grid .card h3{font-size:1.55rem}
.grid .card p{-webkit-line-clamp:2}
.grid .card .cardfoot{margin-top:4px}
.grid .card .cover{padding:12px 14px}
.grid .card .cover .eyebrow{display:none}
.grid .card .cover .lbl{font-size:1.05rem}

/* sections */
.sec{display:flex;align-items:baseline;gap:12px;margin:0 0 8px;flex-wrap:wrap}
.sec h2{font-family:var(--ff-mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0}
.sec .n{font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sec a{margin-left:auto;font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:transparent;border-radius:var(--pill);padding:5px 12px;font-size:.74rem;color:var(--ink-2);text-decoration:none}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip b{font-weight:400;opacity:.65;font-variant-numeric:tabular-nums}
.empty{border:1px dashed var(--rule-2);border-radius:var(--rt);padding:40px 20px;text-align:center;color:var(--ink-2);margin-bottom:28px}
.pager{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:48px;font-size:.76rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* home: the story list with a side rail */
.home{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;margin-bottom:64px}
.side{display:flex;flex-direction:column;gap:36px}
.side .sec{margin-bottom:10px}
.catlist{list-style:none;margin:0;padding:0}
.catlist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule)}
.catlist li:last-child{border-bottom:0}
.catlist i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.catlist a{font-weight:500;font-size:.9rem;text-decoration:none}
.catlist a:hover{text-decoration:underline;text-underline-offset:3px}
.catlist .n{font-size:.7rem;color:var(--ink-3)}
.catlist .btn{margin-left:auto;padding:3px 9px;font-size:.68rem}
.rank a{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;padding:10px 0;text-decoration:none;border-bottom:1px solid var(--rule)}
.rank a:last-child{border-bottom:0}
.rank a:hover .t{text-decoration:underline;text-underline-offset:3px}
.rank .no{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rank .t{font-family:var(--ff-display);font-size:1.12rem;line-height:1.2}
.rank .m{font-size:.68rem;color:var(--ink-3);margin-top:3px}
.rank .v{font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rank .v b{display:block;color:var(--ink);font-weight:500}
.news{background:var(--ink);color:var(--paper);border-radius:var(--rt);padding:22px;display:flex;flex-direction:column;gap:12px}
.news .k{display:flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 60%,transparent)}
.news h2{font-family:var(--ff-display);font-weight:400;font-size:1.55rem;line-height:1.1;margin:0;text-wrap:balance}
.news p{margin:0;color:color-mix(in srgb,var(--paper) 72%,transparent);font-size:.92rem}
.news .cta{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:var(--accent);color:var(--accent-ink);font-family:var(--ff-read);font-size:.86rem;font-weight:500;border-radius:var(--r);padding:10px 14px;text-decoration:none;margin-top:4px}
.news .cta:hover{filter:brightness(1.08)}
.news .fine{font-size:.68rem;color:color-mix(in srgb,var(--paper) 55%,transparent)}
/* home: the door to the AI edition, tinted like a callout so it reads as another page, not more of today's list */
.door{--door-line:color-mix(in srgb,var(--accent) var(--box-line),transparent);display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:22px 40px;margin-bottom:44px;padding:26px 28px;border-radius:var(--rt);background:color-mix(in srgb,var(--accent) var(--box-bg),var(--paper));border:1px solid var(--door-line)}
.door h2{font-family:var(--ff-display);font-weight:400;font-size:1.65rem;line-height:1.1;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
.door p{margin:0 0 18px;color:var(--ink-2);font-size:.92rem;line-height:1.55}
.door .cta{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-family:var(--ff-read);font-weight:600;font-size:.88rem;border-radius:var(--r);padding:10px 14px;text-decoration:none}
.door .cta:hover{filter:brightness(1.08)}
.door .cta:focus-visible,.door li a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.door ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.door li a{display:flex;flex-direction:column;gap:7px;height:100%;padding:2px 0 2px 18px;border-left:1px solid var(--door-line);color:var(--ink);text-decoration:none}
.door .s{font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-2)}
.door .t{font-family:var(--ff-display);font-size:1.14rem;line-height:1.22;text-wrap:pretty}
.door li a:hover .t{text-decoration:underline;text-underline-offset:3px}
.door .w{margin-top:auto;font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-3)}
@media (max-width:900px){.door{grid-template-columns:1fr;padding:22px 20px}.door ul{grid-template-columns:1fr}.door li a{padding:14px 0;border-left:0;border-top:1px solid var(--door-line)}.door li:last-child a{padding-bottom:0}}
.agentbox{border:1px solid var(--rule);border-radius:var(--rt);padding:14px 16px;font-family:var(--ff-mono)}
.agentbox .st{display:flex;align-items:center;gap:8px;font-size:.74rem}
.agentbox .st i{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.agentbox .st i.run{background:var(--warn)}
.agentbox .st i.bad{background:var(--bad)}
.agentbox .st b{font-weight:600}
.agentbox .st span{color:var(--ink-3)}
.agent{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px}
.agent div{font-size:.66rem;color:var(--ink-3)}
.agent b{display:block;color:var(--ink);font-size:.9rem;font-weight:500;font-variant-numeric:tabular-nums;margin-top:1px}

/* footer: a tinted band; the wordmark large with the digest invitation beside it, then the columns and a mono bottom line */
.foot{margin-top:40px;border-top:1px solid var(--rule);background:var(--paper-2);color:var(--ink);font-family:var(--ff-read);font-size:.9rem}
.fhero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px 48px;align-items:end;padding-block:48px 40px;border-bottom:1px solid var(--rule)}
.fword{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.6rem,7vw,6rem);line-height:.95;letter-spacing:-.015em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.fword b{color:var(--ink-3);font-weight:400}
.fdigest h2{margin:0 0 8px;font-family:var(--ff-display);font-weight:400;font-size:1.7rem;line-height:1.1;text-wrap:balance}
.fdigest p{margin:0 0 14px;color:var(--ink-2);font-size:.95rem;max-width:46ch;text-wrap:pretty}
.fcta{display:inline-block;font-size:.88rem;font-weight:600;background:var(--accent);color:var(--accent-ink);border-radius:var(--pill);padding:10px 18px;text-decoration:none}
.fcta:hover{filter:brightness(1.08)}
.fdigest small{display:block;margin-top:10px;font-family:var(--ff-mono);font-size:.64rem;color:var(--ink-3)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px 40px;padding-block:36px}
.fcol.about p{margin:0;color:var(--ink-2);line-height:1.6;max-width:34ch;font-size:.92rem}
.fstats{display:flex;gap:22px;margin-top:14px;font-family:var(--ff-mono)}
.fstats div{display:flex;flex-direction:column;gap:2px}
.fstats b{font-family:var(--ff-display);font-size:1.6rem;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.fstats span{font-size:.66rem;color:var(--ink-3)}
.fcol{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fcol h2{margin:0 0 4px;font-family:var(--ff-mono);font-weight:500;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fcol a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:7px;width:fit-content;transition:color .15s}
.fcol a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fcats{display:flex;flex-wrap:wrap;gap:6px}
.fcats a{font-size:.8rem;border:1px solid var(--rule);border-radius:var(--pill);padding:3px 10px}
.fcats a:hover{text-decoration:none;border-color:var(--ink-3)}
.fbar{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-block:18px 28px;border-top:1px solid var(--rule);color:var(--ink-3);font-family:var(--ff-mono);font-size:.66rem}
.fbar .r{margin-left:auto}

/* detail */
.detail{max-width:1280px;margin:0 auto;padding-block:30px 64px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-family:var(--ff-mono);font-size:.74rem;margin-bottom:22px}
.back:hover{color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-2);background:transparent;color:var(--ink);border-radius:var(--pill);padding:7px 14px;font-family:var(--ff-mono);font-weight:500;font-size:.74rem;text-decoration:none;cursor:pointer;line-height:1.2;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.pri:hover{filter:brightness(1.15)}
.btn svg{width:13px;height:13px}
.ltab{display:inline-flex;border:1px solid var(--rule);border-radius:var(--pill);padding:2px;margin-bottom:22px;font-family:var(--ff-mono)}
.ltab a{padding:5px 12px;border-radius:var(--pill);font-size:.74rem;color:var(--ink-2);text-decoration:none}
.ltab a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.prose{font-size:1.08rem;line-height:1.65;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose h2{font-family:var(--ff-display);font-weight:400;font-size:1.5rem;color:var(--ink);margin:30px 0 10px}
.prose ul{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose .lede{font-family:var(--ff-display);font-size:1.4rem;line-height:1.35;color:var(--ink)}
.prose code{font-family:var(--ff-mono);font-size:.82em;background:var(--accent-soft);color:var(--accent);padding:1px 5px;border-radius:3px}

/* archive / sources / tags */
.fav.big{width:32px;height:32px;border-radius:var(--r);font-size:.76rem;vertical-align:middle}
.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:40px}
.days a{background:var(--paper-2);border-radius:var(--rt);padding:12px 12px 10px;text-decoration:none;display:flex;flex-direction:column;gap:2px;transition:box-shadow .15s}
.days a:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.days b{font-family:var(--ff-display);font-size:1.7rem;font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.days span{font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-2)}
.days small{margin-top:6px;font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-3)}
/* home timeline: one column per day beside the headline, oldest left, today right; bar height is that day's story count. */
/* the day rail is a compact strip under the heading, beside the edition line: pill bars (square-root scaled), day numbers only,
   the open day on a raised paper tab with an accent bar */
.tl{margin-left:auto;display:flex;align-items:flex-end;gap:8px;flex:0 1 auto;min-width:0;max-width:min(100%,460px)}
.tl .arch{flex:none;display:inline-flex;align-items:center;gap:3px;padding:4px 10px 4px 6px;margin-bottom:5px;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-2);text-decoration:none;white-space:nowrap;background:var(--paper);border:1px solid var(--rule);border-radius:var(--pill);transition:border-color .15s,color .15s}
.tl .arch:hover{color:var(--ink);border-color:var(--ink-3)}
.tl ol{flex:1;min-width:0;list-style:none;margin:0;padding:14px 0 0;display:flex;gap:1px;overflow-x:auto;scrollbar-width:none}
.tl ol::-webkit-scrollbar{display:none}
.tl li{position:relative;flex:none}
.tl .col{display:grid;grid-template-rows:26px auto;justify-items:center;width:30px;padding:4px 1px 3px;text-decoration:none;font-family:var(--ff-mono);color:var(--ink-3);border-radius:12px;transition:background .15s,box-shadow .15s}
.tl a.col:hover{background:var(--paper-2)}
.tl .n{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:2px;font-size:.6rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink-3);opacity:0;transition:opacity .15s}
.tl .bar{position:relative;align-self:end;width:14px;height:var(--h);background:color-mix(in srgb,var(--ink) 13%,transparent);border-radius:var(--pill);transition:background .15s,transform .15s}
.tl .w,.tl .mo{display:none}
.tl .x{margin-top:4px;font-size:.7rem;font-weight:600;line-height:1.2;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tl li.z .bar{height:0}
.tl li.z .x{color:var(--ink-3);font-weight:400}
.tl a.col:hover .bar{background:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-2px)}
.tl a.col:hover .n{opacity:1}
.tl a.col:hover .x{color:var(--ink)}
.tl li.on .col{background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 1px var(--rule)}
.tl li.on .bar{background:var(--accent)}
.tl li.on .n{opacity:1;color:var(--accent)}
.tl li.on .x{color:var(--ink)}
.daypager .btn{display:inline-flex;align-items:center;gap:8px}
.daypager .dim{color:var(--ink-3)}
.daypager{margin-top:-8px}
.daynav{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 24px}
.srcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-bottom:48px}
.srccard{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--paper-2);border-radius:var(--rt);padding:14px 16px;text-decoration:none;transition:box-shadow .15s}
.srccard:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.srccard .in{display:flex;flex-direction:column;gap:3px;min-width:0}
.srccard .in b{font-weight:500;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srccard .m{font-size:.7rem;color:var(--ink-3)}
.srccard .cnt{text-align:right;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3)}
.srccard .cnt b{display:block;font-size:1.05rem;font-weight:500;color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums}
.cloud{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:48px}
.cloud .chip{font-size:calc(.72rem + .1rem * var(--w,1));padding:calc(4px + 1px * var(--w,1)) calc(10px + 2px * var(--w,1))}

/* sign-in */
.login{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:var(--r);background:var(--term-fg);color:var(--term);font-weight:500;font-size:.76rem;text-decoration:none;white-space:nowrap}
.login:hover{filter:brightness(.94)}
.avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--term-line);background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--ff-mono);font-weight:600;font-size:.72rem;cursor:pointer;list-style:none;overflow:hidden;box-sizing:border-box}
.avatar::-webkit-details-marker{display:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.menu.user .sheet{width:min(260px,calc(100vw - 32px))}
.mauth{display:none;border-top:1px solid var(--term-line);margin-top:6px;padding-top:6px}
.menu .who{padding:6px 10px 10px;border-bottom:1px solid var(--term-line);margin-bottom:4px;min-width:0}
.menu .who b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .who span{display:block;font-size:.72rem;color:var(--term-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu form{display:contents}
.menu form button{width:100%;text-align:left;border:0;background:none;color:var(--term-fg);font:inherit;padding:8px 10px;border-radius:var(--r);cursor:pointer}
.menu form button:hover{background:var(--term-hi)}
.auth{max-width:460px;margin:0 auto;padding-block:44px 80px}
.auth .card{border:1px solid var(--rule);border-radius:var(--r);padding:30px 30px 24px;background:var(--paper)}
.auth h1{font-weight:500;font-size:1.8rem;letter-spacing:-.015em;line-height:1.1;margin:0 0 6px;text-wrap:balance}
.auth .lead{color:var(--ink-2);margin:0 0 22px;font-size:1rem}
.auth .empty{margin-bottom:16px}
.auth .fine{font-size:.74rem;color:var(--ink-3);margin:16px 0 0;line-height:1.5}
.pbtn{display:flex;align-items:center;gap:12px;box-sizing:border-box;border:1px solid var(--rule-2);background:transparent;color:var(--ink);border-radius:var(--r);padding:11px 14px;font-family:var(--ff-mono);font-weight:500;font-size:.84rem;text-decoration:none;margin-bottom:8px;transition:border-color .15s,background .15s}
.pbtn:hover{border-color:var(--ink);background:var(--paper-2)}
.pbtn svg{width:18px;height:18px;flex:none}
.alert{border:1px solid var(--bad);background:color-mix(in oklab,var(--bad) 10%,var(--paper));border-radius:var(--r);padding:10px 12px;font-size:.95rem;margin-bottom:16px}
.notice{border:1px solid var(--good);background:color-mix(in oklab,var(--good) 10%,var(--paper));border-radius:var(--r);padding:10px 12px;font-size:.95rem;margin-bottom:16px}

/* reader: like / save / follow */
.rx{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--ink-3);border-radius:var(--r);padding:4px 5px;font:inherit;font-family:var(--ff-mono);font-size:.74rem;line-height:1;cursor:pointer;text-decoration:none;transition:color .15s,background .15s}
.rx svg{width:15px;height:15px;flex:none}
.rx:hover{color:var(--ink);background:var(--paper-2)}
.rx[aria-pressed="true"]{color:var(--accent)}
.rx[aria-pressed="true"] svg{fill:currentColor}
.rx .n{font-variant-numeric:tabular-nums;font-weight:500}
.rx .n:empty{display:none}
.cardfoot .act{display:inline-flex;gap:2px}
.card.read .cover{opacity:.6}
.card.read h3 a{color:var(--ink-2)}
.read-badge{display:inline-flex;align-items:center;gap:3px;color:var(--good);white-space:nowrap}
.btn.follow svg{width:13px;height:13px}
.btn.follow .i-check{display:none}
.btn.follow[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.btn.follow[aria-pressed="true"] .i-plus{display:none}
.btn.follow[aria-pressed="true"] .i-check{display:block}
.badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:var(--r);background:var(--accent);color:#fff;font-family:var(--ff-mono);font-size:.64rem;font-weight:600;margin-left:6px;vertical-align:middle;line-height:1}
.ltab.small{margin:0 0 0 auto}
.ltab.small a{padding:4px 10px;font-size:.72rem}

/* account */
.acct-head{align-items:center;gap:18px}
.acct-head .avatar.big{width:60px;height:60px;font-size:1.1rem;border-color:var(--rule);cursor:default;flex:none}
.acct-head h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.acct-head .lead{margin:4px 0 0;color:var(--ink-2);font-family:var(--ff-mono);font-size:.76rem;display:flex;gap:14px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--ink);margin-bottom:24px;overflow-x:auto;scrollbar-width:none;font-size:.78rem}
.tabs a{padding:9px 12px;text-decoration:none;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink);border-color:var(--accent)}
.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:48px}
.acct-grid .card{border:1px solid var(--rule);border-radius:var(--r);padding:24px 24px 20px}
.acct-grid h2{font-weight:500;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 16px}
.acct .facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0 0 6px;font-size:.95rem}
.acct .facts dt{color:var(--ink-2)}
.acct .facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.acct .facts code{font-family:var(--ff-mono);font-size:.76rem;background:var(--paper-2);border-radius:3px;padding:1px 6px}
.acct .fine{font-size:.74rem;color:var(--ink-3);line-height:1.5}
.acct form{margin-top:18px}
.prefs{display:grid;gap:16px}
.prefs label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.95rem}
.prefs input[type="text"],.prefs select{font:inherit;font-family:var(--ff-mono);font-size:.84rem;font-weight:400;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:8px 10px}
.prefs input[type="text"]:focus,.prefs select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.prefs .chk{flex-direction:row;align-items:flex-start;gap:10px}
.prefs .chk input{margin-top:5px;accent-color:var(--accent)}
.prefs .hint{display:block;font-weight:400;font-size:.72rem;color:var(--ink-3);line-height:1.5}
.prefs button[disabled]{opacity:.5;cursor:not-allowed}
.prefs select[disabled]{opacity:.55;cursor:not-allowed}
.flist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-bottom:30px}
.frow{display:flex;align-items:center;gap:12px;background:var(--paper-2);border-radius:var(--r);padding:8px 8px 8px 14px}
.frow>a{font-weight:500;text-decoration:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .btn{padding:5px 9px;font-size:.72rem}
.empty p{margin:0}

/* feedback tab: docked to the left edge of every page in the accent colour, label always shown (icon only on a phone); it opens a modal <dialog> (site.js) whose form is mailed to the site owner */
.fbtab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:40;display:flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 12px;border:0;border-radius:0 var(--pill) var(--pill) 0;background:var(--accent);color:var(--accent-ink);font-family:var(--ff-mono);font-size:.78rem;font-weight:600;cursor:pointer;box-shadow:0 10px 28px -10px rgba(81,43,212,.7),0 2px 6px rgba(0,0,0,.25);transition:padding .15s,filter .15s}
.fbtab svg{flex:none}
.fbtab span:not(.vh){white-space:nowrap}
.fbtab:hover,.fbtab:focus-visible{padding-right:20px;filter:brightness(1.1)}

.dlg{padding:0;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--rule);border-radius:var(--rt);background:var(--paper);color:var(--ink);font-family:var(--ff-read);box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.dlg::backdrop{background:rgba(10,10,14,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg[open]{animation:dlg-in .16s ease-out}
@keyframes dlg-in{from{opacity:0;transform:translateY(8px)}}
html:has(.dlg[open]){overflow:hidden}
.dlg .in{padding:20px 24px 24px}
.dlg header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dlg h2{margin:0;font-family:var(--ff-display);font-weight:400;font-size:1.6rem;line-height:1.2}
.dlg .acts{display:flex;justify-content:flex-end;gap:8px}
.fbd .fine{font-family:var(--ff-read);font-size:1rem;line-height:1.5;color:var(--ink-2);margin:0}
.fbd form{display:grid;gap:14px}
.fbd form[hidden],.fbd .fb-done[hidden]{display:none}
.fbd .fb-done{display:grid;gap:14px}
.fbd fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fbd .opt{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-2);border-radius:var(--r);padding:5px 10px;font-family:var(--ff-mono);font-size:.76rem;cursor:pointer}
.fbd .opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.fbd .opt input{accent-color:var(--accent);margin:0}
.fbd .cmt{display:flex;flex-direction:column;gap:6px;font-size:.95rem;font-weight:500}
.fbd textarea,.fbd input[type="email"],.fbd input[type="text"]{font:inherit;font-family:var(--ff-mono);font-size:.84rem;font-weight:400;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:var(--r);padding:8px 10px;resize:vertical}
.fbd .notice,.fbd .alert{margin-bottom:0}
.fbd .alert[hidden]{display:none}
/* report this story (story page): a button under "open source" in the margin masthead, amber so it reads apart from it; its dialog is the .fbd one */
.fbd .rm-note[hidden],.fbd .cmt span[hidden]{display:none}
/* where the page margin is narrower than the tab, it sits in the bottom-left corner (label still shown) instead of covering the side column */
@media (max-width:1480px){.fbtab{top:auto;bottom:24px;transform:none;border-radius:0 var(--pill) var(--pill) 0}}
@media (max-width:600px){.fbtab{top:auto;bottom:88px;transform:none;height:44px;padding:0 12px}.fbtab span:not(.vh){display:none}}
@media print{.fbtab{display:none}}

@media (max-width:1140px){.login{padding:0 9px}.login span{display:none}}
/* the header nav has 8 links (10 signed in): tighter between 1200 and 1440px so it still fits, then the menu button takes over */
@media (max-width:1440px){.primary{gap:0}.primary a{padding:6px 8px}.search{width:170px}}
@media (max-width:1200px){.primary{display:none}.menu{display:block}.search{width:180px}}
@media (max-width:900px){.lead .cover{min-height:200px}.fgrid{grid-template-columns:1fr 1fr}.fhero{grid-template-columns:1fr;padding-block:36px 30px}.search kbd{display:none}.feat{grid-template-columns:1fr;gap:32px}.feat .lead{grid-row:auto}.grid{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.ph .kpis,.edition{margin-left:0}.agent{grid-template-columns:1fr 1fr}.acct-grid{grid-template-columns:1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr;gap:32px}.search{display:none}.logo .beta{display:none}.mast .row1{gap:10px;height:54px}.tools{gap:4px;margin-left:auto}.tools a.ibtn{display:none}.login,.menu.user{display:none}.mauth{display:block}.lang select{height:30px;padding:0 22px 0 9px}.lang svg{right:8px}.ibtn{width:30px;height:30px}.cats{-webkit-mask-image:none;mask-image:none}.live{display:none}.fgrid{grid-template-columns:1fr;gap:24px;padding-block:32px 28px}.fbar .r{margin-left:0}.ph{padding-block:26px 20px}.lead h3{font-size:1.6rem}.ltab.small{margin-left:0}.acct-head .kpis{width:100%;gap:14px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---- Agent activity (/agent): the machine's log, so chrome is monospace; story titles stay in the reading serif ---- */
.aperiod{display:flex;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;border-bottom:1px solid var(--ink);margin-bottom:24px}
.aperiod .tabs{border-bottom:0;margin-bottom:-1px}
.arange{margin-left:auto;display:flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-2);padding-bottom:9px}
.arange a{text-decoration:none;color:var(--ink);padding:0 6px;border:1px solid var(--rule-2);border-radius:var(--r)}
.arange a:hover{border-color:var(--ink)}
.astats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:36px}
.astats div{background:var(--paper-2);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.astats b{font-size:1.6rem;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.astats span{font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-2)}
.astats .ok b{color:var(--good)}
.astats .bad b{color:var(--bad)}
.alegend{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-2)}
.alegend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-left:8px}
.alegend i.s,.achart i.s{background:var(--ink)}
.alegend i.r,.achart i.r{background:var(--rule-2)}
.alegend i.f,.achart i.f{background:var(--bad)}
.achart{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;height:170px;margin-bottom:40px;align-items:end}
.achart .col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;text-decoration:none;min-width:0}
.achart .bar{display:flex;flex-direction:column;border-radius:2px 2px 0 0;overflow:hidden;min-height:0}
.achart .bar i{display:block;min-height:2px}
.achart .col.zero .bar{height:1px!important;background:var(--rule)}
.achart a.col[href]:hover .bar{outline:1px solid var(--accent);outline-offset:1px}
.achart small{font-family:var(--ff-mono);font-size:.62rem;color:var(--ink-3);text-align:center;height:1em;line-height:1;white-space:nowrap;overflow:visible}
.aruns{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.arun{border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px}
.arun header{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;font-family:var(--ff-mono);font-size:.76rem;color:var(--ink-2)}
.arun header b{color:var(--ink);font-weight:600}
.arun header .m em{font-style:normal;color:var(--good)}
.arun header .m strong{font-weight:500;color:var(--bad)}
.arun header .open{margin-left:auto;color:var(--ink);text-underline-offset:3px}
.arun .st{width:8px;height:8px;border-radius:50%;background:var(--good);align-self:center}
.arun .st.failed{background:var(--bad)}
.arun .st.running{background:var(--warn)}
.arun .err{margin:8px 0 0;font-family:var(--ff-mono);font-size:.72rem;color:var(--bad)}
.aitems{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.aitems li{display:grid;grid-template-columns:3.2em 5.6em minmax(0,13em) 1fr;gap:4px 12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule)}
.aitems time{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.aitems .pill{font-family:var(--ff-mono);font-size:.66rem;padding:1px 6px;border-radius:var(--r);border:1px solid var(--rule-2);color:var(--ink-2);justify-self:start}
.aitems li.summarized .pill{border-color:var(--good);color:var(--good)}
.aitems li.failed .pill{border-color:var(--bad);color:var(--bad)}
.aitems .ttl{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.aitems .ttl>a:first-child{font-size:.98rem;line-height:1.35;text-decoration:none}
.aitems .ttl>a:first-child:hover{text-decoration:underline;text-underline-offset:3px}
.aitems li.rejected .ttl>a:first-child,.aitems li.failed .ttl>a:first-child{color:var(--ink-2)}
.aitems .acat,.aitems .afeat{font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-2);text-decoration:none}
.aitems .afeat{color:var(--accent)}
.aitems .note{flex-basis:100%;font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-3);line-height:1.45}
.asrc{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-2);min-width:0}
.asrc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asrc:hover{color:var(--ink)}
.atable-wrap{overflow-x:auto;margin-bottom:40px}
.atable{width:100%;border-collapse:collapse;font-size:.8rem}
.atable th{font-family:var(--ff-mono);font-weight:400;font-size:.68rem;color:var(--ink-3);text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--rule-2);white-space:nowrap}
.atable td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.atable .num{text-align:right;font-family:var(--ff-mono);font-variant-numeric:tabular-nums;width:5.5em}
.atable td.ok{color:var(--good)}
.atable td.bad{color:var(--bad)}
.atable .when{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-2);white-space:nowrap}
.atable .errtxt{font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-3);max-width:46ch;overflow-wrap:anywhere}
.acats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.acats .chip{display:inline-flex;align-items:center;gap:7px}
.acats .chip i{width:9px;height:9px;border-radius:2px}
@media (max-width:640px){
  .aitems li{grid-template-columns:3.2em 1fr;}
  .aitems .asrc{grid-column:2}
  .aitems .ttl{grid-column:1 / -1}
  .achart small{font-size:.56rem}
  .arange{margin-left:0}
}

/* ---- Agent test (/agent/test) ---- */
.tform{margin-bottom:28px}
.tform label{display:block;font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-2);margin-bottom:6px}
.tform .row{display:flex;gap:8px;flex-wrap:wrap}
.tform input{flex:1 1 320px;min-width:0;font:inherit;font-size:.95rem;padding:9px 12px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.tform input[type=password]{flex:0 1 200px}
.tform input:focus{outline:2px solid var(--accent);outline-offset:1px}
.cform .row{align-items:flex-end}
.cform label{margin:0;display:flex;flex-direction:column;gap:6px}
.cform select,.cform input[type=number]{font:inherit;font-size:.95rem;padding:9px 12px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.cform select{min-width:260px}
.cform input[type=number]{flex:0 0 auto;width:7em}
.tform .hint{font-size:.74rem;color:var(--ink-3);margin:8px 0 0;max-width:80ch}
.terr{border:1px solid var(--bad);color:var(--bad);border-radius:var(--r);padding:12px 14px;margin-bottom:24px;font-family:var(--ff-mono);font-size:.78rem;overflow-wrap:anywhere}
.tverdict{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:12px 14px;border-radius:var(--r);margin-bottom:14px;border:1px solid var(--good)}
.tverdict b{font-family:var(--ff-mono);font-size:.82rem;color:var(--good)}
.tverdict.no{border-color:var(--bad)}
.tverdict.no b{color:var(--bad)}
.tverdict span{font-size:.95rem;color:var(--ink-2)}
.atest .astats b{font-size:1.2rem}
.tcalls{margin:0 0 36px;padding-left:22px;font-size:.78rem;display:flex;flex-direction:column;gap:6px}
.tcalls b{font-family:var(--ff-mono);font-weight:500}
.tcalls code{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-2);overflow-wrap:anywhere}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:48px}
.tcols .prose{font-size:1.02rem;min-width:0}
.tcols .prose p,.tcols .prose ul{max-width:none}
.tlang{font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-3)}
.tcols .ttitle{font-size:1.5rem;line-height:1.2;margin:6px 0 14px;font-weight:500}
@media (max-width:900px){.tcols{grid-template-columns:1fr}}

/* Article page. One grid: a narrow margin on the left for the masthead and the section names, the reading column on the right.
   Blocks that carry a name (.blk) span both columns through subgrid; plain paragraphs sit in the column. No boxes:
   a section is named in the margin, a callout adds only a thin rule in its status colour. */
.story{padding-block:26px 72px}
.story .back{margin-bottom:18px}
.cover.hero{aspect-ratio:auto;min-height:190px;padding:24px 28px;margin-bottom:40px}
.cover.hero .lbl{font-size:clamp(2.1rem,5vw,3.6rem)}
.art{display:grid;grid-template-columns:168px minmax(0,1fr);column-gap:32px}
.art>*{grid-column:2;margin:0}
.art>.blk{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start}
.blk>.mg{grid-column:1;margin:0}
.blk>.tx{grid-column:2;margin:0}
/* section names: the reader's voice, so serif, set small and quiet in the margin, top-aligned with the first line */
.art h2.mg,.art p.mg{font-family:var(--ff-read);font-style:italic;font-weight:400;font-size:1.02rem;line-height:1.45;color:var(--ink-2);padding-top:.12em}
.art>.ttl{grid-row:1;margin-bottom:20px}
.art>.lede{grid-row:2}
.art>.meta{grid-column:1;grid-row:1/span 2;align-self:start}
.art .ttl{font-weight:500;font-size:clamp(2rem,4.2vw,3rem);line-height:1.06;letter-spacing:-.018em;text-wrap:balance}
.meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:.55rem;font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-2)}
.meta .srclink{color:var(--ink);font-size:.8rem}
.meta .who{font-family:var(--ff-read);font-style:italic;font-size:.95rem;color:var(--ink-2);margin-top:-4px}
.meta dl{margin:0;display:grid;gap:3px}
.meta dd{margin:0;font-variant-numeric:tabular-nums}
.meta dd a{color:inherit;text-underline-offset:3px}
.meta dd a:hover{color:var(--ink)}
.meta .act{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.meta .act .rx{padding:6px 9px;font-size:.74rem;border:1px solid var(--rule-2)}
.meta .act .rx:hover{border-color:var(--ink);background:transparent}
.meta .act .rx[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.meta .btn svg{width:13px;height:13px}
.art .lede{font-family:var(--ff-read);font-size:1.32rem;line-height:1.5;color:var(--ink);margin-bottom:34px;text-wrap:pretty}
.art .para,.art .tx{font-size:1.15rem;line-height:1.68}
.art .para{margin-bottom:20px;text-wrap:pretty}
/* the page is ~1000px wide (the hero band inside follows it): a 168px label column + 32px gap leaves ~760px for the text */
.art>.lede,.art>.para{max-width:none}
.art>.blk{margin:6px 0 30px}
/* key points: the one boxed block on the page, so a reader skimming for the gist finds it first */
/* Named sections sit in soft tinted boxes, each with its own hue (--h), mixed into the paper so both themes stay calm. */
.kp{--h:var(--hue-kp)}.uc{--h:var(--hue-uc)}.why{--h:var(--hue-why)}
.art>.kp,.art>.uc,.art>.why,.art>.callout{margin:10px 0 32px;padding:24px 28px 26px;background:color-mix(in srgb,var(--h) var(--box-bg),var(--paper));border:1px solid color-mix(in srgb,var(--h) var(--box-line),var(--paper));border-top:3px solid var(--h);border-radius:var(--r);grid-template-columns:172px minmax(0,1fr)}
.art>.kp{margin-bottom:40px}
.art .kp h2.mg,.art .uc h2.mg,.art .why h2.mg{font-style:normal;font-weight:600;font-size:1.2rem;line-height:1.3;color:var(--ink);padding-top:.1em}
.kp-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.kp-list li{position:relative;padding-left:26px;font-size:1.28rem;line-height:1.42;font-weight:500;color:var(--ink);text-wrap:pretty}
.kp-list li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;background:var(--h)}
.dash{list-style:none;padding:0}
.dash li{position:relative;margin:0 0 10px}
.dash li::before{content:"\2013";position:absolute;left:-1.15em;color:var(--h,var(--ink-3))}
.why .tx{font-size:1.22rem;line-height:1.55}
.callout{--h:var(--hue-note);--c:var(--h)}
.callout.tip{--h:var(--hue-tip)}
.callout.warning{--h:var(--hue-warn)}
.callout.breaking{--h:var(--hue-bad)}
.art .callout .mg{display:flex;align-items:center;gap:7px;color:var(--c);font-style:normal}
.callout .ico{flex:none;width:16px;height:16px;display:inline-flex}
.callout .ico svg{width:100%;height:100%}
.art .callout .tx{font-size:1.06rem;line-height:1.55}
.prov{padding-top:18px;border-top:1px solid var(--rule)}
.art .prov .tx{font-family:var(--ff-mono);font-size:.76rem;line-height:1.6;color:var(--ink-2)}
.prov a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.rel ul{list-style:none;padding:0}
.rel li+li{border-top:1px solid var(--rule)}
.rel a{display:flex;flex-direction:column;gap:4px;padding:12px 0;text-decoration:none}
.rel li:first-child a{padding-top:0}
.rel .t{font-family:var(--ff-read);font-size:1.12rem;line-height:1.3;font-weight:500}
.rel a:hover .t{text-decoration:underline;text-underline-offset:3px}
.rel .m{display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-3)}
.rel .ago{margin-left:6px}
@media (max-width:900px){
  .art{display:flex;flex-direction:column}
  .art>*{order:3}
  .art>.ttl{order:1;margin-bottom:14px}
  .art>.meta{order:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:0;margin-bottom:22px}
  .art>.blk{display:block;margin:6px 0 28px}
  .meta dl{display:flex;flex-wrap:wrap;gap:4px 14px}
  .meta .who{margin-top:0}
  .art .mg{margin-bottom:8px}
  .art>.kp,.art>.uc,.art>.why,.art>.callout{padding:20px 18px 22px}
  .art .kp h2.mg,.art .uc h2.mg,.art .why h2.mg{margin-bottom:12px}
  .kp-list li{font-size:1.15rem}
  .dash li{padding-left:1.15em}
  .dash li::before{left:0}
  .cover.hero{min-height:150px;padding:20px 22px;margin-bottom:28px}
}

/* ---- 2026 redesign: overrides for the rules above (pills, light chrome, the article's hero band) ---- */
.login{height:36px;padding:0 14px 0 11px;border-radius:var(--pill);background:var(--ink);color:var(--paper);font-family:var(--ff-read);font-size:.82rem}
.login:hover{filter:brightness(1.15)}
.avatar{width:36px;height:36px;border:1px solid var(--rule)}
.rx{border:1px solid var(--rule);border-radius:var(--pill);padding:4px 9px;font-size:.7rem;color:var(--ink-2);gap:5px}
.rx svg{width:13px;height:13px}
.rx:hover{background:transparent;border-color:var(--ink-3);color:var(--ink)}
.rx.like[aria-pressed="true"]{background:var(--bad);border-color:transparent;color:#fff}
.rx.save[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.rx[aria-pressed="true"] svg{fill:currentColor}
.cardfoot .act{gap:5px}
.card.read{opacity:.72}
.card.read .cover{opacity:1}
.btn.follow[aria-pressed="true"]{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.badge{border-radius:var(--pill);font-size:.6rem;height:16px;min-width:16px}
.tabs{border-bottom-color:var(--rule)}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
.auth .card,.acct-grid .card{border-radius:var(--rt)}
.auth h1,.acct-grid h2{font-family:var(--ff-display);font-weight:400}
.auth h1{font-size:2.2rem}
.acct-grid h2{font-size:1.6rem}
.pbtn{border-radius:var(--r);font-family:var(--ff-read)}
.alert,.notice{border-radius:var(--r)}
.aperiod{border-bottom-color:var(--rule)}
.astats div,.arun{border-radius:var(--rt)}
.astats b{font-family:var(--ff-display);font-weight:400;font-size:1.9rem}
.acct-head h1{font-size:clamp(1.8rem,3vw,2.6rem)}
.acct-head .avatar.big{width:60px;height:60px}
.frow{border-radius:var(--rt)}
.fbd .opt{border-radius:var(--pill)}
.fbd textarea,.fbd input[type="email"],.fbd input[type="text"],.prefs input[type="text"],.prefs select,.tform input,.cform select,.cform input[type=number]{border-radius:var(--r);font-family:var(--ff-read)}

/* article: the cover tile becomes a full-width band holding the back link, the big label and the headline */
.story{padding-block:0 72px}
.story,.hero .wrap{max-width:1000px}
.hero{--ink:color-mix(in oklab,var(--cv,var(--accent)) var(--ink-pct),var(--ink-base));color:var(--ink);font-family:var(--ff-mono);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in oklab,var(--cv,var(--accent)) var(--tint-2),var(--paper)) 0%,transparent 60%),color-mix(in oklab,var(--cv,var(--accent)) var(--tint-pct),var(--paper))}
.hero .wrap{padding-block:20px 40px}
.hero .back{margin:0;color:inherit;opacity:.8;border:1px solid color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--pill);padding:5px 12px;font-size:.72rem}
.hero .back:hover{opacity:1;color:inherit}
.hero .hg{display:grid;grid-template-columns:1fr minmax(0,560px);gap:24px 40px;align-items:end;margin-top:40px}
.hero .eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.hero .lbl{margin-top:8px;font-weight:600;font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.035em;line-height:1;text-wrap:balance;overflow-wrap:anywhere}
.hero .lbl::after{content:"";display:inline-block;width:.5em;height:.92em;margin-left:.12em;background:currentColor;vertical-align:-.1em;animation:cursor 1.1s steps(2,jump-none) 3}
.hero h1.ttl{margin:0;font-family:var(--ff-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.08;letter-spacing:0;text-wrap:balance;color:var(--ink)}
.art{margin-top:28px}
.art>.lede{grid-row:1}
.art>.meta{grid-column:1;grid-row:1;align-self:start}
.art .lede{font-family:var(--ff-display);font-size:1.5rem;line-height:1.3}
.art .para,.art .tx{font-size:1.08rem;line-height:1.65}
.art h2.mg,.art p.mg{font-family:var(--ff-mono);font-style:normal;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:.35em}
.art .kp h2.mg,.art .uc h2.mg,.art .why h2.mg{font-family:var(--ff-mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.art>.kp,.art>.uc,.art>.why,.art>.callout{border-radius:var(--rt);border-top:1px solid color-mix(in srgb,var(--h) var(--box-line),var(--paper));border-left:3px solid var(--h)}
.kp-list li{font-size:1.05rem;line-height:1.45;font-weight:500}
.kp-list li::before{border-radius:2px}
.why .tx{font-size:1.08rem}
/* article masthead: source, facts with icons, then full-width actions; hairlines between the groups */
.art>.meta{gap:0;padding-top:.35rem;font-size:.72rem;color:var(--ink-2)}
.meta .by{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:11px;align-items:center;width:100%;padding-bottom:16px}
.meta .by:has(.who) .fav{grid-row:span 2}
.meta .by .fav{width:36px;height:36px;border-radius:10px;font-size:.74rem;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.meta .by .srclink{display:block;font-family:var(--ff-read);font-weight:600;font-size:.9rem;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.meta .by .srclink:hover{color:var(--accent)}
.meta .by .who{grid-column:2;margin:2px 0 0;font-family:var(--ff-read);font-style:normal;font-size:.8rem;line-height:1.3;color:var(--ink-3);overflow-wrap:anywhere}
.meta .facts{display:grid;gap:9px;width:100%;box-sizing:border-box;padding:14px 0;border-block:1px solid var(--rule)}
.meta .facts dd{display:flex;align-items:center;gap:9px;line-height:1.3}
.meta .facts svg{width:14px;height:14px;flex:none;color:var(--ink-3)}
.meta .facts a{color:var(--ink-2);text-decoration:underline dotted color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:4px}
.meta .facts a:hover{color:var(--accent);text-decoration-color:currentColor}
.meta .act{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin:16px 0 8px}
.meta .act .rx{justify-content:center;padding:8px 10px;border:1px solid var(--rule-2);font-size:.72rem}
.meta .act .rx:hover{border-color:var(--ink-3)}
.meta .btn.src{width:100%;box-sizing:border-box;justify-content:center;gap:8px;padding:11px 14px;font-size:.76rem}
.meta .btn.src svg{transition:translate .15s}
.meta .btn.src:hover svg{translate:2px -2px}
.meta .host{align-self:center;margin-top:7px;font-size:.66rem;color:var(--ink-3)}
.meta .btn.rep{width:100%;box-sizing:border-box;justify-content:center;gap:8px;margin-top:10px;padding:9px 14px;font-size:.72rem;color:color-mix(in srgb,var(--warn) 78%,var(--ink));border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.meta .btn.rep:hover,.meta .btn.rep:focus-visible{background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:var(--warn)}
.meta dialog{font-size:1rem;color:var(--ink)}
.art>.meta{padding:20px 20px 18px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rt);box-sizing:border-box;min-width:0}
.meta .btn.li{width:100%;box-sizing:border-box;justify-content:center;gap:8px;margin-top:14px;padding:9px 14px;font-size:.72rem}
@media (max-width:900px){
  .art>.meta{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0}
  .meta .facts{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 0}
  .meta .act{margin-top:14px}
}
/* Story page: the masthead card runs across the top (a compact band on desktop, stacked on a phone), then the label column
   (section names such as "Key points", see .art above) beside the text column. The hero band follows the same ~1000px width. */
.art>.lede,.art>.para{max-width:none}
.art>.meta.mg{align-self:stretch}
@media (min-width:901px){
  .art>.meta.mg{grid-column:1/-1;grid-row:1;align-self:stretch;margin-bottom:26px}
  .art>.lede{grid-row:2}
  /* two rows: author + facts, a hairline (the ::after, which also breaks the line), then the buttons with the host at the end */
  .art>.meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 20px}
  .meta .by{order:1;width:auto;flex:1 1 auto;padding:0}
  .meta .facts{order:2;width:auto;flex:0 1 auto;border:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 20px}
  .meta::after{content:"";order:3;flex:0 0 100%;height:1px;background:var(--rule);margin:2px 0}
  .meta .act{order:4;display:flex;width:auto;margin:0;gap:8px}
  .meta .btn.src,.meta .btn.rep,.meta .btn.li{width:auto;margin:0;padding:8px 14px}
  .meta .btn.src{order:5}
  .meta .btn.rep{order:6}
  .meta .btn.li{order:7}
  .meta .host{order:8;width:auto;align-self:center;margin:0 0 0 auto}
}
}
.rel .t{font-family:var(--ff-display);font-weight:400;font-size:1.2rem}
.cover.hero{display:none}
/* previous / next story at the end of the article */
.art>.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 40px}
.pn a{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--rt);text-decoration:none;color:var(--ink);min-width:0}
.pn a:hover{border-color:var(--ink-3)}
.pn .next{grid-column:2;text-align:right;align-items:flex-end}
.pn .dir{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pn .t{font-family:var(--ff-display);font-size:1.1rem;line-height:1.3;text-wrap:balance}
.pn a:hover .t{text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.art>.pn{grid-template-columns:1fr}.pn .next{grid-column:1}}

@media (max-width:1100px){.home{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;align-items:start}}
@media (max-width:900px){
  .feat .lead{grid-template-columns:1fr;gap:16px}
  .lead .cover{min-height:260px}
  .tl{margin-left:0;flex-basis:100%}
  .hero .hg{grid-template-columns:1fr;margin-top:28px}
  .art{margin-top:20px}
}
@media (max-width:700px){.side{grid-template-columns:1fr}}
@media (max-width:600px){
  .grid .card{grid-template-columns:112px minmax(0,1fr);gap:14px;padding:18px 0}
  .grid .card h3{font-size:1.3rem}
  .grid .card .cover{aspect-ratio:1;padding:10px 12px;border-radius:var(--r)}
  .grid .card .cover .eyebrow{display:none}
  .grid .card .cover .lbl{font-size:.9rem}
  .grid .card p{display:none}
  .mast .row1{height:56px;gap:10px}
  .feat{grid-template-columns:1fr}
  .ph{padding-block:24px 18px}
  .hero .lbl{font-size:2.2rem}
}

/* ---- Filter bar, chips and list rows shared with /ai (the /repos page they came from is gone): a leaderboard. A sticky filter bar (period segment, kind and language chips, search),
   the top three as quiet panels with the period's star curve, then unboxed rows on rules: each with its own curve and a
   gain bar scaled to the leader. Names and numbers in mono, the sentence in the reading face; green is the gain only. ---- */
.ph .kpis b.good{color:var(--good)}
.rfilter{justify-content:space-between}
.rbar{position:sticky;top:calc(var(--mast-h,60px) + env(safe-area-inset-top,0px));z-index:20;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding-block:12px;margin-bottom:8px;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.seg{display:inline-flex;padding:3px;background:var(--paper-2);border-radius:var(--pill);font-family:var(--ff-mono);font-size:.74rem}
.seg a{padding:5px 13px;border-radius:var(--pill);color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s,box-shadow .15s}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
/* Page tabs (/ai: Plugins | Skills): the section switch, not a filter, so it sits above the filter bar on its own rule,
   in the reading face with the count beside it; the open tab is underlined in ink. */
/* plugins / skills: a two-way switch, the pressed side filled with ink like a pressed chip */
.ptabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:6px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--rt);max-width:100%}
.ptabs a{display:inline-flex;align-items:baseline;gap:12px;padding:11px 22px 12px;font-family:var(--ff-read);font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--ink-2);text-decoration:none;border-radius:10px;white-space:nowrap;transition:color .15s,background .15s}
.ptabs a:hover{color:var(--ink);background:var(--paper-3)}
.ptabs a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ptabs a.on{color:var(--paper);background:var(--ink)}
.ptabs .n{font-family:var(--ff-display);font-size:1.45rem;font-weight:400;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ptabs a.on .n{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.rkind{display:flex;gap:6px;padding-bottom:8px;flex-wrap:wrap}
.rbar .rkind{padding-bottom:0}
.rkind a,.rkind button{font:inherit;font-family:var(--ff-mono);font-size:.74rem;text-decoration:none;color:var(--ink-2);background:transparent;padding:4px 11px;border:1px solid var(--rule);border-radius:var(--pill);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .15s,border-color .15s,background .15s}
.rkind a:hover,.rkind button:hover{color:var(--ink);border-color:var(--ink-3)}
.rkind a.on,.rkind button.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.rbar .rright{margin-left:auto;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.rsearch{position:relative;display:block}
.rsearch svg{position:absolute;left:10px;top:50%;translate:0 -50%;color:var(--ink-3);pointer-events:none}
.rsearch input{font-family:var(--ff-mono);font-size:.76rem;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink);border-radius:var(--pill);padding:6px 12px 6px 30px;width:min(220px,100%)}
.rsearch input::placeholder{color:var(--ink-3)}
.ldot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.ldot.cs{background:var(--accent)}
.ldot.fs{background:#378bba}
.ldot.vb{background:#0d5c8c}
.rlang{display:inline-flex;align-items:center;gap:5px}
.rnote,.rempty{font-size:.92rem;color:var(--ink-2);margin:-8px 0 20px;max-width:70ch}
.rempty{margin:32px 0 64px}
.rmeta{font-family:var(--ff-mono);font-size:.72rem;color:var(--ink-3);margin:14px 0 22px;max-width:none;display:flex;gap:8px 18px;flex-wrap:wrap}
.rmeta .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}
.rpod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.pod{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:20px 20px 16px;background:var(--paper-2);border-radius:var(--rt);min-width:0;text-decoration:none;color:inherit;transition:translate .2s,box-shadow .2s}
.pod:hover{translate:0 -2px;box-shadow:0 12px 30px -16px rgba(0,0,0,.35)}
.pod .top{display:flex;align-items:center;gap:10px;font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-3)}
.pod .rank{font-family:var(--ff-display);font-size:1.6rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pod .rank i{font-style:italic;color:var(--ink-3);font-size:1rem}
.pod .tags{margin-left:auto;display:flex;gap:6px}
.pod .tags .rtag{margin-left:0;vertical-align:0}
.pod .name{font-family:var(--ff-mono);font-size:1.02rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.pod .name span{font-weight:400;color:var(--ink-3)}
.pod p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.pod .foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;padding-top:6px}
.pod .spark{width:100%;height:48px}
.pod .gain{text-align:right;font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.pod .gain b{display:block;font-family:var(--ff-display);font-weight:400;font-size:2.3rem;line-height:1;color:var(--good);font-variant-numeric:tabular-nums}
.pod .rm{display:flex;gap:4px 12px;flex-wrap:wrap;margin-top:10px;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3)}
.lhead{display:grid;grid-template-columns:3ch minmax(0,1fr) 120px 110px;gap:4px 20px;padding:0 0 8px;border-bottom:1px solid var(--ink);font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lhead span:nth-child(3),.lhead span:last-child{text-align:right}
.rlist{list-style:none;margin:0 0 56px;padding:0;border-top:1px solid var(--rule)}
.lhead+.rlist{border-top:0}
.repo{display:grid;grid-template-columns:3ch minmax(0,1fr) 120px 110px;gap:4px 20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);transition:background .15s}
.rlist .repo:hover{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper-2) 70%,transparent) 20%,color-mix(in srgb,var(--paper-2) 70%,transparent) 80%,transparent)}
.repo .rk{font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-3);padding-top:.25em;align-self:start;font-variant-numeric:tabular-nums}
.repo .rb{min-width:0}
.repo .rn{font-family:var(--ff-mono);font-size:.98rem;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.repo .rn span{font-weight:400;color:var(--ink-3)}
.repo .rn:hover{text-decoration:underline;text-underline-offset:3px}
.rtag{display:inline-block;vertical-align:2px;margin-left:8px;font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule-2);border-radius:var(--pill);padding:1px 7px}
.rtag.ai{color:var(--accent-ink);background:var(--accent);border-color:transparent}
.repo p{margin:4px 0 0;font-size:.98rem;line-height:1.5;color:var(--ink);max-width:70ch;text-wrap:pretty}
.repo .rm{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-family:var(--ff-mono);font-size:.68rem;color:var(--ink-3)}
.repo .spark{width:120px;height:34px}
.repo .rg{text-align:right;font-family:var(--ff-mono);font-size:.66rem;color:var(--ink-3);white-space:nowrap}
.repo .rg b{display:block;font-family:var(--ff-display);font-weight:400;font-size:1.8rem;line-height:1;color:var(--good);font-variant-numeric:tabular-nums}
.repo .rgbar{margin-top:6px;height:3px;border-radius:2px;background:var(--paper-3);overflow:hidden}
.repo .rgbar i{display:block;height:100%;background:var(--good);border-radius:2px}
.rnomatch{margin-top:0}
/* ---- AI page (/ai): the bar and chips above; each item is a two-column row, the text on the left and the
   install panel (the one filled element) on the right, with the commands in mono and a copy button each ---- */
.aitopics{margin:14px 0 0;padding-bottom:0}
.aitopics a span{color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums;font-size:.66rem}
.aitopics a.on span{color:inherit;opacity:.7}
.rbar form{display:block;min-width:0}
.repo.aiitem{grid-template-columns:minmax(0,1fr) minmax(300px,36%);align-items:start;padding:20px 0}
.repo .rm a{color:var(--ink-2);text-decoration:none}
.repo .rm a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.repo .rm .aias{color:var(--ink-2)}
.rtag.warn{color:var(--warn);border-color:currentColor}
.aicmd{display:grid;gap:6px;align-content:start;padding:14px 16px 12px;background:var(--paper-2);border-radius:var(--rt);min-width:0}
.aicmd .lbl{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.aicmd .lbl.head{margin:0 0 2px;color:var(--ink-2)}
.aicmd .cl{display:flex;align-items:stretch;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);min-width:0}
.aicmd code{flex:1;min-width:0;font-family:var(--ff-mono);font-size:.74rem;padding:7px 10px;color:var(--ink);overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.aicmd .cp{font-family:var(--ff-mono);font-size:.66rem;border:0;border-left:1px solid var(--rule);background:transparent;color:var(--ink-2);padding:0 10px;cursor:pointer;white-space:nowrap;border-radius:0 var(--r) var(--r) 0}
.aicmd .cp:hover{color:var(--accent-ink);background:var(--accent)}
.aicmd p{margin:2px 0 0;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
@media (max-width:900px){
  .repo.aiitem{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .aitopics{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px;margin-top:10px}
  .aitopics a{white-space:nowrap}
  .rbar form{width:100%}
  .aicmd{padding:12px}
}
@media (max-width:900px){
  .rpod{grid-template-columns:1fr}
  .lhead{display:none}
  .repo{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px}
  .repo .rk,.repo .spark{display:none}
  .repo .rg b{font-size:1.5rem}
}
@media (max-width:600px){
  .ptabs{display:flex}
  .ptabs a{flex:1;justify-content:center;padding-inline:12px}
  .rbar{position:static}  /* three rows of chips would eat the phone's screen if they stuck */
  .rbar .rright{margin-left:0;width:100%}
  .rsearch,.rsearch input{width:100%}
}