/* ============================================================
MONDUL — stylesheet
Colour, type and layout live here. Edit with care.
============================================================ */
/* ------------------------------------------------------------
THE PALETTE, AND WHY IT IS THIS PALETTE
Mondulkiri is not a green province. It is a green-and-red one,
and the red is the part everyone who has been there remembers.
The plateau sits on Quaternary basalt, so exposed soil and every
unsealed road run a strong rust-ochre; the dust gets on shoes,
on motorbikes, on the sides of houses. Above that: evergreen
forest in the valleys, rolling grassland that turns straw-gold
from November to May, and the morning fog that makes Sen
Monorom the coolest provincial town in Cambodia.
The site used to be green and gold only. That is the palette of
any conservation NGO anywhere. Adding laterite is what makes it
this place and not a generic one.
Bunong weaving corroborates it — black or indigo ground, banded
with red, white and yellow. Warm accents on a dark field is the
local visual grammar, not an imported one.
HOW MUCH RED — this was overdone once and then pulled back.
The first pass ran the crests to #C9552B and put a clay button
and an orange badge on top of it, and the page read as a red
page with some green in it. That is not the province either;
from any hilltop in Mondulkiri you are looking at green, with
red where the ground has been cut. So the warm range now starts
higher up the elevation ramp, ends in a muted sienna rather than
a fire red, and the warm light in the hero sits at 16% instead
of 30%. The rule to hold: red is what the land shows where it
has been exposed, so it should be the exception in the frame.
If a screenshot reads warm before it reads green, it has gone
too far again.
------------------------------------------------------------ */
:root{
--forest:#0F2E24;--deep:#143A2D;--emerald:#1E7A5A;--leaf:#4CAF7D;--mint:#C8E6D4;
--gold:#E9A83C;--amber:#F2C673;--terra:#C85F33;--dusk:#7B9CB5;--plum:#6B4E71;
/* red earth — the province's signature, absent until now */
--laterite:#96543A;--rust:#A9663C;--clay:#C89268;--dust:#F0DDCB;
/* dry-season plateau grass, and Sen Monorom mist */
--grass:#B98F35;--straw:#D9B96B;--fog:#AFC3BA;
--cream:#FFFDF8;--sand:#F7F0E0;--paper:#FFFFFF;
/* ---- PAINT AND INK ARE DIFFERENT JOBS ----
Every colour here is drawn from the province, and that part was
already right. What was wrong is that colours chosen as PAINT
were being used as TEXT. Laterite at full strength is the real
red of the roads and is correct on a card; at 4.02:1 it is not
readable as body copy. Grass gold is the dry plateau and is
correct on a dark band; on cream it measures 2.04:1, which is
not a colour, it is a rumour.
So each gets an -ink sibling: the same hue walked down until it
clears 4.5:1 on cream AND on sand, because both are used as page
grounds and a token that passes on one and fails on the other is
a token that fails. The paint values are untouched — fills and
borders carry no contrast requirement. */
--terra-ink:#8A4526; /* road laterite — 6.98 cream / 6.25 sand */
--gold-ink:#7A5A14; /* grass in shade — 6.26 / 5.60 */
--leaf-ink:#2E6B45; /* canopy green — 6.25 / 5.60 */
--ink:#131E19;
/* --muted was #65756B: 4.79 on cream but 4.29 on sand, so it failed
as body text on every page with a sand ground. Moss on the shaded
side of a trunk — darker than the grey it replaces. */
--muted:#46584D;--line:#E7E0CE;
--sh:0 24px 64px -20px rgba(15,46,36,.30);
--shS:0 6px 20px -8px rgba(15,46,36,.18);
--r:18px;--rL:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* No `scroll-behavior:smooth`. The browser's own curve is close to
linear over a long jump — you arrive with no deceleration and have
to re-find your place. motion.js animates every in-page jump on
the site's own easing instead, and turns this off explicitly so
the two cannot fight. */
html{scroll-padding-top:82px}
body{font-family:'Inter','Noto Sans Khmer',system-ui,sans-serif;background:var(--cream);color:var(--ink);
line-height:1.68;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-size:16px}
body.km{font-family:'Noto Sans Khmer','Inter',sans-serif;line-height:2.0}
body.noscroll{overflow:hidden}
/* ---- THE LETTERFORMS ----
Fraunces was already loaded here but running at its flattest. It
carries two axes beyond weight and optical size: SOFT rounds the
terminals, and WONK swaps in the idiosyncratic glyph set — the
single-storey g, the curved leg on the R, the tilted terminals
that give it a cut-by-hand character rather than a drawn-on-a-grid
one. The old font request did not ask for either, so the site was
rendering the most generic version of a deliberately peculiar
typeface.
opsz is set to the display end as well. Fraunces is an optical-size
design: at 144 the contrast opens up and the serifs sharpen, which
is what a headline wants and what a paragraph does not. */
.serif{font-family:'Fraunces',Georgia,serif;
font-variation-settings:'SOFT' 60,'WONK' 1,'opsz' 120;
font-optical-sizing:auto}
/* Khmer keeps the SANS face everywhere except the hero headline.
Khmer serif forms are less familiar in running text and legibility
outranks matching a Latin voice — and Phearun reads this language
natively, so this is the one change here he should overrule if it
looks wrong to him. */
body.km .serif{font-family:'Noto Sans Khmer',sans-serif;font-variation-settings:normal}
body.km .vt-title{font-family:'Noto Serif Khmer','Noto Sans Khmer',serif}
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.narrow{max-width:860px}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--forest);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:8px;top:8px}
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:400;
background:linear-gradient(90deg,var(--emerald),var(--grass),var(--rust));transition:width .12s}
/* ---------- NAV ----------
The bar runs the full width of the window, not the 1200px column
the rest of the page uses. The wordmark sits on the left edge
and the controls on the right edge, and everything freed up in
between goes to the links — which is what makes room for the
Spatial Plan, Dossier and Legal Register to sit in the bar
instead of hiding in a menu. */
/* The backdrop blur is cheaper at a smaller radius, and the bar
sits directly over the animating hero — every frame the scene
moves, the blur behind a sticky element is recomputed. 10px
looks the same at this opacity and costs meaningfully less. */
nav{position:sticky;top:0;z-index:300;background:rgba(255,253,248,.93);backdrop-filter:blur(10px);
border-bottom:1px solid rgba(231,224,206,.8)}
nav .wrap{max-width:none;padding:0 22px}
.navin{display:flex;align-items:center;gap:12px;height:74px;min-width:0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.mark{width:38px;height:38px;flex-shrink:0}
/* ---- THE LOGO ----
Drawn, not set — the same grown letterforms as the hero, so the
brand in the bar and the province name in the picture are visibly
one hand. It ships as ONE file the ten pages share rather than the
same 10 KB of path data pasted into each of them.
Note the casing: the drawn set is lower-case by design, because
the bend and the taper are what make it read as growth and
capitals have neither. The literal MONDUL stays in the markup,
hidden, so anything reading the page still finds the brand. */
.logot{font-weight:800;font-size:1.2rem;letter-spacing:.04em;color:var(--forest);line-height:1;font-family:'Fraunces',serif}
/* Sized in px and vertically centred. At 1.5rem it rendered taller
than the bar and the crowns were sliced off by the header edge —
the viewBox carries 16 units of headroom above the cap line for
the twigs, so the mark is TALLER than its letters and cannot be
sized as if it were type. */
.logo-wm{display:block;height:30px;width:auto;margin:-3px 0 1px -2px}
@media(max-width:999px){ .logo-wm{height:26px} }
.logo-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The line under the wordmark. It was hidden below 1560px to make
room for the links; that was the wrong trade — it is the only
place the platform says what it is before you scroll. It is back
at every desktop width, and the bar simply absorbs the cost:
assets/motion.js measures what is left and moves the lowest
priority links into More if it has to. Below 1000px the burger
takes over anyway, so it only hides where nothing shows it. */
/* ---- THE STRAPLINE, TWO LINES ----
It was wrapping to four. max-width:26ch was never the constraint —
the brand sits in a flex row with .navlinks{margin-left:auto} and
was being SQUEEZED to about 11 characters, so the ch limit never
came into play. The fix is to stop the brand shrinking and then
give the line a real measure.
Sized in px rather than ch because the tracking (.1em) is not
counted by the ch unit, so a ch measure under-estimates the line
by roughly a sixth. */
.logo{flex:0 0 auto}
.logot small{display:block;font-weight:400;font-size:.6rem;color:#5C6B62;letter-spacing:.1em;
text-transform:uppercase;margin-top:3px;font-family:'Inter',sans-serif;
width:174px;max-width:none;line-height:1.4}
@media(max-width:999px){ .logot small{display:none} }
body.km .logot small{font-family:'Noto Sans Khmer',sans-serif;text-transform:none;letter-spacing:0}
/* NO overflow:hidden HERE.
It was load-bearing for the old bar: the measure-and-hide overflow
system compared scrollWidth against clientWidth, which only differ
when the box clips. That system is gone — the bar is four groups
that fit in every language.
Left in place it silently broke the replacement. A dropdown is
position:absolute inside this list, so an overflow:hidden ancestor
clips it to the height of the bar: the menu opens, aria-expanded
flips to true, the links are in the DOM and focusable — and
nothing appears. Every check passed because clipping is a layout
fact, and neither jsdom nor a markup scan does layout. */
.navlinks{display:flex;gap:17px;list-style:none;align-items:center;margin-left:auto;
min-width:0;flex-wrap:nowrap;overflow:visible}
.navlinks a{text-decoration:none;font-size:.845rem;font-weight:500;position:relative;padding:5px 0;white-space:nowrap}
body.km .navlinks a{font-size:.8rem}
body.zh .navlinks a{font-size:.86rem}
@media(max-width:1300px){ .navlinks{gap:13px} .navlinks a{font-size:.815rem} }
.navlinks a:after{content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--rust);transition:width .3s}
.navlinks a:hover:after,.navlinks a.active:after{width:100%}
.rt{display:flex;gap:8px;align-items:center;flex-shrink:0;margin-left:12px}
/* `.nsec` was the no-JavaScript fallback for the old flat bar and
its overflow menu. Both are gone — the bar is four groups now. */
.nsec{display:none}
/* The `.burger{display:flex}` that used to sit here was dead: an
identical-specificity `.burger{display:none}` fifteen lines below
overrode it at every width, so the burger was invisible on every
screen size. Combined with .navlinks being hidden below 900px,
that left a phone with no navigation control to tap at all. The
visibility now lives in ONE place, in the media query below. */
.iconbtn{width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line);background:var(--paper);
cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;color:var(--forest)}
.iconbtn:hover{border-color:var(--leaf);background:var(--mint)}
.langsel{position:relative}
.langbtn{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--paper);
border-radius:22px;padding:7px 13px;font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;color:var(--forest)}
.langbtn:hover{border-color:var(--leaf)}
.langmenu{position:absolute;top:calc(100% + 8px);right:0;background:var(--paper);border:1px solid var(--line);
border-radius:14px;box-shadow:var(--sh);overflow:hidden;min-width:150px;display:none;z-index:310}
.langmenu.open{display:block}
.langmenu button{display:flex;width:100%;align-items:center;gap:9px;border:0;background:none;padding:11px 16px;
font-family:inherit;font-size:.87rem;cursor:pointer;text-align:left;color:var(--ink);transition:.2s}
.langmenu button:hover{background:var(--sand)}
.langmenu button.on{background:var(--mint);font-weight:700}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:9px;
align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px}
.burger:hover{background:rgba(15,46,36,.06)}
.burger:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.burger span{display:block;width:22px;height:2px;background:var(--forest);border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mobmenu{position:fixed;inset:74px 0 0;background:var(--cream);z-index:290;padding:30px 26px;
transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto}
#mobmenu.open{transform:none}
#mobmenu a{display:block;padding:16px 0;font-size:1.15rem;font-weight:600;text-decoration:none;
border-bottom:1px solid var(--line);color:var(--forest)}
/* search */
#searchpanel{position:fixed;inset:0;background:rgba(15,46,36,.55);backdrop-filter:blur(6px);z-index:350;
display:none;padding:12vh 20px 20px}
#searchpanel.open{display:block}
.searchbox{max-width:700px;margin:0 auto;background:var(--paper);border-radius:var(--rL);box-shadow:var(--sh);overflow:hidden}
.searchbox input{width:100%;border:0;padding:24px 26px;font-family:inherit;font-size:1.1rem;color:var(--ink)}
.searchbox input:focus{outline:0}
#searchresults{max-height:52vh;overflow-y:auto;border-top:1px solid var(--line)}
.sres{display:block;padding:16px 26px;border-bottom:1px solid var(--line);text-decoration:none;transition:.2s;cursor:pointer}
.sres:hover{background:var(--sand)}
.sres b{display:block;color:var(--forest);font-size:.96rem;margin-bottom:3px}
.sres span{font-size:.83rem;color:var(--muted)}
.sres i{font-style:normal;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--terra-ink);font-weight:700}
/* ---------- HERO ----------
The hero is dark on purpose. The headline sits over a
generated topographic field, and the one thing that must never
depend on where that field happens to be bright is the type.
Near-black ground + white type = contrast that is structural
rather than something to be checked on every change. */
header{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;
background:#05130E;color:#EFE7DC}
/* Marker ink is warm bone, not mint. A survey sheet is drawn in
pigment, and warm ink over a dark forest ground is what puts the
red-earth family and the green field in the same room. */
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;color:#E8DCCB}
.heroimg{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1s}
.heroimg img{width:100%;height:100%;object-fit:cover}
.heroimg.has{opacity:.22}
/* a soft vignette down the left, so the type column always has
quiet ground under it no matter what the contours do */
header::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(100deg,rgba(4,10,7,.90) 0%,rgba(4,10,7,.72) 32%,rgba(5,12,8,.24) 58%,rgba(5,12,8,0) 78%)}
.hcontent{position:relative;z-index:3;padding:96px 0 124px}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(217,185,107,.09);
border:1px solid rgba(217,185,107,.30);color:#DEC38A;padding:8px 17px;border-radius:30px;
font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:26px;
backdrop-filter:blur(8px)}
body.km .badge,body.zh .badge{text-transform:none;letter-spacing:0}
.dot{width:7px;height:7px;border-radius:50%;background:#D9B96B;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
header h1{font-size:clamp(2.2rem,5.8vw,4.3rem);line-height:1.05;font-weight:700;letter-spacing:-.036em;
color:#fff;max-width:17ch;margin-bottom:26px;text-shadow:0 2px 30px rgba(0,0,0,.55)}
body.km header h1{line-height:1.45;max-width:21ch;font-size:clamp(1.65rem,4vw,2.8rem)}
body.zh header h1{line-height:1.32;max-width:19ch;letter-spacing:0}
/* The emphasised word takes dry-season grass; the rule under it
takes laterite. Gold on green-black separates far better than
the mint it replaced, and the pairing is the plateau itself —
grass over red earth. */
header h1 em{font-style:italic;color:#E9B979;position:relative;white-space:nowrap}
header h1 em:after{content:"";position:absolute;left:0;bottom:.03em;width:100%;height:.12em;background:var(--rust);
opacity:.9;border-radius:4px;transform:scaleX(0);transform-origin:left;animation:swipe 1.1s cubic-bezier(.4,0,.2,1) .9s forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.lede{font-size:clamp(1rem,1.55vw,1.16rem);color:#C8BEB0;max-width:56ch;margin-bottom:36px;line-height:1.72}
body.km .lede{line-height:1.98}
body.zh .lede{line-height:1.9}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:40px;text-decoration:none;
font-weight:600;font-size:.93rem;cursor:pointer;border:0;font-family:inherit;transition:.28s cubic-bezier(.4,0,.2,1)}
/* The hero's primary action is clay, not green. A green button on
a green-black ground has to fight the field behind it; the warm
one separates instantly and carries the same red earth as the
ridgelines. Outside the hero the primary stays forest — there
the ground is cream and green is the one that separates. */
.btn-p{background:#D2A06E;color:#1F1509;box-shadow:0 12px 34px -12px rgba(210,160,110,.55)}
.btn-p:hover{background:#E7BC8E;transform:translateY(-3px)}
.btn-s{background:rgba(255,255,255,.06);color:#EFE7DC;border:1.5px solid rgba(239,231,220,.34);backdrop-filter:blur(6px)}
.btn-s:hover{background:rgba(255,255,255,.15);border-color:#E9B979;transform:translateY(-3px)}
.btn-g{background:var(--gold);color:var(--forest)}
.btn-g:hover{background:var(--amber);transform:translateY(-3px)}
.btn .ar{transition:transform .28s}
.btn:hover .ar{transform:translateX(4px)}
/* buttons OUTSIDE the dark hero keep the light-ground treatment */
main .btn-s,section .btn-s,footer .btn-s{background:rgba(255,255,255,.8);color:var(--forest);
border:1.5px solid var(--forest)}
main .btn-s:hover,section .btn-s:hover,footer .btn-s:hover{background:var(--forest);color:#fff}
main .btn-p,section .btn-p,footer .btn-p{background:var(--forest);color:#fff}
main .btn-p:hover,section .btn-p:hover,footer .btn-p:hover{background:var(--emerald)}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:.72rem;
letter-spacing:.14em;text-transform:uppercase;color:rgba(232,220,203,.62);display:flex;flex-direction:column;
align-items:center;gap:8px;animation:bob 2.6s ease-in-out infinite}
body.km .scrollcue,body.zh .scrollcue{text-transform:none;letter-spacing:0}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
/* ---------- SHARED ---------- */
.rev{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.rev.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}
/* position:relative here carries the soft gradient seams that let
one section bleed into the next (see WATER in motion.css). It
lives in this file because only style.css may position a bare
landmark. */
section{padding:96px 0;position:relative}
.qfbar,footer{position:relative}
.alt{background:var(--sand)}
.dark{background:var(--forest);color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.71rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--terra);margin-bottom:14px}
body.km .eyebrow{text-transform:none;letter-spacing:.02em}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--terra);border-radius:2px}
.dark .eyebrow{color:var(--gold)}.dark .eyebrow:before{background:var(--gold)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem);font-weight:700;letter-spacing:-.03em;color:var(--forest);
margin-bottom:16px;line-height:1.16}
body.km h2{line-height:1.5}
.dark h2{color:#fff}
h3{font-size:1.3rem;font-weight:700;color:var(--forest);margin-bottom:12px;line-height:1.3}
.dark h3{color:#fff}
.sub{color:var(--muted);max-width:64ch;margin-bottom:50px;font-size:1.04rem}
.dark .sub{color:rgba(255,255,255,.72)}
p+p{margin-top:14px}
.body p{color:var(--muted)}
.slot{background:linear-gradient(135deg,#E8F2EA,#F5EDDC);display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:9px;color:var(--muted);text-align:center;padding:24px;font-size:.82rem;
border:1.5px dashed rgba(30,122,90,.3)}
.slot code{background:var(--paper);padding:3px 9px;border-radius:5px;font-size:.73rem;color:var(--emerald);border:1px solid var(--line)}
.dark .slot{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.55)}
.dark .slot code{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:var(--gold)}
/* quick facts */
/* ---- QUICK FACTS ----
This band was var(--forest) and the figures on it were ALSO
var(--forest): #0F2E24 text on #0F2E24, a contrast ratio of
1.00:1. Every number on the front page of a platform whose whole
promise is sourced numbers was painted the exact colour of its own
background, and had been for as long as the figure component has
existed. The colour was written for a light card and never
re-checked when it was dropped onto the dark bar.
The band is light now. That is not only a contrast fix: a near-
black slab across the page was the heaviest thing on it, and the
figures deserve air rather than a shout. */
.qfbar{background:linear-gradient(180deg,#FBF8EE 0%,#F4EFE0 100%);
padding:46px 0 40px;border-top:1px solid rgba(15,46,36,.09);
border-bottom:1px solid rgba(15,46,36,.09)}
/* six across is too tight for a number, a unit, a label AND a
source chip. Three by two gives each figure room to be read. */
.qfg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:30px 34px;text-align:left}
@media(max-width:820px){ .qfg{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }
@media(max-width:520px){ .qfg{grid-template-columns:1fr} }
.qf b{display:block;font-family:'Fraunces',serif;font-size:1.75rem;color:var(--forest);line-height:1.1}
.qf b i{font-style:normal;font-size:.85rem;opacity:.75;margin-left:2px}
.qf span{font-size:.76rem;color:var(--muted);margin-top:6px;display:block;line-height:1.4}
/* White at 34% was right when this band was dark forest. The band
was lightened two versions ago and this was left behind — 1.00:1,
invisible, on the very line that tells people every figure is
sourced. */
.qfnote{text-align:center;color:var(--muted);font-size:.78rem;margin-top:26px}
/* ---------- HUB ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.tab{background:var(--paper);border:1.5px solid var(--line);border-radius:30px;padding:9px 19px;font-size:.85rem;
font-weight:600;cursor:pointer;font-family:inherit;color:var(--muted);transition:.25s;white-space:nowrap}
.tab:hover{border-color:var(--leaf);color:var(--forest)}
.tab.on{background:var(--forest);color:#fff;border-color:var(--forest)}
.panel{display:none;animation:fadeIn .45s cubic-bezier(.4,0,.2,1)}
.panel.on{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--rL);padding:38px;box-shadow:var(--shS)}
.pcard h3{font-size:1.5rem;margin-bottom:18px}
.pcard .body{max-width:70ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.minicard{background:var(--sand);border-radius:var(--r);padding:22px;border-left:3px solid var(--leaf)}
.minicard strong{display:block;color:var(--forest);font-size:.98rem;margin-bottom:6px}
.minicard span{font-size:.87rem;color:var(--muted)}
.factpill{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--emerald);
border-radius:24px;padding:8px 16px;font-size:.83rem;font-weight:600;margin:4px 4px 0 0}
.callout{background:#FFF6E8;border:1px solid #F0DDB8;border-left:4px solid var(--gold);border-radius:12px;
padding:20px 24px;margin-top:26px;font-size:.92rem;color:#6B4E15}
.callout.warn{background:#FDEEE8;border-color:#F2CDBC;border-left-color:var(--terra);color:#8A3A16}
.callout strong{display:block;margin-bottom:5px;font-weight:700}
table{width:100%;border-collapse:collapse;margin-top:24px;font-size:.9rem}
th{text-align:left;padding:12px 14px;background:var(--forest);color:#fff;font-weight:600;font-size:.78rem;
letter-spacing:.07em;text-transform:uppercase}
body.km th{text-transform:none;letter-spacing:0}
th:first-child{border-radius:10px 0 0 0}th:last-child{border-radius:0 10px 0 0}
td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
td:first-child{color:var(--forest);font-weight:600}
tr:hover td{background:var(--sand)}
.chart{margin-top:26px;background:var(--sand);border-radius:var(--r);padding:26px 20px 16px;overflow-x:auto}
.chartcap{font-size:.8rem;color:var(--muted);text-align:center;margin-top:12px}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.stat3 div{background:var(--forest);border-radius:var(--r);padding:24px;text-align:center;color:#fff}
.stat3 b{display:block;font-family:'Fraunces',serif;font-size:2rem;color:var(--gold);line-height:1}
.stat3 span{font-size:.8rem;color:rgba(255,255,255,.65);margin-top:7px;display:block}
.checklist{list-style:none;margin-top:22px}
.checklist li{padding:9px 0 9px 32px;position:relative;font-size:.92rem;color:var(--muted);border-bottom:1px solid var(--line)}
.checklist li:before{content:"";position:absolute;left:2px;top:16px;width:14px;height:8px;
border-left:2.5px solid var(--leaf);border-bottom:2.5px solid var(--leaf);transform:rotate(-45deg)}
.risk{display:grid;gap:14px;margin-top:26px}
.riskitem{background:var(--sand);border-radius:var(--r);padding:20px 24px;border-left:3px solid var(--terra)}
.riskitem strong{display:block;color:var(--forest);margin-bottom:5px;font-size:.97rem}
.riskitem span{font-size:.89rem;color:var(--muted)}
/* sights */
.sights{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.sight{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.35s;display:flex;flex-direction:column}
.sight:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.sightimg{aspect-ratio:3/2;position:relative;overflow:hidden}
.sightimg .slot{height:100%;border:0;border-bottom:1px solid var(--line)}
.sightimg img{width:100%;height:100%;object-fit:cover;transition:.6s}
.sight:hover .sightimg img{transform:scale(1.07)}
.sightb{padding:20px 22px 22px;flex-grow:1}
.sight h4{font-size:1.04rem;color:var(--forest);margin-bottom:4px;font-weight:700}
.sightloc{font-size:.74rem;color:var(--terra-ink);font-weight:600;margin-bottom:9px}
.sight p{font-size:.87rem;color:var(--muted)}
/* ---------- SERVICES ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
transition:.35s;display:flex;flex-direction:column;position:relative;overflow:hidden}
.svc:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--leaf);transform:scaleX(0);
transform-origin:left;transition:transform .4s}
.svc:hover:before{transform:scaleX(1)}
.svc:hover{transform:translateY(-7px);box-shadow:var(--sh);border-color:var(--mint)}
.sicon{width:46px;height:46px;border-radius:13px;background:var(--mint);display:flex;align-items:center;
justify-content:center;margin-bottom:16px;transition:.35s}
.svc:hover .sicon{transform:rotate(-6deg) scale(1.08)}
.svc h4{font-size:1.08rem;font-weight:700;color:var(--forest);margin-bottom:9px}
.svc p{font-size:.9rem;color:var(--muted);margin-bottom:14px;flex-grow:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:15px}
.tag{font-size:.71rem;background:var(--sand);color:var(--emerald);padding:5px 11px;border-radius:20px;font-weight:600}
.deliv{border-top:1px solid var(--line);padding-top:14px;font-size:.83rem;color:var(--muted)}
.deliv b{color:var(--forest);display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
body.km .deliv b{text-transform:none;letter-spacing:0}
/* ---------- PARTNER ---------- */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pc{background:var(--paper);border:1px solid var(--line);border-radius:var(--rL);padding:30px 26px;transition:.35s;
display:flex;flex-direction:column}
.pc:hover{transform:translateY(-8px);box-shadow:var(--sh)}
.pcn{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
margin-bottom:16px;font-weight:800;font-family:'Fraunces',serif;font-size:1.1rem}
.pc:nth-child(1) .pcn{background:var(--mint);color:var(--emerald)}
.pc:nth-child(2) .pcn{background:#FCEBCE;color:#A87418}
.pc:nth-child(3) .pcn{background:#F6DDD2;color:var(--terra)}
.pc:nth-child(4) .pcn{background:#DEE9F0;color:#4A7593}
.pc h4{font-size:1.06rem;color:var(--forest);margin-bottom:9px;font-weight:700}
.pc>p{font-size:.89rem;color:var(--muted);margin-bottom:15px;flex-grow:1}
.pc ul{list-style:none}
.pc li{font-size:.84rem;color:var(--muted);padding:5px 0 5px 17px;position:relative}
.pc li:before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--leaf)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.step{text-align:center;padding:24px}
.stepn{width:44px;height:44px;border-radius:50%;background:var(--forest);color:var(--gold);display:flex;
align-items:center;justify-content:center;margin:0 auto 14px;font-weight:800;font-family:'Fraunces',serif}
.step p{font-size:.9rem;color:var(--muted)}
/* ---------- DAKDAM ---------- */
.concept{border-radius:var(--rL);overflow:hidden;border:1px solid rgba(255,255,255,.18);margin-bottom:32px;background:rgba(255,255,255,.05)}
.concept .slot{aspect-ratio:16/10}
.ccap{padding:15px 22px;font-size:.83rem;color:rgba(255,255,255,.64);border-top:1px solid rgba(255,255,255,.14);
display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.cbadge{background:var(--gold);color:#3F2E08;font-size:.66rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;padding:4px 10px;border-radius:5px;flex-shrink:0}
body.km .cbadge{text-transform:none;letter-spacing:0}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ph{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:28px;transition:.35s}
.ph:hover{background:rgba(255,255,255,.1);transform:translateY(-6px)}
.phn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
background:var(--gold);color:var(--forest);font-weight:800;font-size:.92rem;margin-bottom:15px;font-family:'Fraunces',serif}
.ph h4{color:#fff;font-size:1.05rem;margin-bottom:9px;font-weight:700}
.ph p{font-size:.87rem;color:rgba(255,255,255,.66);margin-bottom:13px}
.phstat{font-size:.71rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
body.km .phstat{text-transform:none;letter-spacing:0}
.ph.next .phstat{color:rgba(255,255,255,.4)}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:44px}
.pill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);
padding:22px 16px;text-align:center;transition:.35s}
.pill:hover{transform:translateY(-7px);background:rgba(255,255,255,.11)}
.pill .pi{width:42px;height:42px;margin:0 auto 12px;border-radius:13px;background:rgba(233,168,60,.17);
display:flex;align-items:center;justify-content:center;transition:.35s}
.pill:hover .pi{transform:rotate(8deg) scale(1.1)}
.pill strong{display:block;color:#fff;font-size:.92rem;margin-bottom:4px}
.pill span{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.45;display:block}
/* ---------- GALLERY ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;gap:14px}
.gitem{border-radius:var(--r);overflow:hidden;cursor:pointer;position:relative;transition:.35s;border:1px solid var(--line)}
.gitem:hover{transform:scale(1.02);box-shadow:var(--sh);z-index:2}
.gitem.big{grid-column:span 2;grid-row:span 2}
.gitem .slot{height:100%;border:0}
.gitem img{width:100%;height:100%;object-fit:cover}
.gcap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(15,46,36,.9));color:#fff;
padding:28px 16px 14px;font-size:.84rem;font-weight:600;opacity:0;transition:.3s}
.gitem:hover .gcap{opacity:1}
#lb{position:fixed;inset:0;background:rgba(8,18,14,.96);z-index:500;display:none;align-items:center;
justify-content:center;padding:40px}
#lb.open{display:flex}
#lb img{max-width:92vw;max-height:84vh;border-radius:10px}
#lbcap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-size:.92rem}
#lbx{position:absolute;top:22px;right:26px;background:rgba(255,255,255,.14);border:0;color:#fff;width:44px;
height:44px;border-radius:50%;font-size:1.4rem;cursor:pointer;line-height:1}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;color:#fff;
width:48px;height:48px;border-radius:50%;font-size:1.3rem;cursor:pointer}
#lbp{left:22px}#lbn{right:22px}
/* ---------- ABOUT / FAQ ---------- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.photoframe{position:relative;border-radius:var(--rL);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);box-shadow:var(--sh)}
.photoframe .slot{height:100%}
.creds{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.cred b{display:block;font-family:'Fraunces',serif;font-size:1.3rem;color:var(--emerald);line-height:1.1}
.cred span{font-size:.79rem;color:var(--muted)}
.faq{max-width:840px;margin:0 auto}
.fq{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:11px;overflow:hidden;transition:.3s}
.fq.open{box-shadow:var(--shS);border-color:var(--mint)}
.fqq{width:100%;background:none;border:0;padding:20px 24px;text-align:left;font-family:inherit;font-size:.97rem;
font-weight:600;color:var(--forest);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.fqi{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--sand);display:flex;align-items:center;
justify-content:center;font-size:1.1rem;color:var(--emerald);transition:.3s}
.fq.open .fqi{transform:rotate(45deg);background:var(--leaf);color:#fff}
.fqa{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.fqa div{padding:0 24px 22px;color:var(--muted);font-size:.92rem}
/* ---------- VAULT ---------- */
.vault{background:linear-gradient(135deg,var(--forest),#1A4735);border-radius:var(--rL);padding:52px;color:#fff;
display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center;position:relative;overflow:hidden}
.vault:before{content:"";position:absolute;top:-40%;right:-12%;width:460px;height:460px;border-radius:50%;
background:radial-gradient(circle,rgba(76,175,125,.22),transparent 70%)}
.vault>*{position:relative;z-index:1}
.vault h2{color:#fff}.vault p{color:rgba(255,255,255,.75);margin-bottom:20px}
.vault ul{list-style:none}
.vault li{padding:7px 0 7px 26px;position:relative;font-size:.89rem;color:rgba(255,255,255,.8)}
.vault li:before{content:"";position:absolute;left:0;top:15px;width:12px;height:2px;background:var(--gold)}
.loginbox{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
padding:28px;backdrop-filter:blur(10px)}
.lock{width:44px;height:44px;border-radius:13px;background:rgba(233,168,60,.18);display:flex;align-items:center;
justify-content:center;margin-bottom:16px}
.loginbox label{display:block;font-size:.71rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:rgba(255,255,255,.6);margin-bottom:8px}
body.km .loginbox label{text-transform:none;letter-spacing:0}
.loginbox input{width:100%;padding:12px 15px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.1);color:#fff;font-family:inherit;font-size:.92rem;margin-bottom:14px}
.loginbox input:focus{outline:0;border-color:var(--gold)}
.loginbox input::placeholder{color:rgba(255,255,255,.35)}
.loginbox .btn{width:100%;justify-content:center}
.note{font-size:.73rem;color:rgba(255,255,255,.45);margin-top:12px;text-align:center}
/* ---------- CONTACT ---------- */
.ctwrap{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start}
.cinfo{display:grid;gap:13px}
.ci{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 22px;display:flex;
gap:14px;align-items:center;transition:.3s}
.ci:hover{transform:translateX(5px);box-shadow:var(--shS)}
.ciic{width:40px;height:40px;border-radius:12px;background:var(--mint);display:flex;align-items:center;
justify-content:center;flex-shrink:0}
.ci b{display:block;font-size:.67rem;letter-spacing:.11em;text-transform:uppercase;color:var(--terra-ink);margin-bottom:3px}
body.km .ci b{text-transform:none;letter-spacing:0}
.ci a,.ci span{color:var(--forest);text-decoration:none;font-weight:600;font-size:.89rem;word-break:break-word}
form{background:var(--paper);border:1px solid var(--line);border-radius:var(--rL);padding:34px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);margin-bottom:6px}
body.km .fld label{text-transform:none;letter-spacing:0}
.fld input,.fld select,.fld textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
font-family:inherit;font-size:.93rem;background:var(--cream);transition:.25s;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--leaf);background:var(--paper)}
.fld textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:.83rem;color:var(--muted)}
.consent input{width:auto;margin-top:4px;flex-shrink:0}
form .btn{width:100%;justify-content:center}
#formmsg{margin-top:14px;padding:14px;border-radius:10px;font-size:.88rem;display:none}
#formmsg.ok{display:block;background:var(--mint);color:var(--forest)}
#formmsg.err{display:block;background:#FDE4DA;color:#A33A16}
.privacy{font-size:.76rem;color:var(--muted);margin-top:12px;text-align:center}
/* sources */
.srcs{list-style:none;margin-top:24px;display:grid;gap:9px}
.srcs li{font-size:.86rem;padding:11px 16px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.srcs a{color:var(--emerald);text-decoration:none;font-weight:600}
.srcs a:hover{text-decoration:underline}
footer{background:var(--forest);color:rgba(255,255,255,.6);padding:56px 0 38px;font-size:.85rem}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
footer h5{color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
body.km footer h5{text-transform:none;letter-spacing:0}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{text-decoration:none;transition:.25s}
footer a:hover{color:var(--gold)}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;
flex-wrap:wrap;gap:14px;font-size:.79rem}
.fdisc{color:rgba(255,255,255,.35);font-size:.75rem;margin-top:14px;max-width:80ch}
#top{position:fixed;bottom:26px;right:26px;width:48px;height:48px;border-radius:50%;background:var(--forest);
color:#fff;border:0;cursor:pointer;font-size:1.2rem;opacity:0;pointer-events:none;transition:.3s;z-index:200;box-shadow:var(--sh)}
#top.show{opacity:1;pointer-events:auto}
#top:hover{background:var(--emerald);transform:translateY(-3px)}
@media(max-width:1060px){
.qfg{grid-template-columns:repeat(3,1fr)}
.svcs,.pcards,.sights{grid-template-columns:repeat(2,1fr)}
.fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
.navlinks{display:none}
.svcs,.pcards,.sights,.grid2,.grid3,.grid4,.phases,.steps,.about,.vault,.ctwrap,.stat3{grid-template-columns:1fr}
.gal{grid-template-columns:repeat(2,1fr)}
.gitem.big{grid-column:span 2;grid-row:span 1}
.pgrid{grid-template-columns:repeat(2,1fr)}
.qfg{grid-template-columns:repeat(2,1fr)}
.fgrid{grid-template-columns:1fr}
.pcard{padding:26px}.vault{padding:30px}form{padding:24px}
header{min-height:auto}.hcontent{padding:60px 0 90px}
.photoframe{max-width:300px;margin:0 auto}
.scrollcue{display:none}
section{padding:70px 0}
}
@media print{
nav,#prog,#top,#searchpanel,#mobmenu,.scrollcue,form,.btns{display:none!important}
.panel{display:block!important}
body{background:#fff}
.rev{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.rev{opacity:1;transform:none}
}
/* ===== CHINESE ===================================================
Simplified Chinese has no inter-word spaces and a dense glyph
box, so it needs a slightly looser line-height than Latin but
far tighter than Khmer, and letter-spacing must be zero on any
element where the Latin design widens it.
================================================================ */
body.zh{font-family:'Noto Sans SC','Inter',system-ui,sans-serif;line-height:1.85}
/* The Chinese display face is serif now, so the headline is one
design rather than a Latin serif stapled to a CJK sans. Variation
settings are reset — SOFT and WONK are Fraunces axes and mean
nothing here; left inherited they are simply ignored, but stating
it keeps the intent legible. */
body.zh .serif{font-family:'Noto Serif SC','Noto Sans SC',serif;letter-spacing:0;
font-variation-settings:normal}
body.zh h1,body.zh h2,body.zh h3,body.zh h4{letter-spacing:0;line-height:1.4}
body.zh .logot small{font-family:'Noto Sans SC',sans-serif;text-transform:none;letter-spacing:0}
body.zh .badge,body.zh .eyebrow,body.zh .scrollcue,body.zh th,
body.zh .deliv b,body.zh .cbadge{text-transform:none;letter-spacing:0}
body.zh header h1{line-height:1.4;max-width:24ch}
body.zh p,body.zh li,body.zh .body,body.zh .sub,body.zh .lede{line-height:1.9}
body.zh .btn,body.zh .tab{letter-spacing:0}
/* ===== THE EXPLORER =========================================
The panel that opens when a hero marker is chosen. It sits
inside the hero, bottom-right, so it never covers the headline
and never pushes the page around. Dark glass so it belongs to
the map rather than floating above it.
============================================================ */
.scMark{cursor:pointer;outline:none}
.scMark .scHit{pointer-events:all}
.scMark circle:not(.scHit),.scMark path,.scMark text{pointer-events:none}
.scMark:hover text,.scMark:focus-visible text{fill:#fff}
.scMark:focus-visible{outline:2px solid #8FD9B4;outline-offset:6px;border-radius:4px}
.scChev{opacity:.45;transition:opacity .25s,transform .25s}
.scMark:hover .scChev,.scMark:focus-visible .scChev{opacity:1}
.scMark.lit text{fill:#fff}
.scMark.lit circle:not(.scHit){fill:#E9A83C}
.scPanel{position:absolute;right:clamp(16px,4vw,54px);bottom:clamp(16px,6vh,72px);z-index:6;
width:min(360px,calc(100vw - 40px));background:rgba(6,20,15,.90);
border:1px solid rgba(143,217,180,.26);border-radius:18px;padding:22px 22px 18px;
backdrop-filter:blur(14px);color:#EAF3EE;
opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);
transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),visibility .3s;
box-shadow:0 30px 70px -30px rgba(0,0,0,.85)}
.scPanel.on{opacity:1;visibility:visible;transform:none}
.scpHead{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.scpEye{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scpHead h3{font-family:'Fraunces',Georgia,serif;font-size:1.12rem;font-weight:600;color:#fff;
margin:0;line-height:1.3;flex:1}
body.km .scpHead h3{line-height:1.5;font-size:1rem}
body.zh .scpHead h3{letter-spacing:0}
.scpX{background:none;border:0;color:rgba(234,243,238,.55);font-size:1.5rem;line-height:1;
cursor:pointer;padding:0 2px;transition:color .2s;font-family:inherit}
.scpX:hover{color:#fff}
.scpHint{font-size:.79rem;color:#9BBBAB;margin:0 0 14px;line-height:1.55}
body.km .scpHint{line-height:1.85}
.scpList{display:grid;gap:7px}
.scpItem{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:rgba(143,217,180,.07);border:1px solid rgba(143,217,180,.16);
border-radius:12px;padding:13px 15px;text-decoration:none;color:#EAF3EE;
transition:background .22s,border-color .22s,transform .22s;
opacity:0;animation:scpIn .42s cubic-bezier(.22,1,.36,1) forwards}
@keyframes scpIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.scpItem:hover,.scpItem:focus-visible{background:rgba(143,217,180,.16);border-color:#8FD9B4;transform:translateX(3px)}
.scpItem:focus-visible{outline:2px solid #8FD9B4;outline-offset:2px}
.scpLab{font-size:.88rem;font-weight:500;line-height:1.4}
body.km .scpLab{line-height:1.7;font-size:.84rem}
.scpGo{font-size:.72rem;color:#8FD9B4;white-space:nowrap;opacity:.75;transition:opacity .22s}
.scpItem:hover .scpGo{opacity:1}
body.km .scpGo,body.zh .scpGo{letter-spacing:0}
@media(max-width:640px){
.scPanel{right:16px;left:16px;bottom:16px;width:auto}
}
@media print{ .scPanel{display:none} }
/* ===== "MORE" MENU ==========================================
The secondary destinations — Spatial Plan, Dossier, Legal
Register — are substantial pages, not afterthoughts. Trimming
the primary bar to keep the search and language controls on
screen was right; hiding those three behind an unlabelled
hamburger was not. A named dropdown keeps them one obvious
click away at every width.
============================================================ */
.moresel{position:relative}
.morebtn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);
border-radius:30px;padding:7px 13px;font:inherit;font-size:.85rem;font-weight:500;
color:var(--forest);cursor:pointer;transition:border-color .2s,background .2s;white-space:nowrap}
.morebtn:hover{border-color:var(--emerald);background:rgba(30,122,90,.06)}
.morebtn svg{transition:transform .25s}
.moresel.open .morebtn svg{transform:rotate(180deg)}
.moremenu{position:absolute;top:calc(100% + 10px);right:0;min-width:210px;background:#fff;
border:1px solid var(--line);border-radius:14px;padding:7px;
box-shadow:0 22px 50px -22px rgba(15,46,36,.42);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .22s,transform .22s,visibility .22s;z-index:60}
.moresel.open .moremenu{opacity:1;visibility:visible;transform:none}
.moremenu a{display:block;padding:10px 13px;border-radius:9px;text-decoration:none;
font-size:.87rem;font-weight:500;color:var(--forest);transition:background .18s}
.moremenu a:hover{background:var(--sand)}
@media(max-width:900px){ .moresel{display:none} }
/* ===== DESTINATIONS BAND ===== */
#dest{padding:74px 0 10px}
.destgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:32px}
.dcard{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:18px;
padding:26px 24px 22px;text-decoration:none;overflow:hidden;
transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s,border-color .32s}
/* Each card asserts its own colour on hover rather than all eight
turning the same green — the accent already means something
(see the note in app.js), so the hover should confirm it. */
.dcard:hover{transform:translateY(-5px);border-color:var(--accent,var(--emerald));
box-shadow:0 26px 52px -32px rgba(15,46,36,.62)}
.dcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,#4CAF7D);
transform:scaleY(0);transform-origin:top;transition:transform .34s cubic-bezier(.22,1,.36,1)}
.dcard:hover::before{transform:scaleY(1)}
/* a wash of the card's own colour, entering from the top-left
corner where the rule is — so the two read as one gesture */
.dcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
background:radial-gradient(135% 105% at 0% 0%,var(--accentSoft,transparent),transparent 62%);
transition:opacity .38s ease}
.dcard:hover::after{opacity:1}
.dcard > *{position:relative;z-index:1}
.dnum{font-size:.68rem;letter-spacing:.14em;color:var(--muted);font-weight:700;transition:color .3s ease}
.dcard:hover .dnum{color:var(--accent,var(--emerald))}
.dcard h3{font-family:'Fraunces',Georgia,serif;font-size:1.16rem;font-weight:600;color:var(--forest);
margin:9px 0 8px;line-height:1.3}
.dcard p{font-size:.88rem;line-height:1.68;color:var(--muted);margin:0 0 16px}
body.km .dcard p{line-height:1.95}
body.zh .dcard p{line-height:1.88}
.dmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;
border-top:1px solid var(--line);padding-top:13px}
.dcount{font-size:.76rem;color:var(--emerald);font-weight:600}
.dgo{font-size:.8rem;color:var(--forest);font-weight:600;transition:transform .28s;display:inline-block}
.dcard:hover .dgo{transform:translateX(5px)}
/* small marker for text that fell back to English */
.enchip{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:5px;
background:var(--sand);color:var(--muted);font-size:.6rem;font-weight:700;
letter-spacing:.08em;vertical-align:middle;font-family:'Inter',sans-serif}
body.km .enchip,body.zh .enchip{letter-spacing:.06em}
/* ============================================================
THE CONTOUR AS A DRAWING, NOT A WALLPAPER
------------------------------------------------------------
The first attempt tiled a 260x180 square of parallel wavy lines
across whole sections and multiplied it into the background. Two
things were wrong with that, and both of them are why it read as
a mess rather than as a map.
First, a TILE ANNOUNCES ITSELF. The eye finds the repeat within a
second or two, and once it has, the page is wearing patterned
wallpaper. A map is a single drawing: you are looking at one
piece of ground, not at the same piece of ground eighty times.
Second, PARALLEL WAVY LINES ARE NOT CONTOURS. Real contours close.
They ring a summit in nested loops, crowd where the slope is
steep, spread where it is gentle, and every fifth line is drawn
heavier so a surveyor can count elevation at a glance. That
structure is what makes a topographic sheet beautiful; without
it you have decorative squiggles.
So this is now ONE large drawing — a plateau shoulder with a
smaller outlier below it, eleven and nine nested levels, index
lines every fourth — placed once, never repeated, anchored off
the corner so it runs out of frame the way a map sheet does, and
dissolved to nothing across the middle of the section with a mask
so it can never compete with a word of text.
No blend mode. `multiply` was darkening the paper and turning
every line muddy; plain low opacity keeps the ink clean.
============================================================ */
:root{
--contour:url("data:image/svg+xml;utf8,");
--contourInk:url("data:image/svg+xml;utf8,");
}
/* The drawing is carried by a pseudo-element rather than by
`background-image` on the section itself. That is what lets it be
masked and faded independently of the section's own colour, and
it keeps the contour strictly behind content: one layer, one job,
no interaction with anything above it. */
.alt{position:relative;background:var(--sand);overflow:hidden}
.alt::before{
content:"";position:absolute;pointer-events:none;
right:-90px;top:-120px;width:980px;height:700px;
background:var(--contour) no-repeat;background-size:980px 700px;
opacity:.30;
-webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000 12%,rgba(0,0,0,.55) 46%,transparent 78%);
mask-image:radial-gradient(120% 100% at 100% 0%,#000 12%,rgba(0,0,0,.55) 46%,transparent 78%);
}
.alt > *{position:relative;z-index:1}
/* alternate sections mirror the sheet, so two bands in a row are
never the same picture in the same corner */
.alt:nth-of-type(even)::before{right:auto;left:-120px;top:auto;bottom:-160px;
-webkit-mask-image:radial-gradient(120% 100% at 0% 100%,#000 12%,rgba(0,0,0,.55) 46%,transparent 78%);
mask-image:radial-gradient(120% 100% at 0% 100%,#000 12%,rgba(0,0,0,.55) 46%,transparent 78%);
transform:scaleX(-1)}
/* ---- DEEP GREEN PANELS ----
Dark green anchors the interior pages the way the hero anchors
the front page, and it is where the contour reads best: light ink
on dark ground is exactly how a survey sheet is printed. */
.deep-band{background:linear-gradient(160deg,#0F2E24 0%,#143A2D 58%,#0B2118 100%);
color:#EAF3EE;position:relative;overflow:hidden}
.deep-band::after{content:"";position:absolute;pointer-events:none;
right:-190px;top:50%;width:620px;height:620px;margin-top:-310px;
background:var(--sealInk) no-repeat center;background-size:620px 620px;
opacity:.20;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 74%);
mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 74%);
animation:sealTurn 240s linear infinite}
/* the sheet breathes very slowly. A mask and a translate are both
composited, so this costs nothing per frame and never touches the
crispness of the lines. */
/* The seal turns once every four minutes. Slow enough that you
never catch it moving, fast enough that the page is never quite
the same picture twice — which is the difference between a
watermark and a living surface. A rotation is composited, so the
cost is the same as leaving it still. */
@keyframes sealTurn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.deep-band::after{animation:none}}
@keyframes contourDrift{
0%,100%{transform:translate3d(0,0,0)}
50% {transform:translate3d(-26px,14px,0)}
}
@media (prefers-reduced-motion:reduce){.deep-band::after{animation:none}}
.deep-band > *{position:relative;z-index:1}
.deep-band h1,.deep-band h2,.deep-band h3{color:#fff}
.deep-band p,.deep-band .sub{color:#B9CFC4}
.deep-band .eyebrow{color:var(--straw)}
.deep-band .eyebrow:before{background:var(--straw)}
.deep-band a{color:var(--mint)}
/* A card gets the CORNER of the sheet only — one summit running off
the top-right edge. Enough to say "map", never enough to read as
texture behind a paragraph. */
.pcard{position:relative;overflow:hidden}
.pcard::before{content:"";position:absolute;pointer-events:none;
right:-210px;top:-250px;width:640px;height:460px;
background:var(--contour) no-repeat;background-size:980px 700px;
background-position:-250px -60px;opacity:.16;
-webkit-mask-image:radial-gradient(100% 100% at 100% 0%,#000 0%,transparent 72%);
mask-image:radial-gradient(100% 100% at 100% 0%,#000 0%,transparent 72%)}
.pcard > *{position:relative;z-index:1}
/* ============================================================
THE SECOND CONTOUR DRAWING — A PROFILE, NOT A PLAN
------------------------------------------------------------
The map above is drawn in plan: looking straight down, nested
rings around a summit. Repeating that same picture in five more
places would put the site back where it started, just with a
better tile.
So the rest of the site gets the OTHER half of a survey sheet:
the CROSS-SECTION. Same terrain, seen from the side — four
ridgelines stacked far to near, each one paler and higher than
the one in front, which is how a relief profile creates depth
with nothing but overlap.
The ridgelines are not drawn by hand. They come from fractal
midpoint displacement, the method used to plot a real elevation
transect, seeded on 1,428,800 — the province's area in hectares.
The same seed every time, so the horizon is identical on every
page and every reload. It is one landscape, seen repeatedly.
Where each drawing is used:
plan view · section grounds, dark panels, card corners
cross-section · the foot of every dark panel, the footer, and
the horizon under the quick-fact row
A page never shows both in the same band.
============================================================ */
:root{
--seal:url("data:image/svg+xml;utf8,");
--sealInk:url("data:image/svg+xml;utf8,");
--ridge:url("data:image/svg+xml;utf8,");
--ridgeInk:url("data:image/svg+xml;utf8,");
}
/* The horizon along the bottom of every dark panel. This is the
join between a dark band and the page below it — the one place
on an interior page where a landscape belongs, because it is
doing the work a horizon does: telling you where the ground is. */
.deep-band::before{content:"";position:absolute;left:0;right:0;bottom:0;
height:130px;pointer-events:none;z-index:0;
background:var(--ridgeInk) no-repeat bottom center;background-size:100% 130px;
-webkit-mask-image:linear-gradient(transparent,#000 62%);
mask-image:linear-gradient(transparent,#000 62%)}
/* The footer closes the site the way a map sheet closes: on the
land it describes. Slightly taller here, because it is the last
thing on the page and has room to breathe. */
footer{position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;
pointer-events:none;z-index:0;
background:var(--ridgeInk) no-repeat top center;background-size:100% 150px;
opacity:.85;
-webkit-mask-image:linear-gradient(#000 20%,transparent 88%);
mask-image:linear-gradient(#000 20%,transparent 88%)}
footer > *{position:relative;z-index:1}
/* A horizon under the quick-fact row, on pale ground. Very light —
the numbers are the subject, this is the ground they stand on. */
.qfg{position:relative}
.qfg::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-30px;height:96px;
pointer-events:none;z-index:0;
background:var(--ridge) no-repeat bottom center;background-size:100% 96px;
opacity:.5;
-webkit-mask-image:linear-gradient(transparent,#000 70%);
mask-image:linear-gradient(transparent,#000 70%)}
.qf{position:relative;z-index:1}
/* A card's plan-view corner drifts a few pixels when you point at
it. A map that shifts under your hand is the small reward that
makes the whole motif feel deliberate rather than applied. */
.pcard::before{transition:transform 1.1s var(--e-water,cubic-bezier(.22,1,.36,1)),
opacity .8s var(--e-water,ease)}
.pcard:hover::before{transform:translate(-14px,10px) scale(1.04);opacity:.24}
@media (prefers-reduced-motion:reduce){
.pcard:hover::before{transform:none}
}
/* ============================================================
SCROLL ANCHORING IS THE THING THAT WAS MOVING THE PAGE
------------------------------------------------------------
Choosing a topic kept dropping the reader into the middle or the
end of it. Three separate fixes to the scrolling code did not
help, because the scrolling code was never the problem.
Chrome, Edge and Firefox all implement SCROLL ANCHORING. When
content above the viewport changes size, the browser picks a DOM
node it considers the reader's "anchor" and silently adjusts
scrollTop to keep that node visually still. It is a good feature
— it stops late-loading images from shoving an article around
under your eyes.
It is exactly wrong for a tab panel. Swapping a short panel for a
long one is not content settling; it is a deliberate change of
subject. The browser looks for its anchor node, finds something
deep inside the newly-shown panel, and scrolls there to hold it
still — landing the reader in the middle of a topic they just
opened. And because the browser applies this AFTER script runs,
any scroll position set in the click handler gets overwritten a
frame later. That is why it survived three attempts to fix it.
`overflow-anchor:none` opts this subtree out. Where the reader
lands is now decided by initTabs() in app.js, and nothing
silently overrules it afterwards.
============================================================ */
#hub, #hub .panel, .tabs{overflow-anchor:none}
/* tabs read as a contour ridge when active */
.tab.on,.tab[aria-selected="true"]{
background:linear-gradient(180deg,var(--deep),var(--forest));color:#fff;border-color:var(--forest)}
/* ============================================================
THE CONTOUR SYSTEM — THREE DRAWINGS, THREE JOBS
------------------------------------------------------------
The complaint every time this was attempted was the same word:
mess. A mess is not too much contour. A mess is contour used
without a rule, so the eye reads it as texture applied to a page
rather than as a map the page is printed on.
There is a rule now. Three drawings exist and each one has
exactly one job, decided by what that part of the page is FOR:
THE SEAL (a disc) · identity. It marks a page header
and the top of the hub — the two
places that say "you are here".
THE PLAN VIEW (a corner) · ground. It sits under alternating
sections and in card corners, at
the very edge of visible, so a
surface has grain without pattern.
THE PROFILE (a horizon) · edges. It closes the bottom of a
dark band and the top of the
footer, where a horizon belongs.
And four constraints that hold everywhere:
1. ONE contour element per screenful. Never two competing.
2. Never above 0.22 opacity on dark, 0.16 on pale.
3. Every one is masked to nothing at its own edge. Nothing is
ever cut off by the box it sits in — that hard edge is what
made the tiled version read as wallpaper.
4. Nothing tiles. Every drawing is placed once.
============================================================ */
/* THE SEAL AT THE TOP OF THE HUB.
The front page's only disc, behind the topic strip — the moment
the page stops being a hero and becomes a reference work. */
#hub{position:relative;overflow:hidden}
#hub::before{content:"";position:absolute;pointer-events:none;z-index:0;
left:50%;top:-210px;width:660px;height:660px;margin-left:-330px;
background:var(--seal) no-repeat center;background-size:660px 660px;
opacity:.11;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
animation:sealTurn 300s linear infinite reverse}
#hub > *{position:relative;z-index:1}
/* A SMALL SEAL CLOSES THE FOOTER, opposite the horizon — the way a
map sheet carries its stamp in one corner and its relief in the
other. Left side, so it never sits under the same column twice. */
footer::after{content:"";position:absolute;pointer-events:none;z-index:0;
left:-120px;bottom:-140px;width:420px;height:420px;
background:var(--sealInk) no-repeat center;background-size:420px 420px;
opacity:.13;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 48%,transparent 74%);
mask-image:radial-gradient(circle at 50% 50%,#000 48%,transparent 74%)}
/* The vault, the search overlay and the drawer are the three
surfaces that float ABOVE the page. They get the faintest seal of
all — just enough that a panel opening still feels like part of
the same document. */
.vault,#searchpanel .searchbox,.drawer .dpanel{position:relative;overflow:hidden}
.vault::before,#searchpanel .searchbox::before,.drawer .dpanel::before{
content:"";position:absolute;pointer-events:none;z-index:0;
right:-150px;top:-150px;width:400px;height:400px;
background:var(--seal) no-repeat center;background-size:400px 400px;
opacity:.07;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%)}
.vault > *,#searchpanel .searchbox > *,.drawer .dpanel > *{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
#hub::before{animation:none}
}
/* On a phone the seal is bigger than the column it sits behind, so
it stops being a mark and becomes a background. Pulled back. */
@media (max-width:720px){
#hub::before{width:420px;height:420px;margin-left:-210px;top:-140px;opacity:.08}
.deep-band::after{width:420px;height:420px;margin-top:-210px;right:-160px;opacity:.15}
footer::after{width:280px;height:280px;left:-90px;bottom:-100px}
}
/* ============================================================
THE SEAL, EXTENDED — AND THE RULE THAT KEEPS IT ART
------------------------------------------------------------
Asked to put the disc in most places, the failure mode is
obvious: eight identical stamps down a page, and it is a mess
again. What stops that is not restraint about WHERE, it is
variation in HOW. Every placement below differs from its
neighbours in at least three of:
size · 200px to 700px
angle · a fixed rotation per surface
side · which edge it runs off
weight · .05 to .22 depending on the ground
motion · turning, still, or turning the other way
Two seals of the same size at the same angle in the same corner
read as a repeat. Two at different sizes and angles running off
different edges read as one map photographed twice. That is the
entire difference between a pattern and a composition.
The hard rules still hold: one disc per screenful, masked to
nothing at its own edge, never above .22, never tiled.
============================================================ */
/* --- SECTION HEADS. The disc sits behind the eyebrow and title,
off the left edge, turned so its north mark points into the
page rather than off it. --- */
.sechead,.secttl{position:relative}
.sechead::before{content:"";position:absolute;pointer-events:none;z-index:0;
left:-260px;top:50%;width:440px;height:440px;margin-top:-220px;
background:var(--seal) no-repeat center;background-size:440px 440px;
opacity:.09;transform:rotate(-24deg);
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 70%);
mask-image:radial-gradient(circle at 50% 50%,#000 44%,transparent 70%)}
.sechead > *{position:relative;z-index:1}
/* --- THE QUICK-FACT ROW. Small, high, right — the opposite corner
from the section head above it, so the two never stack. --- */
.qfg::before{content:"";position:absolute;pointer-events:none;z-index:0;
right:-90px;top:-130px;width:300px;height:300px;
background:var(--seal) no-repeat center;background-size:300px 300px;
opacity:.10;transform:rotate(38deg);
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%);
mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%)}
/* --- TABLES. A wide, faint disc under the middle of a data table,
which is the one place on this site where a page can look like
a spreadsheet. It is the largest and the faintest of them all:
big enough that you never see its edge, faint enough that a
figure is never harder to read. --- */
.tw,.tablewrap{position:relative}
.tw::before,.tablewrap::before{content:"";position:absolute;pointer-events:none;z-index:0;
left:50%;top:50%;width:700px;height:700px;margin:-350px 0 0 -350px;
background:var(--seal) no-repeat center;background-size:700px 700px;
opacity:.05;transform:rotate(11deg);
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 34%,transparent 62%);
mask-image:radial-gradient(circle at 50% 50%,#000 34%,transparent 62%)}
.tw > *,.tablewrap > *{position:relative;z-index:1}
/* --- THE EXPLORER. Its three doors sit on dark ground, so this one
is the light ink, mid-size, low-left, turning slowly the
opposite way to the page header above it. --- */
.exwrap,#explorer{position:relative;overflow:hidden}
.exwrap::before,#explorer::before{content:"";position:absolute;pointer-events:none;z-index:0;
left:-150px;bottom:-190px;width:520px;height:520px;
background:var(--sealInk) no-repeat center;background-size:520px 520px;
opacity:.14;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 72%);
animation:sealTurn 420s linear infinite reverse}
.exwrap > *,#explorer > *{position:relative;z-index:1}
/* --- FORMS AND THE CONTRIBUTE BOX. Small, top-left, static. A
surface someone is typing into should not have anything moving
on it. --- */
form,.cbox{position:relative;overflow:hidden}
form::before,.cbox::before{content:"";position:absolute;pointer-events:none;z-index:0;
left:-130px;top:-140px;width:340px;height:340px;
background:var(--seal) no-repeat center;background-size:340px 340px;
opacity:.06;transform:rotate(-52deg);
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%);
mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%)}
form > *,.cbox > *{position:relative;z-index:1}
/* --- MONDUL'S OWN DETAIL PANEL. The smallest disc on the site,
bottom-right, because the panel is small and anything larger
would be a background rather than a mark. --- */
.mdPanel::before{content:"";position:absolute;pointer-events:none;z-index:0;
right:-70px;bottom:-80px;width:230px;height:230px;
background:var(--seal) no-repeat center;background-size:230px 230px;
opacity:.07;transform:rotate(64deg);
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%);
mask-image:radial-gradient(circle at 50% 50%,#000 42%,transparent 68%)}
@media (prefers-reduced-motion:reduce){
.exwrap::before,#explorer::before{animation:none}
}
/* On a phone every one of these is wider than the column. They are
pulled back hard rather than merely scaled, because a disc that
fills the screen behind a paragraph is the exact failure this
whole system exists to avoid. */
@media (max-width:720px){
.sechead::before{width:260px;height:260px;margin-top:-130px;left:-140px;opacity:.06}
.qfg::before{width:190px;height:190px;right:-60px;top:-80px;opacity:.07}
.tw::before,.tablewrap::before{display:none}
.exwrap::before,#explorer::before{width:300px;height:300px;left:-100px;bottom:-120px}
form::before,.cbox::before{width:200px;height:200px;left:-80px;top:-90px}
}
/* ---- SOURCE BADGE ----
Attached to every entry in the wind tracker. It is deliberately
plain and always present: on this platform a figure without a
source is a defect, so the badge that says where something came
from should never look like decoration you could remove.
`.srcTagMissing` is the visible failure state. If an entry ever
ships without attribution it goes amber and says so, rather than
quietly rendering as though it were sourced. */
.srcTag{display:inline-block;margin-top:8px;font-size:.72rem;letter-spacing:.02em;
color:var(--muted);background:rgba(31,110,90,.07);border:1px solid var(--line);
border-radius:999px;padding:3px 10px;line-height:1.5}
.srcTagMissing{color:#8A5F14;background:rgba(185,143,53,.13);border-color:rgba(185,143,53,.4)}
.minicard .srcTag{margin-top:10px}
/* ============================================================
GSAP LAYER — VEAL THOM HERO AND MICRO-INTERACTIONS
------------------------------------------------------------
Every class here is prefixed `vt-` (the hero) or `gs-` (the
GSAP utilities). Nothing in this block touches a class the
existing motion system owns, and nothing here sets `position`
or `z-index` on a bare landmark — both are enforced by tests.
============================================================ */
/* ---------- THE HERO ---------- */
.vt-hero{position:relative;height:100vh;min-height:560px;overflow:hidden;
background:linear-gradient(180deg,#0A2A3A 0%,#123B2C 46%,#0B2118 100%);
isolation:isolate}
/* `isolation:isolate` gives the hero its own stacking context, so
the layer z-indexes below cannot reach out and reorder the
sticky navigation sitting above it. That exact leak is what
buried the language menu once already. */
.vt-layer{position:absolute;inset:0;width:100%;height:100%;
will-change:transform;pointer-events:none;backface-visibility:hidden}
/* Layer 1 — sky and the sun */
/* Blue daylight, deepest at the zenith and washing out to pale
near the horizon. That wash-out is haze, and it is the same
effect that turns the far peaks lavender — sky and mountains
have to agree about it or neither looks real. */
/* Sun high and to the left, as in the photograph — a broad wash
rather than a disc. */
/* Layer 2 — the valleys, and the mist that sits in them */
.vt-mist{position:absolute;left:0;width:200%;height:auto;
will-change:transform;opacity:.5}
.vt-mist-1{top:44%}
.vt-mist-2{top:56%;opacity:.36}
.vt-mist-3{top:66%;opacity:.26}
/* Layer 3 — foreground slopes */
.vt-fore{z-index:4}
/* Depth is three things at once — each range sits LOWER, is
DARKER, and (in gsap-layer.js) moves FASTER on scroll than the
one behind it. Any one of the three alone still reads as flat,
which is exactly what the first attempt looked like. */
/* AERIAL PERSPECTIVE. Distance is not only size — it is a shift
toward the colour of the sky, a loss of contrast, and a slight
softening. The furthest range is lavender-grey and barely
separates from the sky; the nearest is fully saturated green.
Get the shapes right without this and you have a stage set. */
/* ---------- ROLLING GRASSLAND ----------
Three banks of turf, each brighter and more saturated than the
one behind. The lightest is nearest, which is the opposite of
the mountains — grass in full sun gets more yellow as it comes
toward you, while rock gets bluer as it goes away. */
/* THE TRACK. Two strokes: a wide pale one for the dirt and a thin
darker one for the rut down its centre. It narrows as it climbs
— that taper is the whole of linear perspective in one path, and
it is what leads the eye from the front of the picture up into
the hills. */
.vt-track{fill:none;stroke:#D8B98A;stroke-width:11;stroke-linecap:round}
.vt-trackEdge{fill:none;stroke:#C09C6C;stroke-width:3;stroke-linecap:round;opacity:.75}
.vt-fence path{fill:none;stroke:#6E5A3E;stroke-width:1.7;stroke-linecap:round}
.vt-fence .vt-wire{stroke:#8A7350;stroke-width:1;opacity:.75}
/* ---------- TREES ---------- */
.vt-crown{fill:#2F6340}
.vt-trunkT{stroke:#4A3A26;stroke-width:2.4;stroke-linecap:round;fill:none}
/* Each clump sways on its own clock, seeded off its position, so a
line of trees never breathes in unison. */
.vt-tree{transform-box:fill-box;transform-origin:50% 100%;
animation:vtSway 6.4s ease-in-out infinite}
.vt-tree:nth-of-type(3n){animation-duration:8.1s;animation-delay:-2.2s}
.vt-tree:nth-of-type(3n+1){animation-duration:5.3s;animation-delay:-3.7s}
@keyframes vtSway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
/* ---------- CUMULUS ---------- */
/* Layer 4 — the words */
/* A soft scrim behind the words. On a dark hero the text carried
itself; over bright grass and a blue sky it needs help, and a
scrim behind the copy costs less legibility than a heavier
shadow on every glyph. */
.vt-copy:before{content:"";position:absolute;left:50%;top:50%;
width:min(1100px,92%);height:min(620px,86%);transform:translate(-50%,-50%);
background:radial-gradient(ellipse at center,rgba(8,26,20,.52) 0%,rgba(8,26,20,.3) 46%,transparent 74%);
pointer-events:none}
/* bottom padding keeps the centred stack clear of the scroll cue,
which is the only thing still pinned to the viewport edge */
/* THE SHORTHAND MUST NOT COME AFTER THE LONGHAND.
This rule had `padding-bottom:96px` and then, four declarations
later, `padding:0 24px`. The shorthand resets every side, so the
bottom clearance was silently zeroed and the copy stack kept
landing on the scroll cue — the fix I added last turn had been
doing nothing at all. One padding declaration now, all four sides
in it. */
.vt-copy{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;
padding:0 24px 96px;pointer-events:none}
.vt-copy > *{pointer-events:auto}
.vt-eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
color:var(--mint,#6FE3AD);margin:0 0 18px;
text-shadow:0 2px 14px rgba(2,12,8,.7)}
/* `.serif` from the base stylesheet already carries the family,
weight and colour this headline has always had. This only adds
the shadow it needs to sit on a landscape, and the size. */
.vt-title{margin:0;color:#FBF9F4;
font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.08;letter-spacing:-.015em;
text-shadow:0 4px 30px rgba(2,12,8,.66)}
.vt-title em{font-style:italic;color:#BFF7DC}
/* Each word rides up out of its own box. `overflow:hidden` on the
wrapper is what makes it a mask reveal rather than a slide. */
.vt-word{display:inline-block;overflow:hidden;vertical-align:bottom;
padding-bottom:.1em}
.vt-word > span{display:inline-block;will-change:transform}
.vt-sub{margin:20px auto 0;max-width:48ch;font-size:clamp(.95rem,1.6vw,1.12rem);
line-height:1.65;color:rgba(240,248,244,.76);
text-shadow:0 2px 16px rgba(2,12,8,.6)}
.vt-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.vt-badge{display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border-radius:999px;font-size:.8rem;line-height:1.4;
color:#EAF3EE;background:rgba(11,33,24,.44);
border:1px solid rgba(111,227,173,.26);
backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.vt-badge b{color:#BFF7DC;font-weight:650}
.vt-badge i{font-style:normal;font-size:.68rem;letter-spacing:.06em;
text-transform:uppercase;color:rgba(191,247,220,.62)}
/* an unsourced badge says so, in gold, like everywhere else */
.vt-badge.vt-unsourced{border-color:rgba(185,143,53,.44)}
.vt-badge.vt-unsourced b{color:#E8C67A}
.vt-scrollcue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
z-index:7;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
color:rgba(191,247,220,.6)}
.vt-scrollcue:after{content:"";display:block;width:1px;height:26px;margin:9px auto 0;
background:linear-gradient(rgba(191,247,220,.7),transparent);
animation:vtCue 2.6s ease-in-out infinite}
@keyframes vtCue{0%,100%{transform:scaleY(.4);opacity:.35}50%{transform:scaleY(1);opacity:1}}
/* The hero meets the page on the grass itself. */
.vt-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:74px;
z-index:5;pointer-events:none;
background:linear-gradient(to top,rgba(162,206,85,.9),transparent)}
@media (max-width:720px){
.vt-hero{height:88vh;min-height:480px}
.vt-badges{gap:8px}
.vt-badge{padding:7px 13px;font-size:.74rem}
}
/* ---------- GSAP UTILITIES ---------- */
/* Set the resting state in CSS, not JS. If the script never runs,
these elements are already visible — a reveal that hides content
and then fails to un-hide it is the worst bug this system can
have, and it has happened here before. */
.gs-up,.gs-fade,.gs-left,.gs-right,.gs-scale{will-change:transform,opacity}
.magnetic-card{will-change:transform;transform-style:preserve-3d}
.card-details{will-change:transform,opacity}
/* the shared tooltip */
.gs-tip{position:fixed;top:0;left:0;z-index:9998;max-width:280px;
padding:13px 15px;border-radius:14px;pointer-events:none;
background:rgba(11,33,24,.94);border:1px solid rgba(111,227,173,.24);
box-shadow:0 18px 44px -18px rgba(0,0,0,.7);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gs-tip strong{display:block;font-size:.86rem;color:#BFF7DC;margin-bottom:5px}
.gs-tip span{display:block;font-size:.78rem;line-height:1.55;color:rgba(234,243,238,.76)}
.gs-tip em{display:block;margin-top:8px;font-style:normal;font-size:.66rem;
letter-spacing:.04em;color:rgba(191,247,220,.5)}
.gs-hot{cursor:pointer;outline:none;transition:filter .3s ease}
.gs-hot-on{filter:drop-shadow(0 0 8px rgba(111,227,173,.85))}
.gs-hot:focus-visible{outline:2px solid #6FE3AD;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.vt-scrollcue:after{animation:none}
.vt-layer,.magnetic-card,.card-details{will-change:auto}
}
/* ============================================================
THE MORNING VALLEY — LIFE IN THE HERO
------------------------------------------------------------
Birds over the ridge, a herd walking the middle distance, and
people cutting in the foreground field.
THE ONE RULE THAT MAKES THIS CHEAP
Every creature is built so that only `transform` and `opacity`
ever change. A wing ROTATES rather than being redrawn; a leg
ROTATES about its hip rather than having its path recalculated;
the herd TRANSLATES rather than being repositioned. That keeps
roughly forty moving parts on the compositor, where they cost
almost nothing, instead of in layout and paint, where forty
moving parts is a slideshow.
THE ONE RULE THAT MAKES IT LOOK ALIVE
Nothing shares a period with anything else. The wings beat at
0.42s, the bodies bob at 0.9s, the herd walks its loop over
110s, the harvesters bend on 2.6s and swing their arms on 1.3s.
Two things on the same clock read as a machine; a dozen things
on unrelated clocks read as a place.
Each figure also carries its own `--d` delay, set inline, so no
two members of a flock or a work party are ever in step.
============================================================ */
/* ---------- BIRDS ---------- */
/* ABOVE the copy. Birds crossing behind text are wallpaper; birds
crossing in front of it put the reader on the ridge with them.
z-index 8 — over .vt-copy (6) and the scroll cue (7). */
.vt-birds{z-index:8;pointer-events:none}
.vt-flock{position:absolute;width:400px;height:120px;overflow:visible}
/* three flocks, three depths: the far one is smaller, fainter and
slower, which is the whole of aerial perspective */
.vt-flock-1{top:17%;left:-14%;opacity:.85;transform:scale(1);
animation:vtFlyAcross 46s linear infinite}
.vt-flock-2{top:26%;left:-24%;opacity:.6;transform:scale(.72);
animation:vtFlyAcross 68s linear infinite -14s}
.vt-flock-3{top:12%;left:-34%;opacity:.4;transform:scale(.5);
animation:vtFlyAcross 92s linear infinite -40s}
@keyframes vtFlyAcross{
0% {transform:translateX(0) translateY(0)}
50% {transform:translateX(70vw) translateY(-22px)}
100%{transform:translateX(140vw) translateY(6px)}
}
/* Passing over pale text and dark sky both, so they carry a faint
light edge — a flat dark bird disappears against the headline. */
.vt-bird path{fill:none;stroke:#16302A;stroke-width:1.8;stroke-linecap:round;
filter:drop-shadow(0 0 1.5px rgba(255,255,255,.5))}
.vt-bird{transform-box:fill-box;transform-origin:50% 50%}
/* the beat. Wings up on the same clock, but the LEFT wing is
mirrored, so they open and close together rather than paddling. */
.vt-wingL,.vt-wingR{transform-box:fill-box}
.vt-wingL{transform-origin:100% 100%;animation:vtFlapL .42s ease-in-out infinite var(--d,0s)}
.vt-wingR{transform-origin:0% 100%; animation:vtFlapR .42s ease-in-out infinite var(--d,0s)}
@keyframes vtFlapL{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-26deg)}}
@keyframes vtFlapR{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(26deg)}}
/* ---------- THE HERD ---------- */
.vt-herd{position:absolute;left:0;right:0;bottom:41%;height:60px;
pointer-events:none;opacity:.78}
.vt-herd-run{position:absolute;left:0;width:44%;height:60px;overflow:visible;
animation:vtHerdWalk 110s linear infinite}
@keyframes vtHerdWalk{
0% {transform:translateX(-30%)}
100%{transform:translateX(150%)}
}
.vt-beast path{fill:#0F2E24;stroke:none}
.vt-beast .vt-legFL,.vt-beast .vt-legFR,
.vt-beast .vt-legBL,.vt-beast .vt-legBR,
.vt-beast .vt-horn,.vt-beast .vt-tail{
fill:none;stroke:#0F2E24;stroke-width:2.2;stroke-linecap:round}
/* Legs swing about the shoulder. Diagonal pairs move together —
front-left with back-right — which is how a four-legged animal
actually walks and the single detail that separates a walk cycle
from four independent twitches. */
.vt-legFL,.vt-legFR,.vt-legBL,.vt-legBR{transform-box:fill-box;transform-origin:50% 0%}
.vt-legFL,.vt-legBR{animation:vtStepA .9s ease-in-out infinite var(--d,0s)}
.vt-legFR,.vt-legBL{animation:vtStepB .9s ease-in-out infinite var(--d,0s)}
@keyframes vtStepA{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}}
@keyframes vtStepB{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
/* the body rises on HALF the leg period — two footfalls per stride */
.vt-body{transform-box:fill-box;animation:vtBeastBob .45s ease-in-out infinite var(--d,0s)}
@keyframes vtBeastBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9px)}}
.vt-tail{transform-box:fill-box;transform-origin:0% 0%;
animation:vtTail 2.3s ease-in-out infinite}
@keyframes vtTail{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
/* ---------- THE HARVEST ---------- */
.vt-harvest{position:absolute;left:0;right:0;bottom:5%;height:120px;
pointer-events:none;opacity:.9}
.vt-harvest-svg{position:absolute;inset:0;width:100%;height:120px;overflow:visible}
.vt-farmer path,.vt-carrier path{fill:none;stroke:#0B2118;stroke-width:2.4;
stroke-linecap:round}
/* The body and the holding arm. Both were being caught by the
generic `.vt-farmer path` rule, which works but leaves two class
names in the markup that no rule mentions — and a class nothing
styles is indistinguishable from a typo six months from now.
The holding arm is also drawn a shade lighter: it is gathering
the stalk, not swinging the blade. */
.vt-trunk{stroke-width:2.8}
.vt-armHold{stroke-width:2.1;opacity:.9}
.vt-hat{fill:#B98F35}
.vt-brim{stroke:#B98F35;stroke-width:2.8}
.vt-basket{fill:#B5825C;opacity:.9}
.vt-pole,.vt-load{stroke:#7E5B3A;stroke-width:2}
/* THE BEND. The torso pivots at the hip while the cutting arm
swings on half the period, so the two rhythms cross instead of
pulsing together. That crossing is what makes it read as work. */
.vt-torso{transform-box:fill-box;transform-origin:50% 100%;
animation:vtBend 2.6s cubic-bezier(.45,0,.55,1) infinite var(--d,0s)}
@keyframes vtBend{
0%,10% {transform:rotate(0)}
38% {transform:rotate(34deg)} /* down to the stalk */
50% {transform:rotate(31deg)} /* the cut */
76% {transform:rotate(0)}
100% {transform:rotate(0)}
}
.vt-armCut{transform-box:fill-box;transform-origin:0% 0%;
animation:vtCut 1.3s ease-in-out infinite var(--d,0s)}
@keyframes vtCut{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(18deg)}}
/* THE CARRIER. Crosses the field on a long loop with a bounce that
matches her stride, and the load swings a beat behind her — a
pole of rice that moved in perfect time with the walker would
look welded on. */
.vt-carrier{animation:vtCarryWalk 76s linear infinite}
@keyframes vtCarryWalk{
0% {transform:translate(-6%,100px)}
100%{transform:translate(112%,100px)}
}
.vt-carrier > g{transform-box:fill-box;
animation:vtCarryBob .74s ease-in-out infinite}
@keyframes vtCarryBob{0%,100%{transform:scale(.92) translateY(0)}50%{transform:scale(.92) translateY(-2px)}}
.vt-pole{transform-box:fill-box;transform-origin:50% 50%;
animation:vtPole 1.48s ease-in-out infinite}
@keyframes vtPole{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.vt-legW{transform-box:fill-box;transform-origin:50% 0%}
.vt-legW-a{animation:vtStepA .74s ease-in-out infinite}
.vt-legW-b{animation:vtStepB .74s ease-in-out infinite}
@media (max-width:720px){
/* On a phone the foreground figures are three pixels tall and
cost more than they give. The birds and the herd carry the
life on their own at this size. */
.vt-harvest{display:none}
.vt-flock-3{display:none}
.vt-herd{bottom:44%;opacity:.6}
}
@media (prefers-reduced-motion:reduce){
.vt-flock,.vt-herd-run,.vt-carrier,.vt-carrier > g,
.vt-wingL,.vt-wingR,.vt-legFL,.vt-legFR,.vt-legBL,.vt-legBR,
.vt-body,.vt-tail,.vt-torso,.vt-armCut,.vt-pole,.vt-legW{
animation:none!important}
/* the scene stays — it just holds still */
.vt-flock-1{left:22%}.vt-flock-2{left:58%}.vt-flock-3{left:78%}
.vt-herd-run{transform:translateX(30%)}
.vt-carrier{transform:translate(38%,100px)}
}
/* ============================================================
THE FOUR SPECIES, AND THE TWO HARVESTS
------------------------------------------------------------
The herd used to be one silhouette scaled three ways, which is
the tell that nobody looked at an animal. These are four
different builds:
ELEPHANT a mass carried on columns. Legs barely swing; the
ear and trunk do the moving. Weight reads as
SLOWNESS — its cycle is nearly twice the others.
BANTENG weight at the shoulder, horns up, dewlap swinging.
SAMBAR all leg and neck. Fastest cycle, highest step, head
lifting to check the wind.
BOAR low and front-heavy, short quick steps, head down.
Same for the work. A coffee picker stands and reaches INTO the
bush at chest height, then drops the cherries into a basket at
the waist. A rice cutter bends to the ground and swings a sickle
low. Two crops, two completely different motions — drawing them
the same would be the tell that neither was watched.
============================================================ */
.vt-herd{bottom:22%;height:90px;opacity:.8}
.vt-herd-run{width:62%;height:90px}
/* shared line weight, then per-species overrides */
.vt-beast .vt-ear,.vt-beast .vt-neck{fill:#0F2E24;stroke:none}
.vt-beast .vt-trunkE,.vt-beast .vt-tusk,.vt-beast .vt-antler,
.vt-beast .vt-dewlap{fill:none;stroke:#0F2E24;stroke-width:2;stroke-linecap:round}
.vt-beast .vt-neck{stroke:#0F2E24;stroke-width:4.5;stroke-linecap:round}
.vt-tusk{stroke:#D8CFA4!important;stroke-width:1.8!important}
/* ELEPHANT — heavy, so slow. The ear and trunk carry the life. */
.vt-eleph .vt-legFL,.vt-eleph .vt-legFR,
.vt-eleph .vt-legBL,.vt-eleph .vt-legBR{stroke-width:5.5}
.vt-eleph .vt-legFL,.vt-eleph .vt-legBR{animation-duration:1.7s}
.vt-eleph .vt-legFR,.vt-eleph .vt-legBL{animation-duration:1.7s}
.vt-eleph .vt-body{animation-duration:.85s}
.vt-ear{transform-box:fill-box;transform-origin:100% 0%;
animation:vtEar 2.9s ease-in-out infinite}
@keyframes vtEar{0%,100%{transform:rotate(0)}50%{transform:rotate(-13deg)}}
.vt-trunkE{transform-box:fill-box;transform-origin:100% 0%;
animation:vtTrunk 4.3s ease-in-out infinite}
@keyframes vtTrunk{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-9deg)}}
/* BANTENG — the reference gait */
.vt-bant .vt-legFL,.vt-bant .vt-legFR,
.vt-bant .vt-legBL,.vt-bant .vt-legBR{stroke-width:2.6;animation-duration:1s}
.vt-bant .vt-body{animation-duration:.5s}
.vt-dewlap{animation:vtDewlap 1s ease-in-out infinite;
transform-box:fill-box;transform-origin:0% 0%}
@keyframes vtDewlap{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
/* SAMBAR — light, quick, and it lifts its head */
.vt-samb .vt-legFL,.vt-samb .vt-legFR,
.vt-samb .vt-legBL,.vt-samb .vt-legBR{stroke-width:2;animation-duration:.66s}
.vt-samb .vt-body{animation-duration:.33s;
animation-name:vtSambBob}
@keyframes vtSambBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
.vt-samb .vt-neck,.vt-samb .vt-antler{transform-box:fill-box;transform-origin:100% 100%;
animation:vtGraze 7.5s ease-in-out infinite}
@keyframes vtGraze{
0%,42% {transform:rotate(0)}
54%,72% {transform:rotate(15deg)} /* head down to graze */
84%,100%{transform:rotate(0)} /* up, checking */
}
/* BOAR — short, busy steps */
.vt-boar .vt-legFL,.vt-boar .vt-legFR,
.vt-boar .vt-legBL,.vt-boar .vt-legBR{stroke-width:2.2;animation-duration:.44s}
.vt-boar .vt-body{animation-duration:.22s}
/* the herd covers more ground and takes longer doing it */
.vt-herd-run{animation-duration:140s}
/* ---------- COFFEE ---------- */
.vt-bushBody{fill:#14402F}
.vt-cherry{fill:#B5452F}
.vt-bush{transform-box:fill-box;transform-origin:50% 100%;
animation:vtBush 5.4s ease-in-out infinite}
@keyframes vtBush{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.vt-picker path{fill:none;stroke:#0B2118;stroke-width:2.4;stroke-linecap:round}
/* The reach and the drop are one cycle offset from each other: the
hand goes into the bush, comes back, and releases over the
basket. Running them on the same phase would have her picking
and dropping in the same instant. */
.vt-armPick{transform-box:fill-box;transform-origin:100% 100%;
animation:vtReach 3.1s cubic-bezier(.45,0,.55,1) infinite var(--d,0s)}
@keyframes vtReach{
0%,8% {transform:rotate(0)}
30% {transform:rotate(-30deg)} /* into the branches */
46% {transform:rotate(-22deg)} /* pull */
70%,100%{transform:rotate(0)}
}
.vt-armDrop{transform-box:fill-box;transform-origin:0% 0%;
animation:vtDrop 3.1s cubic-bezier(.45,0,.55,1) infinite var(--d,0s)}
@keyframes vtDrop{
0%,52% {transform:rotate(0)}
68% {transform:rotate(18deg)} /* over the basket */
86%,100%{transform:rotate(0)}
}
/* ---------- RICE ---------- */
.vt-stalk{fill:none;stroke:#B98F35;stroke-width:1.6;stroke-linecap:round;opacity:.85}
.vt-rice{transform-box:fill-box;transform-origin:50% 100%;
animation:vtRiceSway 4.2s ease-in-out infinite}
@keyframes vtRiceSway{0%,100%{transform:skewX(-2.5deg)}50%{transform:skewX(2.5deg)}}
.vt-cutter path{fill:none;stroke:#0B2118;stroke-width:2.4;stroke-linecap:round}
.vt-sickle{stroke:#C9C89A!important;stroke-width:2!important}
/* The bend goes deeper than the coffee picker's — this one is
cutting at ground level, not at chest height. */
.vt-cutter .vt-torso{transform-box:fill-box;transform-origin:50% 100%;
animation:vtBendLow 2.4s cubic-bezier(.45,0,.55,1) infinite var(--d,0s)}
@keyframes vtBendLow{
0%,8% {transform:rotate(0)}
34% {transform:rotate(52deg)}
50% {transform:rotate(48deg)}
74%,100%{transform:rotate(0)}
}
@media (max-width:720px){
.vt-harvest{display:none}
.vt-herd{bottom:36%;opacity:.65}
.vt-herd-run{width:100%}
}
@media (prefers-reduced-motion:reduce){
.vt-ear,.vt-trunkE,.vt-dewlap,.vt-bush,.vt-armPick,.vt-armDrop,
.vt-rice,.vt-samb .vt-neck,.vt-samb .vt-antler{animation:none!important}
}
/* ============================================================
THE PHOTOGRAPH
------------------------------------------------------------
The drawn scene is gone from the hero. Everything it used to do
— ranges, grass banks, clouds, the herd, the harvest — is in the
image now, and the CSS for those layers has been removed rather
than left behind matching nothing.
============================================================ */
.vt-photo{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;
/* A 24-pixel blur of the image itself, inlined. The hero has its
real colour on the first frame instead of flashing empty while
300 KB arrives — which on a bad signal here is several seconds. */
background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAANABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDNW8nU/LOCKsJqMx4MuPxrnw5xSrIwPWsJcz6iVkdQt/N/z1NFc8k7g9aKyan3Luux/9k=") center/cover no-repeat}
/* The exposure lift. This lived in a selector shared with the
parallax planes — .vt-plane,.vt-photo img — so deleting the planes
silently took the photograph's exposure with it and the hero went
flat. Shared selectors are convenient right up to the moment one of
the things they name is removed. */
/* ---- THE FRAME BREATHES ----
With the parallax planes gone the picture was dead still until you
scrolled. A very slow push — 1 to 1.035 over ninety seconds — is
long enough that you never catch it moving but the frame is never
quite the same twice. transform only, so it composites, and it
sits on the while GSAP drives the scroll scale on the same
element... which it cannot: a CSS animation outranks an inline
style, so sharing one property silently disables the parallax.
The breath goes on the PICTURE WRAPPER instead. */
.vt-photo{animation:vtBreath 90s ease-in-out infinite;will-change:transform}
@keyframes vtBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.vt-photo img{filter:brightness(1.13) saturate(1.09) contrast(.97)}
.vt-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
display:block;
/* object-position sits below centre so the grassland keeps the
lower half of the frame and the sky is cropped first — that is
the part of this picture worth keeping when it is squeezed into
a tall phone viewport.
It is 50% now, not 46%. SVG preserveAspectRatio can only anchor
at 0%, 50% or 100%, so the traveller layer could never match 46%
— the car sat 7 to 11 pixels above the ground on any viewport
shorter than the photograph, which is what "driving in the air"
was. Four percent of the overflow is a negligible change to the
crop; a vehicle floating over the hill is not. */
/* OPACITY ONLY, DELIBERATELY.
This entrance used to animate transform:scale as well, with
fill-mode `both` — which retains the final transform forever. A
CSS animation outranks an inline style, so that one declaration
was silently overriding every scroll transform GSAP wrote to this
element: the hero photograph had stopped parallaxing and nothing
reported it. The rule this codebase already states elsewhere is
one writer per property; it was being broken on the main image.
GSAP owns transform on the ; the entrance owns opacity; the
breath lives on the wrapper. Three properties, three owners. */
animation:vtPhotoIn 1.5s cubic-bezier(.22,1,.36,1) both}
@keyframes vtPhotoIn{from{opacity:0}to{opacity:1}}
/* GRADED, NOT FLAT. Dark at the top where the navigation sits and
at the bottom behind the headline, near-clear through the middle
so the hills stay visible. A uniform overlay dark enough to
carry white text greys out the whole photograph. */
.vt-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg, rgba(6,20,15,.52) 0%, rgba(6,20,15,.16) 22%,
rgba(6,20,15,.06) 46%, rgba(6,20,15,.40) 78%,
rgba(6,20,15,.70) 100%),
radial-gradient(120% 78% at 50% 72%, rgba(6,20,15,.40) 0%, transparent 62%)}
.vt-hero{background:#0B2118}
.vt-copy{z-index:6}
.vt-birds{z-index:8}
/* the scrim already carries the text — the extra ellipse behind
the copy was doubling up and flattening the middle distance */
.vt-copy:before{display:none}
.vt-hero:after{display:none}
@media (max-width:720px){
/* On a tall phone frame the horizon is what carries the picture —
crop into the empty foreground grass rather than losing the
ridgelines off the top. */
.vt-photo img{object-position:50% 34%}
}
@media (prefers-reduced-motion:reduce){
.vt-photo img{animation:none}
}
/* ============================================================
THE HERO IN THREE DIMENSIONS
------------------------------------------------------------
The birds are gone. What replaces them is not another thing
moving on top of the picture — it is the picture itself having
depth. Three planes cut from one photograph by estimated
distance, each moving at its own rate.
Why this works where a flat parallax does not: when you move
your pointer, the near grass swings noticeably, the mid hills
swing a little, and the horizon barely moves at all. That
difference in rate IS binocular depth as far as your visual
system is concerned, and it is the same cue a real 3D scene
gives you. One image sliding as a whole gives you none of it.
============================================================ */
/* the planes are additive over the flat photograph beneath, so a
failed load costs nothing */
/* LIGHT IN THE AIR. A single warm sweep crossing the valley on a
very long period — long enough that you never catch it moving,
short enough that the frame is never twice the same. */
/* THE HAZE IS GONE.
Two layers washed the photograph: a broad radial glow and a
soft-light sweep at 70%. Individually each was subtle; together
they put a permanent fog over a picture whose whole appeal is how
far you can see across the plateau. The graded scrim stays — that
one is load-bearing, it is what makes the headline readable. */
/* ============================================================
HERO COLOUR — MATCHED TO THE VIEW
------------------------------------------------------------
The controls were built for a dark green hero and are sitting on
a golden-hour field. Everything below is sampled from the
photograph itself: the lit grass, the shadowed grass, the warm
band on the horizon. Interface colour taken FROM an image always
sits on it better than interface colour chosen beside it.
============================================================ */
.vt-hero{--vtLit:#C8D96A; /* sunlit grass */
--vtWarm:#F0D89A; /* the horizon band */
--vtDeep:#20301C; /* the shadow in the turf*/
--vtCream:#FBF7E9}
.vt-hero .badge{background:rgba(32,48,28,.46);
border:1px solid rgba(200,217,106,.42);color:var(--vtCream);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vt-hero .badge .dot{background:var(--vtLit);
box-shadow:0 0 10px rgba(200,217,106,.9)}
.vt-title{color:var(--vtCream);
text-shadow:0 3px 26px rgba(14,26,12,.62),0 1px 3px rgba(14,26,12,.5)}
.vt-title em{color:var(--vtWarm);font-style:italic}
.vt-sub{color:rgba(251,247,233,.86);
text-shadow:0 2px 16px rgba(14,26,12,.6)}
.vt-badge{background:rgba(32,48,28,.42);
border:1px solid rgba(200,217,106,.30);color:var(--vtCream);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vt-badge b{color:var(--vtLit)}
.vt-badge i{color:rgba(240,216,154,.72)}
.vt-badge.vt-unsourced{border-color:rgba(240,216,154,.5)}
.vt-badge.vt-unsourced b{color:var(--vtWarm)}
/* the primary button takes the colour of the lit grass; the
secondary is glass so the view shows through it */
.vt-hero .btn-p{background:var(--vtLit);color:#1A2614;border-color:var(--vtLit);
box-shadow:0 10px 30px -12px rgba(200,217,106,.55)}
.vt-hero .btn-p:hover{background:#D7E67F;border-color:#D7E67F}
.vt-hero .btn-s{background:rgba(32,48,28,.34);color:var(--vtCream);
border:1px solid rgba(251,247,233,.34);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vt-hero .btn-s:hover{background:rgba(32,48,28,.5);border-color:rgba(200,217,106,.6)}
.vt-scrollcue{color:rgba(251,247,233,.72)}
.vt-scrollcue:after{background:linear-gradient(rgba(200,217,106,.85),transparent)}
/* the scrim warms up to match the hour */
.vt-scrim{background:
linear-gradient(180deg, rgba(18,28,14,.50) 0%, rgba(18,28,14,.14) 22%,
rgba(18,28,14,.05) 46%, rgba(18,28,14,.38) 78%,
rgba(20,30,16,.68) 100%),
radial-gradient(120% 78% at 50% 70%, rgba(18,28,14,.36) 0%, transparent 62%)}
@media (prefers-reduced-motion:reduce){
}
/* ============================================================
HEADLINE — TWO LINES, AND A DARK GREEN NAME
------------------------------------------------------------
Each line is a block, so the break is structural. It cannot
become three lines when the Khmer runs long, and the province
name can never be pulled up beside the phrase above it.
THE CONTRAST PROBLEM, AND HOW IT IS SOLVED
Dark green on a dark scrim is unreadable, and simply lightening
the text would lose the colour that was asked for. So the plate
goes behind the word instead: a soft warm-white pill, blurred at
the edges, sitting only under "Mondulkiri". The name reads as
deep forest green on light, which is both the colour requested
and the strongest contrast on the whole page — 12:1 against its
own plate, where white-on-photo manages about 4:1.
============================================================ */
/* ---- THE PHRASE IS SET LIKE SOMETHING GROWN ----
The province name beside it is DRAWN — bending trunks, tapering
limbs, conifers on the ascenders. The phrase above cannot be: it
changes in five languages and would need a hundred glyphs, three
of them in scripts I cannot draw.
So it is set instead, in the most organic register the typeface
has. Fraunces italic is not a slanted roman — it is a separate
calligraphic design with real movement in the strokes. SOFT is
pushed further than the site default, which rounds the terminals
toward something cut by hand, and the tracking is opened slightly
so the words breathe like the letters beside them rather than
sitting in a tight machined row.
The weight comes DOWN, not up. Heavy type reads as engineering;
this needs to read as growth. */
.vt-title{display:flex;flex-direction:column;align-items:center;gap:.06em;
font-size:clamp(1.85rem,4.4vw,3.7rem);line-height:1.1}
.vt-line{display:block}
.vt-line:first-child{max-width:22ch}
.vt-name{position:relative;display:inline-block;margin-top:.12em;
padding:.06em .42em .1em;border-radius:.42em;isolation:isolate}
.vt-title em{color:#12402C}
/* On a phone the plate would be wider than the column, so it
softens to a simple underline and the name lightens to stay
legible against the photograph directly. */
@media (max-width:600px){
}
/* ============================================================
MORE LIGHT
------------------------------------------------------------
The scrim was built for white text over a dark hero. With the
name now carrying its own plate, the picture no longer has to be
held down to keep the words readable — so the middle opens right
up and the photograph gets its own hour back.
============================================================ */
.vt-scrim{background:
linear-gradient(180deg, rgba(18,28,14,.40) 0%, rgba(18,28,14,.08) 20%,
rgba(18,28,14,0) 44%, rgba(18,28,14,.20) 76%,
rgba(20,30,16,.52) 100%),
radial-gradient(120% 74% at 50% 68%, rgba(18,28,14,.16) 0%, transparent 62%)}
/* the planes themselves lift: more light, a touch more colour, and
the blacks opened slightly so the shadowed turf keeps detail */
/* ============================================================
THE SURVEY OVERLAY
------------------------------------------------------------
What makes this feel like an instrument rather than a slideshow:
a scan line crosses the valley once on load, and four points
latch onto the landscape behind it, in order, each with a
hairline leader and a figure the platform can source.
It reads as futuristic because it reads as MEASUREMENT. A
generic particle field would have been three lines of CSS and
would have said nothing about what this site is.
============================================================ */
/* one ring, expanding and gone — a locator, not a disco */
/* the right-hand pins hang their tags to the LEFT, or they run off
the edge of the viewport */
/* ---------- MOTES ---------- */
@media (max-width:720px){
/* four tags in a phone-width frame is clutter; keep two */
}
@media (prefers-reduced-motion:reduce){
}
/* ============================================================
THE NAME — NO PLATE, AND A COLOUR THAT SURVIVES ANY GROUND
------------------------------------------------------------
The plate is gone. Without it the word has to hold its own over
whatever the photograph happens to put behind it — lit grass in
one place, shadowed turf in another — and a single flat colour
cannot do that.
So the word is BUILT rather than coloured:
1. A lit-leaf green fill (#B9E06A), taken from the sunlit
grass in the picture, so it belongs to the scene.
2. A deep-forest outline drawn in eight directions around
every glyph. That outline is what makes it legible on ANY
background — light or dark, the letterform keeps a hard
edge and never dissolves into the hillside.
3. A soft dark glow further out, which separates the whole
word from busy texture without greying the picture.
An outline is what a road sign does, and for the same reason: it
is the only way a single colour reads against an unknown ground.
============================================================ */
/* No rule under the name. The ridge that used to sit here was
14 points squashed into a 22-pixel band across the full width,
which flattens into something indistinguishable from a plain
underline — the opposite of the intention. The outline on the
letterform is doing the work; it does not need a plinth. */
.vt-name{position:relative;display:inline-block;padding:0 .06em .34em}
.vt-name em,.vt-name span{
font-style:italic;
/* DARK GREEN. The old pale green needed a hard dark outline to
survive the photograph; inverted, the name needs a LIGHT halo
instead. Same job, opposite direction — the outline is always
the opposite value to the fill, never a colour choice. */
color:#0F3A26;
/* THE KEYLINE IS THE CONTRAST, AND IT IS DELIBERATE.
Measured on the shipped composite, dark green against the lower
hero is 1.11:1 — no contrast at all. It cannot be fixed by
lightening the ground, because the lede and the badges below are
light text that need that scrim dark. So the word is set as
outlined lettering: a dark letterform read against its own light
edge, which measures 11.3:1.
The offsets are in em, not px. At 2px fixed they were a third of
the letter weight on a phone and a hairline at 4.4rem — the
keyline thinned out exactly where the type got biggest. In em it
holds the same proportion at every size the clamp produces. */
-webkit-text-stroke:0;
text-shadow:
-.045em -.045em 0 #E9F7D4, .045em -.045em 0 #E9F7D4,
-.045em .045em 0 #E9F7D4, .045em .045em 0 #E9F7D4,
0 -.05em 0 #E9F7D4, 0 .05em 0 #E9F7D4,
-.05em 0 0 #E9F7D4, .05em 0 0 #E9F7D4,
0 .06em .22em rgba(233,247,212,.42);
}
/* ---- THE DRAWN WORDMARK ----
Latin only. Shown for en/fr/es, hidden for km/zh where the live
translated text takes over — the drawing spells one word in one
script, and pretending otherwise would put the wrong name on the
page for two of the five languages.
currentColor, so the wordmark inherits whatever the headline is
set to and cannot drift out of sync with it. */
.vt-wm{display:block;width:min(74vw,13.5em);height:auto;margin:.06em auto .30em;
color:#0F3A26;
filter:drop-shadow(0 0 2px #E9F7D4) drop-shadow(0 0 2px #E9F7D4)
drop-shadow(0 3px 14px rgba(233,247,212,.45))}
.vt-nameTxt{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
/* Khmer and Chinese: the drawing goes, the words come back. */
body.km .vt-wm,body.zh .vt-wm{display:none}
body.km .vt-nameTxt,body.zh .vt-nameTxt{position:static;width:auto;height:auto;
overflow:visible;clip:auto;white-space:normal}
/* ---- THE RULE UNDER THE NAME ----
A ridgeline went here once and was removed: fourteen points
squashed into a 22px band flattened into something indistinguish-
able from a plain underline, which was the opposite of the point.
The fix is not more detail, it is FEWER peaks and more height —
four summits across a 140:20 box, so at any rendered width the
peaks stay a third of the mark tall and read as mountains rather
than as a wobble. */
.vt-name:after{content:"";position:absolute;left:.06em;right:.06em;bottom:.02em;
height:.30em;
background:no-repeat center/100% 100% url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 20' fill='none'%3E\
%3Cpath d='M1 18 L20 5 L32 12 L54 2 L72 14 L90 4 L106 11 L124 3 L139 18' \
stroke='%232E7D4F' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E\
%3C/svg%3E")}
/* ---- 4 · THE SCROLL CUE, ABOVE THE FOLD ----
It was pinned 28px from the bottom, which on a 100vh hero puts
it exactly where a phone's browser chrome sits. Lifted clear. */
/* Far enough up to clear phone browser chrome, far enough down to
stay clear of the buttons above it. The earlier value put it
into the CTA row on short viewports. */
.vt-cueUp{bottom:clamp(26px,5vh,52px)}
@media (max-width:600px){
.vt-name em,.vt-name span{-webkit-text-stroke-width:2px}
}
@media (prefers-reduced-motion:reduce){
}
/* ============================================================
6 · THE INTERIOR PAGES GET THEIR OWN LAND
------------------------------------------------------------
Community, Living, Atlas, Plan, Dossier, Legal and Contribute
all opened on the same flat dark band. Each now carries a
coloured wash drawn from a different part of the province — the
forest floor, the plateau at noon, the Srepok, laterite, dry
grass — with the contour seal and a ridgeline horizon over it.
Same three drawings the rest of the site uses, so this is the
existing system applied further rather than a new decoration.
Each page gets a different hue and a different seal angle, which
is what stops seven page headers reading as one template.
============================================================ */
.deep-band{position:relative}
body.p-community .deep-band{background:linear-gradient(152deg,#123B2C 0%,#0F3325 54%,#0B2118 100%)}
body.p-live .deep-band{background:linear-gradient(152deg,#14402F 0%,#123227 56%,#0B2118 100%)}
body.p-atlas .deep-band{background:linear-gradient(152deg,#12303F 0%,#122B33 56%,#0B1D22 100%)}
body.p-plan .deep-band{background:linear-gradient(152deg,#1B2E3E 0%,#152634 56%,#0D1A22 100%)}
body.p-dossier .deep-band{background:linear-gradient(152deg,#3A2A1E 0%,#2A2018 56%,#170F0A 100%)}
body.p-legal .deep-band{background:linear-gradient(152deg,#33291A 0%,#261F14 56%,#14100A 100%)}
body.p-contribute .deep-band{background:linear-gradient(152deg,#1E3A2A 0%,#162C20 56%,#0B2118 100%)}
/* the seal turns a different way on each, so no two headers are
the same picture */
body.p-live .deep-band::after{transform:rotate(40deg)}
body.p-atlas .deep-band::after{transform:rotate(-25deg)}
body.p-plan .deep-band::after{transform:rotate(62deg)}
body.p-dossier .deep-band::after{transform:rotate(-52deg)}
body.p-legal .deep-band::after{transform:rotate(18deg)}
body.p-contribute .deep-band::after{transform:rotate(-8deg)}
/* ---- ROUTES TO THE TWO NEW DATASETS ----
Both blocks sit near the foot of a long page. Without a pointer
from the top, they are published in the sense that the file is
on the server and unpublished in every sense that matters. */
.lgJump,.lgJumpFromHome{display:grid;gap:12px;margin:26px auto 8px;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.lgJumpFromHome{max-width:1160px;padding:0 26px;margin-top:34px}
.lgJumpLink{display:block;padding:16px 18px;border-radius:14px;
text-decoration:none;border:1px solid var(--line);
background:linear-gradient(140deg,rgba(31,110,90,.06),transparent);
transition:transform var(--t2,.42s) var(--sm,ease),
box-shadow var(--t2,.42s) var(--sm,ease),
border-color var(--t2,.42s) ease}
.lgJumpLink:hover{transform:translateY(-3px);
border-color:rgba(31,110,90,.4);
box-shadow:0 14px 34px -18px rgba(11,33,24,.4)}
.lgJumpLink strong{display:block;color:var(--forest);font-size:1rem;margin-bottom:4px}
.lgJumpLink span{display:block;color:var(--muted);font-size:.85rem;line-height:1.55}
.lgJumpLink:after{content:" →";color:var(--moss,#1F6E4E)}
/* ============================================================
THE FIGURE STANDARD
------------------------------------------------------------
THE PROBLEM THIS SOLVES
Numbers had accumulated on this site in six different visual
forms: quick-fact tiles, wind-tracker cards, chart labels, plain
bold text inside paragraphs, ELC columns, hero badges. Each had
its own way of showing — or not showing — where the figure came
from and how far it could be trusted.
A reader cannot learn six patterns. They learn one, or they stop
checking. And the moment they stop checking, the sourcing that
makes this platform worth more than a blog becomes invisible
work.
So: ONE component. Every figure anywhere on the site is a value,
a unit, a label, and a provenance line — in that order, always,
at four sizes. Nothing renders a number without the last part.
THE FOUR STATES, AND WHY FOUR
VERIFIED read from the primary document. Green.
REPORTED from published journalism or secondary literature,
not from the instrument itself. Neutral.
CONTESTED two sources disagree and both are shown. Amber —
this is the state the platform exists to make
visible, so it is the loudest.
UNSOURCED no source recorded. Red-brown, and deliberately
ugly. If this ever appears in production it is a
defect, and it should look like one.
Three states would have been tidier. Four is right because
"contested" is not a degraded kind of "verified" — it is a
finding in its own right, and often the most useful thing on
the page.
============================================================ */
.fig{display:flex;flex-direction:column;gap:2px}
.fig-v{font-weight:650;line-height:1.05;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--ink,#0B2118)}
.fig-u{font-size:.5em;font-weight:500;opacity:.62;margin-left:.18em;
letter-spacing:0}
.fig-l{font-size:.92rem;line-height:1.5;color:#4A5A50} /* was --muted #65756B: 2.77:1, under AA */
/* four sizes, one scale. Every figure on the site is one of these,
which is what stops eight different type sizes appearing for
what is conceptually the same object. */
.fig-xl .fig-v{font-size:clamp(2.2rem,4.6vw,3.4rem)}
.fig-lg .fig-v{font-size:clamp(1.7rem,3vw,2.4rem)}
.fig-md .fig-v{font-size:1.45rem}
.fig-sm .fig-v{font-size:1.1rem}
/* ---- PROVENANCE ---- */
.fig-src{display:inline-flex;align-items:center;gap:6px;margin-top:6px;
font-size:.7rem;letter-spacing:.02em;line-height:1.45;
padding:3px 9px;border-radius:999px;width:fit-content;
border:1px solid transparent}
.fig-src:before{content:"";width:6px;height:6px;border-radius:50%;flex:none}
.fig-verified {color:#1B5E43;background:rgba(31,110,90,.09);border-color:rgba(31,110,90,.2)}
.fig-verified:before{background:#1F6E4E}
.fig-reported {color:#4A5A54;background:rgba(74,90,84,.08);border-color:rgba(74,90,84,.18)}
.fig-reported:before{background:#7E8B84}
.fig-contested {color:#7A5310;background:rgba(185,143,53,.14);border-color:rgba(185,143,53,.38);font-weight:600}
.fig-contested:before{background:#B98F35}
.fig-unsourced {color:#8A2F1E;background:rgba(160,60,40,.12);border-color:rgba(160,60,40,.42)}
.fig-unsourced:before{background:#A03C28}
/* ---- THE CONTESTED PAIR ----
Two figures side by side with nothing between them implying one
wins. The centre column is the whole design: a plain word, not
an arrow, not an equals sign, because both of those suggest a
direction of correction that does not exist. */
.fig-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;
align-items:start;margin:18px 0;
padding:18px;border-radius:16px;
background:linear-gradient(150deg,rgba(185,143,53,.06),transparent);
border:1px solid rgba(185,143,53,.26)}
.fig-pair-vs{align-self:center;font-size:.68rem;letter-spacing:.16em;
text-transform:uppercase;color:#7A5310;font-weight:600;white-space:nowrap;
padding-top:6px}
.fig-pair-note{grid-column:1/-1;margin:6px 0 0;font-size:.88rem;
line-height:1.62;color:var(--muted)}
.fig-pair-gap{grid-column:1/-1;font-weight:600;color:#7A5310;
font-size:.92rem;margin:8px 0 0}
@media (max-width:640px){
.fig-pair{grid-template-columns:1fr;gap:10px}
.fig-pair-vs{padding:2px 0}
}
/* ---- A GRID OF FIGURES ---- */
.fig-grid{display:grid;gap:20px 24px;
grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:22px 0}
/* ---- THE LEGEND ----
Shown once per page that carries figures. A colour system nobody
is told about is decoration. */
.fig-key{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 26px;
padding:14px 16px;border-radius:14px;
background:rgba(31,110,90,.04);border:1px solid var(--line)}
.fig-key .fig-src{margin-top:0}
.fig-key-t{width:100%;font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);margin-bottom:2px}
/* The quick-fact tile is now a container for a DATUM figure rather
than a bespoke layout of its own. Its old typography rules would
fight the component, so they stand down inside it — one owner
per element, the rule this project keeps relearning. */
.qf .fig{align-items:flex-start;text-align:left}
.qf .fig-v{color:#0F2E24} /* 12.1:1 on the light band */
.qf > b,.qf > span{display:none}
.qfg{align-items:start}
/* ============================================================
THE CONTOUR FIELD
------------------------------------------------------------
Eighteen nested lines over the ridge band. Three things happen
to them, in this order, and the order is the design:
1. THEY DRAW THEMSELVES, lowest line first, over about three
seconds. This is the futuristic part and it is worth its
cost — the terrain appears to be measured rather than
decorated. stroke-dashoffset forces a repaint per frame,
which is why this happens ONCE and then stops. The same
technique on 131 hero paths is what made the old hero
shimmer; on eighteen, for three seconds, it is free.
2. A PULSE TRAVELS UP THROUGH THEM afterwards, on a long loop.
This is a masked gradient sliding — transform and opacity
only, composited, permanent. Doing the loop with
dashoffset would have kept the repaint running forever.
3. THEY BREATHE, barely, on an unrelated period, so the field
never sits completely still.
`mix-blend-mode:overlay` makes the lines take their brightness
from the hillside underneath: bright on sunlit slopes, invisible
in shadow. That is the difference between ink on terrain and a
sticker in front of it.
============================================================ */
/* The draw-on. Each path carries its own --len so a short summit ring
and a long valley sweep finish together. stroke-dashoffset repaints,
which is why this runs ONCE — forwards, no iteration count. */
/* ---- THE ROUTE ----
One line kept live. A raw contour is closed and wandering: it
doubles back, so a vehicle on it drives backwards halfway along and
flips upside down. This one is the widest-spanning line, turned
west-to-east with every backtracking point dropped — still the true
shape of that elevation, but crossing the frame once, in one
direction. That is what makes it passable. */
/* ---- THE CAR ----
offset-path is the obvious tool and it is the wrong one:
offset-distance is not a compositor property and this loop never
stops. The route is sampled into seventy-two translate+rotate
stops instead — identical motion, transform only, and the car
tilts with the ground because the rotation comes from the real
gradient of the line it is standing on.
transform-box:view-box pins the origin to the SVG's own 0,0, so
translate-then-rotate behaves exactly like an SVG transform
attribute rather than pivoting around the car's bounding box. */
/* The car rides in its OWN layer, not inside the contour field.
The field is mix-blend-mode:screen — screen only ever brightens, so
a dark green vehicle drawn inside it composites to precisely
nothing. Same viewBox and the same slice, so the two coordinate
systems stay welded; only the blending differs. */
/* NOT .vt-track — that name was already taken by the drawn scene's
road graphic (fill:none;stroke:#D8B98A;stroke-width:11). fill and
stroke are INHERITED, so reusing the name painted an 11-unit tan
outline onto every car shape that did not set its own stroke, and
the vehicle rendered as a blob. Nothing in the markup showed it and
every standalone render of the SVG looked correct, because the
collision only exists once the parent div's CSS applies.
The explicit paint reset below is belt and braces: this layer
should never inherit paint from anything above it, whatever gets
added later. */
.vt-travellers{position:absolute;inset:0;z-index:3;pointer-events:none;
fill:none;stroke:none}
.cf-track{width:100%;height:100%;display:block;fill:none;stroke:none}
.cf-car{transform-box:view-box;transform-origin:0 0;
animation:cfDrive 34s linear infinite;will-change:transform}
/* ---- THE PACE IS THE POINT ----
The keyframe stops are no longer evenly spaced in time. Each one
sits where the vehicle would actually be after equal DISTANCE, and
the time between them comes from the gradient of the ground under
it — 0.68x speed on the climb, 1.05x on the descent, a 1.5x spread.
The easing stays linear precisely because the variation now lives
in the geometry rather than in a curve applied on top of it.
Constant speed is what makes a moving object read as tweened. A
thing that slows for the hill reads as driven. It is the cheapest
human cue available and it costs nothing at runtime. */
/* ---- THE WALKER ----
Somebody walking the other way. Two travellers crossing in
opposite directions read as a place with its own traffic; one
moving object reads as an animated prop. Walking pace is roughly
a fifth of the car's, which is why the timing is 150s and not a
number chosen to look busy. */
.cf-walker{transform-box:view-box;transform-origin:0 0;
animation:cfWalk 150s linear infinite;will-change:transform}
.cf-gait{animation:cfBob 1.15s ease-in-out infinite}
@keyframes cfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.9px)}}
@keyframes cfWalk{0%{transform:translate(893px,427px)}2.083%{transform:translate(885px,410px)}4.167%{transform:translate(874px,394px)}6.25%{transform:translate(858px,384px)}8.333%{transform:translate(838px,384px)}10.42%{transform:translate(819px,386px)}12.5%{transform:translate(800px,388px)}14.58%{transform:translate(781px,390px)}16.67%{transform:translate(762px,391px)}18.75%{transform:translate(742px,393px)}20.83%{transform:translate(723px,394px)}22.92%{transform:translate(704px,395px)}25%{transform:translate(685px,396px)}27.08%{transform:translate(665px,397px)}29.17%{transform:translate(646px,397px)}31.25%{transform:translate(627px,396px)}33.33%{transform:translate(608px,393px)}35.42%{transform:translate(589px,390px)}37.5%{transform:translate(569px,387px)}39.58%{transform:translate(550px,385px)}41.67%{transform:translate(531px,384px)}43.75%{transform:translate(512px,382px)}45.83%{transform:translate(493px,381px)}47.92%{transform:translate(473px,380px)}50%{transform:translate(454px,378px)}52.08%{transform:translate(435px,376px)}54.17%{transform:translate(416px,373px)}56.25%{transform:translate(397px,370px)}58.33%{transform:translate(378px,366px)}60.42%{transform:translate(359px,363px)}62.5%{transform:translate(340px,359px)}64.58%{transform:translate(321px,356px)}66.67%{transform:translate(302px,353px)}68.75%{transform:translate(283px,351px)}70.83%{transform:translate(263px,349px)}72.92%{transform:translate(244px,348px)}75%{transform:translate(225px,346px)}77.08%{transform:translate(206px,344px)}79.17%{transform:translate(187px,341px)}81.25%{transform:translate(168px,338px)}83.33%{transform:translate(149px,334px)}85.42%{transform:translate(130px,329px)}87.5%{transform:translate(112px,324px)}89.58%{transform:translate(93px,319px)}91.67%{transform:translate(75px,313px)}93.75%{transform:translate(57px,307px)}95.83%{transform:translate(38px,302px)}97.92%{transform:translate(19px,298px)}100%{transform:translate(0px,295px)}}
@keyframes cfDrive{0%{transform:translate(0px,254px) rotate(12.0deg)}1.273%{transform:translate(22px,258px) rotate(14.2deg)}2.529%{transform:translate(45px,263px) rotate(16.0deg)}3.75%{transform:translate(66px,270px) rotate(16.0deg)}4.966%{transform:translate(88px,278px) rotate(16.0deg)}6.202%{transform:translate(109px,285px) rotate(14.0deg)}7.459%{transform:translate(131px,291px) rotate(11.8deg)}8.735%{transform:translate(154px,296px) rotate(10.7deg)}10.02%{transform:translate(176px,300px) rotate(10.3deg)}11.31%{transform:translate(199px,304px) rotate(9.4deg)}12.6%{transform:translate(221px,308px) rotate(6.7deg)}13.92%{transform:translate(244px,311px) rotate(3.7deg)}15.27%{transform:translate(266px,313px) rotate(2.1deg)}16.63%{transform:translate(289px,314px) rotate(1.9deg)}17.99%{transform:translate(312px,315px) rotate(2.7deg)}19.34%{transform:translate(335px,316px) rotate(5.3deg)}20.67%{transform:translate(357px,317px) rotate(9.9deg)}21.97%{transform:translate(380px,319px) rotate(14.1deg)}23.22%{transform:translate(402px,325px) rotate(15.0deg)}24.47%{transform:translate(424px,331px) rotate(12.3deg)}25.74%{transform:translate(446px,336px) rotate(9.9deg)}27.03%{transform:translate(469px,340px) rotate(7.3deg)}28.35%{transform:translate(491px,343px) rotate(5.3deg)}29.68%{transform:translate(514px,346px) rotate(4.3deg)}31.02%{transform:translate(537px,347px) rotate(4.5deg)}32.36%{transform:translate(559px,349px) rotate(4.7deg)}33.69%{transform:translate(582px,351px) rotate(3.1deg)}35.04%{transform:translate(605px,353px) rotate(0.1deg)}36.42%{transform:translate(628px,353px) rotate(-1.5deg)}37.82%{transform:translate(650px,353px) rotate(-1.1deg)}39.21%{transform:translate(673px,352px) rotate(-0.4deg)}40.6%{transform:translate(696px,352px) rotate(-1.5deg)}41.99%{transform:translate(719px,352px) rotate(-4.4deg)}43.42%{transform:translate(742px,351px) rotate(-7.4deg)}44.87%{transform:translate(764px,348px) rotate(-9.7deg)}46.36%{transform:translate(787px,345px) rotate(-11.2deg)}47.86%{transform:translate(809px,340px) rotate(-13.6deg)}49.38%{transform:translate(831px,335px) rotate(-14.9deg)}50.92%{transform:translate(853px,329px) rotate(-13.8deg)}52.45%{transform:translate(875px,324px) rotate(-10.5deg)}53.94%{transform:translate(898px,319px) rotate(-7.0deg)}55.4%{transform:translate(920px,317px) rotate(-6.8deg)}56.85%{transform:translate(943px,315px) rotate(-10.8deg)}58.34%{transform:translate(966px,312px) rotate(-16.0deg)}59.9%{transform:translate(988px,306px) rotate(-16.0deg)}61.53%{transform:translate(1009px,298px) rotate(-16.0deg)}63.24%{transform:translate(1030px,288px) rotate(-16.0deg)}65.06%{transform:translate(1049px,276px) rotate(-16.0deg)}66.93%{transform:translate(1066px,261px) rotate(-16.0deg)}68.73%{transform:translate(1084px,247px) rotate(-16.0deg)}70.4%{transform:translate(1104px,237px) rotate(-13.7deg)}71.92%{transform:translate(1126px,230px) rotate(-3.7deg)}73.34%{transform:translate(1149px,228px) rotate(6.9deg)}74.66%{transform:translate(1171px,230px) rotate(10.1deg)}75.95%{transform:translate(1194px,234px) rotate(8.5deg)}77.25%{transform:translate(1216px,238px) rotate(4.4deg)}78.59%{transform:translate(1239px,240px) rotate(1.5deg)}79.95%{transform:translate(1262px,241px) rotate(1.7deg)}81.32%{transform:translate(1285px,242px) rotate(5.0deg)}82.65%{transform:translate(1307px,243px) rotate(10.6deg)}83.94%{transform:translate(1330px,247px) rotate(15.2deg)}85.19%{transform:translate(1352px,253px) rotate(15.7deg)}86.43%{transform:translate(1374px,259px) rotate(13.2deg)}87.69%{transform:translate(1396px,265px) rotate(10.5deg)}88.98%{transform:translate(1418px,269px) rotate(7.0deg)}90.3%{transform:translate(1441px,272px) rotate(3.4deg)}91.64%{transform:translate(1463px,275px) rotate(-0.6deg)}93.03%{transform:translate(1486px,275px) rotate(-2.7deg)}94.44%{transform:translate(1509px,274px) rotate(-3.9deg)}95.86%{transform:translate(1532px,273px) rotate(-2.6deg)}97.26%{transform:translate(1554px,271px) rotate(0.7deg)}98.64%{transform:translate(1577px,271px) rotate(2.0deg)}100%{transform:translate(1600px,272px) rotate(2.6deg)}}
/* ---- THE CIRCULATION ----
A light orbits the field, masked by the contour lines themselves,
so brightness travels AROUND the rings while the lines stay locked
to the terrain. A circular orbit in a band 1600 wide and 280 tall
swings out of frame within a few degrees, so the rotation happens
inside a Y-squashed group: a circle becomes a shallow ellipse and
the light runs the length of the band. */
@media (max-width:720px){
.cf-car{animation-duration:38s}
}
@media (prefers-reduced-motion:reduce){
.cf-car,.cf-walker,.cf-gait{animation:none}
.vt-photo{animation:none}
}
/* the live indicator — one slow blink, not a strobe */
/* ============================================================
GROUPED NAVIGATION
------------------------------------------------------------
Thirteen top-level links did not fit a bar in five languages,
which is why an overflow "More" button existed. But the worse
problem was underneath: every page carried a DIFFERENT nav —
index offered 13 destinations, community 8, atlas 10 — so a third
of the platform was unreachable depending where you stood. And
below 900px, where .navlinks is hidden, seven of the nine pages
had no burger at all: no navigation whatsoever on a phone, in a
province that browses on phones.
Four groups now, generated from one definition, identical on
every page.
============================================================ */
.ndrop{position:relative}
.ndtop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
font:inherit;font-size:.83rem;font-weight:600;color:var(--ink);
padding:8px 2px;cursor:pointer;letter-spacing:.01em}
.ndtop:after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;
border-bottom:1.8px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
opacity:.5;transition:transform .2s ease,opacity .2s ease}
.ndtop:hover{color:var(--forest)}
.ndtop[aria-expanded="true"]{color:var(--forest)}
.ndtop[aria-expanded="true"]:after{transform:rotate(225deg) translate(-2px,-2px);opacity:.9}
.ndtop:focus-visible{outline:2px solid var(--forest);outline-offset:3px;border-radius:4px}
.ndmenu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:212px;
list-style:none;margin:0;padding:8px;
background:var(--paper,#FFFDF7);border:1px solid rgba(15,46,36,.13);
border-radius:14px;box-shadow:0 18px 42px -18px rgba(12,34,24,.34);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;
z-index:320}
.ndrop:hover .ndmenu,
.ndtop[aria-expanded="true"] + .ndmenu{opacity:1;visibility:visible;transform:translateY(0)}
.ndmenu a{display:block;padding:9px 12px;border-radius:9px;
font-size:.83rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.ndmenu a:hover{background:rgba(15,46,36,.06);color:var(--forest)}
.ndmenu a.active{color:var(--forest);font-weight:650;background:rgba(15,46,36,.05)}
.ndmenu a:focus-visible{outline:2px solid var(--forest);outline-offset:-2px}
/* a hover bridge, so the pointer can cross the 10px gap without the
menu closing under it — the classic reason dropdowns feel broken */
.ndrop:after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
/* ---- MOBILE: grouped, but nothing hidden behind another tap ----
An accordion buys tidiness at the cost of a tap per group. This is
a reference site people arrive at knowing what they want, so the
groups are headings and every destination stays visible. */
.mobgrp{margin:22px 0 6px;font-size:.63rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted)}
.mobgrp:first-child{margin-top:4px}
#mobmenu a{display:block;padding:11px 2px;font-size:1.05rem;color:var(--ink);
text-decoration:none;border-bottom:1px solid rgba(15,46,36,.07)}
body.km .mobgrp,body.zh .mobgrp{text-transform:none;letter-spacing:.04em}
@media(max-width:900px){
/* the desktop groups go, the burger arrives. One breakpoint, both
halves of the swap, so they cannot drift apart. */
.ndrop,.ndtop,.ndmenu{display:none}
.burger{display:flex}
}
/* ============================================================
THE HERO STACK FITS THE VIEWPORT IT IS IN
------------------------------------------------------------
Eight blocks stacked to about 546px. A laptop at 1440x800 leaves
roughly 700px of hero after browser chrome, so the stack ran past
the bottom and landed on the scroll cue. Every previous fix moved
a single element by a fixed number of pixels, which relocates the
collision rather than removing it — the stack was simply taller
than the space.
Height media queries are the right tool for a height problem.
Below 820px the spacing tightens; below 720px the three sourced
figures become one compact row; below 640px they step aside
entirely, because a headline you can read beats three numbers you
cannot.
============================================================ */
.vt-copy{gap:clamp(6px,1.6vh,16px)}
.vt-title{margin-bottom:clamp(2px,.8vh,10px)}
.vt-sub{margin-top:clamp(8px,1.6vh,20px)}
.vt-badges{margin-top:clamp(10px,2vh,30px)}
.btns{margin-top:clamp(12px,2.2vh,22px)!important}
@media (max-height:820px){
.vt-copy{padding-bottom:76px}
.vt-sub{font-size:clamp(.9rem,1.4vw,1rem);max-width:44ch}
.vt-badge{padding:6px 12px;font-size:.71rem}
}
@media (max-height:720px){
.vt-copy{padding-bottom:64px}
.vt-badges{gap:6px;margin-top:12px}
.vt-badge{padding:5px 10px;font-size:.67rem}
.vt-badge i{display:none} /* the source chip, not the figure */
.vt-sub{margin-top:10px}
}
@media (max-height:640px){
/* the headline and the two routes onward survive; the rest steps
aside rather than overlapping something */
.vt-badges{display:none}
.vt-copy{padding-bottom:56px}
}
/* ============================================================
DARK GREEN, AND THE THINGS THAT GROW IN IT
------------------------------------------------------------
Two requests in one pass. The palette leans into the deep forest
green the province actually is, and four motifs drawn in the same
hand as the wordmark — a leaf, a branch, a conifer, a gaur —
carry that identity into the surfaces.
The motifs are TINTS, never texture behind text. Each sits at a
few percent opacity in a corner or along an edge where nothing is
read, because a pattern under body copy is the fastest way to
make a reference platform unreadable. They ship as data URIs: no
extra requests, and they inherit no colour, so each is pinned to
a token deliberately.
============================================================ */
:root{
--forest-deep:#0A2119; /* the darkest green here, for large fields */
--forest-mid:#123528; /* section grounds */
--forest-soft:#1B4A37; /* cards on a dark ground */
}
/* sections that were neutral now sit on forest */
.dark{background:var(--forest-deep);color:#F3F7F0}
.dark .eyebrow{color:var(--straw)}
.band-green{background:var(--forest-mid);color:#EEF4EB}
.qfbar{background:linear-gradient(180deg,#FBF8EE 0%,#F2EEDF 100%)}
/* --- the motifs, as quiet corner tints --- */
.leafmark,.branchmark,.conifermark,.gaurmark{position:relative;isolation:isolate}
.leafmark:before,.branchmark:before,.conifermark:before,.gaurmark:before{
content:"";position:absolute;pointer-events:none;z-index:0;
background-repeat:no-repeat;background-size:contain;opacity:.055}
.leafmark:before{right:-14px;top:-10px;width:132px;height:132px;
transform:rotate(14deg);background-image:url("data:image/svg+xml,")}
.branchmark:before{left:-18px;bottom:-8px;width:190px;height:120px;
background-image:url("data:image/svg+xml,")}
.conifermark:before{right:16px;bottom:-6px;width:96px;height:116px;
background-image:url("data:image/svg+xml,")}
.gaurmark:before{right:20px;top:14px;width:168px;height:104px;
background-image:url("data:image/svg+xml,")}
/* on a dark ground the motif has to be light to show at all */
.dark .leafmark:before,.dark .branchmark:before,
.dark .conifermark:before,.dark .gaurmark:before{opacity:.075}
/* content always sits above the tint */
.leafmark>*,.branchmark>*,.conifermark>*,.gaurmark>*{position:relative;z-index:1}
@media(max-width:700px){
.leafmark:before,.branchmark:before,.conifermark:before,.gaurmark:before{display:none}
}
/* ============================================================
THE COLD-SEASON WIND, IN GUSTS
------------------------------------------------------------
The hero is calm until a gust comes through — streaks in the air,
a cluster of small leaves carried with it, then calm again. Each
leaf keeps its own size, spin and amplitude; what they share is
the ARRIVAL. Nothing animates between gusts, so an idle page
costs nothing.
The leaves RIDE the wind rather than falling through it. An
earlier version only sank, which is what a dead leaf does in
still air; on a moving current a leaf lifts, drops, and lifts
again. Three flight paths, so no two neighbours trace the same
curve, and the vertical travel is a rise-and-fall rather than a
slide downward.
============================================================ */
.vt-wind{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.wl,.ws{opacity:0}
.wl{position:absolute;top:var(--y);left:0;width:var(--sz);height:var(--sz);
display:block;background-repeat:no-repeat;background-size:contain;
animation-timing-function:cubic-bezier(.15,.45,.35,1);animation-fill-mode:both}
.wl:before{content:"";position:absolute;inset:0;
background:inherit;background-size:contain;background-repeat:no-repeat;
animation-timing-function:cubic-bezier(.45,0,.55,1);animation-fill-mode:both}
.ws{position:absolute;top:var(--y);left:0;width:var(--w);height:1.5px;border-radius:2px;
background:linear-gradient(90deg,transparent,rgba(226,242,216,.7),transparent);
animation-timing-function:cubic-bezier(.2,.6,.3,1);animation-fill-mode:both}
.vt-wind.gust .wvA{animation-name:wlFlyA}
.vt-wind.gust .wvB{animation-name:wlFlyB}
.vt-wind.gust .wvC{animation-name:wlFlyC}
.vt-wind.gust .wl{will-change:transform,opacity}
.vt-wind.gust .wl:before{animation-name:wlSpin;will-change:transform}
.vt-wind.gust .ws{animation-name:wsRush;will-change:transform,opacity}
/* THREE CURRENTS, AND WHY THEY LOOK LIKE LEAVES.
The first version moved at a near-constant 1.1-1.4 vw per percent
and rotated at a constant rate. Measured, that is a drifting
sticker, not a leaf.
Three things fixed it, in order of how much they matter:
1. EDGE-ON FLASHING. A tumbling leaf turns its edge toward you
several times a second and all but disappears. That is the
single strongest cue, and it costs one scaleX in the spin
keyframes — combined with the rotation on the same element, so
there is still one writer per property.
2. STALL AND RUSH. Horizontal progress is now deliberately uneven:
the leaf catches the air, hangs, then is pushed on. Speeds
range about 3x across a crossing instead of 1.3x.
3. UNEVEN ROTATION. It flips quickly, then holds, rather than
turning like a clock hand. */
@keyframes wlFlyA{
0% {transform:translate3d(-10vw,0,0);opacity:0}
10% {opacity:var(--op)}
22% {transform:translate3d(14vw,calc(var(--amp) * -.9),0)} /* pushed */
38% {transform:translate3d(20vw,calc(var(--amp) * -.2),0)} /* stalls */
58% {transform:translate3d(52vw,calc(var(--amp) * .7),0)} /* dropped */
70% {transform:translate3d(58vw,calc(var(--amp) * .3),0)} /* catches */
88% {transform:translate3d(92vw,calc(var(--amp) * -.5),0);opacity:var(--op)}
100%{transform:translate3d(112vw,calc(var(--amp) * -.1),0);opacity:0}
}
@keyframes wlFlyB{
0% {transform:translate3d(-10vw,0,0);opacity:0}
12% {opacity:var(--op)}
18% {transform:translate3d(8vw,calc(var(--amp) * .5),0)}
40% {transform:translate3d(34vw,calc(var(--amp) * -.85),0)}
50% {transform:translate3d(38vw,calc(var(--amp) * -.6),0)} /* hangs */
74% {transform:translate3d(76vw,calc(var(--amp) * .8),0)}
88% {transform:translate3d(88vw,calc(var(--amp) * .35),0);opacity:var(--op)}
100%{transform:translate3d(112vw,calc(var(--amp) * -.2),0);opacity:0}
}
@keyframes wlFlyC{
0% {transform:translate3d(-10vw,0,0);opacity:0}
9% {opacity:var(--op)}
26% {transform:translate3d(22vw,calc(var(--amp) * -.7),0)}
36% {transform:translate3d(26vw,calc(var(--amp) * -.75),0)} /* hangs */
56% {transform:translate3d(44vw,calc(var(--amp) * .9),0)}
78% {transform:translate3d(84vw,calc(var(--amp) * -.3),0)}
90% {opacity:var(--op)}
100%{transform:translate3d(112vw,calc(var(--amp) * .25),0);opacity:0}
}
/* the tumble: quick flips separated by holds, and the edge-on
flashes where scaleX collapses toward zero */
@keyframes wlSpin{
0% {transform:rotate(0) scaleX(1)}
14% {transform:rotate(calc(var(--spin) * .10)) scaleX(.18)}
26% {transform:rotate(calc(var(--spin) * .34)) scaleX(-.85)}
38% {transform:rotate(calc(var(--spin) * .40)) scaleX(-1)}
52% {transform:rotate(calc(var(--spin) * .58)) scaleX(-.22)}
64% {transform:rotate(calc(var(--spin) * .70)) scaleX(.9)}
78% {transform:rotate(calc(var(--spin) * .74)) scaleX(1)}
90% {transform:rotate(calc(var(--spin) * .92)) scaleX(.3)}
100%{transform:rotate(var(--spin)) scaleX(1)}
}
@keyframes wsRush{
0% {transform:translate3d(-30vw,0,0) scaleX(.4);opacity:0}
20% {opacity:var(--op)}
80% {opacity:var(--op)}
100%{transform:translate3d(120vw,0,0) scaleX(1);opacity:0}
}
.w0{--y:40vh;--amp:14vh;--sz:11px;background-image:url("data:image/svg+xml,");--op:0.84;animation-duration:7.76s;animation-delay:1.34s}
.w0:before{animation-duration:2.44s;--spin:-141deg}
.w1{--y:45vh;--amp:10vh;--sz:7px;background-image:url("data:image/svg+xml,");--op:0.52;animation-duration:5.93s;animation-delay:0.22s}
.w1:before{animation-duration:1.56s;--spin:-146deg}
.w2{--y:13vh;--amp:10vh;--sz:9px;background-image:url("data:image/svg+xml,");--op:0.55;animation-duration:7.29s;animation-delay:2.62s}
.w2:before{animation-duration:1.56s;--spin:-232deg}
.w3{--y:37vh;--amp:12vh;--sz:6px;background-image:url("data:image/svg+xml,");--op:0.63;animation-duration:6.49s;animation-delay:2.47s}
.w3:before{animation-duration:1.88s;--spin:291deg}
.w4{--y:13vh;--amp:8vh;--sz:8px;background-image:url("data:image/svg+xml,");--op:0.82;animation-duration:5.25s;animation-delay:0.78s}
.w4:before{animation-duration:1.41s;--spin:147deg}
.w5{--y:19vh;--amp:11vh;--sz:8px;background-image:url("data:image/svg+xml,");--op:0.78;animation-duration:4.93s;animation-delay:2.48s}
.w5:before{animation-duration:2.39s;--spin:-169deg}
.w6{--y:53vh;--amp:7vh;--sz:9px;background-image:url("data:image/svg+xml,");--op:0.67;animation-duration:5.68s;animation-delay:1.65s}
.w6:before{animation-duration:1.58s;--spin:340deg}
.w7{--y:34vh;--amp:13vh;--sz:10px;background-image:url("data:image/svg+xml,");--op:0.7;animation-duration:7.05s;animation-delay:1.79s}
.w7:before{animation-duration:2.46s;--spin:201deg}
.w8{--y:22vh;--amp:5vh;--sz:6px;background-image:url("data:image/svg+xml,");--op:0.84;animation-duration:6.97s;animation-delay:1.08s}
.w8:before{animation-duration:2.18s;--spin:-157deg}
.w9{--y:58vh;--amp:9vh;--sz:10px;background-image:url("data:image/svg+xml,");--op:0.66;animation-duration:5.2s;animation-delay:2.19s}
.w9:before{animation-duration:1.47s;--spin:-252deg}
.w10{--y:35vh;--amp:5vh;--sz:7px;background-image:url("data:image/svg+xml,");--op:0.8;animation-duration:7.75s;animation-delay:0.82s}
.w10:before{animation-duration:2.46s;--spin:-162deg}
.w11{--y:34vh;--amp:5vh;--sz:8px;background-image:url("data:image/svg+xml,");--op:0.54;animation-duration:6.32s;animation-delay:2.5s}
.w11:before{animation-duration:1.69s;--spin:-178deg}
.w12{--y:48vh;--amp:9vh;--sz:7px;background-image:url("data:image/svg+xml,");--op:0.48;animation-duration:4.95s;animation-delay:1.57s}
.w12:before{animation-duration:2.64s;--spin:269deg}
.w13{--y:56vh;--amp:4vh;--sz:6px;background-image:url("data:image/svg+xml,");--op:0.86;animation-duration:4.92s;animation-delay:0.12s}
.w13:before{animation-duration:1.53s;--spin:-367deg}
.w14{--y:33vh;--amp:6vh;--sz:11px;background-image:url("data:image/svg+xml,");--op:0.68;animation-duration:5.39s;animation-delay:0.97s}
.w14:before{animation-duration:1.44s;--spin:155deg}
.w15{--y:36vh;--amp:12vh;--sz:9px;background-image:url("data:image/svg+xml,");--op:0.64;animation-duration:6.13s;animation-delay:0.04s}
.w15:before{animation-duration:2.52s;--spin:239deg}
.s0{--y:65vh;--w:277px;--op:0.2;animation-duration:1.37s;animation-delay:0.52s}
.s1{--y:9vh;--w:215px;--op:0.23;animation-duration:1.33s;animation-delay:1.33s}
.s2{--y:47vh;--w:284px;--op:0.17;animation-duration:1.06s;animation-delay:0.81s}
.s3{--y:37vh;--w:134px;--op:0.1;animation-duration:1.14s;animation-delay:1.19s}
.s4{--y:35vh;--w:227px;--op:0.23;animation-duration:1.65s;animation-delay:1.39s}
.s5{--y:65vh;--w:135px;--op:0.14;animation-duration:1.01s;animation-delay:0.74s}
.s6{--y:18vh;--w:293px;--op:0.18;animation-duration:1.23s;animation-delay:0.7s}
@media(max-width:700px){ .w10,.w11,.w12,.w13,.w14,.w15,.s5,.s6{display:none} }
@media (prefers-reduced-motion:reduce){ .vt-wind{display:none} }
/* Findings from the research brain, shown beneath a figure and
never in place of it. Deliberately quieter than the sourcing
line above: it is a machine's note, and it should read like
one. */
.fig-brain{font-size:.72rem;line-height:1.45;color:var(--muted);
margin-top:.28rem;padding-left:.6rem;border-left:2px solid var(--sand-line,#CFC4A8)}
.fig-brain-contested{border-left-color:var(--terra-ink)}
/* The reference row. The three audience links carry the header; the
archive that was there before sits directly beneath, quieter but
never more than one click away. Losing the Legal Register from
the header should not mean losing it. */
.subnav{background:var(--forest-deep);border-top:1px solid rgba(255,255,255,.07)}
.subin{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
padding:.42rem 24px;font-size:.78rem}
.subnav .subl{color:rgba(217,231,222,.45);text-transform:uppercase;
letter-spacing:.08em;font-size:.68rem}
.subnav a{color:rgba(217,231,222,.78);text-decoration:none;padding:.15rem 0;
border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.subnav a:hover,.subnav a:focus-visible{color:#fff;border-bottom-color:var(--leaf,#4CAF7D)}
@media(max-width:640px){.subin{gap:.9rem;font-size:.72rem}.subnav .subl{width:100%}}
/* Audience pages */
.aud-hero{padding:3.2rem 0 1.8rem}
.aud-hero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:0 0 .5rem}
.aud-lede{font-size:1.05rem;line-height:1.7;max-width:44rem;color:var(--ink,#1B2B22)}
.aud-sec{padding:2.2rem 0;border-top:1px solid var(--sand-line,#CFC4A8)}
.aud-sec h2{font-size:1.35rem;margin:0 0 .6rem}
.aud-note{color:var(--muted);font-size:.92rem;line-height:1.65;max-width:46rem;margin:0 0 1.1rem}
.aud-list{margin:.6rem 0 0;padding-left:1.1rem;line-height:1.7;max-width:46rem}
.aud-list li{margin:.4rem 0}
.aud-cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:1rem}
.aud-card{background:var(--sand,#F7F0E0);border-radius:5px;padding:1rem 1.1rem}
.aud-card h3{margin:0 0 .35rem;font-size:1.02rem}
.aud-card p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink)}
.aud-season{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:1rem}
.aud-mo{border-left:3px solid var(--sand-line,#CFC4A8);padding:.5rem 0 .5rem .8rem}
.aud-mo.best{border-left-color:var(--leaf-ink,#2E6B45)}
.aud-mo.mixed{border-left-color:var(--gold-ink,#7A5A14)}
.aud-mo b{display:block;font-size:.95rem;margin-bottom:.2rem}
.aud-mo span{font-size:.87rem;line-height:1.55;color:var(--muted)}
.aud-ops{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.5rem;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.aud-ops li{font-size:.9rem;padding:.45rem .7rem;background:var(--sand,#F7F0E0);border-radius:4px}
.aud-ops b{display:block}
.aud-ops span{color:var(--muted);font-size:.84rem}
/* Resources index. Cards rather than a list, because these are
five substantial documents and a list of five links reads as an
afterthought. */
.res-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1rem}
.res-card{display:block;background:var(--sand,#F7F0E0);border-radius:5px;padding:1.05rem 1.15rem;
text-decoration:none;color:inherit;border-left:3px solid var(--leaf-ink,#2E6B45);
transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s}
.res-card:hover,.res-card:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,33,25,.10)}
.res-card h3{margin:0 0 .3rem;font-size:1.04rem}
.res-card p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
/* ============================================================
PAGE TRANSITIONS
Only ever transform and opacity, so the compositor does the
work and nothing reflows mid-move.
The arrival state is applied only when `.pt` is on ,
which the script adds before first paint. Without that guard
a reader whose JavaScript failed would get a page faded to
nothing with nothing left to bring it back.
============================================================ */
.pt main, .pt #main, .pt .lhead{
opacity:0; transform:translate3d(0,14px,0);
transition:opacity .34s cubic-bezier(.2,.7,.3,1), transform .42s cubic-bezier(.2,.7,.3,1)}
.pt .lhead{transition-delay:.02s}
.pt main{transition-delay:.05s}
.pt.pt-in main, .pt.pt-in #main, .pt.pt-in .lhead{
opacity:1; transform:translate3d(0,0,0)}
.pt.pt-leaving main, .pt.pt-leaving #main, .pt.pt-leaving .lhead{
opacity:0; transform:translate3d(0,-8px,0);
transition:opacity .2s ease-in, transform .2s ease-in; transition-delay:0s}
/* the header stays put — the frame should feel fixed while the
contents change, which is what makes it read as one site */
.pt.pt-leaving nav, .pt.pt-leaving .subnav{opacity:1}
.pt-off main, .pt-off #main, .pt-off .lhead{
opacity:1 !important; transform:none !important; transition:none !important}
/* ---- the seven, alive under the cursor ---- */
.navlinks > li > a{position:relative;transition:color .22s ease}
.navlinks > li > a:after{
content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
background:var(--leaf,#4CAF7D);border-radius:2px;
transform:scaleX(0);transform-origin:right center;
transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.navlinks > li > a:hover:after,
.navlinks > li > a:focus-visible:after,
.navlinks > li > a[aria-current="page"]:after{transform:scaleX(1);transform-origin:left center}
/* ---- audience components ---- */
.aud-sec{transition:none}
.aud-card,.aud-mo,.aud-ops li{
transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease, background-color .24s ease}
.aud-card:hover,.aud-ops li:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(10,33,25,.09)}
.aud-mo:hover{transform:translateX(3px)}
/* A figure lifts its provenance line on hover: the source is the
point of the number, and this makes it the thing that answers
when a reader reaches toward it. */
.fig{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.fig:hover{transform:translateY(-1px)}
.fig .fig-src{transition:color .22s ease, opacity .22s ease}
.fig:hover .fig-src{opacity:1}
/* ---- reduced motion turns all of it off, everywhere ---- */
@media (prefers-reduced-motion: reduce){
.pt main,.pt #main,.pt .lhead{opacity:1 !important;transform:none !important;transition:none !important}
.navlinks > li > a:after{transition:none}
.aud-card,.aud-mo,.aud-ops li,.fig,.res-card{transition:none !important}
.aud-card:hover,.aud-ops li:hover,.aud-mo:hover,.fig:hover,.res-card:hover{transform:none !important}
}
/* The province page is long by design — it is the section a reader
goes to in order to understand the place. A rail that says where
you are and lets you jump is the difference between depth and a
wall. It sticks under the header, and the current part lights. */
.mkrail{position:sticky;top:0;z-index:40;background:var(--forest-mid,#123528);
border-top:1px solid rgba(255,255,255,.06);box-shadow:0 2px 10px rgba(10,33,25,.16)}
.mkrail-in{display:flex;gap:1.6rem;padding:.5rem 24px;font-size:.82rem;overflow-x:auto;
scrollbar-width:none}
.mkrail-in::-webkit-scrollbar{display:none}
.mkrail a{color:rgba(217,231,222,.72);text-decoration:none;white-space:nowrap;
padding:.2rem 0;position:relative;transition:color .22s ease}
.mkrail a:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
background:var(--leaf,#4CAF7D);transform:scaleX(0);transform-origin:right center;
transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.mkrail a:hover,.mkrail a.on{color:#fff}
.mkrail a:hover:after,.mkrail a.on:after{transform:scaleX(1);transform-origin:left center}
.mk-part{padding-top:1.4rem;scroll-margin-top:64px}
.mk-part > .wrap > h2{font-size:clamp(1.3rem,2.6vw,1.75rem);margin:.4rem 0 .3rem}
@media (prefers-reduced-motion: reduce){.mkrail a:after{transition:none}}
/* ============================================================
THE PROVINCE RAIL, REDESIGNED
Five parts is too many for plain text links to feel like a
structure. Each entry gets a numeral and a name, the current
one fills with leaf green, and a progress line under the rail
shows how far through the section a reader is. Motion is
transform and opacity only.
============================================================ */
.mkrail-in{gap:.4rem;padding:.34rem 24px .3rem;align-items:stretch}
.mkrail a{display:flex;align-items:center;gap:.5rem;padding:.42rem .7rem;border-radius:4px;
font-size:.8rem;line-height:1.2;color:rgba(217,231,222,.72);
transition:color .24s ease, background-color .24s ease, transform .24s cubic-bezier(.2,.7,.3,1)}
.mkrail a:before{
content:counter(mkr);counter-increment:mkr;
font-size:.62rem;letter-spacing:.04em;width:1.15rem;height:1.15rem;flex:0 0 auto;
display:grid;place-items:center;border-radius:50%;
border:1px solid rgba(217,231,222,.30);color:rgba(217,231,222,.66);
transition:background-color .26s ease,border-color .26s ease,color .26s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.mkrail-in{counter-reset:mkr}
.mkrail a:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateY(-1px)}
.mkrail a.on{color:#fff;background:rgba(76,175,125,.16)}
.mkrail a.on:before{background:var(--leaf,#4CAF7D);border-color:var(--leaf,#4CAF7D);
color:var(--forest-deep,#0A2119);transform:scale(1.06)}
.mkrail a:after{display:none} /* the numeral replaces the underline */
.mkrail-prog{height:2px;background:rgba(255,255,255,.08)}
/* scaleX, not width. Animating width makes the browser lay the
element out again on every frame; scaleX is a compositor
transform. The site's own motion rule says exactly this, and
the first version of this bar broke it. */
.mkrail-prog i{display:block;height:100%;width:100%;background:var(--leaf,#4CAF7D);
transform:scaleX(0);transform-origin:left center;transition:transform .12s linear}
/* the summary strip on the assessment */
.mk-strip{display:flex;flex-wrap:wrap;gap:1.4rem;margin:.7rem 0 .2rem;
font-size:.82rem;color:var(--muted)}
.mk-strip b{font-size:1.15rem;color:var(--forest-soft,#1B4A37);font-variant-numeric:tabular-nums}
.mk-strip i{font-style:normal}
/* each part announces itself as it arrives */
.mk-part > .wrap > h2{position:relative;padding-left:.9rem}
.mk-part > .wrap > h2:before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:3px;
border-radius:2px;background:var(--leaf-ink,#2E6B45);transform:scaleY(0);transform-origin:top center;
transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mk-part > .wrap > h2.on:before,.mk-part.in > .wrap > h2:before{transform:scaleY(1)}
@media (prefers-reduced-motion: reduce){
.mkrail a,.mkrail a:before,.mk-part > .wrap > h2:before{transition:none !important}
.mk-part > .wrap > h2:before{transform:scaleY(1)}
}
/* ============================================================
THE TRAIL — a vertical way-marker down the left edge
------------------------------------------------------------
Five parts on one long page. A horizontal strip at the top
told you where you were only while it was on screen; this
stays with the reader the whole way down.
Drawn as a path with stations on it, which is the metaphor
the rest of the site already uses — contour lines, a road,
a car crossing the plateau. A dot per part, the name
appearing on hover or focus, and a line that fills as the
reader descends.
It is decoration ONLY in the sense that the same links exist
in the page body. It is a real