/* climate.css — Golden State Climate's identity layer.
*
* Loaded *after* goldenstate.css, never instead of it. Everything structural —
* the warm paper ground, Overpass, the util bar, .sign, .rule, .card, .shield,
* the print rules — is inherited unchanged, because the two sites are meant to
* feel like one organisation and a reader who can use goldenstateweather.com
* should not have to learn a second set of components to read this one.
*
* What changes is the identity and the vocabulary of the charts.
*
* ── The colour ──────────────────────────────────────────────────────────────
* The weather site is California Poppy #b4530f, a forecast colour: warm, present
* tense, the colour of a road sign you read at speed. This site is about the
* record — 131 years of it — so the headline is **deep indigo #2b3a67**, which
* is the register of an archive rather than a bulletin, carries white at 11:1,
* and is claimed by no other site on the network (Eagle's guide green, Euro's
* motorist blue, Canada's maple red, Waves' deep-water teal, weather.city's
* highway green are all far enough away to be unmistakable at tab size).
*
* Against it, **brass #e0b552** does the job gold does next door: the mark, the
* emphasis, the rules on dark ground. Indigo and brass is the palette of a
* surveying instrument, which is roughly what this site is.
*
* ── The anomaly ramp, and why it is the whole design ────────────────────────
* Every quantity this site plots is an anomaly — a departure from a baseline —
* and an anomaly has polarity, so it wants a diverging scale: two hues, a
* neutral midpoint, never a hue in the middle and never a rainbow. The ramp is
* anchored on ColorBrewer's RdBu poles, #2166ac and #b2182b, which were checked
* rather than chosen by eye: on this site's paper both clear 4.5:1, they sit in
* the same lightness band, and they separate by ΔE 21 under protanopia and 29
* under tritanopia — so the cool and warm ends stay distinguishable to a
* red-green colourblind reader, which for a site whose every chart is blue
* against red is not a nicety.
*
* The eleven steps are mirror-symmetric in lightness (OKLab L runs
* .31→.94→.33), so a +2°F year and a -2°F year are equally loud. A ramp that is
* darker on one side makes one sign of the anomaly look more important than the
* other, which on this subject would be an argument rather than a scale.
*
* The two poles double as the site's only categorical pair — cool for night and
* for minima, warm for day and for maxima. One key, learned once.
*
* ── One hard rule about the pale steps ───────────────────────────────────────
* The middle of the ramp sits at about 1:1 against the paper. That is correct
* for a stripe field, where every stripe is read against its neighbours, and
* wrong everywhere else: a near-zero anomaly drawn straight onto the page is
* invisible. So every chart that uses the ramp is drawn on `.plate` — a white
* ground with a real border — and never directly on the paper.
*/
:root {
/* The headline. */
--sign: #2b3a67;
--sign-dk: #1f2a4d;
--sign-tx: #ffffff;
--sign-sub: #c3cdea;
/* Brass, where the weather site uses gold. */
--gold: #e0b552;
--gold-dk: #7d5f0f;
--gold-sub: #f7eccd;
--brass: #e0b552;
--brass-dk: #7d5f0f;
/* The diverging anomaly ramp, cool → warm. */
--a5c: #053061; --a4c: #2166ac; --a3c: #4393c3; --a2c: #92c5de; --a1c: #d1e5f0;
--a0: #efece5;
--a1w: #fddbc7; --a2w: #f4a582; --a3w: #d6604d; --a4w: #b2182b; --a5w: #67001f;
/* The two poles, as the site's categorical pair. */
--cool: #2166ac;
--warm: #b2182b;
--cool-sub: #d1e5f0;
--warm-sub: #fddbc7;
/* Kept from the weather site so shared components that reference them still
resolve, but re-pointed at this site's meanings. */
--pacific: #2166ac;
--sierra: #2f6b45;
--theme-color: #2b3a67;
}
/* ── the chart plate ──────────────────────────────────────────────────────────
Every chart lives on one of these. See the note above about the pale ramp
steps: this is not decoration, it is what makes a near-zero anomaly legible. */
/* ══ THE STATISTICAL PLATE ════════════════════════════════════════════════════
*
* Charts here are drawn as engraved statistical inserts from a turn-of-the-century
* government report, following the vocabulary policlimate.com uses: a multi-plate
* border (key line, accent plate, paper moat), a faint ruled underprint, a plate
* number and source in ledger caps across the head, a centred display-face title,
* and a justified small-caps footer.
*
* The reason this is more than decoration: it gives a chart a *frame of
* authority* that a bare white box does not, and this site's whole argument is
* that its numbers are traceable. A plate that names its own number and source in
* the furniture is making that argument typographically.
*
* The ground stays pale and the underprint stays under 4% ink, because the marks
* have to win. A woven field behind a Palmer series would cost legibility to buy
* atmosphere, which is the wrong trade here.
*/
.plate {
position: relative; isolation: isolate;
background-color: #fbf7ec;
background-image:
repeating-linear-gradient(30deg, transparent 0 9px, rgba(43, 58, 103, .035) 9px 10px);
border: 1px solid var(--heritage-ink);
box-shadow:
inset 0 0 0 3px #fbf7ec,
inset 0 0 0 4px var(--sign),
inset 0 0 0 7px #fbf7ec,
0 10px 26px rgba(34, 28, 18, .13);
padding: 15px 18px 14px;
overflow-x: auto;
}
/* The plate head: number on the left, source on the right, a hairline under. */
.plate .platehead {
display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
font: 700 9.5px var(--mono-font); letter-spacing: .15em; text-transform: uppercase;
color: var(--sign); padding-bottom: 7px; border-bottom: 1px solid rgba(43, 58, 103, .22);
}
.plate .platehead .src { color: var(--mut); letter-spacing: .1em; }
.plate h3 {
margin: 11px 0 0; text-align: center; color: var(--heritage-ink);
font: 700 clamp(19px, 2.2vw, 25px)/1.14 var(--display-font); letter-spacing: -.014em;
text-transform: none;
}
/* The engraved rule under a plate title: a drawn chain, centred, narrow. */
.plate .platerule {
width: 108px; height: 7px; margin: 9px auto 0; opacity: .75;
background:
radial-gradient(ellipse at center, transparent 0 30%, var(--sign) 32% 38%, transparent 40%) center / 20px 7px repeat-x,
linear-gradient(var(--sign), var(--sign)) center / 100% 1px no-repeat;
}
.plate .platesub {
margin: 9px auto 4px; max-width: 64ch; text-align: center;
font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--ink2);
}
.plate > svg { display: block; width: 100%; height: auto; min-width: 520px; margin-top: 10px; }
.plate .cap, .plate figcaption {
margin: 11px 2px 0; padding-top: 8px; border-top: 1px solid rgba(43, 58, 103, .22);
font-size: 12px; font-weight: 600; line-height: 1.55; color: var(--ink2); max-width: 82ch;
}
.plate .cap b { color: var(--heritage-ink); }
.plate .cap a { color: var(--sign); text-decoration: underline; }
/* Chart internals. Axes and grid are deliberately recessive — the marks carry
the information and a dark grid competes with them for the same attention. */
.plate .grid { stroke: rgba(43, 58, 103, .14); stroke-width: 1; }
.plate .axis { stroke: var(--heritage-ink); stroke-width: 1.2; }
.plate .zero { stroke: var(--heritage-ink); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
/* `:not([fill])` is doing real work here, not tidiness. A CSS rule beats an SVG
presentation attribute, so a bare `.plate text { fill: ... }` silently
overrode every deliberate `fill="#fff"` a chart set on a label — which meant
the light-on-dark logic in the ENSO matrix had never had any visual effect at
all, and every cell label was the same muted brown regardless. Scoping the
default to elements that do not declare their own restores the intent: the
plate supplies a default, a chart may override it. */
.plate text:not([fill]) { fill: #7d7360; }
.plate text { font: 600 10.5px var(--mono-font); }
.plate text.nm { font: 700 11px var(--font); }
.plate text.nm:not([fill]) { fill: var(--heritage-ink); }
.plate text.val { font-weight: 800; }
.plate text.val:not([fill]) { fill: var(--heritage-ink); }
.plate text.hd { font: 900 10px var(--mono-font); letter-spacing: .13em; }
.plate text.hd:not([fill]) { fill: var(--sign); }
.plate .ser { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* The uncertainty band is ruled rather than washed: the pattern paints with
`currentColor`, so the band element carries the series colour and the screen
supplies the texture. A ruling needs more opacity than a wash to read. */
.plate .band { opacity: .62; }
/* ── the ramp legend ──────────────────────────────────────────────────────── */
.key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.key .swatches { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.key .swatches i { width: 20px; height: 12px; display: block; }
.key .lb { font: 700 10.5px var(--mono-font); color: var(--mut); letter-spacing: .05em; }
/* ── stat tiles ───────────────────────────────────────────────────────────────
Used where the answer is one number and a chart would be four axes drawn
around a single fact. The number wears ink, not a series colour; the rule
above it carries the identity instead. */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.tile {
background: var(--card); border: 1px solid var(--line); border-radius: 8px;
padding: 15px 15px 13px; border-top: 4px solid var(--sign);
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.tile.warm { border-top-color: var(--warm); }
.tile.cool { border-top-color: var(--cool); }
.tile .k {
font: 900 10px var(--mono-font); letter-spacing: .09em; text-transform: uppercase;
color: var(--mut);
}
.tile {
background: var(--heritage-paper); border-color: #cbc0a5;
}
.tile .v {
font: 700 clamp(30px, 3.8vw, 41px) var(--display-font); line-height: 1.02;
letter-spacing: -.02em; margin: 7px 0 0; font-variant-numeric: tabular-nums;
color: var(--heritage-ink);
}
.tile .u { font-size: 14px; font-weight: 800; color: var(--ink2); margin-left: 3px; }
.tile .d { font-size: 12.5px; font-weight: 600; color: var(--ink2); line-height: 1.5; margin: 7px 0 0; }
.tile .ci { font: 700 11px var(--mono-font); color: var(--mut); margin-top: 5px; }
/* ── the finding callout ──────────────────────────────────────────────────────
A chart states a fact; this states what the fact means, and is styled as a
quotation from the data rather than as a highlight box, because the site
should not look like it is shouting. */
.finding {
border-left: 4px solid var(--brass-dk); background: var(--heritage-paper);
padding: 14px 17px; border-radius: 0 5px 5px 0; margin: 16px 0;
border-top: 1px solid #cbc0a5; border-right: 1px solid #cbc0a5;
border-bottom: 1px solid #cbc0a5;
box-shadow: 0 6px 20px rgba(48, 39, 25, .08);
}
.finding p { color: var(--heritage-ink); }
.finding .lb {
font: 900 10px var(--mono-font); letter-spacing: .1em; text-transform: uppercase;
color: var(--brass-dk); display: block; margin-bottom: 5px;
}
.finding p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.finding p + p { margin-top: 8px; }
/* ── the caveat ───────────────────────────────────────────────────────────────
The counterpart of .finding, and it appears about as often. This site's whole
claim is that it says what the data cannot support as readily as what it can,
so the two are given equal typographic weight rather than making the caveat
small print. */
.caveat {
border-left: 4px solid var(--heritage-red); background: #faf7f0;
padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0;
border-top: 1px solid var(--line2); border-right: 1px solid var(--line2);
border-bottom: 1px solid var(--line2);
}
.caveat .lb {
font: 900 10px var(--mono-font); letter-spacing: .1em; text-transform: uppercase;
color: var(--heritage-red); display: block; margin-bottom: 5px;
}
.caveat p { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--ink2); }
/* ── ENSO chips ───────────────────────────────────────────────────────────── */
.chip {
display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
padding: 3px 10px 3px 8px; font: 800 11px var(--mono-font); letter-spacing: .05em;
border: 1px solid var(--line); background: #fff; color: var(--ink2);
}
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--mut); }
.chip.nino::before { background: var(--a4w); }
.chip.nina::before { background: var(--a4c); }
.chip.neutral::before { background: var(--mut); }
/* ── the tooltip ──────────────────────────────────────────────────────────────
One shared tooltip element per page rather than one per chart: it is
positioned in page coordinates, so a single node can serve every plate and
there is no chance of two being visible at once. */
.tip {
position: fixed; z-index: 300; pointer-events: none; opacity: 0;
transition: opacity .09s linear;
background: var(--ink); color: #fff; border-radius: 6px; padding: 7px 10px;
font: 700 11.5px var(--font); line-height: 1.45; max-width: 260px;
box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
}
.tip.on { opacity: 1; }
.tip .t { font: 900 10px var(--mono-font); letter-spacing: .08em; color: var(--brass); display: block; }
.tip .n { font-variant-numeric: tabular-nums; }
.plate .hit { fill: transparent; cursor: crosshair; }
.plate .cursor { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.plate .cursor.on { opacity: .55; }
/* ── the data table behind every chart ────────────────────────────────────────
Required, not optional: colour is never the only channel on this site, and a
reader who cannot use the chart — screen reader, print, forced colours — must
still be able to get the numbers. */
details.tbl { margin: 10px 0 0; }
details.tbl > summary {
cursor: pointer; font: 800 11px var(--mono-font); letter-spacing: .06em;
color: var(--sign); text-transform: uppercase; padding: 4px 0;
}
details.tbl > summary:hover { text-decoration: underline; }
details.tbl .sc { max-height: 340px; overflow: auto; margin-top: 8px; border: 1px solid var(--line2); border-radius: 6px; }
details.tbl table { border-collapse: collapse; width: 100%; font-size: 12px; }
details.tbl th, details.tbl td { padding: 5px 9px; border-bottom: 1px solid var(--line2); text-align: right; }
details.tbl th:first-child, details.tbl td:first-child { text-align: left; }
details.tbl thead th {
position: sticky; top: 0; background: var(--heritage-paper);
border-top: 2px double var(--heritage-ink); border-bottom: 2px double var(--heritage-ink);
font: 800 10px var(--mono-font); letter-spacing: .08em; color: var(--sign);
text-transform: uppercase;
}
details.tbl tbody tr:nth-child(even) { background: rgba(43, 58, 103, .035); }
details.tbl td { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
/* ── the masthead mark ────────────────────────────────────────────────────────
The mark is a chart, so unlike the weather site's flat gold outline it must
not be recoloured by CSS. It gets a hairline plate instead, which stops the
pale mid-ramp stripes from dissolving into the indigo sign behind it. */
.signhead .stripemark {
width: 74px; height: 74px; flex: none; display: block;
background: #fff; border-radius: 5px; padding: 3px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 0, 0, .28);
}
.signhead .stripemark img { width: 100%; height: 100%; display: block; }
/* The network line in the footer, where the sibling sites are named. */
.network { font-size: 12.5px; font-weight: 600; color: var(--ink2); line-height: 1.7; }
.network a { text-decoration: underline; text-decoration-color: var(--line); }
.network a:hover { text-decoration-color: var(--sign); }
@media print {
.plate { box-shadow: none; break-inside: avoid; }
.tip, .hit, .cursor { display: none !important; }
details.tbl { display: none; }
}
/* ── card heads in this site's colours ────────────────────────────────────────
The shared .card component takes a coloured .chead; the weather site supplies
its geography colours for that slot and this site supplies the two poles of
the anomaly ramp, so a card about warming wears warm and a card about the
ocean state wears cool. */
.card .chead.warm { background: var(--warm); }
.card .chead.warm .k { color: var(--warm-sub); }
.card .chead.cool { background: var(--cool); }
.card .chead.cool .k { color: var(--cool-sub); }
.card .more {
display: block; margin-top: 11px; font: 800 11px var(--mono-font);
letter-spacing: .05em; color: var(--sign);
}
a.card:hover .more { text-decoration: underline; }
.card .cbody .k {
display: block; font: 900 10px var(--mono-font); letter-spacing: .09em;
color: var(--mut); text-transform: uppercase; margin-bottom: 6px;
}
/* ── the ranked dot plot ──────────────────────────────────────────────────────
The site's substitute for a divisional choropleth, and the reason is in the
note in gsc.js: there are no division polygons here to draw honestly. Rows in
a fixed north-to-south order carry the spatial story on their own. */
.dots .row:hover rect.rowbg { fill: #f4f1ea; }
/* ── the fact list ────────────────────────────────────────────────────────────
Used where a page states several independent figures that are not a series
and do not want a table's grid. The marker is a short rule rather than a bullet,
which keeps the list in the same drawn-marks family as .sep and .navsep. */
ul.facts { list-style: none; margin: 0; padding: 0; }
ul.facts li {
position: relative; padding: 8px 0 8px 22px; font-size: 14px; font-weight: 600;
line-height: 1.6; color: var(--ink2); border-bottom: 1px solid var(--line2);
}
ul.facts li::before {
content: ""; position: absolute; left: 0; top: 15px;
width: 12px; height: 2px; background: var(--brass);
}
ul.facts li:last-child { border-bottom: 0; }
ul.facts b { color: var(--ink); }
ul.facts a { text-decoration: underline; text-decoration-color: var(--line); }
ul.facts a:hover { text-decoration-color: var(--sign); }
/* ══ THE ENGRAVED LAYER ═══════════════════════════════════════════════════════
*
* The weather site's National Parks register carries an early-20th-century
* field-guide voice — serif display type, engraved plates, registration
* medallions and an original woven guilloche field — and every one of those
* components lives in goldenstate.css rather than in that page.
*
* This site uses them directly, class names and all. They are called `.park-*`
* because a park register is where the layer was first needed, not because they
* are about parks; a division register wants exactly the same furniture, and
* copying them under new names would mean a fix to one never reaching the other.
*
* The register earns its place here for the same reason it does next door: this
* site is an archive of a 131-year record, and a survey ledger is the right voice
* for that. It stays an accent around the charts rather than a texture behind
* them — a guilloche field under a table of Palmer values would cost legibility
* for atmosphere, which is a bad trade on a site whose argument is its numbers.
*/
/* The masthead takes the display face, as the parks bulletin does. Indigo and a
serif read as a record; the sans read as a readout. */
.sign .word.heritage-title { letter-spacing: -.025em; }
.sign .bureau-kicker { color: var(--sign-sub); margin-bottom: 9px; }
/* Section rules get the engraved treatment — a drawn chain rather than a dashed
line. `.heritage-rule` is the shared component; this only re-points its colour. */
.rule.heritage-rule h2 {
font-family: var(--display-font); font-size: 19px; font-weight: 700;
letter-spacing: -.01em; text-transform: none; color: var(--sign);
}
/* Division cards, built on the shared field-guide card. The border colour is the
division's own warming rate on the sequential scale, set inline by the module —
so the register is itself a chart, and the seven cards sort by colour without
anyone having to read the numbers on them. */
.park-card.division { min-height: 214px; }
.park-card.division h3 { font-size: 23px; }
.park-card.division .park-seal { color: var(--sign); }
.park-card.division .figs {
display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 0;
font: 700 11px var(--mono-font); color: var(--ink2); letter-spacing: .04em;
}
.park-card.division .figs b { display: block; font: 700 17px var(--display-font); color: var(--heritage-ink); }
.park-card.division .figs .up { color: var(--warm); }
/* The decade ledger — the shared park timeline, carrying temperature instead of
park designations. */
.park-era .anom { font: 700 11px var(--mono-font); letter-spacing: .04em; margin-top: 4px; }
.park-era .bar { height: 6px; border-radius: 2px; margin-top: 7px; }
/* ══ THE MAP ══════════════════════════════════════════════════════════════════
*
* Drawn on a dark plate, like the weather site's. The reason is not mood: the
* anomaly ramp's middle steps sit at about 1:1 against the warm paper, and a
* division shaded near the middle of any scale would dissolve into the page. A
* dark ground gives every step of every scale something to sit against.
*/
.mapplate {
background: var(--figure); border: 1px solid var(--figure-line); border-radius: 8px;
padding: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
position: relative; overflow: hidden;
}
/* California is a tall, narrow subject. Given the full page width the map is
height-constrained and leaves two columns of empty plate either side, so the
figure and a roster of the seven divisions share the panel — which fills the
space with the legend the map needs anyway. */
.mapcols { display: grid; gap: 18px; grid-template-columns: minmax(300px, 1.05fr) minmax(250px, .95fr); align-items: start; }
@media (max-width: 780px) { .mapcols { grid-template-columns: 1fr; } }
.divroster { display: flex; flex-direction: column; gap: 1px; background: #26313f; border: 1px solid #26313f; border-radius: 6px; overflow: hidden; }
.divroster a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; background: #131b26; }
.divroster a:hover { background: #1c2836; text-decoration: none; }
.divroster .no {
width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
font: 700 13px var(--display-font); color: #0d1117;
}
.divroster .nm { flex: 1; min-width: 0; }
.divroster .nm b { display: block; font-size: 13px; font-weight: 800; color: #e7edf5; line-height: 1.2; }
.divroster .nm span { display: block; font: 700 9.5px var(--mono-font); color: #8fa3bd; letter-spacing: .07em; margin-top: 2px; }
.divroster .v { font: 900 13px var(--mono-font); color: #fff; }
.mapplate h3 {
margin: 0 0 10px; font: 700 10px var(--mono-font); letter-spacing: .13em;
text-transform: uppercase; color: #8fa3bd;
}
.mapplate .cap {
margin: 12px 2px 2px; font-size: 12.5px; font-weight: 600; line-height: 1.55;
color: #b9c6d8; max-width: 78ch;
}
.mapplate .cap b { color: #fff; }
.mapplate .cap a { color: var(--brass); text-decoration: underline; }
.mapplate .key .lb { color: #8fa3bd; }
.mapplate .key .swatches { border-color: #3d4c60; }
.gsmap { display: block; width: 100%; height: auto; }
.gsmap .divfill { transition: fill-opacity .12s; }
.gsmap .divcounty { fill: none; stroke: rgba(255, 255, 255, .30); }
.gsmap .divline { fill: none; stroke: rgba(255, 255, 255, .92); stroke-linejoin: round; }
.gsmap .divstate { fill: none; stroke: rgba(255, 255, 255, .5); stroke-linejoin: round; }
/* Dark ink with a light halo, not white: the label has to sit on every step of a
scale that runs from #fddbc7 to #67001f, and a single white glyph disappears on
the pale end. Ink-on-halo reads on both. */
.gsmap .divlabel {
fill: #14202c; font-family: var(--display-font); font-weight: 700;
paint-order: stroke fill; stroke: rgba(255, 255, 255, .92);
stroke-linejoin: round; pointer-events: none;
}
.gsmap .divg:hover .divfill { fill-opacity: .82; }
.gsmap .divg:hover .divline { stroke-width: 2600; }
/* The light variant, for a map that sits inside an engraved plate rather than on
its own dark ground. */
.gsmap:not(.dark) .divcounty { stroke: rgba(38, 60, 49, .22); }
.gsmap:not(.dark) .divline { stroke: var(--heritage-ink); }
.gsmap:not(.dark) .divstate { stroke: rgba(38, 60, 49, .55); }
.gsmap:not(.dark) .divlabel { fill: var(--heritage-ink); stroke: rgba(244, 237, 220, .85); }
@media print {
.mapplate { background: #fff; box-shadow: none; border-color: var(--line); }
.mapplate h3, .mapplate .cap { color: var(--ink); }
.gsmap .divcounty { stroke: rgba(0, 0, 0, .18); }
.gsmap .divline, .gsmap .divstate { stroke: #333; }
.gsmap .divlabel { fill: #111; stroke: #fff; }
}
/* ══ THE PAPER ════════════════════════════════════════════════════════════════
*
* A fractal-noise tile at 4% ink, multiplied over the whole page. It is the
* cheapest thing on the site and does more for the register voice than anything
* else: a flat #e8e3d8 field reads as a CSS colour, and the same field with a
* grain in it reads as stock. Fixed rather than scrolling, so it behaves like
* paper the page is printed on rather than a texture attached to the content.
*
* Inline as a data: URI, which the site's CSP permits under `img-src 'self'
* data:` — no request, and nothing to fail.
*/
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
opacity: .55; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
body > * { position: relative; z-index: 1; }
::selection { background: var(--brass); color: var(--ink); }
/* The hidden pattern library. One