/* ════════════════════════════════════════════════════════════════════════
   Shared styles for the writing section.

   A separate stylesheet on purpose: index.html carries its own inline CSS
   for the one-pager, and articles need almost none of it. Same tokens, so
   the two read as one site.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#010F22; --navy-800:#011833; --navy-700:#012243;
  --ink:#FAFAFA; --ink-70:rgba(250,250,250,.74); --ink-45:rgba(250,250,250,.46);
  --sand:#E1C699; --sand-lt:#F7E3BC; --sand-line:rgba(225,198,153,.18);
  --sand-glow:rgba(225,198,153,.07);
  --serif:"DM Serif Text",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--navy-800);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--sand-lt)}

/* ── Chrome ── */
.bar{
  position:sticky;top:0;z-index:10;background:rgba(1,15,34,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--sand-line);
}
.bar-in{
  max-width:820px;margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;gap:11px;
}
.bar a.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.bar .mark{width:30px;height:30px;border-radius:50%}
.bar .name{font-family:var(--serif);font-size:1.06rem;white-space:nowrap}
.bar .name span{color:var(--sand)}
.bar .cta{
  margin-left:auto;text-decoration:none;font-size:.82rem;font-weight:600;
  padding:8px 16px;border:1px solid var(--sand-line);border-radius:4px;
  color:var(--sand-lt);white-space:nowrap;
}
.bar .cta:hover{background:var(--sand-glow);border-color:var(--sand)}

/* ── Article ── */
.doc{max-width:820px;margin:0 auto;padding:clamp(44px,7vw,84px) var(--gutter) 0}
.crumb{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);margin:0 0 20px}
.crumb a{color:inherit;text-decoration:none;opacity:.75}
.crumb a:hover{opacity:1}

h1{
  font-family:var(--serif);font-weight:400;margin:0 0 18px;
  font-size:clamp(2.2rem,4.4vw,3.3rem);line-height:1.1;letter-spacing:-.02em;
}
.standfirst{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.65;color:var(--ink-70);margin:0 0 10px}
.byline{font-size:.8rem;color:var(--ink-45);margin:0 0 40px;padding-bottom:26px;border-bottom:1px solid var(--sand-line)}

article h2{
  font-family:var(--serif);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.2;margin:52px 0 14px;
}
article h3{
  font-family:var(--sans);font-weight:600;font-size:1.02rem;
  margin:34px 0 8px;color:var(--sand-lt);
}
article p{margin:0 0 1.25em;color:var(--ink-70)}
article strong{color:var(--ink);font-weight:600}
article ul,article ol{margin:0 0 1.4em;padding-left:1.25em;color:var(--ink-70)}
article li{margin-bottom:.5em}
article li::marker{color:var(--sand)}

.callout{
  margin:34px 0;padding:22px 24px;border-left:2px solid var(--sand);
  background:var(--sand-glow);border-radius:0 4px 4px 0;
}
.callout p{margin:0;color:var(--ink)}

.end{
  margin:64px 0 0;padding:30px var(--gutter);border-top:1px solid var(--sand-line);
  background:var(--navy-900);
}
.end-in{max-width:820px;margin:0 auto;padding:0}
.end h2{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 10px}
.end p{color:var(--ink-70);margin:0 0 18px}
.end a.go{
  display:inline-block;text-decoration:none;font-weight:600;font-size:.9rem;
  padding:11px 22px;border-radius:4px;background:var(--sand);color:var(--navy-900);
}
.end a.go:hover{background:var(--sand-lt)}

footer.site{
  padding:26px var(--gutter);text-align:center;font-size:.78rem;color:var(--ink-45);
  border-top:1px solid var(--sand-line);
}
footer.site a{color:var(--ink-45);text-decoration:none;margin:0 8px}
footer.site a:hover{color:var(--ink)}

/* ── Hub list ── */
.list{list-style:none;margin:34px 0 0;padding:0}
.list li{padding:24px 0;border-top:1px solid var(--sand-line)}
.list a{text-decoration:none;color:inherit;display:block}
.list h2{font-family:var(--serif);font-weight:400;font-size:1.45rem;margin:0 0 6px;line-height:1.25}
.list a:hover h2{color:var(--sand-lt)}
.list p{margin:0;color:var(--ink-45);font-size:.94rem}