:root{
  --ink:#33261a; --ink-soft:#7d6a52; --bg:#f8f3e7; --card:#fffdf6;
  --brand:#7e2f26; --brand-dark:#5f221b; --saffron:#c97a1e; --saffron-soft:#f7ead2;
  --green:#2e7d4f; --green-soft:#e9f3ea; --red:#b8433a; --red-soft:#f9e9e6;
  --line:#e9dfc9; --radius:14px;
  --shadow:0 1px 3px rgba(74,52,28,.07),0 8px 24px rgba(74,52,28,.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;}
h1,h2,h3,.serif{font-family:Georgia,"Noto Serif","Times New Roman",serif;letter-spacing:.1px;}
.wrap{max-width:760px;margin:0 auto;padding:0 18px 60px;}
a{color:var(--brand);}

/* Header */
header{background:var(--brand);color:#fff;padding:14px 0;position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(74,52,28,.18);}
.header-inner{max-width:760px;margin:0 auto;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;text-decoration:none;color:#fff;}
.logo-mark{width:32px;height:32px;border-radius:9px;background:var(--saffron);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff;}
.logo h1{font-size:19px;font-weight:700;}
.logo small{display:block;font-size:10.5px;font-weight:400;opacity:.75;letter-spacing:.4px;margin-top:-2px;font-family:inherit;}
nav{display:flex;gap:4px;align-items:center;}
nav a{color:#fff;opacity:.82;text-decoration:none;font-size:13.5px;font-weight:600;padding:6px 11px;border-radius:8px;}
nav a:hover,nav a.here{background:rgba(255,255,255,.15);opacity:1;}
.toggle{display:flex;background:rgba(255,255,255,.14);border-radius:99px;padding:3px;}
.toggle button{border:0;background:transparent;color:#fff;opacity:.7;font-size:13px;font-weight:600;padding:6px 16px;border-radius:99px;cursor:pointer;transition:.15s;font-family:inherit;}
.toggle button.active{background:#fff;color:var(--brand);opacity:1;}

/* Common blocks */
.section-title{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);margin:28px 0 12px;font-family:-apple-system,sans-serif;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s;display:block;text-decoration:none;}
.hero:hover{transform:translateY(-2px);}
.hero .date{font-size:12.5px;opacity:.8;letter-spacing:.5px;}
.hero h2{font-size:22px;margin:6px 0 8px;color:#fff;}
.hero p{font-size:14px;opacity:.9;max-width:440px;}
.hero-meta{display:flex;gap:14px;margin-top:16px;font-size:13px;flex-wrap:wrap;}
.hero-meta span{background:rgba(255,255,255,.15);padding:5px 12px;border-radius:99px;}
.stat-row{display:flex;gap:12px;margin-top:14px;}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center;box-shadow:var(--shadow);}
.stat b{font-size:22px;color:var(--brand);display:block;}
.stat span{font-size:12px;color:var(--ink-soft);}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.grid{grid-template-columns:1fr;}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;text-decoration:none;color:var(--ink);display:block;}
.tile:hover{transform:translateY(-2px);border-color:var(--brand);}
.tile .emoji{font-size:26px;}
.tile h3{font-size:16px;margin:8px 0 3px;}
.tile p{font-size:12.5px;color:var(--ink-soft);}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;}
.pill{background:var(--card);border:1.5px solid var(--line);border-radius:99px;padding:8px 18px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;transition:.15s;}
.pill:hover{border-color:var(--brand);color:var(--brand);}

/* List rows (daily archive) */
.rowlink{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:9px;text-decoration:none;color:var(--ink);transition:.15s;}
.rowlink:hover{border-color:var(--brand);}
.rowlink b{font-size:14.5px;}
.rowlink span{font-size:12.5px;color:var(--ink-soft);}

/* Quiz player */
.quiz-top{display:flex;justify-content:space-between;align-items:center;margin:22px 0 8px;gap:10px;flex-wrap:wrap;}
.quiz-top h2{font-size:18px;}
.back{background:none;border:0;color:var(--brand);font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 0;text-decoration:none;}
.progress{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 20px;}
.progress i{display:block;height:100%;background:var(--saffron);border-radius:99px;transition:width .3s;}
.qnum{font-size:12px;font-weight:700;color:var(--saffron);letter-spacing:1px;text-transform:uppercase;font-family:-apple-system,sans-serif;}
.qtext{font-size:16.5px;font-weight:600;margin:8px 0 18px;font-family:Georgia,serif;white-space:pre-line;}
.opt{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:9px;font-size:14.5px;cursor:pointer;transition:.15s;color:var(--ink);font-family:inherit;line-height:1.45;}
.opt:hover:not(:disabled){border-color:var(--brand);background:#f5ecd9;}
.opt .key{font-weight:700;color:var(--ink-soft);min-width:18px;}
.opt.correct{background:var(--green-soft);border-color:var(--green);}
.opt.correct .key{color:var(--green);}
.opt.wrong{background:var(--red-soft);border-color:var(--red);}
.opt.wrong .key{color:var(--red);}
.opt:disabled{cursor:default;opacity:.92;}
.explain{display:none;margin-top:14px;background:var(--saffron-soft);border-left:4px solid var(--saffron);border-radius:0 10px 10px 0;padding:13px 15px;font-size:13.5px;color:#5a4630;}
.explain b{color:#8a5a1d;}
.explain .src{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--brand);font-weight:600;text-decoration:none;}
.nextbar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px;}
.report{font-size:12px;color:var(--ink-soft);text-decoration:underline;cursor:pointer;background:none;border:0;font-family:inherit;}
.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px 26px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;text-decoration:none;display:inline-block;}
.btn:hover{background:var(--brand-dark);}
.btn.ghost{background:var(--card);color:var(--brand);border:1.5px solid var(--brand);}
.tag{display:inline-block;font-size:11px;font-weight:700;background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);border-radius:99px;padding:2px 10px;margin-left:8px;vertical-align:2px;font-family:-apple-system,sans-serif;}
.hidden{display:none;}

/* Results */
.result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px 24px;text-align:center;box-shadow:var(--shadow);margin-top:22px;}
.score-ring{width:120px;height:120px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--saffron) var(--pct,0%),#e6dcc4 0);}
.score-ring .inner{width:96px;height:96px;border-radius:50%;background:var(--brand);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;}
.score-ring b{font-size:26px;}
.score-ring span{font-size:11px;opacity:.8;}
.result h2{font-size:21px;margin-bottom:6px;}
.result p{font-size:14px;color:var(--ink-soft);max-width:380px;margin:0 auto 20px;}
.result .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* Prose pages */
.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);margin-top:22px;font-size:14.5px;}
.prose h2{margin:18px 0 8px;font-size:18px;}
.prose p{margin-bottom:12px;}

footer{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:48px;padding:18px;border-top:1px solid var(--line);}
footer a{color:var(--ink-soft);margin:0 6px;}

/* SEO question pages */
.seo-page h1{font-size:24px;margin-bottom:10px;}
.qa{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:0;margin-bottom:10px;box-shadow:var(--shadow);}
.qa summary{cursor:pointer;padding:14px 16px;font-size:14.5px;line-height:1.5;list-style-position:outside;}
.qa summary:hover{color:var(--brand);}
.qa[open] summary{border-bottom:1px solid var(--line);}
.qa-opts{margin:10px 16px 4px 34px;font-size:14px;}
.qa-opts li{margin:4px 0;list-style:none;}
.qa-opts li.ok{color:var(--green);font-weight:700;}
.qa-ans{margin:8px 16px;font-size:14px;color:var(--green);}
.qa-ex{margin:0 16px 14px;font-size:13.5px;color:#5a4630;background:var(--saffron-soft);border-left:4px solid var(--saffron);border-radius:0 10px 10px 0;padding:10px 13px;}
