/*
* The planning guide (fate-scot-guide.html, 19 Oct 2026): its front page
* (page-guide.php), chapters (page-guide-chapter.php) and checklist
* (page-guide-checklist.php). Loaded on those pages only (inc/assets.php).
*
* Bones from the handbook reference (contents, numbered chapters, margin
* notes, definitions, proper tables); the digestible pieces from the Tiles
* inner-page concept (at a glance, steps, questions as accordions).
*/
/* ---------- shared ---------- */
.gu .gu-i { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gu [id] { scroll-margin-top: calc(var(--island) + 8px); }
.gu h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
/* the forest field every guide page opens on */
.gu-field { padding: calc(var(--island) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 5vw, 64px); }
.gu-h1 { max-width: 14ch; font-size: clamp(min(2.5rem, 11vw), 5vw, 4.6rem); font-weight: 900; line-height: 1.04; letter-spacing: var(--ls-huge); }
.gu-field .lead { max-width: 38ch; margin: 18px 0 0; }
.gu-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 clamp(20px, 3vw, 32px); padding: 0; list-style: none; font-size: 0.95rem; font-weight: 600; color: var(--sec-muted); }
.gu-crumb li { display: inline-flex; align-items: center; gap: 10px; }
.gu-crumb a { padding-bottom: 1px; border-bottom: 2px solid var(--lime); color: var(--cream); text-decoration: none; }
.gu-crumb a:hover { border-color: #fff; }
.gu-crumb .gu-i { width: 14px; height: 14px; opacity: 0.6; }
.gu-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: clamp(18px, 2.4vw, 28px) 0 0; padding: 0; list-style: none; font-size: 0.95rem; font-weight: 600; color: var(--sec-muted); }
.gu-meta li { display: inline-flex; align-items: center; gap: 8px; }
.gu-meta .gu-i { width: 16px; height: 16px; color: var(--lime); }
.gu-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.gu-small { max-width: 48ch; margin: 24px 0 0; font-size: 0.95rem; color: var(--sec-muted); }
/* reading grounds */
.gu-read { padding-block: clamp(56px, 6.5vw, 96px); background: var(--paper); }
.gu-read--white { background: var(--card); }
.gu-body { max-width: 62ch; color: var(--slate); }
.gu-body > p:first-child { font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.gu-body p { margin: 0 0 1em; }
.gu-body > :last-child { margin-bottom: 0; }
.gu-body ul, .gu-body ol { margin: 0 0 1em; padding-left: 1.25em; }
.gu-body li + li { margin-top: 0.4em; }
.gu-body li::marker { color: var(--leaf); font-weight: 700; }
.gu-body h3 { margin: 1.4em 0 0.4em; font-size: 1.2rem; color: var(--night); }
.gu-body strong { color: var(--night); }
.gu-body a, .gu-res a, .gu-steps a, .gu-tile > a { font-weight: 700; color: var(--forest); text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gu-sh { max-width: 66ch; margin-bottom: clamp(28px, 3.5vw, 44px); }
.gu-sh h2 { color: var(--night); }
.gu-sh p { max-width: 58ch; margin: 14px 0 0; font-size: 1.1rem; color: var(--slate); }
.gu-sh .gu-acts { margin-top: 22px; }
/* tables: the documents at a glance, and comparisons in a chapter */
.gu-tbl { width: 100%; overflow: hidden; border-collapse: collapse; border-radius: var(--r); background: var(--card); font-size: 1rem; }
.gu-tbl th, .gu-tbl td { padding: 16px 18px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.gu-tbl thead th { border: 0; background: var(--night); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.gu-tbl tbody th { font-size: 1.08rem; font-weight: 800; letter-spacing: var(--ls-mid); color: var(--forest); }
.gu-tbl tbody th a { color: inherit; text-decoration: none; }
.gu-tbl tbody th a:hover { text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gu-tbl tbody th small { display: block; margin-top: 3px; font-size: 0.88rem; font-weight: 600; letter-spacing: 0; color: var(--slate); }
.gu-tbl td { color: var(--slate); }
.gu-tbl tr:last-child :is(td, th) { border-bottom: 0; }
@media (max-width: 760px) {
.gu-tbl, .gu-tbl tbody, .gu-tbl tr, .gu-tbl td, .gu-tbl th { display: block; }
.gu-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gu-tbl tr { padding: 16px 18px; border-bottom: 1px solid var(--rule); }
.gu-tbl tr:last-child { border-bottom: 0; }
.gu-tbl th, .gu-tbl td { padding: 0; border: 0; }
.gu-tbl td { margin-top: 8px; }
.gu-tbl td::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leaf); }
}
/* the small dark close at the foot of every guide page */
.gu-close { padding-block: clamp(44px, 5vw, 72px); border-bottom: 1px solid var(--on-dark-rule); background: var(--night); color: var(--cream); }
.gu-close-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; }
.gu-close h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: #fff; }
.gu-close p { max-width: 52ch; margin: 8px 0 0; color: var(--sec-muted); }
@media (max-width: 760px) { .gu-close-in { grid-template-columns: minmax(0, 1fr); } }
/* progress, on a chapter and the checklist */
.gu-prog { height: 6px; margin: 12px 10px 0; overflow: hidden; border-radius: 3px; background: var(--paper-2); }
.gu-prog i { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--leaf); transition: width 0.4s var(--ease); }
.gu-progl { margin: 8px 10px 0; font-size: 0.85rem; color: var(--slate); }
/* boxes to tick, on a chapter and the checklist */
.gu-ck { display: grid; gap: 4px; }
.gu-ck label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 8px; border-radius: 10px; font-weight: 600; line-height: 1.4; color: var(--ink); cursor: pointer; }
.gu-ck label:hover { background: var(--paper); }
.gu-ck input { appearance: none; display: grid; flex: none; place-items: center; width: 26px; height: 26px; margin: 1px 0 0; border: 2px solid var(--rule-mid); border-radius: 7px; background: var(--card); cursor: pointer; }
.gu-ck input::after { content: ""; width: 12px; height: 7px; border-bottom: 3px solid var(--night); border-left: 3px solid var(--night); opacity: 0; transform: rotate(-45deg) translate(1px, -1px); }
.gu-ck input:checked { border-color: var(--lime); background: var(--lime); }
.gu-ck input:checked::after { opacity: 1; }
.gu-ck input:checked + span { color: var(--slate); text-decoration: line-through; text-decoration-color: var(--rule-mid); }
.gu-ck small { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 400; color: var(--slate); }
/* ---------- 1. the front page ---------- */
.gu-title { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.gu-title .gu-h1 { max-width: 16ch; }
@media (max-width: 900px) { .gu-title { grid-template-columns: minmax(0, 1fr); } }
.gu-toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--on-dark-rule); }
.gu-toc li { border-bottom: 1px solid var(--on-dark-rule); }
.gu-toc a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 0 14px; align-items: baseline; min-height: 44px; padding: 13px 0; color: var(--cream); text-decoration: none; }
.gu-toc a:hover b { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gu-toc .n { font-size: 1.35rem; font-weight: 800; line-height: 1; letter-spacing: var(--ls-mid); font-variant-numeric: tabular-nums; color: var(--lime); }
.gu-toc b { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.25; }
.gu-toc small { display: block; margin-top: 3px; font-size: 0.92rem; line-height: 1.4; color: rgb(var(--cream-rgb) / 0.68); }
.gu-toc .t { font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: rgb(var(--cream-rgb) / 0.68); }
.gu-toc .extra .n { font-size: 1rem; color: var(--sprout); }
.gu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); margin: 0; padding: 0; list-style: none; }
.gu-tile { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r); background: var(--card); color: var(--ink); }
.gu-tile--green { background: var(--paper-green); }
.gu-tile--night { background: var(--night); color: #fff; }
.gu-tile h3 { font-size: 1.3rem; color: var(--forest); }
.gu-tile p { margin: 0; color: var(--slate); }
.gu-tile .big { font-size: clamp(2.6rem, 4.2vw, 3.8rem); font-weight: 900; line-height: 0.95; letter-spacing: var(--ls-huge); color: var(--forest); }
.gu-tile > a { align-self: flex-start; margin-top: auto; }
.gu-tile--night h3 { color: #fff; }
.gu-tile--night p { color: rgb(255 255 255 / 0.84); }
.gu-tile--night .big { color: var(--lime); }
.gu-tile--night > a { color: #fff; text-decoration-color: var(--lime); }
.gu-tile--night a:focus-visible { outline-color: var(--lime); }
@media (max-width: 860px) { .gu-tiles { grid-template-columns: minmax(0, 1fr); } }
.gu-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.gu-split figure { margin: 0; }
.gu-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.gu-split .gu-sh { margin: 0; }
@media (max-width: 860px) { .gu-split { grid-template-columns: minmax(0, 1fr); } }
/* the guide as a section on another page (e.g. the Handbook) */
.gu-feature { padding-block: var(--sp); background: var(--forest); color: var(--cream); }
.gu-feature .gu-h1 { color: var(--cream); }
.gu-feature .gu-h1 a { color: inherit; text-decoration: none; }
.gu-feature .gu-h1 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.gu-feature .dot { color: var(--lime); }
.gu-feature .lead { max-width: 38ch; margin: 18px 0 0; color: var(--cream); }
.gu-feature .gu-meta { color: rgb(var(--cream-rgb) / 0.78); }
.gu-feature .gu-toc b { font-size: 1.02rem; }
.gu-feature a:focus-visible { outline-color: var(--lime); }
.gu-feature + .gu-feature { border-top: 1px solid var(--on-dark-rule); }
/* the law's band (template-parts/sections/law-feature.php): years for numbers */
.gu-law .gu-toc a { grid-template-columns: 3.4em minmax(0, 1fr) auto; }
.gu-law .gu-toc .n { font-size: 1.15rem; }
.gu-law .gu-toc .extra a { border-top: 1px dashed var(--on-dark-rule); }
.gu-law-text { max-width: 52ch; margin: 14px 0 0; color: rgb(var(--cream-rgb) / 0.78); }
/* ---------- 2. a chapter ---------- */
.gu-numwrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; }
.gu-num { margin-top: 0.04em; font-size: clamp(5.5rem, 12vw, 10rem); font-weight: 900; line-height: 0.82; letter-spacing: -0.05em; color: var(--lime); }
.gu-ch-field .gu-h1 { max-width: 18ch; font-size: clamp(min(2.3rem, 10vw), 4.6vw, 4.2rem); }
.gu-ch-field .lead { max-width: 44ch; }
.gu-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 3vw, 32px); }
.gu-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--on-dark-rule); border-radius: 999px; font-size: 0.95rem; font-weight: 600; line-height: 1.25; color: var(--cream); text-decoration: none; }
.gu-pill:hover { border-color: #fff; }
.gu-pill .gu-i { width: 16px; height: 16px; }
@media (max-width: 600px) {
.gu-numwrap { grid-template-columns: minmax(0, 1fr); }
.gu-num { font-size: clamp(4rem, 18vw, 5.5rem); }
}
.gu-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 17rem; gap: clamp(28px, 4vw, 72px); align-items: start; }
.gu-layout--bare { grid-template-columns: 15rem minmax(0, 1fr); }
/* a chapter not (yet) under a guide front page: no chapter list */
.gu-layout--solo { grid-template-columns: minmax(0, 1fr) 17rem; }
.gu-layout--solo.gu-layout--bare { grid-template-columns: minmax(0, 1fr); }
/* the guide's chapters, on the left */
.gu-side { position: sticky; top: calc(var(--island) + 8px); }
.gu-side h2 { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.gu-side ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gu-side a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--slate); text-decoration: none; }
.gu-side a:hover { background: var(--card); color: var(--forest); }
.gu-side a[aria-current] { background: var(--night); color: #fff; }
.gu-side a[aria-current]:focus-visible { outline-color: var(--give); }
.gu-side .n { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--leaf); }
.gu-side a[aria-current] .n { color: var(--lime); }
.gu-side a.done .n { color: var(--slate); }
.gu-side .sub { margin: 4px 0 6px; }
.gu-side .sub a { grid-template-columns: minmax(0, 1fr); padding: 6px 10px 6px calc(1.6em + 18px); font-size: 0.9rem; font-weight: 500; color: var(--slate); }
.gu-side .sub a.is-on { box-shadow: inset 3px 0 0 var(--lime); font-weight: 700; color: var(--forest); }
.gu-side .extra { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.gu-side .extra a { grid-template-columns: minmax(0, 1fr); }
/* the chapter */
.gu-main > * + * { margin-top: clamp(36px, 4.5vw, 56px); }
.gu-main { transition: opacity 0.2s; }
.gu-main.is-loading { opacity: 0.45; }
.gu-main h2 { margin-bottom: 14px; color: var(--night); }
.gu-main h2 .ix { margin-right: 0.45em; font-variant-numeric: tabular-nums; color: var(--leaf); }
.gu-part > * + * { margin-top: 18px; }
.gu-part > h2 + * { margin-top: 0; }
.gu-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gu-glance li { padding: 20px 22px; border-radius: var(--r); background: var(--card); }
.gu-glance .big { display: block; margin-bottom: 8px; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 900; line-height: 1; letter-spacing: var(--ls-huge); color: var(--forest); }
.gu-glance p { margin: 0; font-size: 0.95rem; color: var(--slate); }
.gu-glance b { color: var(--night); }
@media (max-width: 560px) { .gu-glance { grid-template-columns: minmax(0, 1fr); } }
.gu-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-mid); }
.gu-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 20px; padding: 20px 0; border-bottom: 1px solid var(--rule-mid); }
.gu-steps .n { min-width: 2.2ch; font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: var(--ls-big); color: var(--leaf); }
.gu-steps h3 { font-size: 1.18rem; color: var(--night); }
.gu-steps p { max-width: 58ch; margin: 4px 0 0; color: var(--slate); }
.gu-dl { display: grid; margin: 0; border-top: 1px solid var(--rule-mid); }
.gu-dl > div { display: grid; grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.gu-dl dt { font-weight: 800; letter-spacing: var(--ls-mid); color: var(--night); }
.gu-dl dd { margin: 0; color: var(--slate); }
@media (max-width: 600px) { .gu-dl > div { grid-template-columns: minmax(0, 1fr); } }
.gu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gu-two > div { padding: 22px 24px; border-radius: var(--r); }
.gu-two .yes { background: var(--paper-green); }
.gu-two .no { background: var(--paper-2); }
.gu-two h3 { margin-bottom: 10px; font-size: 1.1rem; color: var(--night); }
.gu-two ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--slate); }
.gu-two li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.gu-two .gu-i { width: 18px; height: 18px; margin-top: 4px; color: var(--leaf); }
.gu-two .no .gu-i { color: var(--give-deep); }
@media (max-width: 640px) { .gu-two { grid-template-columns: minmax(0, 1fr); } }
.gu-qs { display: grid; gap: 8px; }
.gu-qs details { padding: 0 22px; border-radius: 14px; background: var(--card); }
.gu-qs summary { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 18px 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--night); list-style: none; cursor: pointer; }
.gu-qs summary::-webkit-details-marker { display: none; }
.gu-qs summary .gu-i { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--paper); color: var(--forest); transition: transform 0.3s var(--ease); }
.gu-qs details[open] summary .gu-i { background: var(--lime); color: var(--night); transform: rotate(45deg); }
.gu-qs details > div { max-width: 60ch; padding: 0 0 20px; color: var(--slate); }
.gu-qs details > div p { margin: 0 0 0.6em; }
.gu-qs details > div p:last-child { margin-bottom: 0; }
.gu-res { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-mid); }
.gu-res li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.gu-res b { display: block; font-weight: 800; letter-spacing: var(--ls-mid); color: var(--night); }
.gu-res span { font-size: 0.98rem; color: var(--slate); }
.gu-res a { overflow-wrap: anywhere; }
@media (min-width: 561px) { .gu-res a { white-space: nowrap; } }
@media (max-width: 560px) { .gu-res li { grid-template-columns: minmax(0, 1fr); } }
/* the chapter's own things to do, shared with the checklist page */
.gu-todo { padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r); background: var(--card); }
.gu .gu-todo h2 { margin-bottom: 6px; font-size: 1.4rem; }
.gu-todo > p { margin: 0 0 14px; color: var(--slate); }
.gu-nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gu-nextprev a { display: grid; gap: 4px; align-content: start; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r); background: var(--night); color: #fff; text-decoration: none; }
.gu-nextprev a:not(.back) { grid-column: 2; }
.gu-nextprev a:focus-visible { outline-color: var(--give); }
.gu-nextprev a.back { background: var(--card); color: var(--night); }
.gu-nextprev small { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime); }
.gu-nextprev a.back small { color: var(--leaf); }
.gu-nextprev b { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.1; letter-spacing: var(--ls-big); text-wrap: balance; }
.gu-nextprev .arw { display: inline-block; transition: transform 0.3s var(--ease); }
.gu-nextprev a:hover .arw { transform: translateX(5px); }
.gu-nextprev a.back:hover .arw { transform: translateX(-5px); }
@media (max-width: 600px) {
.gu-nextprev { grid-template-columns: minmax(0, 1fr); }
.gu-nextprev a:not(.back) { grid-column: auto; }
}
/* notes in the margin */
.gu-margin { position: sticky; top: calc(var(--island) + 8px); display: grid; gap: 14px; }
.gu-mnote { padding: 20px 22px; border-radius: var(--r); background: var(--card); font-size: 0.95rem; color: var(--slate); }
.gu-mnote h3 { margin-bottom: 6px; font-size: 1.02rem; color: var(--night); }
.gu-mnote p { margin: 0; }
.gu-mnote--know { background: var(--paper-green); }
.gu-mnote--talk { background: var(--lime); color: var(--night); }
.gu-mnote .btn { margin-top: 14px; }
/* narrower: the notes fall under the chapter, then the chapters fold into a strip */
@media (max-width: 1180px) {
.gu-layout { grid-template-columns: 15rem minmax(0, 1fr); }
.gu-margin { position: static; grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gu-layout--solo { grid-template-columns: minmax(0, 1fr); }
.gu-layout--solo .gu-margin { grid-column: 1; }
}
@media (max-width: 860px) {
.gu-layout, .gu-layout--bare { grid-template-columns: minmax(0, 1fr); }
.gu-side { position: static; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; }
.gu-side h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gu-side ol { display: flex; gap: 6px; width: max-content; }
.gu-side li { flex: none; }
.gu-side a { grid-template-columns: auto; grid-auto-flow: column; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--rule-mid); border-radius: 999px; background: var(--card); white-space: nowrap; }
.gu-side a[aria-current] { border-color: var(--night); }
.gu-side .sub, .gu-side .gu-prog, .gu-side .gu-progl { display: none; }
.gu-side .extra { display: contents; margin: 0; padding: 0; border: 0; }
.gu-side .extra a { border-color: transparent; background: var(--paper-green); }
.gu-margin { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
.gu-side .ttl { display: none; }
.gu-side a[aria-current] .ttl, .gu-side .extra .ttl { display: inline; }
}
/* ---------- 3. the checklist ---------- */
.gu-ck-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.gu-ck-top .gu-sh { margin: 0; }
.gu-score { min-width: min(100%, 280px); padding: 20px 24px; border-radius: var(--r); background: var(--card); }
.gu-score .big { display: block; font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: var(--ls-huge); color: var(--forest); }
.gu-score .gu-prog, .gu-score .gu-progl { margin-inline: 0; }
.gu-score .gu-progl { font-size: 0.92rem; }
.gu-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
html:not(.js) .gu-tools { display: none; }
.gu-groups { display: grid; gap: 12px; margin-top: clamp(28px, 3.5vw, 44px); }
.gu-group { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 clamp(12px, 2vw, 24px); padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r); background: var(--card); }
.gu-group .n { font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: var(--ls-huge); color: var(--leaf); }
.gu .gu-group h2 { margin-bottom: 4px; font-size: 1.3rem; }
.gu-group h2 a { color: var(--night); text-decoration: none; }
.gu-group h2 a:hover { text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gu-group .gu-ck { margin-top: 10px; }
.gu-group.done .n { color: var(--slate); }
.gu-list-body { margin-top: clamp(28px, 3.5vw, 44px); }
.gu-empty { color: var(--slate); }
@media (max-width: 760px) {
.gu-ck-top { grid-template-columns: minmax(0, 1fr); }
.gu-group { grid-template-columns: minmax(0, 1fr); }
.gu-group .n { margin-bottom: 6px; }
}
/* ---------- 4. around the world (page-world.php, page-world-place.php) ---------- */
.wd-stats { display: flex; flex-wrap: wrap; gap: 16px clamp(28px, 4vw, 56px); margin: clamp(28px, 3.5vw, 44px) 0 0; padding: clamp(18px, 2.4vw, 28px) 0 0; border-top: 1px solid var(--on-dark-rule); list-style: none; }
.wd-stats li { display: grid; gap: 4px; }
.wd-stats b { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; line-height: 1; letter-spacing: var(--ls-huge); color: var(--lime); }
.wd-stats span { font-size: 0.95rem; font-weight: 600; color: var(--sec-muted); }
/* where the law stands, as a small label */
.wd-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.wd-status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--slate); }
.wd-status--legal::before { background: var(--leaf); }
.wd-status--court::before { background: var(--olive); }
.wd-status--passed::before, .wd-status--bill::before { border: 2px dashed var(--leaf); background: transparent; width: 8px; height: 8px; }
.gu-field .wd-status--legal::before { background: var(--lime); }
.gu-field .wd-status--court::before { background: var(--sprout); }
.gu-field .wd-status--passed::before, .gu-field .wd-status--bill::before { border-color: var(--lime); }
.gu-field .wd-status--none::before { background: rgb(var(--cream-rgb) / 0.5); }
.wd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: clamp(20px, 2.6vw, 32px); }
.wd-filter[hidden] { display: none; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wd-chips button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--rule-mid); border-radius: 999px; background: var(--card); font: 700 0.95rem/1 var(--sans); color: var(--forest); cursor: pointer; }
.wd-chips button span { font-weight: 600; color: var(--slate); }
.wd-chips button[aria-pressed="true"] { border-color: var(--night); background: var(--night); color: #fff; }
.wd-chips button[aria-pressed="true"] span { color: var(--lime); }
.wd-region { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--forest); }
.wd-region select { min-height: 44px; padding: 0 12px; border: 1.5px solid var(--rule-mid); border-radius: 10px; background: var(--card); font: 600 0.95rem var(--sans); color: var(--ink); }
.wd-count { flex-basis: 100%; margin: 0; font-size: 0.92rem; color: var(--slate); }
.wd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.wd-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r); background: var(--card); }
.wd-card[hidden] { display: none; }
.wd-card h3 { font-size: 1.35rem; color: var(--night); }
.wd-card p { margin: 0; color: var(--slate); font-size: 0.98rem; }
.wd-card .wd-where { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.92rem; color: var(--night); }
.wd-since { font-weight: 600; color: var(--slate); }
.wd-card .wd-region-name { margin-top: auto; font-size: 0.85rem; font-weight: 600; }
/* the World Federation, for the detail */
.wd-more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center; padding: clamp(24px, 3.2vw, 40px); border-radius: var(--r); background: var(--paper-green); }
.wd-more h2 { color: var(--night); }
.wd-more p { max-width: 56ch; margin: 10px 0 0; font-size: 1.1rem; color: var(--slate); }
@media (max-width: 760px) { .wd-more { grid-template-columns: minmax(0, 1fr); } .wd-more .btn { justify-self: start; } }
/* ---------- 5. the members' pages (members-only.php, page-members-list.php, page-meeting.php) ---------- */
.mb-lock { max-width: 46rem; padding: clamp(24px, 3.2vw, 40px); border-radius: var(--r); background: var(--card); }
.mb-lock h2 { color: var(--night); }
.mb-lock p { max-width: 52ch; margin: 12px 0 0; font-size: 1.1rem; color: var(--slate); }
.mb-lock .mb-more { margin-top: 20px; font-size: 1rem; }
.mb-lock .mb-more a { font-weight: 700; color: var(--forest); text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mb-text { padding-bottom: 0; }
.mb-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.mb-filter label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 700; color: var(--forest); }
.mb-filter select { min-height: 44px; min-width: 11rem; padding: 0 12px; border: 1.5px solid var(--rule-mid); border-radius: 10px; background: var(--card); font: 600 0.95rem var(--sans); color: var(--ink); }
.mb-filter .btn { min-height: 44px; }
.mb-found { flex-basis: 100%; margin: 0; font-size: 0.92rem; color: var(--slate); }
.mb-found a { font-weight: 700; color: var(--forest); }
/* the date and type, then the title, then the excerpt (the search results' grid has two rows) */
.more-list.mb-items .mb-meta { grid-row: 1; grid-column: 1; display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--leaf); }
.more-list.mb-items b { grid-row: 2; grid-column: 1; }
.more-list.mb-items a > span { grid-row: 3; }
.more-list.mb-items i { grid-row: 1 / span 3; }
.more-list.mb-items a:hover .mb-meta { color: var(--lime); }
.mb-empty { color: var(--slate); }
.mb-next { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); padding: clamp(24px, 3.2vw, 44px); border-radius: var(--r); background: var(--card); }
.mb-when h2 { margin-bottom: 18px; font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--night); }
.mb-date { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: var(--ls-big); color: var(--forest); }
.mb-date b { display: block; font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.05em; color: var(--leaf); }
.mb-date--tbc { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--slate); }
.mb-day { margin: 10px 0 0; font-weight: 700; color: var(--slate); }
.mb-detail > * + * { margin-top: 22px; }
.mb-detail h3 { font-size: 1.15rem; color: var(--night); }
.mb-detail h3 + * { margin-top: 10px; }
@media (max-width: 760px) { .mb-next { grid-template-columns: minmax(0, 1fr); } }
.mb-files { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.mb-files li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.mb-files a { font-weight: 700; color: var(--forest); text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mb-files small { margin-left: 6px; font-size: 0.85rem; font-weight: 600; color: var(--slate); }
.mb-past { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mb-past > li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px clamp(28px, 5vw, 80px); padding: clamp(20px, 2.6vw, 30px) 0; border-top: 1px solid var(--rule-mid); }
.mb-past h3 { font-size: 1.25rem; color: var(--night); }
.mb-past p { margin: 4px 0 0; color: var(--slate); }
@media (max-width: 760px) { .mb-past > li { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 6. podcasts (page-podcasts.php) ---------- */
.pc-platforms { margin-top: clamp(22px, 2.8vw, 32px); }
.pc-ep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 20px clamp(28px, 4vw, 64px); align-items: start; padding: clamp(22px, 2.8vw, 36px); border-radius: var(--r); background: var(--card); }
.pc-ep--feature { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); padding: clamp(26px, 3.4vw, 48px); }
.pc-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--night); }
.pc-ep--feature .pc-title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.pc-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: 0.92rem; font-weight: 700; color: var(--leaf); }
.pc-newest { padding: 2px 10px; border-radius: 999px; background: var(--lime); color: var(--night); }
.pc-with { margin: 12px 0 0; color: var(--ink); }
.pc-with b { color: var(--forest); }
.pc-sum { max-width: 62ch; margin-top: 12px; color: var(--slate); }
.pc-sum p { margin: 0 0 0.8em; }
.pc-sum p:last-child { margin-bottom: 0; }
.pc-ep--feature .pc-sum { font-size: 1.1rem; }
.pc-topics { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.pc-topics li { padding: 4px 12px; border-radius: 999px; background: var(--paper-green); font-size: 0.85rem; font-weight: 700; color: var(--forest); }
.pc-play { display: grid; gap: 12px; }
.pc-play audio { width: 100%; }
.pc-play iframe { width: 100%; height: 152px; border: 0; border-radius: 12px; }
.pc-embed { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--night); font: 700 1rem/1.2 var(--sans); color: #fff; text-align: left; cursor: pointer; }
.pc-embed:hover { background: var(--forest); }
.pc-embed:focus-visible { outline: 3px solid var(--give); outline-offset: 3px; }
.pc-embed small { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 600; color: rgb(255 255 255 / 0.72); }
.pc-embed-i { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lime); }
.pc-embed-i::before { content: ""; margin-left: 4px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid var(--night); }
.pc-link { justify-self: start; font-weight: 700; color: var(--forest); text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pc-gone { margin: 0; font-size: 0.95rem; color: var(--slate); }
.pc-list { display: grid; gap: 12px; }
.pc-list .pc-ep { background: var(--paper); }
@media (max-width: 860px) { .pc-ep, .pc-ep--feature { grid-template-columns: minmax(0, 1fr); } }
.pc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pc-people li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: var(--card); }
.pc-people img, .pc-initials { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pc-initials { display: grid; place-items: center; background: var(--paper-green); font-size: 1.2rem; font-weight: 800; letter-spacing: 0.02em; color: var(--forest); }
.pc-people b { display: block; color: var(--night); }
.pc-people div span { display: block; margin-top: 2px; font-size: 0.92rem; line-height: 1.4; color: var(--slate); }
/* ---------- 7. the Handbook's landing page (page-handbook.php) ---------- */
.hb-last { margin: clamp(22px, 2.8vw, 32px) 0 0; }
.hb-last .btn b { font-weight: 800; }
.hb-lead { margin: 10px 0 0; font-size: 1.1rem; line-height: 1.45; color: var(--ink); }
.hb-size { margin: 10px 0 0; font-size: 0.92rem; font-weight: 700; color: var(--leaf); }
.hb-open { display: inline-flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--forest); text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* start here: the first guide, with every chapter */
.hb-start { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); padding: clamp(24px, 3.4vw, 48px); border-radius: var(--r); background: var(--forest); color: var(--cream); }
.hb-start h3 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 900; line-height: 1; letter-spacing: var(--ls-huge); color: var(--cream); }
.hb-start h3 a, .hb-guide h3 a, .hb-other :is(h2, h3) a { color: inherit; text-decoration: none; }
.hb-start h3 a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hb-start .hb-lead { color: var(--cream); }
.hb-start .hb-size { color: var(--lime); }
.hb-start .btn-ink { background: var(--lime); color: var(--night); }
.hb-start .btn-ink:hover { background: #fff; }
.hb-start a:focus-visible { outline-color: var(--lime); }
.hb-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; align-content: start; }
.hb-chapters li { border-top: 1px solid var(--on-dark-rule); }
.hb-chapters a { display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 10px; align-items: baseline; min-height: 44px; padding: 12px 0; font-weight: 700; line-height: 1.3; color: var(--cream); text-decoration: none; }
.hb-chapters a:hover span:last-child { text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 4px; }
.hb-chapters .n { font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .hb-start { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .hb-chapters { grid-template-columns: minmax(0, 1fr); } }
/* the other guides, as cards */
.hb-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hb-guide { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); border-top: 6px solid var(--lime); border-radius: var(--r); background: var(--paper); }
.hb-guide:nth-child(3n + 2) { border-top-color: var(--sprout); }
.hb-guide:nth-child(3n + 3) { border-top-color: var(--leaf); }
.hb-guide h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); color: var(--night); }
.hb-guide h3 a:hover, .hb-other :is(h2, h3) a:hover { text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hb-mini { display: grid; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.hb-mini a { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 0.98rem; font-weight: 600; line-height: 1.35; color: var(--ink); text-decoration: none; }
.hb-mini a:hover { color: var(--forest); }
.hb-mini .n { font-weight: 800; color: var(--leaf); }
/* the other pages, with what's coming up */
.hb-action { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.hb-action--solo { grid-template-columns: minmax(0, 1fr); }
.hb-other { display: flex; flex-direction: column; max-width: 60ch; }
.hb-other + .hb-other { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule-mid); }
.hb-other h2 { color: var(--night); }
.hb-other h3 { font-size: 1.5rem; color: var(--night); }
.hb-other p { margin: 10px 0 0; color: var(--slate); }
.hb-events h3 { margin-bottom: 14px; font-size: 1.25rem; color: var(--night); }
@media (max-width: 860px) { .hb-action { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 8. member news (page-member-news.php) ---------- */
/* the newest stories continue the forest field, as on Updates (the story styles are for dark ground) */
.mn-lead { padding-top: 0; padding-bottom: clamp(48px, 6vw, 88px); background: var(--forest); color: var(--cream); }
.mn-lead .n-grid { margin-top: 0; }
.mn-lead a:focus-visible { outline-color: var(--lime); }
.mn-also { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mn-also li { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r); background: var(--paper-green); }
.mn-also h3 { font-size: 0.95rem; font-weight: 800; letter-spacing: 0; color: var(--leaf); }
.mn-also .mn-title { margin: 8px 0 0; font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: var(--ls-mid); color: var(--night); text-wrap: balance; }
.mn-also p { margin: 8px 0 0; color: var(--slate); }
/* ---------- print: the words and the ticks, nothing else ---------- */
@media print {
.ih, .mo, .site-footer, .help-wrap, .gu-close, .gu-tools, .gu-side, .gu-margin, .gu-pills, .gu-nextprev, .skip-link { display: none; }
.gu-field { padding: 0 0 24px; background: none; color: var(--ink); }
.gu-field :is(h1, .lead, .gu-meta, .gu-crumb ol, .gu-crumb a) { color: var(--ink); }
.gu-read { padding-block: 0; background: none; }
.gu-layout { display: block; }
.gu-group, .gu-todo, .gu-score { break-inside: avoid; border: 1px solid var(--rule-mid); }
}