/* GUIDES — index + article template. Shared by both /guides/ pages.
   MOBILE FIRST: base styles target a 375px phone; min-width queries scale up.
   Palette: white, ink/black, --gold accent. Light grey only for rules/borders. */

.g-wrap{max-width:700px;margin:0 auto;padding:0 1.25rem}
.g-wrap,.article-body,.article-layout{overflow-wrap:break-word}

/* ---------- INDEX PAGE ---------- */
.g-hero{padding:6.5rem 0 2.25rem}
.g-hero .g-wrap{max-width:920px}
.g-hero h1{margin-bottom:1rem}
.g-hero p{font-size:1.0625rem;line-height:1.65;color:var(--ink-80);max-width:56ch;margin:0}

/* GUIDE LIST — one .g-row per guide. Mobile: media on top, then text. */
.g-list{padding:1rem 0 4.5rem}
.g-list-wrap{max-width:920px;margin:0 auto;padding:0 1.25rem;overflow-wrap:break-word}
.g-row+.g-row{border-top:1px solid var(--line)}
.g-row-link{display:flex;flex-direction:column;gap:1.15rem;padding:2rem .75rem;margin:0 -.75rem;border-radius:var(--r-md);color:inherit;transition:background .18s ease}
.g-row-link:hover,.g-row-link:focus-visible{background:var(--sand)}
.g-row-media{flex:none;width:100%}
.g-row-media img,.g-row-media svg,.g-row-media .g-row-placeholder{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:#fff}
.g-row-placeholder{background:var(--sand)}
.g-row-media .g-row-diagram{display:block;width:100%;height:auto;aspect-ratio:680/332;padding:.6rem;box-sizing:border-box}
/* narrow reflow of the same diagram takes over on phones */
/* a diagram thumbnail keeps its own 2:1 proportion and isn't capped to the text height */
.g-row-media:has(.g-row-diagram){align-self:center}
.g-row-media .g-row-diagram--stacked{display:none;aspect-ratio:300/654;padding:0}
@media (max-width:700px){.g-row-media .g-row-diagram--wide{display:none}.g-row-media .g-row-diagram--stacked{display:block}}
@media (min-width:860px){.g-row:has(.g-row-diagram) .g-row-media{flex:0 0 42%;max-width:none}}
.g-row-text{min-width:0}
.g-row-title{font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:0 0 .6rem;transition:color .18s ease}
.g-row-link:hover .g-row-title,.g-row-link:focus-visible .g-row-title{color:var(--gold-ink)}
.g-row-summary{font-size:1.0625rem;line-height:1.65;color:var(--ink-80);max-width:52ch;margin:0 0 .85rem}
.g-row-date{font-size:.9375rem;color:var(--ink-60);letter-spacing:.02em;margin-bottom:.85rem}
.g-row-cue{display:inline-flex;align-items:center;gap:.45rem;font-size:1rem;font-weight:600;color:var(--gold-ink);box-shadow:inset 0 -2px 0 var(--gold)}
.g-row-arrow{transition:transform .18s ease}
.g-row-link:hover .g-row-arrow,.g-row-link:focus-visible .g-row-arrow{transform:translateX(3px)}

/* ---------- ARTICLE PAGE ---------- */
.article-hero{padding:6.5rem 0 0}
.breadcrumb{font-size:.875rem;color:var(--ink-60);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1.5rem}
.breadcrumb a{color:var(--ink-60);display:inline-flex;align-items:center;min-height:44px}
.breadcrumb a:hover{color:var(--gold-ink)}
.breadcrumb .sep{color:var(--ink-30)}
.breadcrumb .current{color:var(--ink-80)}

.article-title{margin-bottom:1rem}
.article-dek{font-size:1.15rem;line-height:1.55;font-weight:300;color:var(--ink-80);max-width:62ch;margin-bottom:1.5rem}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.9375rem;line-height:1.6;color:var(--ink-60);padding-bottom:2rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.byline a{color:var(--ink);font-weight:600}
.byline a:hover{color:var(--gold-ink);text-decoration:underline;text-decoration-color:var(--gold)}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-30)}

.article-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:1180px;margin:0 auto;padding:0 1.25rem}

/* ---------- TOC (auto-generated; hides itself when empty) ---------- */
.toc-desktop{display:none}
.toc-desktop[hidden],.toc-mobile[hidden]{display:none}

.toc-mobile{display:block;margin:0 auto 2.5rem;max-width:700px;padding:0 1.25rem}
.toc-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem 1.1rem;font-weight:600;font-size:1rem;color:var(--ink)}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-chevron{width:1.15rem;height:1.15rem;flex:none;transition:transform .2s ease}
.toc-mobile[open] .toc-chevron{transform:rotate(180deg)}
.toc-mobile[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.toc-mobile ol{list-style:none;margin:0;padding:.35rem 1.1rem .85rem;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);display:flex;flex-direction:column}
.toc-mobile li+li{border-top:1px solid var(--line-soft)}
.toc-mobile a{font-size:1rem;line-height:1.4;color:var(--ink-80);display:flex;align-items:center;min-height:44px}
.toc-mobile a.active{color:var(--gold-ink);font-weight:600;box-shadow:inset 3px 0 0 var(--gold);padding-left:.6rem}

/* ---------- ARTICLE BODY ---------- */
.article-body{width:100%;max-width:700px;min-width:0;margin:0 auto;padding-bottom:4.5rem}
.article-body h2{margin-top:3rem;margin-bottom:1rem;scroll-margin-top:5.5rem}
.article-body h2:first-child{margin-top:0}
.article-body h3{margin-top:2.25rem;margin-bottom:.8rem;scroll-margin-top:5.5rem}
.article-body p{font-size:1.0625rem;line-height:1.75;color:var(--ink-80);max-width:68ch}
.article-body ul,.article-body ol{margin:0 0 1.25em;padding-left:1.3em;font-size:1.0625rem;line-height:1.75;color:var(--ink-80);max-width:68ch}
.article-body li{margin-bottom:.55em}
.article-body a{color:var(--gold-ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.article-body a:hover{color:var(--ink)}
.article-body img,.article-body svg,.article-body image-slot{max-width:100%}

.related{margin:2rem 0;font-size:1.0625rem;line-height:1.6}
.related strong{color:var(--ink)}
.related a{color:var(--gold-ink)}

.pull-quote{border-left:3px solid var(--gold);padding:.15rem 0 .15rem 1.15rem;margin:2.5rem 0;font-family:var(--serif);font-weight:420;font-size:1.35rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}

.article-figure{margin:2.5rem 0}
.article-figure img{border-radius:var(--r-md);width:100%;height:auto}
.figure-caption{font-size:.9375rem;color:var(--ink-80);margin-top:.75rem;line-height:1.55}
.figure-credit{font-size:.875rem;color:var(--ink-60);margin-top:.35rem;line-height:1.5}
/* product/app screenshot: framed, and never taller than the diagrams beside it */
.article-figure--shot img{border:1px solid var(--line);border-radius:var(--r-md);max-height:420px;object-fit:cover;object-position:top center}

/* ---------- DIAGRAM SYSTEM v2.0 (spec: /guides/diagram-style-note.html) ----------
   Diagrams are inline SVGs on a 420-unit grid, sitting in a contained card (.db-figure).
   Caption + credit live INSIDE the SVG, so never add a figcaption alongside one.
   The SVGs also carry presentation attributes, so they render correctly without this CSS.
   Colour roles: ink #111 structure, blue #2563EB primary, violet #7C3AED 2nd category,
   --gold = the single key insight, light grey = rules only. */
.db-figure{margin:2.5rem 0;background:#FCFCFC;border:1px solid var(--line);border-radius:8px;padding:1.5rem 1rem}
@media (min-width:640px){.db-figure{padding:2rem}}
.db-diagram{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
/* v3 dark-panel diagrams: the panel IS the image, so no card, no cap */
.db-figure--panel{background:none;border:0;padding:0}
.db-diagram--panel{max-width:100%}
/* responsive reflow: wide artwork on desktop, stacked artwork on narrow screens */
.db-eight-stacked,.db-stacked{display:none}
@media (max-width:700px){.db-eight-wide,.db-wide{display:none}.db-eight-stacked,.db-stacked{display:block}}
.db-diagram .box,.db-diagram .tile{fill:#fff;stroke:#111;stroke-width:1.5}
.db-diagram .spot{fill:var(--gold);stroke:#111;stroke-width:1.5}
.db-diagram .bar{fill:#2563EB;stroke:#111;stroke-width:1.5}
.db-diagram .bar-b{fill:#7C3AED;stroke:#111;stroke-width:1.5}
.db-diagram .rule{stroke:#111;stroke-width:1.5}
.db-diagram .rule-a{stroke:#2563EB;stroke-width:1.5}
.db-diagram .rule-b{stroke:#7C3AED;stroke-width:1.5}
.db-diagram .hair{stroke:#D4D4D4;stroke-width:1}
.db-diagram text{font-family:var(--sans)}/* colour comes from each element's own fill, so dark-panel artwork is not overridden */
.db-diagram .phase{font-size:15px;font-weight:600;letter-spacing:.04em}
.db-diagram .phase-a{fill:#2563EB}
.db-diagram .phase-b{fill:#7C3AED}
.db-diagram .label{font-size:16px;font-weight:500}
.db-diagram .label.hi{font-weight:600}
.db-diagram .num{font-family:var(--serif);font-size:15px;font-weight:700;text-anchor:middle}
.db-diagram .stat{font-family:var(--serif);font-size:20px;font-weight:700;text-anchor:middle;fill:#2563EB}
.db-diagram .stat.stat-ink{fill:#111}
.db-diagram .sub{font-size:15px;font-weight:400;text-anchor:middle}
.db-diagram .val{font-family:var(--serif);font-size:15px;font-weight:500}
.db-diagram .val.hi{font-weight:700}
.db-diagram .cap{font-size:16px;font-weight:500}
.db-diagram .credit{font-size:15px;font-weight:400}

/* Data table — scrolls sideways inside its own wrapper, never the page */
.table-wrap{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2rem 0;border:1px solid var(--line);border-radius:var(--r-md)}
.data-table{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.data-table th{text-align:left;font-family:var(--serif);font-weight:600;font-size:.9375rem;letter-spacing:.01em;color:var(--ink);padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.data-table td{padding:.9rem 1.1rem;color:var(--ink-80);border-bottom:1px solid var(--line-soft)}
.data-table tr:last-child td{border-bottom:none}
.data-table td.num{font-family:var(--serif);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
/* one spotlight row per table — the same rule as yellow in a diagram */
.data-table tr.is-spot td{background:var(--gold);color:var(--ink);font-weight:600}

/* ---------- FAQ ---------- */
.faq{margin:1rem 0 0;display:flex;flex-direction:column}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:1.15rem 0;font-family:var(--serif);font-weight:460;font-size:1.0625rem;line-height:1.4;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-toggle{flex:none;width:1.5rem;height:1.5rem;position:relative}
.faq-toggle::before,.faq-toggle::after{content:"";position:absolute;top:50%;left:50%;background:var(--ink);transform:translate(-50%,-50%)}
.faq-toggle::before{width:14px;height:2px}
.faq-toggle::after{width:2px;height:14px;transition:transform .2s ease}
.faq-item[open] .faq-toggle::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-item[open] summary{color:var(--gold-ink)}
.faq-answer{padding:0 0 1.4rem;font-size:1.0625rem;line-height:1.7;color:var(--ink-80);max-width:65ch}

/* ---------- CTA — the yellow spotlight ---------- */
.g-cta{background:var(--gold);border-radius:var(--r-lg);padding:2.25rem 1.5rem;margin:3rem 0;text-align:center}
.g-cta h3{margin-bottom:.75rem;color:var(--ink)}
.g-cta p{font-size:1.0625rem;line-height:1.6;color:var(--ink);max-width:48ch;margin:0 auto 1.5rem}
.g-cta .btn{background:var(--ink);color:#fff;box-shadow:none;min-height:44px}
.g-cta .btn:hover{background:#000;color:#fff;box-shadow:none;transform:translateY(-2px)}

/* ---------- AUTHOR — same .person component as the Builder's Sprint page ---------- */
.author-bio{padding:2.25rem 0 4.5rem;border-top:1px solid var(--line);margin-top:1rem}
.author-bio .person{display:grid;grid-template-columns:120px 1fr;gap:var(--s-5);align-items:start}
.author-bio .person-photo{width:120px;height:150px;object-fit:cover;border-radius:14px;display:block}
.author-bio .person-head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:var(--s-3)}
.author-bio .person-head h3{margin-bottom:0}
.author-bio .person-role{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--ink-60);white-space:nowrap}
/* LinkedIn: the name itself is the link, so the target is big and obvious */
.author-bio h3 a.li-name{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--gold);transition:color .15s ease}
.author-bio h3 a.li-name:hover{color:var(--gold-ink)}
.author-bio .person-photo-link{display:block;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .18s ease}
.author-bio .person-photo-link:hover .person-photo,.author-bio .person-photo-link:focus-visible .person-photo{opacity:.88}
.author-bio .person-photo{transition:opacity .18s ease}
.author-bio .person-photo-link:hover,.author-bio .person-photo-link:focus-visible{box-shadow:inset 0 0 0 1px var(--ink-30)}
.author-bio .person p{font-size:.95rem;line-height:1.7;color:var(--ink-80);margin:0}
@media (max-width:420px){.author-bio .person{grid-template-columns:1fr}.author-bio .person-role{white-space:normal}}

/* ---------- ≥ 640px ---------- */
@media (min-width:640px){
  .g-wrap{padding:0 var(--s-6)}
  .article-layout{padding:0 var(--s-6)}
  .toc-mobile{padding:0 var(--s-6)}
  .g-hero{padding:8rem 0 3rem}
  .g-hero p{font-size:1.15rem}
  .g-list{padding:1.25rem 0 6rem}
  .g-list-wrap{padding:0 var(--s-6)}
  .g-row-link{padding:2.5rem 1rem;margin:0 -1rem}
  .g-row-title{font-size:1.5rem}
  .g-row-summary{font-size:1.1rem}
  .article-hero{padding:7rem 0 0}
  .article-dek{font-size:1.3rem}
  .article-body p,.article-body ul,.article-body ol{font-size:1.1rem}
  .pull-quote{font-size:1.75rem;padding-left:1.75rem}
  .g-cta{padding:3rem;margin:3.5rem 0}
}

@media (min-width:860px){
  .g-row-link{flex-direction:row;align-items:flex-start;gap:3rem;padding:3rem 1.25rem;margin:0 -1.25rem}
  .g-row-text{flex:0 1 65%;order:1}
  .g-row-media{flex:0 0 35%;order:2;max-width:calc(var(--g-row-cap, 100%) * 1.5)}
  .g-row-title{font-size:1.65rem}
}

/* ---------- ≥ 980px: sticky sidebar TOC replaces the dropdown ---------- */
@media (min-width:980px){
  .article-layout{grid-template-columns:200px minmax(0,1fr);gap:3rem;align-items:start}
  .article-body{margin:0;padding-bottom:6rem}
  .article-body h2,.article-body h3{scroll-margin-top:6.5rem}
  .toc-mobile{display:none}
  .toc-desktop{display:block;position:sticky;top:6.5rem}
  .toc-desktop[hidden]{display:none}
  .toc-desktop .toc-label{font-size:.875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);margin-bottom:1rem}
  .toc-desktop ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
  .toc-desktop a{font-size:.9375rem;line-height:1.4;color:var(--ink-60);display:block;border-left:2px solid var(--line);padding-left:.85rem}
  .toc-desktop a.active{color:var(--gold-ink);border-left-color:var(--gold);font-weight:600}
  .author-bio{padding-bottom:6rem}
}