/* Metaphors I Can't Stand — shared stylesheet (rosalindlovelace.com)
   A sharper counterpoint to Bits & Pieces: cooler paper, near-black ink,
   one unifying sea-teal accent, monospace labels, hairline rules, no cards.
   Root-relative assets only. Spectral loaded per-page via Google Fonts <link>. */

:root{
  --paper:#f3f1ec;          /* cool bone, less yellow than the B&P cream */
  --ink:#15141a;            /* near-black, high contrast */
  --text:#2a2830;           /* body */
  --muted:#6a6672;          /* cool muted */
  --faint:#9b97a2;          /* cool faint */
  --rule:#d8d4cd;           /* hairline */
  --rule-strong:#15141a;    /* heavy editorial rules */
  --accent:#3f7c86;         /* sea teal — the single unifying accent */
  --accent-ink:#2f5e66;     /* darker accent for hovers */
  --accent-weak:#dcebed;    /* pale wash */
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --measure:38rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-weak)}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 24px}
.wrap.wide{max-width:54rem}

/* ---------- masthead ---------- */
.topbar{border-top:4px solid var(--accent);border-bottom:1px solid var(--rule-strong)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:15px;padding-bottom:15px;max-width:54rem}
.topbar a{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.topbar a:hover{color:var(--ink)}
.topbar .home{font-weight:600;color:var(--ink)}
.topbar .series-name{color:var(--accent)}

/* ---------- essay header ---------- */
.post{padding-top:52px;padding-bottom:8px}
.kicker{display:flex;align-items:center;gap:13px;margin:0 0 22px}
.kicker .rule{width:34px;height:3px;background:var(--accent);flex:0 0 auto}
.kicker .label{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.post h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2.1rem,5.6vw,2.95rem);line-height:1.07;letter-spacing:-.018em;
  color:var(--ink);margin:0 0 20px;
}
.byline{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--muted);margin:0 0 28px}
.byline b{font-weight:600;color:var(--ink)}
.post-head .divider{height:1px;background:var(--rule-strong);margin:0 0 34px}

/* ---------- prose ---------- */
.prose{padding-bottom:8px}
.prose p{margin:0 0 1.4em}
.prose > p:first-of-type{font-size:1.07em;color:var(--ink)}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.prose a:hover{color:var(--accent-ink);text-decoration-thickness:2px}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
.prose h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1.2;color:var(--ink);margin:1.9em 0 .55em}
.prose blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--accent);font-style:italic;color:var(--muted)}
.prose hr{border:0;height:1px;background:var(--rule);margin:2.2em 0}

/* ---------- essay footer ---------- */
.post-foot{margin-top:46px;padding-top:24px;border-top:1px solid var(--rule-strong)}
.series{display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;text-transform:uppercase}
.series a{color:var(--accent);text-decoration:none}
.series a:hover{color:var(--accent-ink);text-decoration:underline}
.series .all{color:var(--muted);font-weight:600;text-align:center;flex:1 1 auto}
.series .prev{text-align:left}
.series .next{text-align:right}
.authornote{font-family:var(--serif);font-size:.92rem;color:var(--muted);line-height:1.6;margin:30px 0 0;padding-left:15px;border-left:3px solid var(--accent-weak)}
.authornote b{color:var(--ink);font-weight:600}
.disclaimer{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:18px 0 64px}

/* ---------- index ---------- */
.head{padding:56px 0 6px}
.head .kicker{margin-bottom:20px}
.head h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.5rem,7vw,3.6rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px}
.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(1.18rem,2.5vw,1.5rem);line-height:1.4;color:var(--ink);margin:0 0 16px;max-width:34rem}
.sub{font-family:var(--mono);font-size:.82rem;line-height:1.7;letter-spacing:.01em;color:var(--muted);margin:0 0 20px;max-width:40rem}
.byline-i{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--muted);margin:0}
.byline-i b{font-weight:600;color:var(--ink)}
.head .divider{height:3px;background:var(--ink);margin:30px 0 0;max-width:54px}

.section-label{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:40px 0 2px}

.toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{
  display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:baseline;
  text-decoration:none;color:inherit;padding:24px 8px;transition:background .15s ease;
}
.toc a:hover,.toc a:focus-visible{background:#fbfaf7;outline:none}
.toc .n{
  grid-row:1 / span 2;font-family:var(--mono);font-weight:600;font-size:1.25rem;
  color:var(--accent);letter-spacing:.01em;align-self:start;padding-top:.18em;
}
.toc .ttl{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.22;color:var(--ink)}
.toc .blurb{font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--muted);margin-top:6px}
.toc a:hover .ttl{color:var(--accent)}

.note{font-family:var(--mono);font-size:.74rem;line-height:1.8;letter-spacing:.02em;color:var(--muted);max-width:42rem;margin:40px 0 72px;padding-left:15px;border-left:3px solid var(--rule)}
.note b{color:var(--ink);font-weight:600;text-transform:uppercase}

/* ---------- responsive ---------- */
@media (max-width:600px){
  body{font-size:1.12rem;line-height:1.72}
  .topbar .wrap{flex-wrap:wrap;gap:4px 14px}
  .post{padding-top:38px}
  .post h1{font-size:2rem}
  .head{padding-top:40px}
  .head h1{font-size:2.3rem}
  .series{flex-wrap:wrap;gap:10px;font-size:.72rem}
  .series .all{order:3;flex-basis:100%;text-align:left}
  .toc a{column-gap:18px;padding:20px 4px}
  .toc .ttl{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .toc a{transition:none}
}