/* =========================================================================
   GENERATED FILE - do not edit this directly.

   Source:   ~/projects/.learn-tools/i08/issue-08.body.css   (the hand-written CSS)
             ~/projects/.learn-tools/i08/patterns.py         (the six cloths)
             ~/projects/.learn-tools/i08/small.py            (ribbons and frames)
   Rebuild:  cd ~/projects/.learn-tools/i08 && python3 build_css.py

   Any edit made here is thrown away by the next rebuild. Change the body file
   instead. This issue is generated because it carries nine textures totalling
   ~22 KB of encoded SVG; the other issues paste theirs in by hand, which is
   workable at three or four and not at nine.
   ========================================================================= */
/* ===========================================================================
   /learn/ Issue 08 - "The Return"
   Preppy Americana. Standalone stylesheet: this file shares no cascade with
   any other issue, and must never be edited while working on a different one.

   THE ONE STRUCTURAL OVERRIDE. Issues 01-07 open with a scalloped wax circle
   plus a separate line of masthead text. This issue replaces both with a
   CREST - a shield whose banner ribbon carries the masthead text itself. That
   override has been reserved for this letter since Issue 06. There is no
   .seal-note rule below, because there is no .seal-note on the page.

   SIX CLOTHS, EACH MEANING SOMETHING. Issue 07 put one diagonal behind twelve
   surfaces and Alice's note was that it repeated too much. The fix was not
   fewer patterns but patterns that say what their furniture IS. This is a
   clothing issue, so:
       pinstripe    the page ground       the suit the whole thing wears
       tartan       callouts              the club blanket a notice is pinned to
       houndstooth  the sticker legend    a swatch card - these are samples
       grosgrain    dividers, card edges  ribbon is trim, trim is edges
       oxford       review cards          shirting: the thing you write on
       seersucker   the live panel ONLY   the one surface genuinely moving

   CONTRAST. Every value below came out of contrast.py, none was eyeballed.
   Navy 11.60, ink 14.52 and oxblood 9.95 all clear AA on the ground unaided -
   this is a far friendlier palette than Issue 06's or 07's, and NO derived
   dark was needed for any colour that carries text. Tan (1.95) and seersucker
   (1.66) are decorative only and never hold a word; where their family has to
   letter something, --tan-dk and --seer-dk do it. Each accent was also solved
   against a 30% tint of ITSELF - the Issue 06 fact-pill trap - and navy (6.52)
   and oxblood (5.70) both pass, so the pills need no special ink.
   =========================================================================== */

:root{
  /* --- generated textures: see build_css.py ------------------------- */
  /* the page ground - the suit */
  --pinstripe:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect width='16' height='16' fill='%23F7F4EC'/><rect x='0' y='0' width='1.6' height='16' fill='%23C9AD82' opacity='.42'/><rect x='2.2' y='0' width='.7' height='16' fill='%23C9AD82' opacity='.20'/></svg>");
  /* callouts - the club blanket */
  --tartan:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><rect width='56' height='56' fill='%23F7F4EC'/><rect width='56' height='56' fill='%23C9AD82' opacity='.09'/><rect x='0' y='0' width='14' height='56' fill='%231F3350' opacity='.06'/><rect x='0' y='0' width='56' height='14' fill='%231F3350' opacity='.06'/><rect x='28' y='0' width='14' height='56' fill='%231F3350' opacity='.06'/><rect x='0' y='28' width='56' height='14' fill='%231F3350' opacity='.06'/><rect x='20' y='0' width='4' height='56' fill='%236B2430' opacity='.08'/><rect x='0' y='20' width='56' height='4' fill='%236B2430' opacity='.08'/><rect x='48' y='0' width='4' height='56' fill='%236B2430' opacity='.08'/><rect x='0' y='48' width='56' height='4' fill='%236B2430' opacity='.08'/><rect x='10' y='0' width='1.2' height='56' fill='%23C9AD82' opacity='.30'/><rect x='0' y='10' width='56' height='1.2' fill='%23C9AD82' opacity='.30'/><rect x='38' y='0' width='1.2' height='56' fill='%23C9AD82' opacity='.30'/><rect x='0' y='38' width='56' height='1.2' fill='%23C9AD82' opacity='.30'/></svg>");
  /* sticker legend - swatches */
  --houndstooth:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect width='20' height='20' fill='%23F7F4EC'/><path d='M0 10.0 L10.0 10.0 L10.0 0 L20 0 L20 10.0 L10.0 10.0 L10.0 20 L0 20 Z' fill='%23C9AD82' opacity='.26'/><path d='M10.0 0 L20 0 L10.0 10.0 Z' fill='%23C9AD82' opacity='.26'/><path d='M0 10.0 L10.0 20 L0 20 Z' fill='%23C9AD82' opacity='.26'/></svg>");
  /* review cards - shirting */
  --oxford:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'><rect width='6' height='6' fill='%23FFFDF7'/><rect x='0' y='0' width='6' height='1' fill='%23A8C4D4' opacity='.30'/><rect x='0' y='0' width='1' height='6' fill='%23A8C4D4' opacity='.30'/><rect x='3' y='0' width='.6' height='6' fill='%23C9AD82' opacity='.14'/><rect x='0' y='3' width='6' height='.6' fill='%23C9AD82' opacity='.14'/></svg>");
  /* the live panel ONLY */
  --seersucker:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><rect width='28' height='28' fill='%23FFFDF7'/><rect x='14' y='0' width='14' height='28' fill='%23A8C4D4' opacity='.26'/><path d='M15.5 0 q2 7 0 14 q-2 7 0 14 M19 0 q2 7 0 14 q-2 7 0 14 M22.5 0 q2 7 0 14 q-2 7 0 14 M26 0 q2 7 0 14 q-2 7 0 14' fill='none' stroke='%23A8C4D4' stroke-width='.8' opacity='.45'/><rect x='0' y='0' width='1' height='28' fill='%23A8C4D4' opacity='.22'/></svg>");
  /* the divider, 148px tile */
  --ribbon:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='148' height='28' viewBox='0 0 148 28'><rect x='0' y='4.0' width='148' height='20' fill='%231F3350'/><rect x='0.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='3.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='6.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='9.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='12.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='15.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='18.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='21.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='24.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='27.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='30.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='33.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='36.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='39.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='42.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='45.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='48.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='51.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='54.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='57.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='60.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='63.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='66.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='69.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='72.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='75.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='78.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='81.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='84.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='87.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='90.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='93.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='96.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='99.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='102.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='105.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='108.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='111.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='114.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='117.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='120.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='123.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='126.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='129.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='132.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='135.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='138.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='141.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='144.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='147.0' y='4.0' width='1.1' height='20.0' fill='%23FDFBF5' opacity='.16'/><rect x='0' y='4.0' width='148' height='1.3' fill='%23C9AD82' opacity='.75'/><rect x='0' y='22.7' width='148' height='1.3' fill='%23C9AD82' opacity='.75'/><g transform='translate%2837.0%2C14.0%29 rotate%28-28%29 scale%281.0%29' fill='%23C9AD82'><ellipse cx='0' cy='-2.6' rx='4.6' ry='5.4'/><rect x='-1.05' y='2.4' width='2.1' height='5.1' rx='.95'/><rect x='-1.8' y='6.4' width='3.6' height='2' rx='1'/><g stroke='%231F3350' stroke-width='.72' opacity='.5'><path d='M-2 -7.2 V1.2 M2 -7.2 V1.2 M-4.3 -4.8 H4.3 M-4.3 -0.8 H4.3'/></g></g><g transform='translate%28111.0%2C14.0%29 scale%281.0%29' fill='%23C9AD82'><circle cx='0' cy='-6.6' r='2.4'/><circle cx='0' cy='-6.6' r='1.05' fill='%231F3350'/><rect x='-1.3' y='-5.4' width='2.6' height='12.6' rx='1.2'/><rect x='-4.4' y='-3.6' width='8.8' height='2.3' rx='1.1'/><path d='M-5.6 1.4a5.6 5.6 0 0 0 11.2 0h-2.6a3 3 0 0 1-6 0Z'/></g></svg>");
  /* quiet trim, no motifs */
  --ribbon-sm:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='13' viewBox='0 0 132 13'><rect x='0' y='2.5' width='132' height='8' fill='%236B2430'/><rect x='0.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='3.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='6.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='9.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='12.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='15.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='18.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='21.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='24.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='27.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='30.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='33.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='36.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='39.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='42.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='45.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='48.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='51.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='54.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='57.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='60.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='63.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='66.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='69.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='72.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='75.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='78.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='81.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='84.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='87.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='90.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='93.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='96.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='99.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='102.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='105.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='108.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='111.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='114.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='117.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='120.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='123.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='126.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='129.0' y='2.5' width='1.1' height='8.0' fill='%23FDFBF5' opacity='.14'/><rect x='0' y='2.5' width='132' height='1' fill='%23C9AD82' opacity='.7'/><rect x='0' y='9.5' width='132' height='1' fill='%23C9AD82' opacity='.7'/></svg>");
  /* review-card border-image */
  --frame:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'><rect x='0' y='0' width='54' height='18' fill='%231F3350'/><rect x='0' y='36' width='54' height='18' fill='%231F3350'/><rect x='0' y='18' width='18' height='18' fill='%231F3350'/><rect x='36' y='18' width='18' height='18' fill='%231F3350'/><rect x='18' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='18' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='18' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='18' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='21' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='21' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='21' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='21' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='24' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='24' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='24' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='24' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='27' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='27' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='27' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='27' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='30' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='30' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='30' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='30' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='33' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='33' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='33' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='33' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><path d='M0 0 L0 0' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 0 L0 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M4 0 L0 4' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 4 L4 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M8 0 L0 8' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 8 L8 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M12 0 L0 12' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 12 L12 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M16 0 L0 16' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 16 L16 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M36 0 L36 0' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 0 L36 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M40 0 L36 4' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 4 L40 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M44 0 L36 8' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 8 L44 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M48 0 L36 12' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 12 L48 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M52 0 L36 16' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 16 L52 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M0 36 L0 36' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 36 L0 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M4 36 L0 40' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 40 L4 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M8 36 L0 44' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 44 L8 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M12 36 L0 48' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 48 L12 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M16 36 L0 52' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 52 L16 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M36 36 L36 36' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 36 L36 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M40 36 L36 40' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 40 L40 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M44 36 L36 44' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 44 L44 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M48 36 L36 48' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 48 L48 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M52 36 L36 52' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 52 L52 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><rect x='.7' y='.7' width='52.6' height='52.6' fill='none' stroke='%23C9AD82' stroke-width='1.4' opacity='.8'/><rect x='17.3' y='17.3' width='19.4' height='19.4' fill='none' stroke='%23C9AD82' stroke-width='1.4' opacity='.8'/></svg>");
  /* the oxblood variant */
  --frame-ox:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'><rect x='0' y='0' width='54' height='18' fill='%236B2430'/><rect x='0' y='36' width='54' height='18' fill='%236B2430'/><rect x='0' y='18' width='18' height='18' fill='%236B2430'/><rect x='36' y='18' width='18' height='18' fill='%236B2430'/><rect x='18' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='18' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='18' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='18' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='21' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='21' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='21' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='21' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='24' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='24' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='24' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='24' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='27' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='27' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='27' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='27' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='30' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='30' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='30' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='30' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='33' y='0' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='33' y='36' width='1.1' height='18' fill='%23FDFBF5' opacity='.15'/><rect x='0' y='33' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><rect x='36' y='33' width='18' height='1.1' fill='%23FDFBF5' opacity='.15'/><path d='M0 0 L0 0' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 0 L0 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M4 0 L0 4' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 4 L4 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M8 0 L0 8' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 8 L8 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M12 0 L0 12' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 12 L12 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M16 0 L0 16' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 16 L16 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M36 0 L36 0' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 0 L36 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M40 0 L36 4' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 4 L40 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M44 0 L36 8' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 8 L44 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M48 0 L36 12' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 12 L48 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M52 0 L36 16' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 16 L52 18' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M0 36 L0 36' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 36 L0 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M4 36 L0 40' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 40 L4 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M8 36 L0 44' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 44 L8 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M12 36 L0 48' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 48 L12 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M16 36 L0 52' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M18 52 L16 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M36 36 L36 36' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 36 L36 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M40 36 L36 40' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 40 L40 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M44 36 L36 44' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 44 L44 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M48 36 L36 48' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 48 L48 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M52 36 L36 52' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><path d='M54 52 L52 54' stroke='%23FDFBF5' stroke-width='1' opacity='.13' fill='none'/><rect x='.7' y='.7' width='52.6' height='52.6' fill='none' stroke='%23C9AD82' stroke-width='1.4' opacity='.8'/><rect x='17.3' y='17.3' width='19.4' height='19.4' fill='none' stroke='%23C9AD82' stroke-width='1.4' opacity='.8'/></svg>");

  /* --- the named palette, exactly as Alice set it ----------------------- */
  --ground:#F7F4EC;      /* cream, series-consistent                        */
  --navy:#1F3350;        /* the lead. 11.60 on ground - ink AND surface     */
  --tan:#C9AD82;         /* 1.95 - DECORATIVE ONLY, never text              */
  --ink:#16232F;         /* 14.52                                           */
  --ox:#6B2430;          /* oxblood, 9.95                                   */
  --seer:#A8C4D4;        /* 1.66 - DECORATIVE ONLY, never text              */

  /* --- derived, all measured -------------------------------------------- */
  --tan-dk:#716149;      /* ground 5.45 / card 5.88 / own tint 4.53         */
  --seer-dk:#596870;     /* ground 5.25 / card 5.67 / own tint 4.56         */
  --ink-soft:#3F4B57;    /* ground 8.11 / card 8.77 - subheads, captions    */
  --ink-faint:#55606B;   /* ground 5.84 / card 6.31 - the smallest text     */
  --card:#FFFDF7;
  --cream:#FDFBF5;

  /* The seventh colour, and it has ONE job: the rating. Precedent is
     established - Issue 02 carries a lavender "for tiny stars only" and
     Issue 03 a star lavender for "tiny star details ONLY". A tennis ball
     that is not felt-yellow is not a tennis ball, and this palette had no
     yellow-green, so it is a new tone scoped to a single control. It never
     letters anything: the ball's legibility comes from its navy outline. */
  --felt:#C4CE5A;
  --felt-off:#DED6C4;

  /* The EIGHTH colour, racing green, and it follows the same one-job rule as
     --felt. Alice asked for a minimal dark green and she was right that the
     palette was missing the one note every club actually wears.

     Measured before it was allowed in: 10.94:1 on the page ground, 11.62:1
     with cream on it, and - the check that decided WHICH green - deltaE 21
     from Issue 04's forest #4A6741. The other candidates tried sat at 15-18,
     close enough to read as Basecamp's green in a different hat. It is also
     deltaE 38 from navy and 57 from oxblood, so it reads as a third colour on
     this page rather than a shade of what is already here.

     TWO JOBS, both literal - the green thing is a green thing, which is the
     same discipline as the cloth-coding:
       1. the crest's laurel sprigs (in the inlined SVG, not this file)
       2. the court in the line-call panel - its wash and its keyline

     It is deliberately NOT used for "within limit" against oxblood for
     "breaching". Section 05 of this very page spends four paragraphs arguing
     that green/red is the wrong pairing for above-or-below a baseline; using
     it two screens earlier would have the page contradict itself. */
  --green:#013F2A;
  --green-wash:#E6E7DE;   /* 7% racing green over the ground; ink on it 12.81 */

  /* tints - solved against their own accent, see the header note */
  --navy-tint:rgba(31,51,80,.10);
  --navy-tint-2:rgba(31,51,80,.19);
  --ox-tint:rgba(107,36,48,.10);
  --tan-tint:rgba(201,173,130,.22);
  --seer-tint:rgba(168,196,212,.26);

  --rule:rgba(31,51,80,.20);
  --rule-firm:rgba(31,51,80,.42);
  --rule-tan:rgba(201,173,130,.62);

  /* faces. Two display faces, each fenced to one job - the Issue 06
     precedent. Fraunces titles ONLY; Cinzel labels, badges and small caps. */
  --body:'Lora',Georgia,serif;
  --code:'Courier Prime',ui-monospace,Menlo,monospace;
  --hand:'Caveat',ui-rounded,cursive;
  --display:'Fraunces',Georgia,serif;
  --label:'Cinzel','Times New Roman',serif;

  --wrap:900px;
  --shadow:0 2px 0 rgba(31,51,80,.07),0 8px 22px -14px rgba(22,35,47,.5);
}

/* ---------------------------------------------------------------------------
   base
--------------------------------------------------------------------------- */
*{box-sizing:border-box;}

/* clip, NEVER hidden. `hidden` makes body a scroll container and every
   position:sticky descendant silently stops sticking - the Issue 06 lesson. */
html{scroll-behavior:smooth;}
body.issue-08{
  margin:0;background-color:var(--ground);background-image:var(--pinstripe);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.66;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px 60px;}

p{max-width:68ch;margin:0 0 1.05em;}
a{color:var(--navy);text-underline-offset:2px;text-decoration-thickness:1px;}
a:hover{color:var(--ox);}
b,strong{font-weight:700;}
code{font-family:var(--code);font-size:.92em;background:var(--tan-tint);
  padding:.08em .34em;border-radius:3px;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

:focus-visible{outline:2.5px solid var(--ox);outline-offset:2px;border-radius:2px;}

/* ---------------------------------------------------------------------------
   the crest, and the masthead it sits over
--------------------------------------------------------------------------- */
.crest-row{display:flex;justify-content:center;padding:30px 0 8px;}

/* The seal is a link home on every letter in this series. The wrapper carries
   its layout INLINE in the markup for the circular seals; here the crest is
   the flex item itself, so it is styled properly instead. */
.seal-link{display:block;line-height:0;text-decoration:none;flex:none;
  width:min(300px,86vw);transition:transform .18s ease;}
.seal-link:hover{transform:translateY(-2px);}
.seal{display:block;width:100%;height:auto;
  filter:drop-shadow(0 6px 14px rgba(22,35,47,.22));}

/* THE MASTHEAD - a two-zone club nameplate.

   Alice's note after the first build: the top of this page has to feel
   "members only", more Ralph Lauren, and carry NO handwriting. So the
   masthead splits.

   ZONE 1, .plaque - navy, reversed out, an engraved double rule inset from
   the edge, everything centred and letterspaced Cinzel except the Fraunces
   title. This is the nameplate: it is meant to read as an enamelled plaque
   screwed to a door, which is why it is a dark SURFACE rather than a cream
   card with dark type. Series precedent for an accent leading as a surface
   rather than an ink is Issue 07, where blue does exactly this.

   ZONE 2, .masthead-inner - stays on cream. The standing paragraph runs six
   lines and six lines of reversed-out text is a worse read at any contrast
   ratio. Engraved header, notice underneath, which is how the real object is
   laid out anyway.

   NO CAVEAT ANYWHERE IN HERE. It is a cross-series constant and it still runs
   through this issue's ledes, the live panel's footnote and the signed
   marginal note - it is only the nameplate that is now formal. Worth flagging
   if a future letter wonders why this one has no cursive strapline.

   Reversed-out contrast, measured: cream on navy 12.32, tan on navy 5.94.
   Seersucker on navy would also clear at 6.99, but the palette reads better
   with the plaque held to two inks, so tan does all the small lettering. */
.masthead{
  margin:14px 0 0;border:1.5px solid var(--rule-tan);border-radius:4px;
  background:var(--card);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}

.plaque{
  background:var(--navy);padding:38px 30px 32px;text-align:center;
  position:relative;
}
/* The engraved frame: two hairlines at different weights, inset from the
   edge. One line reads as a border; two at different strengths read as
   engraving, which is the whole difference. */
.plaque::before{content:"";position:absolute;inset:10px;
  border:1px solid rgba(201,173,130,.55);pointer-events:none;}
.plaque::after{content:"";position:absolute;inset:14px;
  border:1px solid rgba(201,173,130,.26);pointer-events:none;}

.eyebrow{margin:0 0 18px;max-width:none;}
/* An outlined tag, not a filled pill - a filled navy pill on a navy plaque is
   invisible. Right padding is SMALLER than left on purpose: letter-spacing
   adds its space after every character including the last, so equal padding
   always looks right-heavy on tracked caps. */
.oval-label{
  display:inline-block;font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--tan);
  background:transparent;padding:6px 12px 6px 16px;border-radius:0;
  border:1px solid rgba(201,173,130,.55);
}
.masthead h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(42px,7.6vw,72px);line-height:1.0;letter-spacing:-.012em;
  margin:0;color:var(--cream);max-width:none;
}
/* A rule broken by a lozenge, echoing the three on the crest's chief. The
   rules fade at their outer ends so the ornament reads as engraved rather
   than as a divider bar. */
.mast-orn{
  display:flex;align-items:center;justify-content:center;gap:13px;
  margin:16px auto;max-width:330px;max-width:min(330px,80%);
  color:var(--tan);font-size:9px;line-height:1;
}
.mast-orn span{flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,173,130,.85));}
.mast-orn span:last-child{
  background:linear-gradient(90deg,rgba(201,173,130,.85),transparent);}
.mast-sub{
  font-family:var(--label);font-weight:400;
  font-size:clamp(11px,1.45vw,13px);line-height:1.95;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--tan);margin:0 auto;max-width:46ch;
  /* Tracked caps wrap early and this line was leaving "PROVED" alone on a
     third line. balance evens the lines out instead of filling greedily;
     browsers without it just get the greedy wrap, which is the old state. */
  text-wrap:balance;
}

.masthead-inner{padding:26px 26px 24px;}
.mast-line{font-size:16.5px;color:var(--ink-soft);margin:0;max-width:64ch;}

/* THE SPEC LINE. Four rounded chips read as web UI; a single ruled row of
   tracked small caps separated by lozenges reads as the details block on a
   membership card, which is the register this page is now in. */
.pills{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0;
  margin:20px 0 0;padding:14px 0 0;list-style:none;
  border-top:1px solid var(--rule-tan);
}
.pill{
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tan-dk);padding:3px 0;
}
.pill + .pill::before{
  content:"\25C6";margin:0 13px;color:var(--tan);font-size:7px;
  vertical-align:.24em;letter-spacing:0;
}
/* the module names are code, so they are set as code */
.pill.mono{font-family:var(--code);text-transform:none;letter-spacing:.01em;
  font-size:12.5px;color:var(--ink-soft);}

/* ---------------------------------------------------------------------------
   the sticker legend - houndstooth, because these are swatches
--------------------------------------------------------------------------- */
.kit-strip{
  margin:26px 0 0;padding:16px 18px;border:1.5px solid var(--rule-tan);
  border-radius:4px;background-color:var(--ground);background-image:var(--houndstooth);
}
.kit-strip h2{
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;
}
.stickers{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;}
.sticker{display:flex;align-items:center;gap:8px;
  font-family:var(--label);font-weight:700;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
  background:var(--cream);padding:5px 11px 5px 7px;border-radius:999px;
  border:1px solid var(--rule-tan);}
.sticker .ico{position:relative;display:block;width:26px;height:26px;flex:none;}
.sticker .ico svg{width:26px;height:26px;display:block;}

/* ---------------------------------------------------------------------------
   contents
--------------------------------------------------------------------------- */
.toc{margin:26px 0 0;padding:18px 22px 20px;border:1.5px solid var(--rule-tan);
  border-radius:4px;background:var(--card);box-shadow:var(--shadow);}
.toc h2{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 12px;}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;}
.toc li{counter-increment:toc;margin:0 0 7px;padding-left:38px;position:relative;
  font-size:16.5px;}
/* counter + ::before rather than a list-style, because these <li>s are laid
   out and display:flex on a list item silently kills its ::marker */
.toc li::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-family:var(--label);font-weight:700;font-size:12px;color:var(--tan-dk);
  letter-spacing:.06em;
}
.toc a{text-decoration-color:var(--rule-tan);}

/* ---------------------------------------------------------------------------
   the pennant - ONE flag, the part-marker. Not a repeating string: Issue 04
   uses a signpost and Issue 05 a bunting run, and this issue's equivalent is
   a single yacht-club burgee.
   .part-marker is a <p>, and any <p> inherits p{max-width:68ch} - which has
   bitten twice in this series, centring furniture inside the measure instead
   of the page. max-width:none up front.
--------------------------------------------------------------------------- */
.part-marker{max-width:none;margin:46px 0 6px;display:flex;justify-content:center;}
.pennant{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);
  background:var(--navy);padding:11px 46px 11px 22px;
  border-top:2px solid var(--tan);border-bottom:2px solid var(--tan);
}
/* the swallow tail, cut out of the right-hand end */
.pennant::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:30px;
  background:var(--ground);
  clip-path:polygon(100% 0,100% 100%,0 50%);
}

/* ---------------------------------------------------------------------------
   sections
--------------------------------------------------------------------------- */
.part{margin:0 0 12px;padding:26px 0 0;}
.part-head{display:flex;align-items:flex-start;gap:16px;margin:0 0 14px;}

/* THE SECTION BADGE - a chevron shield, not the postage-stamp square every
   other issue uses. Built with clip-path rather than a generated SVG
   data-URI: the stamp perforations needed an SVG because notches have to be
   computed along a perimeter, but a shield is one convex polygon and
   clip-path draws it in a line. */
/* THE BOTTOM PADDING IS LOAD-BEARING. The chevron tapers from 66% of the
   badge's height, so anything sitting below that line is clipped by the two
   diagonals - not by the 64px width. Measured, the denom sat at 75% down,
   where only 46.7px is available: PORTFOLIO (59px) overflowed by 12.4 and
   SHIPPING by 3.3. Padding the tail out pushes the text back up into the
   full-width part of the shield rather than shrinking it to fit a point.
   Only the point gets longer; the badge is otherwise untouched. */
.part-num{
  flex:none;display:flex;flex-direction:column;align-items:center;
  width:64px;padding:9px 0 30px;margin:0;max-width:none;
  background:var(--tan);color:var(--cream);
  clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%);
  position:relative;
}
/* THE GOLD RIM. It cannot be a `border`: clip-path clips the border along
   with everything else, so the two diagonals of the chevron would come out
   bare while the straight edges kept their line. Instead the element itself
   is gold and a pseudo-element holds the navy, inset and clipped to the same
   polygon - so the gold that shows is the rim. Inset 1.6px reads as roughly
   1.6-2.2px depending on the edge, because a uniform box inset is a slightly
   larger perpendicular offset on a diagonal than on a straight edge; that
   variance is what makes it look drawn rather than stroked. */
.part-num::before{
  content:"";position:absolute;inset:1.6px;background:var(--navy);
  clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%);
}
/* the icon, number and label have to sit ABOVE the inset navy plate: an
   absolutely positioned pseudo-element paints over static in-flow content */
.part-num > *{position:relative;}
.part-num svg{width:22px;height:22px;display:block;}
.part-num .no{font-family:var(--display);font-weight:800;font-size:21px;
  line-height:1;margin-top:4px;}
/* tracking eased from .13em: on a 9-character word that alone was ~4px */
.part-num .denom{font-family:var(--label);font-weight:700;font-size:8px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tan);margin-top:3px;}

.part-titles{flex:1 1 auto;min-width:0;}
/* Scoped to .part-titles h2, never bare h2 - on this page h2 is also the
   TOC's and the legend's small tracked label, which must stay Cinzel. */
.part-titles h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.7vw,37px);line-height:1.1;letter-spacing:-.01em;
  margin:0;color:var(--navy);
}
.part-titles .tag{
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tan-dk);margin:7px 0 0;max-width:none;
}

.lede{font-family:var(--hand);font-size:23px;line-height:1.42;color:var(--ox);
  margin:0 0 18px;max-width:56ch;}

h3{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.25;
  margin:26px 0 8px;color:var(--navy);}

/* ---------------------------------------------------------------------------
   the divider - grosgrain ribbon, one racket and one anchor per 148px
--------------------------------------------------------------------------- */
.rule{border:0;margin:36px 0 0;height:28px;
  background:var(--ribbon) repeat-x center/auto 28px;}

/* ---------------------------------------------------------------------------
   code blocks
--------------------------------------------------------------------------- */
.code{margin:0 0 20px;border:1.5px solid var(--navy);border-radius:4px;
  background:var(--ink);overflow:hidden;}
.code-label{
  display:flex;align-items:center;gap:10px;padding:7px 12px;
  background:var(--navy);color:var(--tan);
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;
}
/* margin-left:auto so a third flex child (the copy button) cannot re-centre
   the handwritten note - needed on every issue in this series */
.code-label .rhs{margin-left:auto;font-family:var(--hand);font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--seer);}
.code pre{margin:0;padding:14px 16px;overflow-x:auto;
  font-family:var(--code);font-size:14px;line-height:1.6;color:#E6EAF0;}
.code .cm{color:var(--seer);font-family:var(--hand);font-size:16px;}
.code .k{color:var(--felt);}
.code .s{color:#E9B7A6;}

.copy-btn{
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;
  background:transparent;color:var(--tan);border:1px solid rgba(201,173,130,.5);
  border-radius:999px;padding:3px 10px;margin-left:8px;
}
.copy-btn:hover{background:rgba(201,173,130,.16);}
.copy-btn.done{color:var(--felt);border-color:var(--felt);}
.copy-btn.failed{color:#F0B8AC;border-color:#F0B8AC;}

/* ---------------------------------------------------------------------------
   tables
--------------------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;margin:0 0 20px;border:1.5px solid var(--rule-tan);
  border-radius:4px;background:var(--card);}
table{border-collapse:collapse;width:100%;font-size:15px;}
thead th{
  background:var(--navy);color:var(--cream);
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;text-align:left;padding:9px 12px;white-space:nowrap;
}
tbody td,tbody th{padding:8px 12px;border-top:1px solid var(--rule);text-align:left;
  font-variant-numeric:tabular-nums;}
tbody th{font-weight:600;white-space:nowrap;}
tbody tr:nth-child(even){background:rgba(201,173,130,.09);}
tbody tr.total td,tbody tr.total th{border-top:2px solid var(--navy);font-weight:700;
  background:var(--navy-tint);}
td.num,th.num{text-align:right;}
td.pos{color:var(--tan-dk);}
td.neg{color:var(--ox);}

/* ---------------------------------------------------------------------------
   CALLOUTS - tartan, with a Cinzel corner badge.

   Alice asked for tennis vocabulary on these: MATCH POINT, A FAULT,
   CLUBHOUSE NOTICE. That crosses the rule she set on Issue 07, where callout
   tags are literal and only the pixels carry the theme. The resolution built
   here keeps both: the themed name is a BADGE - furniture, in the same
   position and role as a stamp - and the .tag underneath is still the plain
   descriptive sentence that does the navigational work. Nothing a reader has
   to decode is themed.
--------------------------------------------------------------------------- */
.callout{
  position:relative;margin:0 0 22px;padding:34px 20px 16px;
  border:1.5px solid var(--rule-tan);border-left:5px solid var(--navy);
  border-radius:3px;
  background-color:var(--ground);background-image:var(--tartan);
}
.callout .tag{
  font-family:var(--display);font-weight:700;font-size:17px;line-height:1.3;
  color:var(--navy);margin:0 0 6px;max-width:none;
}
.callout p:last-child{margin-bottom:0;}
.callout .badge{
  position:absolute;top:-1.5px;left:-5px;
  font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream);background:var(--navy);
  padding:4px 13px 4px 12px;border-radius:0 0 3px 0;
}
.callout.fault{border-left-color:var(--ox);}
.callout.fault .badge{background:var(--ox);}
.callout.fault .tag{color:var(--ox);}
.callout.notice{border-left-color:var(--tan-dk);}
.callout.notice .badge{background:var(--tan-dk);}

/* The one deliberately UNPATTERNED box. Issue 07 learned that six patterned
   surfaces need one quiet one or the eye never rests; that page's off-piste
   callout is plain for exactly this reason and Alice asked for it to stay
   plain. This is the same move: the roadmap box is one flat wash. */
.callout.plain{background-image:none;background-color:#F4F1E7;}

/* ---------------------------------------------------------------------------
   SECTION REVIEW CARDS - oxford shirting inside a grosgrain ribbon border
--------------------------------------------------------------------------- */
.recap{
  margin:26px 0 0;
  border:16px solid transparent;border-image:var(--frame) 18 round;
  background-color:var(--card);background-image:var(--oxford);
  position:relative;
}
.recap-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px 10px;border-bottom:1.5px dashed var(--rule-firm);
}
.recap-head h4{
  font-family:var(--label);font-weight:700;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--navy);margin:0;
}

/* CARD NUMBER - a scoreboard, filling one game at a time. Numbered as CARDS
   and sequentially: the displayed number is its position, while the
   data-note / data-rating keys keep their own numbers so renumbering the
   display can never orphan a note already in localStorage. */
.card-no{display:flex;align-items:center;gap:3px;}
.card-no i{display:block;width:9px;height:13px;border:1px solid var(--navy);
  border-radius:1px;background:transparent;}
.card-no i.on{background:var(--navy);}

.recap dl{margin:0;padding:14px 16px 4px;}
.recap dt{font-size:14.5px;color:var(--ink-soft);margin:0 0 2px;}
.recap dd{margin:0 0 14px;}
.recap dd.plain{font-size:16px;color:var(--ink);}

/* THE WRITE-IN BOX. The house component - all five earlier cards share this
   construction and Alice compared them directly, so it is copied rather than
   re-derived: ruled lines drawn straight onto the card, no border, no fill,
   no radius, and a placeholder SMALLER than the writing size (18 against 20)
   so the prompt reads as a prompt. The box is 1px padding + exactly one 28px
   line + the rule, which is what stops a rule floating in dead space. Keep
   it a repeating gradient, not a border-bottom, so a second typed line gets
   ruled too. Only the ink colour changes per issue; here it is navy. */
.recap .write{
  margin-top:6px;padding:1px 4px 0;
  font-family:var(--hand);font-size:20px;line-height:28px;color:var(--navy);
  caret-color:var(--ox);
  min-height:30px;
  border-bottom:1px solid var(--rule-firm);
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 27px,var(--rule-firm) 27px 28px);
  outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
}
.recap .write:empty::before{content:attr(data-hint);color:var(--ink-faint);
  opacity:.75;font-size:18px;}
.recap .write:focus{background-color:var(--seer-tint);border-radius:2px;}

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

/* THE RATING SYMBOL - tennis balls. Every other shape in the series is
   spoken for: merit patches are Issue 04's, stars Issue 02's, moon phases
   Issue 03's, flowers Issue 06's, snowflakes Issue 07's. Unearned, a ball is
   a pale outline; earned, it takes the felt and its seam shows, so a filled
   ball has interior detail rather than being a flat dot. */
.pip{background:none;border:0;padding:2px;cursor:pointer;line-height:0;
  color:var(--felt-off);transition:color .13s ease,transform .13s ease;}
.pip svg{width:23px;height:23px;display:block;}
.pip:hover{transform:translateY(-1px);}
.pip.on{color:var(--felt);}
.saved{font-family:var(--hand);font-size:16px;color:var(--tan-dk);
  opacity:0;transition:opacity .2s ease;}
.saved.on{opacity:1;}

/* ---------------------------------------------------------------------------
   INTERACTIVE 1 - the live end-of-day panel  (seersucker, the only place)

   PROGRESSIVE ENHANCEMENT, strictly, as everywhere in this series: the panel
   ships with a real worked pair of days in the markup, every control carries
   `hidden`, and all live rules are scoped under .is-live which the script
   adds. With JavaScript off this is one legible worked example - no dead
   buttons, nothing greyed out.

   Note the explicit [hidden] guard after every display rule. The HTML hidden
   attribute LOSES to any class that sets display, which is how Issue 05
   shipped four live dead buttons and Issue 03 an empty tinted bar.
--------------------------------------------------------------------------- */
.eod{
  margin:0 0 24px;border:1.5px solid var(--navy);border-radius:4px;
  background-color:var(--card);background-image:var(--seersucker);
  overflow:hidden;
}
.eod-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;background:var(--navy);color:var(--cream);}
.eod-head h3{margin:0;font-family:var(--label);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream);}
.eod-live{margin-left:auto;display:flex;align-items:center;gap:6px;
  font-family:var(--label);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tan);}
/* The HTML `hidden` attribute LOSES to any class that sets display, so this
   guard is not optional - without it the "live" lamp renders with JavaScript
   off, announcing a live feed that is not running. Same failure as Issue 03's
   .probe-cmd and Issue 05's .sm-controls; caught here by the JS-off check in
   shot-i08func.js rather than by reading the markup, which is the only way it
   is ever caught. */
.eod-live[hidden]{display:none;}
/* TAN, not --felt. This file declares --felt as the rating's colour and
   nothing else, and a status lamp is a second job. It is decoration anyway:
   the word LIVE next to it carries the meaning, which is exactly what
   section 05 argues for. */
.eod-live::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tan);}
.eod-body{padding:16px 14px 14px;}

.eod-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
  margin:0 0 16px;padding:0 0 14px;border-bottom:1px dashed var(--rule-firm);}
.eod-controls[hidden]{display:none;}
.eod-field{display:flex;flex-direction:column;gap:4px;}
.eod-field label{font-family:var(--label);font-weight:700;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);}
.eod-field select,.eod-field input{
  font-family:var(--body);font-size:15px;padding:6px 9px;
  border:1.5px solid var(--navy);border-radius:3px;background:var(--cream);
  color:var(--ink);
}
.eod-nudge{display:flex;gap:5px;}
.eod-nudge button{
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.08em;
  padding:7px 11px;cursor:pointer;border:1.5px solid var(--navy);border-radius:3px;
  background:var(--cream);color:var(--navy);
}
.eod-nudge button:hover:not(:disabled){background:var(--navy);color:var(--cream);}
.eod-nudge button:disabled{opacity:.4;cursor:not-allowed;}

.eod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin:0 0 14px;}
.eod-cell{background:var(--cream);border:1.5px solid var(--rule-tan);
  border-radius:3px;padding:10px 12px;}
.eod-cell .k{font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  display:block;margin:0 0 3px;}
.eod-cell .v{font-family:var(--display);font-weight:700;font-size:23px;
  line-height:1.1;color:var(--navy);display:block;font-variant-numeric:tabular-nums;}
.eod-cell .u{font-size:13px;color:var(--ink-faint);display:block;margin-top:2px;}
/* OPAQUE. As a translucent tint it sat over the seersucker beneath and
   composited to a flat grey - the Issue 06 lesson about rgba() needing to be
   composited down the ancestor chain, hit from the design side instead. */
.eod-cell.total{background:#EDF0F4;border-color:var(--navy-tint-2);
  box-shadow:inset 3px 0 0 var(--navy);}

.eod-split{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.eod-chip{
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.07em;
  padding:6px 12px;border-radius:999px;border:1px solid var(--navy-tint-2);
  background:var(--navy-tint);color:var(--navy);font-variant-numeric:tabular-nums;
}
.eod-chip.dn{background:var(--ox-tint);color:var(--ox);
  border-color:rgba(107,36,48,.24);}
.eod-read{font-size:15.5px;color:var(--ink-soft);margin:0;max-width:64ch;}
.eod-note{font-family:var(--hand);font-size:16px;color:var(--tan-dk);margin:10px 0 0;
  max-width:none;}
.eod-err{margin:10px 0 0;padding:9px 12px;border-left:4px solid var(--ox);
  background:var(--ox-tint);font-size:14.5px;color:var(--ox);max-width:none;}
.eod-err[hidden]{display:none;}

/* ---------------------------------------------------------------------------
   INTERACTIVE 2 - add versus compound
--------------------------------------------------------------------------- */
.tie{margin:0 0 24px;border:1.5px solid var(--rule-tan);border-radius:4px;
  background:var(--card);overflow:hidden;}
.tie-head{padding:9px 14px;background:var(--tan-dk);color:var(--cream);
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;}
.tie-body{padding:15px 14px 14px;}
.tie-controls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px;}
.tie-controls[hidden]{display:none;}
.tie-btn{
  font-family:var(--label);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  padding:8px 14px;cursor:pointer;border:1.5px solid var(--navy);border-radius:3px;
  background:var(--cream);color:var(--navy);
}
.tie-btn[aria-pressed="true"]{background:var(--navy);color:var(--cream);}
.tie-sum{font-family:var(--code);font-size:15px;line-height:1.9;
  background:var(--ground);border:1px solid var(--rule-tan);border-radius:3px;
  padding:12px 14px;margin:0 0 12px;overflow-x:auto;}
/* tan, NOT --felt. This file says --felt has one job and never letters
   anything; a highlighter with text on it is lettering. */
.tie-sum .hl{background:var(--tan-tint);box-shadow:0 0 0 1px rgba(201,173,130,.5);
  padding:0 4px;border-radius:2px;font-weight:700;}
.tie-verdict{display:flex;align-items:center;gap:9px;
  font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 8px;}
.tie-verdict .mark{width:20px;height:20px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--cream);font-size:12px;}
.tie-verdict.ok .mark{background:var(--tan-dk);}
.tie-verdict.no .mark{background:var(--ox);}
.tie-verdict.ok{color:var(--tan-dk);}
.tie-verdict.no{color:var(--ox);}
.tie-read{font-size:15.5px;color:var(--ink-soft);margin:0;max-width:64ch;}

/* ---------------------------------------------------------------------------
   INTERACTIVE 3 - the line call
--------------------------------------------------------------------------- */
.call{margin:0 0 24px;border:1.5px solid var(--navy);border-radius:4px;
  background:var(--card);overflow:hidden;}
.call-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;background:var(--navy);color:var(--cream);
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;}
.call-body{padding:16px 14px 14px;}
.call-controls{margin:0 0 16px;}
.call-controls[hidden]{display:none;}
.call-controls label{display:block;font-family:var(--label);font-weight:700;
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 7px;}
.call-controls input[type=range]{width:100%;accent-color:var(--ox);}
.call-now{font-family:var(--display);font-weight:800;font-size:21px;
  color:var(--ox);font-variant-numeric:tabular-nums;}

/* the court: five holdings as rows, the threshold as a line across them */
/* The court reads as a court: a faint green wash and a green keyline. The
   BARS are untouched - they sit on their own cream tracks, so nothing about
   pass or fail is being carried by this colour. */
.court{position:relative;border:1.5px solid var(--green);border-radius:3px;
  background:var(--green-wash);padding:12px 12px 12px;margin:0 0 14px;}
.court-row{display:grid;grid-template-columns:78px 1fr 92px;align-items:center;
  gap:10px;padding:6px 0;font-size:14.5px;}
.court-row .tk{font-family:var(--code);font-size:13.5px;color:var(--ink-soft);}
/* The track runs 0% at the RIGHT edge to -2.00% at the left, so every bar
   grows leftwards from zero and the threshold is one vertical line across
   all five. A bar reaching past that line is breaching - which is the whole
   point of drawing it this way rather than as five separate gauges. */
.court-bar{position:relative;height:17px;background:var(--cream);
  border:1px solid var(--rule-tan);border-radius:2px;overflow:hidden;}
.court-bar .fill{position:absolute;right:0;top:0;bottom:0;background:var(--seer);
  display:block;width:0;transition:width .12s linear,background-color .12s linear;}
.court-row.out .court-bar .fill{background:var(--ox);}
.court-line{position:absolute;top:0;bottom:0;width:2px;background:var(--ox);
  z-index:2;pointer-events:none;}
.court-line::after{content:"";position:absolute;left:-3px;top:-4px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--ox);}
.court-track{position:relative;}
.court-axis{display:grid;grid-template-columns:78px 1fr 92px;gap:10px;
  margin:2px 0 0;}
.court-axis .ends{display:flex;justify-content:space-between;
  font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  color:var(--ink-faint);}
.court-state{font-family:var(--label);font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;text-align:right;
  color:var(--tan-dk);}
.court-row.out .court-state{color:var(--ox);}
.court-count{font-size:15px;color:var(--ink-soft);margin:0;max-width:64ch;}
.court-count b{color:var(--ox);}

/* ---------------------------------------------------------------------------
   INTERACTIVE 4 - the colour-vision check
--------------------------------------------------------------------------- */
.vis{margin:0 0 24px;border:1.5px solid var(--rule-tan);border-radius:4px;
  background:var(--card);overflow:hidden;}
.vis-head{padding:9px 14px;background:var(--ox);color:var(--cream);
  font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;}
.vis-body{padding:15px 14px 14px;}
.vis-controls{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;}
.vis-controls[hidden]{display:none;}
.vis-group{display:flex;flex-direction:column;gap:5px;}
.vis-group .lbl{font-family:var(--label);font-weight:700;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);}
.vis-group .btns{display:flex;gap:5px;}
.vis-btn{font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.07em;
  padding:6px 11px;cursor:pointer;border:1.5px solid var(--navy);border-radius:3px;
  background:var(--cream);color:var(--navy);}
.vis-btn[aria-pressed="true"]{background:var(--navy);color:var(--cream);}
.vis-chart{border:1px solid var(--rule-tan);border-radius:3px;background:var(--ground);
  padding:12px;margin:0 0 12px;}
.vis-chart svg{width:100%;height:auto;display:block;}
.vis-read{font-size:15.5px;color:var(--ink-soft);margin:0;max-width:64ch;}
.vis-read b{color:var(--ox);}

/* ---------------------------------------------------------------------------
   footer
--------------------------------------------------------------------------- */
.foot{margin:46px 0 0;padding:26px 0 0;border-top:2px solid var(--rule-tan);}
.issue-nav{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 20px;}
/* 430px, matching Issues 04-07. The wrap is 900 with 22px padding, so this
   row is 856 and a pair with a 14px gap wants 421 each - 430 lets two fill
   the measure, Previous flush left and Next flush right. A LONE card still
   needs the cap or it stretches the whole 856. */
.issue-card{
  flex:1 1 240px;max-width:430px;display:flex;align-items:center;gap:13px;
  padding:13px 15px;text-decoration:none;
  border:1.5px solid var(--rule-tan);border-radius:3px;
  background:var(--card);
  box-shadow:var(--shadow);
}
.issue-card:hover{border-color:var(--navy);}
.ic-icon{flex:none;width:38px;height:38px;display:grid;place-items:center;
  background:var(--navy);border-radius:3px;}
.ic-icon svg{width:26px;height:26px;}
.ic-body{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ic-kicker{font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tan-dk);}
.ic-title{font-family:var(--display);font-weight:700;font-size:19px;
  color:var(--navy);line-height:1.15;}
.ic-note{font-family:var(--hand);font-size:15px;color:var(--ink-faint);}

.foot-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--code);font-size:13px;color:var(--ink-faint);max-width:none;}
.foot-line .mark{width:18px;height:18px;flex:none;}
/* THE ATTESTATION. A scorecard's defining ritual is that it is signed - by
   the player and by a marker - or it does not count. This is the page's
   ending, and the one place handwriting belongs at full strength, because a
   signature IS handwriting. Capped at 430px to match the footer nav cards. */
.attest{
  margin:22px 0 0;padding:15px 18px 14px;max-width:430px;
  border:1.5px solid var(--rule-tan);border-radius:3px;background:var(--card);
}
.attest-head{font-family:var(--label);font-weight:700;font-size:9.5px;
  letter-spacing:.19em;text-transform:uppercase;color:var(--tan-dk);
  margin:0 0 13px;max-width:none;}
.attest-row{display:flex;gap:24px;flex-wrap:wrap;}
.attest-field{flex:1 1 140px;min-width:0;}
.attest-val{display:block;font-family:var(--hand);font-size:22px;line-height:1.15;
  color:var(--navy);padding:0 2px 2px;white-space:nowrap;}
.attest-val.date{font-family:var(--code);font-size:13.5px;color:var(--ink-soft);
  padding-bottom:6px;}
.attest-line{display:block;border-bottom:1px solid var(--rule-firm);}
.attest-lbl{display:block;margin-top:5px;font-family:var(--label);font-weight:700;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.attest-note{margin:13px 0 0;font-size:13.5px;line-height:1.5;
  color:var(--ink-faint);max-width:none;}

/* ---------------------------------------------------------------------------
   narrow. The narrower query goes LAST: equal specificity is decided by
   source order, and a padding shorthand in a later block silently wipes a
   padding-bottom set in an earlier one. Issue 06 hit this twice in a session.
--------------------------------------------------------------------------- */
@media (max-width:700px){
  body.issue-08{font-size:16.5px;}
  .wrap{padding:0 15px 46px;}
  .plaque{padding:28px 18px 24px;}
  .masthead-inner{padding:20px 17px 19px;}
  .part-head{gap:12px;}
  .part-num{width:54px;}
  .eod-grid{grid-template-columns:1fr;}
  .court-row{grid-template-columns:66px 1fr;row-gap:2px;}
  .court-state{grid-column:2;text-align:left;}
  .recap{border-width:13px;}
}
@media (max-width:460px){
  .crest-row{padding:20px 0 4px;}
  .seal-link{width:min(300px,94vw);}
  .plaque{padding:24px 13px 20px;}
  .masthead-inner{padding:17px 14px 16px;}
  .plaque::before{inset:7px;} .plaque::after{inset:10px;}
  .stickers{gap:7px 12px;}
  .pennant{padding:9px 40px 9px 16px;font-size:11px;letter-spacing:.15em;}
}

/* Respect a reduced-motion preference: every transition here is decoration. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;}
  html{scroll-behavior:auto;}
}