/* /journal/guide — the blog edition of the book. Loads AFTER journal.css and reuses its tokens,
   .top nav, .date inset label and .t-* themes; the page's chapter theme sits on <body>. */
.gwrap{max-width:1180px; margin:0 auto; padding:8px 16px 48px; display:grid; grid-template-columns:1fr; gap:28px; align-items:start;}
/* desktop: sidebar pinned to the left edge, article centred on the SCREEN (not on the grid).
   margin-left = how far the article must sit from the sidebar for its centre to land on 50vw;
   0 when the screen is too narrow, so it slides right of the sidebar instead of under it. */
@media (min-width:960px){
  .top{max-width:none;}   /* back link sits over the sidebar, not over the old centred grid */
  .gwrap{max-width:none; grid-template-columns:290px minmax(0,1fr);}
  .post{width:100%; max-width:860px; margin-left:max(0px, calc((100vw - 860px) / 2 - 290px - 28px - 16px));}
}

/* sidebar — outset panel; current chapter expanded, current post pressed IN */
.side{display:none; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; background:var(--page); border-radius:22px; padding:20px 14px; box-shadow:var(--neu-out);}
@media (min-width:960px){ .side{display:block;} .side-m{display:none;} }
.side-home{display:block; padding:0 10px 12px; font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; line-height:1.35;}
.side-m{background:var(--page); border-radius:18px; box-shadow:var(--neu-out); padding:4px 10px;}
.side-m summary{cursor:pointer; padding:10px 8px; font-weight:700; font-size:14px; color:var(--brand);}
.toc,.toc ol{list-style:none;}
.toc > li{margin-top:4px;}
.toc-ch{display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:12px; text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; line-height:1.3;}
.toc-n{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:var(--brand); box-shadow:var(--neu-in-sm);}
.toc .here > .toc-ch{color:var(--brand);}
.toc ol{margin:4px 0 8px 22px; border-left:2px solid color-mix(in srgb, var(--brand) 25%, transparent);}
.toc ol a{display:block; padding:6px 12px; margin:2px 0 2px 8px; border-radius:10px; font-size:13px; line-height:1.35; color:var(--muted); text-decoration:none;}
.toc ol a:hover{color:var(--brand);}
.toc ol a[aria-current]{color:var(--brand); font-weight:600; box-shadow:var(--neu-in-sm);}
.toc .soon{padding:6px 20px; font-size:13px; color:var(--muted); font-style:italic;}

/* the post — one big outset sheet */
.post{background:var(--bg); border-radius:26px; padding:32px 24px; box-shadow:var(--neu-out-lg); min-width:0;}
@media (min-width:640px){ .post{padding:44px 48px;} }
.post h1{font-weight:800; font-size:clamp(28px,4.6vw,42px); line-height:1.15; letter-spacing:-.025em; margin-top:18px; color:var(--brand);}
.lede{margin-top:14px; font-size:1.08rem; color:var(--muted); max-width:40em;}
.draft{color:#b3261e; letter-spacing:.08em;}

/* "vibe" art — an inset plate the illustration sits in */
.hero-art{margin-top:26px; border-radius:22px; padding:18px; box-shadow:var(--neu-in);}
.hero-art svg,.fig svg{display:block; width:100%; height:auto;}

.prose{margin-top:28px; max-width:44em; color:var(--ink);}
.prose p{margin-top:16px;}
.prose h2{margin-top:38px; font-size:clamp(21px,3vw,26px); line-height:1.25; letter-spacing:-.015em; color:var(--ink);}
.prose h3{margin-top:26px; font-size:19px; color:var(--brand);}
.prose ul{margin:14px 0 0 22px;}
.prose li{margin-top:6px;}
.prose code{font-size:.92em; padding:1px 6px; border-radius:6px; box-shadow:var(--neu-in-sm);}
.prose a{font-weight:600;}

/* explain box — the plain-words definition, pressed into the page right under its sentence */
.explain,.note{margin-top:18px; padding:16px 20px; border-radius:18px; box-shadow:var(--neu-in); font-size:.96rem; color:var(--muted);}
.explain p:first-child,.note p:first-child{margin-top:0;}
.explain p{margin-top:8px;}
.explain .term{font-weight:700; color:var(--brand); font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
.explain .term::before{content:"Explained · ";}

/* figure — raised card holding a chart */
.fig{margin:26px 0 0; padding:20px; border-radius:20px; box-shadow:var(--neu-out); color:var(--ink);}
.fig figcaption{margin-top:12px; font-size:14px; color:var(--muted);}
.fig figcaption p{margin:0;}

.pager{display:flex; justify-content:space-between; gap:14px; margin-top:44px;}
.pager a{flex:1; max-width:48%; padding:14px 18px; border-radius:18px; box-shadow:var(--neu-pill); text-decoration:none; font-weight:600; font-size:14px; line-height:1.35; color:var(--ink);}
.pager a small{display:block; font-size:12px; color:var(--brand); font-weight:700; margin-bottom:2px;}
.pager .nx{text-align:right;}
@media (max-width:600px){ .pager{flex-direction:column;} .pager a{max-width:none;} .pager > span{display:none;} } /* phone: full-width cards, not one word per line */
.pager a:active{box-shadow:var(--neu-in-sm);}

/* guide landing + chapter pages */
.ch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; margin-top:30px;}
.ch-card{display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:20px; background:var(--bg); box-shadow:var(--neu-out); text-decoration:none; color:var(--ink);}
.ch-card .date{align-self:flex-start;}
.ch-card strong{font-size:18px; line-height:1.3;}
.ch-sub,.ch-count{font-size:13px; color:var(--muted);}
.ch-count{margin-top:auto; color:var(--brand); font-weight:600;}
.ch-card:active{box-shadow:var(--neu-in);}
.post-list{list-style:none; margin-top:28px; display:grid; gap:16px;}
.post-list a{display:block; padding:18px 20px; border-radius:18px; box-shadow:var(--neu-out); text-decoration:none; color:var(--ink);}
.post-list strong{display:block; line-height:1.35;}
.post-list span{display:block; margin-top:4px; font-size:14px; color:var(--muted);}
.post-list .soon{color:var(--muted); font-style:italic;}

/* legal pages (journal-legal/ → /journal/standard/, /journal/privacy …) share this shell */
.toc-ch[aria-current]{color:var(--brand); box-shadow:var(--neu-in-sm);}
.post h1 + .lede strong{color:var(--ink);}
.prose h2[id]{scroll-margin-top:16px;}
.prose ol{margin:14px 0 0 22px;}
.prose details{margin-top:18px; padding:2px 20px; border-radius:18px; box-shadow:var(--neu-in); font-size:.96rem; color:var(--muted);}
.prose details[open]{padding-bottom:14px;}
.prose summary{cursor:pointer; padding:12px 0; font-weight:700; font-size:14px; color:var(--brand);}
.prose details > :not(summary):first-of-type{margin-top:0;}
.prose blockquote{margin-top:18px; padding:14px 20px; border-left:3px solid var(--brand); border-radius:0 14px 14px 0; box-shadow:var(--neu-in-sm); color:var(--ink);}
.note-h{font-weight:700; font-size:15px; color:var(--brand);}
.note .note-h + p{margin-top:8px;}
.note p{margin-top:8px;}
.note.warn{box-shadow:var(--neu-out); color:var(--ink);}
.note.warn .note-h{color:#b3261e;}
.prose .gd{font-size:14px; color:var(--muted);}
.prose .attrib{font-style:italic; color:var(--muted);}
.fig.photo{padding:0; overflow:hidden; max-width:300px; margin-left:auto; margin-right:auto;}
.fig.photo img{display:block; width:100%; height:auto;}

/* our own videos (Founder 08-10): phone-shaped, centred, tap to play */
.fig.video{padding:0; overflow:hidden; max-width:340px; margin-left:auto; margin-right:auto; border-radius:28px;}
.fig.video video{display:block; width:100%; height:auto; background:#000;}
.fig.video figcaption{margin:0; padding:10px 14px 12px; text-align:center;}