/* Guides and articles ("Site Plan"): the illustration kit, the guides index, the article page.
   Reading comfort first: one ~66ch column, 18 px / 1.7 body, headings at 600 (never heavier). */

/* ============ 1 · Guide illustrations (assets/js/guide-art.js) ============
   A drawing on paper keeps its own light palette, in dark mode too (like a printed plan on a dark desk). */
.gart {
  --ga-ink: #111214; --ga-ink2: #3F434A; --ga-ink3: #6B6F77; --ga-ink4: #B8B5AE; --ga-rule: #E2DDD2;
  --ga-amber: #F59E0B; --ga-amberd: #D97706; --ga-amberink: #8A4B04; --ga-red: #E5412D; --ga-blue: #2E62F0; --ga-blueink: #1F47B8;
  --ga-green: #16A34A; --ga-greenink: #15803D; --ga-paper: #F7F5F0;
  display: block; width: 100%; height: auto; color-scheme: light;
}
.gart text { font-family: var(--font-mono); font-size: 7px; letter-spacing: .06em; fill: var(--ga-ink3); }
.gart .ga-bg { fill: var(--ga-paper); }
.gart .ga-grid { fill: none; stroke: rgba(17, 18, 20, .045); stroke-width: 1; }
.gart .ga-hbg { fill: #FFF3D6; }
.gart .ga-hl { stroke: var(--ga-amber); stroke-width: 1.1; opacity: .75; }
.gart .ga-soil { stroke: rgba(120, 100, 70, .16); stroke-width: 1; }
.gart .ga-tag rect { fill: #FFFFFF; stroke: rgba(17, 18, 20, .1); stroke-width: .8; }
.gart .ga-tag text { font-size: 8.6px; letter-spacing: .08em; fill: var(--ga-ink2); }
/* ground, buildings */
.gart .ga-pave { fill: #EDE9E1; }
.gart .ga-road { fill: #DEDAD1; }
.gart .ga-gl { fill: none; stroke: #CFC7B8; stroke-width: 1.2; }
.gart .ga-roof { fill: #5B6170; stroke: #4A505D; stroke-width: 1; stroke-linejoin: round; }
.gart .ga-chim { fill: #B9826A; stroke: #8E6150; stroke-width: .9; }
.gart .ga-wall { stroke: #CFC7B8; stroke-width: 1; }
.gart .ga-win { fill: #FFFFFF; stroke: #8A8F99; stroke-width: 1.1; }
.gart .ga-win.f { stroke: #C9CCD1; }
.gart .ga-bar { fill: none; stroke: #8A8F99; stroke-width: .8; }
.gart .ga-door { stroke: rgba(17, 18, 20, .25); stroke-width: .8; }
.gart .ga-faint { opacity: .62; }
.gart .ga-trunk { stroke: #8E6B4E; stroke-width: 3; stroke-linecap: round; }
.gart .ga-tree { fill: #9FD7AE; stroke: #5FB37A; stroke-width: 1.2; }
.gart--plan .ga-tree, .gart--map .ga-tree { fill: #D8EEDC; stroke: #8FCB9E; }
.gart .ga-floor { fill: none; stroke: #CFC7B8; stroke-width: 1; }
.gart .ga-earth { fill: #EFE7D8; }
.gart .ga-foot { fill: #DAD3C4; stroke: #BEB6A6; stroke-width: .8; }
.gart .ga-shop { fill: #E9EEF3; stroke: #CFC7B8; stroke-width: 1; }
.gart .ga-car { fill: #FFFFFF; stroke: var(--ga-ink3); stroke-width: 1.1; stroke-linejoin: round; }
.gart .ga-wheel { fill: #3F444C; }
/* the proposal: amber hatch, amber-deep line */
.gart .ga-prop { stroke: var(--ga-amberd); stroke-width: 1.4; stroke-linejoin: round; }
.gart .ga-prop.dash { stroke-dasharray: 4 3; }
.gart .ga-propl { fill: none; stroke: var(--ga-amberd); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.gart .ga-propl.thin { stroke-width: .9; }
.gart .ga-mull { stroke: var(--ga-amberd); stroke-width: .9; }
.gart .ga-smoke { fill: none; stroke: var(--ga-ink4); stroke-width: 1.1; stroke-linecap: round; }
.gart .ga-fence { fill: none; stroke: var(--ga-amberd); stroke-width: 3.2; stroke-linecap: round; }
.gart .ga-kerbdrop { stroke: var(--ga-amberd); stroke-width: 4; stroke-linecap: round; }
.gart .ga-scaf { fill: none; stroke: var(--ga-amberd); stroke-width: 1.1; }
.gart .ga-wave { fill: none; stroke: var(--ga-amberd); stroke-width: 1.2; stroke-linecap: round; }
.gart .ga-bin { fill: #7D828B; }
.gart .ga-bin.on { fill: var(--ga-amber); }
.gart .ga-bell { fill: var(--ga-ink3); }
.gart .ga-plaque { fill: var(--ga-blue); stroke: #FFFFFF; stroke-width: 1; }
/* the red line: the application site, and nothing else */
.gart .ga-site { fill: none; stroke: var(--ga-red); stroke-width: 1.7; }
.gart .ga-bound { fill: none; stroke: var(--ga-blue); stroke-width: 1.5; stroke-dasharray: 6 4; }
/* blueprint: dimensions, guide lines, map boundaries, your patch */
.gart .ga-dim { fill: none; stroke: var(--ga-blue); stroke-width: .9; }
.gart .ga-dim.thin { stroke-width: .6; stroke-dasharray: 2 2; }
.gart .ga-dimt { font-size: 7.4px; fill: var(--ga-blueink); }
.gart .ga-dimhead { fill: none; stroke: var(--ga-blue); stroke-width: 1.2; }
.gart .ga-dash { fill: none; stroke: var(--ga-blue); stroke-width: 1; stroke-dasharray: 4 3; }
.gart .ga-sight { fill: none; stroke: var(--ga-blue); stroke-width: .9; stroke-dasharray: 2 3; }
.gart .ga-mt { font-size: 6.6px; letter-spacing: .1em; fill: var(--ga-ink3); }
.gart .ga-mt.c { fill: var(--ga-blueink); }
/* plan */
.gart .ga-kerb { fill: none; stroke: #CFC7B8; stroke-width: 2; }
.gart .ga-lane { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-dasharray: 14 12; }
.gart .ga-plot { fill: #F1EEE6; stroke: #DAD4C7; stroke-width: 1; }
.gart .ga-plot.on { fill: #FBFAF6; stroke: #CFC7B8; }
.gart .ga-lawn { fill: #EEF5E6; }
.gart .ga-fp { fill: #E9E4D8; stroke: #D3CCBC; stroke-width: 1; }
.gart .ga-fp.f { fill: #ECE8DE; }
.gart .ga-ridge { fill: none; stroke: #C9C2B2; stroke-width: .8; }
.gart .ga-path { fill: none; stroke: #E6E0D3; stroke-width: 6; stroke-linecap: round; }
.gart .ga-post { fill: var(--ga-ink3); }
.gart .ga-post.on { fill: var(--ga-amberd); }
.gart .ga-water { fill: #DCEEF6; stroke: #9CCBE0; stroke-width: .8; }
.gart .ga-north path { fill: var(--ga-ink3); }
.gart .ga-north text { font-size: 7px; }
/* section */
.gart .ga-sun { fill: #FFD36B; stroke: var(--ga-amberd); stroke-width: 1; }
.gart .ga-ray { fill: none; stroke: var(--ga-amberd); stroke-width: 1; stroke-dasharray: 3 3; }
.gart .ga-ray.off { opacity: .35; }
.gart .ga-water-l { fill: none; stroke: #7FB6D6; stroke-width: 1.2; }
.gart .ga-rain { stroke: #9DB8D0; stroke-width: 1; stroke-linecap: round; }
/* street furniture: the lamp post and its laminated notice */
.gart .ga-lamp { fill: none; stroke: #3F444C; stroke-width: 2.4; stroke-linecap: round; }
.gart .ga-lampshade { fill: #3F444C; }
.gart .ga-notice { fill: #FFE45C; stroke: #E0B400; stroke-width: .8; }
.gart .ga-notice-l { stroke: rgba(17, 18, 20, .45); stroke-width: 1.2; stroke-linecap: round; }
.gart .ga-notice-t { font-family: var(--font-sans); font-size: 4.4px; font-weight: 600; letter-spacing: .05em; fill: #111214; }
/* paper */
.gart .ga-sheet { fill: #FFFFFF; stroke: #DED9CE; stroke-width: 1; filter: drop-shadow(0 6px 10px rgba(17, 18, 20, .08)); }
.gart .ga-sheet.back { fill: #FBFAF6; }
.gart .ga-line { fill: none; stroke: #DAD5CA; stroke-width: 2.4; stroke-linecap: round; }
.gart rect.ga-line.dark { fill: var(--ga-ink4); stroke: none; }
.gart .ga-box { fill: var(--ga-paper); stroke: #E2DDD2; stroke-width: 1; }
.gart .ga-stamp rect { fill: rgba(255, 255, 255, .6); stroke: currentColor; stroke-width: 1.8; }
.gart .ga-stamp text { font-size: 9px; font-weight: 600; letter-spacing: .12em; fill: currentColor; }
.gart .ga-stamp.ok { color: var(--ga-greenink); }
.gart .ga-stamp.no, .gart .ga-stamp.ink { color: var(--ga-ink); }
.gart .ga-stamp.mute { color: var(--ga-ink3); }
.gart .ga-stamp.wait { color: var(--ga-amberink); }
.gart .ga-stamp.blue { color: var(--ga-blueink); }
.gart .ga-calh { fill: var(--ga-ink2); }
.gart .ga-day { fill: #F1EEE6; }
.gart .ga-day.on { fill: #FFF0CF; stroke: var(--ga-amberd); stroke-width: .8; }
.gart .ga-big { font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.04em; fill: var(--ga-ink); }
.gart .ga-zig { fill: none; stroke: #DED9CE; stroke-width: 1; }
.gart .ga-env { fill: #FBFAF6; stroke: #D9D4C8; stroke-width: 1; }
.gart .ga-envf { fill: none; stroke: #D3CDBF; stroke-width: 1; stroke-linejoin: round; }
.gart .ga-sign { fill: none; stroke: var(--ga-ink2); stroke-width: 1.2; stroke-linecap: round; }
.gart .ga-arrow { fill: none; stroke: var(--ga-ink3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.gart .ga-plank { fill: #E6DCCB; stroke: #D2C6B1; stroke-width: 1; }
.gart .ga-plank.alt { fill: #DED2BE; }
.gart .ga-board { fill: #FFBE3B; stroke: #D99A16; stroke-width: .8; }
.gart .ga-board-t { font-family: var(--font-sans); font-size: 5.4px; font-weight: 600; letter-spacing: .06em; fill: #111214; }
.gart .ga-noticeh { fill: var(--ga-ink); }
.gart .ga-noticeht { font-size: 8px; font-weight: 600; letter-spacing: .24em; fill: #FFFFFF; }
.gart .ga-roll { fill: #EEF3FF; stroke: #B9C8F0; stroke-width: 1; }
.gart .ga-rollend { fill: #DDE6FB; stroke: #B9C8F0; stroke-width: 1; }
.gart .ga-plotarea { fill: #FBFAF6; stroke: #E2DDD2; stroke-width: 1; }
/* map */
.gart .ga-mapcase { fill: none; stroke: #E4DFD3; stroke-width: 12; stroke-linecap: round; }
.gart .ga-maproad { fill: none; stroke: #FFFFFF; stroke-width: 9; stroke-linecap: round; }
.gart .ga-block { fill: #E9E4D8; stroke: #D3CCBC; stroke-width: .6; }
.gart .ga-area { fill: rgba(46, 98, 240, .06); stroke: var(--ga-blue); stroke-width: 1.4; stroke-dasharray: 5 4; }
.gart .ga-tpo { fill: none; stroke: var(--ga-blue); stroke-width: 1.2; stroke-dasharray: 3 3; }
.gart .ga-field { fill: #EAF4E4; stroke: #CFE3C6; stroke-width: 1; }
.gart .ga-contour { fill: none; stroke: #CFD8EA; stroke-width: 1; }
.gart .ga-hedge { fill: #F1F6EC; stroke: #8FCB9E; stroke-width: 2; stroke-linejoin: round; }
.gart .ga-dot { fill: var(--ga-amber); }
.gart .ga-dot.on { fill: var(--ga-amberd); stroke: #FFFFFF; stroke-width: 1.5; }
.gart .ga-patch { fill: rgba(46, 98, 240, .05); stroke: var(--ga-blue); stroke-width: 1.4; stroke-dasharray: 5 4; }
/* a guide's own diagram: two drawings, HTML captions */
.gd { display: grid; grid-template-columns: 1.65fr 1fr; gap: 12px; }
.gd-fig { margin: 0; display: grid; gap: 10px; align-content: start; }
.gd-fig svg { border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); }
.gd-fig figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.gd-fig figcaption b { display: block; font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
.gart--diagram text { font-size: 9px; }
.gart--diagram .ga-mt { font-size: 9.6px; }
.gart--diagram .ga-dimt { font-size: 12.5px; font-weight: 500; letter-spacing: .02em; }
@media (max-width: 640px) { .gd { grid-template-columns: 1fr; } .gd-b svg { max-width: 300px; } }

/* Boxes the drawings are drawn into in the browser: their size is reserved here, so nothing moves when they arrive. */
[data-art] { display: block; aspect-ratio: 16 / 10; background: #F7F5F0; overflow: hidden; }
[data-art] > .gart { width: 100%; height: 100%; }

/* ============ 2 · Guides index ============ */
.gx-hero { padding: calc(var(--nav-clear) + clamp(28px, 4vw, 60px)) 0 clamp(48px, 6vw, 88px); background-color: var(--paper-2); border-bottom: 1px solid var(--rule); }
.gx-hero-in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.gx-hero-copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.gx-h1 { font-size: clamp(44px, 5.8vw, 86px); line-height: .96; max-width: 10.5em; letter-spacing: var(--track-display); }
.gx-hero .lead { max-width: 33em; }
.gx-search { position: relative; width: 100%; max-width: 580px; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px 0 50px; border-radius: 18px; background: var(--sheet);
  box-shadow: 0 0 0 1px var(--rule-2), 0 18px 40px -24px rgba(17, 18, 20, .32); transition: box-shadow var(--dur-quick) var(--ease-out); }
.gx-search svg { position: absolute; left: 18px; width: 20px; height: 20px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; }
.gx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 17px; outline: none; color: var(--ink); }
.gx-search input::placeholder { color: var(--ink-3); }
.gx-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gx-search input:focus-visible { box-shadow: none; }
.gx-search:focus-within { box-shadow: 0 0 0 2px var(--amber), 0 18px 40px -24px rgba(17, 18, 20, .32); }
.gx-search kbd { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 6px; padding: 1px 7px; }
.gx-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 580px; }
.gx-door { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px var(--rule-2);
  transition: background-color var(--dur-instant), box-shadow var(--dur-instant), transform var(--dur-instant) var(--ease-out); }
.gx-door b { font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.gx-door span { font-size: 13px; color: var(--ink-3); }
.gx-door:hover { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--ink-4); }
.gx-door:active { transform: translateY(1px); }
.gx-door[aria-pressed="true"], .gx-door[aria-current="true"] { background: var(--ink); box-shadow: none; }
.gx-door[aria-pressed="true"] b, .gx-door[aria-current="true"] b { color: var(--paper); }
.gx-door[aria-pressed="true"] span, .gx-door[aria-current="true"] span { color: rgba(255, 255, 255, .7); }
/* sheets on a desk: four drawings, four scenes */
.gx-hero-art { position: relative; aspect-ratio: 1 / .9; }
.gx-sheet { position: absolute; width: 56%; border-radius: 14px; overflow: hidden; background: var(--sheet); box-shadow: 0 0 0 1px rgba(17, 18, 20, .07), 0 26px 50px -26px rgba(17, 18, 20, .45);
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.gx-sheet span { display: block; padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border-top: 1px solid var(--rule); }
.gx-sheet--0 { left: 0; top: 2%; transform: rotate(-3.5deg); z-index: 2; }
.gx-sheet--1 { right: 0; top: 7%; transform: rotate(2.5deg); z-index: 1; }
.gx-sheet--2 { left: 6%; bottom: 3%; transform: rotate(2deg); z-index: 3; }
.gx-sheet--3 { right: 3%; bottom: 0; transform: rotate(-2.5deg); z-index: 4; }
.gx-sheet:hover { transform: rotate(0) translateY(-6px); z-index: 6; box-shadow: 0 0 0 1px rgba(17, 18, 20, .08), 0 34px 60px -26px rgba(17, 18, 20, .5); }

/* featured + start here */
.gx-feature { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(16px, 2vw, 28px); }
.gx-feature-grid { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; }
.gx-featured { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; background: var(--amber-field); color: #111214;
  box-shadow: 0 0 0 1px rgba(17, 18, 20, .08); transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.gx-featured:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(17, 18, 20, .1), 0 30px 60px -32px rgba(17, 18, 20, .45); }
.gx-featured-art { display: grid; align-items: center; background: #F7F5F0; border-right: 1px solid rgba(17, 18, 20, .1); }
.gx-featured-body { display: grid; gap: 12px; align-content: start; padding: clamp(22px, 2.4vw, 32px); }
.gx-featured h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.gx-featured-d { font-size: 16px; line-height: 1.55; color: #2B2D31; }
.gx-featured .gx-meta { color: #4A4C50; } .gx-featured .gx-meta b { color: #111214; }
.gx-featured .gx-date { color: #4A4C50; }
.gx-featured-cta { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 4px; }
.gx-featured-cta svg { transition: transform var(--dur-quick) var(--ease-out); }
.gx-featured:hover .gx-featured-cta svg { transform: translateX(3px); }
.gx-start { display: grid; gap: 10px; align-content: start; }
.gx-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.gx-start-list { display: grid; gap: 2px; }
.gx-start-list a { display: grid; grid-template-columns: 24px 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; margin: 0 -10px; border-radius: 14px; transition: background-color var(--dur-instant); }
.gx-start-list a:hover { background: var(--paper-2); }
.gx-start-n { font-family: var(--font-mono); font-size: 12px; color: var(--amber-ink); }
.gx-start-art { display: block; border-radius: 9px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule); }
.gx-start-t { display: grid; gap: 3px; }
.gx-start-t b { font-weight: 600; font-size: 15.5px; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
.gx-start-t small { font-size: 13px; color: var(--ink-3); }

/* the browse bar sticks under the floating header */
.gx-browse { padding-bottom: clamp(56px, 7vw, 104px); }
.gx-bar-wrap { position: sticky; top: calc(var(--nav-clear) - 4px); z-index: 20; padding: 12px 0; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); }
.gx-bar { display: flex; gap: 12px; align-items: center; }
.gx-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.gx-chips::-webkit-scrollbar { display: none; }
.gx-chip { flex-shrink: 0; display: inline-flex; gap: 7px; align-items: center; height: 38px; padding: 0 13px; border-radius: 10px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2);
  font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color var(--dur-instant), color var(--dur-instant), box-shadow var(--dur-instant); }
.gx-chip span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.gx-chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-4); }
.gx-chip[aria-pressed="true"], .gx-chip[aria-current="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.gx-chip[aria-pressed="true"] span, .gx-chip[aria-current="true"] span { color: rgba(255, 255, 255, .66); }
.gx-sort .select { height: 38px; width: auto; padding: 0 34px 0 12px; font-size: 14px; border-radius: 10px; background-color: var(--sheet); }
.no-js .gx-sort, .no-js .gx-more, .no-js .gx-search kbd { display: none; }
.gx-status { min-height: 1.5em; margin: 18px 0 6px; font-size: 15px; color: var(--ink-2); }
.gx-topic { padding: 26px 0 36px; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-clear) + 64px); }
.gx-results > .gx-topic:not([hidden]) ~ .gx-topic { border-top: 1px solid var(--rule); }
.gx-topic:first-child, .gx-topic.is-first { border-top: 0; padding-top: 8px; }
.gx-topic-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.gx-topic-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.05; letter-spacing: -0.03em; }
.gx-topic-head h2 span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-3); vertical-align: 5px; margin-left: 6px; }
.gx-topic-head p { color: var(--ink-2); margin-top: 6px; font-size: 16px; }
.gx-more { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--rule-2); font-weight: 500; font-size: 14.5px; color: var(--ink); background: var(--sheet); transition: box-shadow var(--dur-instant); }
.gx-more:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
/* with the script on, a topic shows six until "See all" (every card is still a link in the HTML) */
html:not(.no-js) .gx-topic:not(.is-open) > .gx-grid > .gx-card:nth-child(n+7) { display: none; }
.gx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gx-grid--4 .gx-card-t { font-size: 17px; }
.gx-grid--4 .gx-card-body { padding: 14px 16px 16px; }
.gx-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); overflow: hidden; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule); color: var(--ink);
  transition: transform var(--dur-quick) var(--ease-out), box-shadow var(--dur-quick) var(--ease-out); }
.gx-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--rule-2), 0 22px 44px -26px rgba(17, 18, 20, .38); }
.gx-card-art { border-bottom: 1px solid var(--rule); }
.gx-card-body { display: grid; gap: 8px; align-content: start; padding: 15px 18px 18px; }
.gx-meta { font-size: 13px; color: var(--ink-3); }
.gx-meta b { font-weight: 600; color: var(--amber-ink); }
.gx-card-t { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.gx-card-d { font-size: 15px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.gx-results.anim .gx-card { animation: gxIn 260ms var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 6) * 22ms); }
@keyframes gxIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.is-scrolling .gx-card, .is-scrolling .gx-case, .is-scrolling .gx-sheet, .is-scrolling .gx-featured, .is-scrolling .gx-start-list a { pointer-events: none; }
.gx-empty { padding: 28px; border-radius: var(--r-lg); background: var(--paper-2); color: var(--ink-2); }
.gx-empty button { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; font-weight: 500; }

/* case files: dramatised stories on the night band */
.gx-cases { padding: clamp(72px, 9vw, 128px) 0; }
.gx-cases-head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
.gx-cases .label { color: var(--amber-ink); }
.gx-cases-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gx-case { display: grid; gap: 10px; align-content: start; padding: 14px 14px 18px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); color: var(--ink);
  transition: transform var(--dur-quick) var(--ease-out), background-color var(--dur-quick); }
.gx-case:hover { transform: translateY(-3px); background: var(--paper-3); }
.gx-case-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); }
.gx-case-art { border-radius: 10px; }
.gx-case-t { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.gx-case-d { font-size: 14px; line-height: 1.5; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* closing band (amber field, ink type): search on the left, save a postcode on the right */
.gx-close { padding: clamp(72px, 9vw, 120px) 0; }
.gx-close-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(28px, 4vw, 64px); align-items: center; }
.si-close { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.si-k { color: #111214; }
.si-h { max-width: 14em; text-wrap: balance; }
.si-lead { max-width: 34em; }
.gx-pc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; max-width: 560px; }
.gx-pc .input { height: 56px; font-size: 17px; border-radius: 14px; border-color: rgba(17, 18, 20, .22); text-transform: uppercase; }
.gx-pc .input::placeholder { text-transform: none; }
.gx-pc .input:focus { border-color: #111214; }
.si-trust { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: #2B2D31; }
.si-trust li { display: inline-flex; gap: 8px; align-items: center; }
.si-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #111214; }
.si-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.si-links a { color: #111214; }
/* the save-a-postcode card (views/partials/digest-capture.ejs, variant 'site') */
.pw-dc[data-variant="site"] { min-width: 0; }
.pw-dc[data-variant="site"] .pw-dc-card { display: grid; gap: 12px; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-xl); background: #FFFFFF; color: #111214; box-shadow: 0 0 0 1px rgba(17, 18, 20, .08), 0 30px 60px -36px rgba(17, 18, 20, .5); }
.pw-dc[data-variant="site"] .pw-dc-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8A4B04; }
.pw-dc[data-variant="site"] .pw-dc-heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 27px); line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.pw-dc[data-variant="site"] .pw-dc-desc { font-size: 15.5px; line-height: 1.55; color: #3F434A; }
.pw-dc-google .pw-or { margin: 2px 0 10px; }
.pw-dc[data-variant="site"] .pw-dc-form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; margin-top: 4px; }
.pw-dc[data-variant="site"] .pw-dc-field { height: 48px; width: 100%; min-width: 0; padding: 0 14px; border-radius: var(--r-md); background: #FFFFFF; border: 1px solid #D5D1C7; font-size: 16px; color: #111214;
  transition: border-color var(--dur-instant), box-shadow var(--dur-instant); }
.pw-dc[data-variant="site"] .pw-dc-field::placeholder { color: #6B6F77; }
.pw-dc[data-variant="site"] .pw-dc-field:focus { outline: none; border-color: #111214; box-shadow: var(--focus); }
.pw-dc[data-variant="site"] .pw-dc-submit { grid-column: 1 / -1; height: 48px; border-radius: 12px; background: #111214; color: #FFFFFF; font-weight: 600; font-size: 15.5px; transition: background-color var(--dur-instant), transform var(--dur-instant); }
.pw-dc[data-variant="site"] .pw-dc-submit:hover:not(:disabled) { background: #2B2D31; }
.pw-dc[data-variant="site"] .pw-dc-submit:active { transform: translateY(1px); }
.pw-dc[data-variant="site"] .pw-dc-submit:disabled { opacity: .65; }
.pw-dc[data-variant="site"] .pw-dc-msg { font-size: 14.5px; font-weight: 500; }
.pw-dc[data-variant="site"] .pw-dc-msg--ok { color: #15803D; }
.pw-dc[data-variant="site"] .pw-dc-msg--err { color: #8A4B04; }
.pw-dc[data-variant="site"] .pw-dc-fine { font-size: 13px; line-height: 1.5; color: #6B6F77; }
.pw-dc[data-variant="site"] .pw-dc-secondary { font-size: 14.5px; font-weight: 500; color: #111214; text-decoration: underline; text-decoration-color: #F59E0B; text-underline-offset: 3px; width: fit-content; }

/* ============ 3 · Article ============ */
.nav-progress { position: absolute; left: 28px; right: 28px; bottom: 0; height: 2px; border-radius: 2px; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.ar-head { padding: calc(var(--nav-clear) + clamp(20px, 3vw, 40px)) 0 clamp(40px, 5vw, 64px); background-color: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ar-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-3); margin-bottom: clamp(20px, 3vw, 36px); }
.ar-crumb a { color: var(--ink-2); }
.ar-crumb a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.ar-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ar-head-grid.no-art { grid-template-columns: minmax(0, 1fr); }
.ar-head-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.ar-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.7vw, 66px); line-height: 1.02; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; max-width: 13.5em; overflow-wrap: anywhere; }
.ar-dek { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.ar-by { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.ar-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber-ink); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.ar-by-t { display: grid; gap: 1px; line-height: 1.45; min-width: 0; flex: 1 1 200px; }
.ar-by-t b { color: var(--ink); font-weight: 600; font-size: 15px; }
.ar-legal { flex-basis: 100%; font-size: 13px; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.ar-legal:hover { color: var(--ink-2); text-decoration-color: var(--amber); }
.ar-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 2px; }
.ar-cta-note { font-size: 14px; color: var(--ink-3); }
.ar-hero-art { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--sheet); box-shadow: var(--sh-2); }
.ar-hero-svg { aspect-ratio: 16 / 10; background: #F7F5F0; }
.ar-hero-svg .gart { width: 100%; height: 100%; }
.ar-hero-art figcaption { padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--rule); }

.ar-body { display: grid; grid-template-columns: 220px minmax(0, 600px); gap: clamp(40px, 6vw, 92px); padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(56px, 7vw, 96px); }
.ar-body.is-short { grid-template-columns: minmax(0, 640px); }
.ar-toc { min-width: 0; }
.ar-toc-in { position: sticky; top: calc(var(--nav-clear) + 28px); display: grid; gap: 16px; max-height: calc(100vh - var(--nav-clear) - 48px); overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.ar-toc-k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ar-toc ol { display: grid; border-left: 1px solid var(--rule); }
.ar-toc a[data-toc-link] { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 7px 8px 7px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.38; color: var(--ink-3);
  transition: color var(--dur-instant), border-color var(--dur-quick) var(--ease-out); }
.ar-toc a[data-toc-link] span { font-family: var(--font-mono); font-size: 11.5px; padding-top: 1.5px; }
.ar-toc a[data-toc-link]:hover { color: var(--ink); }
.ar-toc a[aria-current] { color: var(--ink); border-left-color: var(--amber); font-weight: 500; }
.ar-toc a[aria-current] span { color: var(--amber-ink); }
.si-rail { display: grid; gap: 8px; }
.ar-toc-cta { display: inline-flex; gap: 8px; align-items: center; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 14px; font-weight: 500; width: fit-content; color: var(--ink); }
.ar-toc-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ar-toc-cta:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.si-rail-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.ar-toc-m { display: none; }

/* the reading column: 18 px / 1.7, about 66 characters a line */
.ar-article { min-width: 0; font-size: 18px; line-height: 1.7; color: var(--ink-2); overflow-wrap: break-word; }
.ar-article p, .ar-article ul, .ar-article ol { margin: 0 0 1.1em; text-wrap: pretty; }
.ar-article h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(27px, 2.3vw, 33px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 18px; text-wrap: balance; scroll-margin-top: calc(var(--nav-clear) + 48px); }
.ar-article .ar-n { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 1; letter-spacing: .04em; color: var(--amber-ink); margin: 0 0 10px; }
.ar-sec { padding-top: 60px; }
.ar-flow > .ar-n, .ar-lead .ar-n { margin-top: 56px; }
.ar-article h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); margin: 38px 0 10px; text-wrap: balance; }
.ar-article h4 { font-weight: 600; font-size: 18px; color: var(--ink); margin: 28px 0 8px; }
.ar-article strong, .ar-article b { font-weight: 600; color: var(--ink); }
.ar-article a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-instant); }
.ar-article a:not(.btn):hover { text-decoration-color: var(--ink); }
.ar-article ul, .ar-article ol { padding-left: 1.3em; }
.ar-article ul { list-style: disc; }
.ar-article ol { list-style: decimal; }
.ar-article li { margin: .38em 0; padding-left: .2em; }
.ar-article li > p { margin: 0 0 .4em; }
.ar-article li::marker { color: var(--amber-deep); }
.ar-article ol > li::marker { font-family: var(--font-mono); font-size: .82em; color: var(--ink-3); }
.ar-article blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 3px solid var(--amber); background: var(--paper-2); border-radius: 0 12px 12px 0; }
.ar-article blockquote > :last-child { margin-bottom: 0; }
.ar-article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 16px; display: block; overflow-x: auto; }
.ar-article th, .ar-article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ar-article th { font-weight: 600; color: var(--ink); background: var(--paper-2); }
/* a table wider than the column scrolls inside itself: a soft shadow shows on the side with more to see, and the
   paper-coloured covers hide it once you reach that end */
.ar-article table {
  background:
    linear-gradient(to right, var(--paper) 30%, transparent) left / 36px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, transparent) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(17, 18, 20, .18), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(17, 18, 20, .18), transparent) right / 12px 100% no-repeat scroll;
}
.ar-article img { max-width: 100%; height: auto; border-radius: 12px; }
.ar-article hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.ar-article code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-2); padding: 1px 5px; border-radius: 5px; }
.ar-article pre { overflow-x: auto; }
.ar-k { display: inline-block; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); margin-bottom: 10px; }
/* raw HTML some guides carry (inline-styled panels, tables, forms): keep it inside the column */
.ar-article [style] { max-width: 100%; }
.ar-article div[style*="grid-template-columns"] { min-width: 0; }

/* short answer */
.ar-answer { padding: 22px 24px 24px; margin-bottom: 8px; border-radius: var(--r-lg); background: var(--amber-wash); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); }
.ar-answer p { margin: 0; font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.ar-answer p strong { font-weight: 500; color: var(--ink); }
.ar-lead > p:first-child { margin-top: 0; }
.ar-lead > .ar-answer + p { margin-top: 24px; }

/* key facts, with the guide's diagram */
.ar-facts { margin: 30px 0 34px; border-radius: var(--r-lg); background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), 0 20px 44px -30px rgba(17, 18, 20, .3); overflow: hidden; }
.ar-facts-head { padding: 20px 22px 0; }
.ar-article .ar-facts-head h3 { margin: 0; font-size: 20px; }
.ar-facts-fig { padding: 16px 22px 6px; }
.ar-article .ar-facts-list { list-style: none; margin: 0; padding: 8px 22px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.ar-article .ar-facts-list li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; margin: 0; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.ar-facts-n { font-family: var(--font-mono); font-size: 12px; color: var(--amber-ink); padding-top: 3px; }

/* the inline postcode prompt */
.ar-prompt { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 20px; align-items: center; margin: 26px 0 30px; padding: 14px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ar-prompt-art { border-radius: 12px; }
.ar-article .ar-prompt-body p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.ar-prompt-form { display: flex; gap: 8px; }
.ar-prompt-form .input { flex: 1; min-width: 0; height: 46px; text-transform: uppercase; }
.ar-prompt-form .input::placeholder { text-transform: none; }
.ar-prompt-form .btn { height: 46px; padding: 0 18px; font-size: 15px; flex-shrink: 0; }

/* action plan: phases on a timeline (time in the rail, "Phase N" from a counter) */
.ar-article .ar-steps { list-style: none; padding: 0; margin: 26px 0 0; counter-reset: phase; }
.ar-article .ar-phase { counter-increment: phase; position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "k h" "k l"; column-gap: 22px; margin: 0; padding: 0 0 26px; }
.ar-phase::before { content: ""; position: absolute; left: 6px; top: 24px; bottom: 2px; width: 1px; background: var(--rule-2); }
.ar-phase:last-child::before { display: none; }
.ar-phase::after { content: ""; position: absolute; left: 0; top: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--amber-field); box-shadow: 0 0 0 4px var(--amber-soft); }
.ar-article .ar-phase > h3 { grid-area: h; margin: 0 0 8px; font-size: 19px; }
.ar-article .ar-phase-when { grid-area: k; margin: 0; padding-left: 24px; font-size: 14.5px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.ar-phase-when::before { content: "Phase " counter(phase); display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ar-checks { grid-area: l; min-width: 0; }
.ar-article .ar-checks > ol, .ar-article .ar-checks > ul { margin: 0; }
.ar-checks li { font-size: 16.5px; line-height: 1.6; }

/* when to get help: groups, most urgent first */
.ar-urgent { display: grid; gap: 12px; margin: 10px 0 1.1em; }
.ar-urgent-c { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 16px 18px 6px; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); border-left: 4px solid var(--rule-2); }
.ar-urgent-c.u0 { border-left-color: var(--ink); }
.ar-urgent-c.u1 { border-left-color: var(--amber); }
.ar-article .ar-urgent-c h3 { margin: 0; font-size: 16.5px; line-height: 1.35; }
.ar-article .ar-urgent-c ul { margin: 0 0 10px; padding-left: 1.1em; }
.ar-urgent-c li { font-size: 16px; line-height: 1.55; margin: .2em 0 .45em; }

/* the slot frame every cross-sell sits in (objection builder, odds report, partner, referral, property report) */
[data-ar-slot] { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 22px; align-items: center; margin: 56px 0 0; padding: 18px; border-radius: var(--r-lg); background: var(--sheet);
  box-shadow: 0 0 0 1px var(--rule), 0 20px 44px -30px rgba(17, 18, 20, .3); scroll-margin-top: calc(var(--nav-clear) + 24px); }
[data-ar-slot] + [data-ar-slot] { margin-top: 20px; }
[data-ar-slot][data-ar-slot-form] { grid-template-columns: minmax(0, 1fr); padding: 22px 24px 24px; }
.ar-slot-art { border-radius: 12px; }
.ar-article [data-ar-slot] h3 { margin: 0 0 8px; font-size: 20px; }
.ar-article [data-ar-slot] p { font-size: 16px; line-height: 1.55; margin-bottom: 14px; }
.ar-article [data-ar-slot] .ar-slot-fine { font-size: 13.5px; color: var(--ink-3); }
.ar-slot-body { min-width: 0; }
.ar-slot-body .btn { color: var(--paper); }
.ar-lead-form { display: grid; gap: 12px; margin-top: 6px; }
.ar-lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ar-lead-form .field span { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ar-lead-form .field small { font-weight: 400; color: var(--ink-3); }
.ar-lead-form .input:focus, .ar-lead-form .select:focus { border-color: var(--ink); }
.ar-upper { text-transform: uppercase; }
.ar-textarea { height: auto; min-height: 72px; padding-top: 10px; padding-bottom: 10px; resize: vertical; line-height: 1.5; }
.ar-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ar-consent { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ar-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: #111214; }
.ar-lead-form .btn { justify-self: start; }
.ar-article .ar-lead-status { margin: 0; min-height: 1.4em; font-size: 14.5px; color: var(--ink-3); }
.ar-lead-status[data-state="ok"] { color: var(--green-ink); }
.ar-lead-status[data-state="error"] { color: var(--amber-ink); font-weight: 500; }
/* Demand Radar: a quiet amber notice for the trade reader */
.pw-guide-radar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 28px 0 0; padding: 18px 22px; border-radius: var(--r-lg); background: var(--amber-wash); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35); }
.pw-guide-radar-body { flex: 1 1 300px; min-width: 0; }
.ar-article .pw-guide-radar p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.ar-article .pw-guide-radar .pw-guide-radar-tag { margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); }
.pw-guide-radar strong { font-variant-numeric: tabular-nums; }
.pw-guide-radar-cta { flex-shrink: 0; background: var(--sheet); }

/* FAQ */
.ar-faq h2 { margin-bottom: 8px; }
.ar-q { border-bottom: 1px solid var(--rule); }
.ar-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: start; gap: 18px; padding: 20px 0; }
.ar-q summary::-webkit-details-marker { display: none; }
.ar-article .ar-q-h { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -0.012em; color: var(--ink); }
.ar-q summary:hover .ar-q-h { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.ar-q summary i { flex-shrink: 0; position: relative; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.ar-q summary i::before, .ar-q summary i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13.25px; height: 1.5px; border-radius: 1px; background: var(--ink-2); transition: transform var(--dur-quick) var(--ease-out); }
.ar-q summary i::after { transform: rotate(90deg); }
.ar-q[open] summary i::after { transform: rotate(0deg); }
.ar-a { padding: 0 44px 20px 0; }
.ar-a p { font-size: 17px; }
.ar-a > :last-child { margin-bottom: 0; }
.ar-disclaimer { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.55; color: var(--ink-3); scroll-margin-top: calc(var(--nav-clear) + 24px); }
.ar-article .ar-disclaimer { font-size: 14px; }
.ar-article .ar-disclaimer b { color: var(--ink-2); }

/* case files keep their own components (/assets/planning-nightmare-files.css) in the reading column's type */
.ar-article.is-case-file .pw-nightmare-file { --ink: #111214; --muted: #3F434A; --amber: #F59E0B; --blue: #111214; --cyan: #FFBE3B; margin-bottom: 0; }
.ar-article.is-case-file .pw-nightmare-file .ar-n { font-size: 13px; line-height: 1; color: var(--amber-ink); margin: 56px 0 10px; }
.ar-article.is-case-file .pw-nightmare-file h2 { color: #111214; }
.ar-article.is-case-file .pw-nightmare-file p { font-size: inherit; line-height: inherit; color: var(--ink-2); }
.ar-article.is-case-file .pw-nightmare-file a { color: var(--ink); font-weight: 500; }
.ar-article.is-case-file .pw-nightmare-file h2 { margin-top: 0; }
.ar-article.is-case-file .pw-nightmare-file strong { font-weight: 600; }
.ar-article.is-case-file .pw-nightmare-file * { font-weight: inherit; }
.ar-article.is-case-file .pw-nightmare-file strong, .ar-article.is-case-file .pw-nightmare-file b, .ar-article.is-case-file .pw-nightmare-file h2, .ar-article.is-case-file .pw-nightmare-file h3 { font-weight: 600; }

/* related, essentials, near you */
.ar-more { padding-bottom: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); }
.ar-more-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin: clamp(40px, 5vw, 64px) 0 22px; }
.ar-more-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(27px, 2.5vw, 36px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.ar-ess-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ar-ess-list a { display: grid; gap: 10px; align-content: start; height: 100%; padding: 12px 12px 16px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); transition: background-color var(--dur-instant), transform var(--dur-quick) var(--ease-out); }
.ar-ess-list a:hover { background: var(--paper-3); transform: translateY(-2px); }
.ar-ess-n { font-family: var(--font-mono); font-size: 12px; color: var(--amber-ink); }
.ar-ess-art { border-radius: 10px; }
.ar-ess-t { display: grid; gap: 4px; }
.ar-ess-t b { font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; }
.ar-ess-t small { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.ar-near { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.ar-near-intro { margin: 14px 0 18px; color: var(--ink-2); max-width: 46ch; }
.ar-near-intro a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.ar-near-h { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.015em; margin-bottom: 8px; }
.ar-councils { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-councils a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule-2); font-weight: 500; font-size: 15px; color: var(--ink); }
.ar-councils a:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.ar-regions li a { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.ar-regions li:first-child a { padding-top: 4px; }
.ar-regions b { font-weight: 600; color: var(--ink); }
.ar-regions span { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ar-regions a:hover b { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.ar-regions .ar-regions-all a { display: inline-flex; border: 0; padding-top: 16px; }
.ar-discuss:has(.pw-comments:empty) { display: none; }
.ar-discuss { padding-bottom: clamp(40px, 5vw, 72px); }
.page-guide .pw-comments { max-width: 760px; margin: 0; padding: 0; }
.page-guide .pw-comments .pw-c-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.025em; color: var(--ink); }
.page-guide .pw-comments .pw-c-h span { font-weight: 400; color: var(--ink-3); }
.page-guide .pw-comments .pw-c-btn { background: var(--ink); border-radius: 12px; font-weight: 600; }
.page-guide .pw-comments .pw-c-who { font-weight: 600; }
.page-guide .pw-comments .pw-c-signin a { font-weight: 600; text-decoration-color: var(--amber); }
.page-guide .pw-comments .pw-c-msg { color: var(--amber-ink); }

/* ============ 4 · Responsive ============ */
@media (max-width: 1180px) { .ar-ess-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .gx-hero-in, .ar-head-grid, .gx-close-in, .ar-near { grid-template-columns: 1fr; }
  .gx-hero-art { max-width: 620px; width: 100%; }
  .ar-hero-art { max-width: 620px; width: 100%; }
  .ar-body { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: calc(590px + var(--gutter) * 2); }
  .ar-body.is-short { grid-template-columns: minmax(0, 1fr); }
  .ar-toc { display: none; }
  .ar-toc-m { display: block; margin: 0 0 24px; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
  .ar-toc-m summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 600; font-size: 16px; color: var(--ink); }
  .ar-toc-m summary::-webkit-details-marker { display: none; }
  .ar-toc-m summary span { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--ink-3); }
  .ar-article .ar-toc-m ol { list-style: none; margin: 0; padding: 0 16px 8px; }
  .ar-article .ar-toc-m li { margin: 0; padding: 0; }
  .ar-article .ar-toc-m a { display: grid; grid-template-columns: 28px 1fr; gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 16px; line-height: 1.4; }
  .ar-toc-m a span { font-family: var(--font-mono); font-size: 12px; color: var(--amber-ink); padding-top: 2px; }
  .gx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* article tables fit a phone: tighter cells, and long words hyphenate rather than push the last column out */
  .ar-article table { font-size: 15px; -webkit-hyphens: auto; hyphens: auto; }
  .ar-article th, .ar-article td { padding: 9px 8px; }
  .gx-doors { grid-template-columns: 1fr; }
  .gx-search { height: 56px; }
  .gx-search kbd { display: none; }
  .gx-hero-art { aspect-ratio: 1 / 1.02; }
  .gx-sheet { width: 62%; }
  .gx-sheet span { font-size: 11.5px; padding: 6px 10px; }
  .gx-featured { grid-template-columns: 1fr; }
  .gx-featured-art { border-right: 0; border-bottom: 1px solid rgba(17, 18, 20, .1); }
  .gx-grid, .gx-grid--4 { grid-template-columns: 1fr; gap: 10px; }
  .gx-card { grid-template-columns: 108px minmax(0, 1fr); grid-template-rows: none; }
  .gx-card-art { aspect-ratio: auto; height: 100%; min-height: 92px; border-bottom: 0; border-right: 1px solid var(--rule); }
  .gx-card-art .ga-tag { display: none; }
  .gx-card-body { padding: 12px 14px 13px; gap: 5px; }
  .gx-card-t, .gx-grid--4 .gx-card-t { font-size: 16.5px; line-height: 1.25; }
  .gx-card-d { display: none; }
  .gx-grid--4 .gx-card-body { padding: 12px 14px 13px; }
  .gx-cases-grid { grid-template-columns: 1fr; }
  .gx-topic-head { flex-direction: column; align-items: stretch; }
  .gx-more { width: 100%; }
  .gx-pc { grid-template-columns: 1fr; }
  .gx-sort { display: none; }
  .pw-dc[data-variant="site"] .pw-dc-form { grid-template-columns: 1fr; }
  .ar-article { font-size: 17px; line-height: 1.66; }
  .ar-answer { padding: 18px 18px 20px; }
  .ar-answer p { font-size: 17.5px; }
  .ar-article .ar-facts-list { grid-template-columns: 1fr; padding: 4px 18px 14px; }
  .ar-facts-head { padding: 18px 18px 0; }
  .ar-facts-fig { padding: 14px 18px 4px; }
  .ar-prompt { grid-template-columns: 1fr; padding: 16px; }
  .ar-prompt-art { display: none; }
  .ar-prompt-form { flex-wrap: wrap; }
  .ar-prompt-form .btn { width: 100%; }
  .ar-article .ar-phase { grid-template-columns: 1fr; grid-template-areas: "k" "h" "l"; row-gap: 6px; }
  .ar-article .ar-phase > h3, .ar-checks { margin-left: 24px; }
  .ar-urgent-c { grid-template-columns: 1fr; gap: 8px; }
  [data-ar-slot] { grid-template-columns: 1fr; padding: 18px; }
  .ar-slot-art { display: none; }
  .ar-lead-row { grid-template-columns: 1fr; }
  .ar-a { padding-right: 0; }
  .ar-article .ar-q-h { font-size: 17.5px; }
  .ar-regions li a { grid-template-columns: 1fr; gap: 2px; }
  .ar-more-head { flex-direction: column; align-items: start; }
  .ar-ess-list { grid-template-columns: 1fr; gap: 8px; }
  .ar-ess-list a { grid-template-columns: 22px 92px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; }
  .ar-h1 { font-size: clamp(32px, 9vw, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .gx-card, .gx-case, .gx-sheet, .gx-featured, .ar-ess-list a, .gx-door, .gx-chip { transition: none; }
  .gx-card:hover, .gx-case:hover, .gx-featured:hover, .ar-ess-list a:hover { transform: none; }
  .gx-sheet:hover { transform: none; }
  .gx-results.anim .gx-card { animation: none; }
  .ar-article.is-case-file .pw-nightmare-file *, .ar-article.is-case-file .pw-nightmare-file *::before { animation: none !important; }
}

/* keyboard focus: a clear ring on everything that takes it (cards and chips draw their own edges with box-shadow) */
.page-guides main :is(a, button, summary, select):focus-visible,
.page-guide main :is(a, button, summary, select):focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 2px; }
.page-guides main .theme-amber :is(a, button, summary, select):focus-visible,
.page-guide main .theme-amber :is(a, button, summary, select):focus-visible,
.gx-featured:focus-visible { outline-color: #111214; }
.gx-cases :is(a):focus-visible { outline-color: #FFB52E; }
.page-guide main h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }