/* ═══════════════════════════════════════════════════════
   pages.css — shared by the static content pages only.
   index.html has its own <style> block and does not read this file.

   Tokens are copied from index.html's :root deliberately rather than
   imported: these pages must render identically if index.html is ever
   restructured, and they must not carry 470KB of app CSS to do it.
   If a token changes there, change it here too.
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F2EEE8;
  --ink:#111210;
  --ink2:#5A584F;
  --ink3:#9B9890;
  --white:#FDFCFA;
  --blue:#1D4ED8;
  --blue-soft:rgba(29,78,216,0.1);
  --blue-mid:rgba(29,78,216,0.22);
  --green:#059669;
  --green-soft:rgba(5,150,105,0.1);
  --border:rgba(17,18,16,0.08);
  --border-strong:rgba(17,18,16,0.15);
  --card:#FFFFFF;
  --radius:12px;
  --radius-sm:8px;
}

html{-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);
  font-weight:300;font-size:16.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--bg)}

a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

/* ══ NAV ══ */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.3rem 2.5rem;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.nav-logo{
  font-size:1rem;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);text-decoration:none;
}
.nav-logo .dot{color:var(--blue)}
.nav-cta{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  padding:.5rem 1rem;border-radius:var(--radius-sm);
  background:var(--ink);color:var(--white);text-decoration:none;
  transition:opacity .2s;white-space:nowrap;
}
.nav-cta:hover{opacity:.85;text-decoration:none}

/* ══ ARTICLE ══ */
.wrap{max-width:720px;margin:0 auto;padding:4rem 1.5rem 2rem}
.eyebrow{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  margin-bottom:1.1rem;
}
h1{
  font-size:2.5rem;line-height:1.12;letter-spacing:-.035em;
  font-weight:700;margin-bottom:1.3rem;
}
.standfirst{
  font-size:1.15rem;line-height:1.62;color:var(--ink2);
  margin-bottom:2.6rem;padding-bottom:2.6rem;
  border-bottom:1px solid var(--border);
}
h2{
  font-size:1.45rem;line-height:1.3;letter-spacing:-.025em;
  font-weight:700;margin:3rem 0 1rem;
}
h3{
  font-size:1.08rem;line-height:1.45;letter-spacing:-.015em;
  font-weight:600;margin:2rem 0 .6rem;
}
p{margin-bottom:1.25rem}
strong,b{font-weight:600;color:var(--ink)}
em{font-style:italic}

ul,ol{margin:0 0 1.5rem 1.15rem}
li{margin-bottom:.6rem;padding-left:.3rem}
li::marker{color:var(--ink3)}

blockquote{
  border-left:2px solid var(--blue-mid);
  padding:.15rem 0 .15rem 1.3rem;margin:0 0 1.5rem;
  color:var(--ink2);
}

/* A quiet inset panel — checklists, definitions, the thing to take away. */
.panel{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem 1.6rem;margin:0 0 1.75rem;
}
.panel-hd{
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.9rem;
}
.panel p:last-child,.panel ul:last-child,.panel li:last-child{margin-bottom:0}
.panel ul{margin-left:1.05rem}

/* ══ CTA ══ */
.cta{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem 1.8rem;
  margin:3.5rem 0 1rem;
}
.cta h2{margin:0 0 .7rem;font-size:1.25rem}
.cta p{font-size:15px;color:var(--ink2);margin-bottom:1.4rem}
.btn{
  display:inline-block;font-size:14px;font-weight:600;letter-spacing:-.01em;
  padding:.75rem 1.5rem;border-radius:var(--radius-sm);
  background:var(--ink);color:var(--white);text-decoration:none;
  transition:opacity .2s;
}
.btn:hover{opacity:.85;text-decoration:none}
.cta-note{font-size:12px;color:var(--ink3);margin:.9rem 0 0}

/* ══ RELATED ══ */
.related{
  border-top:1px solid var(--border);
  margin-top:3.5rem;padding-top:2rem;
}
.related-hd{
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:1rem;
}
.related ul{list-style:none;margin:0}
.related li{margin-bottom:.55rem;padding:0;font-size:14.5px}

/* ══ FOOTER ══ */
.foot{
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;padding:2.2rem 2.4rem;margin-top:3rem;
}
.foot-logo{
  font-size:.9rem;font-weight:800;letter-spacing:-.035em;
  color:var(--ink3);text-decoration:none;
}
.foot-logo .dot{color:var(--blue)}
.foot-copy{font-size:11px;color:var(--ink3)}
.foot-links{display:flex;gap:1.5rem;list-style:none;margin:0}
.foot-links li{margin:0;padding:0}
.foot-links a{font-size:11px;color:var(--ink3);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

@media(max-width:700px){
  body{font-size:16px}
  .nav{padding:1.1rem 1.2rem}
  .wrap{padding:2.5rem 1.2rem 1.5rem}
  h1{font-size:1.95rem}
  .standfirst{font-size:1.05rem;margin-bottom:2rem;padding-bottom:2rem}
  h2{font-size:1.28rem;margin:2.4rem 0 .8rem}
  .cta{padding:1.6rem 1.3rem}
  .foot{padding:1.8rem 1.3rem;flex-direction:column;align-items:flex-start;gap:.7rem}
}