/* Side Quest — shared inner-page design system.
   Source of truth: the APPROVED homepage visual language.
   Homepage stays self-contained. Articles / About load this sheet for chrome
   + reading measure. Per-article skins may override --accent / --page only. */

:root{
  --sq-bg:#0b0d1a;
  --sq-panel:#1e2650;
  --sq-ink:#e6ded0;
  --sq-ink2:#bab19f;
  --sq-muted:#8c8578;
  --sq-border:#3d4270;
  --sq-accent:#2f9d94;
  --sq-link:#8f8fff;
  --sq-visited:#bd8cf5;
  --sq-hit:#d69a26;
  --sq-mark:#f04a36;
  --sq-mark2:#f0a828;
  --sq-bevel:#5f6aa8;
  --sq-sink:#070914;
  --sq-shadow:#04060f;
  --sq-display:"Big Shoulders Display","Haettenschweiler",Impact,sans-serif;
  --sq-mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --sq-serif:Georgia,"Times New Roman",serif;
  --sq-raise:inset 2px 2px 0 var(--sq-bevel),inset -2px -2px 0 var(--sq-shadow),4px 4px 0 var(--sq-shadow);
  --sq-raise-lg:inset 2px 2px 0 var(--sq-bevel),inset -2px -2px 0 var(--sq-shadow),7px 7px 0 var(--sq-shadow);
  --sq-well:inset 2px 2px 0 var(--sq-shadow),inset -2px -2px 0 var(--sq-bevel);
  --sq-measure:900px;
  --sq-edge:clamp(18px,4vw,28px);
}

/* Default chrome tokens (articles may alias these to local --chrome-* ) */
.sq-body,.viz-root,body.sq-article{
  --chrome-bg:var(--sq-bg);
  --chrome-ink:#ece7dc;
  --chrome-muted:var(--sq-muted);
  --chrome-accent:var(--sq-accent);
  --chrome-rule:var(--sq-border);
  --chrome-link:var(--sq-link);
  --display:var(--sq-display);
  --mono:var(--sq-mono);
}

/* ── Shared masthead (homepage DNA, quieter wordmark) ── */
.masthead{
  text-align:center;padding:18px var(--sq-edge) 14px;margin:0;
  background:var(--chrome-bg,#0b0d1a);color:var(--chrome-ink,#ece7dc);
  position:relative;z-index:2}
.masthead-in{max-width:var(--sq-measure);margin:0 auto;padding:0}
.masthead .kicker,.masthead .issue{
  font-family:var(--mono,var(--sq-mono));font-size:.6rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--chrome-muted,var(--sq-muted));margin:0 0 5px}
.masthead .kicker b,.masthead .issue b{color:var(--accent,var(--sq-accent));font-weight:700}
.masthead .wordmark,.masthead .brand{
  font-family:var(--display,var(--sq-display));font-weight:800;
  font-size:clamp(1.15rem,3.4vw,1.5rem);line-height:1;letter-spacing:0;margin:0;
  text-shadow:-1px 0 0 #04060f,1px 0 0 #04060f,0 -1px 0 #04060f,0 1px 0 #04060f,2px 2px 0 #000}
.masthead .wordmark a,.masthead .brand a{
  color:var(--chrome-ink,#ece7dc);text-decoration:none;display:inline-block;padding:6px 8px;margin:-6px -8px}
.masthead .wordmark em,.masthead .brand em,.masthead .brand .dot,.masthead .brand .qm{
  font-style:normal;color:var(--chrome-accent,var(--sq-accent))}
.rule-double,.masthead .stripe,.masthead .rule-double{
  border-top:3px double var(--chrome-accent,var(--sq-accent));margin-top:13px;height:0;border-bottom:0}
.rule-thin,.masthead .rule-thin{
  border-top:1px solid var(--chrome-rule,var(--sq-border));margin-top:4px}

/* Bracket nav — homepage pattern */
.nav,.sitenav,.masthead .sitenav{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:2px 4px;margin-top:10px;font-family:var(--mono,var(--sq-mono));font-size:.82rem}
.nav a,.sitenav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 .55em;
  color:var(--chrome-link,var(--sq-link));text-decoration:none;border:1px solid transparent}
.nav a:visited,.sitenav a:visited{color:var(--chrome-link,var(--sq-link))}
.nav a:hover,.sitenav a:hover{color:var(--chrome-accent,var(--sq-accent))}
.nav a::before,.sitenav a::before{content:"[ "}
.nav a::after,.sitenav a::after{content:" ]"}
.nav a[aria-current],.sitenav a[aria-current]{
  color:var(--chrome-ink,#ece7dc);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:2px;text-decoration-color:var(--chrome-accent,var(--sq-accent))}
.nav a.nav-cta,.sitenav a.nav-cta{
  display:inline-flex;align-items:center;
  font-size:.76rem;padding:3px 9px;margin:0;
  color:#0a1a0e!important;background:#43e07a;border:0;
  box-shadow:0 0 0 1px rgba(4,6,15,.75),0 0 10px 1px rgba(67,224,122,.42);
  animation:sq-cta-glow 2.6s ease-in-out infinite;font-weight:700;letter-spacing:.04em;line-height:1.2}
.nav a.nav-cta::before,.nav a.nav-cta::after,.sitenav a.nav-cta::before,.sitenav a.nav-cta::after{content:none}
.nav a.nav-cta:hover,.sitenav a.nav-cta:hover{color:#0a1a0e!important;filter:brightness(1.06)}
@keyframes sq-cta-glow{
  0%,100%{background:#43e07a;box-shadow:0 0 0 1px rgba(4,6,15,.75),0 0 15px 2px rgba(67,224,122,.5)}
  50%{background:#f0a828;box-shadow:0 0 0 1px rgba(4,6,15,.75),0 0 19px 4px rgba(240,168,40,.6)}}
@media(prefers-reduced-motion:reduce){.nav a.nav-cta,.sitenav a.nav-cta{animation:none}}
.nav .sep,.sitenav .sep{color:var(--chrome-muted,var(--sq-muted))}
@media(max-width:520px){.nav .sep,.sitenav .sep{display:none}}

/* Hide legacy cream-article chrome bits when system masthead is used */
.masthead .tag{display:none}

/* ── Article reading measure ── */
.sq-article .wrap,
.viz-root .wrap,
body.sq-article .wrap{
  max-width:var(--sq-measure);margin:0 auto;padding:0 var(--sq-edge) 72px}
body.sq-article,
.viz-root.sq-article{
  font-family:var(--sq-serif);font-size:17.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Article hero / title block */
.sq-hero,.hero{
  background:var(--chrome-bg,var(--sq-bg));color:var(--chrome-ink,#ece7dc);margin:0}
.sq-hero-inner,.hero-inner{
  max-width:var(--sq-measure);margin:0 auto;padding:28px var(--sq-edge) 32px}
.sq-hero .eyebrow,.hero .eyebrow,.kicker{
  font-family:var(--mono,var(--sq-mono));font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent,var(--sq-accent));font-weight:700;margin:0 0 12px}
.sq-hero h1,.hero h1,h1.headline{
  font-family:var(--display,var(--sq-display));font-weight:800;
  font-size:clamp(2.35rem,7.2vw,3.85rem);line-height:.96;letter-spacing:-.008em;margin:0 0 14px;
  text-shadow:-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,3px 3px 0 #000;
  color:var(--chrome-ink,#f3f3f7);text-wrap:balance}
.sq-hero .deck,.hero .deck,.dek{
  font-size:1.14rem;line-height:1.55;color:var(--ink-2,var(--sq-ink2));
  margin:0 0 14px;max-width:52ch}
.byline{
  font-family:var(--mono,var(--sq-mono));font-size:.78rem;color:var(--muted,var(--sq-muted));
  padding-bottom:18px;border-bottom:1px solid var(--border,var(--grid,var(--sq-border)));margin:0 0 26px}
.byline .sep{opacity:.55;margin:0 .35em}

/* Prose hierarchy */
.sq-article p,.viz-root.sq-article p,.content p{margin:0 0 1.05em}
.dropcap::first-letter{
  font-family:var(--sq-serif);font-weight:700;float:left;font-size:3.5em;
  line-height:.82;padding:6px 10px 0 0;color:var(--accent-text,var(--accent,var(--sq-accent)))}
.pull{
  position:relative;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:750;
  font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.28;letter-spacing:-.01em;
  border-top:3px solid var(--accent,var(--sq-accent));border-bottom:1px solid var(--border,var(--sq-border));
  padding:20px 0 20px 44px;margin:40px 0;color:var(--ink,var(--sq-ink))}
.pull::before{
  content:"\201C";position:absolute;left:0;top:10px;font-family:var(--display,var(--sq-display));
  font-size:2.6rem;line-height:1;font-weight:800;color:var(--accent-text,var(--accent));opacity:.85}

/* Section heads */
h2.chapter,h2.sec{
  font-family:var(--mono,var(--sq-mono));font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;margin:56px 0 10px;
  display:flex;align-items:center;gap:12px;color:var(--ink,var(--sq-ink))}
h2.chapter::after,h2.sec::after{
  content:"";flex:1;height:0;border-top:1px solid var(--accent,var(--sq-accent));opacity:.65}
h2.chapter .num,h2.sec .num{color:var(--accent-text,var(--accent));font-variant-numeric:tabular-nums}
.chapter-dek{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.22rem;font-weight:750;
  line-height:1.28;letter-spacing:-.01em;margin:0 0 18px;color:var(--ink,var(--sq-ink))}

/* Content h2 (draft-style numbered sections) */
.content{counter-reset:sec}
.content h2{
  font-family:var(--display,var(--sq-display));font-weight:800;
  font-size:clamp(1.35rem,2.5vw,1.6rem);letter-spacing:-.01em;margin:2.2em 0 .55em;padding-top:.55em;
  counter-increment:sec;color:var(--ink,var(--sq-ink))}
.content h2::before{
  content:counter(sec,decimal-leading-zero);color:var(--accent,var(--sq-accent));
  font-family:var(--mono,var(--sq-mono));font-size:.7rem;letter-spacing:.14em;display:block;margin-bottom:4px}
.content h3{
  font-family:var(--mono,var(--sq-mono));font-size:.92rem;margin:1.55em 0 .45em;letter-spacing:.04em}
.content a{color:var(--accent,var(--sq-accent))}
.content blockquote,.sq-article blockquote{
  margin:1.4em 0;padding:14px 18px;background:var(--surface,var(--sq-panel));
  border-left:3px solid var(--accent,var(--sq-accent));font-style:italic;
  color:var(--ink2,var(--sq-ink2));border-radius:0}
.content blockquote p,.sq-article blockquote p{margin:0}

/* Lists and tables.
   The renderer only learned these today, so nothing had ever styled them --
   an editor's first bulleted list would have arrived in browser defaults,
   sitting in Georgia at the wrong indent with the wrong bullet. Written to the
   same measure and colours as the prose around them. */
.content ul,.content ol,.sq-article ul,.sq-article ol{margin:0 0 1.05em;padding-left:1.4em}
.content li,.sq-article li{margin:0 0 .4em}
.content li::marker,.sq-article li::marker{color:var(--accent-text,var(--accent,var(--sq-accent)))}
.content ol,.sq-article ol{font-variant-numeric:tabular-nums}

/* A table wider than the reading measure scrolls inside its own box. Letting
   it push the page sideways instead is the bug everybody meets on a phone and
   nobody can find the cause of. */
.sq-table{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
.sq-table table{border-collapse:collapse;width:100%;font-size:.92rem}
.sq-table th,.sq-table td{
  padding:8px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--grid,var(--sq-border))}
.sq-table th{
  font-family:var(--mono,var(--sq-mono));font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  border-bottom:2px solid var(--accent,var(--sq-accent));color:var(--ink,var(--sq-ink))}
.sq-table tbody tr:last-child td{border-bottom:0}
.sq-table td{font-variant-numeric:tabular-nums}

/* Callouts / featured / companion */
.featured,.companion{
  font-family:var(--mono,var(--sq-mono));font-size:.8rem;color:var(--ink2,var(--sq-ink2));
  background:var(--surface,var(--sq-panel));border:1px solid var(--grid,var(--sq-border));
  padding:12px 16px;margin:0 0 26px;box-shadow:var(--sq-well);border-radius:0}
.featured a,.companion a{color:var(--accent,var(--sq-accent));font-weight:650;text-decoration:none}
.featured a:hover,.companion a:hover{text-decoration:underline}
.companion{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.companion .lab{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,var(--sq-muted));font-weight:700}

/* Figs / tables */
.fig{margin:1.7em 0}
.fig img{
  width:100%;height:auto;border:1px solid var(--grid,var(--sq-border));
  background:#fff;border-radius:0;display:block}
.fig figcaption{
  font-family:var(--mono,var(--sq-mono));font-size:.72rem;color:var(--muted,var(--sq-muted));margin-top:8px;line-height:1.45}
.tblwrap{
  overflow-x:auto;margin:1.5em 0;background:var(--surface,var(--sq-panel));
  border:1px solid var(--grid,var(--sq-border));border-radius:0}

/* TOC */
.toc{
  font-family:var(--mono,var(--sq-mono));font-size:.84rem;background:var(--surface,var(--sq-panel));
  border:1px solid var(--grid,var(--sq-border));padding:6px 16px;margin:0 0 30px;border-radius:0}
.toc summary{
  cursor:pointer;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2,var(--sq-ink2));padding:8px 0;list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:" +";color:var(--accent,var(--sq-accent))}
.toc[open] summary::after{content:" –"}
.toc a{color:var(--ink2,var(--sq-ink2));text-decoration:none}
.toc a:hover{color:var(--accent,var(--sq-accent))}

/* Next / related */
.postnav-h{
  margin:56px 0 12px;font-family:var(--mono,var(--sq-mono));font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted,var(--sq-muted));font-weight:700}
.postnav{
  display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:18px 0 0;
  border-top:1px solid var(--grid,var(--border,var(--sq-border)));font-family:var(--mono,var(--sq-mono))}
.postnav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 15px;
  border:1px solid var(--baseline,var(--border,var(--sq-border)));font-size:.78rem;
  color:var(--accent-text,var(--accent,var(--sq-accent)));text-decoration:none;font-weight:650;
  background:var(--surface,transparent);border-radius:0;transition:border-color .15s,transform .1s}
.postnav a:hover,.postnav a:focus-visible{border-color:var(--accent,var(--sq-accent));transform:translateY(-1px)}

/* Buttons matching homepage raise */
.sq-btn,.featured-cta{
  display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:12px 18px;
  font-family:var(--mono,var(--sq-mono));font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#04140a;background:var(--accent,var(--sq-accent));
  border:1px solid var(--sq-shadow);box-shadow:var(--sq-raise);text-decoration:none;
  transition:transform .1s,box-shadow .1s,filter .1s}
.sq-btn:hover,.featured-cta:hover{filter:brightness(1.08);transform:translate(-1px,-1px)}
.sq-btn:active,.featured-cta:active{box-shadow:var(--sq-well);transform:translate(2px,2px)}

/* Foot */
.foot{
  margin-top:40px;border-top:1px solid var(--rule,var(--sq-border));padding:16px 0 48px;
  font-family:var(--mono,var(--sq-mono));font-size:.74rem;color:var(--muted,var(--sq-muted));
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.foot a{display:inline-flex;align-items:center;min-height:40px;color:var(--sq-link)}

/* Progress bar on longreads */
#progress{position:fixed;top:0;left:0;height:3px;background:var(--accent,var(--sq-accent));width:0;z-index:80}

@media(max-width:680px){
  body.sq-article,.viz-root.sq-article{font-size:16.5px}
  .sq-hero-inner,.hero-inner{padding:22px var(--sq-edge) 26px}
  .pull{padding-left:28px;font-size:1.2rem}
}