/* The Guides section and the About page. Uses the tokens from site.css. */
.guides { padding-block: clamp(2rem, 5vw, 3.5rem) 1rem; }
.guide-intro { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.guide-intro h1 { font-size: clamp(3rem, 8vw, 5.6rem); }
.guide-intro p { max-width: 58ch; color: var(--muted); font-size: 1.12rem; }

.guide-group { margin-top: clamp(2rem, 5vw, 3rem); }
.guide-group > h2 { margin-bottom: 1rem; font-size: clamp(1.35rem, 3vw, 1.7rem); font-stretch: 85%; }
.guide-list { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.guide-card { display: grid; gap: .45rem; height: 100%; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--charcoal); text-decoration: none; transition: border-color .15s ease; }
.guide-card:hover { border-color: var(--marigold); }
.guide-card b { line-height: 1.3; }
.guide-card span { color: var(--muted); font-size: .94rem; line-height: 1.5; }

.crumbs { margin-bottom: 1.2rem; color: var(--muted); font-size: .92rem; }
.crumbs a { color: var(--marigold); text-decoration: none; }

.guide { max-width: 70ch; }
.guide__head { display: grid; gap: .8rem; margin-bottom: 2rem; }
.guide__head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.05; }
.guide__meta { color: var(--muted); font-size: .92rem; }
.guide h2 { margin: 2.2rem 0 .7rem; font-size: clamp(1.4rem, 3.2vw, 1.8rem); font-stretch: 85%; }
.guide h3 { margin: 1.5rem 0 .5rem; font-size: 1.15rem; }
.guide p, .guide li { color: #C9C6C0; font-size: 1.06rem; line-height: 1.7; }
.guide p + p { margin-top: .9rem; }
.guide ul, .guide ol { display: grid; gap: .45rem; margin: .8rem 0; padding-left: 1.3rem; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li::marker { color: var(--marigold); }
.guide strong { color: var(--bone); }
.guide article a, .guide p a, .guide li a { color: var(--marigold); overflow-wrap: anywhere; }
.guide .note { margin: 1.2rem 0; padding: .95rem 1.1rem; border-left: 3px solid var(--marigold); border-radius: 0 10px 10px 0; background: var(--graphite); }
.guide .formula { margin: 1rem 0; padding: .85rem 1.1rem; border-radius: 10px; background: var(--graphite); color: var(--bone); font-family: Consolas, "Courier New", monospace; font-size: .98rem; overflow-x: auto; }
.guide .message { margin: .8rem 0; padding: .85rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--bone); }
.guide .sources { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.guide .sources, .guide .sources li, .guide .sources p { color: var(--muted); font-size: .92rem; }

.table-wrap { margin: 1rem 0; overflow-x: auto; }
.guide table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.guide th, .guide td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); color: #C9C6C0; text-align: left; vertical-align: top; }
.guide th { color: var(--bone); font-weight: 600; white-space: nowrap; }

.guide-tool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--charcoal); }
.guide-tool div { display: grid; gap: .2rem; flex: 1 1 16rem; }
.guide-tool span { color: var(--muted); font-size: .96rem; }