/* assets/guides.css — /guides (index + articles). Illustrated heroes, an easy reading column, "In short", figures,
   table cards, FAQ, More guides. Uses the marketing tokens from site.css. Parts: inc/guide_ui.php. */

.gd-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);margin:0}
.gd-kicker span{color:var(--accent)}
.gd-back{align-self:flex-start;font-size:14px;font-weight:500;color:var(--grey);text-decoration:none;padding:6px 12px 6px 0}
.gd-back:hover{color:var(--accent)}

/* Hero: words left, drawing right */
.gd-hero2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(40px,6vw,80px) 0 clamp(24px,3vw,36px)}
.gd-hero-txt{display:flex;flex-direction:column;gap:16px}
.gd-hero2 h1{font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.03em;max-width:17ch;margin:0}
.gd-lead{font-size:clamp(18px,1.6vw,20px);line-height:1.6;color:var(--ink-2);margin:0;max-width:60ch}
.gd-hero-art{background:var(--card);border:1px solid var(--rule);border-radius:28px;padding:clamp(14px,2vw,26px);aspect-ratio:36/26}
.gd-hero-art svg{display:block;width:100%;height:100%}

/* In short */
.gd-short{background:var(--card);border:1px solid var(--rule);border-radius:22px;padding:22px 26px;margin:0 0 clamp(32px,4vw,52px);max-width:1040px}
.gd-short h2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:500;margin:0 0 12px}
.gd-short ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 26px}
.gd-short li{display:flex;gap:12px;font-size:16.5px;line-height:1.5;color:var(--ink)}
.gd-short li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:#e4efe8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%232a5a40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* Layout: sticky contents + a comfortable reading column */
.gd-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
.gd-toc{position:sticky;top:28px;display:flex;flex-direction:column;gap:2px;font-size:14px;counter-reset:toc}
.gd-toc .label{margin-bottom:10px}
.gd-toc a{counter-increment:toc;display:flex;gap:10px;color:var(--grey);padding:7px 0 7px 12px;border-left:2px solid var(--rule);line-height:1.35}
.gd-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:11px;color:var(--grey-2);padding-top:1px}
.gd-toc a:hover{color:var(--ink)} .gd-toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:500} .gd-toc a.on::before{color:var(--accent)}

.gd-article{max-width:700px;counter-reset:sec}
.gd-article section{scroll-margin-top:24px;margin:0 0 clamp(40px,5vw,60px)}
.gd-article h2{counter-increment:sec;font-size:clamp(26px,2.6vw,34px);font-weight:400;letter-spacing:-.025em;line-height:1.18;margin:0 0 16px}
.gd-article h2::before{content:counter(sec,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--accent);margin-bottom:8px}
.gd-article h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:26px 0 8px}
.gd-article p,.gd-article li{font-size:18px;line-height:1.72;color:var(--ink-2)}
.gd-article p{margin:0} .gd-article p+p{margin-top:16px}
.gd-article ul,.gd-article ol{margin:12px 0 0;padding-left:22px} .gd-article li{margin:8px 0} .gd-article li::marker{color:var(--accent)}
.gd-article a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gd-article blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--ink)}

/* Tables become cards that scroll on small screens */
.gd-article table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0 0;font-size:15.5px;background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.gd-article th,.gd-article td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.gd-article tr:last-child td{border-bottom:0}
.gd-article th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-2);font-weight:400;background:var(--linen)}
.gd-article td:first-child{font-weight:500;color:var(--ink)}
.gd-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px} .gd-tablewrap table{margin:0;min-width:560px}
/* Wide tables (6+ columns) keep readable columns and scroll sideways, with the first column pinned */
.gd-tablewrap:has(th:nth-child(6)){border:1px solid var(--rule);border-radius:16px;background:var(--card)}
.gd-tablewrap:has(th:nth-child(6)) table{min-width:1080px;border:0;border-radius:0}
.gd-tablewrap:has(th:nth-child(6)) th:first-child,.gd-tablewrap:has(th:nth-child(6)) td:first-child{position:sticky;left:0;z-index:1;min-width:140px;box-shadow:1px 0 0 var(--rule)}
.gd-tablewrap:has(th:nth-child(6)) td:first-child{background:var(--card)} .gd-tablewrap:has(th:nth-child(6)) th:first-child{background:var(--linen)}

/* Figures */
.gd-fig{margin:26px 0;background:var(--card);border:1px solid var(--rule);border-radius:20px;padding:18px 18px 14px}
.gd-fig svg{display:block;width:100%;height:auto}
.gd-fig figcaption{font-size:14px;color:var(--grey);text-align:center;margin-top:8px;line-height:1.45}

/* Existing callouts get the same softness */
.gd-ex{margin:18px 0;padding:18px 20px;border-radius:16px;background:var(--linen);font-size:16.5px;line-height:1.6}

/* FAQ */
.gd-article .faq details{border:1px solid var(--rule);border-radius:14px;background:var(--card);padding:0 18px;margin:0 0 10px}
.gd-article .faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-size:17px;font-weight:500;color:var(--ink);position:relative}
.gd-article .faq summary::-webkit-details-marker{display:none}
.gd-article .faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--accent);font-weight:300}
.gd-article .faq details[open] summary::after{content:"–"}
.gd-article .faq details p{padding:0 0 16px;font-size:16.5px}

/* More guides + index cards */
.gd-more{padding:clamp(8px,2vw,20px) 0 clamp(36px,5vw,56px)}
.gd-more-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.gd-more-head h2{font-size:clamp(26px,2.6vw,34px);font-weight:400;letter-spacing:-.025em;margin:0}
.gd-more-head a{font-weight:500;color:var(--accent)}
.gd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.gd-card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:22px;background:var(--card);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.gd-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.gd-card-art{background:var(--paper);border-bottom:1px solid var(--rule);padding:16px 20px;aspect-ratio:36/22}
.gd-card-art svg{display:block;width:100%;height:100%}
.gd-card-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.gd-card h3,.gd-card h2{font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.28;margin:0}
.gd-card p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.gd-go{margin-top:auto;padding-top:6px;color:var(--accent);font-weight:500;font-size:15px}

.gd-feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.gd-feature .gd-card-art{border-bottom:0;border-right:1px solid var(--rule);aspect-ratio:36/26;padding:clamp(18px,2.4vw,30px);display:flex;align-items:center}
.gd-feature .gd-card-body{padding:32px;justify-content:center}
.gd-feature h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em}

.gd-cta{padding-bottom:clamp(56px,8vw,96px)}
.gd-cta .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.gd-cta .btn-ghost{background:#fff}

/* Reading progress */
.gd-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.gd-progress i{display:block;height:100%;width:0;background:var(--accent)}

@media (max-width:900px){
  .gd-hero2{grid-template-columns:1fr} .gd-hero-art{max-width:520px}
  .gd-short ul{grid-template-columns:1fr}
  .gd-layout{grid-template-columns:1fr} .gd-toc{display:none}
  .gd-feature{grid-template-columns:1fr} .gd-feature .gd-card-art{border-right:0;border-bottom:1px solid var(--rule)}
}
@media (max-width:560px){ .gd-article p,.gd-article li{font-size:17px} .gd-fig{padding:12px} }
@media (prefers-reduced-motion:reduce){ .gd-card{transition:none} .gd-card:hover{transform:none} }