/* ===========================================================================
/learn/ - Issue 07, "Base Layer". Ski / winter sports.
Standalone by series rule: this file is linked by baselayer.html and by
nothing else. Issues 01-06 share most of these component class names and
style every one of them differently. NEVER edit one issue's stylesheet to
fix another's.
This is deliberately NOT a previous letter with new tokens. Issue 05
shipped that way first and was correctly rejected as a copy. To make two
issues read as different letters you change the SURFACES, the DISPLAY
FACE, and WHICH COLOUR LEADS. So:
surfaces a snowfield ground, and CORDUROY - machine-groomed piste -
behind every callout and card head. No gingham, no plaid,
no floral, no stars anywhere on this page.
face Bungee for the titles, Staatliches for badges and labels.
leads alpine blue, and it leads as a SURFACE as much as an ink:
the seal, the issue stamp, the section passes and the
divider are all blue objects, not blue words.
The point of the palette is that every issue so far has been muted and
dusty. This one is saturated on purpose, and that contrast is the event.
No part lettering anywhere on this page - the sections are 01-04 and
nothing else, the same call Issue 06 made.
=========================================================================== */
:root{
/* --- the six named colours -------------------------------------------- */
--frost:#F4F6F1; /* the page ground - cool white, not a warm cream */
--blue:#2670A6; /* LEAD. alpine blue, the most saturated in the series*/
--red:#E14B2A; /* secondary - the alarm, the warm note */
--ink:#22262A; /* charcoal. The series' first true near-black */
--teal:#4FAFA8; /* accent - icy teal, a new colour family here */
--cocoa:#8B5A2B; /* the rare one. Cocoa. Small details ONLY. */
/* --- measured, not eyeballed -----------------------------------------
On the frost ground: blue 4.88, red 3.68, charcoal 14.00, teal 2.40,
cocoa 5.37. So blue and cocoa are safe as text, charcoal obviously is,
RED IS LARGE-TEXT ONLY and TEAL CANNOT HOLD A WORD AT ALL.
And the Issue 06 trap: an accent set as text on a TINT OF ITSELF loses
most of its contrast. Measured here, on a 30% tint of each: blue 3.39,
red 2.61, teal 1.96, cocoa 3.67 - every one a failure. So each accent
gets ONE derived dark that is solved against the ground, the card AND
its own tint, and that token is the one that carries text.
The named colours keep the jobs a saturated colour is actually for:
fills, grounds, patterns, the mountains, the seal.
------------------------------------------------------------------- */
--blue-dk:#1F5C89; /* 6.54 on frost, 4.54 on a blue tint */
--red-dk:#A0351E; /* 6.38 on frost, 4.53 on a red tint */
--teal-dk:#316C68; /* 5.55 on frost, 4.52 on a teal tint */
--cocoa-dk:#794E25; /* 6.59 on frost, 4.51 on a cocoa tint */
--ink-soft:#525960; /* 6.53 - secondary prose */
--ink-faint:#626A72; /* 5.05 - the floor for 8.5-11px labels */
--card:#FBFCF9; /* the paper things sit on, a shade above the ground */
--rule:#DDE4DE;
--rule-firm:#BFC9C2;
--blue-tint:rgba(38,112,166,.16);
--blue-tint-2:rgba(38,112,166,.30);
--red-tint:rgba(225,75,42,.16);
--red-tint-2:rgba(225,75,42,.30);
--teal-tint:rgba(79,175,168,.18);
--teal-tint-2:rgba(79,175,168,.32);
--cocoa-tint:rgba(139,90,43,.16);
--shadow:rgba(34,38,42,.20);
/* --- four fonts, four jobs --------------------------------------------
Three are fixed across the series and are not this issue's to change.
The two display faces are this issue's own, and each is fenced to a
single job - letting one spread is what makes a page look assembled
rather than designed.
Bungee is a resort-signage face: heavy, square, all-caps by design. It
takes the h1 and the four section headings and NOTHING else. Staatliches
is tall and condensed and takes the small furniture - badges, pills,
table heads, the pull-quote. Neither is Quicksand, Amatic SC, Lilita
One, Alfa Slab One, Fredoka, Baloo 2 or Permanent Marker.
------------------------------------------------------------------- */
--hand:"Caveat","Bradley Hand",cursive; /* unchanged */
--body:"Lora",Georgia,"Times New Roman",serif; /* unchanged */
--code:"Courier Prime","Courier New",monospace; /* unchanged */
--display:"Staatliches","Haettenschweiler","Arial Narrow",sans-serif;
--title:"Bungee","Trebuchet MS",system-ui,sans-serif;
--r:9px;
/* --- the patterns, said once ----------------------------------------- */
/* CORDUROY - machine-groomed piste, and the surface behind every callout
and card head on this page. It is the ski answer to gingham and plaid,
and it is a DIFFERENT KIND of pattern from either: parallel, raked, one
direction only. Two crossed sets would be a check, which is the thing
being avoided.
Raked on the DIAGONAL, which matters twice over. A near-vertical rake
was the first attempt and it read as plain stripes - too close to
Issue 02's vertical-stripe ground - while a horizontal one reads as
ruled paper, which Issue 06 already owns. 24 degrees is neither.
Pitched pale on purpose - running prose sits directly on it. The
check-pattern trap is matching on the alpha rather than the result;
a single set at .15 of a mid blue lands about where Issue 02's .30 of
a pale pink does. */
--corduroy:
repeating-linear-gradient(24deg,rgba(38,112,166,.15) 0 3px,transparent 3px 12px);
/* POWDER - untracked, the opposite surface. Soft blobs, no direction at
all, so a "fresh" panel and a "groomed" panel are legible as different
kinds of snow rather than two colours of the same thing. */
--powder:
radial-gradient(circle 7px at 12px 10px,rgba(79,175,168,.16) 96%,transparent 0),
radial-gradient(circle 9px at 34px 26px,rgba(38,112,166,.13) 96%,transparent 0),
radial-gradient(circle 6px at 50px 8px,rgba(79,175,168,.13) 96%,transparent 0);
/* THREE MORE SURFACES, and the reason there are three.
The first build put the corduroy rake behind TWELVE things - the masthead,
four callouts, the groom box, the beacon, four review cards and the footer
card. At that count a surface stops being a surface and quietly becomes the
page ground a second time. Alice called it, correctly.
The fix is not fewer patterns, it is patterns that MEAN something. Corduroy
now appears only where a groomed run is the actual subject. Everything else
gets its own cloth, and each one says what its furniture is:
--knit nordic fair-isle, half-dropped so it never reads as a grid -
a grid would be a check, and gingham, plaid and houndstooth
are all taken by earlier issues. The review cards, and the
"base layer" callout, because a base layer IS a knitted thing.
--contour piste-map contour lines. The masthead and the footer card,
the two pieces of furniture that are maps rather than notes.
--cross the patrol hut's first-aid crosses, and the only place on this
page red is a surface rather than an alarm.
Regenerate all three with ~/projects/.learn-tools/i07/patterns.py. The knit
was eased back about a third from a first pass that competed with the prose
sitting on it - the same call Issue 06's floral ground needed. */
--knit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66'%3E%3Cpath d='M11 4L18 11L11 18L4 11Z' fill='%232670A6' fill-opacity='0.1'/%3E%3Cpath d='M11 8L14 11L11 14L8 11Z' fill='%234FAFA8' fill-opacity='0.15'/%3E%3Cpath d='M55 4L62 11L55 18L48 11Z' fill='%232670A6' fill-opacity='0.1'/%3E%3Cpath d='M55 8L58 11L55 14L52 11Z' fill='%234FAFA8' fill-opacity='0.15'/%3E%3Cpath d='M33 26L40 33L33 40L26 33Z' fill='%232670A6' fill-opacity='0.1'/%3E%3Cpath d='M33 30L36 33L33 36L30 33Z' fill='%234FAFA8' fill-opacity='0.15'/%3E%3Cpath d='M11 48L18 55L11 62L4 55Z' fill='%232670A6' fill-opacity='0.1'/%3E%3Cpath d='M11 52L14 55L11 58L8 55Z' fill='%234FAFA8' fill-opacity='0.15'/%3E%3Cpath d='M55 48L62 55L55 62L48 55Z' fill='%232670A6' fill-opacity='0.1'/%3E%3Cpath d='M55 52L58 55L55 58L52 55Z' fill='%234FAFA8' fill-opacity='0.15'/%3E%3Cpath d='M33 5L35.04 8.96L39 11L35.04 13.04L33 17L30.96 13.04L27 11L30.96 8.96Z' fill='%234FAFA8' fill-opacity='0.11'/%3E%3Cpath d='M11 27L13.04 30.96L17 33L13.04 35.04L11 39L8.96 35.04L5 33L8.96 30.96Z' fill='%234FAFA8' fill-opacity='0.11'/%3E%3Cpath d='M55 27L57.04 30.96L61 33L57.04 35.04L55 39L52.96 35.04L49 33L52.96 30.96Z' fill='%234FAFA8' fill-opacity='0.11'/%3E%3Cpath d='M33 49L35.04 52.96L39 55L35.04 57.04L33 61L30.96 57.04L27 55L30.96 52.96Z' fill='%234FAFA8' fill-opacity='0.11'/%3E%3Ccircle cx='22' cy='22' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='44' cy='22' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='22' cy='44' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='44' cy='44' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='66' cy='0' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='0' cy='66' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3Ccircle cx='66' cy='66' r='1.6' fill='%23E14B2A' fill-opacity='0.10'/%3E%3C/svg%3E");
--contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='100'%3E%3Cpath d='M0 14C24 7 48 21 72 14S120 21 144 14' fill='none' stroke='%232670A6' stroke-opacity='0.22' stroke-width='1.6'/%3E%3Cpath d='M0 38C24 33 48 43 72 38S120 43 144 38' fill='none' stroke='%232670A6' stroke-opacity='0.18' stroke-width='1.4'/%3E%3Cpath d='M0 62C24 54 48 70 72 62S120 70 144 62' fill='none' stroke='%232670A6' stroke-opacity='0.21' stroke-width='1.6'/%3E%3Cpath d='M0 86C24 82 48 90 72 86S120 90 144 86' fill='none' stroke='%232670A6' stroke-opacity='0.15' stroke-width='1.3'/%3E%3Ccircle cx='104' cy='50' r='2.2' fill='%234FAFA8' fill-opacity='0.30'/%3E%3Ccircle cx='30' cy='76' r='1.9' fill='%234FAFA8' fill-opacity='0.26'/%3E%3C/svg%3E");
--cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='62'%3E%3Cpath d='M8.504 5.6h2.9920000000000004v2.904h2.904v2.9920000000000004h-2.904v2.904h-2.9920000000000004v-2.904h-2.904v-2.9920000000000004h2.904Z' fill='%23E14B2A' fill-opacity='0.17'/%3E%3Cpath d='M30.844 20.6h2.3120000000000003v2.2439999999999998h2.2439999999999998v2.3120000000000003h-2.2439999999999998v2.2439999999999998h-2.3120000000000003v-2.2439999999999998h-2.2439999999999998v-2.3120000000000003h2.2439999999999998Z' fill='%23E14B2A' fill-opacity='0.13'/%3E%3Cpath d='M8.844 34.6h2.3120000000000003v2.2439999999999998h2.2439999999999998v2.3120000000000003h-2.2439999999999998v2.2439999999999998h-2.3120000000000003v-2.2439999999999998h-2.2439999999999998v-2.3120000000000003h2.2439999999999998Z' fill='%23E14B2A' fill-opacity='0.13'/%3E%3Cpath d='M30.504 47.6h2.9920000000000004v2.904h2.904v2.9920000000000004h-2.904v2.904h-2.9920000000000004v-2.904h-2.904v-2.9920000000000004h2.904Z' fill='%23E14B2A' fill-opacity='0.17'/%3E%3C/svg%3E");
/* the sticker sheet's backing - falling snow rather than plain dots */
--fall:
radial-gradient(circle 2.2px at 9px 8px,rgba(38,112,166,.34) 2.2px,transparent 3px),
radial-gradient(circle 1.5px at 25px 20px,rgba(79,175,168,.40) 1.5px,transparent 2px);
/* THE GROUND: a snowfield. 16 six-armed flakes and 38 specks per 140px
tile, seeded so it never reshuffles. Density is pitched against the
house benchmark - Issue 02's 30px stripe ground at .20 over half the
surface - because Issue 03 shipped a ground of five 1px dots per tile
and was correctly rejected as too plain. Regenerate with
~/projects/.learn-tools/i07/tex.py, which is seeded 70701. */
--snowfield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M86.3 113.1L92.5 119.7M89.7 116.7L89.0 119.4M89.7 116.7L92.4 116.2M91.3 118.4L90.8 120.2M91.3 118.4L93.0 118.0M86.3 113.1L83.7 121.8M84.8 117.9L82.2 118.6M84.8 117.9L86.6 119.9M84.2 120.0L82.4 120.5M84.2 120.0L85.4 121.4M86.3 113.1L77.4 115.2M81.4 114.2L79.5 112.3M81.4 114.2L80.5 116.8M79.2 114.7L77.9 113.5M79.2 114.7L78.6 116.5M86.3 113.1L80.1 106.4M82.9 109.4L83.6 106.8M82.9 109.4L80.2 110.0M81.3 107.8L81.8 106.0M81.3 107.8L79.5 108.1M86.3 113.1L88.9 104.4M87.7 108.3L90.4 107.6M87.7 108.3L85.9 106.2M88.4 106.1L90.2 105.6M88.4 106.1L87.2 104.8M86.3 113.1L95.1 111.0M91.2 111.9L93.1 113.9M91.2 111.9L92.0 109.4M93.4 111.4L94.7 112.7M93.4 111.4L94.0 109.7' fill='none' stroke='%232670A6' stroke-opacity='0.18' stroke-width='1.18' stroke-linecap='round'/%3E%3Cpath d='M25.6 48.7L31.7 50.0M28.9 49.4L29.6 51.2M28.9 49.4L30.2 48.1M30.5 49.7L30.9 50.9M30.5 49.7L31.3 48.8M25.6 48.7L27.5 54.7M26.6 52.0L25.4 53.4M26.6 52.0L28.4 52.4M27.1 53.5L26.3 54.4M27.1 53.5L28.3 53.8M25.6 48.7L21.4 53.4M23.2 51.3L21.4 50.9M23.2 51.3L23.8 53.1M22.2 52.4L21.0 52.2M22.2 52.4L22.5 53.6M25.6 48.7L19.4 47.4M22.2 48.0L21.5 46.2M22.2 48.0L20.9 49.3M20.6 47.7L20.2 46.5M20.6 47.7L19.8 48.6M25.6 48.7L23.6 42.7M24.5 45.4L25.7 44.0M24.5 45.4L22.7 45.0M24.0 43.9L24.8 43.0M24.0 43.9L22.8 43.6M25.6 48.7L29.8 44.0M27.9 46.1L29.7 46.5M27.9 46.1L27.3 44.3M28.9 45.0L30.1 45.2M28.9 45.0L28.6 43.8' fill='none' stroke='%234FAFA8' stroke-opacity='0.23' stroke-width='0.82' stroke-linecap='round'/%3E%3Cpath d='M30.7 27.4L37.4 34.1M34.4 31.1L33.7 33.9M34.4 31.1L37.1 30.4M36.0 32.8L35.6 34.6M36.0 32.8L37.9 32.3M30.7 27.4L28.3 36.6M29.3 32.5L26.6 33.3M29.3 32.5L31.3 34.5M28.7 34.8L26.9 35.3M28.7 34.8L30.0 36.1M30.7 27.4L21.5 29.9M25.6 28.8L23.5 26.9M25.6 28.8L24.8 31.5M23.3 29.4L21.9 28.2M23.3 29.4L22.8 31.3M30.7 27.4L23.9 20.8M26.9 23.8L27.6 21.0M26.9 23.8L24.2 24.4M25.3 22.1L25.7 20.3M25.3 22.1L23.4 22.5M30.7 27.4L33.1 18.3M32.0 22.4L34.7 21.5M32.0 22.4L30.0 20.3M32.6 20.1L34.4 19.5M32.6 20.1L31.3 18.7M30.7 27.4L39.8 24.9M35.7 26.1L37.8 28.0M35.7 26.1L36.5 23.3M38.0 25.4L39.4 26.7M38.0 25.4L38.5 23.6' fill='none' stroke='%232670A6' stroke-opacity='0.2' stroke-width='1.23' stroke-linecap='round'/%3E%3Cpath d='M113.2 87.8L118.5 90.0M116.1 89.1L116.4 90.7M116.1 89.1L117.5 88.1M117.4 89.6L117.6 90.7M117.4 89.6L118.4 88.9M113.2 87.8L114.0 93.5M113.6 91.0L112.3 92.0M113.6 91.0L115.2 91.7M113.8 92.4L112.9 93.1M113.8 92.4L114.9 92.8M113.2 87.8L108.7 91.3M110.7 89.8L109.1 89.1M110.7 89.8L110.9 91.5M109.6 90.6L108.5 90.2M109.6 90.6L109.7 91.8M113.2 87.8L108.0 85.7M110.3 86.6L110.1 85.0M110.3 86.6L108.9 87.6M109.0 86.1L108.8 85.0M109.0 86.1L108.1 86.8M113.2 87.8L112.5 82.2M112.8 84.7L114.2 83.6M112.8 84.7L111.3 84.0M112.6 83.3L113.5 82.6M112.6 83.3L111.6 82.8M113.2 87.8L117.8 84.4M115.7 85.9L117.3 86.5M115.7 85.9L115.6 84.2M116.9 85.1L117.9 85.5M116.9 85.1L116.8 83.9' fill='none' stroke='%234FAFA8' stroke-opacity='0.25' stroke-width='0.74' stroke-linecap='round'/%3E%3Cpath d='M118.0 92.8L124.0 96.7M121.3 95.0L121.3 97.1M121.3 95.0L123.3 94.1M122.8 96.0L122.8 97.4M122.8 96.0L124.1 95.4M118.0 92.8L117.6 100.0M117.8 96.7L115.9 97.8M117.8 96.7L119.6 98.0M117.7 98.5L116.4 99.2M117.7 98.5L118.9 99.4M118.0 92.8L111.6 96.0M114.5 94.6L112.7 93.5M114.5 94.6L114.3 96.7M112.9 95.4L111.7 94.6M112.9 95.4L112.8 96.8M118.0 92.8L112.0 88.9M114.7 90.6L114.8 88.5M114.7 90.6L112.8 91.5M113.2 89.7L113.3 88.2M113.2 89.7L111.9 90.3M118.0 92.8L118.4 85.7M118.3 88.9L120.1 87.8M118.3 88.9L116.5 87.6M118.4 87.1L119.6 86.4M118.4 87.1L117.2 86.3M118.0 92.8L124.4 89.6M121.5 91.0L123.4 92.2M121.5 91.0L121.7 88.9M123.1 90.2L124.4 91.0M123.1 90.2L123.3 88.8' fill='none' stroke='%234FAFA8' stroke-opacity='0.24' stroke-width='0.93' stroke-linecap='round'/%3E%3Cpath d='M118.4 6.4L124.8 10.8M121.9 8.8L121.8 11.2M121.9 8.8L124.1 7.9M123.5 9.9L123.4 11.5M123.5 9.9L125.0 9.3M118.4 6.4L117.7 14.2M118.0 10.7L115.9 11.7M118.0 10.7L119.9 12.1M117.9 12.6L116.5 13.3M117.9 12.6L119.1 13.5M118.4 6.4L111.3 9.7M114.5 8.2L112.5 6.9M114.5 8.2L114.2 10.5M112.7 9.0L111.4 8.2M112.7 9.0L112.5 10.6M118.4 6.4L112.0 1.9M114.9 3.9L115.0 1.6M114.9 3.9L112.7 4.8M113.2 2.8L113.3 1.2M113.2 2.8L111.8 3.4M118.4 6.4L119.0 -1.4M118.7 2.1L120.8 1.0M118.7 2.1L116.9 0.7M118.9 0.1L120.3 -0.6M118.9 0.1L117.7 -0.8M118.4 6.4L125.5 3.0M122.3 4.5L124.2 5.8M122.3 4.5L122.6 2.2M124.0 3.7L125.4 4.6M124.0 3.7L124.2 2.2M118.4 -133.6L124.8 -129.2M121.9 -131.2L121.8 -128.8M121.9 -131.2L124.1 -132.1M123.5 -130.1L123.4 -128.5M123.5 -130.1L125.0 -130.7M118.4 -133.6L117.7 -125.8M118.0 -129.3L115.9 -128.3M118.0 -129.3L119.9 -127.9M117.9 -127.4L116.5 -126.7M117.9 -127.4L119.1 -126.5M118.4 -133.6L111.3 -130.3M114.5 -131.8L112.5 -133.1M114.5 -131.8L114.2 -129.5M112.7 -131.0L111.4 -131.8M112.7 -131.0L112.5 -129.4M118.4 -133.6L112.0 -138.1M114.9 -136.1L115.0 -138.4M114.9 -136.1L112.7 -135.2M113.2 -137.2L113.3 -138.8M113.2 -137.2L111.8 -136.6M118.4 -133.6L119.0 -141.4M118.7 -137.9L120.8 -139.0M118.7 -137.9L116.9 -139.3M118.9 -139.9L120.3 -140.6M118.9 -139.9L117.7 -140.8M118.4 -133.6L125.5 -137.0M122.3 -135.5L124.2 -134.2M122.3 -135.5L122.6 -137.8M124.0 -136.3L125.4 -135.4M124.0 -136.3L124.2 -137.8' fill='none' stroke='%234FAFA8' stroke-opacity='0.21' stroke-width='1.02' stroke-linecap='round'/%3E%3Cpath d='M86.7 8.5L92.0 12.0M89.6 10.4L89.6 12.3M89.6 10.4L91.4 9.6M91.0 11.3L90.9 12.5M91.0 11.3L92.1 10.8M86.7 8.5L86.4 14.8M86.5 12.0L84.9 12.9M86.5 12.0L88.1 13.1M86.4 13.6L85.3 14.2M86.4 13.6L87.5 14.3M86.7 8.5L81.1 11.4M83.6 10.1L82.0 9.1M83.6 10.1L83.4 12.0M82.2 10.8L81.1 10.1M82.2 10.8L82.1 12.1M86.7 8.5L81.4 5.1M83.8 6.6L83.8 4.7M83.8 6.6L82.1 7.4M82.5 5.7L82.5 4.5M82.5 5.7L81.3 6.3M86.7 8.5L87.1 2.2M86.9 5.0L88.6 4.1M86.9 5.0L85.4 3.9M87.0 3.5L88.1 2.8M87.0 3.5L86.0 2.7M86.7 8.5L92.4 5.7M89.8 6.9L91.4 7.9M89.8 6.9L90.0 5.1M91.2 6.2L92.3 6.9M91.2 6.2L91.4 5.0' fill='none' stroke='%232670A6' stroke-opacity='0.24' stroke-width='0.82' stroke-linecap='round'/%3E%3Cpath d='M60.7 78.1L64.4 83.6M62.7 81.1L61.9 82.9M62.7 81.1L64.7 81.1M63.6 82.5L63.1 83.7M63.6 82.5L64.9 82.5M60.7 78.1L57.7 84.0M59.1 81.4L57.1 81.6M59.1 81.4L60.1 83.0M58.3 82.8L57.0 83.0M58.3 82.8L59.0 84.0M60.7 78.1L54.1 78.5M57.0 78.3L55.9 76.7M57.0 78.3L56.1 80.1M55.4 78.4L54.6 77.4M55.4 78.4L54.8 79.6M60.7 78.1L57.0 72.6M58.7 75.1L59.5 73.3M58.7 75.1L56.7 75.1M57.7 73.7L58.3 72.5M57.7 73.7L56.4 73.7M60.7 78.1L63.6 72.2M62.3 74.8L64.3 74.6M62.3 74.8L61.2 73.1M63.0 73.3L64.3 73.2M63.0 73.3L62.3 72.2M60.7 78.1L67.3 77.7M64.3 77.9L65.5 79.5M64.3 77.9L65.2 76.1M66.0 77.7L66.7 78.8M66.0 77.7L66.6 76.6' fill='none' stroke='%232670A6' stroke-opacity='0.22' stroke-width='0.86' stroke-linecap='round'/%3E%3Cpath d='M104.8 38.5L111.2 39.0M108.3 38.7L109.2 40.5M108.3 38.7L109.5 37.2M110.0 38.9L110.6 40.0M110.0 38.9L110.7 37.8M104.8 38.5L107.6 44.3M106.3 41.7L105.3 43.3M106.3 41.7L108.3 41.9M107.0 43.1L106.4 44.2M107.0 43.1L108.3 43.3M104.8 38.5L101.2 43.8M102.8 41.4L100.9 41.3M102.8 41.4L103.6 43.2M101.9 42.7L100.6 42.7M101.9 42.7L102.4 43.9M104.8 38.5L98.4 38.0M101.3 38.2L100.4 36.5M101.3 38.2L100.1 39.8M99.6 38.1L99.0 36.9M99.6 38.1L98.9 39.1M104.8 38.5L102.0 32.6M103.3 35.3L104.3 33.6M103.3 35.3L101.3 35.1M102.6 33.8L103.2 32.7M102.6 33.8L101.3 33.7M104.8 38.5L108.4 33.1M106.8 35.5L108.7 35.6M106.8 35.5L106.0 33.8M107.7 34.2L109.0 34.2M107.7 34.2L107.2 33.0' fill='none' stroke='%232670A6' stroke-opacity='0.2' stroke-width='0.84' stroke-linecap='round'/%3E%3Cpath d='M30.6 40.1L36.1 46.4M33.6 43.5L32.9 45.9M33.6 43.5L36.1 43.2M35.0 45.1L34.5 46.7M35.0 45.1L36.6 44.9M30.6 40.1L27.9 47.9M29.1 44.4L26.7 44.9M29.1 44.4L30.7 46.3M28.4 46.4L26.8 46.7M28.4 46.4L29.5 47.6M30.6 40.1L22.5 41.6M26.1 40.9L24.5 39.1M26.1 40.9L25.2 43.3M24.1 41.3L23.0 40.1M24.1 41.3L23.5 42.9M30.6 40.1L25.2 33.8M27.6 36.6L28.4 34.2M27.6 36.6L25.2 37.0M26.3 35.0L26.8 33.5M26.3 35.0L24.6 35.3M30.6 40.1L33.4 32.2M32.1 35.8L34.6 35.2M32.1 35.8L30.6 33.8M32.8 33.8L34.4 33.4M32.8 33.8L31.8 32.5M30.6 40.1L38.8 38.5M35.1 39.2L36.8 41.0M35.1 39.2L36.0 36.9M37.2 38.8L38.3 40.1M37.2 38.8L37.8 37.3' fill='none' stroke='%232670A6' stroke-opacity='0.22' stroke-width='1.08' stroke-linecap='round'/%3E%3Cpath d='M13.7 64.7L24.2 65.9M19.4 65.4L20.8 68.2M19.4 65.4L21.4 62.9M22.1 65.7L23.0 67.6M22.1 65.7L23.4 64.0M13.7 64.7L17.9 74.4M16.0 70.0L14.2 72.6M16.0 70.0L19.1 70.5M17.1 72.4L15.9 74.2M17.1 72.4L19.2 72.8M13.7 64.7L7.5 73.2M10.3 69.4L7.1 69.2M10.3 69.4L11.4 72.3M8.7 71.5L6.6 71.4M8.7 71.5L9.5 73.5M13.7 64.7L3.2 63.6M7.9 64.1L6.6 61.3M7.9 64.1L6.0 66.6M5.3 63.8L4.4 61.9M5.3 63.8L4.0 65.5M13.7 64.7L9.5 55.1M11.4 59.4L13.1 56.8M11.4 59.4L8.2 59.0M10.3 57.0L11.5 55.3M10.3 57.0L8.2 56.7M13.7 64.7L19.9 56.3M17.1 60.1L20.3 60.3M17.1 60.1L16.0 57.1M18.7 57.9L20.8 58.1M18.7 57.9L17.9 56.0' fill='none' stroke='%234FAFA8' stroke-opacity='0.17' stroke-width='1.37' stroke-linecap='round'/%3E%3Cpath d='M77.7 51.3L84.9 55.4M81.7 53.6L81.8 56.1M81.7 53.6L83.8 52.4M83.5 54.6L83.5 56.3M83.5 54.6L84.9 53.8M77.7 51.3L77.8 59.6M77.8 55.9L75.7 57.2M77.8 55.9L79.9 57.2M77.8 57.9L76.4 58.8M77.8 57.9L79.2 58.8M77.7 51.3L70.6 55.5M73.8 53.6L71.6 52.5M73.8 53.6L73.7 56.1M72.0 54.7L70.6 53.9M72.0 54.7L72.0 56.3M77.7 51.3L70.6 47.2M73.8 49.1L73.7 46.6M73.8 49.1L71.6 50.3M72.0 48.1L72.0 46.4M72.0 48.1L70.6 48.8M77.7 51.3L77.7 43.1M77.7 46.8L79.8 45.5M77.7 46.8L75.6 45.5M77.7 44.7L79.1 43.9M77.7 44.7L76.3 43.9M77.7 51.3L84.9 47.2M81.7 49.1L83.8 50.2M81.7 49.1L81.7 46.6M83.4 48.0L84.9 48.8M83.4 48.0L83.5 46.4' fill='none' stroke='%232670A6' stroke-opacity='0.16' stroke-width='1.07' stroke-linecap='round'/%3E%3Cpath d='M93.4 75.2L100.2 75.3M97.2 75.3L98.2 77.0M97.2 75.3L98.3 73.5M98.9 75.3L99.6 76.4M98.9 75.3L99.6 74.1M93.4 75.2L96.8 81.1M95.3 78.5L94.3 80.3M95.3 78.5L97.3 78.6M96.1 80.0L95.5 81.2M96.1 80.0L97.5 80.0M93.4 75.2L90.0 81.1M91.6 78.5L89.5 78.5M91.6 78.5L92.5 80.3M90.7 79.9L89.3 80.0M90.7 79.9L91.3 81.1M93.4 75.2L86.7 75.2M89.7 75.2L88.6 73.5M89.7 75.2L88.6 76.9M88.0 75.2L87.3 74.0M88.0 75.2L87.3 76.3M93.4 75.2L90.1 69.3M91.6 72.0L92.6 70.2M91.6 72.0L89.6 71.9M90.8 70.5L91.4 69.3M90.8 70.5L89.4 70.5M93.4 75.2L96.9 69.4M95.3 72.0L97.4 72.0M95.3 72.0L94.4 70.2M96.2 70.5L97.5 70.5M96.2 70.5L95.6 69.3' fill='none' stroke='%234FAFA8' stroke-opacity='0.2' stroke-width='0.88' stroke-linecap='round'/%3E%3Cpath d='M131.4 28.4L140.2 34.8M136.2 31.9L136.0 35.2M136.2 31.9L139.3 30.7M138.4 33.6L138.3 35.7M138.4 33.6L140.4 32.7M131.4 28.4L130.2 39.2M130.7 34.4L127.8 35.8M130.7 34.4L133.3 36.4M130.5 37.1L128.5 38.0M130.5 37.1L132.2 38.4M131.4 28.4L121.4 32.8M125.9 30.8L123.2 29.0M125.9 30.8L125.4 34.1M123.4 31.9L121.6 30.7M123.4 31.9L123.1 34.1M131.4 28.4L122.6 22.0M126.5 24.9L126.8 21.6M126.5 24.9L123.5 26.1M124.3 23.3L124.5 21.1M124.3 23.3L122.3 24.1M131.4 28.4L132.5 17.6M132.0 22.5L135.0 21.0M132.0 22.5L129.4 20.4M132.3 19.7L134.3 18.8M132.3 19.7L130.6 18.4M131.4 28.4L141.3 24.0M136.9 26.0L139.6 27.8M136.9 26.0L137.3 22.8M139.4 24.9L141.2 26.1M139.4 24.9L139.7 22.7M271.4 28.4L280.2 34.8M276.2 31.9L276.0 35.2M276.2 31.9L279.3 30.7M278.4 33.6L278.3 35.7M278.4 33.6L280.4 32.7M271.4 28.4L270.2 39.2M270.7 34.4L267.8 35.8M270.7 34.4L273.3 36.4M270.5 37.1L268.5 38.0M270.5 37.1L272.2 38.4M271.4 28.4L261.4 32.8M265.9 30.8L263.2 29.0M265.9 30.8L265.4 34.1M263.4 31.9L261.6 30.7M263.4 31.9L263.1 34.1M271.4 28.4L262.6 22.0M266.5 24.9L266.8 21.6M266.5 24.9L263.5 26.1M264.3 23.3L264.5 21.1M264.3 23.3L262.3 24.1M271.4 28.4L272.5 17.6M272.0 22.5L275.0 21.0M272.0 22.5L269.4 20.4M272.3 19.7L274.3 18.8M272.3 19.7L270.6 18.4M271.4 28.4L281.3 24.0M276.9 26.0L279.6 27.8M276.9 26.0L277.3 22.8M279.4 24.9L281.2 26.1M279.4 24.9L279.7 22.7' fill='none' stroke='%234FAFA8' stroke-opacity='0.17' stroke-width='1.42' stroke-linecap='round'/%3E%3Cpath d='M74.2 76.4L80.3 80.6M77.6 78.7L77.5 80.9M77.6 78.7L79.6 77.8M79.1 79.7L79.0 81.2M79.1 79.7L80.4 79.2M74.2 76.4L73.6 83.7M73.9 80.4L71.9 81.4M73.9 80.4L75.7 81.7M73.7 82.2L72.4 82.9M73.7 82.2L74.9 83.1M74.2 76.4L67.6 79.5M70.6 78.1L68.7 76.9M70.6 78.1L70.3 80.3M68.9 78.9L67.7 78.1M68.9 78.9L68.7 80.3M74.2 76.4L68.2 72.2M70.9 74.1L71.0 71.9M70.9 74.1L68.9 74.9M69.4 73.0L69.5 71.5M69.4 73.0L68.1 73.6M74.2 76.4L74.9 69.0M74.6 72.3L76.6 71.3M74.6 72.3L72.8 71.0M74.7 70.5L76.1 69.8M74.7 70.5L73.6 69.6M74.2 76.4L80.9 73.2M77.9 74.7L79.8 75.8M77.9 74.7L78.2 72.5M79.6 73.9L80.8 74.7M79.6 73.9L79.7 72.4' fill='none' stroke='%232670A6' stroke-opacity='0.17' stroke-width='0.96' stroke-linecap='round'/%3E%3Cpath d='M41.2 36.5L47.5 39.4M44.7 38.1L44.9 40.2M44.7 38.1L46.4 37.0M46.2 38.9L46.4 40.2M46.2 38.9L47.4 38.1M41.2 36.5L41.8 43.5M41.5 40.3L39.9 41.6M41.5 40.3L43.4 41.3M41.7 42.1L40.6 42.9M41.7 42.1L42.9 42.7M41.2 36.5L35.5 40.6M38.1 38.8L36.2 38.0M38.1 38.8L38.2 40.8M36.7 39.8L35.4 39.2M36.7 39.8L36.7 41.1M41.2 36.5L34.9 33.7M37.7 35.0L37.4 32.9M37.7 35.0L36.0 36.1M36.1 34.2L36.0 32.9M36.1 34.2L35.0 35.0M41.2 36.5L40.5 29.6M40.8 32.7L42.5 31.5M40.8 32.7L39.0 31.8M40.7 31.0L41.8 30.2M40.7 31.0L39.4 30.4M41.2 36.5L46.8 32.5M44.3 34.3L46.2 35.1M44.3 34.3L44.2 32.3M45.7 33.3L47.0 33.9M45.7 33.3L45.6 31.9' fill='none' stroke='%232670A6' stroke-opacity='0.18' stroke-width='0.9' stroke-linecap='round'/%3E%3Ccircle cx='97.0' cy='6.6' r='1.5' fill='%232670A6' fill-opacity='0.31'/%3E%3Ccircle cx='106.2' cy='37.3' r='1.4' fill='%234FAFA8' fill-opacity='0.23'/%3E%3Ccircle cx='12.9' cy='82.2' r='1.1' fill='%234FAFA8' fill-opacity='0.35'/%3E%3Ccircle cx='91.1' cy='62.2' r='1.9' fill='%234FAFA8' fill-opacity='0.23'/%3E%3Ccircle cx='63.9' cy='128.7' r='1.3' fill='%232670A6' fill-opacity='0.28'/%3E%3Ccircle cx='123.9' cy='75.2' r='1.0' fill='%234FAFA8' fill-opacity='0.32'/%3E%3Ccircle cx='102.7' cy='123.8' r='1.6' fill='%234FAFA8' fill-opacity='0.22'/%3E%3Ccircle cx='137.7' cy='91.2' r='1.3' fill='%234FAFA8' fill-opacity='0.26'/%3E%3Ccircle cx='118.4' cy='93.6' r='1.3' fill='%234FAFA8' fill-opacity='0.33'/%3E%3Ccircle cx='129.4' cy='12.0' r='1.5' fill='%234FAFA8' fill-opacity='0.25'/%3E%3Ccircle cx='110.0' cy='35.3' r='0.9' fill='%234FAFA8' fill-opacity='0.2'/%3E%3Ccircle cx='61.9' cy='104.3' r='1.0' fill='%234FAFA8' fill-opacity='0.33'/%3E%3Ccircle cx='86.2' cy='118.7' r='1.4' fill='%232670A6' fill-opacity='0.3'/%3E%3Ccircle cx='23.8' cy='43.9' r='1.1' fill='%234FAFA8' fill-opacity='0.32'/%3E%3Ccircle cx='8.0' cy='5.7' r='1.4' fill='%234FAFA8' fill-opacity='0.35'/%3E%3Ccircle cx='128.1' cy='91.4' r='1.4' fill='%234FAFA8' fill-opacity='0.24'/%3E%3Ccircle cx='9.4' cy='7.0' r='1.2' fill='%234FAFA8' fill-opacity='0.34'/%3E%3Ccircle cx='92.6' cy='44.2' r='1.2' fill='%232670A6' fill-opacity='0.29'/%3E%3Ccircle cx='36.4' cy='98.6' r='1.2' fill='%234FAFA8' fill-opacity='0.27'/%3E%3Ccircle cx='73.7' cy='78.8' r='1.8' fill='%234FAFA8' fill-opacity='0.24'/%3E%3Ccircle cx='25.2' cy='36.4' r='1.8' fill='%234FAFA8' fill-opacity='0.34'/%3E%3Ccircle cx='123.2' cy='66.2' r='1.1' fill='%234FAFA8' fill-opacity='0.34'/%3E%3Ccircle cx='8.7' cy='103.6' r='1.3' fill='%234FAFA8' fill-opacity='0.33'/%3E%3Ccircle cx='76.3' cy='25.1' r='1.2' fill='%232670A6' fill-opacity='0.21'/%3E%3Ccircle cx='50.5' cy='92.0' r='1.0' fill='%234FAFA8' fill-opacity='0.26'/%3E%3Ccircle cx='61.0' cy='21.5' r='1.9' fill='%234FAFA8' fill-opacity='0.26'/%3E%3Ccircle cx='21.1' cy='24.2' r='1.1' fill='%234FAFA8' fill-opacity='0.3'/%3E%3Ccircle cx='69.0' cy='45.9' r='1.6' fill='%234FAFA8' fill-opacity='0.32'/%3E%3Ccircle cx='40.2' cy='18.1' r='1.5' fill='%232670A6' fill-opacity='0.29'/%3E%3Ccircle cx='43.5' cy='115.6' r='1.7' fill='%234FAFA8' fill-opacity='0.29'/%3E%3Ccircle cx='10.4' cy='135.0' r='1.7' fill='%234FAFA8' fill-opacity='0.25'/%3E%3Ccircle cx='41.7' cy='7.2' r='1.3' fill='%232670A6' fill-opacity='0.28'/%3E%3Ccircle cx='119.7' cy='129.9' r='1.6' fill='%234FAFA8' fill-opacity='0.29'/%3E%3Ccircle cx='107.1' cy='116.8' r='1.4' fill='%232670A6' fill-opacity='0.3'/%3E%3Ccircle cx='85.7' cy='99.5' r='1.4' fill='%232670A6' fill-opacity='0.33'/%3E%3Ccircle cx='42.0' cy='47.2' r='1.7' fill='%234FAFA8' fill-opacity='0.21'/%3E%3Ccircle cx='71.2' cy='69.9' r='1.3' fill='%232670A6' fill-opacity='0.34'/%3E%3Ccircle cx='43.6' cy='5.0' r='1.0' fill='%232670A6' fill-opacity='0.28'/%3E%3Ccircle cx='41.0' cy='61.3' r='1.3' fill='%23E14B2A' fill-opacity='0.20'/%3E%3Ccircle cx='51.4' cy='77.2' r='1.3' fill='%23E14B2A' fill-opacity='0.20'/%3E%3Ccircle cx='39.6' cy='54.0' r='1.3' fill='%23E14B2A' fill-opacity='0.20'/%3E%3C/svg%3E");
/* THE SECTION DIVIDER: a mountain range, 78px tile with two capped
peaks and a second range behind. Few and LARGE is the whole trick:
an earlier pass at six peaks per 58px tile hit exactly the fine-
sawtooth failure the bunting divider found at 36px. Regenerate with
~/projects/.learn-tools/i07/small.py. */
--ridge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='28'%3E%3Cpath d='M0 16 L14 11 L30 18 L46 9 L62 17 L78 16 L78 22 L0 22Z' fill='%234FAFA8' fill-opacity='0.42'/%3E%3Cpath d='M0 20 L10 21 L24 5 L40 21 L56 10 L70 21 L78 20 L78 22 L0 22Z' fill='%232670A6'/%3E%3Cpath d='M19.0 13.0L24 5L29.0 13.0L26.2 10.5L24 12.8L21.8 10.5Z' fill='%23F4F6F1'/%3E%3Cpath d='M52.2 16.1L56 10L59.8 16.1L57.7 14.2L56 15.9L54.3 14.2Z' fill='%23F4F6F1'/%3E%3Crect x='0' y='22' width='78' height='1.6' fill='%232670A6'/%3E%3Ccircle cx='6' cy='5' r='1.5' fill='%234FAFA8'/%3E%3Ccircle cx='44' cy='3' r='1.3' fill='%232670A6'/%3E%3Ccircle cx='68' cy='6' r='1.4' fill='%234FAFA8'/%3E%3Ccircle cx='34' cy='4' r='1.1' fill='%23E14B2A'/%3E%3C/svg%3E");
--ridge-sm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='18'%3E%3Cpath d='M0 10 L10 7 L22 12 L34 6 L46 11 L52 10 L52 14 L0 14Z' fill='%234FAFA8' fill-opacity='0.42'/%3E%3Cpath d='M0 13 L8 13 L17 4 L28 13 L38 7 L47 13 L52 13 L52 14 L0 14Z' fill='%232670A6'/%3E%3Cpath d='M13.6 9.4L17 4L20.4 9.4L18.5 7.7L17 9.3L15.5 7.7Z' fill='%23F4F6F1'/%3E%3Crect x='0' y='14' width='52' height='1.3' fill='%232670A6'/%3E%3Ccircle cx='4' cy='3' r='1.0' fill='%234FAFA8'/%3E%3Ccircle cx='44' cy='3' r='1.0' fill='%232670A6'/%3E%3C/svg%3E");
--frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%23E14B2A'/%3E%3Cpath d='M-36 -6L6 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-24 -6L18 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-12 -6L30 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M0 -6L42 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M12 -6L54 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M24 -6L66 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M36 -6L78 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M48 -6L90 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M60 -6L102 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M72 -6L114 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3C/svg%3E");
--frame-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%232670A6'/%3E%3Cpath d='M-36 -6L6 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-24 -6L18 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-12 -6L30 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M0 -6L42 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M12 -6L54 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M24 -6L66 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M36 -6L78 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M48 -6L90 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M60 -6L102 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M72 -6L114 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3C/svg%3E");
--frame-teal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%234FAFA8'/%3E%3Cpath d='M-36 -6L6 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-24 -6L18 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-12 -6L30 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M0 -6L42 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M12 -6L54 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M24 -6L66 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M36 -6L78 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M48 -6L90 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M60 -6L102 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M72 -6L114 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3C/svg%3E");
--frame-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%2322262A'/%3E%3Cpath d='M-36 -6L6 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-24 -6L18 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M-12 -6L30 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M0 -6L42 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M12 -6L54 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M24 -6L66 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M36 -6L78 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M48 -6L90 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M60 -6L102 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3Cpath d='M72 -6L114 36' stroke='%23F4F6F1' stroke-width='5' fill='none'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
margin:0;
color:var(--ink);
font-family:var(--body);
font-size:16.5px;
line-height:1.72;
-webkit-font-smoothing:antialiased;
background-color:var(--frost);
background-image:var(--snowfield);
background-size:140px 140px;
background-attachment:fixed; /* the page falls through the snow */
/* clip, NOT hidden: `hidden` makes body a scroll container and every
position:sticky descendant silently stops sticking. */
overflow-x:clip;
}
.wrap{max-width:900px;margin:0 auto;padding:26px 22px 90px;position:relative;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
/* die-cut stickers dropped at the seams. Never in the text's way. */
.peel{position:absolute;pointer-events:none;z-index:2;
filter:drop-shadow(1px 2px 2px var(--shadow));}
.peel svg{display:block;width:100%;height:100%;}
/* =========================================================================
THE SEAL
Scalloped circle, the series geometry: 26 discs at r 5.4 on a r 49 body.
The crest/shield variant is NOT used here - it is reserved for Issue 08.
The seal is also the link home on every letter.
========================================================================= */
.seal-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:6px 0 20px;}
.seal{width:106px;height:106px;display:block;flex:none;
filter:drop-shadow(1px 2px 3px var(--shadow));}
.seal-note{font-family:var(--hand);font-size:21px;line-height:1.25;
color:var(--ink-soft);margin:0;max-width:none;}
.seal-note b{display:block;font-family:var(--display);font-weight:400;
font-size:14px;letter-spacing:.15em;text-transform:uppercase;
color:var(--blue-dk);margin-bottom:1px;}
/* Frost on alpine blue, 4.88:1. Twice on the page and nowhere else: the
issue number and the one part marker. */
.block-stamp{
display:inline-block;background:var(--blue);color:var(--frost);
font-family:var(--display);font-weight:400;letter-spacing:.2em;
text-transform:uppercase;padding:5px 13px 3px;border-radius:3px;
box-shadow:0 1px 0 var(--blue-dk);
}
.block-stamp.big{font-size:17px;}
.block-stamp.small{font-size:13.5px;letter-spacing:.18em;}
.oval-label{
display:inline-block;border:1.6px solid var(--teal-dk);border-radius:999px;
padding:2px 13px;font-family:var(--display);font-size:12.5px;
letter-spacing:.13em;text-transform:uppercase;color:var(--teal-dk);
background:var(--card);
}
/* =========================================================================
MASTHEAD
A resort trail-map board: a heavy blue rule top and bottom, the corduroy
rake behind it, and the hero sticker sitting in a band along the foot.
========================================================================= */
.masthead{
position:relative;background-color:var(--card);
background-image:var(--contour);background-size:144px 100px;
border-top:5px solid var(--blue);border-bottom:5px solid var(--blue);
border-radius:var(--r);margin:0 0 20px;
box-shadow:0 2px 0 var(--rule);
}
.masthead-inner{padding:20px 24px 88px;} /* the sticker's band */
.mast-top{display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.eyebrow{margin:0;max-width:none;}
h1{
font-family:var(--title);font-weight:400;
font-size:clamp(30px,7.2vw,58px);line-height:1.04;
letter-spacing:-.005em;color:var(--blue);
margin:0 0 12px;text-wrap:balance;
}
.subtitle{margin:0 0 4px;color:var(--ink-soft);font-size:17px;}
.subtitle:last-of-type{margin-bottom:0;}
/* The hero sticker bleeds past the card's right edge, which is why body
carries overflow-x:clip. A mask would hide the paint but NOT the layout -
scrollWidth still counts it. */
.hero-sticker{
position:absolute;right:16px;bottom:10px;width:150px;height:78px;
pointer-events:none;filter:drop-shadow(2px 3px 3px var(--shadow));
}
.hero-sticker svg{display:block;position:absolute;}
.hs-peak{right:0;bottom:0;width:96px;height:96px;}
.hs-skis{right:74px;bottom:6px;width:62px;height:62px;}
/* =========================================================================
FACT PILLS
SOLID tinted fills, each matching its own border, and each labelled in
that accent's DERIVED dark - never the named colour, which is what the
contrast note in the token block is about.
========================================================================= */
.stamp-row{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;}
.stamp{
font-family:var(--code);font-size:12.5px;font-weight:700;
padding:4px 11px;border-radius:999px;
background:var(--blue-tint-2);border:1.5px solid var(--blue-dk);color:var(--blue-dk);
}
.stamp:nth-child(2){background:var(--teal-tint-2);border-color:var(--teal-dk);color:var(--teal-dk);}
.stamp:nth-child(3){background:var(--red-tint-2);border-color:var(--red-dk);color:var(--red-dk);}
.stamp:nth-child(4){background:var(--cocoa-tint);border-color:var(--cocoa-dk);color:var(--cocoa-dk);}
.stamp:nth-child(5){background:var(--blue-tint);border-color:var(--blue-dk);color:var(--blue-dk);}
.ridge-strip{display:block;width:100%;height:28px;margin:0 0 26px;
background:var(--ridge) repeat-x center/78px 28px;}
/* =========================================================================
STICKER LEGEND
========================================================================= */
.kit-strip{
background-color:var(--card);background-image:var(--fall);
background-size:34px 30px;
border:1.5px solid var(--rule);border-radius:var(--r);
padding:13px 16px;margin:0 0 26px;
}
.kit-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.kit-lbl{
font-family:var(--display);font-size:13px;letter-spacing:.15em;
text-transform:uppercase;color:var(--blue-dk);flex:none;padding-top:6px;
}
.stickers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
gap:9px 20px;flex:1 1 300px;}
.sticker{display:flex;align-items:center;gap:8px;margin:0;
font-family:var(--hand);font-size:19px;color:var(--ink-soft);}
.sticker .ico{position:relative;flex:none;width:30px;height:30px;line-height:0;}
.sticker svg{width:30px;height:30px;display:block;
filter:drop-shadow(1px 1px 1px var(--shadow));}
/* Steam off the cocoa, drawn in CSS rather than added to the sprite so the
icon stays one clean sticker. The pseudo-elements hang off .ico - a span
that IS the icon - and not off the , which is a flex ROW: hung off the
row they land beside the mug instead of above it. */
.sticker.hot .ico::before,.sticker.hot .ico::after{
content:"";position:absolute;top:-7px;left:9px;width:2px;height:8px;
border-radius:2px;background:var(--teal);opacity:0;}
.sticker.hot .ico::after{left:15px;}
.sticker.hot:hover .ico::before,.sticker.hot:hover .ico::after,
.sticker.hot:focus-within .ico::before,.sticker.hot:focus-within .ico::after{
animation:steam 1.5s ease-out infinite;}
.sticker.hot:hover .ico::after{animation-delay:.42s;}
@keyframes steam{
0%{opacity:0;transform:translateY(3px) scaleY(.6);}
40%{opacity:.85;}
100%{opacity:0;transform:translateY(-9px) scaleY(1.15);}
}
/* =========================================================================
CONTENTS
Counter-driven rather than list-marker driven: display:flex on an
silently kills its ::marker, which is how Issue 04 lost its numbering.
========================================================================= */
.toc{
background:var(--card);border:1.5px solid var(--rule);border-radius:var(--r);
padding:16px 20px 12px;margin:0 0 8px;
}
.toc h2{
font-family:var(--display);font-size:14px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-faint);font-weight:400;
margin:0 0 8px;position:relative;
}
.toc h2::after{content:"";position:absolute;left:0;right:0;top:50%;
height:1.5px;background:var(--rule);z-index:0;}
.toc h2>span:first-child{background:var(--card);padding-right:10px;position:relative;z-index:1;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{
display:flex;align-items:baseline;gap:10px;counter-increment:toc;
padding:5px 0;border-bottom:1px dotted var(--rule);}
.toc li:last-child{border-bottom:none;}
.toc li::before{
content:counter(toc,decimal-leading-zero);flex:none;
font-family:var(--code);font-size:11.5px;font-weight:700;color:var(--teal-dk);}
.toc a{flex:1 1 auto;color:var(--ink);text-decoration:none;
border-bottom:1.5px solid transparent;}
.toc a:hover{border-bottom-color:var(--blue);}
/* =========================================================================
PART MARKER + SECTIONS
ONE banner, before section 01. No lettered arcs anywhere on this page.
========================================================================= */
.part-marker{text-align:center;margin:22px 0 4px;max-width:none;
display:flex;align-items:center;gap:14px;}
.part-marker::before,.part-marker::after{
content:"";flex:1 1 auto;height:18px;
background:var(--ridge-sm) repeat-x center/52px 18px;opacity:.85;}
.part{position:relative;margin:0 0 34px;padding-top:34px;}
.part::before{
content:"";display:block;width:100%;height:28px;margin:0 0 22px;
background:var(--ridge) repeat-x center/78px 28px;}
.part:first-of-type{padding-top:14px;}
.part:first-of-type::before{content:none;}
.part-head{display:flex;align-items:flex-start;gap:16px;margin:0 0 6px;}
.part-head .part-titles{flex:1 1 auto;min-width:0;}
/* THE SECTION BADGE: a lift pass on its wire, not the series' postage-stamp
square. A rounded tag with a punched hole at the top - which is a shape
the perforation mask cannot make and does not need to: it is one
pseudo-element, not a tiled gradient. */
.part-num{
flex:none;position:relative;width:58px;padding:16px 0 8px;margin:0;
max-width:none;text-align:center;border-radius:7px;
background:var(--blue);color:var(--frost);
box-shadow:0 2px 0 var(--blue-dk);
}
.part-num::before{
content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
width:13px;height:5px;border-radius:3px;background:var(--frost);
box-shadow:inset 0 1px 1px rgba(34,38,42,.35);}
.part-num svg{width:22px;height:22px;display:block;margin:0 auto 1px;}
.part-num .no{display:block;font-family:var(--display);font-size:23px;
line-height:1;letter-spacing:.04em;}
.part-num .denom{display:block;font-family:var(--code);font-size:7.4px;
font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.part-titles h2{margin:2px 0 0;}
h2{
font-family:var(--title);font-weight:400;font-size:clamp(20px,3.5vw,29px);
line-height:1.14;color:var(--blue);margin:0 0 8px;text-wrap:balance;
}
h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.25;
letter-spacing:.03em;color:var(--ink);margin:22px 0 6px;}
h4{font-family:var(--display);font-weight:400;font-size:16px;letter-spacing:.06em;margin:0;}
p{margin:0 0 15px;max-width:68ch;}
.lede{
font-family:var(--hand);font-size:23px;line-height:1.42;
color:var(--teal-dk);margin:0 0 16px;max-width:56ch;
}
a{color:var(--blue-dk);text-underline-offset:3px;text-decoration-thickness:1.5px;}
a:hover{color:var(--red-dk);}
/* =========================================================================
CODE
========================================================================= */
code{font-family:var(--code);font-size:.92em;background:var(--blue-tint);
padding:1px 4px;border-radius:3px;}
a code{background:none;padding:0;}
.code{
background:var(--ink);border-radius:var(--r);margin:0 0 18px;
overflow:hidden;box-shadow:0 2px 0 var(--rule-firm);
}
.code-label{
display:flex;align-items:center;gap:8px;
background:rgba(244,246,241,.09);padding:6px 14px;
font-family:var(--display);font-size:12.5px;letter-spacing:.14em;
text-transform:uppercase;color:#C9D6DE;
}
.code-label .rhs{margin-left:auto;font-family:var(--hand);font-size:16px;
letter-spacing:0;text-transform:none;color:#9FB4C2;}
.code pre{
margin:0;padding:13px 14px;overflow-x:auto;
font-family:var(--code);font-size:13.5px;line-height:1.62;color:#EAF1F4;
}
/* Frost-family inks on charcoal: all well clear of AA. */
.s{color:#8FD3CD;} /* strings and values */
.c{color:#98A4AE;font-style:italic;} /* comments */
.d{color:#7FB6DC;font-weight:700;user-select:none;} /* the $ prompt */
.k{color:#F0A48C;} /* keys, flags */
.copy-btn{
margin-left:auto;flex:none;border:1.5px solid #55636D;background:none;
color:#C9D6DE;font-family:var(--display);font-size:11.5px;letter-spacing:.12em;
text-transform:uppercase;padding:2px 10px;border-radius:999px;cursor:pointer;
}
.code-label .rhs+.copy-btn{margin-left:10px;}
.copy-btn:hover{background:var(--blue);border-color:var(--blue);color:var(--frost);}
.copy-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
.copy-btn.done{background:var(--teal-dk);border-color:var(--teal-dk);color:var(--frost);}
.copy-btn.failed{background:var(--red);border-color:var(--red);color:var(--frost);}
/* =========================================================================
CALLOUTS
Resort furniture: a piste-map notice, a ski-patrol hut chit, an off-piste
warning. All three carry a real patterned ground - flat colour reads as
unfinished, which is what Issue 03 shipped and had to fix.
========================================================================= */
.callout{
border-radius:var(--r);padding:15px 18px;margin:0 0 20px;
background-color:var(--card);
}
.callout p{margin:0 0 10px;max-width:none;}
.callout p:last-child{margin-bottom:0;}
.callout code{background:var(--frost);}
.callout .tag{
display:flex;align-items:center;gap:10px;max-width:none;
font-family:var(--display);font-size:13.5px;letter-spacing:.15em;
text-transform:uppercase;margin:0 0 7px;
}
.callout .tag::after{content:"";flex:1 1 auto;height:14px;
background:var(--ridge-sm) repeat-x center/52px 18px;opacity:.5;}
/* WHERE THIS IS GOING - the board at the bottom of the lift */
.callout.board{
background-image:var(--corduroy);
border:2.5px solid var(--blue);border-left-width:8px;
}
.callout.board .tag{color:var(--blue-dk);}
/* THE PATROL HUT - a chit off the patrol clipboard */
.callout.patrol{
background-image:var(--cross);background-size:44px 62px;
border:2px dashed var(--red-dk);
position:relative;
}
.callout.patrol .tag{color:var(--red-dk);}
.callout.patrol .sign{display:block;text-align:right;font-family:var(--hand);
font-size:19px;color:var(--ink-faint);margin-top:8px;}
.callout.patrol q{font-style:italic;}
/* OFF-PISTE - the rope you can duck under, and the reason not to.
The ONE plain surface on the page, by instruction. It carried the powder
blobs and read as busy. Flat colour normally reads as unfinished in this
series - that was Issue 03's mistake - but the rule assumes every callout
is flat. Here it is one quiet box among six patterned ones, framed in the
rare accent and headed by the ridge rule, so the plainness reads as
deliberate rest rather than as something missing. It is also the right box
for it: this is the aside, the thing said quietly at the edge of the run.
A 7% cocoa wash rather than the bare card, so it is still a different
PAPER and not just the same card with another border. Ink measures 13.49,
cocoa-dk 6.35, ink-soft 6.29 on it. */
.callout.offpiste{
background-color:#F3F1EB;
background-image:none;
border:2px solid var(--cocoa-dk);
}
.callout.offpiste .tag{color:var(--cocoa-dk);}
/* BASE LAYER - the good news box */
.callout.base{
background-image:var(--knit);background-size:66px 66px;
border:2px solid var(--teal-dk);
}
.callout.base .tag{color:var(--teal-dk);}
/* =========================================================================
TABLES
Two of them carry the issue's actual numbers, so they are furniture that
has to READ, not decoration. Head in the display face on blue; the body
in the code face because every cell is a count.
========================================================================= */
.tbl-wrap{overflow-x:auto;margin:0 0 20px;border-radius:var(--r);
box-shadow:0 2px 0 var(--rule-firm);}
table{border-collapse:collapse;width:100%;background:var(--card);
font-size:14.5px;min-width:460px;}
thead th{
background:var(--blue);color:var(--frost);text-align:left;
font-family:var(--display);font-weight:400;font-size:13.5px;
letter-spacing:.11em;text-transform:uppercase;padding:7px 12px;
}
tbody th{text-align:left;font-weight:600;}
td,tbody th{padding:7px 12px;border-bottom:1px solid var(--rule);vertical-align:top;}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none;}
tbody tr:nth-child(even){background:rgba(38,112,166,.05);}
td.n{font-family:var(--code);font-variant-numeric:tabular-nums;white-space:nowrap;}
td.ccy{font-family:var(--code);font-size:13.5px;}
tr.hi td,tr.hi th{background:var(--red-tint);}
tr.hi td.n{color:var(--red-dk);font-weight:700;}
caption{caption-side:bottom;text-align:left;padding:8px 2px 0;
font-family:var(--hand);font-size:18px;color:var(--ink-faint);}
/* =========================================================================
INTERACTIVE 1 - the market status board (section 06)
The calendar mismatch is a table of four numbers until you pick a real
date and watch three exchanges open and one stay shut. Every date in it is
a date that genuinely appears in the gap list the build printed.
PROGRESSIVE ENHANCEMENT, strictly, the way every interactive piece in
this series is built. The board's markup is a REAL state - 2 January,
with SIX closed and the other three open, so both pill styles are visible
at once - the controls carry `hidden`, and every live rule is scoped
under .is-live which is added by the script. With JavaScript off this is
one legible static board, not a row of dead buttons.
========================================================================= */
.lift-lab{
background-color:var(--ink);border-radius:var(--r);
padding:16px 18px 18px;margin:0 0 22px;
box-shadow:0 2px 0 var(--rule-firm);
}
.ll-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px;}
.ll-title{font-family:var(--display);font-size:14px;letter-spacing:.16em;
text-transform:uppercase;color:var(--frost);}
.ll-sub{font-family:var(--hand);font-size:18px;color:#9FB4C2;}
.ll-date{
font-family:var(--code);font-size:15px;font-weight:700;color:#8FD3CD;
margin:0 0 12px;max-width:none;
}
.ll-date b{color:var(--frost);}
.ll-runs{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.ll-run{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:8px 12px;border-radius:6px;
background:rgba(244,246,241,.07);border-left:5px solid var(--teal);
}
.ll-run .rname{font-family:var(--display);font-size:16px;letter-spacing:.08em;
color:var(--frost);flex:none;min-width:70px;}
.ll-run .rwho{font-family:var(--code);font-size:12px;color:#98A4AE;flex:1 1 130px;}
.ll-run .rstat{
font-family:var(--display);font-size:13px;letter-spacing:.14em;
text-transform:uppercase;padding:2px 11px 1px;border-radius:999px;flex:none;
background:var(--teal);color:var(--ink);
}
.ll-run.shut{border-left-color:var(--red);}
.ll-run.shut .rstat{background:var(--red);color:var(--frost);}
.ll-run.shut .rname{color:#F3C3B5;}
.ll-read{
margin:13px 0 0;max-width:none;font-family:var(--hand);font-size:19px;
line-height:1.35;color:#C9D6DE;
}
.ll-read.alarm{color:#F3C3B5;}
.ll-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:13px 0 0;}
.ll-controls[hidden]{display:none;} /* `hidden` loses to any display rule */
.ll-btn{
font-family:var(--display);font-size:13px;letter-spacing:.1em;
text-transform:uppercase;padding:5px 12px 4px;border-radius:999px;cursor:pointer;
border:1.5px solid #55636D;background:none;color:#C9D6DE;
}
.ll-btn:hover{border-color:var(--teal);color:var(--frost);}
.ll-btn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--ink);}
.ll-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
/* =========================================================================
INTERACTIVE 2 - forward-filled vs actually fetched (section 06)
One cell of the combined frame, shown as what was actually fetched and as
what the forward-fill put there. The two states are different SURFACES,
not two colours of the same one: raked corduroy against untracked powder.
========================================================================= */
.groom{
border:2px solid var(--blue);border-radius:var(--r);
background-color:var(--card);background-image:var(--corduroy);
padding:15px 18px;margin:0 0 22px;
}
.groom.fresh{background-image:var(--powder);background-size:64px 40px;
border-color:var(--teal-dk);}
.gr-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.gr-title{font-family:var(--display);font-size:13.5px;letter-spacing:.15em;
text-transform:uppercase;color:var(--blue-dk);}
.groom.fresh .gr-title{color:var(--teal-dk);}
.gr-cell{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
font-family:var(--code);font-size:15px;
background:var(--card);border:1.5px dashed var(--rule-firm);
border-radius:6px;padding:9px 13px;
}
.gr-cell .lbl{font-size:12px;color:var(--ink-faint);}
.gr-cell .val{font-size:19px;font-weight:700;color:var(--ink);}
.gr-note{margin:11px 0 0;max-width:none;font-family:var(--hand);font-size:19px;
color:var(--ink-soft);}
.gr-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;}
.gr-controls[hidden]{display:none;}
/* The lift board's buttons are drawn for a CHARCOAL panel and reusing them
here measured 1.44:1 - the unpressed label was very nearly invisible on
the card. Same shape, inks solved for a light ground: 6.90:1 unpressed,
frost on teal-dk at 5.55:1 when pressed. */
.gr-btn{
font-family:var(--display);font-size:13px;letter-spacing:.1em;
text-transform:uppercase;padding:5px 12px 4px;border-radius:999px;cursor:pointer;
border:1.5px solid var(--rule-firm);background:var(--card);color:var(--ink-soft);
}
.gr-btn:hover{border-color:var(--teal-dk);color:var(--ink);}
.gr-btn[aria-pressed="true"]{background:var(--teal-dk);border-color:var(--teal-dk);color:var(--frost);}
.gr-btn:focus-visible{outline:2px solid var(--teal-dk);outline-offset:2px;}
/* =========================================================================
INTERACTIVE 3 - the fetched_at beacon
fetched_at is a timestamp in a JSON file until something pings. The
animation is decorative and is the FIRST thing to go under
prefers-reduced-motion; the reading it annotates stays either way.
========================================================================= */
.beacon{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
background-color:var(--card);background-image:var(--fall);background-size:34px 30px;
border:2px solid var(--teal-dk);border-radius:var(--r);
padding:12px 16px;margin:0 0 20px;
}
.bc-dot{
position:relative;flex:none;width:15px;height:15px;border-radius:50%;
background:var(--teal-dk);
}
.bc-dot::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:2px solid var(--teal-dk);
}
.is-live .bc-dot::after{animation:ping 2.4s ease-out infinite;}
@keyframes ping{
0%{transform:scale(1);opacity:.75;}
70%{transform:scale(2.9);opacity:0;}
100%{transform:scale(2.9);opacity:0;}
}
.bc-body{flex:1 1 240px;min-width:0;}
.bc-lbl{display:block;font-family:var(--display);font-size:12.5px;
letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk);}
.bc-val{font-family:var(--code);font-size:14.5px;color:var(--ink);
overflow-wrap:anywhere;}
@media (prefers-reduced-motion:reduce){
.is-live .bc-dot::after{animation:none;}
.sticker.hot:hover .ico::before,.sticker.hot:hover .ico::after,
.sticker.hot:focus-within .ico::before,.sticker.hot:focus-within .ico::after{
animation:none;opacity:.7;}
html{scroll-behavior:auto;}
}
/* =========================================================================
SECTION REVIEW CARDS
Numbered as CARDS, not by section - the displayed number is sequential,
while the data-note / data-rating keys keep their ORIGINAL section
numbers so renumbering the display never orphans a note already saved in
localStorage. Never change a data-note key to tidy a display number.
========================================================================= */
.recap{
background-color:var(--card);background-image:var(--knit);background-size:66px 66px;
border:7px solid transparent;border-image:var(--frame) 12 round;
padding:14px 17px 12px;margin:20px 0 0;
}
.recap-head{display:flex;align-items:center;gap:12px;margin:0 0 9px;
padding-bottom:7px;border-bottom:1.5px solid var(--rule);}
.recap-head h4{color:var(--blue-dk);letter-spacing:.13em;text-transform:uppercase;}
.card-no{margin-left:auto;flex:none;line-height:0;}
.card-no svg{display:block;width:70px;height:38px;}
/* The snowpack, one stratum per card earned, building from the ground up.
Seven strata for seven cards - the cocoa ground below them is always drawn,
because a season starts with bare earth, not with nothing. */
.card-no .st{opacity:.22;}
.card-no[data-done="1"] .st:nth-of-type(1),
.card-no[data-done="2"] .st:nth-of-type(-n+2),
.card-no[data-done="3"] .st:nth-of-type(-n+3),
.card-no[data-done="4"] .st:nth-of-type(-n+4),
.card-no[data-done="5"] .st:nth-of-type(-n+5),
.card-no[data-done="6"] .st:nth-of-type(-n+6),
.card-no[data-done="7"] .st:nth-of-type(-n+7){opacity:1;}
.recap dl{margin:0;}
.recap .row{display:flex;gap:10px;align-items:baseline;margin:0 0 5px;flex-wrap:wrap;}
.recap dt{flex:none;font-family:var(--display);font-size:13px;letter-spacing:.1em;
text-transform:uppercase;color:var(--teal-dk);}
.recap dd{margin:0;flex:1 1 220px;min-width:0;font-size:15.5px;color:var(--ink-soft);}
.recap .row.wide{display:block;margin-top:9px;}
.recap .row.wide dt{margin-bottom:1px;}
/* THE WRITING LINE.
Issues 01/02 are the reference for this, not 04/05. What was wrong with
those was a BORDERED field - a border, a background and a radius round a
correctly-placed rule, and it was the padding below the rule inside a
visible box that read as dead space.
The right construction is ruled lines drawn straight onto the card: no
border, no background, no radius. The box is padding-top + exactly one
28px line-box + a couple of px of clearance, with the repeating gradient
putting its rule in the last 1px of each 28px pitch so a SECOND typed
line gets ruled too - which is what the gradient buys over a stack of
borders. The placeholder is set smaller than the writing size. */
.recap .write{
display:block;width:100%;max-width:none;
margin-top:6px;padding:1px 4px 0;min-height:30px; /* 1px pad + one 28px line + the rule */
font-family:var(--hand);font-size:20px;line-height:28px;color:var(--blue-dk);
caret-color:var(--red-dk);
border-bottom:1px solid var(--rule-firm);
background-image:repeating-linear-gradient(to bottom,
transparent 0 27px,var(--rule-firm) 27px 28px);
outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
}
.recap .write:focus{background-color:var(--blue-tint);
box-shadow:0 0 0 2px var(--blue-tint);border-radius:2px;}
.recap .write:empty::before{content:attr(data-hint);color:var(--ink-faint);
opacity:.75;font-size:18px;}
.recap-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.rating{display:flex;align-items:center;gap:5px;}
.rating .lbl{font-family:var(--display);font-size:12.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-faint);margin-right:3px;}
.pip{border:none;background:none;padding:0;margin:0;cursor:pointer;line-height:0;
color:var(--rule-firm);}
.pip svg{display:block;width:23px;height:23px;}
.pip.on{color:var(--blue);}
.pip:hover{color:var(--teal-dk);}
.pip:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
.saved{font-family:var(--hand);font-size:17px;color:var(--teal-dk);
opacity:0;transition:opacity .2s;margin-left:auto;}
.saved.on{opacity:1;}
/* =========================================================================
FOOTER
========================================================================= */
.foot{margin:40px 0 0;padding-top:6px;}
.issue-nav{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 20px;}
.issue-card{
/* capped like the rest of the series, so the lone Previous card does not
stretch the full measure and stop reading as a card */
flex:1 1 240px;max-width:430px;display:flex;align-items:center;gap:13px;
background-color:var(--card);background-image:var(--contour);background-size:144px 100px;
border:7px solid transparent;border-image:var(--frame-blue) 12 round;
padding:11px 14px;text-decoration:none;color:var(--ink);
}
.issue-card:hover{border-image:var(--frame) 12 round;}
.ic-icon{flex:none;width:38px;height:38px;line-height:0;}
.ic-icon svg{width:38px;height:38px;display:block;
filter:drop-shadow(1px 1px 1px var(--shadow));}
.ic-body{display:flex;flex-direction:column;min-width:0;}
.ic-kicker{font-family:var(--display);font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-faint);}
.ic-title{font-family:var(--title);font-size:16px;line-height:1.2;color:var(--blue);}
.ic-note{font-family:var(--hand);font-size:17px;color:var(--ink-soft);}
.foot-line{
display:flex;align-items:center;gap:9px;flex-wrap:wrap;max-width:none;
font-family:var(--code);font-size:12.5px;color:var(--ink-faint);margin:0;
}
.foot-line .mark{width:22px;height:22px;flex:none;}
/* =========================================================================
NARROW
Equal-specificity media queries are decided by SOURCE ORDER, and a
`padding` shorthand in a later one wipes a padding-bottom set in an
earlier one. So the narrower query goes LAST, and each sets the value on
the shorthand rather than racing it.
========================================================================= */
@media (max-width:700px){
body{font-size:16px;}
.wrap{padding:18px 15px 70px;}
.masthead-inner{padding:18px 18px 76px;}
.hero-sticker{width:124px;height:66px;right:10px;bottom:8px;}
.hs-peak{width:80px;height:80px;}
.hs-skis{right:60px;bottom:5px;width:52px;height:52px;}
.seal-row{flex-direction:column;text-align:center;gap:10px;}
.seal-note{text-align:center;}
.part-head{gap:12px;}
.part-num{width:52px;}
.ll-run{gap:8px;}
}
@media (max-width:500px){
.masthead-inner{padding:16px 15px 68px;}
.hero-sticker{width:96px;height:52px;right:6px;bottom:6px;}
.hs-peak{width:62px;height:62px;}
.hs-skis{right:46px;bottom:4px;width:42px;height:42px;}
.part-head{flex-wrap:wrap;}
.kit-lbl{padding-top:0;}
.ll-run .rname{min-width:0;}
.recap{padding:12px 13px 10px;}
}