/* The search pages (site/build.py): the homepage's colours and type, a plain reading layout. */
:root {
  --bg: #efe8d8; --fg: #0d0c0a; --soft: rgba(13, 12, 10, 0.68); --line: rgba(13, 12, 10, 0.12); --card: #fbf8f1;
  --accent: #a8682f; --btn: #0d0c0a; --btn-fg: #efe8d8; --foot: #0d0c0a; --foot-fg: rgba(239, 232, 216, 0.72);
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b0c; --fg: #f1ede4; --soft: rgba(241, 237, 228, 0.72); --line: rgba(255, 255, 255, 0.1); --card: #141416;
  --accent: #e3b47c; --btn: #f1ede4; --btn-fg: #0b0b0c; --foot: #141416; --foot-fg: rgba(241, 237, 228, 0.7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.pwrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.pnav { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.pnav-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.plogo { font: 400 1.7rem/1 var(--serif); letter-spacing: -0.02em; text-decoration: none; margin: 0; }
.pbtn { display: inline-block; background: var(--btn); color: var(--btn-fg); text-decoration: none; font-weight: 500; font-size: 0.92rem; padding: 9px 16px; border-radius: 999px; }
.pbtn:hover { filter: brightness(1.2); }
.pbtn-big { font-size: 1rem; padding: 13px 22px; background: linear-gradient(180deg, #c98a4a, #a8682f); color: #fff; }
.crumbs { font-size: 0.85rem; color: var(--soft); margin: 28px 0 0; }
.crumbs a { text-decoration: none; }
h1 { font: 400 clamp(2.3rem, 6vw, 3.4rem)/1.05 var(--serif); letter-spacing: -0.02em; margin: 18px 0 18px; }
h2 { font: 400 1.75rem/1.15 var(--serif); margin: 44px 0 10px; }
p, li { color: var(--soft); }
.lede { font-size: 1.15rem; color: var(--fg); }
.stats { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin: 22px 0; }
.stats .k, .pfoot .k { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px; color: var(--soft); }
.stats ul { margin: 0; padding: 0; list-style: none; }
.stats li { padding: 7px 0; border-top: 1px solid var(--line); }
.stats li:first-child { border-top: 0; }
.stats b { color: var(--fg); font-size: 1.15rem; margin-right: 6px; }
.tips li { margin: 8px 0; }
.links a { display: inline-block; margin: 4px 14px 4px 0; }
.pcta { margin: 56px 0 64px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.pcta h2 { margin-top: 0; }
.pfoot { background: var(--foot); color: var(--foot-fg); padding: 36px 0 28px; }
.pfoot .plogo { color: #efe8d8; font-size: 2.2rem; margin-bottom: 20px; }
.pfoot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pfoot-cols div { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; }
.pfoot-cols a, .pfine a { color: var(--foot-fg); text-decoration: none; }
.pfoot-cols a:hover, .pfine a:hover { color: #e3b47c; }
.pfoot .k { color: rgba(239, 232, 216, 0.45); }
.pfine { margin: 28px 0 0; font-size: 0.85rem; }
@media (max-width: 560px) { .pfoot-cols { grid-template-columns: 1fr 1fr; } }