/* ---------------------------------------------------------------------------
   /learn/ - MAIL CLUB, ISSUE No. 04: "Camp Post".

   Page 1 of a three-page arc documenting the currency-portfolio-tool project.
   Fourth issue of the same publication as pipeline.html (01, coastal),
   backend.html (02, harvest) and delivery.html (03, night).

   STANDALONE, like the other three. Issue 01 has reference.css, Issue 02 has
   issue-02.css, Issue 03 has issue-03.css, and this file shares no cascade
   with any of them - a change here cannot reach those pages. The only shared
   file is reference.js, which is behaviour (the fillable recap cards) and
   names no colour at all. This one file is meant to serve all three pages of
   the arc; nothing in it is specific to Page 1.

   What carries across, on purpose, so this still reads as the same club:
   Lora for body, Courier Prime for code, Caveat for handwriting, and the five
   structural patterns - the scalloped seal, the postage-stamp section badges,
   the sticker-sheet legend, the typed-letter callouts, the recap cards.

   What changes: the season, and the place. Paw prints, plaid, bunting, and
   one wood slice with the date carved into it.

   THE RULE LEARNED IN ISSUE 03: density is not decoration you add afterwards.
   Issue 02 is the benchmark - a full-page ground texture, a real pattern
   behind every callout, solid-tinted pills, dotted legend paper - and this
   file is built to that level from the first commit rather than patched up
   to it later.

   THE CONTRAST RULE: burnt orange (#C97A3D) on canvas cream is 2.89:1. It is
   a PATTERN AND BORDER colour - pennants, badge fills, tints, rules. Small
   orange TEXT uses --orange-dk (#96521F, 5.19:1). Stamps are cream on forest
   (5.51:1) or cream on wood (4.85:1), never cream on orange. Trail gold is
   decorative detail only and never carries a word that has to be read.
--------------------------------------------------------------------------- */

:root{
  /* --- the six named colours -------------------------------------------- */
  --canvas:#F5EFE0;    /* canvas cream - the page ground                    */
  --forest:#4A6741;    /* forest green - THE accent. Seal, structure, rules */
  --orange:#C97A3D;    /* burnt orange - pennants, badges, patterns         */
  --wood:#8B5E3C;      /* wood brown - borders, rules, the cord, the rings  */
  --ink:#2E2419;       /* warm charcoal - every word                        */

  /* the rare one. Badge highlights and embers ONLY - never structure.
     Same discipline lavender had in Issues 02 and 03. */
  --gold:#D4A340;

  /* --- 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        */
  --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);
  --gold-tint:rgba(212,163,64,.18);
  --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. Lilita One is a poster/patch face - chunky enough to hold
     a sewn-badge look at heading size. */
  --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:"Lilita One","Trebuchet MS",system-ui,sans-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 ------------------------------------------
     Buffalo check is two crossed stripe sets of the SAME colour and alpha:
     where they cross, the alpha compounds and you get the third, darkest
     square. That compounding is what makes it read as check rather than as
     a grid, and it is why both sets must be semi-transparent.
     -------------------------------------------------------------------- */
  --plaid-green:
    repeating-linear-gradient(0deg,rgba(74,103,65,.125) 0 11px,transparent 11px 22px),
    repeating-linear-gradient(90deg,rgba(74,103,65,.125) 0 11px,transparent 11px 22px);
  /* RULE, inherited from Issue 02's gingham: the high-contrast check is for
     SHORT HEADER BARS ONLY - contents headers, code label bars, table heads.
     Never behind a paragraph; at this pitch running text has to fight it. */
  --plaid-orange:
    repeating-linear-gradient(0deg,rgba(201,122,61,.26) 0 6px,transparent 6px 12px),
    repeating-linear-gradient(90deg,rgba(201,122,61,.26) 0 6px,transparent 6px 12px);

  /* 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.5px at 6px 6px,rgba(74,103,65,.30) 2.5px,transparent 3px);

  /* the page ground. One paw is a pad and four toes; the tile carries two of
     them at different angles so a repeat does not read as a grid. */
  --paws:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%238B5E3C' fill-opacity='.16'%3E%3Cg transform='translate(3,6) rotate(-14 9 10)'%3E%3Cpath d='M9 8.4c3.3 0 5.9 2.5 5.9 5.1 0 2.1-2.4 3.3-5.9 3.3s-5.9-1.2-5.9-3.3c0-2.6 2.6-5.1 5.9-5.1z'/%3E%3Ccircle cx='3.4' cy='6.4' r='2.1'/%3E%3Ccircle cx='7.2' cy='3.9' r='2.3'/%3E%3Ccircle cx='11.2' cy='3.9' r='2.3'/%3E%3Ccircle cx='15' cy='6.4' r='2.1'/%3E%3C/g%3E%3Cg transform='translate(31,32) rotate(17 9 10)'%3E%3Cpath d='M9 8.4c3.3 0 5.9 2.5 5.9 5.1 0 2.1-2.4 3.3-5.9 3.3s-5.9-1.2-5.9-3.3c0-2.6 2.6-5.1 5.9-5.1z'/%3E%3Ccircle cx='3.4' cy='6.4' r='2.1'/%3E%3Ccircle cx='7.2' cy='3.9' r='2.3'/%3E%3Ccircle cx='11.2' cy='3.9' r='2.3'/%3E%3Ccircle cx='15' cy='6.4' r='2.1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* the bunting. One tile, two flags, straight cord so it tiles seamlessly.
     Slightly different flag depths - a real string of them never hangs even. */
  --bunting:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='26' viewBox='0 0 54 26'%3E%3Cpath d='M0 4 H54' stroke='%238B5E3C' stroke-width='2' fill='none'/%3E%3Cpath d='M5 5 L25 5 L15 22.5 Z' fill='%234A6741'/%3E%3Cpath d='M31 5 L51 5 L41 24.5 Z' fill='%23C97A3D'/%3E%3Ccircle cx='15' cy='4' r='1.9' fill='%238B5E3C'/%3E%3Ccircle cx='41' cy='4' r='1.9' fill='%238B5E3C'/%3E%3C/svg%3E");
  /* the same string, smaller, for dividers between sections */
  --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='%234A6741' opacity='.88'/%3E%3Cpath d='M26 4.2 L42 4.2 L34 21 Z' fill='%23C97A3D' opacity='.88'/%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");

  /* stitched edge, for the badge-like cards */
  --stitch:repeating-linear-gradient(90deg,var(--wood) 0 5px,transparent 5px 10px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

/* ---------- the ground: paw prints ---------------------------------------
   Something walked through camp. Two prints per 60px tile, set at different
   angles so the eye reads a wandering track rather than wallpaper.

   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(--paws);
  background-size:60px 60px;
  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%;}

/* a strung line of pennants, used as the signature edge on cards */
.bunting-edge{position:relative;}
.bunting-edge::before{
  content:"";position:absolute;left:0;right:0;top:0;height:26px;
  background-image:var(--bunting);background-size:54px 26px;
  background-repeat:repeat-x;pointer-events:none;
}

/* ---------- 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(--forest);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(--wood);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(--forest);color:var(--canvas);
  padding:9px 16px 7px;line-height:1;letter-spacing:.06em;
  box-shadow:3px 3px 0 var(--wood-tint);
  transform:rotate(-1.6deg);
  border:1.5px solid var(--forest);
}
.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(--wood);border-color:var(--wood);}

/* the eyebrow oval - "this logbook belongs to..." */
.oval-label{
  display:inline-block;background:var(--forest);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(--forest);
  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(--forest);border-radius:var(--r);
  padding:44px 28px 24px;margin-bottom:26px;
  box-shadow:4px 4px 0 var(--forest-tint);
}
.masthead::before{
  content:"";position:absolute;left:6px;right:6px;top:6px;height:26px;
  background-image:var(--bunting);background-size:54px 26px;
  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(34px,6.4vw,54px);margin:4px 0 14px;
  color:var(--forest);letter-spacing:.004em;
}
.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(--plaid-green);
  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:12px;
  letter-spacing:.07em;text-transform:uppercase;
  border:1.5px solid var(--forest);border-radius:999px;
  padding:3px 13px 2px;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);}

/* ---------- the bunting strip under the masthead ------------------------- */
.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(--forest);}
.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(--forest);
  border-radius:var(--r);overflow:hidden;
  background-color:var(--forest-tint);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(--forest);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, plaid only on its header strip --------- */
.toc{
  background:var(--card);
  border:1.5px solid var(--wood);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(--plaid-orange);
  border-bottom:1.5px solid var(--wood);
  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 strung line of pennants 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(--plaid-orange);
  -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 pennant instead, so the margin has a rhythm */
  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='M7 4v25'/%3E%3Cpath d='M7 6 26 11.5 7 17Z'/%3E%3C/g%3E%3Cpath d='M7 6 26 11.5 7 17Z' fill='%23C97A3D'/%3E%3Cpath d='M5.6 4h2.8v25H5.6z' fill='%238B5E3C'/%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(--gold-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;}
/* ---------- the local/FX split, made movable ------------------------------
   Progressive enhancement: `hidden` in the markup, revealed by the page script.
   Negative bars grow leftwards from the centre line so a loss reads as a loss
   at a glance rather than needing the sign to be read.
   ------------------------------------------------------------------------ */
.fx-lab{
  background-color:var(--card);background-image:var(--plaid-green);
  border:1.5px solid var(--forest);border-radius:var(--r);
  padding:15px 18px 14px;margin:0 0 24px;box-shadow:3px 3px 0 var(--forest-tint);
}
.fx-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:13px;}
.fx-title{font-family:var(--display);font-size:12px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--forest);}
.fx-sub{font-family:var(--hand);font-size:17px;color:var(--ink-faint);}

.fx-controls{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:14px;}
.fx-ctl{flex:1 1 250px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fx-ctl label{flex:1 1 100%;font-family:var(--display);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);}
.fx-ctl input[type=range]{flex:1 1 130px;accent-color:var(--forest);min-width:120px;}
.fx-val{flex:none;min-width:66px;text-align:right;
  font-family:var(--code);font-size:14px;font-weight:700;color:var(--ink);}

.fx-out{background:var(--canvas);border:1px solid var(--rule-firm);
  border-radius:5px;padding:11px 13px;}
.fx-line{display:flex;align-items:center;gap:11px;margin:0 0 7px;}
.fx-line:last-child{margin-bottom:0;}
.fx-line.total{border-top:1.5px solid var(--rule-firm);padding-top:9px;margin-top:9px;}
.fx-k{flex:none;width:150px;font-family:var(--display);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);}
.fx-line.total .fx-k{color:var(--forest);}
/* the centre line: gains grow right, losses grow left */
.fx-bar{position:relative;flex:1 1 auto;height:13px;min-width:60px;
  background:rgba(139,94,60,.10);border-radius:3px;}
.fx-bar::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;
  width:1px;background:var(--rule-firm);}
.fx-bar i{position:absolute;top:0;bottom:0;left:50%;width:0;
  background:var(--forest);border-radius:0 3px 3px 0;transition:width .12s ease;}
.fx-bar i.down{left:auto;right:50%;background:var(--orange);
  border-radius:3px 0 0 3px;}
.fx-n{flex:none;min-width:74px;text-align:right;
  font-family:var(--code);font-size:14px;font-weight:700;color:var(--ink);}
.fx-n.up{color:var(--forest);}
.fx-n.down{color:var(--orange-dk);}

.fx-read{margin:12px 0 0;max-width:none;
  font-family:var(--hand);font-size:19px;line-height:1.34;color:var(--ink-soft);}
.fx-read.alarm{color:var(--orange-dk);}
.fx-preset{margin-top:10px;font-family:var(--code);font-size:12px;cursor:pointer;
  padding:6px 14px;border-radius:999px;
  border:1.5px solid var(--orange);background:var(--orange-tint);color:var(--orange-dk);}
.fx-preset:hover{background:var(--orange);color:var(--canvas);}
.fx-preset:focus-visible{outline:2px solid var(--forest);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.fx-bar i{transition:none;}}
@media (max-width:640px){
  .fx-k{width:auto;flex:1 1 100%;}
  .fx-line{flex-wrap:wrap;gap:6px;}
}

/* ---------- 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;}
.c{font-family:var(--hand);font-size:16px;color:#8A7355;}
.d{color:var(--ink-faint);}

/* ---------- typed-letter callouts ----------------------------------------
   Same construction as every prior issue: a typed body on patterned paper,
   with a ruled line under the tag. Reskinned to plaid.
   ------------------------------------------------------------------------ */
.callout{
  position:relative;
  background-color:var(--card);background-image:var(--plaid-green);
  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(--plaid-green);
  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:22px;min-width:44px;
  background-image:var(--bunting-sm);background-size:44px 22px;
  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, plaid-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(--plaid-green);}
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(--wood);border-radius:var(--r);
  box-shadow:4px 4px 0 var(--wood-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 timber panel ---------------------------------------------
   One section only - the closing one - gets boards under it, as a change of
   pace from the plaid 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 <p>, 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(--plaid-green);
  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;}
}