/* Forest Cover: editorial layout, same language as Forest Overview. φ type steps (14 · 22.6 · 36.6 · 59),
   spacing 4/8/12/20/32/52/84, 1px rules, corners 8px; every figure is drawn in the forest palette (no pie charts). */
.fx-sec { padding: 84px 0 !important; background: #f9f6ef; }
.fx-wrap { margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.fx-h1 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(30px, 3vw, 44px); line-height: .98; letter-spacing: -.04em; color: #0a2e1a; text-wrap: balance; }
.fx-h2 { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.02; letter-spacing: -.035em; color: #0a2e1a; text-wrap: balance; }
.fx-h3 { margin: 0 0 20px; font-size: 22px; font-weight: 700; color: #0a2e1a; }
.fx-light { color: #fff; }
.fx-sub { margin: 12px 0 0; font-size: 14px; color: #4b5563; max-width: 52ch; }
.fx-body p, .fx-cols p { margin: 0 0 12px; font-size: 14px; line-height: 1.618; color: #1f2a22; }
.fx-body strong, .fx-cols strong { color: #1a472a; }
.fx-cols { margin-top: 32px; columns: 2; column-gap: 52px; }
.fx-light-text p { color: rgba(255, 255, 255, .82); }
.fx-light-text strong { color: #fff; }
.fx-note { margin: 12px 0 0; display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 1; color: rgba(15, 28, 16, .42); }
.fx-note::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 11px; height: 11px; border-radius: 50%; border: 1px solid currentColor; font: 700 7px/1 'Plus Jakarta Sans', sans-serif; }
.fx-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.fx-split { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: 52px; align-items: center; }
.fx-col-text .fx-body { margin-top: 32px; }

/* at a glance: ruled figures */
.fx-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 1px solid rgba(15, 28, 16, .14); border-bottom: 1px solid rgba(15, 28, 16, .14); }
.fx-figure { display: flex; flex-direction: column; gap: 8px; padding: 32px 20px 32px 0; }
.fx-figure + .fx-figure { padding-left: 20px; border-left: 1px solid rgba(15, 28, 16, .14); }
.fx-figure-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: #0a2e1a; }
.fx-figure-label { font-size: 13px; font-weight: 600; color: #4b5563; }
.fx-figure-line { display: none; height: 4px; border-radius: 4px; background: rgba(15, 28, 16, .1); overflow: hidden; margin-top: 4px; }
.fx-figure-line span { display: block; height: 100%; width: var(--v); background: #1a472a; border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.fx-figure-line.is-in span { transform: none; }

/* shared legend keys */
.fx-key { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 12px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
    font: inherit; color: #0f1c10; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), opacity 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-key:hover, .fx-key.is-on { background: rgba(26, 71, 42, .07); }
.fx-key:focus-visible, .fx-seg:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.fx-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; }
.fx-key-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; line-height: 1; }
.fx-key-label { font-size: 13px; font-weight: 600; color: #4b5563; }
[data-fx-pick].has-pick .fx-key:not(.is-on) { opacity: .45; }

/* forest types: a deep green page with proportional tiles */
.fx-types { background: #0a2e1a; }
.fx-types:has(+ .fx-types-chart), .fx-types + .fx-types-chart { }
.fx-types-chart { padding-top: 0 !important; }
.fx-tiles { display: flex; gap: 8px; height: clamp(260px, 22vw, 320px); }
.fx-tile { --ink: rgba(0, 0, 0, .22); position: relative; overflow: hidden; isolation: isolate; flex: var(--g) 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 20px; border-radius: 8px; color: #fff; cursor: default;
    transition: flex-grow .5s cubic-bezier(.16, 1, .3, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); outline: none; }
.fx-tile:hover, .fx-tile:focus-visible, .fx-tile.is-open { flex-grow: calc(var(--g) * 1.6); }
.fx-tile:focus-visible { box-shadow: inset 0 0 0 2px #f1c40f; }
.fx-tile-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.fx-tile-label { font-size: 14px; font-weight: 600; line-height: 1.35; max-width: 22ch; }
.fx-type-1 { background: #1a472a; --ink: #3f7a57; } .fx-type-2 { background: #2d6a4f; --ink: #5c9a78; } .fx-type-3 { background: #6f9a7c; --ink: #9cc2a6; } .fx-type-4 { background: #e8dcae; color: #0a2e1a; --ink: #c9b97c; }
.fx-type-5 { background: #8fc9a3; color: #0a2e1a; }

/* tenure: 100 squares */
.fx-tenure { background: #f2ede1; }
.fx-own { min-width: 0; }
.fx-waffle { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
.fx-cell { aspect-ratio: 1; border-radius: 3px; transition: opacity 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
[data-fx-pick].has-pick .fx-cell:not(.is-on) { opacity: .2; }
[data-fx-pick].has-pick .fx-cell.is-on { transform: scale(1.08); }
.fx-own-1 { background: #c9a227; } .fx-own-2 { background: #1a472a; } .fx-own-3 { background: #6f9a7c; } .fx-own-4 { background: #a8a39a; } .fx-own-5 { background: #d6e6da; }
.fx-own-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 20px; }
.fx-own-keys .fx-key { justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.fx-own-keys .fx-key-label { flex: 1; }

/* councils: one card per council in its own tone (--tone background, --ink for the hills and the outlined number) */
.fx-councils-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.fx-council { --tone: #d6e6da; --ink: #1a472a; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    min-height: 240px; padding: 24px 24px 32px; border-radius: 8px; background: var(--tone); overflow: hidden; isolation: isolate; box-sizing: border-box;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms cubic-bezier(.16, 1, .3, 1); }
.fx-council:nth-child(3n + 2) { --tone: #ecdfb2; --ink: #8a6d12; }
.fx-council:nth-child(3n + 3) { --tone: #c8dccd; --ink: #0f3a22; }
.fx-council:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -24px rgba(10, 46, 26, .45); }
.fx-council-no { position: absolute; top: 8px; right: 20px; z-index: -1; font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 112px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ink); opacity: .28;
    transition: opacity 250ms cubic-bezier(.4, 0, .2, 1), transform 400ms cubic-bezier(.16, 1, .3, 1); }
.fx-council:hover .fx-council-no { opacity: .45; transform: translateY(-4px); }
.fx-council-hills { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; height: 46%; pointer-events: none;
    transform: translateY(8px); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
.fx-council-hills .fx-hill-back { fill: var(--ink); opacity: .10; }
.fx-council-hills .fx-hill-front { fill: var(--ink); opacity: .16; }
.fx-council:hover .fx-council-hills { transform: translateY(0); }
.fx-council-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink);
    font-size: 18px; box-shadow: 0 4px 12px -6px rgba(10, 46, 26, .35);
    transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-council:hover .fx-council-badge { background: #0a2e1a; color: #f1c40f; }
.fx-council-text { display: flex; flex-direction: column; gap: 8px; }
.fx-council-kicker { align-self: flex-start; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .6);
    font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.fx-council-name { margin: 0; max-width: 18ch; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; color: #0a2e1a; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) {
    .fx-council, .fx-council-no, .fx-council-hills { transition: none; }
    .fx-council:hover, .fx-council:hover .fx-council-no, .fx-council:hover .fx-council-hills { transform: none; }
}

/* Supreme Court orders */
.fx-legal { background: #f2ede1; }   /* not deep green: the footer below is */
.fx-orders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 52px; margin-top: 32px; }
.fx-order { padding-top: 20px; border-top: 1px solid rgba(15, 28, 16, .14); }
.fx-order-date { display: block; font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: #0a2e1a; }
.fx-order-date::after { content: ""; display: block; width: 32px; height: 2px; margin: 20px 0; background: #f1c40f; }
.fx-order-text p { margin: 0 0 12px; font-size: 14px; line-height: 1.618; color: #1f2a22; }
.fx-order-text strong { color: #1a472a; }

@media (max-width: 900px) {
    .fx-sec { padding: 52px 0 !important; }
    .fx-types-chart { padding-top: 0 !important; }
    .fx-wrap { padding: 0 20px; }
    html body .fx-split { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }
    .fx-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .fx-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-figure, .fx-figure + .fx-figure { padding: 20px 12px; border-left: 0; }
    .fx-figure:nth-child(even) { border-left: 1px solid rgba(15, 28, 16, .14); }
    .fx-figure:nth-child(n+3) { border-top: 1px solid rgba(15, 28, 16, .14); }
    .fx-cols { columns: 1; }
    .fx-tiles { flex-direction: column; height: auto; }
    .fx-tile { flex: none; min-height: 96px; flex-direction: row; align-items: center; gap: 20px; }
    .fx-tile:hover, .fx-tile:focus-visible { flex-grow: 0; }
    .fx-waffle { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .fx-own-keys { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .fx-tile { transition: none !important; animation: none !important; }
}

/* forest type landscapes: drawn in the tile's ink tone behind the text; still until the tile opens */
.fx-tile > .fx-tile-num, .fx-tile > .fx-tile-label { position: relative; z-index: 1; }
.fx-scene { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; fill: var(--ink); pointer-events: none;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1); transform-origin: bottom; }
.fx-tile:hover .fx-scene, .fx-tile:focus-visible .fx-scene, .fx-tile.is-open .fx-scene { transform: scale(1.06); }
.fx-ground { opacity: .7; }
.fx-sway, .fx-swell, .fx-blade { transform-box: fill-box; transform-origin: 50% 100%; }
.fx-leaf, .fx-bloom { opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .fx-tile:is(:hover, :focus-visible, .is-open) .fx-sway { animation: fxSway 2.6s ease-in-out calc(var(--i) * -.37s) infinite; }
    .fx-tile:is(:hover, :focus-visible, .is-open) .fx-swell { animation: fxSwell 3s ease-in-out calc(var(--i) * -.6s) infinite; }
    .fx-tile:is(:hover, :focus-visible, .is-open) .fx-blade { animation: fxBlade 1.8s ease-in-out calc(var(--i) * -.09s) infinite; }
    .fx-tile:is(:hover, :focus-visible, .is-open) .fx-leaf { animation: fxFall 3.2s cubic-bezier(.45, 0, .9, .6) calc(var(--i) * .27s) infinite; }
    .fx-tile:is(:hover, :focus-visible, .is-open) .fx-bloom { animation: fxBloom 2.4s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .18s) infinite alternate; }
}
@keyframes fxSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes fxSwell { 0%, 100% { transform: scale(1) rotate(-1.5deg); } 50% { transform: scale(1.07) rotate(1.5deg); } }
@keyframes fxBlade { 0%, 100% { transform: skewX(-12deg); } 50% { transform: skewX(12deg); } }
/* a leaf drops under gravity (accelerating ease), drifting sideways and spinning, and fades out on the ground */
@keyframes fxFall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    10% { opacity: 1; }
    45% { transform: translate(calc(var(--dx) * .6), 24px) rotate(160deg); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), 62px) rotate(380deg); }
}
@keyframes fxBloom { from { opacity: 0; transform: translateY(10px) scale(.4); } to { opacity: 1; transform: none; } }




/* ── Overview, Quality, Districts and Maps: simple and calm. Golden-ratio splits, soft cream panels, slim bars,
   figures in Roboto, nothing oversized. ── */
.fx-meter { display: block; height: 6px; border-radius: 999px; background: rgba(15, 28, 16, .08); overflow: hidden; }
.fx-meter span { display: block; height: 100%; width: var(--v); border-radius: 999px; background: #1a472a; transform: scaleX(0); transform-origin: left;
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.is-in .fx-meter span { transform: none; }

/* quality: one slim bar and its classes */
.fx-quality { background: #f2ede1; }
.fx-q-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.fx-q-total { margin: 0; display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: #4b5563; }
.fx-q-total span { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 500; letter-spacing: -.02em; color: #1a472a; }
.fx-q-bar { display: flex; gap: 4px; height: 20px; }
.fx-q-seg { flex: var(--g) 1 0; min-width: 4px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; transition: opacity 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-q-seg.is-on { transform: scaleY(1.4); }
.fx-q-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 32px; }
.fx-q-key { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 0; border-radius: 8px; background: #f9f6ef; text-align: left; font: inherit; cursor: pointer;
    transition: opacity 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-q-key:active { transform: translateY(1px); }
.fx-q-key:focus-visible, .fx-q-seg:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.fx-q-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 500; line-height: 1; color: #0a2e1a; }
.fx-q-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #4b5563; }
.fx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
[data-fx-pick].has-pick .fx-q-seg:not(.is-on), [data-fx-pick].has-pick .fx-q-key:not(.is-on) { opacity: .4; }
.fx-tone-1 { background: #0a2e1a; } .fx-tone-2 { background: #1a472a; } .fx-tone-3 { background: #6f9a7c; }
.fx-tone-4 { background: #c9bb85; } .fx-tone-5 { background: #d3ccbb; } .fx-tone-6 { background: #d6e6da; }

/* maps: head 38.2 | cards 61.8 */
.fx-maps { background: #f9f6ef; }
.fx-m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fx-m-card { margin: 0; padding: 12px; border-radius: 8px; background: #f2ede1; cursor: zoom-in; outline: none;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms cubic-bezier(.16, 1, .3, 1); }
.fx-m-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(10, 46, 26, .45); }
.fx-m-card:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.fx-m-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 4px; background: #fff; }   /* a map is never cropped */
.fx-m-card figcaption { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 20px 8px 8px; }
.fx-m-text { display: flex; flex-direction: column; gap: 4px; }
.fx-m-card strong { font-size: 20px; color: #0a2e1a; }
.fx-m-text > span { font-size: 14px; color: #4b5563; }
.fx-m-card em { flex: none; font-style: normal; font-size: 14px; font-weight: 600; color: #1a472a; }
.fx-m-card:hover em { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
    .fx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .fx-d-row { grid-template-columns: minmax(0, 1fr) auto !important; }
    .fx-d-track { grid-column: 1 / -1; grid-row: 2; }
    html body .fx-ov, html body .fx-d { grid-template-columns: minmax(0, 1fr) !important; gap: 32px; }
    .fx-m-card figcaption { flex-direction: column; align-items: flex-start; gap: 8px; }
    .fx-q-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .fx-q-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { html body .fx-m-grid { grid-template-columns: minmax(0, 1fr) !important; } }
@media (prefers-reduced-motion: reduce) { .fx-meter span, .fx-d-track > span { transform: none; transition: none; } }

/* overview: text 61.8 | map card 38.2, then the figures as one row (the share 1.618 wide) */
.fx-ov { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 84px; align-items: center; }
.fx-ov-body { margin-top: 20px; max-width: 66ch; }
.fx-ov-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #1f2a22; }
.fx-ov-body p:first-child { font-size: 18px; }
.fx-ov-body strong { color: #1a472a; }
.fx-panel { padding: 12px; border-radius: 8px; background: #f2ede1; }
.fx-panel-map { margin: 0; cursor: zoom-in; outline: none; transition: transform 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-panel-map:hover { transform: translateY(-2px); }
.fx-panel-map:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.fx-panel-map img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.fx-panel-map figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px 4px; font-size: 13px; color: #4b5563; }
.fx-panel-map figcaption span { font-weight: 600; color: #1a472a; }
.fx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 52px; }
/* the four figures: equal sand cards; under the mouse a card lifts and a soft light follows the pointer (--px/--py, forest_cover.js) */
.fx-fact { --px: 50%; --py: 50%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 148px; box-sizing: border-box;
    padding: 20px 24px; border-radius: 8px; background: #f2ede1; overflow: hidden; isolation: isolate;
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms cubic-bezier(.16, 1, .3, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-fact::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
    background: radial-gradient(240px circle at var(--px) var(--py), rgba(255, 255, 255, .75), transparent 70%); transition: opacity 250ms cubic-bezier(.4, 0, .2, 1); }
.fx-fact:hover { transform: translateY(-4px); background: #ece5d3; box-shadow: 0 20px 40px -24px rgba(10, 46, 26, .4); }
.fx-fact:hover::before { opacity: 1; }
.fx-fact-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: clamp(30px, 2.4vw, 38px); font-weight: 500;
    line-height: 1; letter-spacing: -.02em; color: #0a2e1a; }
.fx-fact-label { font-size: 14px; font-weight: 600; color: #4b5563; }
@media (prefers-reduced-motion: reduce) { .fx-fact { transition: none; } .fx-fact:hover { transform: none; } }
.fx-overview .fx-note { margin-top: 12px; }

/* districts: head 38.2 | one bar list 61.8, with the state average marked */
.fx-d { display: grid; grid-template-columns: minmax(0, 38.2fr) minmax(0, 61.8fr); gap: 84px; align-items: start; }
.fx-d-key { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.fx-d-key[hidden] { display: none; }
.fx-d-key p { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #1f2a22; }
.fx-d-swatch { width: 20px; height: 8px; border-radius: 999px; background: #a9c7b1; flex: none; }
.fx-d-swatch.is-above { background: #1a472a; }
.fx-d-swatch.is-avg { width: 2px; height: 16px; border-radius: 1px; margin: 0 9px; background: #c9a227; }
.fx-d-summary { margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: #0a2e1a; }
.fx-d-summary b { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-weight: 500; }
.fx-d-panel { padding: 20px 32px; border-radius: 8px; background: #f2ede1; }
.fx-d-list { --avg: -10%; list-style: none; margin: 0; padding: 0; }
.fx-d-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 64px; gap: 8px 20px; align-items: center; padding: 8px 0; }
.fx-d-name { font-size: 14px; font-weight: 600; color: #0f1c10; }
.fx-d-track { position: relative; height: 10px; border-radius: 999px; background: rgba(15, 28, 16, .07); }
.fx-d-track > span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 999px; background: #a9c7b1;
    transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.fx-d-row.is-above .fx-d-track > span { background: #1a472a; }
.fx-d-list.is-in .fx-d-track > span { transform: none; }
.fx-d-track::after { content: ""; position: absolute; left: var(--avg); top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 1px; background: #c9a227; }
.fx-d-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; text-align: right; color: #0a2e1a; }
.fx-d-row:hover .fx-d-name { color: #1a472a; }
@media (max-width: 900px) { .fx-d-panel { padding: 12px 20px; } }

/* quality with the maps beside it: 61.8 | 38.2 */
.fx-qm { display: grid; grid-template-columns: minmax(0, 61.8fr) minmax(0, 38.2fr); gap: 84px; align-items: start; }
.fx-qm .fx-q-head { flex-direction: column; align-items: flex-start; gap: 20px; }
.fx-qm .fx-q-keys { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.fx-q-maps { display: flex; flex-direction: column; gap: 12px; }
/* the dark forest panel beside the chart: the photo under a deep green wash, as tall as the chart beside it */
.fx-qm:has(> .fx-q-photo) { align-items: stretch; }
.fx-q-photo { position: relative; margin: 0; min-height: 360px; border-radius: 8px; overflow: hidden; background: #0a2e1a; }
.fx-q-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8);
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.fx-q-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10, 46, 26, .25) 0%, rgba(10, 46, 26, .55) 55%, rgba(10, 46, 26, .85) 100%); }
.fx-qm:hover .fx-q-photo img { transform: scale(1.04); }
@media (max-width: 900px) { .fx-q-photo { min-height: 0; height: min(60vw, 320px); } }
@media (prefers-reduced-motion: reduce) { .fx-q-photo img { transition: none; } .fx-qm:hover .fx-q-photo img { transform: none; } }
.fx-q-maps .fx-h3 { margin: 0 0 8px; }
.fx-q-map { margin: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 12px; border-radius: 8px; background: #f9f6ef;
    cursor: zoom-in; outline: none; transition: transform 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-q-map:hover { transform: translateY(-2px); }
.fx-q-map:focus-visible { outline: 2px solid #1a472a; outline-offset: 2px; }
.fx-q-map img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #fff; }
.fx-q-map figcaption { display: flex; flex-direction: column; gap: 4px; }
.fx-q-map strong { font-size: 16px; color: #0a2e1a; }
.fx-q-map span { font-size: 13px; line-height: 1.4; color: #4b5563; }
.fx-q-map em { margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 600; color: #1a472a; }
@media (max-width: 900px) { html body .fx-qm { grid-template-columns: minmax(0, 1fr) !important; gap: 52px; } .fx-q-map { grid-template-columns: 104px minmax(0, 1fr); } }

/* ── Page rhythm as on the Territorial and Flora & Fauna pages: one cream page with a single deep-green band (forest
   types); sand is kept for the cards and panels inside it; sections of the same colour sit closer together. ── */
.fx-quality, .fx-tenure, .fx-legal, .fx-maps { background: #f9f6ef; }
.fx-q-key { background: #f2ede1; }
.fx-q-map { background: #f2ede1; }
.fx-tenure .fx-own { padding: 32px; border-radius: 8px; background: #f2ede1; }
.fx-order { padding: 20px; border-top: 0; border-radius: 8px; background: #f2ede1; transition: transform 150ms cubic-bezier(.4, 0, .2, 1), background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.fx-order:hover { transform: translateY(-2px); background: #ece5d3; }
.fx-order-date::after { margin: 12px 0; }
/* cream sections that follow another cream section: no double gap */
.fx-overview + .fx-quality, .fx-quality + .fx-district, .fx-tenure + .fx-councils, .fx-councils + .fx-legal, .fx-legal + .fx-maps,
.fx-types-chart + .fx-tenure ~ .fx-councils { padding-top: 20px !important; }
.fx-legal:has(+ .fx-maps) { padding-bottom: 32px !important; }   /* Maps closes the page right after the orders */