/* Pictures on the guide pages: the drawings' colours, the "at a glance" blocks, and the play-in animation, which
   runs once as a picture comes into view and only where the visitor's system allows motion. */
.pic{display:block;width:100%;height:auto;overflow:visible}
.pic .ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pic .ln2{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pic .ln3{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;opacity:.65}
.pic .soft{fill:none;stroke:color-mix(in srgb,var(--ink) 38%,transparent);stroke-width:2.2;stroke-linecap:round}
.pic .gr{fill:var(--mint)}
.pic .fw0{fill:#fff}.pic .fb0{fill:var(--blush)}
.pic .fw{fill:#fff;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.pic .fm{fill:var(--mint);stroke:var(--mint-ink);stroke-width:2.5;stroke-linejoin:round}
.pic .fs{fill:var(--sky);stroke:var(--sky-ink);stroke-width:2.4;stroke-linejoin:round}
.pic .fb{fill:var(--blush);stroke:var(--blush-ink);stroke-width:2.4;stroke-linejoin:round}
.pic .fy{fill:var(--butter);stroke:var(--butter-ink);stroke-width:2.4;stroke-linejoin:round}
.pic .fl{fill:var(--lilac);stroke:var(--lilac-ink);stroke-width:2.4;stroke-linejoin:round}
.pic .flag,.pic .pin,.pic .star,.pic .siren,.pic .fire{fill:var(--flag)}
.pic .cone{fill:var(--flag);stroke:var(--flag-deep);stroke-width:1.5;stroke-linejoin:round}
.pic .cl{fill:#fff;opacity:.85}
.pic .clw{fill:#fff;stroke:var(--sky-ink);stroke-width:2}
.pic .wv{fill:none;stroke:var(--sky-ink);stroke-width:2.2;stroke-linecap:round;opacity:.7}
.pic .fz{fill:color-mix(in srgb,var(--sky) 70%,var(--sky-ink));opacity:.55}
.pic .fzl{fill:none;stroke:var(--sky-ink);stroke-width:2.2;stroke-dasharray:7 6}
.pic .reg{fill:color-mix(in srgb,var(--lilac) 45%,transparent);stroke:var(--lilac-ink);stroke-width:2.4;stroke-dasharray:8 6}
.pic .beam{fill:none;stroke:var(--sky-ink);stroke-width:1.8;stroke-dasharray:4 5;opacity:.7}
.pic .plan{fill:color-mix(in srgb,var(--blush) 70%,transparent);stroke:var(--blush-ink);stroke-width:2;stroke-dasharray:6 5}
.pic .meas{fill:none;stroke:var(--sky-ink);stroke-width:2.2;stroke-linecap:round}
.pic .zl{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 5;opacity:.45}
.pic .zone-a{fill:var(--mint)}.pic .zone-b{fill:var(--butter)}.pic .zone-c{fill:var(--lilac)}
.pic .road{fill:#D3DAD6}.pic .walk{fill:var(--stone)}.pic .bikelane{fill:color-mix(in srgb,var(--mint-ink) 22%,var(--mint))}
.pic .lane{fill:none;stroke:#fff;stroke-width:2.4;stroke-dasharray:14 12}
.pic .pipe{fill:var(--sky);stroke:var(--sky-ink);stroke-width:2}
.pic .pipe2,.pic .bore{fill:none;stroke:var(--sky-ink);stroke-width:3.4;stroke-linecap:round}
.pic .drop{fill:var(--sky-ink);opacity:.8}
.pic .soil2{fill:color-mix(in srgb,var(--butter) 70%,var(--butter-ink))}
.pic .soil3{fill:color-mix(in srgb,var(--stone) 55%,var(--butter-ink))}
.pic .pebble{fill:var(--butter-ink);opacity:.55}
.pic .contour{fill:none;stroke:var(--mint-ink);stroke-width:1.8;opacity:.7}
.pic .cross{fill:none;stroke:var(--blush-ink);stroke-width:3;stroke-linecap:round}
.pic .dash-old .fl{stroke-dasharray:6 5}
.pic .smoke{fill:#fff;stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:1.6}
.pic .leaf{fill:var(--mint);stroke:var(--mint-ink);stroke-width:2.2;stroke-linejoin:round}
.pic .crack{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pic .quake{fill:none;stroke:var(--blush-ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.pic .tick{fill:none;stroke:var(--mint-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pic .lit,.pic .tape{fill:var(--butter);stroke:var(--butter-ink);stroke-width:2}
.pic .reed{fill:none;stroke:var(--mint-ink);stroke-width:2.4;stroke-linecap:round}
.pic .ring{fill:color-mix(in srgb,var(--sky) 35%,transparent);stroke:var(--sky-ink);stroke-width:2;stroke-dasharray:6 6}
.pic .snowbank{fill:#fff;stroke:var(--sky-ink);stroke-width:2}
.pic .flake{fill:none;stroke:var(--sky-ink);stroke-width:2;stroke-linecap:round}
.pic .wire{fill:none;stroke:var(--ink);stroke-width:1.8;opacity:.6}
.pic .wf{fill:none;stroke:var(--sky-ink);stroke-width:2.6;stroke-linecap:round}
.pic .cross-b{fill:var(--blush);stroke:var(--blush-ink);stroke-width:2;stroke-linejoin:round}
.pic .ball,.pic .sun,.pic .coin{fill:var(--butter);stroke:var(--butter-ink);stroke-width:2.4}
.pic .airl{fill:none;stroke:var(--sky-ink);stroke-width:2;stroke-linecap:round;opacity:.6}
.pic .sound{fill:none;stroke:var(--blush-ink);stroke-width:2.2;stroke-linecap:round}
.pic .therm{fill:none;stroke:var(--blush-ink);stroke-width:4;stroke-linecap:round}
.pic .bar0{fill:var(--sky);stroke:var(--sky-ink);stroke-width:2}.pic .bar1{fill:var(--mint);stroke:var(--mint-ink);stroke-width:2}
.pic .flagc{fill:var(--flag)}.pic .plus{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.pic .trunk{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.pic .lotf{fill:color-mix(in srgb,var(--butter) 55%,transparent)}
.pic .lotl{fill:none;stroke:var(--butter-ink);stroke-width:2.4;stroke-dasharray:9 6}
.pic .gas{fill:none;stroke:var(--lilac-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5}
.pic .rail{fill:none;stroke:var(--ink);stroke-width:2.6}.pic .tie{fill:none;stroke:var(--ink);stroke-width:2;opacity:.45}

/* "At a glance": the picture, then a few blocks that say most of the page without reading it. */
.glance{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin:4px 0 22px;align-items:start}
.g-pic{margin:0;position:relative;background:linear-gradient(180deg,var(--sky) 0%,color-mix(in srgb,var(--sky) 45%,var(--paper)) 58%,var(--mint) 100%);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);padding:16px 16px 0}
.g-pic .pic{margin:0 auto -1px;max-width:520px}
.g-pic figcaption{position:absolute;left:14px;top:12px;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:5px 12px 5px 8px;font-size:var(--fs-xs);font-weight:700;color:var(--ink)}
.g-pic figcaption .ic{width:16px;height:16px;color:var(--flag)}
.g-side{display:grid;gap:12px;align-content:start;min-width:0}
.g-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-card);min-width:0}
.g-label{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:760;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px}
.g-label .ic{width:16px;height:16px;flex:none}
.g-label .g-note{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.g-line{border:1px solid var(--rule);border-radius:var(--r-sm);padding:11px 13px;background:var(--surface)}
.g-line.is-flag{background:color-mix(in srgb,var(--blush) 55%,#fff);border-color:color-mix(in srgb,var(--blush-ink) 40%,var(--rule))}
.g-line.is-note{background:color-mix(in srgb,var(--butter) 50%,#fff)}
.g-line-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.g-line-top b{font-size:var(--fs-base);line-height:1.3;color:var(--ink)}
.g-line p{margin:5px 0 0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.45}
.g-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:9px 0 0;font-size:var(--fs-xs);color:var(--ink-soft)}
.g-kv dt{font-weight:650;color:var(--ink)}.g-kv dd{margin:0}
.g-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.g-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px 5px 7px;font-size:var(--fs-sm);font-weight:650;line-height:1.25;background:var(--mint);color:var(--mint-ink)}
.g-chip .ic{width:15px;height:15px;flex:none}
.g-chip.is-no{background:var(--lilac);color:var(--lilac-ink)}
.g-chip.is-all{background:var(--sky);color:var(--sky-ink)}
.g-chip.t-blush-chip{background:var(--blush);color:var(--blush-ink)}
a.g-chip{text-decoration:none}
a.g-chip:hover{background:var(--ink);color:#fff}
.g-chip.is-plain{background:var(--paper);color:var(--ink)}
.g-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:9px 0 0;font-size:var(--fs-xs);color:var(--ink-soft)}
.g-pubs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:var(--fs-xs);color:var(--ink-soft)}
.g-pubs > span:first-child{font-weight:700;margin-right:2px}
.g-pubs .g-chip{font-size:var(--fs-xs);padding:4px 10px}
.g-key .ic{width:13px;height:13px;vertical-align:-2px;color:var(--mint-ink)}
.g-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.g-fact{display:grid;justify-items:center;align-content:start;text-align:center;gap:6px;padding:12px 6px;border-radius:var(--r-sm);background:var(--paper);font-size:var(--fs-xs);font-weight:650;color:var(--ink);line-height:1.3}
.g-fact .ic-c{width:38px;height:38px}
.g-fact small{font-weight:500;color:var(--ink-soft)}
.ic-c{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--sky);color:var(--sky-ink);flex:none}
.ic-c .ic{width:22px;height:22px}
.t-mint{background:var(--mint);color:var(--mint-ink)}.t-butter{background:var(--butter);color:var(--butter-ink)}
.t-blush{background:var(--blush);color:var(--blush-ink)}.t-lilac{background:var(--lilac);color:var(--lilac-ink)}
.t-sky{background:var(--sky);color:var(--sky-ink)}.t-stone{background:var(--stone);color:var(--ink-soft)}

/* Three steps, each with its picture: what the record is, where it's published, what OfferDue does with it. */
.g-steps{display:grid;gap:8px;margin:0;padding:0;list-style:none;counter-reset:gs}
.g-steps li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow-card);counter-increment:gs;position:relative}
.g-steps li::before{content:counter(gs);position:absolute;left:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:760;display:grid;place-items:center}
.g-steps b{display:block;font-size:var(--fs-sm)}
.g-steps small{display:block;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.4}
.g-steps-link li{padding:0}
.g-steps-link a{display:flex;align-items:center;gap:12px;padding:10px 14px;color:var(--ink);text-decoration:none;width:100%;border-radius:var(--r)}
.g-steps-link a:hover{background:var(--paper)}
.g-rule-line{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink)}
.g-hl{font-weight:760;background:var(--butter);color:var(--butter-ink);border-radius:6px;padding:0 5px;white-space:nowrap}
.g-src{margin:8px 0 0;font-size:var(--fs-xs);color:var(--ink-soft)}
.g-src a{color:var(--ink-soft)}

/* The seven local rules as tiles: lit where a town's rule is on the page. */
.g-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.g-rules li > a,.g-rules li > span{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:680;line-height:1.25;color:var(--ink);text-decoration:none}
.g-rules li{display:block}
.g-rules li > :is(a,span:first-child){min-height:40px}
.g-rules .ic-c{width:34px;height:34px;border-radius:11px}
.g-rules .ic-c .ic{width:18px;height:18px}
.g-rules .is-off{color:var(--ink-soft);opacity:.7}
.g-rules .is-off > span,.g-rules .is-off{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs)}
.mo-ic{width:34px;height:34px;border-radius:11px}
.mo-ic .ic{width:18px;height:18px}

/* The guide's front page: the seven groups as tiles, readers as icon cards, each record as a card with its picture. */
.g-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 22px;padding:0;list-style:none}
.g-groups a{display:grid;justify-items:start;gap:6px;height:100%;box-sizing:border-box;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-card)}
.g-groups a:hover{border-color:var(--ink)}
.g-groups b{font-size:var(--fs-sm);line-height:1.3}
.g-groups small{font-size:var(--fs-xs);color:var(--ink-soft)}
.policy-body .g-readers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;padding:0;list-style:none;max-width:none}
.g-readers li{margin:0}
.g-readers a{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);text-decoration:none;font-size:var(--fs-sm);font-weight:650;line-height:1.3}
.g-readers a:hover{border-color:var(--ink)}
.g-readers .ic-c{width:34px;height:34px;border-radius:11px}
.g-readers .ic-c .ic{width:18px;height:18px}
.policy-body .g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0;padding:0;list-style:none;max-width:none}
.g-cards li{margin:0}
.g-cards a{display:grid;gap:6px;align-content:start;height:100%;box-sizing:border-box;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:8px 8px 12px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-card)}
.g-cards a:hover{border-color:var(--ink)}
.g-thumb{display:block;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,var(--sky),var(--mint));aspect-ratio:400/200}
.g-thumb .pic{margin-top:-10%}
.g-cards b{font-size:var(--fs-sm);line-height:1.35;padding:0 4px}
.g-cards small{font-size:var(--fs-xs);color:var(--ink-soft);padding:0 4px}
.g-free{color:var(--mint-ink);font-weight:700}
.policy-body .g-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));margin:10px 0 12px}
.g-cards-row{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))!important}
nav.more{max-width:none}
/* A long table or section folded behind one bar: its picture, its name and what's inside, in a line. */
details.g-fold{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);margin:6px 0 12px;max-width:none}
details.g-fold > summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
details.g-fold > summary::-webkit-details-marker{display:none}
details.g-fold > summary::after{content:"+";margin-left:auto;font-weight:760;font-size:var(--fs-lg);color:var(--ink-soft);flex:none}
details.g-fold[open] > summary::after{content:"\2212"}
details.g-fold > summary b{display:block;font-size:var(--fs-sm)}
details.g-fold > summary small{display:block;font-size:var(--fs-xs);color:var(--ink-soft)}
details.g-fold > summary:hover{background:var(--paper);border-radius:var(--r)}
details.g-fold[open] > summary{border-bottom:1px solid var(--rule)}
details.g-fold > :not(summary){margin:12px 14px}
/* A topic page's sections, each folded behind its bar; a link to a section opens it (pictures.js). */
.g-sec-head{font-size:var(--fs-h3);margin:26px 0 10px}
details.g-sec{margin:0 0 10px}
details.g-sec > summary{padding:12px 16px}
details.g-sec > summary b{font-size:var(--fs-base)}
details.g-sec > summary small{max-width:80ch}
details.g-sec .policy-body{margin:14px 18px 6px}
/* Dates as a line with stops; the visitor's browser marks the ones already past and where today falls. */
.g-time{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin:0 0 22px;padding:22px 16px 14px;list-style:none;position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.g-time::before{content:"";position:absolute;left:28px;right:28px;top:31px;height:3px;border-radius:3px;background:var(--rule)}
.g-time li{position:relative;display:grid;gap:4px;padding-top:24px}
.g-time-dot{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--flag);border:4px solid var(--surface);box-shadow:0 0 0 2px var(--flag)}
.g-time li.is-past .g-time-dot{background:var(--rule);box-shadow:0 0 0 2px var(--rule)}
.g-time li.is-past{color:var(--ink-soft)}
.g-time b{font-size:var(--fs-sm)}
.g-time small{font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.45}
.g-time-today{font-style:normal;position:absolute;top:12px;width:2px;height:28px;background:var(--ink);border-radius:2px}
.g-time-today span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:var(--fs-xs);font-weight:760;white-space:nowrap}
@media (max-width:640px){.g-time{grid-auto-flow:row;padding:16px 16px 6px 44px}.g-time::before{left:25px;right:auto;top:20px;bottom:20px;width:3px;height:auto}.g-time li{padding:0 0 12px}.g-time-dot{left:-28px;top:2px}.g-time-today{display:none}}
/* A listing, drawn: what a business's listing shows, with no business named. */
.g-mock{margin:12px 0 16px;max-width:520px}
.g-mock figcaption{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:760;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.g-mock figcaption .ic{width:15px;height:15px;color:var(--flag)}
.g-listing{background:var(--surface);border:2px dashed color-mix(in srgb,var(--ink) 25%,var(--rule));border-radius:var(--r);padding:14px 16px;display:grid;gap:10px;box-shadow:var(--shadow-card)}
.policy-body .g-listing .g-chips{padding:0;margin:0;max-width:none}
.g-listing-top{display:flex;align-items:center;gap:12px}
.g-listing-top b{display:block;font-size:var(--fs-base)}
.g-listing-top small{display:block;font-size:var(--fs-xs);color:var(--ink-soft)}
.g-badge{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;background:var(--mint);color:var(--mint-ink);font-size:var(--fs-xs);font-weight:720;white-space:nowrap}
.g-badge .ic{width:14px;height:14px}
.g-listing-web{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--fs-sm);color:var(--sky-ink);font-weight:650}
.g-listing-web .ic{width:15px;height:15px}
.g-listing-foot{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding-top:8px;border-top:1px solid var(--rule)}
.g-listing-foot span{font-size:var(--fs-xs);font-weight:700;color:var(--ink-soft);background:var(--paper);border-radius:999px;padding:3px 9px}
/* A register to check, as a badge card. */
.policy-body .g-regs{display:grid;gap:10px;margin:0 0 12px;padding:0;list-style:none;max-width:none}
.g-regs li{display:flex;align-items:flex-start;gap:12px;margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow-card)}
.g-regs b{display:block;font-size:var(--fs-sm);line-height:1.35}
.g-regs small{display:block;font-size:var(--fs-xs);color:var(--ink-soft);line-height:1.5;margin:4px 0 6px}
.g-go{font-size:var(--fs-xs);font-weight:720;color:var(--mint-ink)}
/* Questions people ask, as speech bubbles. */
.policy-body .g-bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px 12px;margin:0;padding:0;list-style:none;max-width:none}
.g-bubbles li{position:relative;margin:0 0 8px;background:var(--sky);color:var(--ink);border-radius:18px 18px 18px 4px;padding:12px 14px 12px 44px;font-size:var(--fs-sm);line-height:1.45}
.g-bubbles li::after{content:"";position:absolute;left:0;bottom:-8px;border-width:8px 10px 0 0;border-style:solid;border-color:var(--sky) transparent transparent transparent}
.g-bubbles li:nth-child(3n+2){background:var(--mint)}.g-bubbles li:nth-child(3n+2)::after{border-top-color:var(--mint)}
.g-bubbles li:nth-child(3n+3){background:var(--butter)}.g-bubbles li:nth-child(3n+3)::after{border-top-color:var(--butter)}
.g-q{position:absolute;left:12px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--surface);color:var(--ink);font-weight:800;font-size:var(--fs-sm);display:grid;place-items:center}
/* Lists with a picture for each line. */
.policy-body .g-ticks{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.g-ticks li{display:flex;align-items:flex-start;gap:10px;margin:0}
.g-ticks li > .ic{width:18px;height:18px;flex:none;margin-top:3px;color:var(--mint-ink)}
.g-lines li > .ic{color:var(--sky-ink)}
.policy-body .g-near{max-width:none}
/* A tool's page, drawn small. */
.g-doc{display:block;position:relative;width:46px;height:58px;border-radius:6px;background:var(--surface);border:2px solid var(--ink);margin-bottom:8px;box-shadow:3px 3px 0 var(--sky)}
.g-doc i{display:block;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 35%,transparent);margin:8px 7px 0}
.g-doc i + i{margin-top:5px;width:60%}
.g-doc em{position:absolute;right:6px;bottom:7px;width:10px;height:10px;border-radius:50%;background:var(--flag)}
nav .g-cards{display:grid;gap:12px;margin:10px 0 0;padding:0;list-style:none}
nav .g-cards li{margin:0}

.g-h2{display:flex;align-items:center;gap:12px}
.k-ic{width:34px;height:34px;border-radius:11px;margin-bottom:4px}
.k-ic .ic{width:18px;height:18px}
.q-pic{display:block;max-width:260px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--sky),var(--mint));margin:0 0 12px;aspect-ratio:400/210}
.q-pic .pic{margin-top:-6%}

/* Big figures: a number you can see from across the room, with what it is in a few words. */
.g-bigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:4px 0 22px;padding:0;list-style:none}
.g-big{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px 16px 14px;display:grid;gap:8px;align-content:start;box-shadow:var(--shadow-card)}
.g-big-top{display:flex;align-items:center;gap:10px}
.g-num{font-size:calc(var(--fs-logo) * .9);font-weight:800;font-stretch:112%;line-height:1;color:var(--ink);letter-spacing:-.01em}
.g-unit{font-size:var(--fs-sm);font-weight:720;color:var(--ink-soft);margin-left:2px}
.g-cap{margin:0;font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.45}
.g-cap b{color:var(--ink)}
.g-big .g-src{font-size:var(--fs-xs);color:var(--ink-soft)}

/* What can be bought and what never can, side by side. */
.g-yesno{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;margin:4px 0 24px}
.g-yesno section{border-radius:var(--r-lg);padding:18px 20px;border:1px solid var(--rule);box-shadow:var(--shadow-card)}
.g-yes{background:color-mix(in srgb,var(--mint) 55%,#fff)}
.g-no{background:color-mix(in srgb,var(--blush) 50%,#fff)}
.g-yesno h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-h3);margin:0 0 12px;max-width:none}
.g-yesno ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.g-yesno li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-sm);line-height:1.45}
.g-yesno li > .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--mint-ink)}
.g-x{flex:none;width:18px;height:18px;border-radius:50%;background:var(--blush-ink);color:#fff;font-weight:800;font-size:var(--fs-xs);line-height:18px;text-align:center;margin-top:1px}
@media (max-width:760px){.g-yesno{grid-template-columns:1fr}}
/* A ranked bar chart: one series, one colour, the value at each tip; a found town in the accent colour. */
.g-chart{margin:0 0 24px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 20px 14px;box-shadow:var(--shadow-card)}
.g-chart-title{display:flex;align-items:center;gap:10px;font-size:var(--fs-h3);margin:0 0 6px;max-width:none}
.g-chart-title .ic{width:20px;height:20px;color:var(--butter-ink)}
.g-chart-sub{margin:0 0 12px;font-size:var(--fs-xs);color:var(--ink-soft);max-width:80ch;line-height:1.5}
.g-find{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;background:var(--paper);margin:0 0 12px}
.g-find .ic{width:16px;height:16px;color:var(--ink-soft)}
.g-find input{border:0;background:transparent;font:inherit;font-size:var(--fs-sm);width:min(220px,55vw);color:var(--ink)}
.g-find input:focus{outline:none}
.g-find:focus-within{border-color:var(--ink)}
.g-bars{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.g-bar{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) 56px;align-items:center;gap:10px;padding:2px 6px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:var(--fs-xs)}
.g-bar:hover,.g-bar:focus-visible{background:var(--paper);outline:none}
.g-bar-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.g-bar-track{display:block;height:14px}
.g-bar-track i{display:block;height:14px;max-width:100%;background:#2E7AC8;border-radius:0 4px 4px 0;transform-origin:0 50%}
.g-bar-val{font-weight:720;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.g-bars li.is-hit .g-bar-track i{background:var(--flag)}
.g-bars li.is-hit .g-bar-name,.g-bars li.is-hit .g-bar-val{color:var(--ink);font-weight:800}
.g-bars li.is-miss{opacity:.35}
.g-tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:#fff;border-radius:10px;padding:8px 10px;font-size:var(--fs-xs);line-height:1.45;max-width:260px;box-shadow:var(--shadow-sm)}
.g-tip b{display:block;font-size:var(--fs-sm)}
@media (max-width:520px){.g-bar{grid-template-columns:100px minmax(0,1fr) 48px;gap:6px}.g-bar-name{white-space:normal;line-height:1.2}.g-chart{padding:14px 12px 10px}}
@media (prefers-reduced-motion:no-preference){
  .pics-on .g-bars:not(.in) .g-bar-track i{transform:scaleX(0)}
  .g-bars.in .g-bar-track i{transition:transform .9s var(--ease)}
}
/* Picture charts: rows of houses, trunks drawn to scale, a line of dots. */
.g-pict-rows{display:grid;gap:10px}
.g-pict-row{display:grid;grid-template-columns:minmax(180px,230px) minmax(0,1fr);gap:14px;align-items:start;padding:12px;border-radius:var(--r);background:var(--paper)}
.g-pict-key{display:grid;gap:4px}
.g-pict-key b{font-size:var(--fs-base)}
.g-pict-key small{font-size:var(--fs-xs);color:var(--ink-soft)}
.g-houses{display:inline-flex;gap:3px}
.g-houses svg{width:30px;height:30px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-houses .is-main{stroke:var(--ink);fill:#fff}
.g-houses .is-more{stroke:var(--mint-ink);fill:var(--mint)}
.g-houses.is-big svg{width:42px;height:42px}
.g-chip.is-me{background:var(--flag);color:#fff}
.g-trunks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.g-trunks > li{display:grid;justify-items:center;align-content:start;gap:6px;padding:12px 10px;border-radius:var(--r);background:var(--paper);text-align:center}
.g-trunks > li > b{font-size:var(--fs-base)}
.g-trunks .g-chips{justify-content:center}
.g-trunk-box{display:grid;place-items:center;width:92px;height:92px}
.g-trunk{width:92px;height:92px}
.g-trunk .t-bark{fill:#E9D9B9;stroke:var(--butter-ink);stroke-width:2.5}
.g-trunk .t-ring{fill:none;stroke:color-mix(in srgb,var(--butter-ink) 45%,transparent);stroke-width:1.4}
.g-trunk .t-core{fill:var(--butter-ink)}
.g-trunk.is-big{width:120px;height:120px}
.g-others{margin:12px 0 0}
.g-others a{color:var(--ink-soft)}
.g-strip{margin:4px 0 0}
.g-rule-pict{display:flex;align-items:center;gap:12px;margin:2px 0 8px;padding:8px 12px;border-radius:12px;background:var(--paper);font-size:var(--fs-sm)}
.g-rule-pict .g-trunk{width:56px;height:56px;flex:none}
.g-rule-pict b{color:var(--ink)}
.g-strip-track{position:relative;height:26px;margin:0 8px;border-bottom:2px solid var(--rule)}
.g-strip-track i{position:absolute;bottom:6px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:color-mix(in srgb,#2E7AC8 45%,#fff);border:1px solid #fff}
.g-strip-track b{position:absolute;bottom:2px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--flag);border:3px solid #fff;box-shadow:0 0 0 2px var(--flag)}
.g-strip-ends{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--ink-soft);margin:4px 0 0}
.g-strip-cap{margin:6px 0 0;font-size:var(--fs-xs);color:var(--ink-soft)}
.g-strip-cap b{color:var(--ink)}
@media (max-width:640px){.g-pict-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .pics-on .g-strip-track:not(.in) b{left:0!important}
  .g-strip-track.in b{transition:left 1.1s var(--ease) .2s}
  .pics-on .g-trunks:not(.in) .t-bark{transform:scale(.2)}
  .g-trunks .t-bark{transform-box:fill-box;transform-origin:center}
  .g-trunks.in .t-bark{transition:transform .8s var(--ease)}
}
/* Authorities joining regional ones in 2027: today's names, lines drawn together, the new name, the towns. */
.g-merges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.g-merge{display:grid;align-content:start;padding:14px;border-radius:var(--r);background:var(--paper);min-width:0}
.g-merge-from{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.g-merge-from li{border-radius:999px;padding:4px 10px;background:var(--surface);border:1px solid var(--rule);font-size:var(--fs-xs);font-weight:650}
.g-funnel{display:block;width:100%;height:26px;margin:4px 0 0;overflow:visible}
.g-funnel path{fill:none;stroke:#2E7AC8;stroke-width:2;stroke-linecap:round}
.g-merge-to{margin:0 0 10px;display:grid;justify-items:center;text-align:center;gap:2px;border-radius:var(--r-sm);padding:10px 12px;background:var(--sky);color:var(--sky-ink)}
.g-merge-to b{font-size:var(--fs-base);font-stretch:112%}
.g-merge-to small{font-size:var(--fs-xs)}
.g-merge-verb{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.g-merge-towns{justify-content:center}
.g-merge-towns .g-chip,.g-merge-now .g-chip,.g-rule-panel .g-chip{font-size:var(--fs-xs);padding:4px 10px}
.g-merge .g-chip.is-plain,.g-rule-panel .g-chip.is-plain{background:var(--surface);border:1px solid var(--rule)}
.g-merge a.g-chip:hover,.g-rule-panel a.g-chip:hover{border-color:var(--ink)}
.g-merge-mini .g-merge-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
.g-merge-now{display:flex;flex-wrap:wrap;gap:6px}
.g-merge-arrow{display:inline-flex;align-items:center;gap:4px;color:#2E7AC8}
.g-merge-arrow .ic{width:20px;height:20px}
.g-merge-arrow small{color:var(--ink-soft);font-size:var(--fs-xs);font-weight:650}
.g-merge-new{border-radius:999px;padding:4px 12px;background:var(--sky);color:var(--sky-ink);font-size:var(--fs-xs)}
.g-merge-new b{font-size:var(--fs-sm)}
/* Rules sorted by what each town's line says, and one town's facts from the same sort. */
.g-rule-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px;align-items:start}
.g-rule-panel{padding:14px;border-radius:var(--r);background:var(--paper);min-width:0}
.g-rule-head{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.g-rule-head .ic-c,.g-facts-row .ic-c{width:36px;height:36px;border-radius:12px}
.g-rule-head b{display:block;font-size:var(--fs-sm);line-height:1.3}
.g-rule-head small{font-size:var(--fs-xs);color:var(--ink-soft)}
.g-cap-row{display:grid;gap:6px;margin:0 0 12px}
.g-cap-row > b{font-size:var(--fs-sm)}
.g-year{position:relative;display:block;height:14px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);overflow:hidden}
.g-year i{position:absolute;inset:0 auto 0 0;background:#2E7AC8;transform-origin:0 50%}
.g-year::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/12 - 1.5px),var(--surface) calc(100%/12 - 1.5px) calc(100%/12))}
ul.g-facts-row{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
ul.g-facts-row li{margin:0;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:var(--paper);font-size:var(--fs-xs);line-height:1.3}
.g-facts-row li > span:last-child{display:grid;gap:5px;min-width:0;flex:1}
.g-facts-row .g-year{height:10px}
@media (prefers-reduced-motion:no-preference){
  .pics-on .rise:not(.in) .g-year i{transform:scaleX(0)}
  .rise.in .g-year i{transition:transform 1.1s var(--ease) .5s}
  .pics-on .g-merges:not(.in) .g-funnel path{opacity:0}
  .g-merges.in .g-funnel path{transition:opacity .8s var(--ease) .5s}
}
/* A business run from home: the house of 100 squares (the share filled from the floor up) and the people. */
.g-waffle{width:62px;height:auto;flex:none;overflow:visible}
.g-waffle .w-roof{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.g-waffle rect.off{fill:#DDEBF8}
.g-waffle rect.on{fill:#2E7AC8}
.g-waffle.is-small{width:38px}
.g-share-row,.g-staff-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start;margin:0 0 14px}
.g-share-row b,.g-staff-row b{display:block;font-size:var(--fs-sm)}
.g-share-row small,.g-staff-row small{display:block;font-size:var(--fs-xs);color:var(--ink-soft);margin:0 0 6px}
.g-people{display:inline-flex;flex-wrap:wrap;gap:2px;align-items:flex-end}
.g-people svg{width:22px;height:22px;fill:none;stroke-width:2.2;stroke-linecap:round}
.g-people .is-home{stroke:var(--ink)}
.g-people .is-out{stroke:#2E7AC8;fill:color-mix(in srgb,#2E7AC8 18%,transparent)}
ul.g-homebiz-row li > span:last-child{display:grid;gap:2px}
/* The roles around a home, and the records each reads. */
.g-ring{margin:0 0 24px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:16px 18px 20px;box-shadow:var(--shadow-card)}
.g-ring figcaption{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);font-weight:760;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.g-ring figcaption .ic{width:18px;height:18px;flex:none}
.g-ring-box{position:relative;height:470px;margin:8px 0 0}
.g-ring-lines{position:absolute;inset:0;width:100%;height:100%}
.g-ring-lines line{stroke:var(--rule);stroke-width:1.5;stroke-dasharray:4 5}
.g-ring-home{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:4px;text-align:center;background:var(--paper);border-radius:999px;padding:22px 28px}
.g-ring-home .ic-c{width:56px;height:56px;border-radius:18px}
.g-ring-home small{font-size:var(--fs-xs);color:var(--ink-soft)}
.g-ring-roles{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.g-ring-roles li{position:absolute;transform:translate(-50%,-50%);margin:0}
.g-ring-roles a{display:grid;justify-items:center;gap:4px;text-align:center;text-decoration:none;color:var(--ink);width:118px;font-size:var(--fs-xs);line-height:1.2}
.g-ring-roles a:hover .ic-c{box-shadow:0 0 0 2px var(--ink)}
@media (max-width:720px){
  .g-ring-box{height:auto;display:grid;gap:12px}
  .g-ring-lines{display:none}
  .g-ring-home{position:static;transform:none;border-radius:var(--r);padding:12px}
  .g-ring-roles{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .g-ring-roles li{position:static;transform:none}
  .g-ring-roles a{width:auto}
}
.g-matrix-wrap{position:relative;overflow-x:auto}
.g-matrix{border-collapse:separate;border-spacing:4px;width:100%;min-width:620px;table-layout:fixed}
.g-matrix thead th:first-child{width:220px}
.g-matrix thead th{font-weight:650;font-size:var(--fs-xs);text-align:center;vertical-align:bottom;padding:0 2px 4px}
.g-matrix thead .ic-c{width:30px;height:30px;border-radius:10px;margin:0 auto 4px}
.g-matrix thead small{display:block;color:var(--ink-soft)}
.g-matrix tbody th{text-align:left;font-size:var(--fs-sm);font-weight:650;white-space:nowrap;padding-right:8px}
.g-matrix tbody th a{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.g-matrix tbody th .ic-c{width:28px;height:28px;border-radius:9px}
.g-matrix td{background:var(--paper);border-radius:8px;text-align:center;height:34px;padding:2px 4px}
.g-dots{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:center}
.g-dots i{width:10px;height:10px;border-radius:50%;background:#2E7AC8}
.g-none{color:var(--ink-soft)}
.g-reg-link{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-sm);padding:8px 14px;background:var(--mint);color:var(--mint-ink);text-decoration:none}
.g-reg-link .ic{width:20px;height:20px;flex:none}
.g-reg-link small{display:block;font-size:var(--fs-xs)}
.g-reg-link b{font-size:var(--fs-sm)}
.g-reg-link.is-none{background:var(--stone);color:var(--ink-soft)}
@media (prefers-reduced-motion:no-preference){
  .pics-on .rise:not(.in) .g-waffle rect.on{opacity:0}
  .rise.in .g-waffle rect.on{transition:opacity .6s var(--ease) .4s}
}
/* A town's rules at a glance, on its questions index. */
.g-city-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start}
.g-city-tile{display:grid;gap:10px;padding:14px;border-radius:var(--r);background:var(--paper);min-width:0}
.g-city-tile .g-rule-head{margin:0}
.g-city-tile .g-rule-pict,.g-city-tile ul.g-facts-row li{background:var(--surface)}
.g-city-tile ul.g-facts-row{margin:0}
.g-city-tile .g-merge-row{margin:0 0 6px}
.g-city-tile .g-chip.is-plain{background:var(--surface);border:1px solid var(--rule)}
.g-city-big{margin:0;font-size:var(--fs-h3);font-weight:780;font-stretch:112%}
.g-city-big small{font-size:var(--fs-xs);font-weight:500;color:var(--ink-soft)}
.g-city-tile .g-go{justify-self:start;font-size:var(--fs-sm);font-weight:650}
/* A topic page's big numbers drawn at their size, and the checklist's documents as tiles. */
.g-fp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 0}
.g-fp svg{width:46px;height:46px;flex:none}
.g-fp .fp-track{fill:none;stroke:var(--sky);stroke-width:5}
.g-fp .fp-fill{fill:none;stroke:#2E7AC8;stroke-width:5}
.g-fp .fp-hours{fill:none;stroke:#2E7AC8;stroke-width:4}
.g-fp .fp-hand{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.g-fp-year{display:grid;gap:4px}
.g-fp-year small{font-size:var(--fs-xs);color:var(--ink-soft)}
.fp-grid{display:grid;grid-template-columns:repeat(10,9px);gap:3px}
.fp-grid i{width:9px;height:9px;border-radius:2px;background:#2E7AC8}
.fp-digits{display:flex;gap:4px}
.fp-digits i{width:16px;height:22px;border-radius:4px;border:2px solid #2E7AC8;background:var(--surface)}
.fp-years{display:grid;gap:4px;width:100%}
.fp-years .g-year{height:9px}
.g-doc-tiles{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.g-doc-tiles a{display:flex;align-items:center;gap:10px;height:100%;padding:10px 12px;border-radius:var(--r-sm);background:var(--paper);color:var(--ink);text-decoration:none;font-size:var(--fs-sm);line-height:1.3}
.g-doc-tiles a:hover{box-shadow:0 0 0 2px var(--ink) inset}
.g-doc-tiles .ic-c{width:38px;height:38px;border-radius:12px}
@media (prefers-reduced-motion:no-preference){
  .pics-on .rise:not(.in) .g-fp .fp-fill{stroke-dasharray:0 100}
  .rise.in .g-fp .fp-fill{transition:stroke-dasharray 1.1s var(--ease) .4s}
  .pics-on .rise:not(.in) .fp-grid i{transform:scale(0)}
  .rise.in .fp-grid i{transition:transform .5s var(--ease) .4s}
}
/* Water bills: an envelope for each bill in a year. */
.g-mails{display:flex;flex-wrap:wrap;gap:3px;color:#2E7AC8}
.g-mails .ic{width:16px;height:16px}
.glance-join{align-items:center}
.glance-join .g-mock{margin:0;max-width:none}
.glance-topic{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.glance-topic .g-bigs{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.g-days{margin:0;display:inline-flex;justify-self:start;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;background:var(--blush);color:var(--blush-ink);font-size:var(--fs-xs);font-weight:720}
@media (max-width:520px){.glance-topic .g-bigs{grid-template-columns:1fr}}

/* The moments around a home, with this page's lit up. */
.g-moments{margin:0 0 26px !important;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:18px 12px 16px !important;box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;position:relative}
.g-moments::before{content:"";position:absolute;left:7%;right:7%;top:39px;height:3px;background:repeating-linear-gradient(90deg,var(--rule) 0 9px,transparent 9px 15px)}
.g-mo{display:grid;justify-items:center;align-content:start;gap:7px;text-align:center;font-size:var(--fs-xs);line-height:1.25;color:var(--ink-soft);position:relative}
.g-mo .dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--rule);color:var(--ink-soft)}
.g-mo .dot .ic{width:20px;height:20px}
.g-mo.is-on{color:var(--ink);font-weight:720}
.g-mo.is-on .dot{background:var(--flag);border-color:var(--flag);color:#fff;box-shadow:0 0 0 6px color-mix(in srgb,var(--flag) 16%,transparent)}
.g-mo a{color:inherit;text-decoration:none}

/* A guide's stages as a road with stops. */
.g-road{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:4px 0 22px;padding:16px 10px 4px;list-style:none;position:relative;counter-reset:stop}
.g-road::before{content:"";position:absolute;left:8%;right:8%;top:42px;height:6px;border-radius:6px;background:repeating-linear-gradient(90deg,var(--rule) 0 14px,color-mix(in srgb,var(--rule) 40%,transparent) 14px 22px)}
.g-stop{display:grid;justify-items:center;align-content:start;gap:8px;text-align:center;position:relative;counter-increment:stop}
.g-stop a{display:grid;justify-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:var(--fs-sm);font-weight:680;line-height:1.3}
.g-stop .ic-c{width:54px;height:54px;border-radius:50%;border:3px solid var(--surface);box-shadow:var(--shadow-sm);position:relative}
.g-stop .ic-c::after{content:counter(stop);position:absolute;top:-6px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:760;display:grid;place-items:center}
.g-stop small{font-size:var(--fs-xs);font-weight:500;color:var(--ink-soft)}
.g-stop a:hover .ic-c{transform:translateY(-2px)}

/* Rule cards on a town's page: an icon, the rule's one-line picture, then the words. */
.g-rule-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.g-rule-top h3{margin:0}
.g-rule-big{display:inline-flex;align-items:baseline;gap:4px;margin:2px 0 8px;padding:6px 12px;border-radius:12px;background:var(--paper)}
.g-rule-big .g-num{font-size:var(--fs-h2)}

@media (max-width:820px){
  .glance{grid-template-columns:1fr}
  .g-moments{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
  .g-moments::before{display:none}
  .g-road{grid-auto-flow:row;grid-auto-columns:auto;padding:4px 0}
  .g-road::before{left:27px;right:auto;top:10px;bottom:10px;width:6px;height:auto;background:repeating-linear-gradient(180deg,var(--rule) 0 14px,color-mix(in srgb,var(--rule) 40%,transparent) 14px 22px)}
  .g-stop,.g-stop a{justify-items:start;text-align:left}
  .g-stop a{grid-template-columns:auto 1fr;align-items:center;gap:14px}
}
@media (max-width:420px){.g-facts{gap:6px}.g-fact{padding:10px 4px}.g-fact .ic-c{width:34px;height:34px}}

@media (prefers-reduced-motion:no-preference){
  /* Before a picture plays: lines not yet drawn, pieces not yet in. */
  .pics-on .pic:not(.play) .d{stroke-dasharray:1;stroke-dashoffset:1}
  .pics-on .pic:not(.play) .p,.pics-on .pic:not(.play) .f,.pics-on .pic:not(.play) .hs .fw0,.pics-on .pic:not(.play) .hs .fb0{opacity:0}
  .pic.play .d{stroke-dasharray:1;stroke-dashoffset:1;animation:pic-draw 1.1s var(--ease) .1s forwards}
  .pic.play .hs .fw0,.pic.play .hs .fb0{animation:pic-fade .6s .6s both}
  .pic .p{transform-box:fill-box;transform-origin:50% 100%}
  .pic.play .p{animation:pic-pop .6s var(--ease) both;animation-delay:calc(.8s + var(--i,0) * .14s)}
  .pic.play .f{animation:pic-fade .9s .9s both}
  /* Then a little life: clouds drift, water moves, the flag waves, smoke rises. */
  .pic [class*="lp-"]{transform-box:fill-box;transform-origin:center}
  .pic.play .lp-drift{animation:pic-drift 16s ease-in-out 1s infinite alternate}
  .pic.play .lp-wave{transform-origin:0 50%;animation:pic-wave 2.6s ease-in-out 1.6s infinite}
  .pic.play .lp-flow{animation:pic-flow 3.4s ease-in-out 1.4s infinite alternate}
  .pic.play .lp-bob,.pic.play .p.lp-bob{animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-bob 3.2s ease-in-out 2s infinite}
  .pic.play .p.lp-sway{transform-origin:50% 100%;animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-sway 3s ease-in-out 2s infinite}
  .pic.play .p.lp-swing{transform-origin:50% 0;animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-sway 2.8s ease-in-out 2s infinite}
  .pic.play .lp-swing:not(.p){transform-origin:50% 0;animation:pic-sway 2.8s ease-in-out 2s infinite}
  .pic.play .p.lp-rain,.pic.play .p.lp-drip{animation:pic-pop .4s var(--ease) calc(.8s + var(--i,0) * .1s) both,pic-fall 1.6s ease-in 2s infinite}
  .pic.play .lp-snow{animation:pic-fall 2.6s linear 1.2s infinite}
  .pic.play .lp-rise{animation:pic-rise 3s ease-out 1.4s infinite}
  .pic.play .lp-blink{animation:pic-pop .6s var(--ease) 1.2s both,pic-blink 1.2s steps(2) 2s infinite}
  .pic.play .lp-ping{animation:pic-blink 1.8s ease-in-out 1s infinite}
  .pic.play .lp-fly{animation:pic-fly 7s ease-in-out .6s infinite alternate}
  .pic.play .p.lp-drive{animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-drive 5s ease-in-out 2s infinite alternate}
  .pic.play .p.lp-drive2{animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-drive2 6s ease-in-out 2s infinite alternate}
  .pic.play .p.lp-walk{animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-walk 6s ease-in-out 2s infinite alternate}
  .pic.play .p.lp-pump{transform-origin:50% 100%;animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-nod 2.4s ease-in-out 2s infinite}
  .pic.play .p.lp-flicker{animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-flicker .9s ease-in-out 2s infinite alternate}
  .pic.play .lp-jib{transform-origin:84% 0;animation:pic-sway 4s ease-in-out 2s infinite}
  .pic.play .p.lp-spin{animation:pic-pop .6s var(--ease) .9s both,pic-spin 18s linear 2s infinite}
  .pic.play .p.lp-roll,.pic.play .p.lp-bounce{animation:pic-pop .6s var(--ease) calc(.8s + var(--i,0) * .14s) both,pic-bounce 1.6s ease-in-out 2s infinite}
  .pic.play .lp-lane{animation:pic-lane 2.4s linear 1s infinite}

  /* The blocks beside a picture come in one after another. */
  .pics-on .rise:not(.in) > *{opacity:0}
  .rise.in > *{animation:pic-up .55s var(--ease) both;animation-delay:calc(.15s + var(--n,0) * .09s)}
  .rise > :nth-child(2){--n:1}.rise > :nth-child(3){--n:2}.rise > :nth-child(4){--n:3}.rise > :nth-child(5){--n:4}
  .rise > :nth-child(6){--n:5}.rise > :nth-child(7){--n:6}.rise > :nth-child(8){--n:7}.rise > :nth-child(9){--n:8}
  .rise > :nth-child(10){--n:9}.rise > :nth-child(11){--n:10}.rise > :nth-child(12){--n:11}.rise > :nth-child(n+13){--n:12}
  .g-mo.is-on .dot{animation:pic-ring 2.4s 1.4s infinite}
  .rise.in .g-road-line,.g-road.in::before{animation:pic-grow 1.2s var(--ease) both;transform-origin:0 50%}
  .g-stop a .ic-c{transition:transform .2s var(--ease)}
}
@keyframes pic-draw{to{stroke-dashoffset:0}}
@keyframes pic-fade{from{opacity:0}}
@keyframes pic-pop{from{opacity:0;transform:translateY(8px) scale(.6)}}
@keyframes pic-up{from{opacity:0;transform:translateY(12px)}}
@keyframes pic-drift{to{transform:translateX(46px)}}
@keyframes pic-wave{0%,100%{transform:skewY(0) scaleX(1)}35%{transform:skewY(-9deg) scaleX(.9)}65%{transform:skewY(6deg) scaleX(1.04)}}
@keyframes pic-flow{to{transform:translateX(10px)}}
@keyframes pic-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pic-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes pic-fall{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(34px);opacity:0}}
@keyframes pic-rise{0%{transform:translateY(8px) scale(.7);opacity:0}30%{opacity:1}100%{transform:translateY(-26px) scale(1.2);opacity:0}}
@keyframes pic-blink{50%{opacity:.25}}
@keyframes pic-fly{from{transform:translateX(-40px)}to{transform:translateX(150px)}}
@keyframes pic-drive{to{transform:translateX(70px)}}
@keyframes pic-drive2{to{transform:translateX(-60px)}}
@keyframes pic-walk{to{transform:translateX(90px)}}
@keyframes pic-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes pic-flicker{to{transform:scaleY(1.18) translateY(-1px)}}
@keyframes pic-spin{to{transform:rotate(360deg)}}
@keyframes pic-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}}
@keyframes pic-lane{to{stroke-dashoffset:-26}}
@keyframes pic-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--flag) 45%,transparent)}75%,100%{box-shadow:0 0 0 14px transparent}}
@keyframes pic-grow{from{transform:scaleX(0)}}