/* Guides (14 October 2026): the hub, category pages and guide pages. Built on the Journal's tokens (journal.css, .nj-site);
   everything here is scoped under .gd-site. Light colours are written by hand under html[data-theme="light"] at the end,
   as in tools-hub.css, because this file is not in the light-theme generator. */
.gd-site{--gd-panel:#2a2d2d;--gd-line:#373a3a;--gd-soft:#c2c4c4;--gd-head:#dcdede;--gd-row:#262929}
.gd-site strong{font-weight:500;color:var(--gd-head)}
.gd-main{padding-bottom:80px}

/* Breadcrumb */
.gd-crumbs{padding-top:26px}
.gd-crumbs.gd-narrow{max-width:780px}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px;color:var(--nj-muted)}
.gd-crumbs li{display:flex;align-items:center;min-width:0}
.gd-crumbs li+li:before{content:'/';margin:0 9px;color:#5c6060}
.gd-crumbs a{color:var(--nj-muted);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.gd-crumbs a:hover{color:var(--gd-head);text-decoration-color:currentColor}
.gd-crumbs [aria-current]{color:var(--gd-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60ch,100%)}

/* Hub and category pages */
.gd-site .gd-masthead{padding:34px 0 26px}
.gd-site .gd-masthead>*{max-width:820px}
.gd-site .gd-masthead h1{font-family:Manrope,sans-serif;font-weight:300;font-size:clamp(38px,5vw,64px);letter-spacing:-1.6px;line-height:1.05;margin:14px 0 18px}
.gd-site .gd-masthead h1 .h1-kicker{display:block;font-size:11px;letter-spacing:2px;margin:0 0 12px}
.gd-site .gd-lede{font-size:17px;line-height:1.75;color:var(--gd-soft);max-width:680px;margin:0}
.gd-filters{margin:18px 0 6px}
.gd-filters button{background:none;border:0;cursor:pointer;font:inherit}
.gd-count{font-size:12px;color:var(--nj-muted);margin:14px 0 0;min-height:18px}
.gd-cat{padding:38px 0 8px;border-bottom:1px solid var(--nj-line);scroll-margin-top:112px}
.gd-cat[hidden]{display:none}
.gd-cat-head{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.gd-site .gd-cat-head h2{font-family:Manrope,sans-serif;font-weight:400;font-size:28px;letter-spacing:-.6px;margin:0;color:var(--gd-head)}
.gd-cat-head p{font-size:14px;line-height:1.7;color:var(--nj-muted);margin:0;max-width:520px}
.gd-cat-more{display:inline-block;margin:22px 0 18px;font-size:13px}
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:22px;margin-bottom:22px}
.gd-card{display:flex;flex-direction:column;justify-content:flex-start;background:var(--gd-panel);border:1px solid var(--gd-line);border-radius:10px;padding:24px 24px 22px;min-width:0;transition:border-color .2s}
.gd-card:hover,.gd-card:focus-within{border-color:#555a5a}
.gd-card-cat{align-self:flex-start}
.gd-site .gd-card h3{font-family:Manrope,sans-serif;font-weight:400;font-size:21px;line-height:1.3;letter-spacing:-.3px;margin:12px 0 10px;color:var(--gd-head)}
.gd-card h3 a:hover{color:#d5bd95}
.gd-card>p{font-size:14px;line-height:1.7;color:var(--gd-soft);margin:0 0 16px}
.gd-site .gd-card .gd-byline{margin:auto 0 0;font-size:12px;color:var(--nj-muted)}
.gd-forthcoming{border:1px dashed #474b4b;border-radius:10px;padding:22px 24px;margin-bottom:30px;max-width:760px}
.gd-forthcoming p{font-size:14px;line-height:1.7;color:var(--gd-soft);margin:0 0 8px}
.gd-forthcoming ul{margin:6px 0 0;padding-left:20px;font-size:14px;line-height:1.9}
.gd-forthcoming a,.gd-sources a,.gd-article section p a{color:var(--gd-head);text-decoration:underline;text-decoration-color:var(--nj-gold);text-decoration-thickness:1px;text-underline-offset:.22em}
.gd-forthcoming a:hover,.gd-sources a:hover,.gd-article section p a:hover{color:#e0c49b}
.gd-back-hub{margin:30px 0 0}

/* Guide pages */
.gd-heading{max-width:780px;padding:34px 0 10px}
.gd-site .gd-heading h1{font-family:Manrope,sans-serif;font-weight:300;font-size:clamp(32px,4.4vw,56px);letter-spacing:-1.4px;line-height:1.1;margin:14px 0 18px;color:var(--gd-head)}
.gd-deck{font-size:18px;line-height:1.65;color:var(--gd-soft);max-width:720px;margin:0}
.gd-site .gd-meta{display:flex;flex-wrap:wrap;gap:4px 0;font-size:12px;color:var(--nj-muted);margin:22px 0 0}
.gd-meta span+span:before{content:'·';margin:0 10px}
.gd-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.gd-tags li{font-size:12px;color:var(--gd-soft);border:1px solid var(--gd-line);border-radius:999px;padding:4px 11px}
.gd-article{max-width:780px;padding-top:20px;font-size:17px;line-height:1.8;color:var(--gd-soft)}
.gd-article p{margin:0 0 20px}
.gd-intro{font-size:19px;line-height:1.75;color:#d4d6d6}
.gd-method{background:var(--gd-panel);border:1px solid var(--gd-line);border-left:3px solid var(--nj-gold);border-radius:8px;padding:18px 22px;margin:28px 0}
.gd-site .gd-method h2{font-family:Manrope,sans-serif;font-size:13px;font-weight:500;letter-spacing:.2px;color:var(--gd-head);margin:0 0 6px}
.gd-site .gd-method p{font-size:15px;line-height:1.7;margin:0}
.gd-toc{border-top:1px solid var(--nj-line);border-bottom:1px solid var(--nj-line);padding:18px 0 14px;margin:30px 0 10px}
.gd-site .gd-toc h2{font-family:Manrope,sans-serif;font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--nj-gold);margin:0 0 10px}
.gd-toc ol{margin:0;padding-left:22px;columns:2 220px;column-gap:36px;font-size:15px;line-height:1.6}
.gd-toc li{break-inside:avoid;padding:4px 0;color:var(--nj-muted)}
.gd-toc a{color:var(--gd-soft)}
.gd-toc a:hover{color:#e0c49b}
.gd-article section{padding-top:22px;scroll-margin-top:112px}
.gd-site .gd-article section>h2{font-family:Manrope,sans-serif;font-weight:400;font-size:28px;letter-spacing:-.5px;line-height:1.25;color:var(--gd-head);margin:12px 0 16px}
.gd-ref{font-size:11px;line-height:0;margin-left:3px;vertical-align:super;white-space:nowrap}
.gd-ref a{color:var(--nj-gold)!important;text-decoration:none!important;padding:0 1px}
.gd-ref a:hover{text-decoration:underline!important}

/* Comparison table: real table, scrolls sideways on narrow screens rather than squeezing */
.gd-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--gd-line);border-radius:10px;margin:6px 0 8px;background:var(--gd-panel)}
.gd-table-wrap:focus-visible{outline:2px solid var(--nj-gold);outline-offset:3px}
.gd-table{width:100%;min-width:600px;border-collapse:collapse;font-size:14px;line-height:1.5}
.gd-table caption{caption-side:top;text-align:left;font-size:12px;color:var(--nj-muted);padding:12px 16px 10px}
.gd-table th,.gd-table td{padding:11px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--gd-line)}
.gd-table thead th{font-weight:500;color:var(--gd-head);background:var(--gd-row);font-size:13px}
.gd-table tbody th{font-weight:400;color:var(--nj-muted);width:30%}
.gd-table td{color:var(--gd-soft);width:35%}
.gd-table tbody tr:hover td,.gd-table tbody tr:hover th{background:#ffffff05}
.gd-scroll-hint{display:none;font-size:12px!important;color:var(--nj-muted);margin:0 0 6px!important}
.gd-notes{margin:12px 0 6px;padding-left:20px;font-size:14px;line-height:1.7;color:var(--nj-muted)}
.gd-notes li{margin-bottom:6px}
.gd-sources{border-top:1px solid var(--nj-line);margin-top:30px}
.gd-site .gd-sources p{font-size:14px;line-height:1.7;color:var(--nj-muted)}
.gd-sources ol{padding-left:26px;font-size:14px;line-height:1.7;margin:0}
.gd-sources li{padding:3px 0;scroll-margin-top:112px}
.gd-sources li:target{background:#c5a77b1f;border-radius:4px}
.gd-end{display:flex;flex-wrap:wrap;gap:12px 28px;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--nj-line);font-size:13px}
.gd-site a:focus-visible,.gd-site button:focus-visible{outline:2px solid var(--nj-gold);outline-offset:3px}

@media(max-width:760px){
  .gd-crumbs{padding-top:18px}
  .gd-crumbs [aria-current]{max-width:100%}
  .gd-site .gd-masthead{padding:24px 0 18px}
  .gd-lede,.gd-deck{font-size:16px}
  .gd-intro{font-size:17px}
  .gd-article{font-size:16px}
  .gd-site .gd-article section>h2{font-size:24px}
  .gd-scroll-hint{display:block}
  .gd-card{padding:20px}
  .gd-toc ol{columns:1}
}

/* Light theme */
html[data-theme="light"] .gd-site{--gd-panel:#fff;--gd-line:#e2ded6;--gd-soft:#3d4141;--gd-head:#222424;--gd-row:#f5f3ef}
html[data-theme="light"] .gd-crumbs li+li:before{color:#a9a49a}
html[data-theme="light"] .gd-card:hover,html[data-theme="light"] .gd-card:focus-within{border-color:#c9c3b8}
html[data-theme="light"] .gd-card h3 a:hover,html[data-theme="light"] .gd-toc a:hover,html[data-theme="light"] .gd-forthcoming a:hover,html[data-theme="light"] .gd-sources a:hover,html[data-theme="light"] .gd-article section p a:hover{color:#86693f}
html[data-theme="light"] .gd-forthcoming{border-color:#cfc9be}
html[data-theme="light"] .gd-intro{color:#2c2f2f}
html[data-theme="light"] .gd-ref a{color:#86693f!important}
html[data-theme="light"] .gd-table tbody tr:hover td,html[data-theme="light"] .gd-table tbody tr:hover th{background:#00000005}
html[data-theme="light"] .gd-sources li:target{background:#86693f1a}
/* theme-light.css resets every ".nj-site a" to no underline and inherited colour, and it loads after this file: restate the text links */
html[data-theme="light"] .gd-site .gd-article section p a,html[data-theme="light"] .gd-site .gd-forthcoming a,html[data-theme="light"] .gd-site .gd-sources a{color:var(--gd-head);text-decoration:underline;text-decoration-color:var(--nj-gold);text-decoration-thickness:1px;text-underline-offset:.22em}
html[data-theme="light"] .gd-site .gd-article section p a:hover,html[data-theme="light"] .gd-site .gd-forthcoming a:hover,html[data-theme="light"] .gd-site .gd-sources a:hover{color:#86693f}

/* Photographs (an optional "images" list in a guide) and the draft preview (build.py --preview, never deployed) */
.gd-figure{position:relative;margin:30px 0 34px}
.gd-figure-lead{margin:6px 0 34px}
.gd-figure img{display:block;width:100%;height:auto;border-radius:10px;background:var(--gd-panel)}
.gd-figure figcaption{font-size:13px;line-height:1.6;color:var(--nj-muted);padding-top:10px}
.gd-credit{display:inline-block;font-size:12px}
.gd-credit a{color:var(--nj-muted);text-decoration:underline;text-underline-offset:3px}
.gd-credit a:hover{color:var(--gd-head)}
.gd-uncleared{position:absolute;top:12px;left:12px;z-index:1;background:#8c2f2f;color:#fff;font-size:12px;line-height:1.4;padding:5px 10px;border-radius:6px}
.gd-draft-banner{background:#5a3f16;color:#f3e6d0;font-size:14px;line-height:1.6;padding:12px 24px;text-align:center}
.gd-draft-banner strong{color:#fff}
html[data-theme="light"] .gd-draft-banner{background:#f3e3c4;color:#3d2c10}
html[data-theme="light"] .gd-draft-banner strong{color:#222424}