/* ---------------------------------------------------------------------------
/learn/ - MAIL CLUB, ISSUE No. 05: "Camp Post", second installment.
"The Trail Markers" - the how, following Issue 04's why. Approved 2026-08-21.
Fifth issue of the same publication as pipeline.html (01, coastal),
backend.html (02, harvest), delivery.html (03, night) and basecamp.html
(04, camp). STANDALONE, like the other four: Issue 04 has issue-04.css and
this file shares no cascade with it, so a change here cannot reach Basecamp
even though the two are a matched pair on purpose. The only shared file is
reference.js, which is behaviour (recap cards, copy buttons) and names no
colour at all.
---- WHY THIS IS NOT A REPRINT OF ISSUE 04 -----------------------------
The first cut of this issue WAS a reprint: a clone of issue-04.css with one
accent swapped, and Alice rejected it on sight - "visually they look too
similar". Gold -> pink is invisible at a glance. What separates two letters
is the SURFACES and which colour LEADS, not the rare accent:
ground paw prints -> topographic contour lines, plum-tinted
cloth buffalo plaid -> ticking stripe, plum-cast
display Lilita One -> Alfa Slab One
lead forest-led -> PLUM-led (--plum), with forest + orange
keeping the camp anchored
bunting forest + orange -> plum + orange, and rope takes the quieter
lines (masthead card edge, pull-quote)
seal tent on forest -> compass on plum
Everything the series shares is untouched: scalloped seal, postage-stamp
badges, sticker legend, typed-letter callouts, recap cards, and the five
core camp colours. Plum is a REPLACEMENT LEAD, not a sixth colour - it takes
the jobs wood brown was doing at the front of the page and lets brown fall
back to rope, boards and grain. That is what stops the page reading brown.
---- CONTRAST ----------------------------------------------------------
Burnt orange (#C97A3D) on canvas cream is 2.89:1: a PATTERN AND BORDER
colour only. Small orange TEXT uses --orange-dk (#96521F, 5.19:1).
Plum is 6.17:1 on cream and 6.17:1 under cream, so it is safe both as ink
and as a ground for cream - which is why it can carry the stamp and seal.
Marshmallow pink is a FILL, never small text; small pink text uses
--pink-dk (#9E4F45, 4.99:1). Ink on a pink fill is 7.51:1.
---- DENSITY -----------------------------------------------------------
Issue 02 remains the benchmark: a real full-page ground texture, a pattern
behind every callout, solid-tinted pills, dotted legend paper. Built to that
level from the start rather than patched up to it later.
--------------------------------------------------------------------------- */
:root{
/* --- the six named colours -------------------------------------------- */
--canvas:#F5EFE0; /* canvas cream - the page ground */
--forest:#4A6741; /* forest green - camp anchor: Part signs, pills */
--orange:#C97A3D; /* burnt orange - blazes, badges, patterns */
--wood:#8B5E3C; /* wood brown - borders, rules, the cord, the rings */
--ink:#2E2419; /* warm charcoal - every word */
/* the rare one. Small emphasis details ONLY - never structure. Takes over
the exact role trail gold had in Issue 04, in the same places. */
--pink:#E3A8A0;
/* PLUM. Not a sixth camp colour so much as a REPLACEMENT LEAD: it takes the
jobs wood brown was doing at the front of the page - masthead, seal, title,
stamp - and lets brown fall back to what it is good at, which is rope,
boards and grain. That is what stops this page reading as all-brown.
6.17:1 on canvas cream, so it is safe as text AND as a ground for cream. */
--plum:#7A4A5E;
/* --- derived, all mixed from the six ---------------------------------- */
--ink-soft:#55452F;
--ink-faint:#74624A; /* 5.10:1 on canvas. #7E6A52 measured 4.49 - under */
--orange-dk:#96521F; /* the only orange allowed to be small text */
--pink-dk:#9E4F45; /* the only pink allowed to be small text */
--plum-tint:rgba(122,74,94,.13);
--plum-tint-2:rgba(122,74,94,.22);
--rule:#E2D6C0;
--rule-firm:#C9B694;
--card:#FBF7EE; /* the paper things sit on, a shade above canvas */
--forest-tint:rgba(74,103,65,.13);
--forest-tint-2:rgba(74,103,65,.22);
--orange-tint:rgba(201,122,61,.15);
--wood-tint:rgba(139,94,60,.12);
--pink-tint:rgba(227,168,160,.26);
--shadow:rgba(46,36,25,.17);
/* --- four fonts, four jobs --------------------------------------------
Three are fixed across the whole series; the display face is this
issue's own. Alfa Slab One is a heavy slab - it reads as routed park
signage, and is unmistakably not Issue 04's rounded poster face. */
--hand:"Caveat","Bradley Hand",cursive; /* unchanged 01-03 */
--body:"Lora",Georgia,"Times New Roman",serif; /* unchanged 01-03 */
--code:"Courier Prime","Courier New",monospace; /* unchanged 01-03 */
--display:"Alfa Slab One",Rockwell,Georgia,serif; /* THIS issue */
/* Two more, each scoped to one job and nothing else:
--news is the old trail-newspaper masthead. Blackletter CAPITALS are
ornate to the point of illegibility, so this face is only ever set in
mixed case and never below ~22px - which is why the masthead line got
bigger rather than getting a different font.
--sign is routed park signage: upright, blocky, condensed. It carries
the Part markers and the pull-quote banner, and must never touch body
text, the masthead, or a section title. */
--news:"UnifrakturMaguntia","Old Standard TT",Georgia,serif;
--sign:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
--r:8px;
/* --- the patterns, said once ---------------------------------------- */
/* sawn timber. Irregular pitch on purpose - even spacing reads as a
barcode, uneven spacing reads as grain. */
--woodgrain:
repeating-linear-gradient(90deg,rgba(139,94,60,.15) 0 1px,transparent 1px 5px),
repeating-linear-gradient(90deg,rgba(139,94,60,.10) 0 2px,transparent 2px 13px),
repeating-linear-gradient(90deg,rgba(139,94,60,.07) 0 1px,transparent 1px 29px);
/* sawn board: fine vertical grain, plus plank seams across it. The two
together read as boards; the grain alone reads as a barcode. */
--woodgrain-soft:
repeating-linear-gradient(90deg,rgba(139,94,60,.10) 0 1px,transparent 1px 6px),
repeating-linear-gradient(90deg,rgba(139,94,60,.07) 0 2px,transparent 2px 17px),
repeating-linear-gradient(0deg,transparent 0 45px,rgba(139,94,60,.20) 45px 47px);
--dots:
radial-gradient(circle 2.6px at 6px 6px,rgba(74,103,65,.26) 2.6px,transparent 3px);
/* Contour lines. Each path leaves the right edge at exactly the y it entered
the left edge at, so the tile repeats without a seam; the gaps between the
lines are deliberately uneven, because evenly spaced contours read as a
graph and unevenly spaced ones read as ground. */
--contours:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%237A4A5E' stroke-opacity='.17' stroke-width='1.25'%3E%3Cpath d='M0 18 C 24 6 46 30 70 18 S 116 6 140 18'/%3E%3Cpath d='M0 46 C 30 34 44 60 70 50 S 118 38 140 46'/%3E%3Cpath d='M0 76 C 20 92 50 62 74 78 S 112 94 140 76'/%3E%3Cpath d='M0 108 C 28 96 52 122 78 108 S 116 96 140 108'/%3E%3C/g%3E%3C/svg%3E");
/* Ticking stripe - tent canvas and deckchairs. Vertical on purpose: unlike a
check it runs WITH the text baselines instead of across them, so it can sit
behind running prose at a contrast the plaid never could. */
--ticking:
repeating-linear-gradient(90deg,rgba(122,74,94,.14) 0 3px,transparent 3px 15px),
repeating-linear-gradient(90deg,rgba(74,103,65,.10) 0 1px,transparent 1px 15px);
--ticking-strong:
repeating-linear-gradient(90deg,rgba(201,122,61,.30) 0 3px,transparent 3px 9px),
repeating-linear-gradient(90deg,rgba(139,94,60,.14) 0 1px,transparent 1px 9px);
/* Pennants on the section dividers, full density: plum and orange rather
than Issue 04's forest and orange, so the two issues read as different
strings of the same bunting. Rope keeps the quieter jobs - the card's top
edge and the pull-quote flanks. */
--bunting-sm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22' viewBox='0 0 44 22'%3E%3Cpath d='M0 3.4 H44' stroke='%238B5E3C' stroke-width='1.7' fill='none'/%3E%3Cpath d='M4 4.2 L20 4.2 L12 19 Z' fill='%237A4A5E' opacity='.9'/%3E%3Cpath d='M26 4.2 L42 4.2 L34 21 Z' fill='%23C97A3D' opacity='.9'/%3E%3Ccircle cx='12' cy='3.4' r='1.6' fill='%238B5E3C'/%3E%3Ccircle cx='34' cy='3.4' r='1.6' fill='%238B5E3C'/%3E%3C/svg%3E");
/* Twisted rope: two strands crossing, both starting and ending mid-height
so the tile joins itself. */
--rope:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Cpath d='M0 8 C 5 1 12 1 17 8 S 29 15 34 8' fill='none' stroke='%238B5E3C' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0 8 C 5 15 12 15 17 8 S 29 1 34 8' fill='none' stroke='%23B08B5F' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
/* ---------- the ground: contour lines ------------------------------------
Ground seen from above, the way a walking map draws it. Four lines per
140px tile, unevenly spaced so it reads as terrain rather than as ruling.
Density is pitched against Issue 02's stripe ground, which is the house
benchmark for "a real full-page texture": that is .20 alpha over half the
surface. Paw prints are sparse marks rather than fields, so they carry a
higher alpha over a much smaller area to land in the same place.
Fixed, so the page slides over the track rather than dragging it along.
------------------------------------------------------------------------ */
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(--canvas);
background-image:var(--contours);
background-size:140px 140px;
background-attachment:fixed;
}
.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;}
/* ---------- shared shapes ------------------------------------------------ */
/* die-cut stickers scattered 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 ----------------------------------------------------- */
.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(0 2px 3px var(--shadow));}
.seal-note{font-family:var(--hand);font-size:21px;line-height:1.25;
color:var(--plum);max-width:29ch;}
.seal-note b{display:block;font-family:var(--news);font-weight:400;
font-size:25px;line-height:1.08;letter-spacing:.012em;
text-transform:none; /* blackletter caps are unreadable in a run */
color:var(--forest);margin-bottom:2px;}
/* ---------- the stamped block word ---------------------------------------
Cream on forest (5.51:1), with a wood offset. Three places on the page and
nowhere else: the issue number, and the Part markers. Orange is not used
here - cream on orange measures 2.89:1 and this text has to be read.
------------------------------------------------------------------------ */
.block-stamp{
display:inline-block;font-family:var(--display);font-weight:400;
background:var(--plum);color:var(--canvas);
padding:9px 16px 7px;line-height:1;letter-spacing:.05em;
box-shadow:3px 3px 0 var(--plum-tint-2);
transform:rotate(-1.6deg);
border:1.5px solid var(--plum);
}
.block-stamp.big{font-size:24px;padding:12px 20px 9px;}
/* the Part markers are trail signage, not poster lettering */
.block-stamp.small{font-family:var(--sign);font-size:13.5px;
padding:8px 13px 6px;letter-spacing:.13em;
background:var(--forest);border-color:var(--forest);}
/* the eyebrow oval - "this logbook belongs to..." */
.oval-label{
display:inline-block;background:var(--plum);color:var(--canvas);
font-family:var(--hand);font-size:20px;line-height:1;
padding:9px 26px 10px;border-radius:50%;
border:2px solid var(--canvas);box-shadow:0 0 0 1.5px var(--plum);
transform:rotate(-1deg);
}
/* ---------- masthead -----------------------------------------------------
The bunting is strung INSIDE the top edge, with padding reserved for it,
so it can never be clipped by the card's own overflow or border radius.
------------------------------------------------------------------------ */
.masthead{
position:relative;background:var(--card);
border:1.5px solid var(--plum);border-radius:var(--r);
padding:38px 28px 24px;margin-bottom:26px;
box-shadow:4px 4px 0 var(--forest-tint);
}
.masthead::before{
content:"";position:absolute;left:6px;right:6px;top:9px;height:16px;
background-image:var(--rope);background-size:34px 16px;
background-repeat:repeat-x;pointer-events:none;
}
.masthead-inner{position:relative;}
.mast-top{display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.eyebrow{margin:0;}
h1{
font-family:var(--display);font-weight:400;line-height:1.04;
font-size:clamp(28px,5.2vw,44px);margin:4px 0 14px;
color:var(--plum);letter-spacing:-.006em;
}
.subtitle{margin:0 0 14px;color:var(--ink-soft);font-size:17px;max-width:60ch;}
.subtitle:last-of-type{margin-bottom:0;}
/* the "Where this is going" box. Plaid, not a flat fill. */
.thesis{
margin:22px 0 0;padding:16px 19px;
background-color:var(--canvas);background-image:var(--ticking);
border:1px solid var(--rule-firm);border-left:5px solid var(--orange);
border-radius:0 4px 4px 0;
font-family:var(--code);font-size:14px;line-height:1.74;
}
.thesis strong{font-weight:700;color:var(--forest);}
.stamp-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.stamp{
font-family:var(--display);font-weight:400;font-size:10.5px;
letter-spacing:.03em;text-transform:uppercase;
border:1.5px solid var(--forest);border-radius:999px;
padding:4px 11px 3px;color:var(--forest);background:var(--forest-tint);
white-space:nowrap;
}
.stamp:nth-child(2n){border-color:var(--orange);color:var(--orange-dk);
background:var(--orange-tint);}
/* one pill carries the issue's rare accent, the way one did in Issue 04 */
.stamp.pink{border-color:var(--pink);color:var(--pink-dk);
background:var(--pink-tint);}
/* ---------- the strung line under the masthead ---------------------------
Bunting again, but plum-and-orange on a sagging cord. Rope still does the
quieter jobs - the card's top edge and the pull-quote flanks - so the page
has both without either becoming wallpaper. */
.pennant-strip{display:block;width:100%;height:38px;margin:0 0 26px;overflow:visible;}
.p-cord{stroke:var(--wood);stroke-width:1.6;fill:none;}
.p-flag-a{fill:var(--plum);}
.p-flag-b{fill:var(--orange);}
.p-knot{fill:var(--wood);}
/* ---------- sticker-sheet legend: the dotted field paper ----------------- */
.kit-strip{
position:relative;margin:0 0 30px;border:1.5px solid var(--plum);
border-radius:var(--r);overflow:hidden;
background-color:rgba(139,94,60,.07);background-image:var(--dots);
background-size:18px 18px;
}
/* the folded corner of dotted paper */
.kit-strip::after{
content:"";position:absolute;top:0;right:0;width:0;height:0;
border-style:solid;border-width:0 34px 34px 0;
border-color:transparent var(--canvas) transparent transparent;
filter:drop-shadow(-2px 2px 1px rgba(46,36,25,.18));
}
.kit-row{display:flex;align-items:flex-start;gap:14px;padding:13px 16px;}
.kit-lbl{
flex:none;width:66px;font-family:var(--display);font-weight:400;font-size:10.5px;
letter-spacing:.17em;text-transform:uppercase;color:var(--plum);line-height:1.25;
}
.stickers{display:flex;flex-wrap:wrap;gap:9px 17px;margin:0;padding:0;
list-style:none;max-width:none;flex:1 1 auto;}
.sticker{display:flex;align-items:center;gap:7px;margin:0;}
.sticker svg{width:28px;height:28px;flex:none;
filter:drop-shadow(0 1px 1px rgba(46,36,25,.24));}
.sticker span{font-family:var(--hand);font-size:17px;line-height:1.15;color:var(--ink-soft);}
.sticker.held span{color:var(--ink-faint);}
.sticker.held svg{opacity:.55;}
/* ---------- contents: plain card, ticking only on its header strip ------- */
.toc{
background:var(--card);
border:1.5px solid var(--forest);border-radius:var(--r);
padding:0 24px 20px;margin-bottom:38px;overflow:hidden;
}
.toc h2{
font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.2em;
text-transform:uppercase;color:var(--orange-dk);
margin:0 -24px 14px;padding:11px 24px;
background-color:var(--card);background-image:var(--ticking-strong);
border-bottom:1.5px solid var(--forest);
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
/* the standing compass in the header, and the needle that follows you down
the page. The header one is static, so the mark is present even with no
JavaScript; the per-row one is revealed by the scroll handler. */
.toc-here{display:inline-flex;align-items:center;gap:7px;flex:none;
font-family:var(--hand);font-size:16.5px;letter-spacing:0;
text-transform:none;color:var(--forest);}
.toc-here svg{width:21px;height:21px;
filter:drop-shadow(0 1px 1px rgba(46,36,25,.20));}
.toc li{display:flex;align-items:center;gap:10px;counter-increment:tocnum;}
/* display:flex on a list item suppresses its ::marker, so the 1..5 numbering
is a counter instead - it has to survive the compass row alongside it. */
.toc li::before{content:counter(tocnum) ".";flex:none;min-width:17px;
font-family:var(--code);font-size:13px;color:var(--ink-faint);}
.toc .here{display:none;align-items:center;gap:5px;margin-left:auto;flex:none;
font-family:var(--hand);font-size:15.5px;color:var(--orange-dk);white-space:nowrap;}
.toc .here svg{width:18px;height:18px;}
.toc li.current .here{display:inline-flex;}
.toc li.current > a{color:var(--forest);border-color:var(--forest);}
.toc ol{margin:0;padding-left:4px;max-width:none;list-style:none;counter-reset:tocnum;}
.toc li{margin:0;padding:5px 0 6px;border-bottom:1px solid rgba(139,94,60,.20);}
.toc li:last-child{border-bottom:none;}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-firm);}
.toc a:hover{color:var(--forest);border-color:var(--forest);}
/* ---------- sections ----------------------------------------------------- */
.part{position:relative;margin:0 0 34px;padding-top:36px;}
/* a length of rope instead of a rule */
.part::before{
content:"";display:block;height:22px;margin:0 0 26px;
background-image:var(--bunting-sm);background-size:44px 22px;
background-repeat:repeat-x;
}
.part:first-of-type{padding-top:0;}
.part:first-of-type::before{display:none;}
.part-head{display:flex;gap:16px;align-items:flex-start;margin:0 0 12px;}
.part-head .part-titles{flex:1 1 auto;min-width:0;}
/* postage-stamp badge: a perforated SQUARE, punched on all four edges.
68 / 13.6 = 5 perforations a side exactly - a non-integer pitch leaves a
half-punch in one corner and the whole thing stops reading as a stamp. */
.part-num{
flex:none;position:relative;width:68px;height:68px;margin:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background-color:var(--card);background-image:var(--ticking-strong);
-webkit-mask:radial-gradient(circle 4.2px at 50% 0,#0000 96%,#000) 0 0/13.6px 100%,
radial-gradient(circle 4.2px at 50% 100%,#0000 96%,#000) 0 0/13.6px 100%,
radial-gradient(circle 4.2px at 0 50%,#0000 96%,#000) 0 0/100% 13.6px,
radial-gradient(circle 4.2px at 100% 50%,#0000 96%,#000) 0 0/100% 13.6px;
-webkit-mask-composite:source-in;
mask:radial-gradient(circle 4.2px at 50% 0,#0000 96%,#000) 0 0/13.6px 100%,
radial-gradient(circle 4.2px at 50% 100%,#0000 96%,#000) 0 0/13.6px 100%,
radial-gradient(circle 4.2px at 0 50%,#0000 96%,#000) 0 0/100% 13.6px,
radial-gradient(circle 4.2px at 100% 50%,#0000 96%,#000) 0 0/100% 13.6px;
mask-composite:intersect;
transform:rotate(-2deg);
}
@supports not ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
.part-num{-webkit-mask:none;mask:none;border:1.5px dashed var(--wood);border-radius:3px;}
}
.part-num svg{width:24px;height:24px;display:block;}
.part-num .no{display:block;font-family:var(--display);font-weight:400;
font-size:17px;line-height:1;color:var(--orange-dk);margin-top:2px;}
.part-num .denom{display:block;font-family:var(--display);font-weight:400;
font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-faint);margin-top:1px;}
h2{
font-family:var(--display);font-weight:400;
font-size:clamp(23px,3.6vw,30px);line-height:1.2;
margin:0 0 8px;letter-spacing:.006em;scroll-margin-top:20px;color:var(--ink);
}
h3{font-family:var(--display);font-weight:400;font-size:19px;margin:32px 0 8px;
letter-spacing:.012em;color:var(--forest);}
h4{font-family:var(--display);font-weight:400;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-faint);margin:26px 0 8px;}
p{margin:0 0 15px;max-width:68ch;}
.lede{font-family:var(--hand);font-size:23px;line-height:1.42;
color:var(--forest);margin:0 0 22px;max-width:47ch;}
a{color:var(--forest);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--orange-dk);}
strong{font-weight:700;}
em{font-style:italic;}
/* ---------- lists: sticker bullets ---------------------------------------- */
ol{max-width:66ch;padding-left:24px;}
li{margin:7px 0;}
ul{max-width:66ch;padding-left:32px;list-style:none;}
ul > li{position:relative;}
ul > li::before{
content:"";position:absolute;left:-30px;top:.34em;width:19px;height:19px;
background-repeat:no-repeat;background-size:contain;
/* a die-cut pine: white cut edge under a flat fill */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M16 3.6 25.4 17.4 20.8 17.4 27 26.4 5 26.4 11.2 17.4 6.6 17.4Z'/%3E%3Cpath d='M16 26.4v3.6'/%3E%3C/g%3E%3Cpath d='M16 3.6 25.4 17.4 20.8 17.4 27 26.4 5 26.4 11.2 17.4 6.6 17.4Z' fill='%234A6741'/%3E%3Cpath d='M14.4 26.4h3.2v3.8h-3.2z' fill='%238B5E3C'/%3E%3C/svg%3E");
}
ul > li:nth-child(3n)::before{
/* every third bullet is a painted trail blaze instead - the waymark this
issue is named after, and the thing bunting is NOT */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linejoin='round'%3E%3Cpath d='M9 4h14v24H9z'/%3E%3C/g%3E%3Cpath d='M9 4h14v24H9z' fill='%23C97A3D'/%3E%3Cpath d='M9 12.5h14v7H9z' fill='%23F5EFE0'/%3E%3C/svg%3E");
}
ul.stickers > li::before{content:none;}
ul.stickers{padding-left:0;max-width:none;}
/* ---------- code ---------------------------------------------------------
The label bar carries the grain; the code surface itself stays flat. A
pattern behind real code costs more in legibility than it returns in charm
- the same conclusion Issue 02 reached about gingham.
------------------------------------------------------------------------ */
code{
font-family:var(--code);font-size:.9em;
background:var(--pink-tint);color:var(--ink);
padding:1px 5px 2px;border-radius:3px;border:1px solid var(--rule);
}
a code{color:inherit;border-color:currentColor;}
.code{
background:var(--card);border:1.5px solid var(--rule-firm);
border-radius:var(--r);margin:0 0 20px;overflow:hidden;
}
.code-label{
font-family:var(--display);font-weight:400;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange-dk);
background-color:var(--card);background-image:var(--woodgrain);
padding:9px 15px;border-bottom:1.5px solid var(--wood);
display:flex;justify-content:space-between;gap:12px;
}
.code-label .rhs{
font-family:var(--hand);font-weight:400;font-size:16px;letter-spacing:0;
text-transform:none;color:var(--forest);line-height:1.1;align-self:center;}
/* ---------- "nothing carries over", made watchable -------------------------
Progressive enhancement: `hidden` in the markup, revealed by the page script.
------------------------------------------------------------------------ */
.carry-lab{
background-color:var(--card);background-image:var(--ticking);
border:1.5px solid var(--forest);border-radius:var(--r);
padding:15px 18px 14px;margin:0 0 26px;box-shadow:3px 3px 0 var(--forest-tint);
}
.cs-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:13px;}
.cs-title{font-family:var(--display);font-size:12px;letter-spacing:.17em;
text-transform:uppercase;color:var(--forest);}
.cs-sub{font-family:var(--hand);font-size:17px;color:var(--ink-faint);}
.cs-machines{display:flex;gap:14px;flex-wrap:wrap;}
.cs-machine{flex:1 1 250px;background:var(--canvas);
border:1.5px solid var(--rule-firm);border-radius:6px;padding:12px 14px 13px;
transition:border-color .15s ease;}
.cs-machine.is-done{border-color:var(--forest);}
.cs-machine h5{display:flex;align-items:center;gap:8px;margin:0 0 9px;
font-family:var(--display);font-size:14px;letter-spacing:.02em;color:var(--ink);}
.cs-machine h5 svg{width:24px;height:24px;flex:none;}
.cs-list{list-style:none;margin:0;padding:0;max-width:none;}
.cs-list li{display:flex;align-items:center;gap:9px;margin:0 0 5px;padding:0;
font-family:var(--code);font-size:12.4px;color:var(--ink-faint);}
.cs-list li::before{content:none;}
.cs-tick{flex:none;width:15px;height:15px;border-radius:4px;
border:1.4px solid var(--rule-firm);background:transparent;position:relative;}
.cs-machine.is-done .cs-list li{color:var(--ink);}
.cs-machine.is-done .cs-tick{border-color:var(--forest);background:var(--forest);}
.cs-machine.is-done .cs-tick::after{
content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
border:solid var(--canvas);border-width:0 1.9px 1.9px 0;transform:rotate(43deg);}
.cs-run{margin-top:10px;width:100%;font-family:var(--code);font-size:12px;
cursor:pointer;padding:6px 12px;border-radius:999px;
border:1.5px solid var(--forest);background:var(--forest-tint);color:var(--forest);}
.cs-run:hover:not(:disabled){background:var(--forest);color:var(--canvas);}
.cs-run:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.cs-run:disabled{cursor:default;border-color:var(--forest);
background:var(--forest);color:var(--canvas);opacity:.85;}
.cs-read{margin:13px 0 0;max-width:none;
font-family:var(--hand);font-size:19px;line-height:1.34;color:var(--ink-soft);}
.cs-read.alarm{color:var(--orange-dk);}
.cs-read.ok{color:var(--forest);}
.cs-reset{margin-top:8px;font-family:var(--hand);font-size:17px;border:none;
background:none;color:var(--ink-faint);cursor:pointer;padding:4px 0;
text-decoration:underline;text-underline-offset:3px;}
.cs-reset:hover{color:var(--orange-dk);}
@media (prefers-reduced-motion:reduce){.cs-machine{transition:none;}}
/* ---------- copy button on code blocks -----------------------------------
Injected by reference.js, styled here so it wears this issue's colours.
The .rhs gets margin-left:auto so the handwritten note stays hard right
where it has always been - without it, a third flex child re-centres it. */
.code-label .rhs{margin-left:auto;}
.copy-btn{
flex:none;font-family:var(--code);font-size:11px;letter-spacing:.04em;
text-transform:none;cursor:pointer;line-height:1;
padding:4px 10px 5px;border-radius:999px;
border:1.3px solid var(--forest);background:var(--forest-tint);color:var(--forest);
transition:background .12s ease,color .12s ease;
}
.copy-btn:hover{background:var(--forest);color:var(--canvas);}
.copy-btn:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
.copy-btn.done{background:var(--forest);color:var(--canvas);border-color:var(--forest);}
.copy-btn.failed{opacity:.75;}
@media (prefers-reduced-motion:reduce){.copy-btn{transition:none;}}
.code pre{
margin:0;padding:15px 17px;overflow-x:auto;
font-family:var(--code);font-size:13.5px;line-height:1.66;
color:var(--ink);tab-size:2;background:var(--card);
}
.k{color:#7B4318;font-weight:700;}
.s{color:#3F5A38;}
/* Darkened 2026-08-22: #8A7355 measured 4.21:1 on the card and 3.92:1 on
canvas - an AA failure at 16px. Hue and saturation are unchanged, only
value; it is a one-off literal here, not one of the six named colours. */
.c{font-family:var(--hand);font-size:16px;color:#7D684D;}
.d{color:var(--ink-faint);}
/* an actual error line. Muted red rather than alarm red - this page treats the
auth failure as expected, not as a fault, and the colour should agree. */
.e{color:var(--pink-dk);font-weight:700;}
/* ---------- typed-letter callouts ----------------------------------------
Same construction as every prior issue: a typed body on patterned paper,
with a ruled line under the tag. Reskinned to ticking stripe.
------------------------------------------------------------------------ */
.callout{
position:relative;
background-color:var(--card);background-image:var(--ticking);
border:1.5px solid var(--rule-firm);border-radius:3px;
padding:14px 20px 16px;margin:0 0 26px;
box-shadow:3px 3px 0 var(--forest-tint);
}
.callout::before{
content:"";position:absolute;left:20px;right:20px;top:34px;
border-top:1px solid var(--forest);opacity:.45;
}
.callout p{font-family:var(--code);font-size:13.8px;line-height:1.74;
margin:0 0 12px;max-width:64ch;}
.callout p:first-of-type{margin-top:14px;}
.callout p:last-child{margin-bottom:0;}
.callout .tag{
display:flex;align-items:center;gap:7px;
font-family:var(--display);font-weight:400;font-size:12px;
letter-spacing:.17em;text-transform:uppercase;margin:0;height:20px;
}
.callout .tag::after{
content:"";flex:none;width:15px;height:15px;margin-left:2px;
background:currentColor;opacity:.42;
-webkit-mask:var(--tagmask) center/contain no-repeat;
mask:var(--tagmask) center/contain no-repeat;
}
.callout code{background:var(--canvas);font-size:.88em;}
.callout strong{color:var(--ink);}
.callout.note{border-left:5px solid var(--forest);}
.callout.note .tag{color:var(--forest);
--tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 15 9.6l7.4.6-5.6 4.9 1.7 7.3L12 18.5 5.5 22.4l1.7-7.3L1.6 10.2l7.4-.6z' fill='%23000'/%3E%3C/svg%3E");}
.callout.good{border-left:5px solid var(--orange);}
.callout.good .tag{color:var(--orange-dk);
--tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.callout.warn{border-left:5px solid var(--wood);}
.callout.warn .tag{color:var(--wood);
--tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 21h21z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v5M12 17.6v.1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");}
/* the trail-log variant: a letter left pinned to the noticeboard. Same typed
body, but opened and signed by hand. */
.callout.log{
border-left:5px solid var(--orange);
background-color:var(--card);background-image:var(--ticking);
box-shadow:3px 3px 0 var(--orange-tint);
}
.callout.log .tag{color:var(--orange-dk);
--tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 5.5h19v13h-19z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M2.5 6 12 13.2 21.5 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
/* A pennant ribbon rather than a line of cursive: a bar with a swallowtail
notched out of the tail end and a folded butt at the head. Ink on orange
measures 4.58:1 - cream on orange is 2.89 and was never an option. */
.callout.log .salut{
display:inline-block;position:relative;margin:16px 0 8px;max-width:none;
padding:4px 30px 5px 20px;
font-family:var(--hand);font-size:22px;line-height:1.18;
color:var(--ink);background:var(--orange);
-webkit-clip-path:polygon(0 0,100% 0,calc(100% - 15px) 50%,100% 100%,0 100%);
clip-path:polygon(0 0,100% 0,calc(100% - 15px) 50%,100% 100%,0 100%);
filter:drop-shadow(2px 2px 0 rgba(139,94,60,.45));
transform:rotate(-1.2deg);}
/* the fold where the ribbon turns back on itself */
.callout.log .salut::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
background:rgba(46,36,25,.22);}
.callout.log .salut + p{margin-top:0;}
.callout.log .sign{
font-family:var(--hand);font-size:20px;line-height:1.2;color:var(--orange-dk);
text-align:right;margin:10px 0 0;max-width:none;}
/* ---------- the handwritten pull-quote ------------------------------------ */
.pull{
display:flex;align-items:center;gap:14px;
margin:26px 0 28px;padding:0;max-width:none;
}
.pull::before,.pull::after{
content:"";flex:1 1 auto;height:16px;min-width:40px;
background-image:var(--rope);background-size:34px 16px;
background-repeat:repeat-x;opacity:.8;
}
.pull q{
flex:0 1 auto;font-family:var(--sign);font-size:clamp(21px,3.3vw,28px);
line-height:1.16;letter-spacing:.022em;text-transform:uppercase;
color:var(--orange-dk);text-align:center;quotes:none;
}
/* ---------- figures ------------------------------------------------------ */
figure{margin:0 0 26px;background:var(--card);
border:1.5px solid var(--rule-firm);border-radius:var(--r);
padding:16px 18px 12px;box-shadow:3px 3px 0 var(--wood-tint);}
figure svg{display:block;width:100%;height:auto;}
figcaption{font-family:var(--hand);font-size:18px;line-height:1.34;
color:var(--ink-soft);margin-top:10px;max-width:62ch;}
figcaption code{font-family:var(--code);font-size:13px;}
/* ---------- tables: the field-guide card ---------------------------------
A pinned identification card - grained header, ticking-tinted alternate rows,
and a wood edge all the way round.
------------------------------------------------------------------------ */
.table-scroll{overflow-x:auto;margin:0 0 24px;
border:1.5px solid var(--wood);border-radius:var(--r);background:var(--card);}
table{border-collapse:collapse;width:100%;font-size:14.6px;min-width:520px;}
thead th{
font-family:var(--display);font-weight:400;font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--orange-dk);text-align:left;
background-color:var(--card);background-image:var(--woodgrain);
padding:11px 14px;border-bottom:1.5px solid var(--wood);
}
tbody td,tbody th{padding:10px 14px;border-bottom:1px solid var(--rule);
vertical-align:top;text-align:left;}
tbody th{font-weight:700;color:var(--ink);font-family:var(--body);}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none;}
tbody tr:nth-child(2n){background-color:var(--forest-tint);
background-image:var(--ticking);}
td.mono,th.mono{font-family:var(--code);font-size:13.4px;letter-spacing:.01em;}
.ccy{display:inline-block;font-family:var(--display);font-size:11px;
letter-spacing:.1em;padding:2px 9px 1px;border-radius:999px;
border:1.5px solid var(--forest);background:var(--forest-tint);color:var(--forest);}
.ccy.b{border-color:var(--orange);background:var(--orange-tint);color:var(--orange-dk);}
.ccy.c{border-color:var(--wood);background:var(--wood-tint);color:var(--wood);}
/* ---------- definition rows ---------------------------------------------- */
.defs{margin:0 0 24px;max-width:none;}
.def{background:var(--card);border:1.5px solid var(--rule-firm);
border-left:5px solid var(--forest);border-radius:4px;
padding:12px 16px 4px;margin:0 0 12px;box-shadow:2px 2px 0 var(--wood-tint);}
.def:nth-child(2n){border-left-color:var(--orange);}
.def dt{font-family:var(--display);font-weight:400;font-size:14px;
letter-spacing:.06em;color:var(--ink);margin:0 0 4px;}
.def dd{margin:0;}
.def dd p{margin:0 0 10px;font-size:15.6px;}
/* ---------- recap card ---------------------------------------------------
A sewn badge patch: stitched inner edge, grained header, and a rating row
of five merit badges that fill as they are earned.
------------------------------------------------------------------------ */
.recap{
position:relative;margin:26px 0 0;
background:var(--card);border:2px solid var(--plum);border-radius:var(--r);
box-shadow:4px 4px 0 var(--plum-tint);overflow:hidden;
}
/* the stitch line, inset from the edge the way a patch is sewn */
.recap::before{
content:"";position:absolute;inset:5px;border:1.5px dashed var(--orange);
border-radius:4px;opacity:.55;pointer-events:none;
}
.recap-head{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:11px 20px;background-color:var(--card);background-image:var(--woodgrain);
border-bottom:2px solid var(--wood);position:relative;
}
.recap-head h4{margin:0;font-size:12.5px;letter-spacing:.18em;color:var(--orange-dk);}
.recap-head .card-no{font-family:var(--code);font-size:12px;color:var(--ink-faint);}
.recap dl{margin:0;padding:14px 20px 6px;position:relative;}
.recap .row{display:flex;gap:10px;margin:0 0 9px;flex-wrap:wrap;}
.recap .row.wide{display:block;}
.recap dt{flex:none;font-family:var(--display);font-weight:400;font-size:12px;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
padding-top:2px;min-width:92px;}
.recap dd{margin:0;flex:1 1 auto;min-width:0;font-size:15.2px;}
.recap .row.wide dt{margin-bottom:6px;}
/* THE WRITING LINE - the Issue 01 / 02 construction.
Not a bordered input. Ruled lines drawn straight onto the card, the way a
form printed on paper does it. This box used to carry a border, a fill and
a radius, and the padding below the rule then read as dead space inside a
field - Alice compared it against Issue 06's and said so directly.
The geometry: one 28px line-box to start, a repeating gradient putting the
rule in that pitch's last 1px so it lands on the baseline, and a
border-bottom closing off the last one. It stays a gradient rather than a
stack of borders so that a second and third typed line get ruled too -
verified by typing three. The placeholder is set smaller than the writing
size, 18px against 20px, so a prompt reads as a prompt. */
.recap .write{
margin-top:6px;padding:1px 4px 0;min-height:30px;
font-family:var(--hand);font-size:20px;line-height:28px;color:var(--forest);
caret-color:var(--orange);
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(--forest-tint);
box-shadow:0 0 0 2px var(--forest-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;justify-content:space-between;gap:12px;
padding:8px 20px 13px;position:relative;flex-wrap:wrap;
}
.rating{display:flex;align-items:center;gap:5px;}
.rating .lbl{font-family:var(--display);font-weight:400;font-size:11px;
letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
margin-right:4px;}
/* the merit badges. Wood-tinted until earned, burnt orange once they are. */
.pip{
border:none;background:none;padding:2px;cursor:pointer;line-height:0;
color:var(--rule-firm);transition:color .13s ease,transform .13s ease;
}
.pip svg{width:26px;height:26px;display:block;
filter:drop-shadow(0 1px 1.4px rgba(46,36,25,.34));}
.pip:hover{color:var(--wood);transform:translateY(-1px);}
.pip.on{color:var(--orange);}
.pip.on:hover{color:var(--orange-dk);}
.pip:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:3px;}
.saved{font-family:var(--hand);font-size:17px;color:var(--forest);
opacity:0;transition:opacity .2s ease;}
.saved.on{opacity:1;}
/* ---------- the s'mores sequence -----------------------------------------
The page's centrepiece: git's three states plus the push, drawn rather than
described. Everything is inline SVG so the illustration scales with the
figure; these classes only carry type and colour into it.
The step chips are forest for 1-3 and burnt orange for 4 on purpose - that
colour change IS the local/remote boundary, which is the actual lesson in
the sequence and the thing most people get wrong.
------------------------------------------------------------------------ */
figure.smores{padding:14px 14px 10px;}
.sm-title{font-family:"Anton","Arial Narrow",sans-serif;letter-spacing:.1em;}
.sm-label{font-family:"Anton","Arial Narrow",sans-serif;letter-spacing:.05em;}
.sm-cmd{font-family:"Courier Prime","Courier New",monospace;}
.sm-cap{font-family:"Caveat",cursive;}
.sm-panel{fill:#FBF7EE;stroke:#8B5E3C;stroke-width:1.5;}
.sm-chev{fill:none;stroke:#8B5E3C;stroke-width:2.6;stroke-linecap:round;
stroke-linejoin:round;opacity:.75;}
/* --- the interactive layer ------------------------------------------------
PROGRESSIVE ENHANCEMENT. Everything below only applies once the script has
added .is-live, and the controls carry `hidden` in the markup. With no
JavaScript the figure stays exactly what it was: four panels, all legible,
nothing dimmed, no dead buttons.
------------------------------------------------------------------------ */
.sm-ring{fill:none;stroke:var(--orange);stroke-width:2.6;opacity:0;}
.smores.is-live .sm-step{transition:opacity .22s ease;}
.smores.is-live .sm-step.is-future{opacity:.26;}
.smores.is-live .sm-step.is-current .sm-ring{opacity:1;}
.sm-controls{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
margin:14px 2px 0;}
/* The `hidden` attribute is display:none from the UA sheet, and the rule
above - any class rule setting display - beats it. Without this line the
four s'mores buttons rendered live with JavaScript off, with nothing
driving them: the dead-button state the whole progressive-enhancement
pattern exists to prevent. Verified with setJavaScriptEnabled(false).
`.carry-lab` and Issue 04's `.fx-lab` were checked at the same time and
are NOT affected - neither sets display on the hidden element. */
.sm-controls[hidden]{display:none;}
.sm-hint{font-family:var(--hand);font-size:17px;color:var(--ink-faint);
margin:0 4px 0 0;}
.sm-btn{
font-family:var(--code);font-size:13px;cursor:pointer;
padding:7px 14px 6px;border-radius:999px;
border:1.5px solid var(--forest);background:var(--forest-tint);
color:var(--forest);transition:transform .12s ease,background .12s ease;
}
.sm-btn:hover:not(:disabled){background:var(--forest);color:var(--canvas);
transform:translateY(-1px);}
.sm-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.sm-btn:disabled{opacity:.4;cursor:default;
border-color:var(--rule-firm);background:transparent;color:var(--ink-faint);}
/* push is the one that leaves the machine, so it wears the remote colour */
.sm-btn.remote{border-color:var(--orange);background:var(--orange-tint);
color:var(--orange-dk);}
.sm-btn.remote:hover:not(:disabled){background:var(--orange);color:var(--canvas);}
.sm-reset{margin-left:auto;font-family:var(--hand);font-size:17px;
border:none;background:none;color:var(--ink-faint);cursor:pointer;
text-decoration:underline;text-underline-offset:3px;padding:4px;}
.sm-reset:hover{color:var(--orange-dk);}
/* the terminal readout: what git would actually tell you, right now */
.sm-status{margin:14px 2px 4px;border:1.5px solid var(--rule-firm);
border-radius:var(--r);overflow:hidden;background:var(--card);}
.sm-status-label{
font-family:var(--display);font-weight:400;font-size:11.5px;letter-spacing:.13em;
text-transform:uppercase;color:var(--orange-dk);
background-color:var(--card);background-image:var(--woodgrain);
padding:8px 15px;border-bottom:1.5px solid var(--wood);}
.sm-out{margin:0;padding:13px 16px;background:#FAF3E6;
font-family:var(--code);font-size:12.8px;line-height:1.62;
color:var(--ink);white-space:pre-wrap;overflow-x:auto;}
/* max-width:none because this is a and would otherwise inherit the 68ch
measure, leaving a lighter strip of the card showing to its right. */
.sm-read{margin:0;max-width:none;padding:0 16px 12px;background:#FAF3E6;
font-family:var(--hand);font-size:18px;line-height:1.3;color:var(--forest);}
@media (prefers-reduced-motion:reduce){
.smores.is-live .sm-step,.sm-btn{transition:none;}
.sm-btn:hover:not(:disabled){transform:none;}
}
@media (max-width:640px){
.sm-controls{gap:7px;}
.sm-btn{font-size:12px;padding:6px 11px 5px;}
.sm-reset{margin-left:0;}
}
/* ---------- the timber panel ---------------------------------------------
One section only - the closing one - gets boards under it, as a change of
pace from the ticking every other box on this page uses, and to tie back to
the wood slice further down. Deliberately paler than the card cream it
contains, so the definition cards inside still lift off it.
------------------------------------------------------------------------ */
.timber{
position:relative;
background-color:#F2E7D5;background-image:var(--woodgrain-soft);
border:1.5px solid var(--wood);border-radius:var(--r);
padding:22px 24px 10px;margin:0 0 26px;
box-shadow:4px 4px 0 var(--wood-tint);
}
/* two knots, because a board with none reads as printed paper */
.timber::before,.timber::after{
content:"";position:absolute;width:9px;height:6px;border-radius:50%;
background:rgba(139,94,60,.30);pointer-events:none;
}
.timber::before{top:58px;right:34px;transform:rotate(-14deg);}
.timber::after{bottom:44px;left:29px;transform:rotate(9deg);}
.timber .part-head{margin-top:0;}
.timber > :last-child{margin-bottom:14px;}
/* ---------- the wood-slice medallion --------------------------------------
A cross-section with real growth rings: bark edge, pale sapwood, and rings
that are neither evenly spaced nor perfectly concentric, because no tree
grows that way.
Used ONCE per page, for a standout moment - here, the date the dispatch
was posted. This is deliberately NOT a repeating background: the whole
point of it is that it reads as one carved object you could pick up. Wood
appears on this page as rings in one place and as rules and a cord
everywhere else; it is never the page's skin.
------------------------------------------------------------------------ */
.slice-row{display:flex;align-items:center;justify-content:center;
gap:20px;margin:40px 0 4px;flex-wrap:wrap;}
.slice{width:134px;height:134px;flex:none;
filter:drop-shadow(0 3px 4px var(--shadow));}
.slice-note{margin:0;max-width:25ch;
font-family:var(--hand);font-size:20px;line-height:1.3;color:var(--ink-soft);}
.slice-note b{display:block;font-family:var(--display);font-weight:400;
font-size:11px;letter-spacing:.19em;text-transform:uppercase;
color:var(--ink-faint);margin-bottom:2px;}
/* ---------- the Part markers, as routed trail signs -----------------------
A board on its own is a label. What makes it read as trailhead signage is
the POST under it - a squared timber standing in a patch of ground, with
the board bolted across the top and sitting very slightly askew on it.
Note the max-width:none. .part-marker is a
, so without it the marker
inherits the 68ch measure and centres inside THAT rather than on the page,
which put the sign noticeably left of centre.
------------------------------------------------------------------------ */
.part-marker{
position:relative;max-width:none;
margin:42px 0 30px;padding-bottom:48px;
text-align:center;
}
/* the post. The three-stop gradient is the lit and shaded faces of a squared
timber - a flat fill reads as a printed bar. */
.part-marker::before{
content:"";position:absolute;z-index:0;
left:50%;transform:translateX(-50%);
top:15px;width:12px;height:58px;
background-color:var(--wood);
background-image:linear-gradient(90deg,
rgba(46,36,25,.30) 0 3px, transparent 3px 8px, rgba(245,239,224,.20) 8px 12px);
border-radius:1px 1px 2px 2px;
}
/* the ground it is driven into */
.part-marker::after{
content:"";position:absolute;z-index:0;
left:50%;bottom:4px;transform:translateX(-50%);
width:58px;height:9px;border-radius:50%;
background:radial-gradient(ellipse at 50% 45%,
rgba(74,103,65,.42) 0 42%, rgba(74,103,65,.16) 62%, transparent 74%);
}
/* the board: routed groove around the lettering, and a bolt at each end */
.part-marker .block-stamp.small{
position:relative;z-index:1;
padding:9px 22px 7px;border-radius:3px;
box-shadow:3px 3px 0 var(--wood-tint),
inset 0 0 0 1.5px rgba(245,239,224,.42);
}
.part-marker .block-stamp.small::before,
.part-marker .block-stamp.small::after{
content:"";position:absolute;top:50%;width:5px;height:5px;border-radius:50%;
background:rgba(245,239,224,.5);
box-shadow:0 1px 0 rgba(46,36,25,.35);
transform:translateY(-50%);
}
.part-marker .block-stamp.small::before{left:8px;}
.part-marker .block-stamp.small::after{right:8px;}
/* ---------- footer --------------------------------------------------------
Stamp-style postcard tags, not underlined links. Issue 03 shipped plain
text here and it read as an unfinished page; this one launches with the
tags in place.
------------------------------------------------------------------------ */
.foot{margin-top:48px;padding-top:26px;border-top:2px solid var(--wood);}
.issue-nav{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 22px;}
.issue-card{
/* capped, so a lone card (Page 1 has only a Previous) does not stretch the
full measure and stop reading as a stamp */
flex:1 1 240px;max-width:430px;display:flex;align-items:center;gap:12px;
padding:12px 14px;text-decoration:none;color:var(--ink);
background-color:var(--card);background-image:var(--ticking);
border:1.5px solid var(--wood);
/* perforated stamp edge, 10px pitch, punched all four sides */
-webkit-mask:radial-gradient(circle 3.1px at 50% 0,#0000 96%,#000) 0 0/10px 100%,
radial-gradient(circle 3.1px at 50% 100%,#0000 96%,#000) 0 0/10px 100%,
radial-gradient(circle 3.1px at 0 50%,#0000 96%,#000) 0 0/100% 10px,
radial-gradient(circle 3.1px at 100% 50%,#0000 96%,#000) 0 0/100% 10px;
-webkit-mask-composite:source-in;
mask:radial-gradient(circle 3.1px at 50% 0,#0000 96%,#000) 0 0/10px 100%,
radial-gradient(circle 3.1px at 50% 100%,#0000 96%,#000) 0 0/10px 100%,
radial-gradient(circle 3.1px at 0 50%,#0000 96%,#000) 0 0/100% 10px,
radial-gradient(circle 3.1px at 100% 50%,#0000 96%,#000) 0 0/100% 10px;
mask-composite:intersect;
transition:transform .13s ease;
}
@supports not ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
.issue-card{-webkit-mask:none;mask:none;border:1.5px dashed var(--wood);border-radius:4px;}
}
.issue-card:hover{transform:translateY(-2px);color:var(--ink);}
.ic-icon{flex:none;width:36px;height:36px;}
.ic-icon svg{width:100%;height:100%;display:block;
filter:drop-shadow(0 1px 1px rgba(46,36,25,.22));}
.ic-body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ic-kicker{font-family:var(--display);font-weight:400;font-size:9.5px;
letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.ic-title{font-family:var(--display);font-weight:400;font-size:15px;
line-height:1.16;color:var(--forest);}
.ic-note{font-family:var(--hand);font-size:16px;line-height:1;color:var(--orange-dk);}
.foot-line{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;
font-family:var(--code);font-size:12.5px;color:var(--ink-faint);max-width:none;
}
.foot-line .mark{width:22px;height:22px;flex:none;}
/* ---------- responsive ---------------------------------------------------- */
@media (max-width:640px){
body{font-size:16px;}
.wrap{padding:18px 14px 70px;}
.seal-row{flex-direction:column;text-align:center;gap:10px;}
.seal-note{max-width:32ch;}
.masthead{padding:34px 18px 20px;}
.kit-row{flex-direction:column;gap:8px;}
.kit-lbl{width:auto;}
.part-head{gap:12px;}
.part-num{width:58px;height:58px;
-webkit-mask-size:11.6px 100%,11.6px 100%,100% 11.6px,100% 11.6px;
mask-size:11.6px 100%,11.6px 100%,100% 11.6px,100% 11.6px;}
.part-num svg{width:20px;height:20px;}
.pull{flex-direction:column;gap:8px;}
.pull::before,.pull::after{width:100%;flex:none;}
.recap dt{min-width:0;}
ul{padding-left:28px;}
ul > li::before{left:-26px;width:17px;height:17px;}
}
@media print{
body{background:#fff;}
.recap .write{border-color:#999;}
}