:root {
  --paper:#f2e8d0; --paper-card:#fbf4e3; --paper-edge:#e7d9b8;
  --ink:#2a2018; --ink-soft:#5e5040; --ink-faint:#8a7a64;
  --orange:#d2581b; --orange-deep:#b8470f; --blue:#1c4a73; --blue-deep:#143a5c;
  --rule:rgba(42,32,24,0.14);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Georgia,Cambria,serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.02rem; line-height:1.7; -webkit-font-smoothing:antialiased;
}
.wrap { max-width:760px; margin:0 auto; padding:28px 22px 72px; }
a { color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(28,74,115,0.32); }
a:hover { color:var(--orange-deep); border-color:var(--orange); }

.brand { font-weight:700; letter-spacing:-0.01em; border:0; font-size:1.05rem; }
.brand .b { color:var(--orange); } .brand .tld { color:var(--blue); }
.crumbs { font-size:0.82rem; color:var(--ink-faint); margin:10px 0 26px; font-family:var(--mono); }
.crumbs a { border:0; }

h1 { font-size:2.1rem; line-height:1.15; letter-spacing:-0.02em; margin:0 0 12px; }
h2 { font-size:1.4rem; margin:2.2em 0 0.5em; letter-spacing:-0.01em; }
h3 { font-size:1.08rem; margin:1.6em 0 0.4em; }
.lede { font-family:var(--serif); font-size:1.2rem; color:var(--ink-soft); margin:0 0 8px; }
p, li { max-width:68ch; }
hr { border:0; border-top:1px solid var(--rule); margin:2.4em 0; }
code { font-family:var(--mono); font-size:0.88em; background:rgba(42,32,24,0.06); padding:0.12em 0.4em; border-radius:4px; }

pre {
  background:#241b13; color:#f2e8d0; border-radius:10px; border-top:3px solid var(--orange);
  padding:18px 18px; overflow:auto; font-family:var(--mono); font-size:0.84rem; line-height:1.6;
}
pre code { background:none; padding:0; font-size:inherit; color:inherit; }

.cta {
  background:radial-gradient(120% 140% at 100% 0%, rgba(210,88,27,0.10), transparent 55%), var(--paper-card);
  border:1px solid var(--paper-edge); border-top:3px solid var(--orange);
  border-radius:14px; padding:24px 26px; margin:2.4em 0;
}
.cta h2 { margin:0 0 8px; font-size:1.25rem; }
.cta p { color:var(--ink-soft); margin:0 0 16px; }
.btn {
  display:inline-block; background:var(--orange); color:#fff; border:0; border-radius:8px;
  padding:11px 18px; font-weight:600; font-size:0.98rem; border-bottom:0;
}
.btn:hover { background:var(--orange-deep); color:#fff; }
.kicker { font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--orange-deep); margin:0 0 6px; }

.cards { display:grid; gap:14px; margin:24px 0; }
.card { display:block; background:var(--paper-card); border:1px solid var(--paper-edge); border-left:4px solid var(--blue); border-radius:12px; padding:18px 20px; border-bottom:1px solid var(--paper-edge); }
.card:hover { border-left-color:var(--orange); }
.card h3 { margin:0 0 4px; color:var(--ink); }
.card p { margin:0; color:var(--ink-soft); font-size:0.95rem; }

footer { margin-top:48px; padding-top:22px; border-top:2px solid var(--ink); color:var(--ink-faint); font-size:0.88rem; }
.foot-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-family:var(--mono); font-size:0.8rem; }

@media (max-width:560px){ h1{font-size:1.7rem;} .wrap{padding:20px 16px 56px;} }