/* ============================================================================
   Reddit Answers — Sahifa-style news/magazine theme
   Signatures: top bar + logo header + dark nav; Oswald uppercase section
   labels with accent underline; horizontal post rows in white blocks; boxed
   sidebar widgets with thumbnail popular lists. Applies ui-ux-pro-max rules:
   16px+ / 1.6 line-height, semantic tokens + dark mode, reserved image space,
   150–250ms transforms, focus rings, reduced-motion, 44px touch targets.
   ========================================================================== */

:root {
  --bg:#edeff2; --surface:#ffffff; --surface-2:#f5f6f8; --surface-3:#eceef1;
  --border:#e2e5ea; --border-strong:#d3d8df;
  --text:#28292b; --text-2:#5b626c; --text-3:#676d78;
  --accent:#2563eb; --accent-2:#1d4ed8; --ok:#3a9c48; --err:#d33b26;
  --nav-bg:#1f2733; --nav-fg:#e6e8ea; --topbar-bg:#161d27;
  --shadow-sm:0 1px 2px rgba(20,25,35,.06);
  --shadow:0 1px 3px rgba(20,25,35,.08), 0 8px 22px rgba(20,25,35,.07);
  --shadow-lg:0 4px 10px rgba(20,25,35,.10), 0 20px 46px rgba(20,25,35,.12);
  --r:6px; --r-sm:5px; --r-xs:4px;
  --font-head:'Inter', system-ui, -apple-system, sans-serif;
  --font-title:'Inter', system-ui, -apple-system, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --measure:1180px;
  --ease:cubic-bezier(.2,.6,.2,1); --dur:.18s;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#15171a; --surface:#1d2024; --surface-2:#24272c; --surface-3:#2b2f35;
    --border:#31353c; --border-strong:#3e434b;
    --text:#e7e9ec; --text-2:#a6adb7; --text-3:#9aa1af;
    --accent:#4b8bf5; --accent-2:#6ea8ff; --ok:#4bbd5b; --err:#ef5d45;
    --nav-bg:#0e131a; --nav-fg:#dfe2e6; --topbar-bg:#090d12;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 3px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.5);
    --shadow-lg:0 6px 14px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:color-mix(in srgb, var(--accent) 24%, transparent); }

/* ---------- shells ---------- */
.mast-inner { max-width:1180px; margin:0 auto; padding:0 22px; }
.wrap { max-width:var(--measure); margin:22px auto 70px; padding:0 22px; }

/* ---------- top bar + header + nav ---------- */
.topbar { background:var(--topbar-bg); color:#aab1bb; font-size:12.5px; }
.topbar .mast-inner { display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar .tb-tag { color:#8b929c; }
.site-header { background:var(--surface); border-bottom:1px solid var(--border); }
.site-header .mast-inner { display:flex; align-items:center; gap:20px; min-height:96px; padding-top:16px; padding-bottom:16px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .mark { width:46px; height:46px; border-radius:8px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--font-title); font-weight:700; font-size:20px; }
.brand .brandname { font-family:var(--font-title); font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--text); }
.header-tag { margin-left:auto; color:var(--text-3); font-size:13px; font-style:italic; }
.mainnav { background:var(--nav-bg); position:sticky; top:0; z-index:30; box-shadow:var(--shadow-sm); }
.mainnav .mast-inner { display:flex; align-items:stretch; gap:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.mainnav .mast-inner::-webkit-scrollbar { display:none; }
.mainnav a { flex:none; white-space:nowrap; }
.mainnav a { color:var(--nav-fg); font-family:var(--font-head); font-weight:500; text-transform:uppercase; letter-spacing:.03em; font-size:14px; padding:0 18px; height:46px; display:inline-flex; align-items:center; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.mainnav a:hover { background:rgba(255,255,255,.07); }
.mainnav a.on { background:color-mix(in srgb, var(--accent) 72%, #000); color:#fff; }
.sitefoot { background:var(--topbar-bg); color:#8b929c; font-size:13px; margin-top:40px; }
.sitefoot .mast-inner { padding-top:26px; padding-bottom:34px; }

/* ---------- section heading (Sahifa block head) ---------- */
.results-head, .block-head, .widget h4 {
  font-family:var(--font-head); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:17px; color:var(--text); margin:0 0 18px; padding-bottom:9px;
  border-bottom:2px solid var(--border); position:relative;
}
.results-head { margin:32px 0 18px; }
.results-head:after, .block-head:after, .widget h4:after { content:""; position:absolute; left:0; bottom:-2px; width:58px; height:2px; background:var(--accent); }
.widget h4 { font-size:15px; margin-bottom:14px; }
.widget h4:after { width:44px; }

.hint { color:var(--text-3); font-size:13px; }
code { background:var(--surface-2); padding:1.5px 6px; border-radius:4px; font-size:.85em; font-family:ui-monospace,Menlo,monospace; }
.empty { color:var(--text-2); text-align:center; padding:60px 20px; font-size:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); }
.empty a { color:var(--accent); }

/* ---------- search ---------- */
.search { margin-bottom:22px; }
.search input { width:100%; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r); padding:13px 18px; font:inherit; font-size:16px; box-shadow:var(--shadow-sm); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.count { color:var(--text-3); font-size:13px; margin:0 0 16px; }

/* ---------- layout ---------- */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:34px; align-items:start; }
.layout .main { min-width:0; }
.sidebar { position:sticky; top:66px; display:flex; flex-direction:column; gap:22px; }
@media (max-width:940px){ .layout { grid-template-columns:1fr; gap:26px; } .sidebar { position:static; } }

.block { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow-sm); margin-bottom:24px; }
.block .block-head { margin-top:0; }

/* ---------- featured ---------- */
.featured { display:grid; grid-template-columns:1.25fr 1fr; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); margin-bottom:24px; transition:box-shadow var(--dur) var(--ease); }
.featured:hover { box-shadow:var(--shadow-lg); }
.featured .thumb { min-height:300px; }
.featured .pbody { padding:26px 30px; align-self:center; }
.featured .ptitle { font-size:29px; line-height:1.15; }
@media (max-width:720px){ .featured { grid-template-columns:1fr; } .featured .thumb { min-height:0; aspect-ratio:16/9; } }

/* ---------- post rows (horizontal, news list) ---------- */
.postlist { display:flex; flex-direction:column; }
.post { display:grid; grid-template-columns:230px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); }
.post:first-child { padding-top:2px; }
.post:last-child { border-bottom:0; padding-bottom:2px; }
.thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); border-radius:var(--r-sm); }
.thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
/* featured cover can be taller than 16:9 (its text column drives the row) — contain so the AI headline is never cropped */
.featured .thumb { align-self:stretch; }
.featured .thumb img { object-fit:contain; background:var(--surface-2); }
.post:hover .thumb img, .featured:hover .thumb img { transform:scale(1.04); }
.thumb.placeholder { display:grid; place-items:center; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 18%, var(--surface)), var(--surface-2)); }
.thumb.placeholder span { font-family:var(--font-title); font-size:40px; font-weight:700; color:color-mix(in srgb,var(--accent) 66%, var(--text-3)); }
.pbody { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ptags { display:flex; gap:10px; flex-wrap:wrap; }
.ptags span { font-family:var(--font-head); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.ptitle { font-family:var(--font-title); font-weight:700; font-size:20px; line-height:1.25; letter-spacing:-.015em; margin:0; color:var(--text); }
.featured .ptitle { font-weight:800; letter-spacing:-.022em; }
.brand .brandname { font-weight:800; letter-spacing:-.02em; }
.post:hover .ptitle, .featured:hover .ptitle { color:var(--accent); }
.pexcerpt { color:var(--text-2); font-size:14.5px; line-height:1.55; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pmeta { margin-top:auto; padding-top:4px; color:var(--text-3); font-size:12.5px; display:flex; gap:9px; align-items:center; }
.pmeta .dot-sep { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
@media (max-width:520px){ .post { grid-template-columns:1fr; } .featured .ptitle { font-size:23px; } }

/* ---------- pagination ---------- */
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin:24px 0 2px; }
.pager a, .pager span.cur { min-width:44px; height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text); font-size:14px; font-weight:700; transition:all var(--dur) var(--ease); }
.pager a:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.pager .cur { color:var(--text-3); font-weight:400; }
.pager .disabled { color:var(--text-3); background:transparent; pointer-events:none; }

/* ---------- article ---------- */
.arthead { margin:0 0 20px; }
.kicker { font-family:var(--font-head); font-size:13px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.crumbs { font-size:12.5px; color:var(--text-3); margin-bottom:18px; line-height:1.5; }
.crumbs a { color:var(--text-2); font-weight:600; }
.crumbs a:hover { color:var(--accent); }
.crumbs > * + *::before { content:"\203A"; margin:0 9px; color:var(--text-3); opacity:.5; font-weight:400; }
.crumbs .cur { color:var(--text-3); font-weight:500; }
.headline { font-family:var(--font-title); font-weight:800; font-size:clamp(28px, 4vw, 40px); line-height:1.14; margin:0 0 14px; letter-spacing:-.022em; }
.dek { font-size:18px; line-height:1.5; color:var(--text-2); margin:0 0 18px; }
.byline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--text-3); font-size:13px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:12px 0; }
.byline .dot-sep { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.byline .adminbar { margin-left:auto; }
.shortlink { background:none; border:0; padding:0; margin:0; font:inherit; font-size:13px; color:var(--text-2); cursor:pointer; }
.shortlink:hover { color:var(--accent); }
.shortlink.copied::after { content:" · copied"; color:var(--ok); font-weight:600; }
.post-full { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:28px 32px 34px; box-shadow:var(--shadow-sm); }
@media (max-width:520px){ .post-full { padding:20px 18px; } }

.cover { margin:22px 0; border-radius:var(--r-sm); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--surface-2); }
.cover img { width:100%; height:auto; }

/* ---------- prose ---------- */
.prose { font-size:18px; line-height:1.72; color:var(--text); }
.prose p { margin:0 0 20px; }
.prose h3 { font-family:var(--font-title); font-weight:700; font-size:22px; line-height:1.25; margin:32px 0 12px; }
.prose .li { position:relative; margin:8px 0 8px 24px; }
.prose .li:before { content:""; position:absolute; left:-18px; top:.66em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prose img.hero, .hero { width:100%; height:auto; border-radius:var(--r-sm); margin:24px 0; box-shadow:var(--shadow-sm); background:var(--surface-2); }
.lead, .tldr { font-size:19px; line-height:1.62; color:var(--text); background:var(--surface-2); border-left:3px solid var(--accent); padding:16px 20px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:22px 0; }

/* ---------- pros / cons ---------- */
.guide { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:14px 0; }
@media (max-width:620px){ .guide { grid-template-columns:1fr; } }
.gcol { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:18px 20px; }
.gcol .ghead { font-family:var(--font-head); font-weight:600; margin-bottom:10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.gcol .ghead.pros { color:var(--ok); }
.gcol .ghead.cons { color:var(--err); }
.gcol .li { margin:8px 0; padding-left:20px; position:relative; font-size:15px; line-height:1.5; }
.gcol .ghead.pros ~ .li:before, .gcol .ghead.cons ~ .li:before { content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; }
.gcol .ghead.pros ~ .li:before { background:var(--ok); }
.gcol .ghead.cons ~ .li:before { background:var(--err); }
.whofor { color:var(--text-2); margin:14px 2px; font-size:15px; }
.whofor b { color:var(--text); }

/* ---------- faq ---------- */
.faq { border:1px solid var(--border); border-radius:var(--r-sm); padding:2px 20px; background:var(--surface-2); }
.faqitem { padding:18px 0; border-bottom:1px solid var(--border); }
.faqitem:last-child { border-bottom:0; }
.faqq { font-weight:700; font-size:16px; margin-bottom:6px; }
.faqa { color:var(--text-2); font-size:15px; line-height:1.6; }

/* ---------- tags ---------- */
.tags { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0 4px; }
.tag { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:5px 11px; font-size:12.5px; color:var(--text-2); font-weight:700; transition:all var(--dur) var(--ease); }
.tag:hover { color:#fff; background:var(--accent); border-color:var(--accent); }

/* ---------- sidebar widgets ---------- */
.widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow-sm); }
.wlist { display:flex; flex-direction:column; }
.wlist a { display:block; padding:10px 0; border-bottom:1px solid var(--border); color:var(--text); font-size:14px; line-height:1.35; font-weight:700; transition:color var(--dur) var(--ease); }
.wlist a:last-child { border-bottom:0; padding-bottom:0; }
.wlist a:first-child { padding-top:0; }
.wlist a:hover { color:var(--accent); }
.wlist a .n { color:var(--accent); font-family:var(--font-head); font-size:14px; font-weight:600; margin-right:10px; }
/* popular list with thumbnails */
.pop a { display:grid; grid-template-columns:70px 1fr; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); }
.pop a:last-child { border-bottom:0; padding-bottom:0; }
.pop a:first-child { padding-top:0; }
.pop .pthumb { width:70px; height:52px; border-radius:var(--r-xs); object-fit:cover; background:var(--surface-2); }
.pop .ptx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pop .pt { font-size:13.5px; font-weight:700; line-height:1.3; color:var(--text); transition:color var(--dur) var(--ease); }
.pop .pv { font-size:11px; color:var(--text-3); font-weight:600; }
.pop a:hover .pt { color:var(--accent); }
/* recent posts list (thumb + title + date) */
.recent { display:flex; flex-direction:column; }
.recent .ritem { display:flex; gap:11px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); color:var(--text); }
.recent .ritem:last-child { border-bottom:0; padding-bottom:0; }
.recent .ritem:first-child { padding-top:0; }
.recent .rthumb { width:60px; height:45px; border-radius:var(--r-xs); object-fit:cover; background:var(--surface-2); flex:none; }
.recent .rtx { display:flex; flex-direction:column; gap:3px; min-width:0; }
.recent .rt { font-size:13.5px; font-weight:700; line-height:1.3; color:var(--text); transition:color var(--dur) var(--ease); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.recent .ritem:hover .rt { color:var(--accent); }
.recent .rd { font-size:11px; color:var(--text-3); font-weight:600; }
.tagcloud { display:flex; flex-wrap:wrap; gap:8px; }
.tagcloud a { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:5px 11px; font-size:12.5px; color:var(--text-2); font-weight:700; transition:all var(--dur) var(--ease); }
.tagcloud a:hover { color:#fff; background:var(--accent); border-color:var(--accent); }
.tagcloud.biglist { gap:10px; }
.tagcloud.biglist a { font-size:14px; padding:8px 14px; }
.tagcloud a .tc-n { margin-left:6px; padding-left:6px; border-left:1px solid var(--border-strong); color:var(--text-3); font-size:11px; }
.tagcloud a:hover .tc-n { color:rgba(255,255,255,.85); border-left-color:rgba(255,255,255,.4); }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { background:var(--surface); color:var(--text-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:7px 13px; font-size:13px; font-weight:700; transition:all var(--dur) var(--ease); }
.chip:hover { color:#fff; background:var(--accent); border-color:var(--accent); }

/* ---------- admin ---------- */
.status { display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:13px; margin:0 0 22px; padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); }
.status span { display:inline-flex; align-items:center; gap:7px; }
.status a { color:var(--accent-2); }
.pill { width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.pill.ok { background:var(--ok); } .pill.no { background:var(--err); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow-sm); }
form.card, form.login { display:grid; gap:12px; }
.login { max-width:400px; margin:30px auto; }
.captcha-box { display:inline-flex; align-items:center; background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--r-xs); padding:9px 18px; width:max-content; font-family:var(--font-title); font-weight:800; font-size:24px; line-height:1; letter-spacing:6px; color:var(--text); user-select:all; -webkit-user-select:all; cursor:text; }
label { font-size:13px; color:var(--text-2); font-weight:700; }
textarea, input[type=password], .login input[type=text] { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r-xs); padding:12px 14px; font:inherit; font-size:15px; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
textarea { resize:vertical; min-height:72px; }
textarea:focus, input[type=password]:focus, .login input[type=text]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 15%, transparent); }
button.go { background:var(--accent); color:#fff; border:0; border-radius:var(--r-xs); padding:12px 22px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.03em; font-size:15px; font-weight:500; cursor:pointer; justify-self:start; min-height:44px; transition:filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
button.go:hover { filter:brightness(1.07); }
button.go:active { transform:translateY(1px); }
.error { color:var(--err); background:color-mix(in srgb,var(--err) 10%,transparent); border-color:color-mix(in srgb,var(--err) 40%,var(--border)); }
.okmsg { color:var(--ok); background:color-mix(in srgb,var(--ok) 10%,transparent); border-color:color-mix(in srgb,var(--ok) 40%,var(--border)); }
.err-text { color:var(--err); font-size:13px; }
.row { display:flex; align-items:center; gap:12px; padding:12px 18px; }
.rowq { flex:1; font-weight:700; font-size:15px; color:var(--text); min-width:0; }
.rowq:hover { color:var(--accent); }
.row form, .qrow form, .adminbar form { margin:0; }
.badge { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:2px 9px; font-size:11.5px; color:var(--text-2); font-weight:700; }
.del { background:transparent; border:1px solid var(--border); color:var(--text-3); border-radius:var(--r-xs); padding:6px 10px; cursor:pointer; min-height:36px; transition:all var(--dur) var(--ease); }
.del:hover { color:var(--err); border-color:var(--err); }
.qrow { display:flex; align-items:center; gap:12px; padding:12px 18px; }
.qrow .qtext { flex:1; font-size:14.5px; }
.qsort { font-family:var(--font-body); font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--text-3); margin-left:10px; }
.qsort a { color:var(--text-2); font-weight:600; margin:0 2px; }
.qsort a.on, .qsort a:hover { color:var(--accent); }
.mini { background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:var(--r-xs); padding:7px 13px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; white-space:nowrap; min-height:36px; transition:all var(--dur) var(--ease); }
.mini:hover { border-color:var(--border-strong); }
.mini.add:hover { color:var(--ok); border-color:var(--ok); }
.mini.rej:hover { color:var(--err); border-color:var(--err); }
.adminbar { margin-left:auto; display:flex; gap:7px; align-items:center; }

/* table of contents */
.toc { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-sm); padding:16px 20px 16px 22px; margin:24px 0; }
.toc-h { font-family:var(--font-head); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.toc ol { margin:0; padding-left:20px; }
.toc li { margin:6px 0; font-size:15px; line-height:1.4; }
.toc a { color:var(--text-2); }
.toc a:hover { color:var(--accent); }
.prose h3 { scroll-margin-top:76px; }

/* comments */
.comments { margin-top:34px; }
.comment { padding:15px 0; border-bottom:1px solid var(--border); }
.comment:first-of-type { border-top:1px solid var(--border); }
.cmeta { font-size:13px; color:var(--text-3); margin-bottom:5px; }
.cmeta .cname { color:var(--text); font-weight:700; }
.cbody { font-size:15px; line-height:1.6; color:var(--text); }
.chint { color:var(--text-3); font-size:14.5px; }
.cform { display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.cinput { background:var(--bg); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r-xs); padding:11px 13px; font:inherit; font-size:15px; }
.cinput:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%, transparent); }
textarea.cinput { min-height:92px; resize:vertical; }
.cform .go { align-self:start; }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }

/* reading progress ("speed") bar */
.progress-bar { position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:60; transition:width .08s linear; box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%, transparent); }

/* footer links */
.foot-links { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:12px; }
.foot-links a { color:#aeb4bd; font-size:13.5px; font-weight:600; }
.foot-links a:hover { color:#fff; }
.foot-copy { color:#7e8590; font-size:12.5px; }

/* static content pages (terms / privacy): narrower reading column */
.page-page .wrap { max-width:820px; }
.brand .mark svg { display:block; }

/* ---------- a11y / motion ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, .post:focus-visible, .chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button, .chip, .post, .tag, a { cursor:pointer; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .post:hover .thumb img, .featured:hover .thumb img { transform:none; }
}