:root{
  --bg-950:#0a1620;
  --panel:#132a3a;
  --line:rgba(205,222,235,.14);
  --line-strong:rgba(205,222,235,.28);
  --steel:#aabecc;
  --steel-dim:#7c93a3;
  --paper:#eef4f8;
  --accent:#e2841e;
  --font-display:'Big Shoulders Display', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-950);
  background-image:
    linear-gradient(rgba(205,222,235,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205,222,235,.035) 1px, transparent 1px);
  background-size:44px 44px;
  color:var(--paper);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(10,22,32,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.navrow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 28px;max-width:1180px;margin:0 auto;}
.brand{font-family:var(--font-mono);font-size:14px;color:var(--steel);text-decoration:none;}
.brand b{color:var(--paper);font-weight:500;}
nav.links{display:flex;gap:26px;font-size:15px;}
nav.links a{text-decoration:none;color:var(--steel);border-bottom:1px solid transparent;padding-bottom:2px;}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--paper);border-color:var(--accent);}
@media (max-width:760px){nav.links{display:none;}}

/* ---------- article shell ---------- */
.shell{max-width:760px;margin:0 auto;padding:64px 24px 40px;}
.crumbs{font-family:var(--font-mono);font-size:13px;color:var(--steel-dim);margin:0 0 28px;}
.crumbs a{color:var(--steel-dim);text-decoration:none;border-bottom:1px solid var(--line-strong);}
.crumbs a:hover{color:var(--paper);}
.kicker{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin:0 0 14px;}
h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(36px,5.2vw,58px);line-height:1.04;
  margin:0 0 22px;letter-spacing:.005em;
}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--steel);margin:0 0 40px;padding-bottom:28px;border-bottom:1px solid var(--line);}
.byline a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);}
.lead{font-size:21px;line-height:1.6;color:var(--paper);margin:0 0 32px;}

article h2{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.2vw,34px);line-height:1.15;margin:52px 0 16px;}
article h3{font-family:var(--font-body);font-weight:600;font-size:19px;margin:32px 0 10px;}
article p{margin:0 0 20px;color:#d5e1ea;}
article strong{color:var(--paper);}
article a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--accent);}
article a:hover{color:var(--accent);}
article ul,article ol{margin:0 0 24px;padding-left:22px;color:#d5e1ea;}
article li{margin:0 0 10px;}
article li::marker{color:var(--accent);}

blockquote{margin:28px 0;padding:18px 24px;border-left:3px solid var(--accent);background:var(--panel);color:var(--paper);font-size:19px;}
blockquote p{margin:0;color:var(--paper);}

.table-wrap{overflow-x:auto;margin:8px 0 28px;border:1px solid var(--line);}
table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);}
th{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--steel);background:rgba(19,42,58,.7);}
tr:last-child td{border-bottom:none;}
td{color:#d5e1ea;}
.note{font-size:15px;color:var(--steel);border-top:1px solid var(--line);padding-top:16px;margin-top:8px;}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line);background:var(--panel);margin:0 0 12px;}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:600;color:var(--paper);list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--accent);font-family:var(--font-mono);}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 20px 18px;margin:0;}

/* ---------- author + book box ---------- */
.author-box{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;margin:56px 0 0;padding:26px;border:1px solid var(--line-strong);background:var(--panel);}
.author-box img{width:120px;height:auto;aspect-ratio:840/1344;border:1px solid var(--line-strong);}
.author-box .label{font-family:var(--font-mono);font-size:12.5px;color:var(--steel-dim);margin:0 0 6px;}
.author-box .name{font-family:var(--font-display);font-weight:600;font-size:24px;margin:0 0 8px;}
.author-box p{font-size:15.5px;color:var(--steel);margin:0 0 14px;}
.author-box .actions{display:flex;flex-wrap:wrap;gap:12px;}
@media (max-width:560px){.author-box{grid-template-columns:1fr;}.author-box img{width:110px;}}

.btn{display:inline-flex;align-items:center;font-weight:600;font-size:15px;padding:11px 20px;text-decoration:none;border:1px solid transparent;}
.btn-primary{background:var(--accent);color:#1a1004;}
.btn-primary:hover{background:#f0973a;}
.btn-ghost{border-color:var(--line-strong);color:var(--paper);}
.btn-ghost:hover{border-color:var(--steel);}

/* ---------- related ---------- */
.related{max-width:760px;margin:0 auto;padding:0 24px 72px;}
.related h2{font-family:var(--font-display);font-weight:600;font-size:26px;margin:0 0 18px;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.card{display:block;background:var(--bg-950);border:1px solid var(--line);padding:20px 22px;text-decoration:none;}
.card:hover{background:var(--panel);border-color:var(--line-strong);}
.card .cat{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);margin:0 0 8px;}
.card .t{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.2;color:var(--paper);margin:0 0 8px;}
.card .d{font-size:15px;color:var(--steel);line-height:1.5;margin:0;}

/* ---------- index page ---------- */
.index-hero{max-width:1180px;margin:0 auto;padding:72px 28px 32px;}
.index-hero p.lead{max-width:62ch;color:var(--steel);font-size:19px;}
.index-list{max-width:1180px;margin:0 auto;padding:0 28px 80px;}
.index-list .cards{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.index-list .card{padding:28px;}
.index-list .card .t{font-size:26px;}

footer{border-top:1px solid var(--line);padding:32px 0;}
.foot-row{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--font-mono);font-size:12.5px;color:var(--steel-dim);}
.foot-row a{color:var(--steel-dim);text-decoration:none;}
.foot-row a:hover{color:var(--paper);}