/* ---------------------------------------------------------------------------
   /learn/ - MAIL CLUB, ISSUE No. 02: "Harvest Post".

   Backend, frontend, APIs. Second issue of the same publication as
   pipeline.html, new seasonal theme.

   This file is deliberately STANDALONE. Issue 01 has its own reference.css and
   the two share no colours, no patterns and no cascade - so a change here can
   never reach that page. The only thing the two issues share is reference.js,
   which is behaviour (the fillable recap cards) and names no colour at all.

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

   What changes: the season. Apples, ginghams, doily scallops, block lettering.
--------------------------------------------------------------------------- */

:root{
  /* --- the six named colours -------------------------------------------- */
  --cream:#FBF3E9;     /* cream paper - the page ground                    */
  --blush:#EFC6C9;     /* blush pink - stripes, gingham, card fills        */
  --red:#B23A32;       /* apple red - the primary accent                   */
  --green:#5C7A52;     /* forest green - polka dots, leaves, good news     */
  --ink:#3A2E28;       /* ink brown - every word. Warmer than Issue 01.    */
  --gold:#D9A441;      /* mustard - block lettering, highlights, sparingly */

  /* the confetti colour. Tiny stars only - never structure. */
  --lav:#B9A6D9;

  /* --- derived, all mixed from the six ---------------------------------- */
  --ink-soft:#5D4B41;
  --ink-faint:#8E7B6D;
  --rule:#E3D5C4;
  --rule-firm:#CDB9A3;
  --card:#FDF8F0;          /* the paper things sit on, a shade above cream */
  --red-tint:rgba(178,58,50,.10);
  --red-tint-2:rgba(178,58,50,.20);
  --green-tint:rgba(92,122,82,.12);
  --gold-tint:rgba(217,164,65,.16);
  --shadow:rgba(58,46,40,.16);

  /* --- five fonts, five jobs -------------------------------------------- */
  --hand:"Caveat","Bradley Hand",cursive;                /* unchanged from 01 */
  --pixel:"Silkscreen","Courier New",monospace;          /* the stamped word  */
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;/* titles, labels   */
  --body:"Lora",Georgia,"Times New Roman",serif;         /* unchanged from 01 */
  --code:"Courier Prime","Courier New",monospace;        /* unchanged from 01 */

  --r:7px;

  /* --- the patterns, said once ------------------------------------------
     Gingham is genuinely two crossed stripe sets: where they overlap you get
     the third, darkest square. That is what makes it read as check rather
     than as a grid.
     -------------------------------------------------------------------- */
  --gingham-pink:
    repeating-linear-gradient(0deg,rgba(239,198,201,.30) 0 9px,transparent 9px 18px),
    repeating-linear-gradient(90deg,rgba(239,198,201,.30) 0 9px,transparent 9px 18px);
  /* RULE: yellow gingham is the higher-contrast check - short header bars and
     labels ONLY (the contents header, code label bars). Never a full-box
     background; at that size a 9-item list has to fight the grid to be read.
     Pink gingham is the low-contrast one and is fine behind full paragraphs. */
  --gingham-gold:
    repeating-linear-gradient(0deg,rgba(217,164,65,.34) 0 5px,transparent 5px 10px),
    repeating-linear-gradient(90deg,rgba(217,164,65,.34) 0 5px,transparent 5px 10px);
  --polka:
    radial-gradient(circle 2.6px at 6px 6px,rgba(92,122,82,.32) 2.6px,transparent 3px);

  /* scalloped hems. One tile, drawn as a filled half-circle whose outline is
     only on the curve, so a bordered card keeps its edge all the way round. */
  --scallop-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13' viewBox='0 0 22 13'%3E%3Cpath d='M0 1.2 A11 11 0 0 0 22 1.2' fill='%23FDF8F0' stroke='%23B23A32' stroke-width='1.3'/%3E%3C/svg%3E");
  --scallop-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13' viewBox='0 0 22 13'%3E%3Cpath d='M0 11.8 A11 11 0 0 1 22 11.8' fill='%23FDF8F0' stroke='%23B23A32' stroke-width='1.3'/%3E%3C/svg%3E");
  /* the doily adds a punched hole above each scallop */
  --doily-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M0 1.4 A11 11 0 0 0 22 1.4' fill='%23FDF8F0' stroke='%23B23A32' stroke-width='1.2'/%3E%3Ccircle cx='11' cy='5' r='1.6' fill='%23B23A32' opacity='.4'/%3E%3C/svg%3E");
  --doily-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'%3E%3Cpath d='M0 12.6 A11 11 0 0 1 22 12.6' fill='%23FDF8F0' stroke='%23B23A32' stroke-width='1.2'/%3E%3Ccircle cx='11' cy='9' r='1.6' fill='%23B23A32' opacity='.4'/%3E%3C/svg%3E");
}

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

/* ---------- the striped ground ------------------------------------------
   Vertical, not diagonal: the reference fabric runs vertical, and diagonal
   stripes at this pitch fight the text baselines.
   ------------------------------------------------------------------------ */
body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  background-color:var(--cream);
  background-image:repeating-linear-gradient(90deg,
    rgba(239,198,201,.20) 0 30px, transparent 30px 60px);
  background-attachment:fixed;
}

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

/* ---------- shared shapes ------------------------------------------------ */
.scallop-b{position:relative;border-bottom:none;
  border-bottom-left-radius:0;border-bottom-right-radius:0;}
.scallop-b::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:13px;
  background-image:var(--scallop-down);background-size:22px 13px;background-repeat:repeat-x;
  pointer-events:none;
}
.doily{position:relative;border-top:none;border-bottom:none;border-radius:0;}
.doily::before,.doily::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background-size:22px 14px;background-repeat:repeat-x;pointer-events:none;
}
.doily::before{top:-13px;background-image:var(--doily-up);}
.doily::after{bottom:-13px;background-image:var(--doily-down);}

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

/* ---------- the 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 var(--shadow));}
.seal-note{font-family:var(--hand);font-size:21px;line-height:1.25;
  color:var(--red);max-width:25ch;}
.seal-note b{display:block;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-faint);}

/* ---------- the stamped block word ---------------------------------------
   Mustard on apple red, the way SEPTEMBER sits in the reference. Twice on the
   page and nowhere else: the issue number, and the two Part markers.
   ------------------------------------------------------------------------ */
.block-stamp{
  display:inline-block;font-family:var(--pixel);
  background:var(--red);color:var(--gold);
  padding:9px 15px 7px;line-height:1;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--red-tint-2);
  transform:rotate(-1.6deg);
}
.block-stamp.big{font-size:23px;padding:12px 19px 9px;}
.block-stamp.small{font-size:12px;padding:6px 10px 4px;letter-spacing:.08em;}

/* the red oval, "this journal belongs to..." */
.oval-label{
  display:inline-block;background:var(--red);color:var(--cream);
  font-family:var(--hand);font-size:20px;line-height:1;
  padding:9px 26px 10px;border-radius:50%;
  border:2px solid var(--cream);box-shadow:0 0 0 1.5px var(--red);
  transform:rotate(-1deg);
}

/* ---------- masthead ----------------------------------------------------- */
.masthead{
  position:relative;background:var(--card);
  border:1.5px solid var(--red);border-radius:var(--r);
  padding:26px 28px 24px;margin-bottom:30px;
  box-shadow:4px 4px 0 var(--red-tint);
}
.masthead-inner{position:relative;}
.mast-top{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.eyebrow{margin:0;}
h1{
  font-family:var(--display);font-weight:800;line-height:1.1;
  font-size:clamp(30px,5.6vw,46px);margin:2px 0 14px;
  color:var(--red);letter-spacing:-.005em;
}
.subtitle{margin:0;color:var(--ink-soft);font-size:17px;max-width:58ch;}
.thesis{
  margin:20px 0 0;padding:15px 18px;
  background:var(--cream);background-image:var(--gingham-pink);
  border:1px solid var(--rule-firm);border-left:5px solid var(--green);
  border-radius:0 4px 4px 0;
  font-family:var(--code);font-size:14px;line-height:1.7;
}
.thesis strong{font-weight:700;color:var(--red);}

.stamp-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.stamp{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;
  border:1.5px solid var(--green);border-radius:999px;
  padding:2px 12px 3px;color:var(--green);background:var(--green-tint);
  white-space:nowrap;
}
.stamp:nth-child(2n){border-color:var(--red);color:var(--red);background:var(--red-tint);}

/* ---------- sticker-sheet legend: the green polka-dot paper -------------- */
.kit-strip{
  position:relative;margin:0 0 30px;border:1.5px solid var(--green);
  border-radius:var(--r);overflow:hidden;
  background-color:var(--green-tint);background-image:var(--polka);
  background-size:18px 18px;
}
/* the folded corner of dotted paper */
.kit-strip::after{
  content:"";position:absolute;top:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 34px 34px 0;
  border-color:transparent var(--cream) transparent transparent;
  filter:drop-shadow(-2px 2px 1px rgba(58,46,40,.18));
}
.kit-row{display:flex;align-items:flex-start;gap:14px;padding:13px 16px;}
.kit-lbl{
  flex:none;width:66px;font-family:var(--display);font-weight:800;font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--green);line-height:1.2;
}
.stickers{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;
  list-style:none;max-width:none;flex:1 1 auto;}
.sticker{display:flex;align-items:center;gap:7px;margin:0;}
.sticker svg{width:27px;height:27px;flex:none;
  filter:drop-shadow(0 1px 1px rgba(58,46,40,.22));}
.sticker span{font-family:var(--hand);font-size:17px;line-height:1;color:var(--ink-soft);}

/* ---------- contents: plain card, gingham only on its header strip ------- */
.toc{
  background:var(--card);
  border:1.5px solid var(--gold);border-radius:var(--r);
  padding:0 24px 20px;margin-bottom:40px;overflow:hidden;
}
/* the check reads as a band across the head; underneath it the list needs
   plain paper or every line fights a grid */
.toc h2{
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);
  margin:0 -24px 14px;padding:10px 24px;
  background-color:var(--card);background-image:var(--gingham-gold);
  border-bottom:1.5px solid var(--gold);
}
.toc ol{margin:0;padding-left:20px;max-width:none;}
.toc li{margin:0;padding:5px 0 6px;border-bottom:1px solid rgba(178,58,50,.18);}
.toc li:last-child{border-bottom:none;}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-firm);}
.toc a:hover{color:var(--red);border-color:var(--red);}

/* ---------- sections ----------------------------------------------------- */
.part{position:relative;margin:0 0 34px;padding-top:34px;}
/* a scalloped ribbon divider instead of a rule */
.part::before{
  content:"";display:block;height:11px;margin:0 0 24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='11' viewBox='0 0 20 11'%3E%3Cpath d='M0 10 A10 10 0 0 1 20 10' fill='none' stroke='%23B23A32' stroke-width='1.4' opacity='.55'/%3E%3C/svg%3E");
  background-size:20px 11px;background-repeat:repeat-x;
}
.part:first-of-type{padding-top:0;}
.part:first-of-type::before{display:none;}

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

/* postage-stamp badge, sitting on a scalloped disc */
.part-num{
  flex:none;position:relative;width:68px;height:68px;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--card);
  /* the scalloped circle from the apple-pie card in the reference */
  -webkit-mask:radial-gradient(circle 4.5px at 50% 0,#0000 96%,#000) 0 0/16px 100%,
               radial-gradient(circle 4.5px at 50% 100%,#0000 96%,#000) 0 0/16px 100%,
               radial-gradient(circle 4.5px at 0 50%,#0000 96%,#000) 0 0/100% 16px,
               radial-gradient(circle 4.5px at 100% 50%,#0000 96%,#000) 0 0/100% 16px;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 4.5px at 50% 0,#0000 96%,#000) 0 0/16px 100%,
       radial-gradient(circle 4.5px at 50% 100%,#0000 96%,#000) 0 0/16px 100%,
       radial-gradient(circle 4.5px at 0 50%,#0000 96%,#000) 0 0/100% 16px,
       radial-gradient(circle 4.5px at 100% 50%,#0000 96%,#000) 0 0/100% 16px;
  mask-composite:intersect;
  transform:rotate(-2deg);
}
@supports not ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  .part-num{-webkit-mask:none;mask:none;border:1.5px dashed var(--red);border-radius:50%;}
}
.part-num svg{width:23px;height:23px;display:block;}
.part-num .no{display:block;font-family:var(--display);font-weight:800;
  font-size:17px;line-height:1;color:var(--red);margin-top:1px;}
.part-num .denom{display:block;font-family:var(--display);font-weight:700;
  font-size:7.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:1px;}

h2{
  font-family:var(--display);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(--ink);
}
h3{font-family:var(--display);font-weight:700;font-size:17.5px;margin:32px 0 8px;
  letter-spacing:.01em;color:var(--red);}
h4{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);margin:26px 0 8px;}
p{margin:0 0 15px;max-width:68ch;}
.lede{font-family:var(--hand);font-size:23px;line-height:1.42;
  color:var(--green);margin:0 0 22px;max-width:46ch;}
a{color:var(--red);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--green);}
strong{font-weight:700;}

/* ---------- lists: sticker bullets ---------------------------------------- */
ol{max-width:66ch;padding-left:24px;}
li{margin:7px 0;}
ul{max-width:66ch;padding-left:32px;list-style:none;}
ul > li{position:relative;}
ul > li::before{
  content:"";position:absolute;left:-30px;top:.35em;width:19px;height:19px;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M16 10.4c-1.5-1.4-3.3-2-5-1.7-3.2.5-5.4 3.5-5.4 7.6 0 5.3 3.5 11.4 6.5 11.4 1.4 0 2.3-.7 3.9-.7s2.5.7 3.9.7c3 0 6.5-6.1 6.5-11.4 0-4.1-2.2-7.1-5.4-7.6-1.7-.3-3.5.3-5 1.7z'/%3E%3Cpath d='M16 10.4V5.6'/%3E%3Cpath d='M16.4 8.2c1.9-2.1 4.2-2.7 6.1-2.3.3 2.1-.8 4.2-2.8 5-1.2.5-2.4.5-3.3 0z'/%3E%3C/g%3E%3Cpath d='M16 10.4c-1.5-1.4-3.3-2-5-1.7-3.2.5-5.4 3.5-5.4 7.6 0 5.3 3.5 11.4 6.5 11.4 1.4 0 2.3-.7 3.9-.7s2.5.7 3.9.7c3 0 6.5-6.1 6.5-11.4 0-4.1-2.2-7.1-5.4-7.6-1.7-.3-3.5.3-5 1.7z' fill='%23B23A32'/%3E%3Cpath d='M16.4 8.2c1.9-2.1 4.2-2.7 6.1-2.3.3 2.1-.8 4.2-2.8 5-1.2.5-2.4.5-3.3 0z' fill='%235C7A52'/%3E%3C/svg%3E");
}
ul > li:nth-child(3n)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3.4 19.2 12.4 28.6 12.4 21 18 23.8 27 16 21.6 8.2 27 11 18 3.4 12.4 12.8 12.4Z' fill='none' stroke='%23FFFFFF' stroke-width='5.5' stroke-linejoin='round'/%3E%3Cpath d='M16 3.4 19.2 12.4 28.6 12.4 21 18 23.8 27 16 21.6 8.2 27 11 18 3.4 12.4 12.8 12.4Z' fill='%23B9A6D9'/%3E%3C/svg%3E");
}
ul.stickers > li::before,ul.entries > li::before{content:none;}
ul.stickers,ul.entries,ul.ingredients{padding-left:0;max-width:none;}

/* ---------- code ---------------------------------------------------------
   The label bar carries the yellow gingham; the code surface itself stays a
   flat, plain cream. A check pattern behind real code would cost more in
   legibility than it could ever return in charm.
   ------------------------------------------------------------------------ */
code{
  font-family:var(--code);font-size:.9em;
  background:var(--gold-tint);color:var(--ink);
  padding:1px 5px 2px;border-radius:3px;border:1px solid var(--rule);
}
a code{color:inherit;border-color:currentColor;}

.code{
  background:var(--card);border:1.5px solid var(--rule-firm);
  border-radius:var(--r);margin:0 0 20px;overflow:hidden;
}
.code-label{
  font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);
  background-color:var(--card);background-image:var(--gingham-gold);
  padding:8px 15px;border-bottom:1.5px solid var(--gold);
  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(--green);line-height:1.1;align-self:center;
}
/* ---------- 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(--green);background:var(--green-tint);color:var(--green);
  transition:background .12s ease,color .12s ease;
}
.copy-btn:hover{background:var(--green);color:var(--cream);}
.copy-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.copy-btn.done{background:var(--green);color:var(--cream);border-color:var(--green);}
.copy-btn.failed{opacity:.75;}
@media (prefers-reduced-motion:reduce){.copy-btn{transition:none;}}

.code pre{
  margin:0;padding:15px 17px;overflow-x:auto;
  font-family:var(--code);font-size:13.5px;line-height:1.66;
  color:var(--ink);tab-size:2;background:var(--card);
}
.k{color:#8C3B29;font-weight:700;}                              /* keyword   */
.s{color:#4E6A44;}                                              /* string    */
.c{font-family:var(--hand);font-size:16px;color:#9A7F63;}        /* comment   */
.e{color:var(--red);font-weight:700;}
.d{color:var(--ink-faint);}
.hl{background:var(--gold-tint);border-radius:2px;}
.code.term pre{background:#FAF1E4;}
.code.term .code-label{background-image:none;background-color:var(--gold-tint);}

/* ---------- typed-letter callouts ---------------------------------------- */
.callout{
  position:relative;
  background-color:var(--card);background-image:var(--gingham-pink);
  border:1.5px solid var(--rule-firm);border-radius:3px;
  padding:14px 20px 16px;margin:0 0 26px;
  box-shadow:3px 3px 0 var(--red-tint);
}
.callout::before{
  content:"";position:absolute;left:20px;right:20px;top:34px;
  border-top:1px solid var(--red);opacity:.45;
}
.callout p{font-family:var(--code);font-size:13.8px;line-height:1.74;
  margin:0 0 12px;max-width:64ch;}
.callout p:first-of-type{margin-top:14px;}
.callout p:last-child{margin-bottom:0;}
.callout .tag{
  display:flex;align-items:center;gap:7px;
  font-family:var(--display);font-weight:800;font-size:11.5px;
  letter-spacing:.17em;text-transform:uppercase;margin:0;height:20px;
}
.callout .tag::after{
  content:"";flex:none;width:15px;height:15px;margin-left:2px;
  background:currentColor;opacity:.4;
  -webkit-mask:var(--tagmask) center/contain no-repeat;
  mask:var(--tagmask) center/contain no-repeat;
}
.callout code{background:var(--cream);font-size:.88em;}
.callout strong{color:var(--ink);}

/* short, punchy asides get the scalloped hem instead of a flat foot */
.callout.good{border-left:5px solid var(--green);}
.callout.good .tag{color:var(--green);
  --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:5px solid var(--lav);}
.callout.note .tag{color:var(--ink-soft);
  --tagmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 15 9.6l7.4.6-5.6 4.9 1.7 7.3L12 18.5 5.5 22.4l1.7-7.3L1.6 10.2l7.4-.6z' fill='%23000'/%3E%3C/svg%3E");}
.callout.warn{border-left:5px solid var(--red);}
.callout.warn .tag{color:var(--red);
  --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(--red);}

/* ---------- the recipe card ----------------------------------------------
   The doily-edged "Homemade Apple Fritters" card from the reference, doing
   real work: the guestbook build as ingredients and method.
   ------------------------------------------------------------------------ */
.recipe{
  position:relative;margin:30px 0 34px;padding:20px 26px 22px;
  background:var(--card);border-left:1.5px solid var(--red);
  border-right:1.5px solid var(--red);
}
.recipe-head{text-align:center;margin-bottom:16px;}
.recipe-head h3{
  font-family:var(--hand);font-weight:400;font-size:31px;line-height:1.1;
  margin:0;color:var(--red);text-transform:none;letter-spacing:0;
}
.recipe-head .sub{
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  margin:2px 0 0;
}
.recipe-cols{display:grid;grid-template-columns:minmax(190px,240px) 1fr;gap:26px;}
@media (max-width:640px){.recipe-cols{grid-template-columns:1fr;gap:16px;}}
.recipe h4{
  font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin:0 0 8px;
  border-bottom:1.5px solid var(--green);padding-bottom:4px;
}
.ingredients{margin:0;padding:0;list-style:none;}
.ingredients li{
  font-family:var(--hand);font-size:19px;line-height:1.38;color:var(--ink);
  margin:0 0 9px;padding-left:22px;position:relative;overflow-wrap:anywhere;
}
.recipe code{font-size:12px;overflow-wrap:anywhere;}
.ingredients li::before{
  content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;
  border:1.5px solid var(--red);border-radius:2px;background-image:none;
}
.method{margin:0;padding:0 0 0 4px;list-style:none;counter-reset:m;}
.method li{
  counter-increment:m;position:relative;padding-left:32px;margin:0 0 11px;
  font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:60ch;
}
.method li::before{
  content:counter(m);position:absolute;left:0;top:1px;
  width:21px;height:21px;line-height:20px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:11.5px;
  color:var(--cream);background:var(--red);border-radius:50%;
}
.recipe .foot-note{
  margin:16px 0 0;font-family:var(--hand);font-size:18px;color:var(--green);
  text-align:center;
}

/* ---------- recap card ---------------------------------------------------
   Same fillable card as Issue 01 - contenteditable field, clickable rating,
   both stored by reference.js. Doily edge and gingham head for this issue.
   ------------------------------------------------------------------------ */
.recap{
  position:relative;margin:26px 0 20px;padding:14px 22px 16px;
  background:var(--card);
  border-left:1.5px solid var(--red);border-right:1.5px solid var(--red);
}
.recap-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;border-bottom:1.5px solid var(--red);padding-bottom:5px;margin-bottom:11px;
}
.recap-head h4{margin:0;font-family:var(--display);font-weight:800;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);}
.recap-head .card-no{font-family:var(--code);font-size:10.5px;
  color:var(--ink-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;margin:0 0 6px;}
.recap dt{flex:none;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-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(--ink);}
.recap dd code{font-family:var(--code);font-size:12px;background:transparent;
  border:none;padding:0;color:var(--ink);}
.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(--ink);
  caret-color:var(--red);min-height:56px;
  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(--gold-tint);
  box-shadow:0 0 0 2px var(--red-tint-2);border-radius:2px;}
.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(--display);font-weight:700;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-right:3px;}
.recap .pip{background:none;border:none;padding:2px;margin:0;cursor:pointer;
  line-height:0;border-radius:4px;}
.recap .pip svg{width:20px;height:20px;opacity:.3;
  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(--red);outline-offset:1px;}
.recap .saved{font-family:var(--hand);font-size:16px;color:var(--green);
  opacity:0;transition:opacity .2s;}
.recap .saved.on{opacity:.9;}

/* ---------- figures ------------------------------------------------------ */
figure{margin:24px 0;}
figure svg{display:block;width:100%;height:auto;background:var(--card);
  border:1.5px solid var(--rule-firm);border-radius:var(--r);}
figcaption{font-family:var(--hand);font-size:19px;line-height:1.4;
  color:var(--ink-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(--red);}

/* ---------- tables ------------------------------------------------------- */
.table-scroll{overflow-x:auto;margin:0 0 22px;border:1.5px 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(--display);font-weight:800;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);
  background-color:var(--card);background-image:var(--gingham-pink);
  border-bottom:2px solid var(--red);
}
tbody th{font-family:var(--display);font-weight:700;font-size:12.5px;
  color:var(--ink-soft);white-space:nowrap;}
tbody tr:nth-child(2n) td,tbody tr:nth-child(2n) th{background:rgba(251,243,233,.7);}
tr:last-child td,tr:last-child th{border-bottom:none;}
td code{background:var(--gold-tint);}
.num{font-family:var(--code);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---------- numbered walkthrough ----------------------------------------- */
.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:33px;height:30px;line-height:29px;
  text-align:center;font-family:var(--display);font-size:13px;font-weight:800;
  color:var(--cream);background:var(--red);
  border-radius:4px;transform:rotate(-2.5deg);
}
.steps h4{margin:0 0 3px;font-family:var(--display);font-weight:800;font-size:16px;
  text-transform:none;letter-spacing:.005em;color:var(--ink);}
.steps p{margin:0;font-size:15.5px;color:var(--ink-soft);}

/* ---------- 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(--display);font-weight:800;font-size:14px;color:var(--green);
  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;}}

/* ---------- the guestbook demo ------------------------------------------- */
.demo{
  position:relative;border:1.5px solid var(--green);border-radius:var(--r);
  background:var(--card);padding:20px 24px 24px;margin:0 0 24px;
  box-shadow:4px 4px 0 var(--green-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(--green);}
.demo-head h3{margin:0;font-family:var(--display);font-weight:800;
  font-size:21px;color:var(--green);}
.status{font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;padding:4px 13px;
  border-radius:999px;border:1.5px dashed var(--ink-faint);
  color:var(--ink-faint);background:var(--cream);white-space:nowrap;}
.status.live{color:var(--green);border-color:var(--green);background:var(--green-tint);}
.status.down{color:var(--red);border-color:var(--red);background:var(--red-tint);}

.gb-form{display:grid;gap:14px;margin-bottom:22px;}
.field label{display:block;font-family:var(--display);font-weight:700;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px;}
.gb-form input,.gb-form textarea{
  width:100%;font-family:var(--hand);font-size:21px;color:var(--ink);
  background:var(--cream);border:1px solid var(--rule-firm);
  border-bottom:2px solid var(--green);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 29px,rgba(92,122,82,.22) 29px 30px);
  background-position:0 6px;}
.gb-form input::placeholder,.gb-form textarea::placeholder{color:var(--ink-faint);opacity:.7;}
.gb-form input:focus,.gb-form textarea:focus{outline:none;
  border-bottom-color:var(--red);box-shadow:0 2px 0 var(--red-tint-2);}
.gb-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.gb-form button{
  font-family:var(--display);font-size:14.5px;font-weight:800;letter-spacing:.06em;
  background:var(--red);color:var(--cream);border:1.5px solid var(--red);
  border-radius:999px;padding:7px 22px 8px;cursor:pointer;
  box-shadow:2px 2px 0 var(--shadow);
}
.gb-form button:hover{background:var(--green);border-color:var(--green);}
.gb-form button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.counter{font-family:var(--code);font-size:11.5px;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;}
.counter.over{color:var(--red);}
.gb-msg{font-family:var(--hand);font-size:19px;margin:0;min-height:1.2em;}
.gb-msg.ok{color:var(--green);}
.gb-msg.bad{color:var(--red);}

.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:first-child{border-top:2px solid var(--green);}
.entry-head{display:flex;justify-content:space-between;gap:12px;
  align-items:baseline;margin-bottom:2px;}
.entry-name{font-family:var(--display);font-weight:800;font-size:15.5px;color:var(--ink);}
.entry-when{font-family:var(--code);font-size:11px;color:var(--ink-faint);white-space:nowrap;}
.entry-msg{margin:0;font-family:var(--hand);font-size:20px;line-height:1.4;
  color:var(--ink-soft);white-space:pre-wrap;overflow-wrap:anywhere;}
.entries-empty{font-family:var(--hand);font-size:19px;color:var(--ink-faint);margin:0;}

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

@media (max-width:640px){
  .wrap{padding:18px 15px 70px;}
  .seal-row{flex-direction:column;text-align:center;gap:8px;}
  .masthead{padding:20px 18px 18px;}
  .callout::before{left:16px;right:16px;}
  .peel{display:none;}
  .kit-row{flex-wrap:wrap;gap:8px;}
  .kit-lbl{width:auto;}
}
@media print{
  body{background:#fff;background-image:none;}
  .toc,.demo,.recap,.recipe,.callout,figure{page-break-inside:avoid;}
  .peel{display:none;}
}

/* ---------- the stamped Part markers ------------------------------------- */
.part-marker{margin:44px 0 6px;max-width:none;}
.part-marker:first-of-type{margin-top:8px;}