/* Daadkhaast public site — design 1a "Cream hero + card grid" (docs/design/Daadkhaast.dc.html).
   Single light theme by design. No inline styles anywhere (CSP style-src 'self'). */

@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url("fonts/Vazirmatn-Regular.woff2") format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url("fonts/Vazirmatn-Medium.woff2") format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:600;font-display:swap;src:url("fonts/Vazirmatn-SemiBold.woff2") format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;src:url("fonts/Vazirmatn-Bold.woff2") format("woff2")}

:root{
  color-scheme:light;
  --page:#fffaf0; --field:#fffdf7; --surface:#f5f0e0; --surface-hover:#efe8d4; --soft:#faf5e8;
  --line:#efe8d6; --border:#e5dfcc; --border-strong:#d9d2bd;
  --ink:#0a0a0a; --ink-2:#1a1a1a; --ink-3:#3a3a3a; --muted:#6a6a6a;
  --teal:#1a3a3a; --mustard:#e8b94a; --lavender:#b8a4ed; --peach:#ffb084; --mint:#a4d4c5;
  --coral:#ff6b5a; --pink:#ff4d8b; --error:#b3261e; --error-soft:#ffd6cf;
  --r-sm:6px; --r:12px; --r-lg:16px; --r-xl:24px; --pill:9999px;
  --font:Vazirmatn,"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gutter:48px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.8 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--teal)}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;height:auto}
*:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
[dir="ltr"]{unicode-bidi:isolate}
.muted{color:var(--muted)}
.small{font-size:13px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Honeypot: in the DOM for bots, invisible and unreachable for people (no display:none, no off-screen offset). */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.frame{max-width:1280px;margin:0 auto}
.gutter{padding-inline:var(--gutter)}

/* ---------- Header ---------- */
.site-header{min-height:76px;display:flex;align-items:center;gap:28px;padding-block:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark{position:relative;width:34px;height:34px;flex:none}
.mark::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mustard)}
.mark::after{content:"";position:absolute;inset-inline:0;bottom:0;height:17px;border-radius:0 0 17px 17px;background:var(--teal)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-size:22px;font-weight:700}
.brand-sub{font-size:12px;color:var(--muted);font-weight:500}
.nav{display:flex;gap:22px;font-size:14px;font-weight:500;flex-wrap:wrap}
.nav a,.header-link{color:var(--ink-3);text-decoration:none}
.nav a:hover,.header-link:hover{color:var(--ink);text-decoration:underline}
.header-search{flex:1;display:flex;justify-content:flex-end;min-width:200px}
.search{display:flex;align-items:center;gap:8px;height:42px;width:280px;max-width:100%;border:1px solid var(--border);border-radius:var(--r);padding-inline:14px;background:var(--field)}
.search:focus-within{border-color:var(--ink);outline:3px solid var(--teal);outline-offset:2px}
.search-icon{width:12px;height:12px;border:2px solid var(--muted);border-radius:50%;flex:none}
.search input[type="search"]{border:0;background:transparent;outline:none;font-size:14px;flex:1;min-width:0;width:auto;height:auto;padding:0}
.search input[type="search"]:focus-visible{outline:none}
.header-link{font-size:14px;font-weight:500}
.user{display:flex;align-items:center;gap:10px;font-size:14px}
.user-name{font-weight:600}
.btn-quiet{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer}
.btn-quiet:hover{border-color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding-inline:20px;background:var(--ink);color:#fff;border:0;border-radius:var(--r);font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--teal);color:#fff}
.btn-lg{height:48px;padding-inline:24px;font-size:15px}
.btn-xl{height:52px;padding-inline:28px;font-size:16px}
.btn-secondary{background:var(--page);color:var(--ink);border:1px solid var(--border-strong)}
.btn-secondary:hover{background:var(--soft);color:var(--ink);border-color:var(--ink)}
.linkbtn{background:none;border:0;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:var(--ink)}

/* ---------- Flash messages ---------- */
.flashes{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.flash{padding:14px 20px;border-radius:var(--r);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:15px;font-weight:500;background:var(--mint)}
.flash-error{background:var(--error-soft)}
.flash-close{background:none;border:0;font-size:20px;line-height:1;cursor:pointer;padding:0 4px}
.flash-close[hidden]{display:none}

/* ---------- Home hero ---------- */
.hero{padding-block:64px 40px;display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.eyebrow{font-size:13px;font-weight:600;color:var(--muted)}
.hero h1{font-size:54px;line-height:1.3}
.hero-lede{font-size:18px;line-height:1.9;color:var(--ink-3);max-width:600px;text-wrap:pretty}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;height:340px;border-radius:var(--r-xl);background:var(--soft);overflow:hidden}
.hero-art span{position:absolute;display:block}
.hero-art .s1{width:210px;height:210px;border-radius:50%;background:var(--mustard);top:40px;left:60px}
.hero-art .s2{width:260px;height:130px;border-radius:130px 130px 0 0;background:var(--teal);bottom:0;left:150px}
.hero-art .s3{width:110px;height:110px;border-radius:18px;background:var(--lavender);top:56px;right:48px;transform:rotate(12deg)}
.hero-art .s4{width:64px;height:64px;border-radius:50%;background:var(--peach);bottom:44px;right:70px}
.hero-art .s5{width:28px;height:28px;border-radius:50%;background:var(--pink);top:28px;left:290px}

/* ---------- Category chips and dots ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips-top{padding-top:32px}
.chip{height:38px;padding-inline:16px;border-radius:var(--pill);border:1px solid var(--border);background:transparent;color:var(--ink);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.dot{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;background:var(--border-strong)}
.dot-sm{width:8px;height:8px}
.tone-0{background:var(--mint)} .tone-1{background:var(--mustard)} .tone-2{background:var(--coral)}
.tone-3{background:var(--peach)} .tone-4{background:var(--lavender)} .tone-5{background:var(--teal)} .tone-6{background:var(--pink)}

/* ---------- Section heading ---------- */
.section-head{padding-top:40px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.section-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.section-title h1,.section-title h2{font-size:32px}
.count{font-size:15px;color:var(--muted)}
.section-link{font-size:14px;font-weight:500}

/* ---------- Pills ---------- */
.pill{display:inline-block;padding:3px 12px;border-radius:var(--pill);font-size:13px;font-weight:600;line-height:1.6;color:var(--ink)}
.pill-question{background:var(--lavender)}
/* Category pill: the category's own colour (same as its dot in the chips) */
.pill-cat{font-size:14px;padding:4px 14px;text-decoration:none}
/* Strong colours get white text. Coral and pink are deepened for the pill so white stays readable (contrast ≥ 4.5). */
.pill-cat.tone-5{color:#fff}
.pill-cat.tone-2{background:#c4493c;color:#fff}
.pill-cat.tone-6{background:#c43d6b;color:#fff}
a.pill-cat:hover{filter:brightness(.95)}
.pill-report{background:var(--peach)}
.pill-answer{background:var(--mint);padding:4px 12px}
.pill-ai{background:var(--surface);border:1px solid var(--border);padding:4px 12px}
.similar-live{background:var(--surface);border-radius:var(--r);padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.similar-live[hidden]{display:none}
.similar-live ul{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px}
.pill-expert{background:var(--mint);font-size:12px;padding:2px 10px}
.tag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-sm);line-height:1.5;white-space:nowrap}
.tag-solid{background:var(--ink);color:#fff}
.tag-outline{border:1px solid var(--ink);padding:2px 10px}

/* ---------- Post cards ---------- */
.cards{padding-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:14px;color:var(--ink);text-decoration:none}
.card:hover{background:var(--surface-hover);color:var(--ink)}
.card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.card-title{font-size:20px;font-weight:600;line-height:1.6;text-wrap:pretty;overflow-wrap:anywhere}
.card-foot{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin-top:auto}
.card-status{font-weight:600;color:var(--ink-3)}
.empty{margin-top:24px;padding:48px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);text-align:center;font-size:17px;color:var(--ink-3)}

/* ---------- Filters (advanced search, English section) ---------- */
.filters{margin-top:24px;padding:20px 24px;background:var(--soft);border-radius:var(--r-lg);display:grid;grid-template-columns:2fr 1.5fr 1fr 1fr 1fr auto;gap:12px;align-items:end}
.filters .field{gap:6px}
.filters label{font-size:13px;font-weight:600}

/* ---------- Ad ---------- */
.ad{margin-top:24px;padding:20px 24px;border:1px solid var(--border);border-radius:var(--r-lg);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ad-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ad-advertiser{font-size:13px;color:var(--muted)}
.ad-text{font-size:16px;font-weight:600}
.ad-image{display:block;border-radius:var(--r);overflow:hidden;max-width:320px}
.ad-link{font-size:14px;font-weight:600}

/* ---------- Pagination ---------- */
.pager{padding-block:32px 64px;display:flex;align-items:center;justify-content:center;gap:16px;font-size:14px;flex-wrap:wrap}
.pager-link{height:40px;padding-inline:18px;border:1px solid var(--border-strong);border-radius:var(--r);display:inline-flex;align-items:center;text-decoration:none;font-weight:600}
.pager-link:hover{border-color:var(--ink)}

/* ---------- Narrow pages (post, forms, content) ---------- */
.narrow{max-width:800px;margin:0 auto;padding-block:40px 72px;display:flex;flex-direction:column;gap:28px}
.narrow-form{max-width:760px;padding-block:48px 80px}
.narrow-done{max-width:680px;padding-block:72px 96px;gap:24px}
.back{align-self:flex-start;font-size:14px;color:var(--ink-3);text-decoration:none}
.back:hover{text-decoration:underline}
.post-head{display:flex;flex-direction:column;gap:18px}
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-3)}
.post-meta .cat{font-size:14px}
.post-title{font-size:40px;line-height:1.45}
.page-title{font-size:44px;line-height:1.35}
.lede{font-size:17px;color:var(--ink-3)}
.prose{font-size:18px;line-height:2;color:var(--ink-2);display:flex;flex-direction:column;gap:14px;overflow-wrap:anywhere}
.prose ul{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:4px}
.source{font-size:14px;color:var(--ink-3);overflow-wrap:anywhere}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-lg{display:flex;flex-direction:column;gap:16px}
.h-sm{font-size:18px}
.h-md{font-size:26px}

/* Owner's post status panel */
.status{position:relative;border-radius:var(--r-lg);padding:20px 24px;background:var(--surface);display:flex;flex-direction:column;gap:12px;
  animation:rise .45s cubic-bezier(.2,.8,.2,1) both;transition:opacity .25s,transform .25s}
.status.leaving{opacity:0;transform:translateY(-6px) scale(.98)}
.status-title{padding-inline-end:84px;min-height:56px}
.status-keep{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.status-keep [hidden]{display:none}
.status-checking,.status-delayed{background:var(--soft);border:2px solid var(--mustard)}
.status-rejected{background:var(--error-soft)}
.status-answered{background:var(--soft);border:2px solid var(--mint)}
.status-title{font-size:20px}

/* The panel's little shape cluster: same flat shapes and palette as the hero art, one mood per state. */
.status-art{position:absolute;top:16px;inset-inline-end:20px;width:72px;height:64px}
.status-art span{position:absolute;display:block}
.status-art .a1{width:44px;height:44px;border-radius:50%;background:var(--mustard);bottom:0;inset-inline-end:0}
.status-art .a2{width:26px;height:26px;border-radius:7px;background:var(--lavender);top:0;inset-inline-start:4px;transform:rotate(12deg)}
.status-art .a3{width:12px;height:12px;border-radius:50%;background:var(--pink);top:6px;inset-inline-end:6px}
/* checking: busy, the square spins, the dot hops, the sun breathes */
.status-checking .a1{animation:breathe 1.6s ease-in-out infinite}
.status-checking .a2{animation:spin 2.4s cubic-bezier(.6,0,.4,1) infinite}
.status-checking .a3{animation:hop .7s ease-in-out infinite alternate}
/* delayed: the AI service is down and a retry is coming, slow and calm */
.status-delayed .a1{border-radius:44px 44px 0 0;height:22px;background:var(--teal);animation:sway 3.2s ease-in-out infinite}
.status-delayed .a2{animation:sway 3.2s ease-in-out -1.6s infinite}
.status-delayed .a3{background:var(--peach);animation:pulse 2.4s ease-in-out infinite}
/* rejected: one shake, then still */
.status-rejected .a1{background:var(--coral);border-radius:12px;animation:shake .5s .2s both}
.status-rejected .a2,.status-rejected .a3{background:var(--border-strong);animation:none}
/* published / answered: the "done" mark from the submitted page pops in */
.status-published .a1,.status-answered .a1{background:var(--mint);animation:pop .55s cubic-bezier(.3,1.6,.5,1) both}
.status-published .a2,.status-answered .a2{width:22px;height:22px;border-radius:6px;background:var(--teal);top:auto;bottom:11px;inset-inline-start:auto;inset-inline-end:11px;
  transform:rotate(45deg);--r0:45deg;animation:pop .55s .12s cubic-bezier(.3,1.6,.5,1) both}
.status-published .a3{background:var(--lavender);animation:float 2.8s ease-in-out infinite}
.status-answered .a3{animation:confetti .9s .3s ease-out both}
.status-text{line-height:1.9}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:600}
.steps li{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);background:var(--page);color:var(--muted);
  animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
.steps li:nth-child(2){animation-delay:.08s} .steps li:nth-child(3){animation-delay:.16s} .steps li:nth-child(4){animation-delay:.24s}
.steps li::before{content:"○"}
.steps .done{color:var(--ink)} .steps .done::before{content:"✓";display:inline-block;animation:pop .4s .35s cubic-bezier(.3,1.6,.5,1) both}
.steps .now{color:var(--ink);background:var(--mustard)} .steps .now::before{content:"●";animation:pulse 1.2s ease-in-out infinite}
.steps .fail{color:var(--ink);background:var(--coral);animation:rise .4s .08s both,shake .5s .5s} .steps .fail::before{content:"✕"}
.steps .off{opacity:.5}
@keyframes pulse{50%{opacity:.3}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes pop{from{opacity:0;transform:scale(.3) rotate(var(--r0,0deg))}}
@keyframes breathe{50%{transform:scale(.86)}}
@keyframes spin{to{transform:rotate(372deg)}}
@keyframes hop{to{transform:translateY(-10px)}}
@keyframes sway{50%{transform:translateY(-4px) rotate(-6deg)}}
@keyframes float{50%{transform:translate(-4px,-6px)}}
@keyframes shake{20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)}}
@keyframes confetti{0%{opacity:0;transform:translate(0,20px) scale(.4)} 60%{opacity:1;transform:translate(-8px,-6px) scale(1.15)} 100%{transform:none}}

/* Status notice */
.notice{border-radius:var(--r-lg);padding:20px 24px;font-size:16px;line-height:1.9;font-weight:500;background:var(--surface)}
.notice-warn{background:var(--mustard)}
.notice a{font-weight:700}

/* Answers */
.answer{background:var(--surface);border-radius:var(--r-xl);padding:32px;display:flex;flex-direction:column;gap:16px}
.answer .prose{font-size:17px;gap:10px}
.dashed{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:24px;font-size:16px;color:var(--ink-3)}
.disclaimer{font-size:13px;color:var(--muted)}

/* Comments */
.comment{border-bottom:1px solid var(--line);padding:4px 0 18px;display:flex;flex-direction:column;gap:10px}
.comment .pill-expert{align-self:flex-start}
.comment-body{font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.comment form{align-self:flex-start}
.panel{background:var(--soft);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px}

/* ---------- Forms ---------- */
.form{display:flex;flex-direction:column;gap:28px}
.field{display:flex;flex-direction:column;gap:8px}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.label,.field>label,legend{font-size:16px;font-weight:600}
.req{color:var(--muted);font-weight:400}
.hint,.helptext{font-size:13px;color:var(--muted);line-height:1.8}
.note{font-size:14px;color:var(--ink-3);line-height:1.8}
input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="password"],input[type="tel"],input[type="date"],input:not([type]),select,textarea{
  width:100%;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--page);font-size:16px;color:var(--ink)}
input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="password"],input[type="tel"],input[type="date"],input:not([type]),select{height:48px;padding-inline:16px}
textarea{padding:12px 16px;line-height:1.9;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
[aria-invalid="true"]{border-color:var(--error)}
.errorlist{list-style:none;margin:0;padding:0;font-size:14px;color:var(--error);font-weight:500}
.errorlist.nonfield{padding:14px 20px;border-radius:var(--r);background:var(--error-soft);color:var(--ink)}
fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:12px}
legend{padding:0;margin-bottom:12px}
input[type="radio"],input[type="checkbox"]{accent-color:var(--ink)}
.check{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:400}
.check input{width:18px;height:18px}
.checks{display:flex;flex-wrap:wrap;gap:8px 20px}
.checks label{display:flex;gap:8px;align-items:center;font-size:15px}

/* Visibility: segmented control */
.seg{display:inline-flex;align-self:flex-start;background:var(--surface);border-radius:var(--r);padding:4px;gap:4px;flex-wrap:wrap}
.seg label{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:9px;cursor:pointer;font-size:15px;font-weight:600}
.seg label:has(input:checked){background:var(--page)}
.seg label.is-off{color:var(--muted);cursor:default}

.form-foot{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:24px;flex-wrap:wrap}

/* ---------- Submitted ---------- */
.done-art{position:relative;width:88px;height:88px}
.done-art::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint)}
.done-art::after{content:"";position:absolute;width:40px;height:40px;border-radius:10px;background:var(--teal);inset-inline-start:24px;top:24px;transform:rotate(45deg)}

.content h2{font-size:24px;margin-top:8px}
.content ul{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.9}

/* ---------- Footer ---------- */
.site-footer{background:var(--soft);margin-top:auto}
.footer-inner{padding-block:48px;display:flex;justify-content:space-between;gap:32px;align-items:flex-end;flex-wrap:wrap}
.footer-about{display:flex;flex-direction:column;gap:10px;max-width:560px}
.footer-name{font-size:20px;font-weight:700}
.footer-text{font-size:14px;line-height:1.9;color:var(--ink-3)}
.footer-nav{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
.page{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  :root{--gutter:32px}
  .hero{grid-template-columns:1fr;gap:32px;padding-block:40px 24px}
  .hero-art{height:220px}
  .hero-art .s1{width:150px;height:150px;top:24px}
  .hero-art .s2{width:200px;height:100px;left:120px}
  .filters{grid-template-columns:1fr 1fr}
  .filters .filters-q{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .site-header{gap:14px 18px}
  .header-search{order:10;flex-basis:100%;justify-content:stretch}
  .search{width:100%}
  .hero h1{font-size:34px}
  .hero-lede{font-size:16px}
  .hero-art{display:none}
  .cards{grid-template-columns:1fr}
  .card{padding:20px}
  .card-title{font-size:18px}
  .section-title h1,.section-title h2{font-size:26px}
  .post-title{font-size:30px}
  .page-title{font-size:32px}
  .prose{font-size:17px}
  .answer{padding:22px}
  .empty{padding:32px 20px}
  .filters{grid-template-columns:1fr;padding:16px}
  .narrow{padding-block:28px 56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}