/* Shared styles for the Articles section (list + every article page).
   Self-contained: mirrors the design tokens and chrome used by home.html so
   articles read as part of the same brand hub. Linked relatively as
   `article.css`, which resolves to /4fquiz/articles/article.css when served and
   also works when a file is opened locally for preview. */

:root{
  --sage:#8A9E8C; --sage-lt:#EEF2EE; --clay:#C77B5F;
  --ink:#2E3D49; --ink-2:#5C6B73; --ink-3:#9AA4AA;
  --bg:#FAF8F5; --card:#FFFFFF; --border:rgba(46,61,73,0.10);
  --fight:#D2755B; --flight:#9DB897; --freeze:#8DA3C2; --fawn:#C2A1C0;
  --font-sans:'DM Sans',sans-serif; --font-serif:'Lora',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:300 16px/1.7 var(--font-sans);
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word; /* long URLs/terms in article prose never force horizontal scroll on narrow screens */
}
a{color:var(--clay); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--clay); outline-offset:3px} /* visible on-brand keyboard focus; mouse clicks unaffected */

/* ---- Top bar (matches home.html) ---- */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,5vw,48px); height:64px;
  background:rgba(250,248,245,0.90);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--border);
}
.brand{display:inline-flex; align-items:center; gap:11px}
.brand:hover{text-decoration:none}
.mark{display:grid; grid-template-columns:repeat(2,15px); grid-template-rows:repeat(2,15px); gap:3px}
.mark .cell{
  border-radius:4px; display:grid; place-items:center;
  color:#fff; font-size:9px;
}
.wordmark{
  font-family:var(--font-serif); font-size:18px; font-weight:500;
  letter-spacing:-0.01em; color:var(--ink);
}
.topbar .toquiz{font-size:14px; font-weight:500; color:var(--clay)}

/* ---- Page shell ---- */
main{max-width:680px; margin:0 auto; padding:clamp(40px,7vw,72px) clamp(20px,5vw,48px) 24px}

.eyebrow{
  font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--clay); margin:0 0 18px;
}
h1{
  font-family:var(--font-serif); font-weight:400; font-size:clamp(32px,5.5vw,44px);
  line-height:1.18; letter-spacing:-0.02em; color:var(--ink); margin:0 0 20px;
}
.lead{font-size:19px; font-weight:300; color:var(--ink-2); line-height:1.66; margin:0 0 8px}

.divider{height:0.5px; background:var(--border); border:0; margin:44px 0}

/* ---- Article list ---- */
.posts{margin:36px 0 0; padding:0; list-style:none; border-top:0.5px solid var(--border)}
.post{
  display:block; padding:26px 0; border-bottom:0.5px solid var(--border);
  color:inherit;
}
.post:hover{text-decoration:none}
.post:hover .post-title{color:var(--clay)}
.post:hover .post-more{gap:9px}
.post-date{
  font-size:12.5px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-3);
}
.post-title{
  font-family:var(--font-serif); font-weight:500; font-size:23px; line-height:1.32;
  letter-spacing:-0.01em; color:var(--ink); margin:7px 0 8px;
  transition:color .15s ease;
}
.post-dek{font-size:15.5px; color:var(--ink-2); line-height:1.6; margin:0 0 12px}
.post-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:500; color:var(--clay); transition:gap .15s ease;
}
.post-more i{font-size:15px}

/* ---- Empty state (no articles yet) ---- */
.empty{
  background:var(--card); border:0.5px solid var(--border); border-radius:20px;
  padding:48px 32px; margin:36px 0 0; text-align:center;
}
.empty .shell{
  display:inline-grid; place-items:center; width:48px; height:48px;
  border-radius:14px; background:var(--sage-lt); color:var(--sage);
  font-size:22px; margin:0 0 18px;
}
.empty p{font-size:17px; color:var(--ink); margin:0 0 6px}
.empty .empty-sub{font-size:15px; color:var(--ink-3); margin:0 0 24px}

/* ---- Reusable call-to-action button (matches home.html) ---- */
.cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:999px;
  background:var(--ink); color:#fff; font-size:16px; font-weight:500;
  transition:background .15s ease;
}
.cta:hover{background:#22303a; text-decoration:none}
.cta i{font-size:17px}

/* ---- Article body prose ---- */
.meta{font-size:13.5px; color:var(--ink-3); margin:18px 0 0}
.meta time{font-weight:500}

.prose{margin:0}
.prose > p:first-of-type{font-size:19px; color:var(--ink-2); line-height:1.7}
.prose h2{
  font-family:var(--font-serif); font-weight:500; font-size:25px; line-height:1.3;
  color:var(--ink); margin:40px 0 14px; letter-spacing:-0.01em;
}
.prose h3{
  font-family:var(--font-serif); font-weight:500; font-size:19px; line-height:1.35;
  color:var(--ink); margin:30px 0 10px;
}
.prose p{margin:0 0 16px; color:var(--ink-2)}
.prose strong{font-weight:500; color:var(--ink)}
.prose a{font-weight:500}
.prose ul,.prose ol{margin:0 0 16px; padding-left:0; list-style:none}
.prose ol{counter-reset:li}
.prose li{position:relative; padding-left:24px; margin:0 0 11px; color:var(--ink-2)}
.prose ul li::before{
  content:""; position:absolute; left:3px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--sage);
}
.prose ol li{counter-increment:li}
.prose ol li::before{
  content:counter(li); position:absolute; left:0; top:0;
  font-size:13px; font-weight:500; color:var(--sage); line-height:1.7;
}

/* Pull quote */
.prose blockquote{
  margin:26px 0; padding:4px 0 4px 22px; border-left:2.5px solid var(--sage);
  font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.5;
  color:var(--ink);
}
.prose blockquote p{color:inherit; margin:0}

/* Comparison table */
.prose .table-wrap{overflow-x:auto; margin:26px 0}
.prose table{border-collapse:collapse; width:100%; font-size:15px}
.prose th,.prose td{
  text-align:left; padding:12px 16px; border-bottom:0.5px solid var(--border);
  vertical-align:top;
}
.prose thead th{
  font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink); background:var(--sage-lt);
}
.prose tbody th{font-weight:500; color:var(--ink); white-space:nowrap}
.prose td{color:var(--ink-2)}

.prose figure{margin:26px 0}
.prose figcaption{font-size:13px; color:var(--ink-3); margin-top:8px; text-align:center}

/* End-of-article quiz nudge */
.endcta{
  background:var(--card); border:0.5px solid var(--border); border-radius:18px;
  padding:26px 28px; margin:44px 0 0;
}
.endcta p{margin:0 0 16px; font-size:15.5px; color:var(--ink-2)}
.endcta p strong{font-weight:500; color:var(--ink)}

/* ---- Footer (matches home.html) ---- */
footer{
  max-width:680px; margin:0 auto; padding:28px clamp(20px,5vw,48px) 72px;
  border-top:0.5px solid var(--border); margin-top:48px;
}
footer p{font-size:13px; color:var(--ink-3); margin:0 0 8px; line-height:1.6}
footer a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.footnav{display:flex; flex-wrap:wrap; gap:18px; margin:0 0 16px; font-size:14px}
.footnav a{color:var(--clay); text-decoration:none; font-weight:500}