/* ============================================================================
   NOTEBOOK 2026 — Direction A, site-wide
   Loads AFTER redesign-2026.css and refines it. Everything is scoped to
   body.rd so nothing leaks. Retro DNA: ruled paper, typewriter metadata,
   footnote apparatus. Modern DNA: fluid type, grid, progressive disclosure.
   Built 2026-08-06.
   ============================================================================ */

body.rd{
  --nb-grid:rgba(27,58,92,.055);
  --nb-mark:#8A5A00;              /* AA on cream: 5.6:1 */
  --nb-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --nb-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  body.rd{ --nb-grid:rgba(159,187,216,.07); --nb-mark:#E0B23C; }
}

/* ---------- ruled-paper ground ---------- */
body.rd{
  font-family:var(--nb-serif);
  font-size:clamp(17px,1rem + .3vw,19px);
  line-height:1.62;
  background-image:repeating-linear-gradient(
    transparent, transparent 31px, var(--nb-grid) 31px, var(--nb-grid) 32px);
}
/* the panels sit on the ruled ground, so keep their own fill opaque */
body.rd article, body.rd main,
body.rd .content-box, body.rd .product-box{
  background-image:none;
}

/* ---------- reading progress ---------- */
#nb-prog{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:40;
  background:var(--nb-mark); transition:width .08s linear;
}
@media(prefers-reduced-motion:reduce){#nb-prog{transition:none}}

/* ---------- typography ---------- */
body.rd h1{
  font-size:clamp(1.9rem,1.3rem + 2.4vw,2.85rem);
  line-height:1.12; letter-spacing:-.02em; font-weight:600;
}
body.rd h2{
  font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);
  line-height:1.22; letter-spacing:-.015em; font-weight:600; margin-top:2em;
}
/* typewriter rule trailing every h2 — the signature Direction A move */
body.rd article h2::after, body.rd main h2::after{
  content:""; display:block; height:1px; background:var(--rule);
  margin-top:.5em; opacity:.85;
}
body.rd h3{font-size:clamp(1.08rem,1rem + .45vw,1.28rem); font-weight:600; letter-spacing:-.01em}

/* monospace metadata — dates, bylines, kickers, labels */
body.rd .kicker, body.rd .byline, body.rd .stamp, body.rd .source,
body.rd .journal, body.rd .citations, body.rd time{
  font-family:var(--nb-mono);
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); opacity:.72;
}
body.rd .kicker{color:var(--nb-mark); opacity:1; letter-spacing:.13em}

/* ---------- cards become notebook entries ---------- */
body.rd .content-box, body.rd .product-box, body.rd .lit-card, body.rd .see-also{
  border:1px solid var(--rule); border-radius:0;
  box-shadow:3px 3px 0 var(--shadow,rgba(38,34,28,.16));
  padding:18px 18px 20px;
}
body.rd .lit-card{border-left:4px solid var(--nb-mark)}
body.rd .lit-card .journal{display:block; margin-bottom:4px}
body.rd .lit-card .impact, body.rd .lit-card .citations{
  font-family:var(--nb-mono); font-size:.7rem; letter-spacing:.05em;
}

/* ---------- FAQ / Q&A as a definition list, not a wall ---------- */
body.rd .faq-item, body.rd .qa{
  border-bottom:1px solid var(--rule); padding:14px 0;
}
body.rd .faq-item:last-child, body.rd .qa:last-child{border-bottom:0}
body.rd .faq-question, body.rd .qa > strong:first-child{
  font-weight:600; font-size:1.04rem; line-height:1.35;
}
body.rd .faq-stat{
  font-family:var(--nb-mono); font-size:.76rem; line-height:1.5;
  border-left:3px solid var(--nb-mark); padding:8px 12px; margin-top:10px;
  background:rgba(138,90,0,.06);
}
@media (prefers-color-scheme:dark){
  body.rd .faq-stat{background:rgba(224,178,60,.09)}
}

/* ---------- THE ANSWER CAPSULE, folded away from humans ----------
   Machine-readable in the DOM and in JSON-LD; optional for readers.     */
body.rd details.nb-capsule{
  margin:20px 0; border:1px solid var(--rule);
  border-left:4px solid var(--nb-mark);
  background:rgba(138,90,0,.045);
}
@media (prefers-color-scheme:dark){
  body.rd details.nb-capsule{background:rgba(224,178,60,.07)}
}
body.rd details.nb-capsule > summary{
  cursor:pointer; list-style:none; min-height:46px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px;
  font-family:var(--nb-mono); font-size:.73rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink); opacity:.78;
}
body.rd details.nb-capsule > summary::-webkit-details-marker{display:none}
body.rd details.nb-capsule > summary::after{content:"[+]"; color:var(--nb-mark); opacity:1}
body.rd details.nb-capsule[open] > summary::after{content:"[\2212]"}
body.rd details.nb-capsule > summary:hover{opacity:1}
body.rd .nb-capsule-body{
  padding:0 14px 15px; font-size:.93rem; line-height:1.58;
}
body.rd .nb-capsule-body > *:first-child{margin-top:0}
body.rd .nb-capsule-body > *:last-child{margin-bottom:0}

/* ---------- article feed (blog index, "what's new") ---------- */
body.rd .nb-feed{list-style:none; margin:0; padding:0}
body.rd .nb-feed > li{border-bottom:1px solid var(--rule)}
body.rd .nb-feed > li:last-child{border-bottom:0}
body.rd .nb-feed a{
  display:grid; grid-template-columns:1fr; gap:5px;
  padding:16px 0; text-decoration:none; color:inherit; min-height:44px;
}
@media(min-width:38rem){
  body.rd .nb-feed a{grid-template-columns:7.5rem 1fr; column-gap:20px; align-items:start}
}
body.rd .nb-feed a:hover .nb-ttl, body.rd .nb-feed a:focus .nb-ttl{
  color:var(--link); text-decoration:underline; text-underline-offset:3px;
}
body.rd .nb-ttl{font-size:1.08rem; font-weight:600; line-height:1.32; margin:0}
body.rd .nb-dek{font-size:.92rem; opacity:.75; margin:5px 0 0; line-height:1.5}
body.rd .nb-tags{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap}
body.rd .nb-tag{
  font-family:var(--nb-mono); font-size:.66rem; text-transform:uppercase;
  letter-spacing:.05em; border:1px solid var(--rule); padding:2px 7px; opacity:.75;
}

/* ---------- footnote apparatus ---------- */
body.rd .fn{
  font-family:var(--nb-mono); font-size:.68rem; vertical-align:super;
  color:var(--nb-mark); text-decoration:none; padding:0 1px;
}
body.rd .fn:hover{text-decoration:underline}
body.rd .nb-notes{
  margin:32px 0; padding:15px 0 16px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  font-size:.86rem; opacity:.82;
}
body.rd .nb-notes p{margin:0 0 7px; text-indent:-1.5rem; padding-left:1.5rem}

/* ---------- credential strip ---------- */
body.rd .nb-creds{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:22px 0;
}
@media(min-width:34rem){body.rd .nb-creds{grid-template-columns:repeat(4,1fr)}}
body.rd .nb-cred{background:var(--paper); padding:13px 12px}
body.rd .nb-cred b{
  display:block; font-family:var(--nb-mono); font-size:1.26rem;
  color:var(--navy); font-weight:700; letter-spacing:-.03em;
}
body.rd .nb-cred span{
  display:block; margin-top:3px; font-family:var(--nb-mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em; opacity:.72; line-height:1.35;
}

/* ---------- links: readable, not neon ---------- */
body.rd article a:not(.btn):not(.nb-tag),
body.rd main a:not(.btn):not(.nb-tag){
  text-underline-offset:2px; text-decoration-thickness:1px;
}

/* ---------- tap targets ---------- */
body.rd nav a, body.rd .apple-nav-links a, body.rd .footer-directory a{
  min-height:44px; display:inline-flex; align-items:center;
}

/* ---------- print: it's a paper, let it be one ---------- */
@media print{
  body.rd{background-image:none; font-size:11pt}
  #nb-prog, body.rd .rd-dock, body.rd .apple-nav{display:none !important}
  body.rd details.nb-capsule[open], body.rd details.nb-capsule{display:none}
}

/* ---------- neutralise legacy box chrome once folded into the capsule ----------
   The old answer-capsule blocks carried their own border/background. Inside a
   <details> that reads as a box-in-a-box, so strip the inner decoration. */
body.rd .nb-capsule-body > *{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  font-weight:400 !important;
  font-size:1em !important;
}
body.rd .nb-capsule-body strong{font-weight:600 !important}
body.rd .nb-unwrapped{
  border:0 !important; background:transparent !important;
  box-shadow:none !important; padding:0 !important; margin:0 !important;
}

/* ============================================================================
   HOMEPAGE — Direction C's lead-story pattern, applied over the existing
   schema.org ItemList markup so the structured data stays intact.
   ============================================================================ */

/* --- the lead story --- */
body.rd.rd-home #whats-new{ padding-top:8px }

/* kicker: "TOP STORY · JULY 29, 2026" */
body.rd.rd-home #whats-new > table p:first-child,
body.rd.rd-home #whats-new p[style*="CC0000"]{
  font-family:var(--nb-mono) !important;
  font-size:.7rem !important; font-weight:700 !important;
  letter-spacing:.14em !important; text-transform:uppercase;
  color:#A3231A !important; margin:0 0 10px 0 !important;
}
@media (prefers-color-scheme:dark){
  body.rd.rd-home #whats-new p[style*="CC0000"]{ color:#E2856F !important }
}

/* lead headline — newspaper scale, serif, tight */
body.rd.rd-home #whats-new p[style*="15pt"]{
  font-family:var(--nb-serif) !important;
  font-size:clamp(1.45rem,1.1rem + 1.9vw,2.1rem) !important;
  line-height:1.14 !important; letter-spacing:-.02em;
  font-weight:700 !important; margin:0 0 13px 0 !important;
}

/* lead body copy */
body.rd.rd-home #whats-new p[style*="11.5pt"]{
  font-size:1rem !important; line-height:1.6 !important;
}

/* the lead sits in a bordered slab, like a front page */
body.rd.rd-home #whats-new > table{
  border-left:4px solid #A3231A !important;
  background:var(--paper) !important;
}
@media (prefers-color-scheme:dark){
  body.rd.rd-home #whats-new > table{ border-left-color:#E2856F !important }
}

/* --- "What's New" as the notebook feed --- */
body.rd.rd-home .whats-new h3{
  font-family:var(--nb-mono); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; opacity:.72;
  display:flex; align-items:center; gap:12px; margin:34px 0 6px;
}
body.rd.rd-home .whats-new h3::after{
  content:""; flex:1; height:1px; background:var(--rule);
}
body.rd.rd-home .whats-new p[itemprop="itemListElement"]{
  border-bottom:1px solid var(--rule);
  padding:15px 0; margin:0;
  font-size:.93rem; line-height:1.55;
}
body.rd.rd-home .whats-new p[itemprop="itemListElement"]:last-of-type{border-bottom:0}
/* the leading date becomes a monospace stamp */
body.rd.rd-home .whats-new p[itemprop="itemListElement"] > b:first-child{
  font-family:var(--nb-mono); font-size:.71rem; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase; opacity:.68;
}
body.rd.rd-home .whats-new p[itemprop="itemListElement"] a{
  text-decoration:none;
}
body.rd.rd-home .whats-new p[itemprop="itemListElement"] a b{
  font-size:1.06rem; line-height:1.32; font-weight:600;
  display:inline-block; margin:3px 0 4px;
}
body.rd.rd-home .whats-new p[itemprop="itemListElement"] a:hover b{
  text-decoration:underline; text-underline-offset:3px;
}

/* --- credential stats as the notebook strip --- */
body.rd.rd-home .stat-grid, body.rd.rd-home .stats{
  border:1px solid var(--rule); background:var(--rule); gap:1px;
}
body.rd.rd-home .stat-grid > *, body.rd.rd-home .stats > *{
  background:var(--paper);
}