/* =========================================================================
GENERATED FILE - do not edit this directly.
Source: ~/projects/.learn-tools/i09/issue-09.body.css (the hand-written CSS)
~/projects/.learn-tools/i09/patterns.py (four grounds)
~/projects/.learn-tools/i09/small.py (divider and deckle)
Rebuild: cd ~/projects/.learn-tools/i09 && python3 build.py
Any edit made here is thrown away by the next rebuild. Change the body file
instead.
========================================================================= */
/* Issue 09 — The Long Evening. Hand-written; build.py substitutes the textures
and ships this as issue-09.css.
SINGLE THEME, ON PURPOSE. No issue in this series carries a dark mode:
an issue is a printed thing, and its palette is the point. That is a
choice here, not an omission — every colour below is painted explicitly
so the page holds whatever ground it lands on.
WHAT THIS ISSUE IS
------------------
The ninth letter, and the first led by GOLD. Gold has only ever been a minor
accent across the series; here marigold leads — but it leads the way Pumpkin
Farm's orange was always going to have to, as a SURFACE rather than an ink.
THE ONE THING TO UNDERSTAND ABOUT THIS PALETTE
-----------------------------------------------
Marigold is 2.47:1 on cream. It cannot letter anything, anywhere, ever.
But soot on marigold is 6.15:1, so it makes a fine ground: the seal, the
plaque, the section badges, the journal panel and the callout headers are
all marigold SURFACES with near-black lettering. That puts far more gold on
the page than using it as an ink ever could — which is what "gold leads"
has to mean at arm's length. It is the resolution already recorded for
Pumpkin Farm, arrived at independently and for the same reason.
Every other colour in the brief is also short of 4.5:1 on the ground:
pumpkin 3.69, dusty rose 3.16, sage 2.78. So the ONLY text colours on this
page are ink (15.20) and three derived darks — the `--lilac-dk` move from
Issue 06, which this palette needs three times over.
THE PALETTE'S TWO HARD RULES
-----------------------------
1. --marigold, --pumpkin, --rose and --sage NEVER carry small text. They are
surfaces, borders, texture and area. Ink and the three -dk tokens carry
text.
2. The Issue 06 fact-pill trap: pumpkin-dk on a tint of any of these
measures 4.14–4.25:1 and FAILS. Inside a tinted panel the text is always
--ink (12.5–12.8:1). The build refuses anything else.
SAGE IS KNOWINGLY THE SERIES' THIRD
------------------------------------
#8A9678 is dE 4.4 from the expedition cut's sage and dE 6.4 from Issue 06's,
where the floor is 5. Alice's call, made with the numbers in front of her.
It is decorative-only at 2.78:1, so it never carries a word, which is what
limits the damage. Ratios computed in ../i08/contrast.py, not eyeballed. */
:root {
--cream: #F7F1E6; /* the ground - soft cream, series-consistent */
--marigold: #D68A3E; /* LEAD. 2.47:1 - a SURFACE ONLY, never an ink */
--marigold-dk: #98622C; /* 4.54:1 - the lead where an ink is needed */
--pumpkin: #C0632E; /* 3.69:1 - large text and surfaces only */
--pumpkin-dk: #AA5829; /* 4.52:1 - text-safe, and takes cream back at 4.52 */
--ink: #231A14; /* soot, 15.20:1 - body */
--sage: #8A9678; /* MINOR accent, 2.78:1 - AREA ONLY. never text */
--rose: #B9776B; /* rare accent, 3.16:1 - AREA ONLY */
--rose-dk: #966057; /* 4.55:1 - faults and warnings */
--paper: #FDFAF3; /* 4.52:1 on pumpkin-dk - reversed-out text there,
and NEVER on marigold, where it is 2.47:1 */
--card: rgba(253,250,243,.74);
--tint-marigold: #F0DCC4; /* 20% marigold over cream - ink 12.80. NOT
pumpkin-dk, which is 4.24 here. Hard rule 2. */
--tint-pumpkin: #EFDCCA; /* 15% pumpkin - ink 12.82 */
--tint-rose: #ECDBD0; /* 18% rose - ink 12.70 */
--tint-sage: #DFDDCE; /* 22% sage - ink 12.50 */
--rule-firm: #E4C1A7; /* 34% pumpkin - ruled lines and hard borders */
--rule-soft: #EDD2B4; /* 30% marigold - quiet separators */
--ink-faint: #6B5F52; /* 5.52:1 on cream - small print, denominations */
--shadow: rgba(35,26,20,.20);
--body: "Lora", Georgia, "Times New Roman", serif;
--display: "Berkshire Swash", Georgia, serif;
--label: "Kalam", "Bradley Hand", cursive;
--code: "Courier Prime", ui-monospace, "Courier New", monospace;
--hand: "Caveat", "Segoe Script", cursive;
--measure: 66ch;
--gap: 1.15rem;
/* --- generated textures: see build.py --------------------------- */
/* the page ground - falling leaves, ambient */
--leaves:url("data:image/svg+xml,");
/* the callout - cable knit, tactile */
--cable:url("data:image/svg+xml,");
/* cards and badges - flecked wool */
--heather:url("data:image/svg+xml,");
/* the journal panel - feint ruling */
--rule:url("data:image/svg+xml,");
/* the section divider - a draped strand */
--garland:url("data:image/svg+xml,");
/* quiet trim */
--garland-sm:url("data:image/svg+xml,");
/* card border-image, slice 20 */
--fringe:url("data:image/svg+xml,");
/* the variant for marigold panels */
--fringe-lt:url("data:image/svg+xml,");
/* panel border-image, slice 14 */
--frame:url("data:image/svg+xml,");
/* the variant for marigold panels */
--frame-lt:url("data:image/svg+xml,");
}
/* ---- base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background-color: var(--cream);
background-image: var(--leaves);
color: var(--ink);
font-family: var(--body);
font-size: 17px;
line-height: 1.68;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 6rem; }
.col { max-width: var(--measure); }
p { margin: 0 0 var(--gap); max-width: var(--measure); }
strong, b { font-weight: 700; }
a { color: var(--marigold-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rose-dk); }
a:focus-visible, button:focus-visible, [contenteditable]:focus-visible {
outline: 2px solid var(--marigold-dk); outline-offset: 3px; border-radius: 2px;
}
/* Issue 01's stylesheet has no .visually-hidden and markup copied out of it
renders screen-reader labels as body text. Every later issue carries its
own copy; this is Issue 09's. */
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- type roles -------------------------------------------------------- */
/* Berkshire Swash carries the titles; Kalam carries anything stamped, labelled
or written in the field; Caveat is the series' handwriting and appears only
where a hand would actually have written. Lora and Courier Prime are the
other two series constants and stay quiet. */
/* WEIGHT 400, and it matters. Berkshire Swash ships one weight only, so any
bolder value makes the browser synthesise a fake bold - it smears the swashes
and thickens the hairlines that give the face its character. The previous
face (Comfortaa) needed 700 to stop reading as a default; this one needs 400
to stop being wrecked. Never carry a weight over from one display face to
another. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
.eyebrow, .stamp, .tag, .card-meta, th, .fault-label, .panel-label,
.oval-label, .block-stamp, .lbl, .denom, .ic-kicker, .kit-lbl {
font-family: var(--label); letter-spacing: .04em;
}
code, pre, .num { font-family: var(--code); font-variant-numeric: tabular-nums; }
.lede, .seal-note, .subtitle { font-family: var(--hand); }
/* ---- the seal ---------------------------------------------------------- */
/* Series convention since Issue 03: the seal is the link home, and the
carries its layout INLINE so .seal keeps the width/height and flex:none on
the SVG itself. A bare becomes the flex item and the sizing shifts. */
.seal-row {
/* justify-content:center is what Issues 02/04/06 all use on .seal-row.
Omitting it left the seal hard against the left margin while every
other letter centres its emblem over the masthead. */
display: flex; align-items: center; justify-content: center; gap: 1.1rem;
padding-top: clamp(1.6rem, 4vw, 2.6rem); flex-wrap: wrap;
}
.seal { width: 96px; height: 96px; flex: none; filter: drop-shadow(1px 3px 4px var(--shadow)); }
.seal-note { font-size: 1.72rem; line-height: 1.2; color: var(--marigold-dk); margin: 0; max-width: 30ch; }
.seal-note b { font-family: var(--label); font-size: .82rem; font-weight: 400;
display: block; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); }
/* ---- masthead ---------------------------------------------------------- */
.masthead { padding: clamp(1.8rem, 5vw, 3rem) 0 1.4rem; }
.mast-top { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.masthead .eyebrow { margin: 0; }
.oval-label {
display: inline-block; padding: .3rem .95rem;
font-size: .74rem; text-transform: uppercase; letter-spacing: .18em;
color: var(--paper); background: var(--pumpkin-dk); border-radius: 999px;
}
/* The ISSUE stamp, perforated. NOT a tiled mask in both directions — that
punches holes through the middle of the badge. Four gradients, each tiled
along ONE axis, composited with intersect: notches on the edges only. */
.block-stamp {
display: inline-block; padding: .42rem .9rem .38rem;
font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink); background: var(--marigold);
/* Tiled by PERCENTAGE, not by pixels. At a fixed 11px pitch the notches only
come out even if the stamp happens to be a multiple of 11 wide — it is
text-sized, so it never was, and the last notch on each edge was clipped.
That is what read as the stamp sitting off centre. Eight notches across
and three down divide any width evenly. */
-webkit-mask: radial-gradient(circle 3.2px at 50% 0,#0000 96%,#000) 0 0/12.5% 100%,
radial-gradient(circle 3.2px at 50% 100%,#0000 96%,#000) 0 0/12.5% 100%,
radial-gradient(circle 3.2px at 0 50%,#0000 96%,#000) 0 0/100% 33.34%,
radial-gradient(circle 3.2px at 100% 50%,#0000 96%,#000) 0 0/100% 33.34%;
-webkit-mask-composite: source-in;
mask: radial-gradient(circle 3.2px at 50% 0,#0000 96%,#000) 0 0/12.5% 100%,
radial-gradient(circle 3.2px at 50% 100%,#0000 96%,#000) 0 0/12.5% 100%,
radial-gradient(circle 3.2px at 0 50%,#0000 96%,#000) 0 0/100% 33.34%,
radial-gradient(circle 3.2px at 100% 50%,#0000 96%,#000) 0 0/100% 33.34%;
mask-composite: intersect;
}
/* THE MASTHEAD FRAME.
Every other letter has a hero element — Issue 07's crossed-skis sticker,
Issue 08's engraved navy plaque. This one had none: a bare h1 on the page
ground. Alice: "for the box i was expecting to see the title and [the
standfirst] surrounded by loads of different leaves in shades of greens and
some browns."
Built as a border-image so the foliage survives any width. The tile is 260px
sliced at 58, so the four corners are fixed and the four edge strips repeat;
`round` scales the repeat to a whole number of tiles rather than cutting one
in half. The border-width scales with the viewport while the slice stays at
58, which is what keeps the leaves from turning into a hairline on a phone. */
/* THE CARD. Issue 06's shape, which is the HOUSE shape: a light card carrying
a texture, edged with this issue's border-image, with the colour arriving as
badges, borders and the title rather than as a field.
The previous cut made this a solid marigold block with soot lettering. That
is Issue 08's construction, and Issue 08 is the series' EXCEPTION - it was
allowed to break the house pattern in several places because a country-club
nameplate genuinely needed to. An autumn letter does not, so it goes back to
the rule. Marigold still leads: it is the badge, the section stamps, the
journal panel and the seal, and marigold-dk letters the title. */
.mast-frame {
position: relative;
margin: 1.4rem 0 2rem;
padding: 0;
background-color: var(--card);
background-image: var(--heather);
border: clamp(22px, 3vw, 34px) solid transparent;
border-image: var(--fringe) 34 round;
box-shadow: 0 3px 0 var(--tint-sage), 0 12px 26px -18px var(--shadow);
}
/* A plain wrapper now. It keeps its name because the markup, the build's house
check and the functional suite all refer to it, but it paints nothing - the
card above is the surface. */
/* It no longer paints a surface, but it still has to hold the card's inset -
.mast-frame's padding is 0 because the border-image supplies the frame. */
.plaque { position: relative; text-align: left;
padding: clamp(1.2rem, 3.5vw, 2.2rem) clamp(1rem, 3vw, 2rem) 0; }
.plaque > * { position: relative; }
.plaque .mast-top { justify-content: space-between; margin-bottom: 1rem; }
/* An outlined tag on a light card, which is what 02, 04 and 06 all do. */
.plaque .oval-label {
color: var(--pumpkin-dk); background: transparent;
border: 1.5px solid var(--pumpkin-dk);
}
/* THE badge, and the loudest piece of gold on the page: a filled marigold
block with soot lettering at 6.15:1, a hard offset shadow and a slight
rotation - Issue 06's block-stamp exactly, in this issue's colour. */
.plaque .block-stamp {
color: var(--ink); background: var(--marigold);
border: 1.5px solid var(--marigold-dk);
box-shadow: 3px 3px 0 var(--tint-marigold);
transform: rotate(-1.4deg);
}
.plaque h1 { color: var(--marigold-dk); margin-left: 0; margin-right: 0; }
.plaque .subtitle { color: var(--pumpkin-dk); margin-left: 0; margin-right: 0;
margin-bottom: 0; }
/* The ornament between title and standfirst: two rules and this issue's mark.
On a light card it is drawn in the secondary, not in paper. */
.mast-orn {
display: flex; align-items: center; justify-content: flex-start; gap: 13px;
margin: .9rem 0 .9rem; max-width: min(330px, 80%);
color: var(--pumpkin-dk); line-height: 1;
}
.mast-orn span { flex: 1; height: 1px; background: var(--rule-firm); }
.mast-orn svg { width: 15px; height: 15px; flex: none; }
/* The body of the card sits on parchment, not on the plaque. Six lines of
reversed-out text is a worse read than six lines of black on paper, which is
the same call Issue 08 records for its notice. */
.masthead-inner { padding: 1.1rem clamp(1rem, 3vw, 2rem) clamp(1.2rem, 3.5vw, 2.2rem); }
.mast-frame h1 { max-width: 18ch; }
/* :not(.subtitle) matters. `.mast-frame > p` is one class and one element,
which outranks the bare `.subtitle` rule above - so without this the
card was quietly shrinking its own standfirst to body size. */
.masthead-inner > p:not(.subtitle) { font-size: 1.02rem; }
.masthead-inner .callout { margin: 1.4rem 0 1.2rem; }
.masthead-inner .stamp-row { margin: 0; }
h1 {
font-size: clamp(2.5rem, 7vw, 4.4rem); line-height: 1.0;
margin: 0 0 .7rem; color: var(--marigold-dk); letter-spacing: -.005em;
}
.subtitle {
font-size: 2.15rem; line-height: 1.22; color: var(--pumpkin-dk);
margin: 0 0 .9rem; max-width: 30ch;
}
.masthead-inner p:not(.subtitle) { font-size: 1.02rem; }
/* ---- the "where this is going" callout --------------------------------- */
/* Every issue has one. This one is a specimen label: a vellum card on the
fern ground, with the accent as a hairline down its left edge. */
/* THE CALLOUT. A bordered, tinted panel with a label tab that sits ON the top
border - the shape Issues 02, 04 and 08 all use. The first cut was a left
rule and a texture, which reads as an aside rather than as a notice. */
.callout {
position: relative; margin: 2rem 0; padding: 1.5rem 1.4rem 1.1rem;
background-color: var(--tint-pumpkin); background-image: var(--cable);
border: 1.5px solid var(--marigold-dk);
}
.callout .badge {
position: absolute; top: -.72rem; left: 1.1rem;
font-family: var(--label); font-size: .7rem;
letter-spacing: .16em; text-transform: uppercase;
color: var(--paper); background: var(--rose-dk);
padding: .18rem .7rem;
}
/* --ink: the callout is a tinted panel and every derived dark measures
4.14-4.25:1 on these tints (hard rule 2). Ink is 12.8:1. */
.callout .tag { display: block; font-size: .78rem; text-transform: uppercase;
letter-spacing: .16em; color: var(--ink); margin: 0 0 .4rem; }
.callout p:last-child { margin-bottom: 0; }
/* ---- fact pills, as stamps --------------------------------------------- */
/* FACT PILLS. Issues 02 and 04 both run a row of outlined, rounded, slightly
tilted pills in more than one colour; the first cut here had flat grey-green
rectangles, which is the difference between a row of stamps and a row of
table cells. Each pill takes a different ink, all of them text-safe on
vellum: canopy 7.87, teal 10.59, hibiscus 4.70. Frond is not among them. */
.stamp-row { display: flex; flex-wrap: wrap; gap: .6rem .55rem; margin: 1.5rem 0; }
/* SOLID-TINTED, not outline-only. The jungle cut drew these as parchment
ovals with a coloured rule, and at arm's length a row of them read as four
empty outlines rather than four stamps. The colour now lives in the FILL and
the ink stays constant - which is also the only safe way to do it here,
because hard rule 2 forbids the lead colour on its own tint (3.81:1). Every
one of these is ink on a tint at 10.9-11.3:1. */
.stamp {
font-size: .74rem; letter-spacing: .05em; padding: .32rem .85rem;
border: 1.5px solid var(--rule-firm);
border-radius: 999px; color: var(--ink);
}
.stamp.s1 { background: var(--tint-marigold); border-color: var(--marigold-dk); transform: rotate(-1.2deg); }
.stamp.s2 { background: var(--tint-pumpkin); border-color: var(--pumpkin-dk); transform: rotate(.8deg); }
.stamp.s3 { background: var(--tint-sage); border-color: var(--sage); transform: rotate(1.1deg); }
.stamp.s4 { background: var(--tint-rose); border-color: var(--rose-dk); transform: rotate(-.7deg); }
.stamp.mono { font-family: var(--code); letter-spacing: 0; }
.foot .stamp { border: none; background: none; border-radius: 0; transform: none;
color: var(--ink-faint); padding: 0; }
/* ---- the sticker sheet ------------------------------------------------- */
.kit-strip {
margin: 2rem 0; padding: 1rem 1.2rem;
background-color: var(--tint-pumpkin); background-image: var(--heather);
border: 1px solid var(--rule-soft);
}
.kit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kit-lbl { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
/* ul carries max-width:66ch for prose lists; a flex row of stickers must opt
out of it or it wraps three icons early on a wide screen. */
.stickers { display: flex; flex-wrap: wrap; gap: .7rem .8rem; list-style: none;
margin: 0; padding: 0; max-width: none; }
/* nowrap: 'tree frog' and 'hand lens' broke across two lines and read as
four stickers rather than two. */
/* THE STICKER SHEET. No cell around each entry: the white die-cut halo drawn
into every symbol IS the sticker's edge, and boxing that inside a tinted,
dashed, rounded card puts a second border around something that already has
one. The sheet's own frame is the only box here.
Labels are two to four words, as Issue 02's are. Full sentences wrapped to
two lines and left every entry looking broken. */
.sticker {
display: flex; align-items: center; gap: .55rem; margin: 0;
color: var(--ink);
}
.sticker span { font-family: var(--hand); font-size: 1.3rem; line-height: 1.12;
color: var(--ink); white-space: nowrap; }
.sticker.hot span { color: var(--rose-dk); }
/* 58px. 72 was past the point where a sticker reads as a sticker and into
reading as an illustration with a caption. */
.ico {
display: block; width: 58px; height: 58px; flex: none;
filter: drop-shadow(0 1.5px 2.5px rgba(35,26,20,.28));
}
.ico svg { width: 100%; height: 100%; display: block; }
/* ---- the liana divider ------------------------------------------------- */
/* background-size is NOT optional here. The garland tile is 200x42 and this
box was 30px tall with no size set, so the browser drew the tile at its
natural height into a shorter box and clipped the pom-poms clean off - the
one feature that makes it a garland rather than a wavy line. Issue 06's
.vine-strip sets background-size for exactly this reason. Height and
background-size must both match the tile. */
.rule {
height: 42px; margin: 2.8rem 0; border: 0;
background-image: var(--garland);
background-size: 200px 42px;
background-repeat: repeat-x; background-position: left center;
}
.rule-sm { height: 16px; background-image: var(--garland-sm);
background-size: 160px 16px; background-repeat: repeat-x; margin: 1.8rem 0; }
/* ---- table of contents ------------------------------------------------- */
/* THE CONTENTS. A bordered box with a coloured header bar, which is what all
three of 02, 04 and 08 do. Bare hairlines on the page ground read as a list
that happens to be there rather than as a card. */
.toc { margin: 2.4rem 0; max-width: none;
background: var(--card); border: 1.5px solid var(--rule-firm); }
/* Deep pumpkin, not gold. Four panels in a row were all marigold and the
page read as one colour with things drawn on it - the same monochrome
fault the expedition cut had, in a warmer hue. paper on pumpkin-dk is
4.87:1. */
.toc h2 { font-family: var(--label); font-size: .74rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--paper); background: var(--pumpkin-dk);
margin: 0; padding: .45rem .9rem; }
.toc ol { margin: 0; padding: .3rem .9rem .5rem; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--rule-soft); }
.toc li:first-child { border-top: none; }
.toc a { display: flex; gap: .9rem; align-items: baseline; padding: .5rem .2rem;
text-decoration: none; color: var(--ink); }
/* --ink, not an accent: pumpkin-dk on a tint measures 4.14-4.25:1 and fails
(hard rule 2). Ink on any of these tints is 12.5-12.8:1. */
.toc a:hover { background: var(--tint-marigold); color: var(--ink); }
.toc a::before {
content: "0" counter(toc); font-family: var(--label); font-size: .76rem;
color: var(--ink); min-width: 2.2em;
}
/* ---- the layer marker -------------------------------------------------- */
/* The series' part marker. A jungle has named layers from the floor up, so
this issue's sections are grouped by the one they belong to rather than
lettered — Issue 06 dropped part lettering and nothing has missed it. */
.part-marker { display: flex; align-items: center; gap: .8rem; margin: 3rem 0 1rem; max-width: none; }
.part-marker::after { content: ""; flex: 1; height: 1px; background: var(--rule-firm); }
/* Sage. The minor accent had exactly one border to its name and was
otherwise invisible; a group marker is small, repeated and structural,
which is the right size of job for it. ink on sage is 5.46:1. */
.marker-tag {
display: inline-block; padding: .3rem 1.5rem .3rem .9rem;
font-family: var(--label); font-size: .76rem; letter-spacing: .18em;
text-transform: uppercase; color: var(--ink); background: var(--sage);
border-radius: 0 999px 999px 0;
}
/* ---- sections ---------------------------------------------------------- */
.part { padding-top: 1.4rem; }
.part-head { display: flex; align-items: flex-start; gap: 1.2rem; margin-bottom: 1rem; }
/* The section badge: a postage stamp, perforated the same way as the ISSUE
block above and for the same reason. This is the HOUSE shape — Issue 08
overrode it with a chevron shield, and that override was reserved for the
one preppy letter. A jungle issue earns its difference from its palette,
its ground and its divider, not from breaking the series' section badge. */
.part-num {
flex: none; position: relative; width: 70px; height: 70px; margin: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
background-color: var(--marigold); background-image: var(--heather);
color: var(--ink);
-webkit-mask: radial-gradient(circle 4.2px at 50% 0,#0000 96%,#000) 0 0/14px 100%,
radial-gradient(circle 4.2px at 50% 100%,#0000 96%,#000) 0 0/14px 100%,
radial-gradient(circle 4.2px at 0 50%,#0000 96%,#000) 0 0/100% 14px,
radial-gradient(circle 4.2px at 100% 50%,#0000 96%,#000) 0 0/100% 14px;
-webkit-mask-composite: source-in;
mask: radial-gradient(circle 4.2px at 50% 0,#0000 96%,#000) 0 0/14px 100%,
radial-gradient(circle 4.2px at 50% 100%,#0000 96%,#000) 0 0/14px 100%,
radial-gradient(circle 4.2px at 0 50%,#0000 96%,#000) 0 0/100% 14px,
radial-gradient(circle 4.2px at 100% 50%,#0000 96%,#000) 0 0/100% 14px;
mask-composite: intersect;
transform: rotate(-2deg);
filter: drop-shadow(1px 2px 2px var(--shadow));
}
.part-num svg { width: 24px; height: 24px; display: block; margin-bottom: 1px; }
.part-num .no { font-family: var(--display); font-size: 18px; line-height: 1; color: var(--ink); }
/* canopy-lt is 5.67:1 on this green. It is the sanctioned label colour on a
green surface and it is 1.39:1 on the page ground — never take it outside. */
.part-num .denom { font-size: 7.4px; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink); margin-top: 2px; }
.part-titles { flex: 1; min-width: 0; }
.part-titles h2 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); line-height: 1.1; margin: 0; color: var(--marigold-dk); }
.part-titles .tag { display: block; font-size: .78rem; color: var(--ink-faint); margin: .35rem 0 0; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; margin: 0; color: var(--marigold-dk); }
h3 { font-family: var(--body); font-weight: 700; font-size: 1.12rem;
margin: 1.9rem 0 .5rem; color: var(--pumpkin-dk); }
h4 { font-size: 1rem; margin: 0; color: var(--marigold-dk); }
.lede { font-size: 1.42rem; line-height: 1.34; color: var(--pumpkin-dk); margin: 0 0 1.1rem; max-width: 44ch; }
/* ---- the journal panel ------------------------------------------------- */
/* This issue's callout body: a green field-journal page, ruled, with the
label in canopy-lt. The one place the lead colour covers real area. */
.journal {
background-color: var(--marigold); background-image: var(--rule);
color: var(--ink); padding: 1.3rem 1.5rem; margin: 1.9rem 0;
border: 14px solid transparent; border-image: var(--fringe-lt) 14 round;
}
.journal .panel-label { display: block; font-size: .76rem; text-transform: uppercase;
letter-spacing: .14em; color: var(--ink); margin-bottom: .5rem; }
.journal p { max-width: none; }
.journal p:last-child { margin-bottom: 0; }
.journal a { color: var(--ink); }
/* --ink, not --paper. A 16% paper wash over marigold is still marigold, so
paper lettering on it is ~2.5:1 - and the build's marigold guard skipped this
rule precisely BECAUSE it paints a background, which an rgba this faint does
not really do. Ink on it is 6.5:1. */
.journal code { background: rgba(246,244,232,.16); color: var(--ink); }
/* ---- faults ------------------------------------------------------------ */
/* Hibiscus is the warning colour and it is the ONLY thing it is. On the tinted
ground below it measures 4.07:1 against 4.5 — so the tint carries ink, and
hibiscus is spent on the rule and the label, where it is large. */
.fault {
border-left: 4px solid var(--rose-dk);
background: var(--tint-rose);
padding: 1.1rem 1.3rem; margin: 1.9rem 0;
}
.fault-label { display: block; font-size: .76rem; text-transform: uppercase;
letter-spacing: .14em; color: var(--rose-dk); margin-bottom: .45rem; }
.fault p:last-child { margin-bottom: 0; }
/* ---- code -------------------------------------------------------------- */
/* .code is the hook reference.js looks for; it appends .copy-btn into
.code-label. The button strips a leading "$" before copying, because Issue
05 documents an install that failed from a pasted prompt character. */
.code { margin: 1.6rem 0; border: 1px solid var(--rule-firm); background: var(--paper); }
.code-label {
display: flex; align-items: center; gap: .8rem;
padding: .42rem .8rem; font-size: .74rem; text-transform: uppercase;
letter-spacing: .1em; color: var(--paper); background: var(--pumpkin-dk);
}
/* margin-left:auto so a third flex child (the copy button) does not re-centre
the note beside it. Every issue needs this line. */
.code-label .rhs { margin-left: auto; opacity: .8; text-transform: none; letter-spacing: 0; }
.copy-btn {
margin-left: auto; font-family: var(--label); font-size: .72rem; letter-spacing: .08em;
/* The wash DARKENS the label bar rather than lightening it. Lightening a
pumpkin-dk bar by 14% left paper lettering at 3.77:1 - the button was the
one thing on that bar you could not read. Darkening puts it at 6.09:1. */
color: var(--paper); background: rgba(35,26,20,.18);
border: 1px solid rgba(246,244,232,.42); border-radius: 2px;
padding: .1rem .55rem; cursor: pointer;
}
.code-label .rhs + .copy-btn { margin-left: .6rem; }
.copy-btn:hover { background: rgba(35,26,20,.30); }
.copy-btn.done { background: var(--paper); color: var(--marigold-dk); border-color: var(--paper); }
.copy-btn.failed { background: var(--rose-dk); border-color: var(--rose-dk); }
pre {
margin: 0; padding: 1rem 1.15rem; overflow-x: auto;
background: var(--paper); color: var(--ink);
font-size: .84rem; line-height: 1.6;
}
pre b { color: var(--marigold-dk); font-weight: 700; }
pre .dim { color: var(--ink-faint); }
pre .ok { color: var(--marigold-dk); font-weight: 700; }
pre .bad { color: var(--rose-dk); font-weight: 700; }
code { font-size: .88em; background: var(--tint-marigold); padding: .05rem .3rem; }
/* ---- data -------------------------------------------------------------- */
.scroll { overflow-x: auto; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .55rem .75rem; vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; color: var(--marigold-dk);
border-bottom: 2px solid var(--rule-firm); white-space: nowrap; }
td { border-bottom: 1px solid var(--rule-soft); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; white-space: nowrap; }
ul, ol { margin: 0 0 var(--gap); padding-left: 1.3rem; max-width: var(--measure); }
li { margin-bottom: .45rem; }
li::marker { color: var(--marigold-dk); } /* 7.87:1 — frond is area-only */
.caption { font-size: .82rem; color: var(--ink-faint); margin: .55rem 0 0; max-width: var(--measure); }
/* ---- Section Review Cards ---------------------------------------------- */
/* Functional, at Alice's request: the note is contenteditable and the rating
is clickable, both persisted to localStorage by reference.js. The deckled
border-image is this issue's own — nothing else in the series has a torn
edge, and it is the reason a card here reads as a page out of a notebook
rather than as a panel. */
/* No max-width. Issue 06 constrains none of its panels - only paragraphs take
--measure - and a review card that stops at 66ch reads as a floating box
rather than as part of the page. The 24px border and the hard offset shadow
are 06's shape too. */
.recap {
position: relative; margin: 2.2rem 0; max-width: none;
background-color: var(--card); background-image: var(--heather);
border: 24px solid transparent; border-image: var(--fringe) 34 round;
box-shadow: 4px 4px 0 var(--tint-marigold);
}
.recap-head {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .2rem .3rem .5rem; border-bottom: 1.5px dashed var(--rule-firm);
}
.recap-head h4 { font-size: .95rem; letter-spacing: .01em; }
/* The card number, as leaves on a stem. One filled leaf per card so far, the
rest empty — the same "n of six" the other issues draw with pips. */
.card-no { display: flex; align-items: center; gap: 4px; }
.card-no i {
width: 9px; height: 11px; display: block;
border: 1.2px solid var(--rose); border-radius: 0 100% 0 100%;
transform: rotate(-20deg);
}
.card-no i.on { background: var(--marigold); border-color: var(--marigold-dk); }
.recap dl { margin: 0; padding: .7rem .3rem .2rem; }
.recap dt { font-family: var(--label); font-size: .76rem; letter-spacing: .04em;
color: var(--ink-faint); margin-bottom: .1rem; }
.recap dd { margin: 0 0 .9rem; }
.recap dd.said { font-family: var(--body); font-size: .95rem; }
/* THE WRITE-IN BOX — the house component since 2026-08-22. Ruled lines drawn
straight onto the card: no border, no background, no radius. The arithmetic
is 1px padding + one 28px line + the rule = 30px, and the placeholder is
18px against a 20px writing size. Only the ink colour changes per issue.
Issues 04/05 shipped a bordered field and the padding under the rule read
as dead space; that is what this construction fixes. */
.recap .write {
margin-top: 6px; padding: 1px 4px 0;
font-family: var(--hand); font-size: 20px; line-height: 28px; color: var(--ink);
caret-color: var(--rose-dk);
min-height: 30px;
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:empty::before { content: attr(data-hint); color: var(--ink-faint);
opacity: .75; font-size: 18px; }
.recap .write:focus { background-color: var(--tint-marigold); box-shadow: 0 0 0 2px var(--tint-marigold); }
.recap-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
flex-wrap: wrap; padding: .7rem .3rem .2rem;
border-top: 1.5px dashed var(--rule-firm);
}
.rating { display: flex; align-items: center; gap: 5px; }
.rating .lbl { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
color: var(--ink-faint); margin-right: 4px; }
/* THE RATING SYMBOL — monstera leaves, filling in. This issue's own: patches
are Issue 04's, stars Issue 02's, moon phases Issue 03's, flowers Issue 06's,
snowflakes Issue 07's, tennis balls Issue 08's; the flame was unclaimed.
Unearned they sit at 42% in marigold; lit, they go full-strength PUMPKIN at
full size - a hotter colour for a lit flame than an unlit one. At 17px and
30% the whole row was invisible, which is not much of a hearth. */
.pip { border: none; background: none; padding: 2px; cursor: pointer; line-height: 0; }
.pip svg { width: 24px; height: 24px; display: block; color: var(--marigold-dk);
opacity: .42; transform: scale(.88); transition: transform .16s ease, opacity .16s ease; }
.pip.on svg {
/* area-ok: a 24px lit flame, decoration inside a labelled button, not text.
Pumpkin is 3.69:1 on cream - past the 3.0 that a UI graphic needs, short
of the 4.5 a word needs. The button's accessible name is on the