/* Shared styles for the guide, article and about pages (the home page keeps its own inline styles). */
:root {
  --ink: #111111; --bg: #fbe94b; --red: #ff4d3d; --blue: #3d7dff; --green: #22a06b; --green-ink: #1a7f55;
  --body: #3a3a1c; --muted: #66611c; --stripe: rgba(0,0,0,.035); --card: #ffffff; --line: #ece5a6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background-color: var(--bg);
  background-image: repeating-linear-gradient(-30deg, transparent 0 34px, var(--stripe) 34px 68px);
  font: 600 17px/1.5 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.box.dark :focus-visible, .callout :focus-visible { outline-color: var(--bg); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--ink); color: var(--bg); font-weight: 900; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Header and menu (same look as the home page) */
header.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 18px 0; flex-wrap: wrap; }
.logo { font-weight: 900; font-stretch: 125%; letter-spacing: -1px; font-size: 20px; text-decoration: none; color: var(--ink); }
.logo span { color: var(--red); }
nav.menu { display: flex; flex-wrap: wrap; gap: 8px; }
nav.menu a { font-weight: 900; font-size: 14px; color: var(--ink); text-decoration: none; border: 2.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
nav.menu a[aria-current="page"] { background: var(--ink); color: var(--bg); }
nav.menu a:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

/* Page heading */
.crumbs { font-size: 14px; font-weight: 800; color: var(--muted); margin: 6px 0 14px; }
.crumbs a { color: var(--muted); }
.stick { display: inline-block; background: var(--ink); color: var(--bg); font-weight: 900; font-size: 13px; letter-spacing: .5px; padding: 5px 12px; border-radius: 9px; transform: rotate(-3deg); }
.stick.red { background: var(--red); color: var(--ink); transform: rotate(2deg); }
h1 { font-weight: 900; font-stretch: 125%; font-size: clamp(36px, 6.4vw, 64px); line-height: .95; letter-spacing: -0.04em; margin: 16px 0 14px; max-width: 18ch; }
.dek { font-size: clamp(18px, 2.2vw, 21px); font-weight: 800; color: var(--body); max-width: 40ch; margin: 0 0 12px; line-height: 1.35; }
.byline { font-size: 14px; font-weight: 800; color: var(--muted); margin: 0 0 26px; }

/* Long-form text */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; padding-bottom: 56px; }
article.prose, .prose-card {
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 7px 7px 0 var(--ink);
  padding: 30px 34px 26px; font: 400 18px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1f1f1f;
}
.prose h2 { font: 900 clamp(24px, 3vw, 30px)/1.1 "Archivo", system-ui, sans-serif; font-stretch: 125%; letter-spacing: -0.03em; color: var(--ink); margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 900 20px/1.2 "Archivo", system-ui, sans-serif; font-stretch: 112%; color: var(--ink); margin: 24px 0 6px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; }
.prose li { margin: 6px 0; }
.prose a { font-weight: 700; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 6px solid var(--red); background: #fff8c9; border-radius: 0 10px 10px 0; font-weight: 600; }
.prose .table-wrap { overflow-x: auto; margin: 0 0 18px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 2px solid var(--line); }
.prose th { font-family: "Archivo", system-ui, sans-serif; font-weight: 900; color: var(--ink); border-bottom-color: var(--ink); }
.q { border: 2.5px solid var(--ink); border-radius: 14px; padding: 14px 16px 12px; margin: 0 0 16px; background: #fffdf0; }
.q .qt { font: 900 18px/1.25 "Archivo", system-ui, sans-serif; color: var(--ink); margin: 0 0 8px; }
.q .opts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.q .opts li { margin: 0; font: 800 14px/1 "Archivo", system-ui, sans-serif; background: #f1f1f1; border-radius: 8px; padding: 7px 9px; color: var(--ink); }
.q .opts b { background: var(--ink); color: var(--bg); border-radius: 5px; padding: 2px 6px; margin-right: 5px; }
.q p { margin: 0; font-size: 16px; color: #333; }
.callout { background: var(--ink); color: var(--bg); border-radius: 14px; padding: 18px 20px; margin: 20px 0; font-family: "Archivo", system-ui, sans-serif; font-weight: 700; }
.callout strong, .callout a { color: #fff; }
.summary { background: #fff8c9; border: 2.5px solid var(--ink); border-radius: 14px; padding: 16px 18px 6px; margin: 0 0 26px; }
.summary h2 { font-size: 18px !important; margin: 0 0 8px !important; letter-spacing: 0 !important; }
.summary ul { margin: 0 0 10px; }
.sources { font-size: 15px; color: #444; border-top: 2px solid var(--line); margin-top: 30px; padding-top: 14px; }
.sources h2 { font-size: 18px; margin: 0 0 8px; }
.sources ol { padding-left: 20px; }

/* Sidebar */
aside.side { display: grid; gap: 20px; position: sticky; top: 16px; }
.box { background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); padding: 18px 18px 20px; }
.box h2 { font: 900 17px/1.2 "Archivo", system-ui, sans-serif; font-stretch: 112%; margin: 0 0 10px; }
.box p { margin: 0 0 14px; font-size: 15px; color: var(--body); }
.box ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.box li a { font-weight: 800; font-size: 15px; line-height: 1.3; }
.box.dark { background: var(--ink); color: var(--bg); box-shadow: 5px 5px 0 var(--red); }
.box.dark p { color: #e9e2a0; }
a.btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--bg); text-decoration: none;
  font-weight: 900; font-stretch: 125%; font-size: 16px; padding: 13px 18px; border-radius: 14px; box-shadow: 4px 4px 0 var(--red);
}
.box.dark a.btn { background: var(--bg); color: var(--ink); }
a.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--red); }

/* Article list */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0 0 56px; }
.card { background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.card .tag { align-self: flex-start; font-size: 12px; font-weight: 900; letter-spacing: .5px; background: var(--ink); color: var(--bg); border-radius: 7px; padding: 3px 9px; }
.card h2 { font: 900 22px/1.15 "Archivo", system-ui, sans-serif; font-stretch: 112%; letter-spacing: -0.02em; margin: 4px 0 2px; }
.card h2 a { text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card p { margin: 0; color: var(--body); font-weight: 700; font-size: 16px; }
.card .meta { font-size: 13px; font-weight: 800; color: var(--muted); margin-top: auto; padding-top: 6px; }

/* Footer (same as home) */
footer.site { border-top: 3px solid var(--ink); padding: 26px 0 40px; display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  aside.side { position: static; }
}
@media (max-width: 640px) {
  article.prose, .prose-card { padding: 22px 18px 18px; font-size: 17px; border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
  .cards { grid-template-columns: 1fr; }
  nav.menu { width: 100%; }
  nav.menu a { padding: 6px 11px; font-size: 13px; }
}