/* ---------------------------------------------------------------------------
   /learn/ reference pages - shared skin.  "Themed snail mail" edition.

   Hand-authored pages, not built by itinerary-gen. Two one-off documents have
   nothing to de-duplicate, so a build step between the file and the browser
   would be friction with no payoff. The one thing they DO share is this
   stylesheet - said once here, used by both.

   The conceit: each page is one issue of an illustrated mail-club package.
   Coastal stationery - dusty blue card, powder dots, perforated postage,
   a wax seal, typed letters, ruled fill-in cards.

   Six colours, five fonts, each with exactly one job.
--------------------------------------------------------------------------- */

:root{
  /* --- the six named colours --- */
  --paper:#F6F1E7;     /* cream writing paper - page ground               */
  --powder:#C3D9E3;    /* powder blue - dotted textures, light fills      */
  --dusty:#6C8EA0;     /* dusty blue - headers, seal, structure           */
  --navy:#2A3E4E;      /* navy ink - all text                             */
  --card:#EFE8DA;      /* off-white card - secondary fills                */
  --coral:#C15C4F;     /* coral - sparingly, warm touch only              */

  /* --- derived, all mixed from the six ---------------------------------- */
  --navy-soft:#4B6072;
  --navy-faint:#7D8F9C;
  --rule:#D6CFC0;          /* pencil rule on cream                        */
  --rule-firm:#BFB6A4;
  --dusty-tint:rgba(108,142,160,.10);
  --dusty-tint-2:rgba(108,142,160,.18);
  --powder-tint:rgba(195,217,227,.42);
  --coral-tint:rgba(193,92,79,.09);

  /* --- five fonts, five jobs -------------------------------------------- */
  --marker:"Permanent Marker",cursive;                  /* the page title   */
  --hand:"Caveat","Bradley Hand",cursive;               /* annotations      */
  --block:"Baloo 2","Trebuchet MS",system-ui,sans-serif;/* punchy labels    */
  --body:"Lora",Georgia,"Times New Roman",serif;        /* all paragraphs   */
  --type:"Special Elite","Courier New",serif;           /* typed letters    */

  /* Code wants a TRUE monospace or the aligned comments and the SQL table
     below fall out of column. Courier Prime is the same typewriter world as
     Special Elite but is actually fixed-width. Swap the first entry for
     "Special Elite" if you prefer the look over the alignment. */
  --code:"Courier Prime","Special Elite","Courier New",monospace;

  --r:6px;             /* the one corner radius                            */
}

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

/* ---------- the page ground ---------------------------------------------
   Just the cream paper and a faint watercolour wave wash, fixed behind
   everything. The dot texture belongs to the sticker sheet, not the whole page.
   ------------------------------------------------------------------------ */
body{
  margin:0;
  color:var(--navy);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='620' viewBox='0 0 1200 620'%3E%3Cg fill='none' stroke='%236C8EA0' stroke-width='16' stroke-linecap='round' opacity='0.13'%3E%3Cpath d='M-60 120 C 120 60, 260 190, 440 130 S 760 60, 940 140 S 1200 190, 1320 120'/%3E%3Cpath d='M-60 196 C 140 140, 250 264, 452 202 S 748 140, 952 214 S 1200 258, 1320 196'/%3E%3Cpath d='M-60 400 C 150 344, 270 470, 470 406 S 770 342, 966 418 S 1200 462, 1320 400'/%3E%3Cpath d='M-60 476 C 130 420, 280 546, 480 482 S 780 418, 976 494 S 1200 538, 1320 476'/%3E%3C/g%3E%3Cg fill='%236C8EA0' opacity='0.07'%3E%3Cellipse cx='250' cy='300' rx='210' ry='54'/%3E%3Cellipse cx='880' cy='560' rx='250' ry='48'/%3E%3C/g%3E%3C/svg%3E");
  background-size:1200px 620px;
  background-position:center -40px;
  background-attachment:fixed;
  background-repeat:no-repeat;
}

.wrap{max-width:900px;margin:0 auto;padding:26px 22px 90px;position:relative;}

/* the sprite sheet lives in the document but must never take up room */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ---------- shared shapes ------------------------------------------------ */

/* deckled / scalloped edge: punches paper-coloured half-circles into a card's
   top or bottom edge. Only works over the page ground, which is where every
   card that uses it sits. */
.deckle-top,.deckle-bottom{position:relative;}
.deckle-top::before,.deckle-bottom::after{
  content:"";position:absolute;left:2px;right:2px;height:8px;
  background-size:16px 16px;background-repeat:repeat-x;
  opacity:.5;pointer-events:none;
}
.deckle-top::before{
  top:-8px;
  background-image:radial-gradient(circle 8px at 8px 100%,var(--dusty) 7.2px,transparent 7.7px);
}
.deckle-bottom::after{
  bottom:-8px;
  background-image:radial-gradient(circle 8px at 8px 0,var(--dusty) 7.2px,transparent 7.7px);
}
body.issue-02 .deckle-top::before{
  background-image:radial-gradient(circle 8px at 8px 100%,var(--coral) 7.2px,transparent 7.7px);
}
body.issue-02 .deckle-bottom::after{
  background-image:radial-gradient(circle 8px at 8px 0,var(--coral) 7.2px,transparent 7.7px);
}

/* dotted powder ground, the "Coastal Breeze" sticker card texture */
.dotted{
  background-color:var(--powder-tint);
  background-image:radial-gradient(circle 1.6px at 1.6px 1.6px,rgba(108,142,160,.42) 1.6px,transparent 1.8px);
  background-size:13px 13px;
}

/* ---------- the wax seal ------------------------------------------------- */
.seal-row{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:6px 0 20px;
}
.seal{width:104px;height:104px;display:block;flex:none;
  filter:drop-shadow(0 2px 3px rgba(42,62,78,.16));}
.seal-note{
  font-family:var(--hand);font-size:21px;line-height:1.25;
  color:var(--dusty);max-width:25ch;
}
.seal-note b{display:block;font-family:var(--block);font-weight:700;
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--navy-faint);}

/* ---------- masthead: the striped-border postcard ------------------------ */
.masthead{
  position:relative;
  background:var(--card);
  padding:12px;                       /* the stripe frame lives in here */
  border-radius:var(--r);
  box-shadow:0 2px 0 rgba(42,62,78,.07),0 10px 22px -16px rgba(42,62,78,.5);
  margin-bottom:30px;
}
/* the barber-pole edge, "with love from the gulf coast" */
.masthead::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);
  padding:9px;
  background:repeating-linear-gradient(45deg,
    var(--dusty) 0 9px, transparent 9px 18px, var(--coral) 18px 27px, transparent 27px 36px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.masthead-inner{
  position:relative;background:var(--paper);
  border:1px solid var(--rule);border-radius:3px;
  padding:26px 26px 22px;
}
.eyebrow{
  font-family:var(--hand);font-size:23px;line-height:1.2;
  color:var(--dusty);margin:0 0 4px;transform:rotate(-1.2deg);
  transform-origin:left center;
}
.eyebrow em{font-style:normal;color:var(--coral);}
h1{
  font-family:var(--marker);font-weight:400;line-height:1.12;
  font-size:clamp(31px,6vw,50px);margin:6px 0 14px;
  color:var(--navy);letter-spacing:.004em;
}
.subtitle{margin:0;color:var(--navy-soft);font-size:17px;max-width:58ch;}
.thesis{
  margin:20px 0 0;padding:15px 18px 15px 17px;
  background:var(--card);
  border:1px solid var(--rule);
  border-left:4px solid var(--dusty);
  border-radius:0 4px 4px 0;
  font-family:var(--type);font-size:14.5px;line-height:1.68;
}
.thesis strong{font-weight:400;color:var(--coral);}

/* postmark tags, the "VITA MIN SEA" block lettering */
.stamp-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.stamp{
  font-family:var(--block);font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;
  border:1.5px solid var(--dusty);border-radius:999px;
  padding:2px 12px 3px;color:var(--dusty);background:var(--powder-tint);
  white-space:nowrap;
}
.stamp:nth-child(3n){border-color:var(--coral);color:var(--coral);background:var(--coral-tint);}

/* ---------- the kit strip -----------------------------------------------
   What used to be a full-height palette card plus a full-height sticker sheet.
   Same two jobs - name the marks, name the colours - folded into one short
   strip so the page reaches its first sentence sooner.
   ------------------------------------------------------------------------ */
.kit-strip{
  margin:0 0 30px;border:1px solid var(--rule-firm);border-radius:var(--r);
  overflow:hidden;background:var(--card);
}
.kit-row{display:flex;align-items:center;gap:14px;padding:9px 14px;}
.kit-row + .kit-row{border-top:1px dashed var(--rule-firm);}
.kit-lbl{
  flex:none;width:66px;font-family:var(--block);font-weight:700;font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dusty);line-height:1.2;
}
.stickers,.swatches{
  display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;
  list-style:none;max-width:none;flex:1 1 auto;
}
.sticker{display:flex;align-items:center;gap:6px;margin:0;}
.sticker svg{width:22px;height:22px;color:var(--dusty);flex:none;}
.sticker span{font-family:var(--hand);font-size:17px;line-height:1;color:var(--navy-soft);}
body.issue-02 .sticker svg{color:var(--dusty);}

.swatch{display:flex;align-items:center;gap:6px;margin:0;}
.swatch .chip{
  width:20px;height:20px;flex:none;border-radius:4px;
  border:1px solid rgba(42,62,78,.18);
  /* the reversible-bookmark notch, shrunk to a chip */
  clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%);
}
.swatch .hex{font-family:var(--code);font-size:10.5px;color:var(--navy-faint);letter-spacing:.02em;}
.swatch .nm,.swatch .job{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@media (max-width:640px){
  .kit-row{flex-wrap:wrap;gap:8px;}
  .kit-lbl{width:auto;}
}

/* ---------- table of contents: the enclosed index card ------------------- */
.toc{
  background:var(--card);border:1px solid var(--rule-firm);
  border-radius:var(--r);padding:18px 24px 20px;margin-bottom:40px;
  /* faint ruled paper */
}
.toc h2{
  font-family:var(--block);font-weight:800;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dusty);margin:0 0 8px;
}
.toc ol{margin:0;padding-left:20px;max-width:none;}
.toc li{margin:0;padding:5px 0 6px;border-bottom:1px solid rgba(108,142,160,.20);}
.toc li:last-child{border-bottom:none;}
.toc a{color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--rule-firm);}
.toc a:hover{color:var(--coral);border-color:var(--coral);}

/* ---------- sections ------------------------------------------------------ */
.part{margin:0 0 34px;padding-top:30px;}
/* stitched rule between sections; the coral thread is issue 02's accent */
.part{border-top:2px dashed var(--rule-firm);}
.part:first-of-type{border-top:none;padding-top:0;}
body.issue-02 .part{border-top-color:rgba(193,92,79,.38);}

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

/* --- the postage stamp badge -------------------------------------------- */
.part-num{
  flex:none;width:62px;margin:2px 0 0;padding:6px 4px 4px;
  background:var(--paper);
  background-image:radial-gradient(circle 1.5px at 1.5px 1.5px,rgba(108,142,160,.35) 1.5px,transparent 1.7px);
  background-size:11px 11px;
  border:1px solid var(--rule-firm);
  text-align:center;color:var(--dusty);
  box-shadow:0 1px 2px rgba(42,62,78,.10);
  transform:rotate(-2deg);
}
/* real perforation where the browser can do it; the dashed border above is
   the fallback everywhere else */
@supports (mask-composite:intersect) or (-webkit-mask-composite:source-in){
  .part-num{
    border:none;
    --pr:3.4px; --ps:10.33px;
    -webkit-mask:
      radial-gradient(var(--pr) at 50% 0,#0000 97%,#000) 0 0/var(--ps) 100%,
      radial-gradient(var(--pr) at 50% 100%,#0000 97%,#000) 0 0/var(--ps) 100%,
      radial-gradient(var(--pr) at 0 50%,#0000 97%,#000) 0 0/100% var(--ps),
      radial-gradient(var(--pr) at 100% 50%,#0000 97%,#000) 0 0/100% var(--ps);
    -webkit-mask-composite:source-in;
    mask:
      radial-gradient(var(--pr) at 50% 0,#0000 97%,#000) 0 0/var(--ps) 100%,
      radial-gradient(var(--pr) at 50% 100%,#0000 97%,#000) 0 0/var(--ps) 100%,
      radial-gradient(var(--pr) at 0 50%,#0000 97%,#000) 0 0/100% var(--ps),
      radial-gradient(var(--pr) at 100% 50%,#0000 97%,#000) 0 0/100% var(--ps);
    mask-composite:intersect;
    box-shadow:none;
  }
}
.part-num{position:relative;}
.part-num::before{        /* the stamp's inner frame */
  content:"";position:absolute;inset:5px;border:1px solid var(--rule-firm);
  opacity:.6;pointer-events:none;
}
.part-num svg{width:26px;height:26px;display:block;margin:2px auto 0;color:var(--dusty);}
.part-num .no{
  display:block;font-family:var(--block);font-weight:800;font-size:19px;line-height:1;
  color:var(--navy);margin-top:1px;
}
.part-num .denom{
  display:block;font-family:var(--block);font-weight:700;font-size:8px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dusty);
  margin-top:2px;
}
body.issue-02 .part-num .no{color:var(--coral);}

/* Permanent Marker is the page title and nothing else. Section headings are
   the rounded display face - still warm, but they stop shouting fifteen times
   down a technical page. */
h2{
  font-family:var(--block);font-weight:800;
  font-size:clamp(21px,3.3vw,27px);line-height:1.28;
  margin:0 0 8px;letter-spacing:.005em;scroll-margin-top:20px;color:var(--navy);
}
h3{
  font-family:var(--block);font-weight:700;font-size:17.5px;margin:32px 0 8px;
  letter-spacing:.01em;color:var(--dusty);
}
h4{
  font-family:var(--block);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--navy-faint);margin:26px 0 8px;
}
p{margin:0 0 15px;max-width:68ch;}
.lede{
  font-family:var(--hand);font-size:23px;line-height:1.42;
  color:var(--dusty);margin:0 0 22px;max-width:46ch;
}
a{color:var(--coral);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--dusty);}
strong{font-weight:700;}
em{font-style:italic;}

/* ---------- lists: sticker icons instead of bullets ---------------------- */
ol{max-width:66ch;padding-left:24px;}
li{margin:7px 0;}
ul{max-width:66ch;padding-left:30px;list-style:none;}
ul > li{position:relative;}
ul > li::before{
  content:"";position:absolute;left:-28px;top:.5em;width:17px;height:17px;
  background-repeat:no-repeat;background-size:contain;opacity:.95;
  /* small hand-drawn shell */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C8EA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5C6.8 20.5 3 16.4 3 11.4 3 6.9 7 3.5 12 3.5s9 3.4 9 7.9c0 5-3.8 9.1-9 9.1z'/%3E%3Cpath d='M12 3.6v16.8M7.6 4.7 9.7 20M16.4 4.7 14.3 20M4.1 8.3 7 19.4M19.9 8.3 17 19.4'/%3E%3C/svg%3E");
}
ul > li:nth-child(2n)::before{
  /* starfish */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C8EA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.6c.7 0 1.1.6 1.5 1.6l1.6 4.2 4.5.3c1.1.1 1.6.4 1.8 1s-.1 1.1-1 1.8l-3.5 2.8 1.2 4.3c.3 1.1.2 1.6-.3 2s-1.1.2-2-.4L12 17.7l-3.8 2.5c-.9.6-1.5.7-2 .4s-.6-.9-.3-2l1.2-4.3-3.5-2.8c-.9-.7-1.2-1.2-1-1.8s.7-.9 1.8-1l4.5-.3L10.5 4.2C10.9 3.2 11.3 2.6 12 2.6z'/%3E%3C/svg%3E");
}
ul > li:nth-child(3n)::before{
  /* sailboat */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C8EA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.2 3.2v11M11.2 3.2 4.6 14.2h6.6M12.7 6.2v8h5.3z'/%3E%3Cpath d='M2.6 17.4h18.8l-2.6 3.4H5.2z'/%3E%3C/svg%3E");
}
ul > li:nth-child(5n)::before{
  /* sand dollar */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C8EA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.1'/%3E%3Cpath stroke-width='1.4' d='M12.00 9.10Q13.55 7.05 12.00 5.00Q10.45 7.05 12.00 9.10Z M14.76 11.10Q17.19 11.94 18.66 9.84Q16.23 9.00 14.76 11.10Z M13.70 14.35Q13.66 16.92 16.11 17.66Q16.16 15.09 13.70 14.35Z M10.30 14.35Q7.84 15.09 7.89 17.66Q10.34 16.92 10.30 14.35Z M9.24 11.10Q7.77 9.00 5.34 9.84Q6.81 11.94 9.24 11.10Z'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%236C8EA0' stroke='none'/%3E%3C/svg%3E");
}
.toc ol li,.steps > li,.entries li{margin-left:0;}
/* component lists opt out of the sticker bullets entirely */
ul.swatches,ul.stickers,ul.entries{padding-left:0;max-width:none;}
ul.swatches > li::before,ul.stickers > li::before,
ul.entries > li::before{content:none;}

/* ---------- inline code --------------------------------------------------- */
code{
  font-family:var(--code);font-size:.9em;
  background:var(--card);color:var(--navy);
  padding:1px 5px 2px;border-radius:3px;
  border:1px solid var(--rule);
}
a code{color:inherit;border-color:currentColor;}

/* ---------- code blocks: the enclosed typed slip -------------------------
   Cream ground, true monospace, navy ink. The palette's blue/coral do the
   syntax work; comments are handwritten in the margin the way a note pencilled
   onto a printout would be.
   ------------------------------------------------------------------------ */
.code{
  background:var(--paper);
  border:1px solid var(--rule-firm);
  border-radius:var(--r);
  margin:0 0 20px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(42,62,78,.05);
}
.code-label{
  font-family:var(--block);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--dusty);background:var(--card);
  padding:7px 15px;border-bottom:1px dashed var(--rule-firm);
  display:flex;justify-content:space-between;gap:12px;
}
.code-label .rhs{
  font-family:var(--hand);font-weight:400;font-size:16px;letter-spacing:0;
  text-transform:none;color:var(--coral);line-height:1.1;align-self:center;
}
/* ---------- the runnable reduction ----------------------------------------
   Part 02's REPL transcript, made editable. Progressive enhancement: the panel
   is `hidden` in the markup and revealed by the page script, so with no
   JavaScript this section is exactly the static transcript it always was.
   ------------------------------------------------------------------------ */
.jinja-lab{
  background:var(--card);border:1.5px solid var(--dusty);border-radius:var(--r);
  padding:14px 17px 12px;margin:0 0 20px;box-shadow:3px 3px 0 var(--dusty-tint);
}
.jl-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:11px;}
.jl-title{font-family:var(--block);font-weight:800;font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dusty);}
.jl-sub{font-family:var(--hand);font-size:16px;color:var(--navy-faint);}
.jl-row{display:flex;align-items:flex-start;gap:11px;margin:0 0 10px;flex-wrap:wrap;}
.jl-lbl{flex:none;width:62px;padding-top:5px;
  font-family:var(--block);font-weight:700;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy-faint);}
.jl-tpl{flex:1 1 260px;font-family:var(--code);font-size:12.6px;
  background:var(--powder-tint);border:1px solid var(--rule);border-radius:4px;
  padding:5px 9px;color:var(--navy);word-break:break-word;}
.jl-chips{flex:1 1 260px;display:flex;flex-wrap:wrap;gap:7px;}
.jl-chip{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--code);font-size:12.6px;
  border:1.3px solid var(--dusty);background:var(--dusty-tint);color:var(--navy);
  border-radius:999px;padding:3px 5px 3px 11px;}
.jl-x{border:none;background:none;cursor:pointer;line-height:1;padding:0 4px;
  font-size:15px;color:var(--dusty);border-radius:50%;}
.jl-x:hover{color:var(--coral);}
.jl-x:focus-visible{outline:2px solid var(--coral);outline-offset:1px;}
.jl-none{font-family:var(--hand);font-size:16px;color:var(--navy-faint);padding-top:3px;}
.jl-add{display:flex;gap:8px;align-items:center;margin:0 0 12px 73px;flex-wrap:wrap;}
.jl-add input{font-family:var(--code);font-size:12.6px;padding:5px 10px;
  border:1.3px solid var(--rule-firm);border-radius:999px;background:var(--paper);
  color:var(--navy);min-width:150px;}
.jl-add input:focus{outline:none;border-color:var(--dusty);
  box-shadow:0 0 0 2px var(--dusty-tint);}
.jl-add button{font-family:var(--code);font-size:12px;cursor:pointer;
  padding:5px 13px;border-radius:999px;
  border:1.3px solid var(--dusty);background:var(--dusty-tint);color:var(--dusty);}
.jl-add button:hover{background:var(--dusty);color:var(--paper);}
.jl-add button:focus-visible{outline:2px solid var(--coral);outline-offset:2px;}
.jl-add .jl-reset{border-color:var(--rule-firm);background:transparent;
  color:var(--navy-faint);}
.jl-add .jl-reset:hover{background:var(--rule-firm);color:var(--navy);}
.jl-outwrap{display:flex;align-items:flex-start;gap:11px;}
.jl-out{flex:1 1 auto;min-width:0;margin:0;padding:9px 11px;
  font-family:var(--code);font-size:12.6px;line-height:1.7;
  background:var(--paper);border:1px solid var(--rule);border-radius:4px;
  color:var(--navy);white-space:pre-wrap;word-break:break-word;min-height:2.4em;}
.jl-count{margin:10px 0 0 73px;max-width:none;
  font-family:var(--hand);font-size:18px;line-height:1.35;color:var(--dusty);}
.jl-count.empty{color:var(--coral);}
@media (max-width:640px){
  .jl-lbl{width:auto;padding-top:0;}
  .jl-add,.jl-count{margin-left:0;}
  .jl-outwrap{flex-direction:column;gap:4px;}
}

/* ---------- copy button on code blocks -----------------------------------
   Injected by reference.js, styled here so it wears this issue's colours.
   The .rhs gets margin-left:auto so the handwritten note stays hard right
   where it has always been - without it, a third flex child re-centres it. */
.code-label .rhs{margin-left:auto;}
.copy-btn{
  flex:none;font-family:var(--code);font-size:11px;letter-spacing:.04em;
  text-transform:none;cursor:pointer;line-height:1;
  padding:4px 10px 5px;border-radius:999px;
  border:1.3px solid var(--dusty);background:var(--dusty-tint);color:var(--dusty);
  transition:background .12s ease,color .12s ease;
}
.copy-btn:hover{background:var(--dusty);color:var(--paper);}
.copy-btn:focus-visible{outline:2px solid var(--dusty);outline-offset:2px;}
.copy-btn.done{background:var(--dusty);color:var(--paper);border-color:var(--dusty);}
.copy-btn.failed{opacity:.75;}
@media (prefers-reduced-motion:reduce){.copy-btn{transition:none;}}

.code pre{
  margin:0;padding:15px 17px;overflow-x:auto;
  font-family:var(--code);font-size:13.5px;line-height:1.66;
  color:var(--navy);tab-size:2;
}
/* token classes */
.k{color:#3F6478;font-weight:700;}                 /* keyword / tag / directive */
.s{color:var(--coral);}                            /* string / value            */
.c{font-family:var(--hand);font-size:16px;color:var(--dusty);}  /* comment      */
.e{color:var(--coral);font-weight:700;}            /* error / removed           */
.d{color:var(--navy-faint);}                       /* dim: prompts, punctuation */
.hl{background:var(--dusty-tint-2);border-radius:2px;}

/* terminal-ish block: same slip, on card stock */
.code.term{background:var(--card);}
.code.term .code-label{background:var(--powder-tint);}

/* ---------- typed-letter callouts ---------------------------------------
   Every aside is a short typed letter: letterhead rule, the existing tag as
   the letterhead line, Special Elite for the body.
   ------------------------------------------------------------------------ */
.callout{
  position:relative;
  background:var(--card);
  border:1px solid var(--rule-firm);
  border-radius:2px;
  padding:14px 20px 16px;margin:0 0 22px;
  box-shadow:2px 2px 0 rgba(42,62,78,.06);
}
.callout::before{      /* the thin letterhead rule */
  content:"";position:absolute;left:20px;right:20px;top:34px;
  border-top:1px solid var(--dusty);opacity:.5;
}
.callout p{
  font-family:var(--type);font-size:14.5px;line-height:1.72;
  margin:0 0 12px;max-width:64ch;
}
.callout p:first-of-type{margin-top:14px;}
.callout p:last-child{margin-bottom:0;}
.callout .tag{
  display:flex;align-items:center;gap:7px;
  font-family:var(--block);font-weight:800;font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;
  margin:0;height:20px;
}
.callout .tag::after{
  content:"";flex:none;width:14px;height:14px;margin-left:2px;
  background:currentColor;opacity:.35;
  -webkit-mask:var(--tagmask) center/contain no-repeat;
  mask:var(--tagmask) center/contain no-repeat;
}
.callout code{background:var(--paper);font-size:.88em;}
.callout strong{color:var(--navy);}

.callout.good{border-left:4px solid var(--dusty);}
.callout.good .tag{color:var(--dusty);
  --tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.callout.note{border-left:4px solid var(--powder);}
.callout.note .tag{color:var(--dusty);
  --tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v12H3z' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cpath d='m3.6 6.6 8.4 6.4 8.4-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}
.callout.warn{border-left:4px solid var(--coral);background:#F3EADF;}
.callout.warn .tag{color:var(--coral);
  --tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1.5 21h21z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v5M12 17.6v.1' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.callout.warn::before{border-top-color:var(--coral);}

/* ---------- the ruled recap card ----------------------------------------
   The "Book Review Card" from the mail kit, and like the original it is a form
   you write on: the bottom field is contenteditable and the shells are a
   clickable rating. reference.js keeps both in localStorage.
   ------------------------------------------------------------------------ */
.recap{
  position:relative;margin:26px 0 6px;padding:14px 20px 16px;
  background:var(--card);
  border:1px solid var(--dusty);border-radius:3px;
}
.recap-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;border-bottom:1.5px solid var(--dusty);padding-bottom:5px;margin-bottom:11px;
}
.recap-head h4{
  margin:0;font-family:var(--block);font-weight:800;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dusty);
}
.recap-head .card-no{
  font-family:var(--code);font-size:10.5px;color:var(--navy-faint);letter-spacing:.06em;
}
.recap dl{margin:0;display:block;}
.recap .row{
  display:flex;align-items:baseline;gap:10px;
  border-bottom:1px solid var(--rule-firm);
  padding:3px 0 3px;margin:0 0 6px;
}
.recap dt{
  flex:none;font-family:var(--block);font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy-soft);
}
.recap dd{
  margin:0;flex:1 1 auto;min-width:0;
  font-family:var(--hand);font-size:19px;line-height:1.3;color:var(--navy);
}
.recap dd code{
  font-family:var(--code);font-size:12px;background:transparent;border:none;
  padding:0;color:var(--navy);
}

/* the field you write in ------------------------------------------------- */
.recap .row.wide{display:block;border-bottom:none;padding-bottom:0;margin-bottom:8px;}
.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(--coral);
  min-height:56px;                       /* two lines to start with */
  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(--navy-faint);opacity:.75;font-size:18px;
}
.recap .write:focus{
  background-color:rgba(246,241,231,.75);
  box-shadow:0 0 0 2px rgba(193,92,79,.22);border-radius:2px;
}

/* the rating, now a real control ---------------------------------------- */
.recap-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:10px;
}
.recap .rating{display:flex;align-items:center;gap:5px;}
.recap .rating .lbl{
  font-family:var(--block);font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy-soft);margin-right:3px;
}
.recap .pip{
  background:none;border:none;padding:2px;margin:0;cursor:pointer;
  line-height:0;border-radius:4px;color:var(--dusty);
}
.recap .pip svg{width:19px;height:19px;opacity:.32;transition:opacity .12s,transform .12s;}
.recap .pip:hover svg{opacity:.6;transform:translateY(-1px);}
.recap .pip.on svg{opacity:1;}
.recap .pip:focus-visible{outline:2px solid var(--coral);outline-offset:1px;}
.recap .saved{
  font-family:var(--hand);font-size:16px;color:var(--dusty);
  opacity:0;transition:opacity .2s;
}
.recap .saved.on{opacity:.85;}

body.issue-02 .recap{border-color:var(--coral);}
body.issue-02 .recap-head{border-bottom-color:var(--coral);}
body.issue-02 .recap-head h4{color:var(--coral);}
body.issue-02 .recap .pip{color:var(--coral);}

/* ---------- figures -------------------------------------------------------- */
figure{margin:24px 0;}
figure svg{
  display:block;width:100%;height:auto;
  background:var(--paper);border:1px solid var(--rule-firm);border-radius:var(--r);
}
figcaption{
  font-family:var(--hand);font-size:19px;line-height:1.4;
  color:var(--navy-soft);margin-top:8px;padding-left:4px;max-width:60ch;
}
figcaption code{font-family:var(--code);font-size:12.5px;background:transparent;
  border:none;padding:0;color:var(--dusty);}

/* ---------- tables --------------------------------------------------------- */
.table-scroll{overflow-x:auto;margin:0 0 22px;
  border:1px solid var(--rule-firm);border-radius:var(--r);background:var(--card);}
table{border-collapse:collapse;width:100%;font-size:15px;background:transparent;}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top;}
thead th{
  font-family:var(--block);font-weight:800;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dusty);
  background:var(--powder-tint);border-bottom:2px solid var(--dusty);
}
tbody th{
  font-family:var(--block);font-weight:700;font-size:12.5px;color:var(--navy-soft);
  white-space:nowrap;
}
tbody tr:nth-child(2n) td,tbody tr:nth-child(2n) th{background:rgba(246,241,231,.55);}
tr:last-child td,tr:last-child th{border-bottom:none;}
td code{background:var(--paper);}
.num{font-family:var(--code);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---------- numbered walkthrough: little stamps -------------------------- */
.steps{list-style:none;padding:0;margin:0 0 24px;counter-reset:step;max-width:none;}
.steps > li{
  counter-increment:step;position:relative;
  padding:0 0 0 48px;margin:0 0 18px;min-height:30px;
}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:32px;height:30px;line-height:29px;text-align:center;
  font-family:var(--block);font-size:13px;font-weight:800;
  color:var(--navy);background:var(--paper);
  background-image:radial-gradient(circle 1.4px at 1.4px 1.4px,rgba(108,142,160,.34) 1.4px,transparent 1.6px);
  background-size:8px 8px;
  border:1.5px dashed var(--dusty);border-radius:3px;
  transform:rotate(-2.5deg);
}
.steps h4{
  margin:0 0 3px;font-family:var(--block);font-weight:800;font-size:16px;
  text-transform:none;letter-spacing:.005em;color:var(--navy);
}
.steps p{margin:0;font-size:15.5px;color:var(--navy-soft);}

/* ---------- key/value definition rows ------------------------------------ */
.defs{margin:0 0 24px;}
.def{
  display:grid;grid-template-columns:minmax(130px,190px) 1fr;gap:20px;
  padding:13px 0;border-top:1px dashed var(--rule-firm);
}
.def:last-child{border-bottom:1px dashed var(--rule-firm);}
.def dt{
  font-family:var(--block);font-weight:800;font-size:14px;color:var(--dusty);
  letter-spacing:.01em;word-break:break-word;line-height:1.35;padding-top:2px;
}
.def dd{margin:0;font-size:15.5px;}
.def dd p{margin:0 0 8px;max-width:58ch;}
.def dd p:last-child{margin:0;}
@media (max-width:620px){
  .def{grid-template-columns:1fr;gap:4px;}
}

/* ---------- guestbook demo: the reply card ------------------------------- */
.demo{
  position:relative;
  border:1.5px solid var(--dusty);border-radius:var(--r);
  background:var(--card);padding:20px 24px 24px;margin:0 0 24px;
  box-shadow:4px 4px 0 var(--dusty-tint);
}
.demo-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:10px;border-bottom:2px solid var(--dusty);
}
.demo-head h3{
  margin:0;font-family:var(--block);font-weight:800;font-size:21px;color:var(--navy);
}
/* the status pill is a postmark */
.status{
  font-family:var(--block);font-weight:700;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;
  padding:4px 13px;border-radius:999px;border:1.5px dashed var(--navy-faint);
  color:var(--navy-faint);background:var(--paper);white-space:nowrap;
}
.status.live{color:var(--dusty);border-color:var(--dusty);background:var(--powder-tint);}
.status.down{color:var(--coral);border-color:var(--coral);background:var(--coral-tint);}

.gb-form{display:grid;gap:14px;margin-bottom:22px;}
.field label{
  display:block;font-family:var(--block);font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--navy-soft);margin-bottom:5px;
}
.gb-form input,.gb-form textarea{
  width:100%;font-family:var(--hand);font-size:21px;color:var(--navy);
  background:var(--paper);border:1px solid var(--rule-firm);
  border-bottom:2px solid var(--dusty);border-radius:4px 4px 0 0;
  padding:6px 11px;line-height:1.45;
}
.gb-form textarea{resize:vertical;min-height:84px;line-height:30px;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 30px,rgba(108,142,160,.20) 30px 31px);
  background-position:0 6px;}
.gb-form input::placeholder,.gb-form textarea::placeholder{color:var(--navy-faint);opacity:.7;}
.gb-form input:focus,.gb-form textarea:focus{
  outline:none;border-bottom-color:var(--coral);
  box-shadow:0 2px 0 rgba(193,92,79,.18);
}
.gb-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.gb-form button{
  font-family:var(--block);font-size:14.5px;font-weight:800;letter-spacing:.06em;
  background:var(--dusty);color:var(--paper);border:1.5px solid var(--dusty);
  border-radius:999px;padding:7px 22px 8px;cursor:pointer;
  box-shadow:2px 2px 0 rgba(42,62,78,.16);
}
.gb-form button:hover{background:var(--coral);border-color:var(--coral);}
.gb-form button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.counter{font-family:var(--code);font-size:11.5px;color:var(--navy-faint);
  font-variant-numeric:tabular-nums;}
.counter.over{color:var(--coral);}
.gb-msg{font-family:var(--hand);font-size:19px;margin:0;min-height:1.2em;}
.gb-msg.ok{color:var(--dusty);}
.gb-msg.bad{color:var(--coral);}

.entries{list-style:none;padding:0;margin:0;max-width:none;}
.entries li{border-top:1px dashed var(--rule-firm);padding:13px 0;margin:0;}
.entries li::before{display:none;}
.entries li:first-child{border-top:2px solid var(--dusty);}
.entry-head{display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;margin-bottom:2px;}
.entry-name{font-family:var(--block);font-weight:800;font-size:15.5px;color:var(--navy);}
.entry-when{font-family:var(--code);font-size:11px;color:var(--navy-faint);white-space:nowrap;}
.entry-msg{margin:0;font-family:var(--hand);font-size:20px;line-height:1.4;
  color:var(--navy-soft);white-space:pre-wrap;overflow-wrap:anywhere;}
.entries-empty{font-family:var(--hand);font-size:19px;color:var(--navy-faint);margin:0;}

/* ---------- footer: the tear-off strip ----------------------------------- */
.foot{
  position:relative;margin-top:56px;padding-top:24px;
  border-top:2px dashed var(--rule-firm);
  font-family:var(--block);font-weight:600;font-size:12px;letter-spacing:.06em;
  color:var(--navy-faint);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
}
.foot a{color:var(--coral);text-decoration:none;
  font-family:var(--hand);font-size:20px;letter-spacing:0;font-weight:400;}
.foot a:hover{color:var(--dusty);}
.foot .mark{width:34px;height:34px;color:var(--dusty);opacity:.6;flex:none;}

@media (max-width:640px){
  .wrap{padding:18px 15px 70px;}
  .seal-row{flex-direction:column;text-align:center;gap:8px;}
  .seal-note{max-width:28ch;}
  .part-head{gap:12px;}
  .masthead-inner{padding:20px 18px 18px;}
  .callout::before{left:16px;right:16px;}
}

@media print{
  body{background:#fff;background-image:none;}
  .toc,.demo,.recap,.callout,figure{page-break-inside:avoid;}
}

/* the long "one thing I actually understood today" field stacks, so there is
   an actual line left to write on */
.recap .row.wide{display:block;border-bottom:none;padding-bottom:0;margin-bottom:4px;}
.recap .row.wide dd{
  margin-top:5px;border-bottom:1px solid var(--rule-firm);min-height:1.5em;
}
.recap .row.wide dd + dd{margin-top:10px;}