/* ==========================================================================
   nasvih.tech — design system
   Ochre + mono + hairlines. No gradients, no pills, no blur, no soft shadows.
   ========================================================================== */

:root{
  /* paper + ink */
  --bg:#FBFAF7;
  --surface:#F3F1EA;
  --surface-2:#EDEAE0;
  --ink:#17150F;
  --muted:#5C5748;
  --faint:#6E6857;
  --line:#E3DFD3;
  --line-strong:#CDC7B6;

  /* accent — dark yellow / ochre.
     --amber is the accent HUE: borders, markers, rules, and text on dark.
     Any FILLED surface carrying white text must use --amber-deep (6.46:1),
     hover --amber-darker (8.18:1). White on --amber is only 4.07:1. */
  --amber:#A87400;
  --amber-deep:#7E5700;
  --amber-darker:#6A4900;
  --amber-light:#C98F0C;
  --amber-soft:#F6E9C9;
  --amber-line:#E0C88A;
  --on-amber:#FFFFFF;

  /* night (top strip, footer, code) */
  --night:#15140E;
  --night-2:#211F16;
  --night-line:#332F22;
  --night-ink:#EDE9DB;
  --night-muted:#A9A28C;

  /* geometry */
  --r:2px;
  --container:1120px;
  --measure:68ch;
  --gap:24px;
  --section-y:88px;

  /* type */
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --print:2px 2px 0 var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  font-variant-ligatures:none;
}
img,svg,video{display:block;max-width:100%}
img{height:auto;background:var(--surface-2)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
::selection{background:var(--amber-deep);color:var(--on-amber)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- layout ------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.section{padding-block:var(--section-y);border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.section--surface{background:var(--surface)}
.section--tight{padding-block:56px}
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stack>*+*{margin-top:14px}
.hr{height:1px;background:var(--line);border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px}
.skip-link:focus{left:8px;top:8px}

/* ---------- type -------------------------------------------------------- */
h1,h2,h3,h4,h5{font-family:var(--mono);font-weight:700;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(30px,4.6vw,46px)}
h2{font-size:clamp(22px,2.8vw,30px)}
h3{font-size:19px}
h4{font-size:16px}
.display{font-size:clamp(34px,6vw,60px);letter-spacing:-.035em;line-height:1.02}
.label{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--faint);font-weight:600}
.label--amber{color:var(--amber-deep)}
.lead{font-size:17px;color:var(--muted);line-height:1.65;max-width:62ch}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono-num{font-variant-numeric:tabular-nums}
.amber{color:var(--amber-deep)}
.underline-amber{box-shadow:inset 0 -2px 0 var(--amber)}
.rule-label{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.rule-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* prompt-style eyebrow: "$ about" */
.prompt::before{content:"$ ";color:var(--amber)}

/* ---------- tags / badges ------------------------------------------------ */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  padding:3px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);white-space:nowrap;
}
.tag--amber{border-color:var(--amber-line);background:var(--amber-soft);color:var(--amber-deep);font-weight:600}
.tag--night{border-color:var(--night-line);background:var(--night);color:var(--night-ink)}
a.tag:hover{border-color:var(--amber);color:var(--amber-deep)}
.badge-series{
  display:inline-block;border-left:3px solid var(--amber);padding-left:10px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);font-weight:600;
}

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:42px;padding:0 18px;border-radius:var(--r);
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:background .15s,color .15s,box-shadow .15s,transform .15s;
}
.btn svg{width:15px;height:15px}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--primary{background:var(--amber-deep);border-color:var(--amber-deep);color:var(--on-amber)}
.btn--primary:hover{background:var(--amber-darker);border-color:var(--amber-darker);color:var(--on-amber);box-shadow:var(--print);transform:translate(-1px,-1px)}
.btn--ghost{border-color:var(--line-strong);color:var(--muted)}
.btn--ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.btn--night{border-color:var(--night-line);background:var(--night);color:var(--night-ink)}
.btn--night:hover{background:var(--night-2);color:#fff}
.btn--sm{min-height:34px;padding:0 12px;font-size:12px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-deep);border-bottom:1px solid var(--amber-line);padding-bottom:2px}
.link-arrow:hover{border-bottom-color:var(--amber);color:var(--amber-deep)}

/* ---------- cards ------------------------------------------------------- */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:22px}
.card--flat{padding:0;overflow:hidden}
a.card:hover,.card--hover:hover{border-color:var(--amber);background:var(--bg)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14px}
.card-meta{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.icon-box{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);
  border:1px solid var(--amber-line);background:var(--amber-soft);color:var(--amber-deep);
}
.icon-box svg{width:18px;height:18px}

/* ---------- top bar ----------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em;font-size:15px}
.brand__mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r);
  background:var(--amber-deep);color:var(--on-amber);font-size:12px;font-weight:700;letter-spacing:.06em;
}
.brand__name{white-space:nowrap}
.brand__role{font-size:11px;color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:8px 12px;border-radius:var(--r);
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.nav a:hover{color:var(--ink)}
.nav a.is-active{color:var(--amber-deep)}
.nav a.is-active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;background:var(--amber)}
.topbar__cta{display:flex;align-items:center;gap:8px}
.burger{display:none;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--bg);align-items:center;justify-content:center;cursor:pointer}
.burger svg{width:18px;height:18px}
.mobile-nav{display:none;border-bottom:1px solid var(--line);background:var(--bg)}
.mobile-nav.is-open{display:block}
.mobile-nav a{display:block;padding:12px 20px;border-top:1px solid var(--line);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mobile-nav a:hover{background:var(--surface);color:var(--ink)}
@media (max-width:900px){
  .nav,.topbar__cta .btn:not(.btn--primary){display:none}
  .burger{display:inline-flex}
}

/* ---------- hero (home) -------------------------------------------------- */
.hero{padding-block:72px 64px;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:48px;align-items:start}
.hero h1{margin-block:14px 0}
.hero__role{margin-top:16px;font-size:16px;color:var(--muted);max-width:56ch;line-height:1.7}
.hero__meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.hero__cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.portrait{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.portrait img{width:100%}
.portrait__cap{border-top:1px solid var(--line);padding:10px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:10px}
.statline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);margin-top:36px}
.statline div{padding:16px 18px;border-left:1px solid var(--line)}
.statline div:first-child{border-left:0}
.statline b{display:block;font-size:22px;letter-spacing:-.02em}
.statline span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr;gap:32px}
  .statline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statline div:nth-child(3){border-left:0}
  .statline div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- timeline (experience) --------------------------------------- */
.timeline{border-left:1px solid var(--line);padding-left:0}
.tl-item{position:relative;padding:0 0 34px 26px;border-left:0}
.tl-item::before{content:"";position:absolute;left:-4px;top:6px;width:7px;height:7px;background:var(--amber);border-radius:var(--r)}
.tl-item:last-child{padding-bottom:0}
.tl-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between}
.tl-role{font-size:17px;font-weight:700}
.tl-org{font-size:13px;color:var(--amber-deep);font-weight:600}
.tl-when{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tl-item ul{margin-top:10px}
.tl-item li{position:relative;padding-left:16px;font-size:14px;color:var(--muted);margin-top:6px}
.tl-item li::before{content:"—";position:absolute;left:0;color:var(--amber)}

/* ---------- magazine: masthead + rails ---------------------------------- */
.masthead{background:var(--night);color:var(--night-ink);border-bottom:1px solid var(--night-line)}
.masthead__inner{padding-block:44px}
.masthead h1{font-size:clamp(28px,5vw,52px);letter-spacing:-.04em;color:#fff}
.masthead p{color:var(--night-muted);margin-top:12px;max-width:60ch;font-size:14px}
.masthead__meta{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.masthead .tag{background:transparent;border-color:var(--night-line);color:var(--night-muted)}

.lead-story{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:center}
.lead-story__media{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lead-story h2{font-size:clamp(24px,3.4vw,36px);margin-block:12px}
.lead-story p{color:var(--muted);font-size:15px;max-width:52ch}
@media (max-width:860px){.lead-story{grid-template-columns:1fr}}

.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong)}

.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.post-card:hover{border-color:var(--amber)}
.post-card__media{aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface-2)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
/* card titles are h2 on pages where they sit directly under the page h1
   (category, 404) and h3 elsewhere — identical type either way */
.post-card h2,.post-card h3{font-size:16px;line-height:1.3}
.post-card p{font-size:13.5px;color:var(--muted)}
.post-card__foot{margin-top:auto;display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* archive table */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.filters input[type=search]{
  flex:1;min-width:200px;height:38px;padding:0 12px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--bg);font-size:13px;
}
.chip{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--bg);padding:7px 11px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--amber-deep);border-color:var(--amber-deep);color:var(--on-amber);font-weight:600}
.archive{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.archive-row{display:grid;grid-template-columns:112px 1fr 132px;gap:14px;align-items:baseline;padding:13px 16px;border-top:1px solid var(--line)}
.archive-row:first-child{border-top:0}
.archive-row:hover{background:var(--surface)}
.archive-row .a-date{font-size:11.5px;color:var(--faint);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.archive-row .a-title{font-size:14.5px;font-weight:600}
.archive-row .a-cat{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep);text-align:right}
@media (max-width:720px){
  .archive-row{grid-template-columns:1fr;gap:4px}
  .archive-row .a-cat{text-align:left}
}
.empty{padding:28px 16px;text-align:center;color:var(--faint);font-size:13px}

/* ---------- article ----------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.crumbs a:hover{color:var(--amber-deep)}
.crumbs span[aria-hidden]{color:var(--line-strong)}
.article-head{padding-block:44px 28px;border-bottom:1px solid var(--line)}
.article-head h1{margin-block:16px 0;max-width:24ch;font-size:clamp(27px,4vw,42px)}
.article-head .dek{margin-top:16px;font-family:var(--sans);font-size:18px;color:var(--muted);max-width:56ch;line-height:1.55}
.byline{margin-top:22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.byline b{color:var(--ink);font-weight:600}
.hero-figure{margin-block:28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hero-figure img{width:100%}
.hero-figure figcaption{border-top:1px solid var(--line);padding:10px 14px;font-size:11.5px;color:var(--faint);background:var(--surface)}

.prose{font-family:var(--sans);font-size:17px;line-height:1.72;color:#241F16;max-width:var(--measure)}
.prose>*+*{margin-top:20px}
.prose h2{font-family:var(--mono);font-size:22px;margin-top:44px;padding-top:18px;border-top:1px solid var(--line)}
.prose h3{font-family:var(--mono);font-size:17px;margin-top:30px}
.prose a{color:var(--amber-deep);border-bottom:1px solid var(--amber-line)}
.prose a:hover{border-bottom-color:var(--amber)}
.prose strong{font-weight:600}
.prose ul,.prose ol{padding-left:0}
.prose li{position:relative;padding-left:22px;margin-top:9px}
.prose ul>li::before{content:"›";position:absolute;left:4px;color:var(--amber);font-family:var(--mono)}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;color:var(--amber);font-family:var(--mono);font-size:12px;top:4px}
.prose blockquote{
  border-left:3px solid var(--amber);background:var(--amber-soft);
  padding:16px 20px;font-family:var(--mono);font-size:15px;line-height:1.6;color:#3A3020;
}
.prose blockquote p+p{margin-top:10px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:1px 5px}
.prose pre{
  background:var(--night);color:var(--night-ink);border-radius:var(--r);
  padding:16px 18px;overflow-x:auto;font-size:13px;line-height:1.6;border:1px solid var(--night-line);
}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:13px}
.prose figure{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prose figcaption{border-top:1px solid var(--line);background:var(--surface);padding:9px 13px;font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.prose hr{height:1px;background:var(--line);border:0;margin-block:34px}
.prose table{font-family:var(--mono);font-size:13.5px;border:1px solid var(--line)}
.prose th,.prose td{border-top:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose thead th{background:var(--surface);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-top:0}
.table-scroll{overflow-x:auto}

.article-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:22px}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.series-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.series-nav a{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.series-nav a:hover{border-color:var(--amber)}
.series-nav .label{margin-bottom:6px}
.series-nav strong{font-size:14px;font-weight:600;line-height:1.35;display:block}
@media (max-width:720px){.series-nav{grid-template-columns:1fr}}
.series-list li{border-top:1px solid var(--line);padding:11px 0;display:flex;gap:12px;align-items:baseline;font-size:13.5px}
.series-list li:first-child{border-top:0}
.series-list .n{color:var(--amber-deep);font-size:11.5px;letter-spacing:.1em;min-width:32px}
.series-list a:hover{color:var(--amber-deep)}
.series-list li[aria-current=true]{color:var(--faint)}

.author-box{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:18px;align-items:flex-start;background:var(--surface)}
.author-box img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:var(--r);flex:none}
.author-box p{font-size:13.5px;color:var(--muted);margin-top:6px}

/* ---------- footer ----------------------------------------------------- */
.footer{background:var(--night);color:var(--night-muted);border-top:1px solid var(--night-line);padding-block:48px 32px;font-size:13px}
.footer a{color:var(--night-ink)}
.footer a:hover{color:var(--amber-light)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
/* h3 in the generated footer partial, h4 in the hand-authored index.html footer —
   both render as the same 11px uppercase column label. */
.footer h3,.footer h4{color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.footer li+li{margin-top:8px}
.footer__bar{margin-top:34px;padding-top:18px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-size:11.5px;letter-spacing:.06em}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ---------- responsive grid collapse ------------------------------------ */
@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){
  :root{--section-y:60px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  body{font-size:14.5px}
  .prose{font-size:16.5px}
}

/* ---------- print ------------------------------------------------------- */
@media print{
  .topbar,.footer,.share,.rail,.filters{display:none}
  body{background:#fff;color:#000}
  .prose{max-width:none}
}

/* ==========================================================================
   HOME-PAGE UTILITIES (appended — used by index.html only)
   Three genuinely missing primitives. Same tokens, no new colors or radii.
   ========================================================================== */

/* hairline list with a square amber marker — used for the "Current focus" list */
.marklist li{
  position:relative;padding:8px 0 8px 18px;
  border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.5;
}
.marklist li::before{
  content:"";position:absolute;left:0;top:15px;
  width:6px;height:6px;background:var(--amber);
}
.marklist--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.marklist--2>li:nth-child(1),.marklist--2>li:nth-child(2){border-top:0;padding-top:0}
.marklist--2>li:nth-child(1)::before,.marklist--2>li:nth-child(2)::before{top:7px}

/* hairline definition list — FAQ, category list, contact rows */
.faq-list>li{border-top:1px solid var(--line);padding-block:16px}
.faq-list>li:first-child{border-top:0;padding-top:0}
.faq-list>li:last-child{padding-bottom:0}
.faq-list h3{font-size:15px;font-weight:700;line-height:1.35}
.faq-list strong{font-size:15px;font-weight:700}
.faq-list p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.6;max-width:76ch}
.faq-list a:not(.link-arrow):hover{color:var(--amber-deep)}
.faq-list p a:not(.link-arrow){color:var(--amber-deep);border-bottom:1px solid var(--amber-line)}

/* pull quote (outside .prose) — recommendation block */
.quote blockquote{
  border-left:3px solid var(--amber);padding-left:24px;
  font-size:clamp(16px,2vw,20px);line-height:1.55;max-width:62ch;
}
.quote figcaption{
  margin-top:20px;padding-left:27px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
}
.quote figcaption b{color:var(--ink);font-weight:700;letter-spacing:.06em}

@media (max-width:680px){
  .marklist--2{grid-template-columns:1fr}
  .marklist--2>li:nth-child(2){border-top:1px solid var(--line);padding-top:8px}
  .marklist--2>li:nth-child(2)::before{top:15px}
  .quote blockquote{padding-left:16px}
  .quote figcaption{padding-left:19px}
}

/* ==========================================================================
   GENERATOR ADDITIONS — appended by the blog/build agent.
   Only what the magazine + article templates genuinely needed and the
   authored system above did not already provide. Same rules apply:
   no gradient, no pill radius, no blur, max radius var(--r).
   ========================================================================== */

/* JS filtering hides .archive-row, which is display:grid — [hidden] alone loses */
[hidden]{display:none!important}

/* single-column grid (used when a "More in <category>" trio has only 1-2 items) */
.grid-1{grid-template-columns:minmax(0,1fr)}

/* reading measure for the article shell (head, hero figure, footer blocks) */
.container--read{max-width:840px}

/* rule-label with a trailing action: label — hairline — link */
.rule-label::after{order:1}
.rule-label>a{order:2;flex:none}

/* the series badge sits directly under the breadcrumbs */
.article-head .badge-series{margin-top:20px}

/* prev/next cards: eyebrow on its own line, inline arrow (svg is display:block
   globally, which would otherwise break the label onto two lines) */
.series-nav .label{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.series-nav [data-dir=next] .label{justify-content:flex-end}
.series-nav [data-dir=next] strong{text-align:right}

/* breadcrumbs sitting on the night masthead */
.masthead .crumbs{color:var(--night-muted)}
.masthead .crumbs a:hover{color:var(--amber-light)}
.masthead .crumbs span[aria-hidden]{color:var(--night-line)}

/* in-body markdown figures */
.prose figure img{width:100%}

/* narrow-viewport containment for the canonical top bar: at <=480px the brand's
   two-line lockup + "Email me" overflowed the 60px strip. Layout-only, no new tokens. */
@media (max-width:480px){
  .brand{min-width:0}
  .brand br{display:none}
  .brand__role{display:none}
  .brand__name{font-size:13px;overflow:hidden;text-overflow:ellipsis;display:block}
  .topbar__cta .btn{white-space:nowrap}
  .topbar__cta{gap:6px;flex:none}
}

/* ---------- REVIEW ADDITIONS: typographic card band ---------------------- */
/* Posts whose original LinkedIn version had no image get a mono band so a
   row of cards keeps one silhouette. No gradient, no radius, hairline only. */
.post-card__media--type{
  display:grid;place-items:center;padding:16px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.post-card__media--type span{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-deep);font-weight:600;text-align:center;
}
.post-card__media--type span::before{content:"$ ";color:var(--line-strong)}

/* ==========================================================================
   AUDIT ADDITIONS — de-duplicated inline styles.
   The templates and the generator were emitting the same style="" attribute on
   every generated page (205 inline attributes across blog/). These are the
   repeats, lifted verbatim — identical values, no new tokens, no new colours.
   One-off inline styles (a single element on a single page) are left alone
   on purpose; a class for one use is not an improvement.
   ========================================================================== */

/* top-margin steps the templates repeat. Values are unchanged from the inline
   attributes they replace, so nothing moves on the page. */
.mt-6{margin-top:6px}
.mt-12{margin-top:12px}
.mt-14{margin-top:14px}
.mt-22{margin-top:22px}

/* standfirst under a rail's rule-label on /blog/ — pulls up under the 26px
   rule-label margin, then re-spaces before the cards. Was inline x5. */
.rail-note{margin:-14px 0 20px;font-size:13.5px}