:root{
  --bg:#0e0f13; --panel:#232530; --line:#262a36; --ink:#e7e9ee; --mut:#9aa1b1;
  --acc:#ff5c5c; --acc2:greenyellow; --ok:#4ade80; --rad:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* `hidden` must win over our flex/inline-flex display rules */
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-header{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;border-bottom:1px solid var(--line);
  background:var(--panel);backdrop-filter:blur(8px);z-index:10}
/* To make the header sticky again later, add: position:sticky;top:0; */
/* LOCAL env indicator: tint the top bar so local is never mistaken for prod */
.env-local .site-header{background:darkslateblue}
.brand{display:flex;flex-direction:column;gap:.1rem;line-height:1}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:-.5px}
.logo span{color:var(--mut)}
.slogan{font-size:.72rem;color:var(--acc2);letter-spacing:.3px;font-weight:600;opacity:.9}
.lang-switch{color:var(--mut);border:1px solid var(--line);padding:.35rem .7rem;border-radius:999px;font-size:.85rem}
.lang-switch:hover{color:var(--ink);border-color:var(--mut)}

.container{max-width:760px;margin:0 auto;padding:1.5rem 1.2rem 4rem}
.container.wide{max-width:1200px}

/* home 3-column layout */
.home-layout{display:grid;gap:1.4rem;grid-template-columns:230px minmax(0,1fr) 280px;
  grid-template-areas:"left main right";align-items:start}
.feed-col{grid-area:main;min-width:0}
.side-left{grid-area:left}
.side-right{grid-area:right}
/* sidebars: sticky; JS sets `top` so a column taller than the viewport scrolls until
   its bottom shows, then pins (short columns just pin at the top). */
.side{position:sticky;top:1rem;align-self:start}
.side-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:.2rem 0 .7rem}
.side-empty{color:var(--mut)}
.side-comment{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin-bottom:1rem}
.side-comment:hover{border-color:#3a4050;text-decoration:none}
.side-chead{display:flex;align-items:center;gap:.4rem;margin-bottom:.25rem}
.side-av{width:22px;height:22px;border-radius:50%;object-fit:contain;padding:2px;flex:0 0 auto;
  background:radial-gradient(circle at 30% 25%,#2b3146,#171922);border:1px solid var(--line)}
.side-author{font-size:.78rem;color:var(--acc2);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-pts{margin-left:auto;display:inline-flex;align-items:center;gap:.2rem;flex:0 0 auto}
.side-pts .coin{font-size:.76rem}
.side-pts .wand{width:13px;height:13px}
.side-body{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;color:var(--mut);font-size:.85rem}
.side-article{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin-bottom:1rem}
.side-art-thumb{display:block;margin:-.1rem 0 .45rem}
.side-art-thumb img{width:100%;height:auto;border-radius:8px;display:block}
.side-title{display:block;font-weight:700;font-size:.9rem;line-height:1.25;color:var(--ink)}
.side-cc{font-size:.75rem;color:var(--mut)}
.side-topc{margin-top:.45rem;display:flex;gap:3px;align-items:flex-start}
.side-topbody{flex:1;min-width:0;color:var(--mut);font-size:.82rem;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:980px){
  .home-layout{grid-template-columns:1fr;grid-template-areas:"main" "left" "right"}
  .side{position:static}
}

/* feed */
.feed{display:grid;gap:1.2rem}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:.15s}
.card:hover{border-color:#3a4050;transform:translateY(-2px)}
/* admin hover controls on a feed card (rendered only for the logged-in admin) */
.card-admin{position:absolute;top:8px;right:8px;display:flex;gap:6px;z-index:3;opacity:0;transform:translateY(-4px);transition:.15s;pointer-events:none}
.card:hover .card-admin,.digest-item:hover .card-admin,.card-admin:focus-within{opacity:1;transform:none;pointer-events:auto}
.card-admin form{margin:0}
.ca-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:rgba(15,16,19,.82);border:1px solid var(--line);color:#cfd6e6;cursor:pointer;backdrop-filter:blur(4px)}
.ca-btn:hover{color:#fff;border-color:var(--mut)}
.dg-up,.dg-down,.dg-first,.dg-last{width:22px;font-size:.85rem}
.ca-del:hover{color:#ff6b6b;border-color:#ff6b6b}
@media (hover:none){.card-admin{opacity:1;transform:none;pointer-events:auto}}
/* show the full illustration, never crop or distort (matches the article page) */
.card-img{width:100%;height:auto;display:block}
.card-body{padding:1rem 1.1rem 1.2rem}
.card h2{margin:.1rem 0 .4rem;font-size:1.25rem;line-height:1.25}
.summary{color:var(--mut);margin:.2rem 0 .8rem}
.more{color:var(--acc2);font-weight:600;font-size:.9rem}
.card-cta{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .7rem;margin-top:.5rem}
.card-tagline{font-weight:bold;font-size:.78rem;background: linear-gradient(90deg, #a78bfa, #60a5fa, #f472b6);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;position:relative;top:-1.5px}
@media(max-width:600px){.card-cta{flex-direction:column;gap:.15rem}}
.card-sub{color:#8b9bf4;font-size:.8rem;font-weight:700;margin:.15rem 0 .5rem}
.card-meta{display:flex;align-items:center;gap:.7rem;margin-top:.7rem;font-size:.8rem;color:var(--mut)}
.card-meta .cc{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.cc-ico{display:inline-block;line-height:1}
.cc-ico.hot{animation:ccglow 1.9s ease-in-out infinite}
@keyframes ccglow{
  0%  {filter:drop-shadow(0 0 2px #a78bfa) drop-shadow(0 0 5px rgba(167,139,250,.5))}
  50% {filter:drop-shadow(0 0 3px #60a5fa) drop-shadow(0 0 8px rgba(96,165,250,.6))}
  100%{filter:drop-shadow(0 0 2px #f472b6) drop-shadow(0 0 5px rgba(244,114,182,.5))}
}
.prog-wrap{display:flex;align-items:center;gap:.4rem;flex:1;min-width:80px}
.prog-wrap .wand{width:15px;height:15px;flex:0 0 auto}
.progress{flex:1;min-width:50px;height:6px;background:#23283a;border-radius:999px;overflow:hidden}
.progress>b{display:block;height:100%;background:linear-gradient(90deg,#a78bfa,#60a5fa,#f472b6);border-radius:999px;font-weight:normal}

/* back link (article pages) — stays pinned to the top of the viewport while scrolling */
.back-link{position:sticky;top:.6rem;z-index:20;display:inline-flex;align-items:center;gap:.3rem;
  margin:0 0 1rem;color:var(--mut);border:1px solid var(--line);padding:.4rem .85rem;border-radius:999px;
  font-size:.85rem;font-weight:600;background:rgba(14,15,19,.85);backdrop-filter:blur(8px)}
.back-link:hover{color:var(--ink);border-color:var(--mut);text-decoration:none}
/* on mobile/tablet: sticky is restored but top is set by JS to clear the live-bar */
/* desktop: hang the (still-sticky) Back button in the left gutter beside the article body
   instead of floating over the cover image. Needs gutter room: container is 760px wide. */
@media (min-width:1060px){
  .back-link{transform:translateX(calc(-100% - 1rem));margin:0 0 -2.1rem}
}

/* post */
/* Article illustration: NEVER crop (these are infographics). */
.post-img{display:block;width:100%;height:auto;border-radius:var(--rad);margin-bottom:1.2rem}
.post h1{font-size:2rem;line-height:1.15;margin:.2rem 0 .6rem}
.meta{color:var(--mut);font-size:.85rem;margin:0 0 1rem}
.rewrite-note{background:#1d2030;border-left:3px solid var(--acc2);padding:.6rem .9rem;border-radius:8px;color:var(--mut);font-size:.9rem}
.orig-banner{background:#1d2030;border-left:3px solid var(--mut);padding:.55rem .9rem;border-radius:8px;
  color:var(--mut);font-size:.85rem;margin-bottom:1rem}
.orig-banner a{color:var(--acc2)}
.orig-link{font-size:.82rem;color:var(--mut);margin:.5rem 0 1rem}
.orig-link a{color:var(--acc2)}
.orig-link a:hover{color:var(--ink)}
.meta-ver{color:var(--acc2);font-weight:500}
.post-intro{font-size:1.18rem;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--acc2);background:#1a1d28;padding:.7rem 1rem;border-radius:0 10px 10px 0;margin:.2rem 0 1.2rem}
.top-comment{background:#1a1d28;border:1px solid var(--acc2);border-radius:12px;padding:.7rem .9rem;margin-bottom:1rem}
.top-label{display:block;font-size:.78rem;color:var(--acc2);font-weight:700;margin-bottom:.2rem}
.top-author{font-weight:700;color:var(--acc2);font-size:.9rem}
.top-body{margin-top:.3rem}
.post-body{font-size:1.08rem;color:#cdd1da}
.post-body p{margin:0 0 1rem}
.post-body h2{margin:1.6rem 0 .6rem}
/* in-content links look like classic links */
.post-body a{color:#4d94ff;text-decoration:underline}
.post-body a:hover{color:#7db4ff}

/* comment body is noticeably dimmer than article/digest body. */
.comment-body{color:#a7adba}
/* <strong> is intentionally NOT distinguished for now (renders as plain text) — may re-enable later */
.post-body strong,.post-body b,
.digest-para strong,.digest-para b,
.comment-body strong,.comment-body b{font-weight:inherit;color:inherit}
/* keep <em> (user _italic_) as a light-green italic accent */
.post-body em,.digest-para em,.comment-body em{color:#d6ff97}

/* glossary terms = <i>: upright + white, with a dotted underline + "help" cursor
   (these are the Wikipedia Preview targets — see layout.php) */
.post-body i,.post-intro i,.post h1 i,.digest-para i,.digest-title i,.card-body i,.side-title i,.comment-body i,.top-body i,.side-body i,.side-topbody i{
  font-style:normal;color:#fff;border-bottom:1px dotted currentColor;cursor:help}
/* on digest cards terms must sit above the full-card cover-link (paragraph + the top-comment) */
.digest-para i,.digest-topc i{position:relative;z-index:2}
/* re-theme the Wikipedia Preview popup to our palette (via its own CSS variables) */
.wikipediapreview.wikipediapreview-dark-theme,
.wikipediapreview.wikipediapreview-dark-theme + .wp-popup-arrow{
  --wikipediapreview-primary-background-color:var(--panel);
  --wikipediapreview-secondary-background-color:var(--panel);
  --wikipediapreview-primary-color:var(--ink);
  --wikipediapreview-cta-color:var(--acc2);
  --wikipediapreview-cta-visited-color:var(--acc2)}
.wikipediapreview.wikipediapreview-dark-theme{border:1px solid var(--line)}
/* hide the Wikipedia wordmark while the preview is still loading */
.wikipediapreview:has(.wikipediapreview-body-loading) .wikipediapreview-header-wordmark{visibility:hidden}
/* loading progress bar with progressive deceleration: fast at first, then crawls toward
   90% (never "completes" — Wikipedia can take ~5s when it pulls from archives). When the
   real content arrives the loading node is replaced and the bar disappears with it. */
/* NB: the lib ships `.wikipediapreview-body.wikipediapreview-body-loading:after{content:none}`
   (0,2,1). We out-specify it with the popup ancestor (0,3,1) so our `content` wins. */
/* the loading body is a fixed-height skeleton — drop its overflow:scroll so the
   progress bar can sit in the 16px gap below it without being clipped */
.wikipediapreview .wikipediapreview-body.wikipediapreview-body-loading{position:relative;overflow:visible}
.wikipediapreview .wikipediapreview-body.wikipediapreview-body-loading::after{
  content:"";position:absolute;left:0;bottom:-15px;height:3px;width:0;border-radius:0 999px 999px 0;
  background:linear-gradient(90deg,#a78bfa,#60a5fa,#f472b6);
  animation:shyWpProg 12s cubic-bezier(0,.7,.2,1) forwards}
@keyframes shyWpProg{to{width:90%}}
/* our "no article" fallback injected into the popup body */
.wikipediapreview.shy-fb .wikipediapreview-header{min-height:0;line-height:normal;margin:0}
.wikipediapreview.shy-fb .wikipediapreview-header-wordmark,
.wikipediapreview.shy-fb .wikipediapreview-header-image{display:none}
.wikipediapreview.shy-fb .wikipediapreview-footer{display:none}
.wikipediapreview.shy-fb .wikipediapreview-body{max-height:none;overflow:visible;margin:0;
  padding:1.4rem;display:flex;flex-direction:column;gap:1.1rem}
.wikipediapreview .tf-q{margin:0;font-size:2rem;line-height:1.25;font-weight:800;color:var(--acc2)}
.wikipediapreview .tf-term{color:#fff}
.wikipediapreview .tf-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;cursor:pointer;background:var(--acc2);color:#0e0f13;border:none;border-radius:10px;
  padding:.5rem;font-weight:800;font-size:1.2rem}
.wikipediapreview .tf-btn:hover{filter:brightness(1.06)}
.wikipediapreview .tf-btn svg{width:18px;height:18px;display:block;flex:0 0 auto}

/* share */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.5rem 0 .5rem}
.share-label{color:var(--mut);font-size:.85rem;font-weight:600;margin-right:.1rem}
.share-btn{font-size:.8rem;font-weight:700;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line);
  color:var(--ink);background:var(--panel);cursor:pointer;line-height:1}
.share-btn:hover{text-decoration:none;filter:brightness(1.2)}
.share-btn.tg{border-color:#2aabee;color:#2aabee}
.share-btn.fb{border-color:#1877f2;color:#4d94ff}
.share-btn.wa{border-color:#25d366;color:#25d366}
.share-btn.copy{border-color:var(--acc2);color:var(--acc2)}

/* comments */
.comments{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.5rem}
.comments h2{font-size:1.2rem}
.comment-list{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:1.4rem}
.comment{display:flex;flex-direction:column;gap:.25rem}
/* the message "bubble" */
.bubble{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;
  display:flex;gap:.7rem;align-items:flex-start;transition:opacity .5s}
.comment.new .bubble{animation:pop .5s ease}
@keyframes pop{from{background:#23283a}to{background:var(--panel)}}
/* AI moderator's verdict line ABOVE the bubble: wand/coin + one-line reason (or typing dots) */
/* verdict line under the bubble: [score …… wand] | reason
   coin-wrap is a fixed-width gutter, contents right-aligned, so every wand sits the
   SAME distance from the reason, and every score the same distance from the wand.
   Gutter width = bubble padding-left (.9rem) + avatar (46px) + avatar gap (.7rem) − the
   wand→reason gap (.4rem), so the reason lines up exactly with the comment text. */
.verdict{margin-left:14px;font-size:.82rem;color:var(--mut);min-height:1.1rem;line-height:1.5}
.verdict .coin{font-weight:bold}
.verdict .wand{display:inline-block;vertical-align:middle;position:relative;top:-1px}
.verdict .reason{font-style:normal}
.verdict .cat{display:inline-block;padding:.1em .45em;border-radius:0;vertical-align:baseline;
  font-size:.7rem;font-weight:400;line-height:1.4;color:#000;opacity:.92;text-transform:uppercase;margin-right:.25em}
.comment.state-hidden .verdict .reason,.comment.state-spam .verdict .reason{color:var(--acc)}
/* "typing…" dots while the verdict is still being computed */
.typing{display:inline-flex;gap:3px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--mut);display:inline-block;animation:typing 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes typing{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* removed by moderation — fades out, still readable until the page is refreshed */
.comment.is-gone .bubble{opacity:.4}
.comment.is-gone .comment-body{text-decoration:line-through;text-decoration-color:var(--acc)}
.avatar{width:46px;height:46px;margin-left:-34px;margin-top:-12px;border-radius:50%;object-fit:contain;padding:5px;flex:0 0 auto;
  background:radial-gradient(circle at 30% 25%,#2b3146,#171922);border:1px solid var(--line)}
.comment-main{flex:1 1 auto;min-width:0}
.comment-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem;gap:.5rem}
.head-right{display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
.coin-wrap{display:inline-flex;align-items:center;gap:.22rem}
.coin{font-size:.82rem;line-height:1}
.coin-on{color:var(--acc2)}
.coin-off{color:var(--mut)}
.wand{width:16px;height:16px;display:inline-block;vertical-align:middle}
.wand.zero{filter:grayscale(1);opacity:.35}
.wand.plus{filter:drop-shadow(0 0 3px rgba(167,139,250,.55))}
.wand.assessing{animation:wandpulse 2s ease-in-out infinite}
@keyframes wandpulse{0%,100%{filter:grayscale(1);opacity:.4}50%{filter:none;opacity:1}}
.author{font-weight:700;font-size:.9rem;color:var(--acc2)}
.quote-btn{background:none;border:none;color:var(--mut);cursor:pointer;font-size:.8rem}
.quote-btn:hover{color:var(--ink)}
/* admin controls on comment hover */
.c-head-r{display:flex;align-items:center;gap:.4rem}
.c-admin{display:flex;gap:3px;opacity:0;transition:.15s;pointer-events:none}
.comment:hover .c-admin,.c-admin:focus-within{opacity:1;pointer-events:auto}
.c-adm-btn{background:none;border:1px solid transparent;border-radius:5px;color:var(--mut);cursor:pointer;font-size:.8rem;line-height:1;padding:.15rem .35rem}
.c-adm-btn.c-del:hover{border-color:var(--acc);color:var(--acc)}
.c-adm-btn.c-rem:hover{border-color:var(--acc2);color:var(--acc2)}
@media(hover:none){.c-admin{opacity:1;pointer-events:auto}}
.quoted{margin:.1rem 0 .45rem;padding:.35rem .6rem;border-left:3px solid var(--acc);
  background:#1a1d28;border-radius:0 8px 8px 0;color:var(--mut);font-size:.9rem}
.quoted .qa{color:var(--acc2);font-weight:700;margin-right:.25rem}
.comment-body blockquote{margin:.2rem 0 .5rem;padding:.3rem .7rem;border-left:3px solid var(--line);color:var(--mut);font-size:.92rem}
.empty{color:var(--mut)}

/* live header above the comment thread (change-meter + live moderation/rewrite status) */
.live-bar{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:.7rem;
  background:#424e6a;border:1px solid #4a5578;border-radius:0 0 12px 12px;padding:.6rem .9rem;
  margin:0 0 1rem;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.livebar-hint{font-size:.78rem;color:var(--mut);margin:0 0 .8rem}
.lb-magic{font-weight:700;background:linear-gradient(90deg,#a78bfa,#60a5fa,#f472b6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lb-meter{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0}
.lb-meter .wand{width:18px;height:18px;flex:0 0 auto}
.lb-track{flex:1 1 auto;height:7px;background:#23283a;border-radius:999px;overflow:hidden;min-width:40px}
.lb-track>i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#a78bfa,#60a5fa,#f472b6);transition:width .6s ease}
.lb-pct{flex:0 0 auto;font-size:.78rem;color:var(--mut)}
.lb-live{display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0}
.lb-msg{font-size:.82rem;color:var(--acc2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.lb-prog{flex:0 0 70px;height:5px;background:#23283a;border-radius:999px;overflow:hidden;position:relative}
.lb-prog.mod{flex-basis:140px}
.lb-prog.rewrite{flex-basis:210px}
.lb-prog>i{position:absolute;left:0;top:0;bottom:0;width:20%;border-radius:999px;
  background:linear-gradient(90deg,#a78bfa,#60a5fa)}
.lb-prog.run>i{animation:lbprog 2.2s ease-in-out infinite alternate}
.lb-prog.rewrite.run>i{animation-duration:8.8s}
@keyframes lbprog{from{width:20%}to{width:88%}}
.lb-update{flex:0 0 auto;background:var(--acc2);color:#0e0f13;border:none;border-radius:999px;
  padding:.4rem .9rem;font-weight:800;font-size:.85rem;cursor:pointer;white-space:nowrap;
  animation:lbupdate 1.4s ease-in-out infinite}
@keyframes lbupdate{0%,100%{box-shadow:0 0 0 0 rgba(173,255,47,.5)}50%{box-shadow:0 0 0 6px rgba(173,255,47,0)}}
/* version boundary in the thread: green dotted full-width line + bubble */
.ver-divider{list-style:none;position:relative;border-top:2px dotted var(--ok);margin:.6rem 0;height:0;text-align:center}
.ver-divider .ver-bubble{position:relative;top:-1rem;display:inline-block;color:var(--ok);background:black;
  font-size:.72rem;font-weight:800;padding:.06rem .55rem;border-radius:999px}

/* form */
.comment-form{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.comment-form input,.comment-form textarea{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:.7rem .8rem;font:inherit;font-size:.95rem}
.comment-form textarea{min-height:90px;resize:vertical}
.comment-form input[name=author]{color:var(--acc2);font-weight:700; margin-top: 10px}
.comment-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.comment-form button{align-self:flex-start;background:var(--acc);color:#fff;border:none;
  padding:.6rem 1.4rem;border-radius:999px;font-weight:700;cursor:pointer}
.comment-form button:hover{filter:brightness(1.1)}
.quote-preview{background:#1d2030;border-left:3px solid var(--acc2);border-radius:8px;
  padding:.5rem .7rem;font-size:.88rem;color:var(--mut)}
.quote-preview strong{color:var(--acc2);margin-right:.3rem}
.quote-preview .drop{float:right;cursor:pointer;color:var(--acc);font-weight:700;margin-left:.5rem}

.more-btn{display:block;margin:1.6rem auto .4rem;padding:.85rem 2.5rem;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--ink);
  font-weight:700;font-size:1.05rem;max-width:340px}
.more-btn:hover{border-color:var(--acc);color:var(--acc)}

.pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin:1rem 0 .5rem}
.pager .page{min-width:2.2rem;text-align:center;padding:.45rem .6rem;border:1px solid var(--line);
  border-radius:8px;color:var(--mut);font-weight:600}
.pager .page:hover{color:var(--ink);border-color:var(--mut)}
.pager .is-current{background:var(--acc);color:#fff;border-color:var(--acc)}

.site-footer{border-top:1px solid var(--line);color:var(--mut);text-align:center;padding:1.5rem;font-size:.85rem}
.site-footer a{color:var(--acc2)}

/* header nav */
.site-header nav{display:flex;align-items:center;gap:.6rem}
.nav-admin{color:#ffd166;border:1px solid #ffd166;padding:.35rem .7rem;border-radius:999px;font-size:.85rem;font-weight:700}
.nav-admin:hover{filter:brightness(1.15);text-decoration:none}
.nav-digest{color:var(--acc2);border:1px solid var(--acc2);padding:.35rem .7rem;border-radius:999px;font-size:.85rem;font-weight:700}
.nav-digest:hover{filter:brightness(1.2);text-decoration:none}

/* digest page */
.digest-cover{display:block;width:100%;height:auto;border-radius:var(--rad);margin-bottom:1.2rem}
.digest-head{margin-bottom:1rem}
.digest-head h1{font-size:2rem;line-height:1.15;margin:.2rem 0 .3rem}
.digest-title{color:var(--ink);font-weight:800}
.digest-title .dg-date{color:var(--acc2);white-space:nowrap}
.digest-slogan{font-size:1.2rem;font-weight:700;color:var(--acc2);margin:.1rem 0}
.digest-date{color:var(--mut);font-size:.85rem;margin:.1rem 0}
/* cinematic self-destruct countdown */
.self-destruct{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  margin:0 0 1.4rem;padding:.7rem 1rem;border:1px solid #3a1d1d;border-radius:12px;
  background:linear-gradient(180deg,#1c1113,#150e10);text-align:center}
.self-destruct .sd-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:#ff8a8a;font-weight:700}
.self-destruct .sd-clock{font:800 1.7rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#ff5c5c;letter-spacing:.06em;text-shadow:0 0 8px rgba(255,92,92,.55);font-variant-numeric:tabular-nums}
.self-destruct.sd-urgent{animation:sdpulse 1s steps(2,start) infinite;border-color:#5a1f1f}
.self-destruct.sd-urgent .sd-clock{color:#ff2d2d;text-shadow:0 0 14px rgba(255,45,45,.85)}
.self-destruct.is-dead{border-color:#444;background:#141414}
.self-destruct.is-dead .sd-label{display:none}
.self-destruct.is-dead .sd-clock{color:#888;text-shadow:none;letter-spacing:.2em}
@keyframes sdpulse{0%,100%{box-shadow:0 0 0 rgba(255,45,45,0)}50%{box-shadow:0 0 18px rgba(255,45,45,.35)}}
@media (prefers-reduced-motion:reduce){.self-destruct.sd-urgent{animation:none}}

.digest-intro{font-size:1.15rem;line-height:1.5;color:var(--ink);
  border-left:3px solid var(--acc2);background:#1a1d28;padding:.7rem 1rem;border-radius:0 10px 10px 0;margin:.4rem 0 1.6rem}
.digest-list{list-style:none;counter-reset:dg;padding:0;margin:0;display:flex;flex-direction:column;gap:1.1rem}
.digest-item{counter-increment:dg;display:grid;grid-template-columns:240px minmax(0,1fr);
  grid-template-rows:auto 1fr;grid-template-areas:"img text" "topc text";gap:.6rem 1rem;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;position:relative;cursor:pointer}
.digest-item:hover{border-color:#3a4050}
.digest-item::before{content:counter(dg);position:absolute;top:.5rem;left:.6rem;font-weight:800;font-size:.85rem;
  color:var(--acc2);background:rgba(14,15,19,.7);border-radius:6px;padding:0 .35rem;line-height:1.4;z-index:3;pointer-events:none}
/* full-card tap target (reliable on iOS); real links/buttons sit above it */
.dg-cover-link{position:absolute;inset:0;z-index:1}
.digest-thumb{grid-area:img;display:block;min-width:0;position:relative;z-index:2}
.digest-thumb img{width:100%;height:auto;border-radius:8px;display:block}
.digest-text{grid-area:text}
/* desktop: pin the top comment to the BOTTOM of the card (under the image column) */
.digest-topc{grid-area:topc;align-self:end;margin-top:0}
.digest-text{min-width:0;display:flex;flex-direction:column}
.digest-para{margin:.1rem 0 .6rem;line-height:1.5;color:#cdd1da}
.digest-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-top:12px}
.digest-foot .digest-more{display:inline-block;color:var(--acc2);border:1px solid var(--acc2);background:transparent;
  font-size:.85rem;white-space:nowrap;padding:.4rem .85rem;border-radius:999px;line-height:1;position:relative;z-index:2}
.digest-foot .digest-more:hover{filter:brightness(1.2);text-decoration:none}
.digest-foot .card-meta{margin-top:0;flex:1;min-width:120px;justify-content:flex-end}
.digest-subscribe{display:inline-block;margin:1.2rem 0 .3rem;padding:.55rem 1.1rem;border-radius:999px;
  font-weight:700;background:#2aabee;color:#fff}
.digest-subscribe:hover{filter:brightness(1.1);text-decoration:none}
.digest-note{color:var(--mut);font-size:.85rem;font-style:italic;margin-top:.6rem}

@media (max-width:640px){
  .summary{display:none}
  .more-btn{width:100%;max-width:none}
  .card h2{font-size:1.15rem}
  /* stack: image, then the material paragraph, then the comment */
  .digest-item{grid-template-columns:1fr;grid-template-rows:auto;
    grid-template-areas:"img" "text" "topc";gap:.7rem}
  .digest-topc{align-self:auto}
  .digest-thumb img{border-radius:8px}
}