/* ============================================================
   ob-single.css — single-post reading layout.
   Loads AFTER the shared ob-home.css. Dark editorial long-form.
   ============================================================ */

:root{ --read:#d6d6de; }   /* slightly softened body text for long reading */

/* ---------- reading-progress bar ---------- */
.reading-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover));
  transition:width .1s linear;
}
@media (prefers-reduced-motion:reduce){ .reading-progress{transition:none} }

/* ---------- layout: centered article, optional TOC in left margin ---------- */
.single-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.single{max-width:760px;margin:0 auto}

@media (min-width:1120px){
  .single-wrap{display:grid;grid-template-columns:1fr min(760px,100%) 1fr;column-gap:36px}
  .single{grid-column:2;max-width:none}
  .single-toc{grid-column:1;justify-self:end;width:210px;position:sticky;top:108px;align-self:start;max-height:calc(100vh - 140px);overflow:auto}
}
@media (max-width:1119px){ .single-toc{display:none !important} }

/* ---------- TOC ---------- */
.single-toc__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.single-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);display:flex;flex-direction:column}
.single-toc a{
  display:block;font-family:var(--font-body);font-size:13px;line-height:1.4;color:var(--muted);
  text-decoration:none;padding:7px 0 7px 16px;border-left:2px solid transparent;margin-left:-1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.single-toc a:hover,.single-toc a:focus-visible{color:var(--accent-hover)}
.single-toc a.is-active{color:var(--text);border-left-color:var(--accent)}

/* ---------- article header ---------- */
.single-header{padding:clamp(56px,9vh,104px) 0 clamp(26px,4vw,38px);border-bottom:1px solid var(--line)}
.single-eyebrow{display:flex;flex-wrap:wrap;gap:0 6px;font-size:clamp(11px,1.3vw,13px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.single-eyebrow i{color:var(--accent);font-style:normal}
.single-title{font-size:clamp(31px,5vw,52px);line-height:1.08;letter-spacing:-.025em;color:var(--text);margin:22px 0 0;max-width:20ch}
.single-lead{color:var(--muted);font-size:clamp(18px,2vw,22px);line-height:1.5;margin:24px 0 0;max-width:62ch}

/* ============================================================
   PROSE — the_content()
   ============================================================ */
.single-content{
  color:var(--read);font-size:clamp(17px,1.25vw,19px);line-height:1.75;
  padding-top:clamp(28px,4vw,40px);
}
.single-content > *:first-child{margin-top:0}
.single-content p{margin:0 0 1.3em}
.single-content strong,.single-content b{color:var(--text);font-weight:600}

/* headings */
.single-content h2,.single-content h3,.single-content h4{
  font-family:var(--font-display);color:var(--text);letter-spacing:-.02em;line-height:1.18;
  scroll-margin-top:96px;
}
.single-content h2{font-size:clamp(25px,3vw,34px);margin:1.9em 0 .55em;padding-top:.3em}
.single-content h3{font-size:clamp(20px,2.2vw,26px);margin:1.7em 0 .5em}
.single-content h4{font-size:clamp(18px,1.8vw,21px);margin:1.5em 0 .45em}

/* links */
.single-content a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(124,92,255,.45);text-underline-offset:3px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.single-content a:hover,.single-content a:focus-visible{color:var(--accent-hover);text-decoration-color:var(--accent-hover)}

/* lists */
.single-content ul,.single-content ol{margin:0 0 1.35em;padding-left:1.45em}
.single-content li{margin:.45em 0;padding-left:.15em}
.single-content li::marker{color:var(--accent)}
.single-content li>ul,.single-content li>ol{margin:.4em 0}

/* blockquote — indigo left-accent callout on surface */
.single-content blockquote,.single-content .wp-block-quote{
  margin:1.7em 0;padding:18px 24px;background:var(--surface);
  border-left:3px solid var(--accent);border-radius:0 12px 12px 0;color:var(--text);
}
.single-content blockquote p:last-child{margin-bottom:0}
.single-content blockquote cite{display:block;margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--muted);font-style:normal}

/* Gutenberg group / quote blocks that ship a baked-in LIGHT inline background
   (e.g. the "Quick answer" callout: style="background-color:#f4f2fd…"). Force
   the dark, readable treatment, beating inline styles with !important. */
.single-content .wp-block-group.has-background,
.single-content blockquote.has-background,
.single-content .wp-block-quote.has-background,
.single-content .is-style-default.has-background{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-left:4px solid var(--accent) !important;
  border-radius:10px !important;
  padding:18px 24px !important;
}
.single-content .wp-block-group.has-background :where(p,li,strong,em,span,h2,h3,h4){
  color:var(--text) !important;
}
.single-content .wp-block-group.has-background a,
.single-content .has-background a{color:var(--accent) !important}
.single-content .wp-block-group.has-background a:hover,
.single-content .has-background a:hover{color:var(--accent-hover) !important}

/* code */
.single-content :not(pre)>code{font-family:var(--font-mono);font-size:.86em;background:var(--surface);color:#e7e3ff;border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.single-content pre,.single-content .wp-block-code{
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  padding:16px 18px;overflow-x:auto;margin:1.7em 0;
}
.single-content pre code{font-family:var(--font-mono);font-size:14px;line-height:1.6;background:none;border:0;padding:0;color:var(--read)}

/* images / figures */
.single-content figure{margin:1.9em 0}
.single-content img{max-width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
.single-content figcaption{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-top:11px;text-align:center;line-height:1.5}

/* ---------- TABLES (pillar data tables) ---------- */
.single-content figure.wp-block-table,
.single-content .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.9em 0}
.single-content figure.wp-block-table{margin:1.9em 0}
.single-content table{
  width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;
  font-variant-numeric:tabular-nums;min-width:520px;
}
.single-content th,.single-content td{
  border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;
}
.single-content th{background:var(--surface);color:var(--text);font-weight:600;letter-spacing:.01em}
.single-content td{color:var(--read)}
.single-content tbody tr:hover{background:rgba(255,255,255,.02)}
.single-content figure.wp-block-table figcaption{margin-top:12px}

/* ---------- article footer ---------- */
.single-foot{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--line);padding-top:clamp(36px,5vw,52px)}
.single-cta{
  position:relative;overflow:hidden;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(36px,5vw,56px) clamp(20px,4vw,40px);
}
.single-cta .kicker{display:inline-flex}
.single-cta__h{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3.6vw,40px);line-height:1.05;letter-spacing:-.02em;color:var(--text);margin:16px 0 0}
.single-cta .btn{margin-top:26px}
.single-back{margin:clamp(28px,4vw,40px) 0 0;text-align:center}
.single-back a{font-family:var(--font-mono);font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.single-back a:hover,.single-back a:focus-visible{color:var(--accent-hover)}

@media (max-width:620px){
  .single-title{max-width:none}
}