:root { --bg:#faf7f2; --card:#ffffff; --ink:#2f2a25; --muted:#8a8075; --accent:#c2663c;
 --line:#eee7dd; --soft:#f3ede4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
 font-family: Georgia, 'Times New Roman', serif; line-height:1.65; }
header.site { background:var(--card); border-bottom:1px solid var(--line);
 padding:18px 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;
 position:sticky; top:0; z-index:5; }
header.site .brand { font-size:22px; font-weight:bold; letter-spacing:.5px; text-decoration:none; color:var(--ink); }
header.site .brand span { color:var(--accent); }
header.site nav a { margin-right:16px; text-decoration:none; color:var(--muted); font-size:15px; }
header.site nav a:hover { color:var(--accent); }
main { max-width:1080px; margin:0 auto; padding:32px 24px 80px; }
.hero { text-align:center; padding:48px 12px 24px; }
.hero h1 { font-size:44px; margin:0 0 8px; letter-spacing:1px; }
.hero h1 span { color:var(--accent); }
.hero .sub { color:var(--muted); font-size:18px; margin-bottom:8px; font-style:italic; }
.hero .tagline { display:inline-block; background:var(--soft); border:1px solid var(--line);
 border-radius:999px; padding:6px 16px; font-size:14px; margin:6px; color:var(--muted); }
.searchbar { display:flex; justify-content:center; margin:26px 0 8px; }
.searchbar input { width:min(480px,100%); padding:12px 18px; border-radius:12px;
 border:1px solid var(--line); background:var(--card); font-size:16px; font-family:inherit; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:22px; margin-top:28px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
 text-decoration:none; color:var(--ink); display:block; transition:transform .12s, box-shadow .12s; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(60,45,30,.10); }
.card .thumb { aspect-ratio:2/3; width:100%; object-fit:cover; background:var(--soft); }
.card .thumb.ph { display:flex; align-items:center; justify-content:center; color:var(--muted);
 font-size:40px; aspect-ratio:2/3; background:linear-gradient(160deg,#f7f2ea,#efe6d8); }
.card .body { padding:14px 16px 16px; }
.card .num { font-size:12px; letter-spacing:1.5px; color:var(--accent); text-transform:uppercase; font-family:Verdana, sans-serif; }
.card h3 { font-size:18px; margin:6px 0 8px; line-height:1.3; }
.card .meta { font-size:13px; color:var(--muted); }
.pagehead { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; margin-bottom:8px; }
.pagehead .heroimg { flex:0 0 300px; max-width:100%; }
.pagehead .heroimg img { width:100%; border-radius:14px; border:1px solid var(--line); }
.rhead h1 { font-size:34px; margin:0 0 6px; line-height:1.2; }
.rhead .hook { font-size:17px; font-style:italic; color:var(--muted); margin:0 0 14px; }
.facts { display:flex; gap:10px; flex-wrap:wrap; }
.facts div { background:var(--soft); border:1px solid var(--line); border-radius:10px;
 padding:8px 14px; font-size:14px; }
.facts b { display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px;
 color:var(--muted); font-family:Verdana, sans-serif; }
section { background:var(--card); border:1px solid var(--line); border-radius:14px;
 padding:24px 28px; margin-top:22px; }
section h2 { font-size:22px; margin:0 0 12px; color:var(--accent); }
section ul, section ol { margin:0; padding-left:22px; }
section li { margin-bottom:6px; }
section p { margin:0 0 10px; }
.prompt { background:var(--soft); border-left:4px solid var(--accent); border-radius:0 10px 10px 0;
 padding:12px 16px; margin:10px 0; font-size:15px; }
.prompt strong { color:var(--accent); font-family:Verdana, sans-serif; font-size:13px; letter-spacing:.5px; }
.pager { display:flex; justify-content:space-between; margin-top:30px; gap:12px; }
.pager a { background:var(--card); border:1px solid var(--line); border-radius:12px;
 padding:10px 18px; text-decoration:none; color:var(--ink); font-size:15px; }
.pager a:hover { border-color:var(--accent); color:var(--accent); }
footer { text-align:center; color:var(--muted); font-size:13px; padding:26px; }
.glist h3 { margin:26px 0 6px; color:var(--accent); }
@media (max-width:640px){ .hero h1{font-size:32px;} .pagehead .heroimg{flex-basis:100%;} }