/* ===========================================================================
   /learn/ Issue 06 - "First Order"  ·  the BRUNCH POST
   ---------------------------------------------------------------------------
   Standalone by series rule: this file is linked by firstorder.html and by
   nothing else, and it must never be merged with another issue's stylesheet.
   Issues 01-05 share 47 component class names with this one and style every
   single one of them separately. Behaviour is shared (reference.js); styling
   is not.

   This is deliberately NOT the camp post with new tokens. Issue 05 shipped
   once as a clone of Issue 04 with one accent swapped and was rejected on
   sight, correctly: a rare accent appears rarely, so changing it changes
   nothing at a glance. What separates two letters is the SURFACES, the
   DISPLAY FACE, and WHICH COLOUR LEADS. So:

       ground      contour lines  ->  a ditsy floral field
       cloth       ticking stripe ->  gingham, the brunch tablecloth
       divider     strung bunting ->  a floral vine
       display     Alfa Slab One  ->  Quicksand Bold
       lead        plum           ->  lilac
       rating      merit patches  ->  flowers that bloom
       card edge   dashed inset   ->  a scalloped ribbon border-image

   No part lettering anywhere on this page, by instruction: the sections are
   01-04 with nothing attached, and there is no A/B/C arc label in the
   markup, the badges or the banner.
   ======================================================================== */

:root{
  /* --- the six named colours -------------------------------------------- */
  --lilac:#C4B4D9;    /* primary accent - tints, petals, patterns           */
  --blush:#F0C9D0;    /* secondary accent - the cloth, wrappers, scallops   */
  --cream:#F7F2E8;    /* the page ground                                    */
  --coffee:#4A3728;   /* ink - every word                                   */
  --sage:#8A9B72;     /* accent - stems, leaves, the "it worked" colour     */
  --gold:#D4A548;     /* the rare one. Small details ONLY, never structure. */

  /* --- LILAC-DK: the structural lead, and why it has to exist ------------
     Lilac measures 1.73:1 on cream, blush 1.35:1, gold 2.03:1, sage 2.68:1.
     AA wants 4.5:1. So not one of the four accents can legally hold a word
     or sit under cream text, which rules them out of the seal, the ISSUE
     stamp, h1, section titles and every border that has to read.

     This is a DERIVED darkening of her lilac, not a seventh colour: same
     hue family, taken down until it measures 6.42:1 - safe as ink on cream
     AND as a ground under cream. It takes the front-of-page jobs; the named
     lilac keeps the tints, the petals and the patterns, which is where a
     pale lilac actually belongs. Same move Issue 05 made with plum.
     ------------------------------------------------------------------- */
  --lilac-dk:#6A4A85;

  /* --- derived, all mixed from the six. Ratios computed, not eyeballed --- */
  --ink:var(--coffee);          /* 10.07:1 on cream                        */
  --ink-soft:#6A5140;           /*  6.57:1                                 */
  --ink-faint:#7A6150;          /*  5.15:1 - the floor for 8.5-11px labels */
  /* These three are darker than a first pass had them. Text set in an
     accent and then placed on a TINT OF THAT SAME ACCENT loses most of its
     contrast - the fact pills measured 3.46-4.00:1 that way, all failures.
     Each is now solved against its own worst ground (its tint) as well as
     against bare cream, so one token is safe in both places. */
  --sage-dk:#4D5C3B;            /*  6.06:1 - sage as text, incl. on a sage tint */
  --gold-dk:#7E5C14;            /*  5.55:1 - gold as text, incl. on a gold tint */
  --rose-dk:#964557;            /*  5.66:1 - blush as text, incl. on a blush tint */

  --card:#FDFAF4;               /* the paper things sit on, a shade above  */
  --rule:#E6DCCB;
  --rule-firm:#CFC0A8;

  --lilac-tint:rgba(196,180,217,.30);
  --lilac-tint-2:rgba(196,180,217,.52);
  --lilac-dk-tint:rgba(106,74,133,.13);
  --lilac-dk-tint-2:rgba(106,74,133,.24);
  --blush-tint:rgba(240,201,208,.42);
  --blush-tint-2:rgba(240,201,208,.72);
  --sage-tint:rgba(138,155,114,.22);
  --sage-tint-2:rgba(138,155,114,.38);
  --gold-tint:rgba(212,165,72,.26);
  --shadow:rgba(74,55,40,.18);

  /* --- four fonts, four jobs --------------------------------------------
     Three are fixed across the whole series and are not this issue's to
     change. The display face is the one that IS this issue's own: Quicksand
     Bold, soft and rounded, cafe-menu rather than signage - unmistakably
     not Lilita One, Alfa Slab One, Fredoka, Baloo 2 or Permanent Marker.

     Issues 04-05 carry a separate blackletter face for the masthead line.
     Issues 02-03 set that line in their own display face, uppercase and
     tracked out, and that is the precedent followed here - so this page
     adds exactly one webfont, not two.
     ------------------------------------------------------------------- */
  --hand:"Caveat","Bradley Hand",cursive;                      /* unchanged */
  --body:"Lora",Georgia,"Times New Roman",serif;               /* unchanged */
  --code:"Courier Prime","Courier New",monospace;              /* unchanged */
  --display:"Quicksand","Trebuchet MS",system-ui,sans-serif;   /* THIS issue */

  /* The second display face, and it has ONE job: the big titles, meaning the
     h1 and the four section headings. Nothing else - not the masthead line,
     not a pill, badge, card head or the seal lettering, all of which stay
     Quicksand. Two faces on one letter is within precedent (Issue 04 runs
     three) but only because each is fenced to a single job; letting one
     spread is what makes a page look assembled rather than designed.

     Amatic SC is condensed with a small x-height, so it reads far smaller
     than Quicksand at the same px - the title sizes below are ~1.5x what
     they were, which is what it takes to hold the same presence. */
  --title:"Amatic SC","Trebuchet MS",system-ui,sans-serif;

  --r:9px;

  /* --- the patterns, said once ----------------------------------------- */

  /* GINGHAM - the cloth behind every callout and card head. Two crossed
     sets of a PALE blush at .17, which compounds to about .34 of a pale
     pink where they overlap. The check-pattern trap is matching on the
     alpha rather than on the result: Issue 02's gingham is .30 of a pale
     pink and lands light, Issue 04's plaid is .16 of a DARK forest and
     compounds to something far heavier. This is pitched on the pale side
     on purpose, because it has to sit behind running prose. */
  --gingham:
    repeating-linear-gradient(90deg,rgba(240,201,208,.17) 0 11px,transparent 11px 22px),
    repeating-linear-gradient(0deg,rgba(240,201,208,.17) 0 11px,transparent 11px 22px);

  /* the same cloth in lilac, for the surfaces that need to read cooler */
  --gingham-lilac:
    repeating-linear-gradient(90deg,rgba(196,180,217,.20) 0 11px,transparent 11px 22px),
    repeating-linear-gradient(0deg,rgba(196,180,217,.20) 0 11px,transparent 11px 22px);

  /* RULED PAPER - the recipe-card callout, and nothing else */
  --ruled:repeating-linear-gradient(0deg,transparent 0 25px,rgba(196,180,217,.42) 25px 26px);

  /* the sticker sheet's dotted backing */
  --dots:radial-gradient(circle 2.4px at 8px 8px,rgba(196,180,217,.46) 2.4px,transparent 3px);

  /* THE GROUND: a ditsy floral. 19 flowers, 18 loose petals, 16 sage leaves
     and 26 pollen dots per 120px tile, seeded so it never reshuffles.
     Density is pitched against the house benchmark - Issue 02's 30px stripe
     ground at .20 over half the surface - because Issue 03 shipped a ground
     of five 1px dots per tile and was correctly rejected as too plain. This
     was then eased back about a fifth from a first, denser pass: running
     prose sits directly on it in this series, so it has to hold the page
     without fighting a paragraph. */
  --floral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23C4B4D9' fill-opacity='0.26'%3E%3Ccircle cx='66.6' cy='12' r='2.7'/%3E%3Ccircle cx='63.7' cy='14.9' r='2.7'/%3E%3Ccircle cx='60.1' cy='13' r='2.7'/%3E%3Ccircle cx='60.7' cy='9' r='2.7'/%3E%3Ccircle cx='64.7' cy='8.4' r='2.7'/%3E%3Ccircle cx='111.4' cy='110.7' r='3.6'/%3E%3Ccircle cx='106.3' cy='112.3' r='3.6'/%3E%3Ccircle cx='103.1' cy='107.9' r='3.6'/%3E%3Ccircle cx='106.3' cy='103.6' r='3.6'/%3E%3Ccircle cx='111.4' cy='105.2' r='3.6'/%3E%3Ccircle cx='7.6' cy='34.9' r='3.3'/%3E%3Ccircle cx='4.5' cy='38.8' r='3.3'/%3E%3Ccircle cx='-0.2' cy='37.1' r='3.3'/%3E%3Ccircle cx='0' cy='32.1' r='3.3'/%3E%3Ccircle cx='4.8' cy='30.8' r='3.3'/%3E%3Ccircle cx='127.6' cy='34.9' r='3.3'/%3E%3Ccircle cx='124.5' cy='38.8' r='3.3'/%3E%3Ccircle cx='119.8' cy='37.1' r='3.3'/%3E%3Ccircle cx='120' cy='32.1' r='3.3'/%3E%3Ccircle cx='124.8' cy='30.8' r='3.3'/%3E%3Ccircle cx='95' cy='5' r='3.4'/%3E%3Ccircle cx='89.8' cy='5.1' r='3.4'/%3E%3Ccircle cx='88.1' cy='0.2' r='3.4'/%3E%3Ccircle cx='92.3' cy='-2.9' r='3.4'/%3E%3Ccircle cx='96.5' cy='0.1' r='3.4'/%3E%3Ccircle cx='95' cy='125' r='3.4'/%3E%3Ccircle cx='89.8' cy='125.1' r='3.4'/%3E%3Ccircle cx='88.1' cy='120.2' r='3.4'/%3E%3Ccircle cx='92.3' cy='117.1' r='3.4'/%3E%3Ccircle cx='96.5' cy='120.1' r='3.4'/%3E%3Cellipse rx='2.8' ry='3.6' transform='translate(99.9 97.2)rotate(104)'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.36'%3E%3Ccircle cx='63.2' cy='11.5' r='1.8'/%3E%3Ccircle cx='107.7' cy='107.9' r='2.4'/%3E%3Ccircle cx='3.4' cy='34.8' r='2.2'/%3E%3Ccircle cx='123.4' cy='34.8' r='2.2'/%3E%3Ccircle cx='92.3' cy='1.5' r='2.3'/%3E%3Ccircle cx='92.3' cy='121.5' r='2.3'/%3E%3C/g%3E%3Cg fill='%23F0C9D0' fill-opacity='0.31'%3E%3Ccircle cx='120.8' cy='49.2' r='3.3'/%3E%3Ccircle cx='115.9' cy='49.9' r='3.3'/%3E%3Ccircle cx='113.7' cy='45.4' r='3.3'/%3E%3Ccircle cx='117.3' cy='41.9' r='3.3'/%3E%3Ccircle cx='121.7' cy='44.3' r='3.3'/%3E%3Ccircle cx='0.8' cy='49.2' r='3.3'/%3E%3Ccircle cx='-4.1' cy='49.9' r='3.3'/%3E%3Ccircle cx='-6.3' cy='45.4' r='3.3'/%3E%3Ccircle cx='-2.7' cy='41.9' r='3.3'/%3E%3Ccircle cx='1.7' cy='44.3' r='3.3'/%3E%3Ccircle cx='28.3' cy='4.1' r='3.3'/%3E%3Ccircle cx='23.3' cy='4.3' r='3.3'/%3E%3Ccircle cx='21.6' cy='-0.3' r='3.3'/%3E%3Ccircle cx='25.5' cy='-3.5' r='3.3'/%3E%3Ccircle cx='29.6' cy='-0.7' r='3.3'/%3E%3Ccircle cx='28.3' cy='124.1' r='3.3'/%3E%3Ccircle cx='23.3' cy='124.3' r='3.3'/%3E%3Ccircle cx='21.6' cy='119.7' r='3.3'/%3E%3Ccircle cx='25.5' cy='116.5' r='3.3'/%3E%3Ccircle cx='29.6' cy='119.3' r='3.3'/%3E%3Ccircle cx='42.8' cy='100.4' r='3.7'/%3E%3Ccircle cx='38.4' cy='103.7' r='3.7'/%3E%3Ccircle cx='33.9' cy='100.5' r='3.7'/%3E%3Ccircle cx='35.5' cy='95.2' r='3.7'/%3E%3Ccircle cx='41.1' cy='95.1' r='3.7'/%3E%3Ccircle cx='24.2' cy='111.9' r='2.9'/%3E%3Ccircle cx='20.1' cy='113.5' r='2.9'/%3E%3Ccircle cx='17.3' cy='110' r='2.9'/%3E%3Ccircle cx='19.8' cy='106.3' r='2.9'/%3E%3Ccircle cx='24' cy='107.5' r='2.9'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.41'%3E%3Ccircle cx='117.9' cy='46.1' r='2.2'/%3E%3Ccircle cx='-2.1' cy='46.1' r='2.2'/%3E%3Ccircle cx='25.7' cy='0.8' r='2.2'/%3E%3Ccircle cx='25.7' cy='120.8' r='2.2'/%3E%3Ccircle cx='38.3' cy='99' r='2.4'/%3E%3Ccircle cx='21.1' cy='109.9' r='2'/%3E%3C/g%3E%3Cg fill='%23C4B4D9' fill-opacity='0.24'%3E%3Ccircle cx='33.8' cy='61.4' r='3.4'/%3E%3Ccircle cx='28.6' cy='60.8' r='3.4'/%3E%3Ccircle cx='27.6' cy='55.7' r='3.4'/%3E%3Ccircle cx='32.2' cy='53.2' r='3.4'/%3E%3Ccircle cx='36' cy='56.7' r='3.4'/%3E%3Ccircle cx='118.9' cy='92.6' r='3.5'/%3E%3Ccircle cx='113.6' cy='93.2' r='3.5'/%3E%3Ccircle cx='111.5' cy='88.3' r='3.5'/%3E%3Ccircle cx='115.5' cy='84.8' r='3.5'/%3E%3Ccircle cx='120' cy='87.5' r='3.5'/%3E%3Ccircle cx='-1.1' cy='92.6' r='3.5'/%3E%3Ccircle cx='-6.4' cy='93.2' r='3.5'/%3E%3Ccircle cx='-8.5' cy='88.3' r='3.5'/%3E%3Ccircle cx='-4.5' cy='84.8' r='3.5'/%3E%3Ccircle cx='0' cy='87.5' r='3.5'/%3E%3Ccircle cx='67.4' cy='79.8' r='3.5'/%3E%3Ccircle cx='62.3' cy='80.9' r='3.5'/%3E%3Ccircle cx='59.6' cy='76.4' r='3.5'/%3E%3Ccircle cx='63.1' cy='72.4' r='3.5'/%3E%3Ccircle cx='68' cy='74.5' r='3.5'/%3E%3Ccircle cx='36.9' cy='31.2' r='3.1'/%3E%3Ccircle cx='33' cy='33.7' r='3.1'/%3E%3Ccircle cx='29.5' cy='30.7' r='3.1'/%3E%3Ccircle cx='31.2' cy='26.4' r='3.1'/%3E%3Ccircle cx='35.8' cy='26.7' r='3.1'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.34'%3E%3Ccircle cx='31.6' cy='57.6' r='2.3'/%3E%3Ccircle cx='115.9' cy='89.3' r='2.3'/%3E%3Ccircle cx='-4.1' cy='89.3' r='2.3'/%3E%3Ccircle cx='64.1' cy='76.8' r='2.3'/%3E%3Ccircle cx='33.3' cy='29.8' r='2'/%3E%3C/g%3E%3Cg fill='%23F0C9D0' fill-opacity='0.29'%3E%3Ccircle cx='10.8' cy='10.1' r='2.7'/%3E%3Ccircle cx='7.5' cy='12.6' r='2.7'/%3E%3Ccircle cx='4.1' cy='10.4' r='2.7'/%3E%3Ccircle cx='5.2' cy='6.4' r='2.7'/%3E%3Ccircle cx='9.3' cy='6.2' r='2.7'/%3E%3Ccircle cx='95.1' cy='69.6' r='3.7'/%3E%3Ccircle cx='90.4' cy='72.7' r='3.7'/%3E%3Ccircle cx='86.1' cy='69.2' r='3.7'/%3E%3Ccircle cx='88.1' cy='64' r='3.7'/%3E%3Ccircle cx='93.6' cy='64.3' r='3.7'/%3E%3Ccircle cx='85.5' cy='98.5' r='3.2'/%3E%3Ccircle cx='80.7' cy='99.8' r='3.2'/%3E%3Ccircle cx='78.1' cy='95.6' r='3.2'/%3E%3Ccircle cx='81.2' cy='91.8' r='3.2'/%3E%3Ccircle cx='85.7' cy='93.6' r='3.2'/%3E%3Ccircle cx='56.7' cy='39.1' r='3.3'/%3E%3Ccircle cx='51.7' cy='39.2' r='3.3'/%3E%3Ccircle cx='50.2' cy='34.5' r='3.3'/%3E%3Ccircle cx='54.2' cy='31.5' r='3.3'/%3E%3Ccircle cx='58.2' cy='34.4' r='3.3'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.39'%3E%3Ccircle cx='7.4' cy='9.1' r='1.8'/%3E%3Ccircle cx='90.7' cy='68' r='2.4'/%3E%3Ccircle cx='82.2' cy='95.9' r='2.2'/%3E%3Ccircle cx='54.2' cy='35.7' r='2.2'/%3E%3C/g%3E%3Cg fill='%23C4B4D9' fill-opacity='0.28'%3E%3Ccircle cx='59.2' cy='115.9' r='3.6'/%3E%3Ccircle cx='53.7' cy='116.2' r='3.6'/%3E%3Ccircle cx='51.7' cy='111.1' r='3.6'/%3E%3Ccircle cx='55.9' cy='107.6' r='3.6'/%3E%3Ccircle cx='60.5' cy='110.5' r='3.6'/%3E%3Ccircle cx='59.2' cy='-4.1' r='3.6'/%3E%3Ccircle cx='53.7' cy='-3.8' r='3.6'/%3E%3Ccircle cx='51.7' cy='-8.9' r='3.6'/%3E%3Ccircle cx='55.9' cy='-12.4' r='3.6'/%3E%3Ccircle cx='60.5' cy='-9.5' r='3.6'/%3E%3Ccircle cx='98' cy='29.6' r='3.3'/%3E%3Ccircle cx='94.8' cy='33.3' r='3.3'/%3E%3Ccircle cx='90.3' cy='31.5' r='3.3'/%3E%3Ccircle cx='90.6' cy='26.6' r='3.3'/%3E%3Ccircle cx='95.4' cy='25.4' r='3.3'/%3E%3Ccircle cx='5' cy='75.9' r='3.5'/%3E%3Ccircle cx='-0.1' cy='77.2' r='3.5'/%3E%3Ccircle cx='-2.9' cy='72.7' r='3.5'/%3E%3Ccircle cx='0.5' cy='68.6' r='3.5'/%3E%3Ccircle cx='5.4' cy='70.6' r='3.5'/%3E%3Ccircle cx='125' cy='75.9' r='3.5'/%3E%3Ccircle cx='119.9' cy='77.2' r='3.5'/%3E%3Ccircle cx='117.1' cy='72.7' r='3.5'/%3E%3Ccircle cx='120.5' cy='68.6' r='3.5'/%3E%3Ccircle cx='125.4' cy='70.6' r='3.5'/%3E%3Cellipse rx='2.4' ry='4' transform='translate(106.5 36.8)rotate(138)'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.38'%3E%3Ccircle cx='56.2' cy='112.3' r='2.4'/%3E%3Ccircle cx='56.2' cy='-7.7' r='2.4'/%3E%3Ccircle cx='93.8' cy='29.3' r='2.2'/%3E%3Ccircle cx='1.6' cy='73' r='2.4'/%3E%3Ccircle cx='121.6' cy='73' r='2.4'/%3E%3C/g%3E%3Cg fill='%23F0C9D0' fill-opacity='0.24'%3E%3Cellipse rx='2.7' ry='3.4' transform='translate(57 58.2)rotate(162)'/%3E%3C/g%3E%3Cg fill='%23F0C9D0' fill-opacity='0.27'%3E%3Cellipse rx='2.7' ry='4' transform='translate(71.9 24.3)rotate(71)'/%3E%3C/g%3E%3Cg fill='%238A9B72' fill-opacity='0.22'%3E%3Cpath d='M0 0C3.9 -3 6.8 -1.4 7.1 0C6.8 1.4 3.9 3 0 0Z' transform='translate(71.9 85.6)rotate(123)'/%3E%3C/g%3E%3Cg fill='%238A9B72' fill-opacity='0.19'%3E%3Cpath d='M0 0C3.5 -2.6 6 -1.3 6.3 0C6 1.3 3.5 2.6 0 0Z' transform='translate(79.9 10.9)rotate(276)'/%3E%3C/g%3E%3Cg fill='%238A9B72' fill-opacity='0.24'%3E%3Cpath d='M0 0C3.8 -2.9 6.6 -1.4 7 0C6.6 1.4 3.8 2.9 0 0Z' transform='translate(24.3 71)rotate(235)'/%3E%3Cpath d='M0 0C4.4 -3.4 7.6 -1.6 8 0C7.6 1.6 4.4 3.4 0 0Z' transform='translate(96.2 93.9)rotate(258)'/%3E%3Cpath d='M0 0C3.6 -2.7 6.2 -1.3 6.5 0C6.2 1.3 3.6 2.7 0 0Z' transform='translate(84.5 42)rotate(123)'/%3E%3C/g%3E%3Cg fill='%238A9B72' fill-opacity='0.20'%3E%3Cpath d='M0 0C3.3 -2.5 5.6 -1.2 5.9 0C5.6 1.2 3.3 2.5 0 0Z' transform='translate(116.8 101.1)rotate(215)'/%3E%3Cpath d='M0 0C3.3 -2.5 5.6 -1.2 5.9 0C5.6 1.2 3.3 2.5 0 0Z' transform='translate(-3.2 101.1)rotate(215)'/%3E%3C/g%3E%3Cg fill='%238A9B72' fill-opacity='0.25'%3E%3Cpath d='M0 0C3.5 -2.7 6 -1.3 6.3 0C6 1.3 3.5 2.7 0 0Z' transform='translate(109.9 7.3)rotate(30)'/%3E%3Cpath d='M0 0C3.5 -2.7 6 -1.3 6.3 0C6 1.3 3.5 2.7 0 0Z' transform='translate(109.9 127.3)rotate(30)'/%3E%3C/g%3E%3Cg fill='%238A9B72' fill-opacity='0.23'%3E%3Cpath d='M0 0C4.2 -3.2 7.2 -1.5 7.6 0C7.2 1.5 4.2 3.2 0 0Z' transform='translate(104.8 95.8)rotate(271)'/%3E%3Cpath d='M0 0C3.4 -2.6 5.8 -1.2 6.1 0C5.8 1.2 3.4 2.6 0 0Z' transform='translate(112.8 12)rotate(194)'/%3E%3Cpath d='M0 0C3.4 -2.6 5.8 -1.2 6.1 0C5.8 1.2 3.4 2.6 0 0Z' transform='translate(-7.2 12)rotate(194)'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.31'%3E%3Ccircle cx='23.9' cy='12.6' r='1'/%3E%3Ccircle cx='31.4' cy='20.8' r='1.3'/%3E%3Ccircle cx='63.5' cy='50.4' r='1'/%3E%3Ccircle cx='72.2' cy='42.8' r='1.3'/%3E%3Ccircle cx='63.3' cy='61.2' r='1.3'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.33'%3E%3Ccircle cx='15.1' cy='35.9' r='1.3'/%3E%3Ccircle cx='4.1' cy='88.8' r='1.2'/%3E%3Ccircle cx='59' cy='66.8' r='1.1'/%3E%3Ccircle cx='114.2' cy='40.3' r='1.3'/%3E%3Ccircle cx='89' cy='85.1' r='1.2'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.26'%3E%3Ccircle cx='29.7' cy='11.4' r='1.3'/%3E%3Ccircle cx='52' cy='84.2' r='1.4'/%3E%3Ccircle cx='6.7' cy='27.5' r='1.2'/%3E%3Ccircle cx='89.2' cy='93.4' r='0.9'/%3E%3Ccircle cx='10.6' cy='30.9' r='1.1'/%3E%3Ccircle cx='73.4' cy='69.9' r='1.2'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.29'%3E%3Ccircle cx='58.7' cy='28' r='1.4'/%3E%3Ccircle cx='61.8' cy='39.7' r='1.4'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.30'%3E%3Ccircle cx='37' cy='67.9' r='1.2'/%3E%3Ccircle cx='9.9' cy='104.7' r='1'/%3E%3Ccircle cx='16.6' cy='69.2' r='1.3'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.28'%3E%3Ccircle cx='94.9' cy='90.6' r='1.2'/%3E%3Ccircle cx='117.3' cy='39.5' r='1.3'/%3E%3C/g%3E%3Cg fill='%23D4A548' fill-opacity='0.27'%3E%3Ccircle cx='18.7' cy='107.1' r='1'/%3E%3Ccircle cx='76.2' cy='11.9' r='1.2'/%3E%3Ccircle cx='37.4' cy='83.7' r='1.5'/%3E%3C/g%3E%3C/svg%3E");

  /* THE SECTION DIVIDER: a floral vine. 58px tile, 2px stem - both above
     the legibility floor the bunting divider found the hard way, where a
     36px tile read as a fine sawtooth and a 1.4px cord vanished entirely.
     The stem leaves the right edge at the y it entered the left at, so the
     tile joins itself. */
  --vine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='26'%3E%3Cpath d='M0 13C9 5 19 21 29 13S49 5 58 13' fill='none' stroke='%238A9B72' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M0 0C4.4 -3.5 7.6 -1.6 8 0C7.6 1.6 4.4 3.5 0 0Z' fill='%238A9B72' transform='translate(9.5 10.4)rotate(-38)'/%3E%3Cpath d='M0 0C3.9 -3.1 6.6 -1.4 7 0C6.6 1.4 3.9 3.1 0 0Z' fill='%238A9B72' transform='translate(23 15.6)rotate(34)'/%3E%3Cpath d='M0 0C4.1 -3.3 7.1 -1.5 7.5 0C7.1 1.5 4.1 3.3 0 0Z' fill='%238A9B72' transform='translate(38 10.8)rotate(-30)'/%3E%3Cpath d='M0 0C3.6 -2.9 6.2 -1.3 6.5 0C6.2 1.3 3.6 2.9 0 0Z' fill='%238A9B72' transform='translate(51 15.2)rotate(40)'/%3E%3Cg fill='%23F0C9D0'%3E%3Ccircle cx='29.0' cy='8.8' r='3.4'/%3E%3Ccircle cx='33.0' cy='11.7' r='3.4'/%3E%3Ccircle cx='31.5' cy='16.4' r='3.4'/%3E%3Ccircle cx='26.5' cy='16.4' r='3.4'/%3E%3Ccircle cx='25.0' cy='11.7' r='3.4'/%3E%3C/g%3E%3Ccircle cx='29' cy='13' r='2.1' fill='%23D4A548'/%3E%3Cg fill='%23C4B4D9'%3E%3Ccircle cx='0.0' cy='9.2' r='3.0'/%3E%3Ccircle cx='3.6' cy='11.8' r='3.0'/%3E%3Ccircle cx='2.2' cy='16.1' r='3.0'/%3E%3Ccircle cx='-2.2' cy='16.1' r='3.0'/%3E%3Ccircle cx='-3.6' cy='11.8' r='3.0'/%3E%3C/g%3E%3Ccircle cx='0' cy='13' r='1.9' fill='%23D4A548'/%3E%3Cg fill='%23C4B4D9'%3E%3Ccircle cx='58.0' cy='9.2' r='3.0'/%3E%3Ccircle cx='61.6' cy='11.8' r='3.0'/%3E%3Ccircle cx='60.2' cy='16.1' r='3.0'/%3E%3Ccircle cx='55.8' cy='16.1' r='3.0'/%3E%3Ccircle cx='54.4' cy='11.8' r='3.0'/%3E%3C/g%3E%3Ccircle cx='58' cy='13' r='1.9' fill='%23D4A548'/%3E%3Cg fill='%23D4A548'%3E%3Ccircle cx='16' cy='19.6' r='1.5'/%3E%3Ccircle cx='45' cy='6.6' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --vine-sm:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='16'%3E%3Cpath d='M0 8C6.5 3 13 13 20 8S33.5 3 40 8' fill='none' stroke='%238A9B72' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M0 0C3.0 -2.4 5.1 -1.1 5.4 0C5.1 1.1 3.0 2.4 0 0Z' fill='%238A9B72' transform='translate(7 6.2)rotate(-36)'/%3E%3Cpath d='M0 0C2.8 -2.2 4.8 -1.0 5 0C4.8 1.0 2.8 2.2 0 0Z' fill='%238A9B72' transform='translate(28 9.8)rotate(34)'/%3E%3Cg fill='%23F0C9D0'%3E%3Ccircle cx='20.0' cy='5.1' r='2.3'/%3E%3Ccircle cx='22.8' cy='7.1' r='2.3'/%3E%3Ccircle cx='21.7' cy='10.3' r='2.3'/%3E%3Ccircle cx='18.3' cy='10.3' r='2.3'/%3E%3Ccircle cx='17.2' cy='7.1' r='2.3'/%3E%3C/g%3E%3Ccircle cx='20' cy='8' r='1.4' fill='%23D4A548'/%3E%3Cg fill='%23C4B4D9'%3E%3Ccircle cx='0.0' cy='5.5' r='2.0'/%3E%3Ccircle cx='2.4' cy='7.2' r='2.0'/%3E%3Ccircle cx='1.5' cy='10.0' r='2.0'/%3E%3Ccircle cx='-1.5' cy='10.0' r='2.0'/%3E%3Ccircle cx='-2.4' cy='7.2' r='2.0'/%3E%3C/g%3E%3Ccircle cx='0' cy='8' r='1.2' fill='%23D4A548'/%3E%3Cg fill='%23C4B4D9'%3E%3Ccircle cx='40.0' cy='5.5' r='2.0'/%3E%3Ccircle cx='42.4' cy='7.2' r='2.0'/%3E%3Ccircle cx='41.5' cy='10.0' r='2.0'/%3E%3Ccircle cx='38.5' cy='10.0' r='2.0'/%3E%3Ccircle cx='37.6' cy='7.2' r='2.0'/%3E%3C/g%3E%3Ccircle cx='40' cy='8' r='1.2' fill='%23D4A548'/%3E%3C/svg%3E");

  /* THE CARD EDGE: a scalloped ribbon, used as a border-image. Issue 03
     shipped cards with a plain solid line and it read as unfinished, so
     there is no plain border on a card anywhere here - the frame is a
     repeating scallop with a gold pip at each corner. 36x36 sliced at 12,
     rendered at 7px. */
  --frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%236A4A85'/%3E%3Crect x='2.4' y='2.4' width='31.2' height='31.2' fill='none' stroke='%23F0C9D0' stroke-width='1.1' opacity='.62'/%3E%3Cg fill='%23F0C9D0'%3E%3Ccircle cx='18' cy='6' r='3.3'/%3E%3Ccircle cx='18' cy='30' r='3.3'/%3E%3Ccircle cx='6' cy='18' r='3.3'/%3E%3Ccircle cx='30' cy='18' r='3.3'/%3E%3C/g%3E%3Cg fill='%23D4A548'%3E%3Cpath d='M6 2.5 9.5 6 6 9.5 2.5 6Z'/%3E%3Cpath d='M30 2.5 33.5 6 30 9.5 26.5 6Z'/%3E%3Cpath d='M6 26.5 9.5 30 6 33.5 2.5 30Z'/%3E%3Cpath d='M30 26.5 33.5 30 30 33.5 26.5 30Z'/%3E%3C/g%3E%3C/svg%3E");
  --frame-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%238A9B72'/%3E%3Crect x='2.4' y='2.4' width='31.2' height='31.2' fill='none' stroke='%23F7F2E8' stroke-width='1.1' opacity='.55'/%3E%3Cg fill='%23C4B4D9'%3E%3Ccircle cx='18' cy='6' r='3.3'/%3E%3Ccircle cx='18' cy='30' r='3.3'/%3E%3Ccircle cx='6' cy='18' r='3.3'/%3E%3Ccircle cx='30' cy='18' r='3.3'/%3E%3C/g%3E%3Cg fill='%23F0C9D0'%3E%3Cpath d='M6 2.5 9.5 6 6 9.5 2.5 6Z'/%3E%3Cpath d='M30 2.5 33.5 6 30 9.5 26.5 6Z'/%3E%3Cpath d='M6 26.5 9.5 30 6 33.5 2.5 30Z'/%3E%3Cpath d='M30 26.5 33.5 30 30 33.5 26.5 30Z'/%3E%3C/g%3E%3C/svg%3E");
  --frame-blush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%23A84E62'/%3E%3Crect x='2.4' y='2.4' width='31.2' height='31.2' fill='none' stroke='%23F7F2E8' stroke-width='1.1' opacity='.45'/%3E%3Cg fill='%23F0C9D0'%3E%3Ccircle cx='18' cy='6' r='3.3'/%3E%3Ccircle cx='18' cy='30' r='3.3'/%3E%3Ccircle cx='6' cy='18' r='3.3'/%3E%3Ccircle cx='30' cy='18' r='3.3'/%3E%3C/g%3E%3Cg fill='%23D4A548'%3E%3Cpath d='M6 2.5 9.5 6 6 9.5 2.5 6Z'/%3E%3Cpath d='M30 2.5 33.5 6 30 9.5 26.5 6Z'/%3E%3Cpath d='M6 26.5 9.5 30 6 33.5 2.5 30Z'/%3E%3Cpath d='M30 26.5 33.5 30 30 33.5 26.5 30Z'/%3E%3C/g%3E%3C/svg%3E");

  /* the torn edge of an order ticket. Four radial gradients, each tiled
     along ONE axis and intersected, which notches the EDGES only. A single
     gradient tiled in both directions punches holes through the middle of
     the element too - that is the actual failure mode, and this is the
     shape that avoids it. */
  --perf-y:
    radial-gradient(circle 5px at 50% 0,#0000 96%,#000) 0 0/17px 100%,
    radial-gradient(circle 5px at 50% 100%,#0000 96%,#000) 0 0/17px 100%;
}

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

body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-color:var(--cream);
  background-image:var(--floral);
  background-size:120px 120px;
  background-attachment:fixed;   /* the page slides over the field */
  /* clip, NOT hidden: `hidden` makes this a scroll container and the sticky
     CLAUDE.md rail in section 04 stops sticking. This only guarantees no
     width can ever scroll the page sideways. */
  overflow-x:clip;
}

.wrap{max-width:900px;margin:0 auto;padding:26px 22px 90px;position:relative;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* die-cut stickers dropped at the seams. Never in the text's way. */
.peel{position:absolute;pointer-events:none;z-index:2;
  filter:drop-shadow(1px 2px 2px var(--shadow));}
.peel svg{display:block;width:100%;height:100%;}

/* ---------- the seal ------------------------------------------------------
   Scalloped circle, the series geometry: 26 discs at r 5.4 on a r 49 body.
   The crest/shield variant is deliberately NOT used here - it is reserved.
   The seal is also the link home on every letter, and the <a> carries its
   display/flex rules inline so that .seal keeps being the flex item and the
   sizing does not shift.
   ------------------------------------------------------------------------ */
.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(--lilac-dk);max-width:29ch;}
.seal-note b{display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:3px;}

/* ---------- the stamped block word ----------------------------------------
   Cream on lilac-dk, 6.42:1. Twice on the page and nowhere else: the issue
   number and the section banner. None of the four pale accents can hold
   cream text, so none of them ever grounds this.
   ------------------------------------------------------------------------ */
.block-stamp{
  display:inline-block;font-family:var(--display);font-weight:700;
  background:var(--lilac-dk);color:var(--cream);
  padding:9px 16px 8px;line-height:1;letter-spacing:.09em;
  box-shadow:3px 3px 0 var(--lilac-tint-2);
  border:1.5px solid var(--lilac-dk);border-radius:4px;
  transform:rotate(-1.4deg);
}
.block-stamp.big{font-size:15px;}
.block-stamp.small{font-size:12.5px;letter-spacing:.16em;}

.oval-label{
  display:inline-block;font-family:var(--code);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--sage-dk);
  padding:5px 15px 4px;border:1.5px solid var(--sage);border-radius:999px;
  background:var(--sage-tint);
}

/* ---------- masthead ------------------------------------------------------
   A cafe menu card: the scalloped ribbon runs the whole way round as a
   border-image, and the cloth shows through behind the type.
   ------------------------------------------------------------------------ */
.masthead{
  position:relative;
  background-color:var(--card);
  background-image:var(--gingham);
  border:9px solid transparent;
  border-image:var(--frame-lt) 12 repeat;
  margin:0 0 26px;
  box-shadow:0 3px 0 var(--sage-tint),0 12px 26px -18px var(--shadow);
}
.masthead-inner{padding:20px 24px 92px;}   /* the sticker's band */
.mast-top{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.eyebrow{margin:0;}

h1{
  font-family:var(--title);font-weight:700;
  font-size:clamp(54px,10.4vw,92px);line-height:.94;letter-spacing:.008em;
  color:var(--lilac-dk);margin:0 0 10px;
  /* hand-placed, not gridded - the ISSUE 06 stamp beside it sits at -1.4deg,
     so this leans the same way rather than against it */
  transform:rotate(-2deg);transform-origin:left center;
  /* die-cut backing, the same idea as the sprite stickers: a fat pale stroke
     UNDER a flat fill. paint-order is what puts it under - without it the
     stroke is painted over the glyph and Amatic SC, already a light face,
     closes up. */
  -webkit-text-stroke:10px #FFFBF4;
  paint-order:stroke fill;
  filter:drop-shadow(2px 3px 2.5px var(--shadow));
  width:fit-content;
}
.subtitle{margin:0 0 4px;color:var(--ink-soft);font-size:17px;}
.subtitle:last-of-type{margin-bottom:0;}

/* The hero sticker. It sits on .masthead rather than inside .masthead-inner
   so it can bleed past the scalloped frame - a die-cut sticker stuck onto the
   page, not a box in the layout. An overflowing child like this is exactly
   what pushed documentElement.scrollWidth past the viewport once already, so
   the narrow-screen rules below pull it back in rather than leaving it to
   overhang a phone. */
.hero-sticker{
  position:absolute;right:-8px;bottom:-56px;z-index:3;
  line-height:0;pointer-events:none;
  transform:rotate(-10deg);
  filter:drop-shadow(2px 4px 4px var(--shadow));
}
.hero-sticker svg{display:block;}
/* The text is NOT narrowed to make room - a padding-right on the paragraph
   shortens every line of it, including the ones level with the title, and
   that reads as a stray indent rather than as text flowing round a sticker.
   The sticker gets a shallow band along the bottom of the card instead, and
   bleeds well past the edge so the band can stay small. */
.hs-stack{width:136px;height:136px;}
.hs-cup{position:absolute;left:-52px;bottom:14px;width:70px;height:70px;}


/* ---------- fact pills ----------------------------------------------------
   SOLID tinted fills, each matching its own border. Issue 03 shipped these
   as thin outlines on nothing and they read as unfinished chips.
   ------------------------------------------------------------------------ */
.stamp-row{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;}
.stamp{
  display:inline-block;font-family:var(--code);font-size:12px;font-weight:700;
  letter-spacing:.03em;padding:6px 14px 5px;border-radius:999px;
  background:var(--lilac-tint-2);border:1.6px solid var(--lilac-dk);
  color:var(--lilac-dk);
}
.stamp:nth-child(2){background:var(--blush-tint-2);border-color:var(--rose-dk);color:var(--rose-dk);}
.stamp:nth-child(3){background:var(--sage-tint-2);border-color:var(--sage-dk);color:var(--sage-dk);}
.stamp:nth-child(4){background:var(--gold-tint);border-color:var(--gold-dk);color:var(--gold-dk);}

/* ---------- the vine strip ------------------------------------------------ */
.vine-strip{display:block;width:100%;height:26px;margin:0 0 26px;
  background-image:var(--vine);background-size:58px 26px;background-repeat:repeat-x;}

/* ---------- the sticker sheet --------------------------------------------- */
.kit-strip{
  position:relative;margin:0 0 26px;padding:16px 18px;
  background-color:var(--card);background-image:var(--dots);
  background-size:16px 16px;
  border:7px solid transparent;border-image:var(--frame-blush) 12 repeat;
  box-shadow:3px 3px 0 var(--blush-tint);
}
.kit-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.kit-lbl{
  flex:none;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--cream);
  background:var(--rose-dk);padding:6px 12px 5px;border-radius:4px;
  transform:rotate(-1.5deg);margin-top:2px;
}
.stickers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px 18px;flex:1 1 340px;}
.sticker{display:flex;align-items:center;gap:8px;margin:0;
  font-size:14.5px;color:var(--ink-soft);position:relative;}
.sticker .ico{position:relative;flex:none;width:30px;height:30px;line-height:0;}
.sticker svg{width:30px;height:30px;display:block;
  filter:drop-shadow(1px 1.5px 1.5px var(--shadow));}
ul.stickers>li::before{content:none;}

/* the steam. Two wisps that lift out of the hot drinks on hover, drawn in
   CSS rather than added to the sprite so the icon stays one clean sticker
   wherever else it is used. */
/* The wisps hang off the ICON's box, not the row's - pinned to the <li>
   they landed beside the icon at the top of a flex row instead of above the
   cup. They start just above the icon and rise clear of it. */
.sticker.hot .ico::before,.sticker.hot .ico::after{
  content:"";position:absolute;bottom:26px;left:9px;width:2.4px;height:9px;
  border-radius:2px;background:var(--sage);opacity:0;pointer-events:none;
}
.sticker.hot .ico::after{left:17px;}
.sticker.hot:hover .ico::before,.sticker.hot:hover .ico::after,
.sticker.hot:focus-within .ico::before,.sticker.hot:focus-within .ico::after{
  animation:steam 1.5s ease-out infinite;
}
.sticker.hot:hover .ico::after{animation-delay:.42s;}
@keyframes steam{
  0%  {opacity:0;  transform:translateY(5px)  scaleY(.55);}
  35% {opacity:.75;transform:translateY(0)    scaleY(1);}
  100%{opacity:0;  transform:translateY(-9px) scaleY(1.25);}
}

/* ---------- contents ------------------------------------------------------
   The rows are counter-driven rather than list-marker driven, because they
   are flex containers and a flex <li> has no ::marker at all - the numbering
   would silently disappear.
   ------------------------------------------------------------------------ */
.toc{
  margin:0 0 30px;padding:16px 20px 14px;
  background-color:var(--card);background-image:var(--gingham-lilac);
  border:7px solid transparent;border-image:var(--frame) 12 repeat;
  box-shadow:3px 3px 0 var(--lilac-dk-tint);
}
.toc h2{
  display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;margin:0 0 10px;padding:0 0 8px;border:none;
  font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lilac-dk);
  background-image:var(--vine-sm);background-size:40px 16px;
  background-repeat:repeat-x;background-position:0 100%;
}
.toc h2>span:first-child{background:var(--card);padding-right:10px;}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc;}
.toc li{
  counter-increment:toc;display:flex;align-items:center;gap:10px;
  padding:6px 0;border-bottom:1px dashed var(--rule-firm);margin:0;
}
.toc li:last-child{border-bottom:none;}
.toc li::before{
  content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--code);font-size:12px;font-weight:700;color:var(--cream);
  background:var(--lilac-dk);width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.toc a{flex:1 1 auto;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--lilac-tint-2);}
.toc a:hover{border-bottom-color:var(--lilac-dk);}

/* ---------- the section banner --------------------------------------------
   ONE banner, before section 01, and it carries no lettered arc label - by
   instruction, and because this issue is not a part of anything, it is the
   point the project stops being setup. It is a <p>, so it needs
   max-width:none explicitly: any <p> inherits the 68ch measure and centres
   inside THAT rather than on the page, which has now bitten twice.
   ------------------------------------------------------------------------ */
.part-marker{text-align:center;margin:6px 0 4px;max-width:none;
  display:flex;align-items:center;justify-content:center;gap:14px;}
.part-marker::before,.part-marker::after{
  content:"";flex:1 1 auto;height:26px;max-width:190px;
  background-image:var(--vine);background-size:58px 26px;background-repeat:repeat-x;
}
.part-marker .block-stamp.small{position:relative;}

/* ---------- a section ----------------------------------------------------- */
.part{position:relative;margin:0 0 34px;padding-top:34px;}
.part::before{
  content:"";display:block;height:26px;margin:0 0 26px;
  background-image:var(--vine);background-size:58px 26px;background-repeat:repeat-x;
}
.part:first-of-type{padding-top:14px;}
.part:first-of-type::before{content:none;}

.part-head{display:flex;align-items:flex-start;gap:16px;margin:0 0 6px;}
.part-head .part-titles{flex:1 1 auto;min-width:0;}

/* the postage-stamp section badge: icon, plain number, and a denomination
   that is a WORD. No letter, anywhere, by instruction. The perforations are
   four radial gradients each tiled along one axis and intersected - the
   edges-only form; a single gradient tiled both ways punches holes through
   the middle of the badge as well. */
.part-num{
  flex:none;position:relative;width:70px;height:70px;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-color:var(--card);background-image:var(--gingham);
  -webkit-mask:radial-gradient(circle 4.2px at 50% 0,#0000 96%,#000) 0 0/14px 100%,
               radial-gradient(circle 4.2px at 50% 100%,#0000 96%,#000) 0 0/14px 100%,
               radial-gradient(circle 4.2px at 0 50%,#0000 96%,#000) 0 0/100% 14px,
               radial-gradient(circle 4.2px at 100% 50%,#0000 96%,#000) 0 0/100% 14px;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 4.2px at 50% 0,#0000 96%,#000) 0 0/14px 100%,
       radial-gradient(circle 4.2px at 50% 100%,#0000 96%,#000) 0 0/14px 100%,
       radial-gradient(circle 4.2px at 0 50%,#0000 96%,#000) 0 0/100% 14px,
       radial-gradient(circle 4.2px at 100% 50%,#0000 96%,#000) 0 0/100% 14px;
  mask-composite:intersect;
  transform:rotate(-2deg);
  filter:drop-shadow(1px 2px 2px var(--shadow));
}
.part-num svg{width:26px;height:26px;display:block;margin-bottom:1px;}
.part-num .no{font-family:var(--display);font-weight:700;font-size:19px;
  line-height:1;color:var(--lilac-dk);letter-spacing:.02em;}
.part-num .denom{font-family:var(--code);font-size:7.6px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-faint);
  margin-top:2px;}

.part-titles h2{
  font-family:var(--title);font-weight:700;
  font-size:clamp(34px,4.8vw,44px);line-height:1;letter-spacing:.01em;
  color:var(--lilac-dk);margin:0;
}
h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(25px,3.6vw,33px);line-height:1.14;letter-spacing:-.008em;
  color:var(--lilac-dk);margin:2px 0 0;
}
h3{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.3;
  color:var(--rose-dk);margin:26px 0 8px;}
h4{font-family:var(--display);font-weight:700;font-size:15px;margin:0;}

p{margin:0 0 15px;max-width:68ch;}
.lede{
  font-family:var(--hand);font-size:24px;line-height:1.32;color:var(--sage-dk);
  margin:10px 0 18px;max-width:44ch;
}
a{color:var(--lilac-dk);text-underline-offset:3px;text-decoration-thickness:1.5px;}
a:hover{color:var(--rose-dk);}
strong{font-weight:700;color:var(--ink);}
em{font-style:italic;}

ol{margin:0 0 16px;padding-left:24px;}
ul{list-style:none;margin:0 0 18px;padding:0;}
ul>li{position:relative;padding-left:28px;margin:0 0 10px;max-width:68ch;}
/* a sprig for a bullet - the "worth noting" motif, doing bullet duty */
ul>li::before{
  content:"";position:absolute;left:2px;top:.52em;width:11px;height:11px;
  border-radius:50% 0 50% 0;background:var(--sage);transform:rotate(-14deg);
}
ul>li:nth-child(2n)::before{background:var(--lilac);border-radius:0 50% 0 50%;}
ol li{margin:0 0 8px;max-width:66ch;}

/* ---------- code ---------------------------------------------------------- */
code{font-family:var(--code);font-size:.885em;background:var(--lilac-tint);
  padding:1.5px 5px;border-radius:4px;color:var(--ink);}
a code{background:none;padding:0;}

.code{
  margin:0 0 20px;border-radius:7px;overflow:hidden;
  background:var(--card);
  border:2px solid var(--lilac-dk);
  box-shadow:3px 3px 0 var(--lilac-dk-tint);
}
.code-label{
  display:flex;align-items:center;gap:10px;
  background-color:var(--lilac-dk);background-image:var(--gingham-lilac);
  color:var(--cream);font-family:var(--display);font-weight:700;
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  padding:7px 12px 6px;
}
.code-label .rhs{margin-left:auto;font-family:var(--hand);font-size:15px;
  letter-spacing:0;text-transform:none;opacity:.92;}
.code pre{
  margin:0;padding:13px 16px;overflow-x:auto;
  font-family:var(--code);font-size:13.5px;line-height:1.62;color:var(--ink);
  background-image:var(--gingham);
}
.s{color:var(--sage-dk);}
.c{color:var(--ink-faint);font-style:italic;}
.d{color:var(--lilac-dk);font-weight:700;user-select:none;}

/* the copy button. Behaviour lives in the shared reference.js, which names
   no colour; every issue styles it locally. It strips the leading "$" from
   each line, which is not a nicety - Issue 05 documents an install that
   failed because the $ got pasted along with the command. */
.copy-btn{
  margin-left:auto;flex:none;cursor:pointer;
  font-family:var(--code);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--lilac-dk);background:var(--cream);
  border:1.4px solid var(--cream);border-radius:999px;padding:3px 11px 2px;
  transition:background .13s ease,color .13s ease;
}
.code-label .rhs+.copy-btn{margin-left:10px;}
.copy-btn:hover{background:var(--blush);border-color:var(--blush);color:var(--rose-dk);}
.copy-btn:focus-visible{outline:2px solid var(--cream);outline-offset:2px;}
.copy-btn.done{background:var(--sage);border-color:var(--sage);color:var(--cream);}
.copy-btn.failed{background:var(--gold);border-color:var(--gold);color:var(--ink);}

/* ---------- callouts ------------------------------------------------------
   Kitchen furniture: an order ticket, a recipe card, a chit off the pass.
   All three carry a real patterned ground - Issue 03 shipped flat colour
   fills here and they read as empty boxes.
   ------------------------------------------------------------------------ */
.callout{
  position:relative;margin:0 0 26px;padding:15px 22px 17px;
  background-color:var(--card);background-image:var(--gingham);
  border:1.6px solid var(--rule-firm);border-radius:5px;
  box-shadow:3px 3px 0 var(--lilac-tint);
}
.callout p{margin:0 0 10px;}
.callout p:last-child{margin-bottom:0;}
.callout code{background:var(--cream);}
.callout .tag{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;
}
.callout .tag::after{content:"";flex:1 1 auto;height:16px;
  background-image:var(--vine-sm);background-size:40px 16px;
  background-repeat:repeat-x;opacity:.85;}

/* THE ORDER TICKET - the "where this is going" box and the closing chit.
   Torn top and bottom, so the shadow is a filter rather than a box-shadow:
   a box-shadow would draw the untorn rectangle behind the mask. */
.callout.ticket{
  background-color:var(--card);background-image:var(--gingham);
  border:none;border-radius:0;box-shadow:none;
  padding:22px 24px 24px;
  border-left:5px solid var(--lilac-dk);border-right:5px solid var(--lilac-dk);
  -webkit-mask:var(--perf-y);-webkit-mask-composite:source-in;
  mask:var(--perf-y);mask-composite:intersect;
  filter:drop-shadow(3px 3px 0 var(--lilac-dk-tint));
}
.callout.ticket .tag{color:var(--lilac-dk);}

/* THE RECIPE CARD - ruled paper, an index card off a recipe box */
.callout.note{
  background-color:var(--card);
  background-image:var(--ruled),var(--gingham);
  background-position:0 9px,0 0;
  border:7px solid transparent;border-image:var(--frame-blush) 12 repeat;
  box-shadow:3px 3px 0 var(--blush-tint);
  padding:14px 20px 16px;
}
.callout.note .tag{color:var(--rose-dk);}

/* OFF THE PASS - a chit spiked at the corner, with the spike drawn on it */
.callout.pass{
  background-color:var(--card);
  background-image:var(--gingham);
  border:2px solid var(--rose-dk);border-radius:5px;
  box-shadow:4px 4px 0 var(--blush-tint-2);
  padding:18px 22px 16px;
}
.callout.pass::before{
  content:"";position:absolute;top:-9px;right:26px;width:18px;height:18px;
  border-radius:50%;background:var(--gold);border:2px solid var(--rose-dk);
  box-shadow:inset 0 0 0 3px var(--card);
}
.callout.pass .tag{color:var(--rose-dk);}
.callout.pass .sign{
  margin:12px 0 0;font-family:var(--hand);font-size:20px;color:var(--sage-dk);
  text-align:right;
}
.callout.pass q{font-style:italic;}

.callout.good{
  background-color:var(--card);
  background-image:var(--gingham);
  border:2px solid var(--sage-dk);border-radius:5px;
  box-shadow:4px 4px 0 var(--sage-tint);
}
.callout.good .tag{color:var(--sage-dk);}

/* =========================================================================
   INTERACTIVE 1 - the order that got sent back  (section 03)

   The near-miss dramatised rather than illustrated: press `git add .` and
   the ticket is stamped SENT BACK, the 6,876 is struck through, the
   .gitignore is written, and the same command runs again for three files.

   PROGRESSIVE ENHANCEMENT, strictly, the way every interactive piece in
   this series works. The flag, the fix and the second run are all VISIBLE
   in the markup; the controls carry `hidden`; and every live-state rule
   below is scoped under .is-live, which only the script adds. With
   JavaScript off this is the same four legible panels it would have been
   as a static figure - no dead buttons, nothing greyed out.
   ========================================================================= */
.ticket-lab{
  margin:0 0 26px;padding:18px 20px 16px;
  background-color:var(--card);background-image:var(--gingham-lilac);
  border:7px solid transparent;border-image:var(--frame) 12 repeat;
  box-shadow:4px 4px 0 var(--lilac-dk-tint);
}
.tl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.tl-title{font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lilac-dk);}
.tl-sub{font-family:var(--hand);font-size:18px;color:var(--ink-faint);}

/* the ticket itself: torn top and bottom, spiked at the corner */
.tl-ticket{
  position:relative;overflow:hidden;padding:16px 18px 14px;margin:0 0 14px;
  background-color:var(--cream);background-image:var(--gingham);
  -webkit-mask:var(--perf-y);-webkit-mask-composite:source-in;
  mask:var(--perf-y);mask-composite:intersect;
  filter:drop-shadow(2px 3px 0 var(--lilac-dk-tint));
}
.tl-rail{font-family:var(--code);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  border-bottom:1.5px dashed var(--rule-firm);padding-bottom:7px;margin-bottom:10px;
  display:flex;justify-content:space-between;gap:10px;}
.tl-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 4px;
  max-width:none;}
.tl-cmd{font-family:var(--code);font-size:15px;font-weight:700;color:var(--ink);}
.tl-count{position:relative;font-family:var(--code);font-size:14px;
  color:var(--rose-dk);}
.tl-count b{font-size:17px;}
/* the strike-through sweeps across rather than appearing */
.tl-count::after{
  content:"";position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;
  background:var(--rose-dk);border-radius:2px;
  transform:scaleX(1);transform-origin:left center;
}
.tl-note{margin:10px 0 0;font-family:var(--hand);font-size:19px;
  color:var(--sage-dk);max-width:none;}

/* the SENT BACK stamp */
.tl-stamp{
  position:absolute;right:20px;bottom:18px;
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--rose-dk);border:3px solid var(--rose-dk);border-radius:5px;
  padding:5px 12px 4px;transform:rotate(-11deg);opacity:.9;
  background:rgba(253,250,244,.5);
}

.tl-step{margin:0 0 14px;}
.tl-step:last-of-type{margin-bottom:0;}
.tl-result{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;border-radius:6px;
  background:var(--sage-tint-2);border:2px solid var(--sage-dk);
}
.tl-result b{font-family:var(--code);font-size:16px;color:var(--sage-dk);}
.tl-result span{font-family:var(--hand);font-size:19px;color:var(--ink-soft);}

.tl-controls{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:14px 2px 0;}
/* has to come after the rule above, and has to exist at all - see note */
.tl-controls[hidden]{display:none;}
.tl-hint{font-family:var(--hand);font-size:17px;color:var(--ink-faint);margin:0 4px 0 0;}
.tl-btn{
  font-family:var(--code);font-size:13px;font-weight:700;cursor:pointer;
  padding:7px 15px 6px;border-radius:999px;
  border:1.8px solid var(--lilac-dk);background:var(--lilac-tint-2);
  color:var(--lilac-dk);transition:transform .12s ease,background .12s ease;
}
.tl-btn:hover:not(:disabled){background:var(--lilac);transform:translateY(-1px);}
.tl-btn:focus-visible{outline:2px solid var(--rose-dk);outline-offset:2px;}
.tl-btn:disabled{opacity:.4;cursor:default;}
.tl-btn.fix{border-color:var(--sage-dk);background:var(--sage-tint-2);color:var(--sage-dk);}
.tl-btn.fix:hover:not(:disabled){background:var(--sage);color:var(--cream);}
.tl-reset{
  margin-left:auto;font-family:var(--hand);font-size:17px;cursor:pointer;
  background:none;border:none;color:var(--ink-faint);
  text-decoration:underline;text-underline-offset:3px;
}
.tl-reset:hover{color:var(--rose-dk);}
.tl-read{margin:12px 2px 0;font-family:var(--hand);font-size:20px;
  color:var(--sage-dk);min-height:1.4em;max-width:none;}
.tl-read.alarm{color:var(--rose-dk);}

/* --- the live layer. None of this applies without the script. ----------- */
.ticket-lab.is-live .tl-step{
  opacity:0;visibility:hidden;height:0;overflow:hidden;margin:0;
  transition:opacity .26s ease;
}
.ticket-lab.is-live .tl-step.on{
  opacity:1;visibility:visible;height:auto;overflow:visible;margin:0 0 14px;
}
.ticket-lab.is-live .tl-step.on:last-of-type{margin-bottom:0;}
.ticket-lab.is-live .tl-stamp{opacity:0;transform:rotate(-11deg) scale(2.5);}
.ticket-lab.is-live .tl-stamp.on{
  opacity:.9;transform:rotate(-11deg) scale(1);
  transition:opacity .18s ease,transform .34s cubic-bezier(.2,1.5,.4,1);
}
.ticket-lab.is-live .tl-count::after{transform:scaleX(0);}
.ticket-lab.is-live .tl-count.struck::after{
  transform:scaleX(1);transition:transform .4s ease .12s;
}

/* =========================================================================
   INTERACTIVE 2 - the standing order on the rail  (section 04)

   A ticket spiked at the pass. It sticks to the top of the viewport for the
   whole of section 04, because the argument of that section is that this
   one file is read before anything else happens and stays in force for the
   entire shift - a ticket that scrolls away with the prose would be making
   the opposite point.

   The functional half: each paragraph of the section carries data-rail, and
   the matching line on the ticket lights as you reach it. So the panel is
   showing you WHICH piece of standing context the sentence you are reading
   depends on, which is the thing a static box cannot do.
   ========================================================================= */
.rail-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;}
.rail{
  margin:0 0 22px;padding:0 0 12px;
  background-color:var(--card);background-image:var(--gingham);
  -webkit-mask:var(--perf-y);-webkit-mask-composite:source-in;
  mask:var(--perf-y);mask-composite:intersect;
  filter:drop-shadow(3px 3px 0 var(--sage-tint));
}
.rail-head{
  padding:16px 16px 9px;border-bottom:1.5px dashed var(--rule-firm);
  margin:0 14px 10px;
}
.rail-kick{display:block;font-family:var(--code);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage-dk);}
.rail-file{display:block;font-family:var(--display);font-weight:700;font-size:17px;
  color:var(--lilac-dk);margin-top:3px;}
.rail-said{display:block;font-family:var(--hand);font-size:17px;
  color:var(--ink-faint);line-height:1.25;margin-top:4px;}
.rail ul{list-style:none;margin:0;padding:0 16px;}
.rail li{
  position:relative;padding:5px 0 5px 20px;margin:0;max-width:none;
  font-family:var(--code);font-size:12.5px;line-height:1.5;color:var(--ink-soft);
  border-radius:4px;
}
.rail li::before{
  content:"";position:absolute;left:2px;top:.72em;width:9px;height:9px;
  border-radius:50% 0 50% 0;background:var(--rule-firm);transform:rotate(-14deg);
}
.rail-foot{margin:10px 16px 0;padding-top:9px;border-top:1.5px dashed var(--rule-firm);
  font-family:var(--hand);font-size:16px;color:var(--sage-dk);max-width:none;}

/* the marks in the prose that point at the standing order. They have to
   look pointable, and they have to be reachable by keyboard - so they carry
   tabindex in the markup and a focus ring in the palette, rather than the
   browser's black box. */
.whyref{font-weight:700;color:var(--ink);cursor:help;
  border-bottom:2px dotted var(--gold);}
.whyref:hover,.whyref:focus-visible{background:var(--gold-tint);
  border-bottom-color:var(--gold-dk);}
.whyref:focus-visible{outline:2px solid var(--gold-dk);outline-offset:2px;
  border-radius:3px;}

/* live layer, script-added as everywhere else */
.rail.is-live li{transition:background .2s ease,color .2s ease;}
.rail.is-live li.lit{background:var(--gold-tint);color:var(--ink);}
.rail.is-live li.lit::before{background:var(--gold);}

@media (min-width:880px){
  .rail-grid{grid-template-columns:minmax(0,1fr) 246px;gap:0 26px;}
  .rail-main{grid-column:1;grid-row:1;}
  .rail{grid-column:2;grid-row:1;position:sticky;top:14px;align-self:start;
    margin-top:4px;}
}

/* =========================================================================
   the Section Review Card
   ========================================================================= */
.recap{
  position:relative;margin:26px 0 0;
  background-color:var(--card);background-image:var(--gingham);
  border:8px solid transparent;border-image:var(--frame) 12 repeat;
  box-shadow:5px 5px 0 var(--lilac-dk-tint);
}
.recap-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:11px 18px 10px;
  background-color:var(--lilac-dk);background-image:var(--gingham-lilac);
  color:var(--cream);
}
.recap-head h4{font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--cream);}

/* the counter, as a stack of pancakes: one per card, filled up to this one.
   Same job as the "no. 03 of 04" it replaces, so the plain text is still
   there for a screen reader and in the label. */
.card-no{display:inline-flex;align-items:center;gap:8px;}
.card-no svg{width:76px;height:38px;display:block;
  filter:drop-shadow(0 1px 1.4px rgba(74,55,40,.32));}
.card-no .pc{opacity:1;}
.card-no[data-done="1"] .pc:nth-of-type(n+2),
.card-no[data-done="2"] .pc:nth-of-type(n+3),
.card-no[data-done="3"] .pc:nth-of-type(n+4){opacity:.38;}

.recap dl{margin:0;padding:15px 18px 8px;}
.recap .row{display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:4px 14px;margin:0 0 11px;}
.recap .row.wide{grid-template-columns:minmax(0,1fr);}
.recap dt{font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--rose-dk);
  padding-top:3px;}
.recap dd{margin:0;color:var(--ink-soft);}
.recap .row.wide dt{margin-bottom:5px;padding-top:0;}

/* THE WRITING LINE - the Issue 01 / 02 construction, which is the one that
   is right.

   Not a bordered input. Ruled lines drawn straight onto the card, the way a
   form printed on paper does it: a repeating gradient puts a rule in the
   last 1px of each 28px line-box so it lands on the baseline, and the
   border-bottom closes off the last one. One line to start with, which is
   what Issue 01's card actually renders (30px: 1px of padding, one 28px
   line-box, the 1px rule). The bug this replaces was a box sized for two
   lines that only ever drew one rule, floating in the middle with dead
   space above and below it.

   It stays a repeating gradient rather than a stack of borders so that a
   third and fourth typed line get ruled too. The placeholder is set smaller
   than the writing size, 18px against 20px, so the prompt reads as a prompt
   rather than as something already written. */
.recap .write{
  margin-top:6px;padding:1px 4px 0;
  font-family:var(--hand);font-size:20px;line-height:28px;color:var(--lilac-dk);
  caret-color:var(--rose-dk);
  min-height:30px;                       /* 1px pad + one 28px line + the rule */
  border-bottom:1px solid var(--rule-firm);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 27px,var(--rule-firm) 27px 28px);
  outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
}
.recap .write:empty::before{content:attr(data-hint);color:var(--ink-faint);
  opacity:.75;font-size:18px;}
.recap .write:focus{background-color:var(--lilac-tint);
  box-shadow:0 0 0 2px var(--lilac-tint-2);border-radius:2px;}

.recap-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:10px 18px 13px;
  border-top:1.5px dashed var(--rule-firm);margin:0 0 0;
}
.rating{display:flex;align-items:center;gap:5px;}
.rating .lbl{font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);
  margin-right:4px;}

/* THE RATING SYMBOL - flowers that bloom. This issue's own, deliberately
   none of the shapes already spoken for: patches are Issue 04's, stars are
   Issue 02's, moon phases are Issue 03's. Unearned they sit small and grey;
   earned they open to full size in lilac-dk. The gold heart and the pale
   stamen ring are inside the sprite, so an earned flower has interior
   detail - Issue 04's first pips were flat discs and she said so. */
.pip{
  border:none;background:none;padding:2px;cursor:pointer;line-height:0;
  color:var(--rule-firm);
  transition:color .16s ease,transform .2s cubic-bezier(.2,1.4,.4,1);
  transform:scale(.84);
}
.pip svg{width:27px;height:27px;display:block;
  filter:drop-shadow(0 1px 1.4px rgba(74,55,40,.3));}
.pip:hover{color:var(--lilac);transform:scale(.94);}
.pip.on{color:var(--lilac-dk);transform:scale(1);}
.pip.on:hover{color:var(--rose-dk);transform:scale(1.06);}
.pip:focus-visible{outline:2px solid var(--sage-dk);outline-offset:2px;border-radius:4px;}
.saved{font-family:var(--hand);font-size:17px;color:var(--sage-dk);
  opacity:0;transition:opacity .2s ease;}
.saved.on{opacity:1;}

/* ---------- footer --------------------------------------------------------
   Stamp-card navigation, not underlined text links. Previous on the LEFT,
   Next on the RIGHT - that order was shipped backwards once and caught
   immediately. Only Issue 05 exists to point at for now; the Next card gets
   added here when Issue 07 does. The card is capped so a lone one does not
   stretch the full measure.
   ------------------------------------------------------------------------ */
.foot{margin:44px 0 0;padding-top:26px;
  background-image:var(--vine);background-size:58px 26px;
  background-repeat:repeat-x;background-position:0 0;}
.issue-nav{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 22px;}
.issue-card{
  /* 430px, matching Issues 04 and 05: with two cards and a 14px gap they
     each reach 421px and the pair fills the measure, so Previous sits
     flush left and Next flush right. The 340px cap here was set when
     this page had only a Previous card, and left the Next one stranded
     mid-row once Issue 07 gave it a neighbour. */
  display:flex;align-items:center;gap:13px;flex:1 1 260px;max-width:430px;
  padding:13px 16px;text-decoration:none;color:var(--ink);
  background-color:var(--card);background-image:var(--gingham);
  border:7px solid transparent;border-image:var(--frame-blush) 12 repeat;
  box-shadow:3px 3px 0 var(--blush-tint);
  transition:transform .14s ease,box-shadow .14s ease;
}
.issue-card:hover{transform:translate(-1px,-2px);
  box-shadow:5px 6px 0 var(--blush-tint-2);}
.ic-icon{flex:none;}
.ic-icon svg{width:38px;height:38px;display:block;
  filter:drop-shadow(1px 2px 2px var(--shadow));}
.ic-body{display:block;min-width:0;}
.ic-kicker{display:block;font-family:var(--code);font-size:10px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--rose-dk);}
.ic-title{display:block;font-family:var(--display);font-weight:700;font-size:19px;
  line-height:1.15;color:var(--lilac-dk);margin:2px 0 1px;}
.ic-note{display:block;font-family:var(--hand);font-size:17px;color:var(--ink-faint);}
.foot-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0;
  max-width:none;font-family:var(--code);font-size:11.5px;color:var(--ink-faint);}
.foot-line .mark{width:22px;height:22px;flex:none;}

/* ---------- narrow --------------------------------------------------------- */
@media (max-width:700px){
  body{font-size:16px;}
  /* The sticker is allowed to bleed on a wide card; on a phone the same
     overhang pushes documentElement.scrollWidth past the viewport and the
     whole page scrolls sideways. Smaller, and pulled back in. */
  h1{-webkit-text-stroke-width:7px;}
  .wrap{padding:18px 15px 70px;}
  .seal-row{flex-direction:column;text-align:center;gap:10px;}
  .seal{width:92px;height:92px;}
  .seal-note{max-width:32ch;}
  .masthead-inner{padding:16px 16px 18px;}
  .part-head{gap:12px;}
  .part-num{width:60px;height:60px;}
  .part-num svg{width:22px;height:22px;}
  .part-num .no{font-size:16px;}
  .part-num .denom{font-size:7px;}
  .recap .row{grid-template-columns:minmax(0,1fr);}
  .recap dt{padding-top:0;}
  .part-marker::before,.part-marker::after{max-width:60px;}
  /* The wrap's padding drops to 15px here, so the peels pinned with a
     negative `left` hang off the viewport edge. There is exactly one peel
     per section, so moving them all to the right side is safe - and the
     rotation stays, because the hand-placed tilt is the point of them. */
  .peel{left:auto!important;right:0!important;}
}

/* 500-700px keeps the reserved-column treatment - it is the phone band that
   cannot afford to give a column away, not a small laptop. Only the size
   comes down, so the rotation bulge stays clear of the viewport edge. */
@media (max-width:700px){
  .hs-stack{width:112px;height:112px;}
  .hs-cup{left:-42px;bottom:10px;width:58px;height:58px;}
  .hero-sticker{right:-4px;bottom:-46px;}
  .masthead-inner{padding-bottom:78px;}
}

/* Below 500 the column really is too narrow to reserve, so the sticker gets
   its own band under the copy. That clearance MUST live on the
   .masthead-inner padding shorthand - a separate padding-bottom loses to the
   shorthand set in the 700px query above. */
@media (max-width:500px){
  .hero-sticker{right:-8px;bottom:-34px;}
  .hs-stack{width:92px;height:92px;}
  .hs-cup{left:-34px;bottom:8px;width:48px;height:48px;}
  .masthead-inner{padding:16px 16px 64px;}
}

/* Every decorative SVG is constrained to the column - Issue 03's
   constellation strip had an 860px intrinsic width and forced a 380px phone
   to scroll sideways. */
svg{max-width:100%;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  .sticker.hot:hover .ico::before,.sticker.hot:hover .ico::after,
  .sticker.hot:focus-within .ico::before,.sticker.hot:focus-within .ico::after{
    opacity:.7;animation:none;}
}