/* ---------------------------------------------------------------------------
   /learn/ - MAIL CLUB, ISSUE No. 03: "Night Post".

   How a thing on this machine gets to be a thing on the internet. Third issue
   of the same publication as pipeline.html (Issue 01, coastal) and
   backend.html (Issue 02, harvest), new season - and the series' first
   nighttime one.

   STANDALONE, like the other two. Issue 01 has reference.css, Issue 02 has
   issue-02.css, and this file shares no cascade with either, so 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.

   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 callout, the recap cards.

   What changes: the season, and the time of day. Moon, stars, clouds.

   ONE RULE WORTH KEEPING, learned in Issue 02's gingham: the page ground stays
   PALE. This is a night-themed issue on cream paper, not a dark-mode page.
   Long-form reading wants a light ground, and both earlier issues set that
   expectation. Navy does the structural work that dusty blue and apple red
   did before it - it is the ink and the furniture, never the floor.
--------------------------------------------------------------------------- */

:root{
  /* --- the six named colours -------------------------------------------- */
  --paper:#F6F3ED;    /* moonlit cream - cooler than 01/02, still cream     */
  --navy:#2E3454;     /* night navy - THE accent. Headers, seal, structure. */
  --gold:#E3B04E;     /* moon gold - the moon itself, warm highlights       */
  --cloud:#A9B4CC;    /* cloud blue-grey - fills, dots, soft shapes         */
  --ink:#262B42;      /* near-navy ink - every word                        */

  /* the confetti colour. Tiny star details ONLY - never structure.
     Same role lavender played in Issue 02, same discipline. */
  --lav:#C3B8E8;

  /* --- derived, all mixed from the six ---------------------------------- */
  --ink-soft:#4A5170;
  --ink-faint:#636D8A;   /* darkened from #7B84A3: at 8.5-11px the
                            lighter value failed WCAG AA on cream (3.34:1) */
  --rule:#DDE2EC;
  --rule-firm:#B9C1D4;
  --card:#FCFAF5;         /* the paper things sit on, a shade above ground  */
  --navy-tint:rgba(46,52,84,.08);
  --navy-tint-2:rgba(46,52,84,.16);
  --cloud-tint:rgba(169,180,204,.22);
  --gold-tint:rgba(227,176,78,.18);
  --shadow:rgba(38,43,66,.16);

  /* --- four fonts, four jobs --------------------------------------------
     Two are fixed across the whole series and two are this issue's own. */
  --hand:"Caveat","Bradley Hand",cursive;                  /* unchanged 01/02 */
  --body:"Lora",Georgia,"Times New Roman",serif;           /* unchanged 01/02 */
  --code:"Courier Prime","Courier New",monospace;          /* unchanged 01/02 */
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif; /* THIS issue      */

  --r:9px;   /* a touch rounder than Issue 02. Softer, sleepier. */

  /* --- the patterns, said once ------------------------------------------
     The starfield is this issue's page texture: the job Issue 01's wave wash
     and Issue 02's stripe did. Two dot layers at different scales and
     opacities, because one regular grid of dots reads as graph paper rather
     than as sky. Kept very faint - it must never compete with a paragraph. */
  --starfield:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='480' viewBox='0 0 620 480'><path d='M301.4 25.4 L119.0 24.3 L243.8 125.6 L77.0 397.3' fill='none' stroke='%23A9B4CC' stroke-width='.9' stroke-dasharray='2 5' stroke-linecap='round' opacity='.30'/><path d='M544.2 287.1 L86.3 253.8 L124.4 420.5 L200.2 13.4' fill='none' stroke='%23A9B4CC' stroke-width='.9' stroke-dasharray='2 5' stroke-linecap='round' opacity='.30'/><path d='M375.9 26.0 L266.3 439.6 L118.9 309.5 L283.4 206.1' fill='none' stroke='%23A9B4CC' stroke-width='.9' stroke-dasharray='2 5' stroke-linecap='round' opacity='.30'/><path d='M200.7 74.0 L194.9 65.8 L347.9 353.3 L258.6 331.3' fill='none' stroke='%23A9B4CC' stroke-width='.9' stroke-dasharray='2 5' stroke-linecap='round' opacity='.30'/><path d='M413.3 3.6 L476.9 283.6 L328.1 10.3 L56.2 18.0' fill='none' stroke='%23A9B4CC' stroke-width='.9' stroke-dasharray='2 5' stroke-linecap='round' opacity='.30'/><circle cx='543.7' cy='212.8' r='1.30' fill='%232E3454' opacity='0.42'/><circle cx='86.3' cy='253.8' r='1.60' fill='%232E3454' opacity='0.44'/><circle cx='367.9' cy='181.3' r='0.90' fill='%23C3B8E8' opacity='0.50'/><circle cx='128.6' cy='447.6' r='1.90' fill='%232E3454' opacity='0.34'/><circle cx='40.5' cy='183.2' r='1.30' fill='%23C3B8E8' opacity='0.49'/><circle cx='393.5' cy='370.7' r='2.30' fill='%232E3454' opacity='0.39'/><circle cx='379.3' cy='430.1' r='2.30' fill='%232E3454' opacity='0.37'/><circle cx='373.8' cy='60.0' r='1.30' fill='%232E3454' opacity='0.30'/><circle cx='615.7' cy='1.2' r='0.90' fill='%232E3454' opacity='0.38'/><circle cx='329.7' cy='478.1' r='1.30' fill='%232E3454' opacity='0.44'/><circle cx='586.7' cy='28.2' r='0.90' fill='%23C3B8E8' opacity='0.46'/><circle cx='492.2' cy='130.3' r='0.90' fill='%232E3454' opacity='0.38'/><circle cx='351.4' cy='285.6' r='1.60' fill='%232E3454' opacity='0.43'/><circle cx='290.3' cy='224.0' r='0.90' fill='%232E3454' opacity='0.30'/><circle cx='313.0' cy='274.6' r='1.60' fill='%232E3454' opacity='0.39'/><circle cx='232.1' cy='163.3' r='2.30' fill='%232E3454' opacity='0.39'/><circle cx='142.6' cy='256.0' r='1.30' fill='%23A9B4CC' opacity='0.62'/><circle cx='118.9' cy='309.5' r='2.30' fill='%232E3454' opacity='0.28'/><circle cx='100.5' cy='80.5' r='0.90' fill='%23C3B8E8' opacity='0.43'/><circle cx='407.1' cy='109.7' r='1.30' fill='%232E3454' opacity='0.39'/><circle cx='140.3' cy='2.1' r='1.30' fill='%23A9B4CC' opacity='0.56'/><circle cx='294.7' cy='235.6' r='1.60' fill='%23A9B4CC' opacity='0.51'/><circle cx='25.7' cy='166.5' r='0.90' fill='%232E3454' opacity='0.31'/><circle cx='137.5' cy='277.8' r='1.30' fill='%232E3454' opacity='0.33'/><circle cx='575.3' cy='310.3' r='1.30' fill='%232E3454' opacity='0.31'/><circle cx='258.6' cy='331.3' r='1.60' fill='%23C3B8E8' opacity='0.45'/><circle cx='419.9' cy='13.6' r='1.30' fill='%23C3B8E8' opacity='0.39'/><circle cx='579.0' cy='252.1' r='1.30' fill='%23C3B8E8' opacity='0.56'/><circle cx='452.3' cy='281.2' r='1.30' fill='%232E3454' opacity='0.30'/><circle cx='288.1' cy='405.3' r='1.90' fill='%232E3454' opacity='0.30'/><circle cx='269.1' cy='154.8' r='1.30' fill='%23A9B4CC' opacity='0.46'/><circle cx='348.6' cy='201.5' r='1.30' fill='%232E3454' opacity='0.43'/><circle cx='334.2' cy='271.2' r='1.30' fill='%232E3454' opacity='0.42'/><circle cx='143.4' cy='272.7' r='1.10' fill='%232E3454' opacity='0.40'/><circle cx='455.5' cy='300.9' r='2.30' fill='%232E3454' opacity='0.33'/><circle cx='77.0' cy='397.3' r='2.30' fill='%23C3B8E8' opacity='0.47'/><circle cx='226.6' cy='1.3' r='1.30' fill='%232E3454' opacity='0.33'/><circle cx='572.1' cy='321.3' r='1.30' fill='%23C3B8E8' opacity='0.46'/><circle cx='200.7' cy='74.0' r='2.30' fill='%232E3454' opacity='0.35'/><circle cx='119.0' cy='24.3' r='1.60' fill='%232E3454' opacity='0.33'/><circle cx='127.7' cy='226.8' r='1.10' fill='%23C3B8E8' opacity='0.46'/><circle cx='615.9' cy='59.1' r='1.60' fill='%232E3454' opacity='0.30'/><circle cx='582.0' cy='214.8' r='0.90' fill='%232E3454' opacity='0.27'/><circle cx='338.8' cy='13.6' r='2.30' fill='%232E3454' opacity='0.41'/><circle cx='518.5' cy='216.1' r='1.10' fill='%23A9B4CC' opacity='0.56'/><circle cx='242.0' cy='181.4' r='1.30' fill='%232E3454' opacity='0.45'/><circle cx='102.3' cy='314.8' r='1.30' fill='%23C3B8E8' opacity='0.46'/><circle cx='194.5' cy='174.1' r='1.10' fill='%232E3454' opacity='0.44'/><circle cx='79.6' cy='66.5' r='0.90' fill='%232E3454' opacity='0.40'/><circle cx='594.4' cy='267.2' r='1.30' fill='%232E3454' opacity='0.34'/><circle cx='338.5' cy='470.8' r='1.30' fill='%232E3454' opacity='0.46'/><circle cx='216.2' cy='269.8' r='1.30' fill='%232E3454' opacity='0.37'/><circle cx='601.1' cy='93.1' r='1.60' fill='%232E3454' opacity='0.46'/><circle cx='243.8' cy='125.6' r='1.90' fill='%23A9B4CC' opacity='0.59'/><circle cx='473.9' cy='448.9' r='1.90' fill='%232E3454' opacity='0.32'/><circle cx='378.7' cy='205.4' r='0.90' fill='%23A9B4CC' opacity='0.61'/><circle cx='79.8' cy='201.6' r='1.10' fill='%23C3B8E8' opacity='0.38'/><circle cx='362.5' cy='359.4' r='1.60' fill='%23C3B8E8' opacity='0.53'/><circle cx='116.5' cy='55.8' r='0.90' fill='%23A9B4CC' opacity='0.46'/><circle cx='373.5' cy='84.5' r='1.90' fill='%232E3454' opacity='0.41'/><circle cx='498.7' cy='132.2' r='1.60' fill='%23A9B4CC' opacity='0.47'/><circle cx='200.2' cy='13.4' r='2.30' fill='%23C3B8E8' opacity='0.56'/><circle cx='359.0' cy='300.0' r='2.30' fill='%23A9B4CC' opacity='0.53'/><circle cx='537.3' cy='302.2' r='0.90' fill='%23A9B4CC' opacity='0.52'/><circle cx='547.9' cy='299.6' r='2.30' fill='%23C3B8E8' opacity='0.44'/><circle cx='102.5' cy='260.9' r='1.90' fill='%232E3454' opacity='0.34'/><circle cx='544.2' cy='287.1' r='1.60' fill='%23A9B4CC' opacity='0.54'/><circle cx='214.6' cy='51.2' r='1.10' fill='%23A9B4CC' opacity='0.57'/><circle cx='159.8' cy='161.5' r='1.30' fill='%232E3454' opacity='0.44'/><circle cx='134.6' cy='99.8' r='1.30' fill='%232E3454' opacity='0.29'/><circle cx='260.3' cy='117.2' r='1.60' fill='%23A9B4CC' opacity='0.43'/><circle cx='328.1' cy='10.3' r='1.60' fill='%232E3454' opacity='0.42'/><circle cx='283.4' cy='206.1' r='2.30' fill='%232E3454' opacity='0.44'/><circle cx='347.9' cy='353.3' r='1.60' fill='%232E3454' opacity='0.45'/><circle cx='597.6' cy='335.7' r='2.30' fill='%232E3454' opacity='0.39'/><circle cx='51.8' cy='160.6' r='1.30' fill='%23A9B4CC' opacity='0.54'/><circle cx='183.1' cy='391.9' r='1.10' fill='%23C3B8E8' opacity='0.57'/><circle cx='8.8' cy='339.9' r='1.30' fill='%23C3B8E8' opacity='0.53'/><circle cx='221.2' cy='428.5' r='1.30' fill='%232E3454' opacity='0.40'/><circle cx='124.4' cy='420.5' r='2.30' fill='%232E3454' opacity='0.39'/><circle cx='326.9' cy='68.3' r='1.30' fill='%232E3454' opacity='0.30'/><circle cx='299.6' cy='90.3' r='1.60' fill='%232E3454' opacity='0.35'/><circle cx='217.1' cy='154.2' r='1.30' fill='%23A9B4CC' opacity='0.55'/><circle cx='516.1' cy='275.8' r='1.10' fill='%232E3454' opacity='0.34'/><circle cx='104.9' cy='289.9' r='1.30' fill='%232E3454' opacity='0.27'/><circle cx='115.2' cy='443.0' r='1.30' fill='%232E3454' opacity='0.32'/><circle cx='355.9' cy='141.3' r='1.60' fill='%232E3454' opacity='0.30'/><circle cx='284.9' cy='243.3' r='1.10' fill='%232E3454' opacity='0.30'/><circle cx='222.3' cy='115.6' r='0.90' fill='%232E3454' opacity='0.39'/><circle cx='31.0' cy='155.0' r='1.10' fill='%232E3454' opacity='0.34'/><circle cx='590.2' cy='350.7' r='0.90' fill='%232E3454' opacity='0.42'/><circle cx='246.8' cy='389.1' r='2.30' fill='%232E3454' opacity='0.43'/><circle cx='502.4' cy='53.8' r='0.90' fill='%23A9B4CC' opacity='0.59'/><circle cx='202.8' cy='281.7' r='0.90' fill='%232E3454' opacity='0.30'/><circle cx='15.1' cy='186.2' r='1.60' fill='%23A9B4CC' opacity='0.56'/><circle cx='60.6' cy='107.1' r='1.30' fill='%232E3454' opacity='0.42'/><circle cx='436.6' cy='162.4' r='2.30' fill='%23A9B4CC' opacity='0.46'/><circle cx='280.4' cy='233.5' r='1.60' fill='%232E3454' opacity='0.32'/><circle cx='78.9' cy='200.6' r='1.30' fill='%232E3454' opacity='0.30'/><circle cx='297.2' cy='125.9' r='1.60' fill='%23C3B8E8' opacity='0.59'/><circle cx='522.4' cy='115.3' r='0.90' fill='%23A9B4CC' opacity='0.48'/><circle cx='56.2' cy='18.0' r='1.60' fill='%23C3B8E8' opacity='0.41'/><circle cx='16.3' cy='35.9' r='0.90' fill='%232E3454' opacity='0.32'/><circle cx='58.1' cy='383.4' r='1.30' fill='%232E3454' opacity='0.28'/><circle cx='167.5' cy='53.8' r='1.30' fill='%232E3454' opacity='0.37'/><circle cx='284.7' cy='72.4' r='2.30' fill='%232E3454' opacity='0.32'/><circle cx='221.4' cy='360.8' r='1.30' fill='%232E3454' opacity='0.32'/><circle cx='49.6' cy='49.3' r='1.30' fill='%23C3B8E8' opacity='0.50'/><circle cx='506.4' cy='184.0' r='1.60' fill='%23C3B8E8' opacity='0.44'/><circle cx='388.6' cy='39.7' r='1.10' fill='%232E3454' opacity='0.42'/><circle cx='375.9' cy='26.0' r='1.90' fill='%232E3454' opacity='0.40'/><circle cx='205.1' cy='6.3' r='1.10' fill='%232E3454' opacity='0.30'/><circle cx='528.0' cy='257.6' r='1.10' fill='%232E3454' opacity='0.42'/><circle cx='177.6' cy='146.3' r='1.30' fill='%232E3454' opacity='0.38'/><circle cx='476.9' cy='283.6' r='1.60' fill='%232E3454' opacity='0.36'/><circle cx='130.1' cy='321.1' r='1.30' fill='%232E3454' opacity='0.40'/><circle cx='151.2' cy='442.5' r='1.30' fill='%23C3B8E8' opacity='0.43'/><circle cx='266.3' cy='439.6' r='1.60' fill='%23A9B4CC' opacity='0.47'/><circle cx='318.3' cy='284.9' r='1.10' fill='%23C3B8E8' opacity='0.51'/><circle cx='413.3' cy='3.6' r='1.60' fill='%23A9B4CC' opacity='0.45'/><circle cx='194.9' cy='65.8' r='1.60' fill='%23C3B8E8' opacity='0.56'/><circle cx='189.1' cy='321.6' r='1.10' fill='%232E3454' opacity='0.37'/><circle cx='364.2' cy='192.1' r='1.30' fill='%232E3454' opacity='0.35'/><circle cx='581.3' cy='151.4' r='1.60' fill='%232E3454' opacity='0.27'/><circle cx='301.4' cy='25.4' r='1.60' fill='%232E3454' opacity='0.31'/><circle cx='21.5' cy='196.1' r='1.60' fill='%232E3454' opacity='0.32'/><circle cx='347.9' cy='434.8' r='1.90' fill='%232E3454' opacity='0.36'/><circle cx='43.1' cy='120.4' r='1.30' fill='%232E3454' opacity='0.33'/><path d='M615.9 54.9 l1.2 3.0 l3.0 1.2 l-3.0 1.2 l-1.2 3.0 Z' fill='%23E3B04E' opacity='.55'/><path d='M506.4 179.2 l1.4 3.4 l3.4 1.4 l-3.4 1.4 l-1.4 3.4 Z' fill='%23E3B04E' opacity='.55'/><path d='M455.5 296.0 l1.4 3.5 l3.5 1.4 l-3.5 1.4 l-1.4 3.5 Z' fill='%23E3B04E' opacity='.55'/><path d='M362.5 354.5 l1.4 3.5 l3.5 1.4 l-3.5 1.4 l-1.4 3.5 Z' fill='%23E3B04E' opacity='.55'/><path d='M15.1 181.7 l1.3 3.3 l3.3 1.3 l-3.3 1.3 l-1.3 3.3 Z' fill='%23E3B04E' opacity='.55'/><path d='M379.3 425.8 l1.3 3.1 l3.1 1.3 l-3.1 1.3 l-1.3 3.1 Z' fill='%23E3B04E' opacity='.55'/><path d='M301.4 20.5 l1.4 3.5 l3.5 1.4 l-3.5 1.4 l-1.4 3.5 Z' fill='%23E3B04E' opacity='.55'/></svg>");
  --starfield-size:620px 480px;

  /* the denser one, for INSIDE the stargazing note only */
  --starfield-dense:
    radial-gradient(circle .9px at 16px 18px,rgba(255,255,255,.42) .9px,transparent 1.4px),
    radial-gradient(circle .7px at 96px 52px,rgba(255,255,255,.32) .7px,transparent 1.2px),
    radial-gradient(circle 1px at 148px 16px,rgba(227,176,78,.34) 1px,transparent 1.5px),
    radial-gradient(circle .7px at 58px 92px,rgba(195,184,232,.40) .7px,transparent 1.2px);

  /* star-dust: the small-scale texture that goes INSIDE boxes, so a callout
     reads as patterned paper rather than as a flat fill. This is this issue's
     answer to Issue 02's gingham and Issue 01's powder wash. */
  --stardust:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'><circle cx='6' cy='8' r='1.15' fill='%232E3454' opacity='.22'/><circle cx='24' cy='4.5' r='.85' fill='%23C3B8E8' opacity='.52'/><circle cx='29' cy='21' r='1.1' fill='%232E3454' opacity='.19'/><circle cx='13' cy='25.5' r='.8' fill='%232E3454' opacity='.21'/><circle cx='19.5' cy='15' r='.7' fill='%23A9B4CC' opacity='.58'/></svg>");

  /* soft dots, the "light fill" role Issue 01 gave powder and 02 gave gingham */
  --dots:radial-gradient(circle 2.4px at 7px 7px,rgba(169,180,204,.30) 2.4px,transparent 3px);

  /* scalloped hems, drawn as a filled half-circle whose outline is only on
     the curve, so a bordered card keeps its edge all the way round. */
  --scallop-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13' viewBox='0 0 22 13'%3E%3Cpath d='M0 1.2 A11 11 0 0 0 22 1.2' fill='%23FCFAF5' stroke='%232E3454' stroke-width='1.3'/%3E%3C/svg%3E");
  --scallop-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13' viewBox='0 0 22 13'%3E%3Cpath d='M0 11.8 A11 11 0 0 1 22 11.8' fill='%23FCFAF5' stroke='%232E3454' stroke-width='1.3'/%3E%3C/svg%3E");

  /* THE CLOUD RULE - this issue's section divider, replacing Issue 01's wave
     edge and Issue 02's scalloped pink. One tile, three bumps of deliberately
     unequal radius; the tile starts and ends at the same height so it repeats
     without a seam. */
  --cloud-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='30' viewBox='0 0 168 30'%3E%3Cpath d='M0 30 V19 A11 11 0 0 1 22 17 A15 15 0 0 1 54 14 A9.5 9.5 0 0 1 74 18 A13 13 0 0 1 102 16 A8 8 0 0 1 120 20 A10.5 10.5 0 0 1 146 18 A9 9 0 0 1 168 19 V30 Z' fill='%23A9B4CC' fill-opacity='.30'/%3E%3Cpath d='M0 19 A11 11 0 0 1 22 17 A15 15 0 0 1 54 14 A9.5 9.5 0 0 1 74 18 A13 13 0 0 1 102 16 A8 8 0 0 1 120 20 A10.5 10.5 0 0 1 146 18 A9 9 0 0 1 168 19' fill='none' stroke='%232E3454' stroke-opacity='.34' stroke-width='1.4'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

body.issue-03{
  margin:0;
  background-color:var(--paper);
  background-image:var(--starfield);
  background-size:var(--starfield-size);
  background-attachment:fixed;   /* as Issues 01 and 02 both do */
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.wrap{max-width:860px;margin:0 auto;padding:0 22px 90px;}

/* --- links ---------------------------------------------------------------- */
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--ink);}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:3px;}

/* --- the seal ------------------------------------------------------------- */
.seal-block{text-align:center;padding:44px 0 6px;}
.seal{width:132px;height:132px;display:inline-block;filter:drop-shadow(0 3px 6px var(--shadow));}
.seal-note{
  font-family:var(--hand);font-size:20px;color:var(--ink-soft);
  margin:8px 0 0;line-height:1.35;
}
.seal-note b{display:block;font-family:var(--display);font-weight:600;
  font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--navy);}

/* --- masthead ------------------------------------------------------------- */
.masthead{
  background:var(--card);
  border-radius:var(--r);
  padding:10px;                 /* the ring lives in this padding */
  margin:16px 0 30px;
  position:relative;
  box-shadow:0 2px 0 var(--navy-tint);
}
/* The stitched edge - navy, gold and lavender dashes running round the card
   like a string of small stars. Same construction as Issue 01's barber-pole:
   paint the whole box, then mask out everything except the padding ring, so
   the pattern only ever shows as a border and never behind the text. */
.masthead::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  padding:10px;
  background:repeating-linear-gradient(45deg,
    var(--navy) 0 7px, transparent 7px 15px,
    var(--gold) 15px 22px, transparent 22px 30px,
    var(--lav) 30px 36px, transparent 36px 45px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.masthead-inner{
  position:relative;z-index:1;
  background:var(--card);
  border:1px solid var(--rule);border-radius:4px;
  padding:26px 26px 22px;
}
.mast-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.eyebrow{margin:0;}
.oval-label{
  display:inline-block;font-family:var(--display);font-weight:500;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--navy);
  border:1.4px solid var(--cloud);border-radius:999px;padding:4px 14px;
  background:var(--cloud-tint);
}
.block-stamp{
  display:inline-block;font-family:var(--display);font-weight:600;
  letter-spacing:2.6px;text-transform:uppercase;color:var(--paper);
  background:var(--navy);border-radius:5px;padding:5px 13px;
  box-shadow:2px 2px 0 var(--cloud);
}
.block-stamp.big{font-size:13.5px;}
.block-stamp.small{font-size:11px;letter-spacing:2.2px;}

.masthead h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(30px,5.2vw,45px);line-height:1.1;
  color:var(--navy);margin:6px 0 12px;letter-spacing:.2px;
}
.subtitle{font-size:18px;color:var(--ink-soft);margin:0 0 14px;}
.thesis{
  font-size:15.5px;
  background-color:var(--cloud-tint);
  background-image:var(--stardust);
  border-left:4px solid var(--cloud);border-radius:0 6px 6px 0;
  padding:12px 16px;margin:0 0 16px;color:var(--ink-soft);
}
.thesis strong{color:var(--navy);}
.stamp-row{display:flex;flex-wrap:wrap;gap:8px;}
.stamp{
  font-family:var(--display);font-weight:500;font-size:11.5px;
  letter-spacing:.9px;text-transform:uppercase;color:var(--navy);
  /* tinted fill, matching the border colour, as Issues 01 and 02 both do -
     a hollow dashed outline reads as unfinished next to them */
  background:var(--cloud-tint);border:1.3px dashed var(--rule-firm);
  border-radius:5px;padding:4px 11px;
}

/* --- constellation decoration --------------------------------------------
   Small stars joined by thin dotted lines. Purely decorative, so it is
   aria-hidden in the markup and never carries meaning. */
.constellation{display:block;width:100%;height:auto;color:var(--cloud);opacity:.85;}
/* without the width above, the SVG renders at its intrinsic 860px and
   pushes the whole page into horizontal scroll on a phone */
.constellation .c-line{stroke:currentColor;stroke-width:1.1;stroke-dasharray:2 4;stroke-linecap:round;fill:none;}
.constellation .c-dot{fill:var(--navy);opacity:.55;}
.constellation .c-dot.big{fill:var(--gold);opacity:.95;}
.constel-strip{margin:-6px 0 26px;}

/* --- sticker sheet legend ------------------------------------------------- */
.kit-strip{
  background:var(--card);background-image:var(--dots);
  border:1.5px solid var(--rule-firm);border-radius:var(--r);
  padding:14px 18px;margin:0 0 28px;
  position:relative;
}
.kit-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.kit-lbl{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--navy);
  background:var(--cloud-tint);border:1.3px solid var(--cloud);
  border-radius:999px;padding:4px 12px;white-space:nowrap;margin-top:3px;
}
.stickers{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;flex:1;}
.sticker{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-soft);}
.sticker svg{width:26px;height:26px;flex:none;filter:drop-shadow(0 1px 1px var(--shadow));}

/* --- contents ------------------------------------------------------------- */
.toc{
  background-color:var(--card);background-image:var(--stardust);
  border:1.5px solid var(--rule-firm);
  border-radius:var(--r);padding:20px 26px 22px;margin:0 0 34px;
}
.toc h2{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--paper);background:var(--navy);
  display:inline-block;padding:5px 14px;border-radius:5px;margin:0 0 14px;
  box-shadow:2px 2px 0 var(--cloud);
}
.toc ol{margin:0;padding-left:22px;}
.toc li{margin:5px 0;font-size:15.5px;}

/* --- sections ------------------------------------------------------------- */
.part-marker{text-align:center;margin:44px 0 18px;}
.part{
  background:var(--card);
  border:1.5px solid var(--rule-firm);
  border-radius:var(--r);
  padding:28px 30px 26px;
  margin:0 0 34px;
  position:relative;
}
.part-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px;}
.part-titles{flex:1;min-width:0;}

/* the postage-stamp section badge - same shape as Issues 01 and 02, new
   icon set. The perforated edge is a repeating radial gradient, which is
   what makes it read as a stamp rather than as a box. */
.part-num{
  flex:none;width:66px;min-height:72px;margin:0;padding:9px 4px 6px;text-align:center;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 72' preserveAspectRatio='none'><path d='M3.00 3.00 L7.50 3.00 A3.00 3.00 0 0 1 13.50 3.00 L22.50 3.00 A3.00 3.00 0 0 1 28.50 3.00 L37.50 3.00 A3.00 3.00 0 0 1 43.50 3.00 L52.50 3.00 A3.00 3.00 0 0 1 58.50 3.00 L63.00 3.00 L63.00 8.25 A3.00 3.00 0 0 1 63.00 14.25 L63.00 24.75 A3.00 3.00 0 0 1 63.00 30.75 L63.00 41.25 A3.00 3.00 0 0 1 63.00 47.25 L63.00 57.75 A3.00 3.00 0 0 1 63.00 63.75 L63.00 69.00 L58.50 69.00 A3.00 3.00 0 0 1 52.50 69.00 L43.50 69.00 A3.00 3.00 0 0 1 37.50 69.00 L28.50 69.00 A3.00 3.00 0 0 1 22.50 69.00 L13.50 69.00 A3.00 3.00 0 0 1 7.50 69.00 L3.00 69.00 L3.00 63.75 A3.00 3.00 0 0 1 3.00 57.75 L3.00 47.25 A3.00 3.00 0 0 1 3.00 41.25 L3.00 30.75 A3.00 3.00 0 0 1 3.00 24.75 L3.00 14.25 A3.00 3.00 0 0 1 3.00 8.25 L3.00 3.00 Z' fill='%23F6F3ED' stroke='%23A9B4CC' stroke-width='1.3'/></svg>");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.part-num svg{width:24px;height:24px;display:block;margin:0 auto 1px;}
.part-num .no{
  display:block;font-family:var(--display);font-weight:600;font-size:17px;
  line-height:1.05;color:var(--navy);
}
.part-num .denom{
  display:block;font-family:var(--display);font-weight:400;font-size:8.5px;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-faint);
}

.part h2{
  font-family:var(--display);font-weight:600;font-size:clamp(21px,3.1vw,27px);
  line-height:1.2;color:var(--navy);margin:2px 0 0;
}
.part h3{
  font-family:var(--display);font-weight:600;font-size:18px;
  color:var(--navy);margin:30px 0 8px;
}
.part h4{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  letter-spacing:.4px;color:var(--ink-soft);margin:22px 0 8px;
}
.lede{
  font-family:var(--hand);font-size:22px;line-height:1.45;
  color:var(--ink-soft);margin:4px 0 18px;
}
.part p{margin:0 0 15px;}
.part ul,.part ol{margin:0 0 15px;padding-left:24px;}
.part li{margin:6px 0;}
em{color:var(--ink-soft);}
strong{color:var(--navy);}

/* peel-off stickers, tucked at section corners */
.peel{position:absolute;display:block;pointer-events:none;z-index:2;}
.peel svg{width:100%;height:100%;filter:drop-shadow(0 2px 3px var(--shadow));}

/* --- the cloud divider ---------------------------------------------------- */
.cloud-rule{
  height:30px;margin:34px 0;border:0;
  background-image:var(--cloud-rule);
  background-repeat:repeat-x;background-position:center bottom;
}
.cloud-rule.flip{transform:scaleY(-1);}

/* --- code ---------------------------------------------------------------
   Courier Prime on the pale card, exactly as in Issues 01 and 02. The navy
   and cloud accents around it are deliberately kept OFF the text itself:
   nothing tinted sits behind a character you have to read. */
code{
  font-family:var(--code);font-size:.9em;
  background:var(--cloud-tint);border:1px solid var(--rule);
  border-radius:4px;padding:1px 5px;color:var(--ink);
}
.code{
  background:var(--paper);border:1.5px solid var(--rule-firm);
  border-radius:6px;margin:0 0 18px;overflow:hidden;
}
.code-label{
  display:flex;justify-content:space-between;gap:6px 12px;
  flex-wrap:wrap;overflow-wrap:anywhere;   /* long paths clipped on a phone */
  font-family:var(--display);font-weight:500;font-size:10.5px;
  letter-spacing:1.6px;text-transform:uppercase;
  background:var(--navy);color:var(--paper);padding:6px 13px;
}
.code-label .rhs{color:var(--cloud);font-weight:400;}
/* ---------- the journey diagram, made clickable ---------------------------
   Progressive enhancement: .hops-live is added by the page script and the
   panel carries `hidden` in the markup, so with no JavaScript the diagram is
   the same static picture it always was - no dead affordances.
   ------------------------------------------------------------------------ */
.hop-ring{fill:none;stroke:var(--gold);stroke-width:2.6;opacity:0;}
.hops-live .hop{cursor:pointer;}
.hops-live .hop rect:not(.hop-ring){transition:filter .12s ease;}
.hops-live .hop:hover rect:not(.hop-ring){filter:brightness(.97);}
.hops-live .hop.is-on .hop-ring{opacity:1;}
.hops-live .hop:focus-visible{outline:none;}
.hops-live .hop:focus-visible .hop-ring{opacity:1;stroke:var(--navy);stroke-dasharray:4 3;}

.hop-quiz{margin:14px 2px 4px;}
.hop-hint{font-family:var(--hand);font-size:18px;color:var(--ink-faint);}
.hop-card{
  background:var(--card);border:1.5px solid var(--rule-firm);
  border-left:5px solid var(--gold);border-radius:6px;
  padding:13px 17px 8px;box-shadow:3px 3px 0 var(--navy-tint);
}
.hop-card h4{
  display:inline;margin:0;font-family:var(--display);font-weight:600;
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--navy);
}
.hop-owner{
  display:inline-block;margin-left:9px;vertical-align:2px;
  font-family:var(--display);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 9px 2px;border-radius:999px;
  border:1.3px solid var(--cloud);background:var(--cloud-tint);color:var(--ink-soft);
}
.hop-owner.mine{border-color:var(--gold);background:var(--gold-tint);color:#8E6819;}
.hop-rows{margin:11px 0 0;}
.hop-rows > div{display:flex;gap:12px;margin:0 0 9px;align-items:flex-start;}
.hop-rows dt{
  flex:none;width:78px;font-family:var(--display);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  padding-top:3px;
}
.hop-rows dd{margin:0;flex:1 1 auto;min-width:0;font-size:14.6px;line-height:1.6;}
.hop-rows code{font-size:.9em;word-break:break-word;}
@media (max-width:640px){
  .hop-rows > div{flex-direction:column;gap:2px;}
  .hop-rows dt{width:auto;}
}

/* ---------- 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;
  /* This button sits on .code-label, which on THIS issue is a dark navy bar -
     the shared copy-button styling assumed a light label and rendered navy on
     navy, i.e. invisible, on all nine code blocks. Inverted to sit on the
     dark: paper text, paper rule, a translucent paper fill. */
  border:1.3px solid var(--paper);background:rgba(246,243,237,.16);color:var(--paper);
  transition:background .12s ease,color .12s ease;
}
.copy-btn:hover{background:var(--paper);color:var(--navy);}
.copy-btn:focus-visible{outline:2px solid var(--paper);outline-offset:2px;}
.copy-btn.done{background:var(--gold);color:var(--navy);border-color:var(--gold);}
.copy-btn.failed{opacity:.75;}
@media (prefers-reduced-motion:reduce){.copy-btn{transition:none;}}

.code pre{
  margin:0;padding:14px 15px;overflow-x:auto;
  font-family:var(--code);font-size:13.5px;line-height:1.62;color:var(--ink);
}
.code pre .d{color:var(--ink-faint);user-select:none;}   /* the $ prompt   */
.code pre .c{color:var(--ink-faint);font-family:var(--hand);font-size:16px;}
.code pre .k{color:var(--navy);font-weight:700;}
.code pre .s{color:#5B6B4A;}
.code.term pre{background:var(--paper);}

/* --- callouts ------------------------------------------------------------- */
.callout{
  border:1.5px solid var(--cloud);border-radius:var(--r);
  background-color:var(--cloud-tint);
  background-image:var(--stardust);
  padding:16px 18px 14px;margin:0 0 20px;
}
.callout .tag{
  display:inline-block;font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:2px;text-transform:uppercase;color:var(--paper);background:var(--navy);
  border-radius:4px;padding:3px 10px;margin-bottom:8px;
}
.callout p{margin:0 0 8px;}
.callout p:last-child{margin-bottom:0;}
.callout.warn{border-color:var(--gold);background-color:var(--gold-tint);}
.callout.warn .tag{background:#8E6819;}

/* THE STARGAZING NOTE - this issue's reskin of the typed-letter callout.
   The only place the dense starfield is allowed, and the only place the
   ground goes dark. Contained, deliberate, and never behind long prose. */
.stargaze{
  position:relative;border-radius:var(--r);margin:0 0 22px;
  background-color:var(--navy);
  background-image:var(--starfield-dense);
  background-size:190px 118px;
  color:#E8EAF2;padding:18px 20px 16px;
  border:1.5px solid var(--navy);
  box-shadow:0 3px 0 var(--navy-tint-2);
}
.stargaze .tag{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:600;font-size:10.5px;
  letter-spacing:2px;text-transform:uppercase;color:var(--navy);
  background:var(--gold);border-radius:4px;padding:3px 10px;margin-bottom:9px;
}
.stargaze .tag svg{width:14px;height:14px;}
.stargaze p{margin:0 0 9px;color:#E8EAF2;}
.stargaze p:last-child{margin-bottom:0;}
.stargaze strong{color:var(--gold);}
.stargaze em{color:var(--lav);}
.stargaze code{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22);color:#F2F3F8;}
.stargaze a{color:var(--gold);}

/* --- figures -------------------------------------------------------------- */
figure{margin:0 0 22px;}
figure svg{width:100%;height:auto;display:block;
  background:var(--paper);border:1.5px solid var(--rule);border-radius:6px;}
figcaption{
  font-family:var(--hand);font-size:18px;line-height:1.4;
  color:var(--ink-soft);margin-top:8px;text-align:center;
}

/* --- tables --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top;}
th{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--navy);background:var(--cloud-tint);
  border-bottom:1.5px solid var(--rule-firm);
}
tbody tr:last-child td{border-bottom:0;}
td code{font-size:.86em;}

/* --- THE PROBE CONSOLE (new in Issue 03) ---------------------------------
   A fixed menu of read-only commands. Styled as a little observatory panel:
   navy ground, gold action, monospace output. Deliberately looks different
   from the surrounding paper, because "this runs something real" should not
   look like body text. */
.console{
  border:1.5px solid var(--navy);border-radius:var(--r);
  background:var(--card);margin:0 0 22px;overflow:hidden;
}
.console-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--navy);color:var(--paper);padding:9px 15px;flex-wrap:wrap;
}
.console-head h4{
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:1.2px;
  color:var(--paper);margin:0;
}
.console-head .status{
  font-family:var(--code);font-size:11px;letter-spacing:.6px;
  border-radius:999px;padding:2px 10px;
  background:rgba(255,255,255,.14);color:var(--cloud);
}
.console-head .status.live{background:var(--gold);color:var(--navy);font-weight:700;}
.console-head .status.down{background:#8B4A46;color:#FFE9E6;}

.probe-menu{
  display:flex;flex-wrap:wrap;gap:8px;padding:14px 15px 12px;
  background:var(--paper);border-bottom:1.5px solid var(--rule);
}
.probe-btn{
  font-family:var(--display);font-weight:500;font-size:13px;
  color:var(--navy);background:var(--card);
  border:1.5px solid var(--rule-firm);border-radius:999px;
  padding:6px 15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .14s,border-color .14s,transform .08s;
}
.probe-btn svg{width:16px;height:16px;}
.probe-btn:hover:not(:disabled){background:var(--gold-tint);border-color:var(--gold);}
.probe-btn:active:not(:disabled){transform:translateY(1px);}
.probe-btn[aria-pressed="true"]{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.probe-btn:disabled{opacity:.5;cursor:not-allowed;}

.probe-out{padding:0;margin:0;}
/* `hidden` is display:none from the UA sheet and the rule below beats it, so
   without this guard the strip rendered with JavaScript off as an empty
   tinted bar above "Pick a probe above." Same root cause as the s'mores
   controls in issue-05.css. */
.probe-cmd[hidden]{display:none;}
.probe-cmd{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--code);font-size:12px;color:var(--ink-soft);
  background:var(--cloud-tint);padding:8px 15px;
  border-bottom:1px solid var(--rule);
}
.probe-cmd .ms{color:var(--ink-faint);white-space:nowrap;}
.probe-out pre{
  margin:0;padding:14px 15px;overflow-x:auto;min-height:74px;
  font-family:var(--code);font-size:13px;line-height:1.6;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;
}
.probe-out pre.dim{color:var(--ink-faint);font-style:italic;}
.probe-foot{
  font-size:13px;color:var(--ink-soft);padding:10px 15px 12px;
  border-top:1px solid var(--rule);background:var(--paper);
}
.probe-foot b{font-family:var(--display);color:var(--navy);}

/* --- recap card ----------------------------------------------------------
   Same structure as Issues 01 and 02 so reference.js drives it unchanged.
   The rating pips are moon phases here rather than stars, because in this
   issue's sticker legend a star already means "worth noting" and one symbol
   should not carry two jobs on the same page. */
.recap{
  background:var(--paper);
  border:1.5px solid var(--rule-firm);border-radius:var(--r);
  padding:16px 20px 12px;margin:26px 0 0;position:relative;
}
.recap.scallop{
  border-bottom:0;border-radius:var(--r) var(--r) 0 0;
  padding-bottom:20px;
}
.recap.scallop::after{
  content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:-12px;height:13px;
  background:var(--scallop-down) repeat-x;
}
.recap-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1.5px dashed var(--rule-firm);padding-bottom:7px;margin-bottom:10px;
}
.recap-head h4{
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--navy);margin:0;
}
.card-no{font-family:var(--code);font-size:11px;color:var(--ink-faint);}
.recap dl{margin:0;}
.recap .row{display:flex;gap:10px;margin:0 0 7px;font-size:14.5px;}
.recap .row.wide{display:block;}
.recap dt{
  font-family:var(--display);font-weight:500;font-size:12.5px;
  color:var(--ink-faint);flex:none;min-width:78px;padding-top:2px;
}
.recap dd{margin:0;flex:1;color:var(--ink-soft);}
.recap .row.wide dt{margin-bottom:4px;}
.recap .write{
  font-family:var(--hand);font-size:20px;line-height:1.5;color:var(--navy);
  min-height:34px;border-bottom:1.6px solid var(--rule-firm);
  padding:2px 4px;outline:none;
}
.recap .write:empty::before{
  content:attr(data-hint);color:var(--ink-faint);opacity:.7;
}
.recap .write:focus{border-bottom-color:var(--gold);background:var(--gold-tint);}
.recap-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:11px;padding-top:8px;border-top:1px dotted var(--rule-firm);
}
.rating{display:flex;align-items:center;gap:5px;}
.rating .lbl{
  font-family:var(--display);font-weight:500;font-size:12px;
  color:var(--ink-faint);margin-right:3px;
}
/* the moon-phase pips. Off = a faint outlined moon; on = lit gold. */
.pip{
  background:none;border:0;padding:2px;cursor:pointer;line-height:0;
  border-radius:50%;transition:transform .1s;
}
.pip svg{width:21px;height:21px;display:block;color:var(--rule-firm);}
.pip:hover{transform:scale(1.14);}
.pip.on svg{color:var(--gold);filter:drop-shadow(0 0 4px rgba(227,176,78,.55));}
.saved{
  font-family:var(--hand);font-size:16px;color:var(--gold);
  opacity:0;transition:opacity .25s;
}
.saved.on{opacity:1;}

/* --- footer --------------------------------------------------------------- */
.foot{padding-top:26px;margin-top:20px;border-top:1.5px solid var(--rule);}

/* --- the closing stamps ---------------------------------------------------
   Cross-issue navigation, built in the same postage-stamp language as the
   section badges rather than as a row of underlined links. Each stamp carries
   that issue's own motif, drawn in THIS issue's palette - importing coastal
   teal or apple red would break the night colours. */
.issue-nav{
  display:flex;gap:16px;flex-wrap:wrap;margin:0 0 22px;
}
.issue-card{
  flex:1 1 250px;display:flex;align-items:center;gap:13px;
  min-height:112px;padding:14px 18px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268 112' preserveAspectRatio='none'><path d='M3.40 3.40 L10.05 3.40 A3.40 3.40 0 0 1 16.85 3.40 L30.14 3.40 A3.40 3.40 0 0 1 36.94 3.40 L50.23 3.40 A3.40 3.40 0 0 1 57.03 3.40 L70.32 3.40 A3.40 3.40 0 0 1 77.12 3.40 L90.42 3.40 A3.40 3.40 0 0 1 97.22 3.40 L110.51 3.40 A3.40 3.40 0 0 1 117.31 3.40 L130.60 3.40 A3.40 3.40 0 0 1 137.40 3.40 L150.69 3.40 A3.40 3.40 0 0 1 157.49 3.40 L170.78 3.40 A3.40 3.40 0 0 1 177.58 3.40 L190.88 3.40 A3.40 3.40 0 0 1 197.68 3.40 L210.97 3.40 A3.40 3.40 0 0 1 217.77 3.40 L231.06 3.40 A3.40 3.40 0 0 1 237.86 3.40 L251.15 3.40 A3.40 3.40 0 0 1 257.95 3.40 L264.60 3.40 L264.60 10.52 A3.40 3.40 0 0 1 264.60 17.32 L264.60 31.56 A3.40 3.40 0 0 1 264.60 38.36 L264.60 52.60 A3.40 3.40 0 0 1 264.60 59.40 L264.60 73.64 A3.40 3.40 0 0 1 264.60 80.44 L264.60 94.68 A3.40 3.40 0 0 1 264.60 101.48 L264.60 108.60 L257.95 108.60 A3.40 3.40 0 0 1 251.15 108.60 L237.86 108.60 A3.40 3.40 0 0 1 231.06 108.60 L217.77 108.60 A3.40 3.40 0 0 1 210.97 108.60 L197.68 108.60 A3.40 3.40 0 0 1 190.88 108.60 L177.58 108.60 A3.40 3.40 0 0 1 170.78 108.60 L157.49 108.60 A3.40 3.40 0 0 1 150.69 108.60 L137.40 108.60 A3.40 3.40 0 0 1 130.60 108.60 L117.31 108.60 A3.40 3.40 0 0 1 110.51 108.60 L97.22 108.60 A3.40 3.40 0 0 1 90.42 108.60 L77.12 108.60 A3.40 3.40 0 0 1 70.32 108.60 L57.03 108.60 A3.40 3.40 0 0 1 50.23 108.60 L36.94 108.60 A3.40 3.40 0 0 1 30.14 108.60 L16.85 108.60 A3.40 3.40 0 0 1 10.05 108.60 L3.40 108.60 L3.40 101.48 A3.40 3.40 0 0 1 3.40 94.68 L3.40 80.44 A3.40 3.40 0 0 1 3.40 73.64 L3.40 59.40 A3.40 3.40 0 0 1 3.40 52.60 L3.40 38.36 A3.40 3.40 0 0 1 3.40 31.56 L3.40 17.32 A3.40 3.40 0 0 1 3.40 10.52 L3.40 3.40 Z' fill='%23FCFAF5' stroke='%23A9B4CC' stroke-width='1.4'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;
  text-decoration:none;color:var(--ink);
  transition:transform .12s,filter .12s;
}
.issue-card:hover{transform:translateY(-2px);filter:drop-shadow(0 3px 5px var(--shadow));}
.issue-card .ic-icon{
  flex:none;width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;background:var(--cloud-tint);
  box-shadow:0 0 0 1.4px var(--cloud);
}
.issue-card .ic-icon svg{width:28px;height:28px;}
.issue-card .ic-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.issue-card .ic-kicker{
  font-family:var(--display);font-weight:600;font-size:9.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-faint);
}
.issue-card .ic-title{
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.25;
  color:var(--navy);
}
.issue-card .ic-note{font-family:var(--hand);font-size:16px;color:var(--ink-soft);}
.issue-card:hover .ic-title{color:var(--ink);}

/* the postmark line under the stamps */
.foot-line{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0;
  font-family:var(--code);font-size:12.5px;color:var(--ink-faint);
}
.foot-line .mark{width:24px;height:24px;flex:none;}

/* --- narrow --------------------------------------------------------------- */
@media (max-width:620px){
  body.issue-03{font-size:16px;}
  .wrap{padding:0 15px 60px;}
  .masthead,.part{padding-left:18px;padding-right:18px;}
  .part-head{gap:12px;}
  .part-num{width:56px;}
  .issue-card{min-height:100px;}
  .peel{display:none;}          /* corner stickers crowd a narrow column */
  .recap .row{display:block;}
  .probe-menu{gap:6px;}
  .probe-btn{font-size:12px;padding:5px 12px;}
}