/* Sealed Draw — "The Sealed Envelope" theme.
   Loaded after kit/base.css (hash-pinned, unedited) and draw.css on every page. Visual only: it restyles
   what is there and adds decoration that carries no information. Every decorative element is aria-hidden.

   Paper and post: cream card stock, kraft envelopes, red wax seals, gift tags on twine, postmarks.
   Fonts are self-hosted under the SIL Open Font License (licences in /fonts/): Fraunces for the words,
   Courier Prime for the typed labels. font-display: optional, so a late font never swaps in and moves
   anything; the service worker precaches both, so a second visit always has them.
   Art: hand-made SVG (seal, paper grain, kraft fibres, postmark) inlined below as data: images, and inline
   SVG in the pages; the rest is CSS. Nothing decorative is fetched, so no paint can land on a page's "requests
   since load" meter. The meter pages fetch no web font at all (body.meter); every other page preloads the faces
   it uses in its <head>. */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: optional;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courier-prime.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;
  /* The art, inline: a data: image is decoded in place and makes no request, so no paint, however late,
     can show up on the pages' "requests since load" meters. */
  --art-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Cdefs%3E%3CradialGradient id='w' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23d8473a'/%3E%3Cstop offset='.45' stop-color='%23b0241b'/%3E%3Cstop offset='1' stop-color='%236d0e0a'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='60%25' cy='65%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23a3201a'/%3E%3Cstop offset='1' stop-color='%238a1813'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M96.4 50.0C96.7 52.1 96.2 54.4 95.7 56.6C95.2 58.7 94.6 60.9 93.4 62.8C92.3 64.6 89.7 65.8 88.6 67.6C87.5 69.5 87.8 71.8 87.0 73.8C86.2 75.8 85.3 77.8 84.0 79.4C82.7 81.1 80.8 82.4 79.1 83.6C77.4 84.9 75.7 86.2 73.8 87.0C71.9 87.9 69.5 87.5 67.7 88.7C65.9 89.9 64.8 92.8 62.9 94.1C61.1 95.4 58.8 96.1 56.7 96.3C54.5 96.5 52.1 95.9 50.0 95.3C47.9 94.6 45.9 93.3 43.9 92.6C41.9 91.9 39.9 91.7 38.0 90.9C36.1 90.1 34.5 88.8 32.7 88.0C30.8 87.2 28.7 86.9 26.8 86.0C25.0 85.2 23.3 84.0 21.6 82.8C19.9 81.6 18.3 80.2 16.8 78.8C15.2 77.4 13.8 75.8 12.3 74.3C10.7 72.7 8.8 71.2 7.4 69.5C6.0 67.7 3.7 65.8 3.7 63.6C3.6 61.4 6.6 58.4 7.3 56.1C8.0 53.9 7.5 52.0 7.9 50.0C8.3 48.0 9.7 46.2 9.8 44.2C9.9 42.2 8.8 40.0 8.5 37.8C8.2 35.6 7.5 32.9 8.0 30.8C8.5 28.7 10.2 27.0 11.5 25.3C12.8 23.5 14.2 21.8 15.7 20.3C17.2 18.7 19.2 17.8 20.7 16.2C22.2 14.6 23.0 11.9 24.7 10.6C26.4 9.3 28.8 8.6 31.1 8.5C33.3 8.4 36.0 9.7 38.2 10.0C40.4 10.2 42.3 10.2 44.3 10.1C46.2 10.0 48.0 9.9 50.0 9.2C52.0 8.6 54.1 7.0 56.3 6.3C58.5 5.7 60.9 5.2 63.2 5.2C65.4 5.2 68.0 5.3 70.0 6.3C72.0 7.3 73.5 9.3 75.1 10.9C76.8 12.4 78.3 14.0 79.8 15.6C81.4 17.1 83.3 18.3 84.4 20.2C85.5 22.0 86.0 24.4 86.4 26.6C86.8 28.8 86.2 31.3 86.8 33.2C87.4 35.1 88.7 36.5 89.9 38.3C91.0 40.0 92.7 41.8 93.8 43.7C94.9 45.7 96.1 47.9 96.4 50.0Z' fill='%235a0b08' transform='translate(1.2 2)' opacity='.35'/%3E%3Cpath d='M96.4 50.0C96.7 52.1 96.2 54.4 95.7 56.6C95.2 58.7 94.6 60.9 93.4 62.8C92.3 64.6 89.7 65.8 88.6 67.6C87.5 69.5 87.8 71.8 87.0 73.8C86.2 75.8 85.3 77.8 84.0 79.4C82.7 81.1 80.8 82.4 79.1 83.6C77.4 84.9 75.7 86.2 73.8 87.0C71.9 87.9 69.5 87.5 67.7 88.7C65.9 89.9 64.8 92.8 62.9 94.1C61.1 95.4 58.8 96.1 56.7 96.3C54.5 96.5 52.1 95.9 50.0 95.3C47.9 94.6 45.9 93.3 43.9 92.6C41.9 91.9 39.9 91.7 38.0 90.9C36.1 90.1 34.5 88.8 32.7 88.0C30.8 87.2 28.7 86.9 26.8 86.0C25.0 85.2 23.3 84.0 21.6 82.8C19.9 81.6 18.3 80.2 16.8 78.8C15.2 77.4 13.8 75.8 12.3 74.3C10.7 72.7 8.8 71.2 7.4 69.5C6.0 67.7 3.7 65.8 3.7 63.6C3.6 61.4 6.6 58.4 7.3 56.1C8.0 53.9 7.5 52.0 7.9 50.0C8.3 48.0 9.7 46.2 9.8 44.2C9.9 42.2 8.8 40.0 8.5 37.8C8.2 35.6 7.5 32.9 8.0 30.8C8.5 28.7 10.2 27.0 11.5 25.3C12.8 23.5 14.2 21.8 15.7 20.3C17.2 18.7 19.2 17.8 20.7 16.2C22.2 14.6 23.0 11.9 24.7 10.6C26.4 9.3 28.8 8.6 31.1 8.5C33.3 8.4 36.0 9.7 38.2 10.0C40.4 10.2 42.3 10.2 44.3 10.1C46.2 10.0 48.0 9.9 50.0 9.2C52.0 8.6 54.1 7.0 56.3 6.3C58.5 5.7 60.9 5.2 63.2 5.2C65.4 5.2 68.0 5.3 70.0 6.3C72.0 7.3 73.5 9.3 75.1 10.9C76.8 12.4 78.3 14.0 79.8 15.6C81.4 17.1 83.3 18.3 84.4 20.2C85.5 22.0 86.0 24.4 86.4 26.6C86.8 28.8 86.2 31.3 86.8 33.2C87.4 35.1 88.7 36.5 89.9 38.3C91.0 40.0 92.7 41.8 93.8 43.7C94.9 45.7 96.1 47.9 96.4 50.0Z' fill='url(%23w)'/%3E%3Ccircle cx='50' cy='50' r='31' fill='url(%23d)'/%3E%3Ccircle cx='50' cy='50' r='31' fill='none' stroke='%236a0d09' stroke-width='2.4' opacity='.7'/%3E%3Ccircle cx='50' cy='50' r='29.6' fill='none' stroke='%23f08a7c' stroke-width='1' opacity='.45' transform='translate(-.6 -.8)'/%3E%3Ccircle cx='50' cy='50' r='24' fill='none' stroke='%236a0d09' stroke-width='.8' stroke-dasharray='1.2 2.2' opacity='.6'/%3E%3Cg transform='translate(.7 .9)' fill='%235e0b08' opacity='.7'%3E%3Cg %3E%3Cpath d='M50 50C44 38 30 36 31 45C32 53 44 52 50 50Z'/%3E%3Cpath d='M50 50C56 38 70 36 69 45C68 53 56 52 50 50Z'/%3E%3Cpath d='M48 51L40 66L45 64L47 69L51 53Z'/%3E%3Cpath d='M52 51L60 66L55 64L53 69L49 53Z'/%3E%3Ccircle cx='50' cy='50' r='4.6'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23c63a2f'%3E%3Cg %3E%3Cpath d='M50 50C44 38 30 36 31 45C32 53 44 52 50 50Z'/%3E%3Cpath d='M50 50C56 38 70 36 69 45C68 53 56 52 50 50Z'/%3E%3Cpath d='M48 51L40 66L45 64L47 69L51 53Z'/%3E%3Cpath d='M52 51L60 66L55 64L53 69L49 53Z'/%3E%3Ccircle cx='50' cy='50' r='4.6'/%3E%3C/g%3E%3C/g%3E%3Cg fill='none' stroke='%23f3a196' stroke-width='.7' opacity='.55' transform='translate(-.4 -.5)'%3E%3Cg %3E%3Cpath d='M50 50C44 38 30 36 31 45C32 53 44 52 50 50Z'/%3E%3Cpath d='M50 50C56 38 70 36 69 45C68 53 56 52 50 50Z'/%3E%3Cpath d='M48 51L40 66L45 64L47 69L51 53Z'/%3E%3Cpath d='M52 51L60 66L55 64L53 69L49 53Z'/%3E%3Ccircle cx='50' cy='50' r='4.6'/%3E%3C/g%3E%3C/g%3E%3Cpath d='M24 30C30 20 42 15 52 15' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' opacity='.22'/%3E%3C/svg%3E");
  --art-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --art-fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%235b3a17' stroke-width='.6' stroke-linecap='round' opacity='.16'%3E%3Cpath d='M57 131q-3 1 20 -3'/%3E%3Cpath d='M3 201q-5 -2 26 -0'/%3E%3Cpath d='M201 114q3 -2 20 3'/%3E%3Cpath d='M126 178q3 -3 22 1'/%3E%3Cpath d='M72 7q7 -0 22 3'/%3E%3Cpath d='M171 221q-2 2 17 3'/%3E%3Cpath d='M211 23q-7 -2 25 -1'/%3E%3Cpath d='M150 72q0 -1 16 1'/%3E%3Cpath d='M140 217q4 3 24 4'/%3E%3Cpath d='M161 39q7 3 24 1'/%3E%3Cpath d='M171 51q7 0 15 -3'/%3E%3Cpath d='M205 238q-8 2 17 -3'/%3E%3Cpath d='M71 185q7 -3 20 -4'/%3E%3Cpath d='M172 79q8 3 18 4'/%3E%3Cpath d='M74 18q2 -3 13 -1'/%3E%3Cpath d='M147 37q-9 2 15 4'/%3E%3Cpath d='M215 91q-1 0 20 1'/%3E%3Cpath d='M134 149q9 0 17 2'/%3E%3Cpath d='M57 72q10 0 19 -4'/%3E%3Cpath d='M100 139q-10 1 20 -4'/%3E%3Cpath d='M151 112q4 -1 21 2'/%3E%3Cpath d='M5 15q4 3 14 -0'/%3E%3Cpath d='M142 77q-3 -1 16 1'/%3E%3Cpath d='M72 91q5 -3 19 2'/%3E%3Cpath d='M74 53q6 -2 13 -1'/%3E%3Cpath d='M168 24q-4 -1 23 -0'/%3E%3Cpath d='M205 41q-3 1 24 -0'/%3E%3Cpath d='M54 29q1 -2 23 3'/%3E%3Cpath d='M44 67q6 1 23 -1'/%3E%3Cpath d='M31 70q6 -1 16 -1'/%3E%3Cpath d='M101 98q8 -2 10 4'/%3E%3Cpath d='M211 237q-1 3 25 -2'/%3E%3Cpath d='M179 201q3 0 15 -1'/%3E%3Cpath d='M55 16q2 -1 23 -4'/%3E%3Cpath d='M217 166q8 2 24 1'/%3E%3Cpath d='M3 179q-7 -1 21 0'/%3E%3Cpath d='M99 225q2 -1 14 3'/%3E%3Cpath d='M115 188q-3 -2 19 3'/%3E%3Cpath d='M41 190q8 2 23 -4'/%3E%3Cpath d='M151 207q-9 -1 14 0'/%3E%3Cpath d='M102 113q6 -3 11 -3'/%3E%3Cpath d='M30 16q9 2 11 0'/%3E%3Cpath d='M76 75q-3 1 19 -1'/%3E%3Cpath d='M46 79q-8 0 21 -1'/%3E%3Cpath d='M19 43q-3 1 23 -1'/%3E%3Cpath d='M192 150q-1 -1 18 2'/%3E%3Cpath d='M101 167q-1 -2 19 2'/%3E%3Cpath d='M17 102q-1 2 25 -1'/%3E%3Cpath d='M215 190q-5 -0 12 3'/%3E%3Cpath d='M159 213q6 1 22 1'/%3E%3Cpath d='M25 141q-10 -2 22 -4'/%3E%3Cpath d='M22 24q8 -2 10 3'/%3E%3Cpath d='M29 203q3 2 25 1'/%3E%3Cpath d='M192 9q5 0 21 -3'/%3E%3Cpath d='M180 224q-9 -1 19 3'/%3E%3Cpath d='M58 43q-5 1 22 -1'/%3E%3Cpath d='M88 95q-3 -0 11 0'/%3E%3Cpath d='M234 99q5 -2 21 2'/%3E%3Cpath d='M162 124q-0 1 24 -3'/%3E%3Cpath d='M23 180q8 0 17 2'/%3E%3Cpath d='M45 64q-6 1 15 -2'/%3E%3Cpath d='M166 229q-4 1 17 3'/%3E%3Cpath d='M140 64q-6 -3 18 -1'/%3E%3Cpath d='M41 87q-4 2 12 4'/%3E%3Cpath d='M115 144q-1 2 23 0'/%3E%3Cpath d='M116 173q7 -1 22 4'/%3E%3Cpath d='M112 55q-5 1 21 4'/%3E%3Cpath d='M205 58q-6 -1 13 2'/%3E%3Cpath d='M206 216q-5 2 15 -1'/%3E%3Cpath d='M175 21q-8 2 15 -1'/%3E%3C/g%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --art-postmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 72' width='132' height='72'%3E%3Cstyle%3E.p{fill:none;stroke:%232a1c12;stroke-width:1.4;opacity:.62}.t{fill:%232a1c12;opacity:.7;font:6.4px 'Courier Prime',ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em}@media (prefers-color-scheme:dark){.p{stroke:%23f4e8d4;opacity:.5}.t{fill:%23f4e8d4;opacity:.6}}%3C/style%3E%3Cg transform='rotate(-6 66 36)'%3E%3Cpath class='p' d='M4 24q5-4 10 0t10 0t10 0t10 0t10 0t10 0M2 34q5-4 10 0t10 0t10 0t10 0t10 0t10 0M4 44q5-4 10 0t10 0t10 0t10 0t10 0t10 0'/%3E%3Cg transform='translate(96 36)'%3E%3Ccircle class='p' r='30'/%3E%3Ccircle class='p' r='20' stroke-width='.8'/%3E%3Cpath id='a' d='M-25 0a25 25 0 1 1 50 0a25 25 0 1 1 -50 0' fill='none'/%3E%3Ctext class='t' dy='2.2'%3E%3CtextPath href='%23a' textLength='154' lengthAdjust='spacing'%3ESEALED DRAW · PAR AVION · %3C/textPath%3E%3C/text%3E%3Cpath class='p' d='M-9 -5h18v11h-18zM-9 -5l9 7l9 -7'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --stamp-paper: #fffdf7; --stamp-box: #caa36d; --stamp-box-lo: #b08650;
  --roster-bg: #fffdf6; --roster-margin: rgba(176, 38, 30, 0.45); --roster-rule: rgba(29, 79, 156, 0.2);
  --placeholder: #7a6553;
  --keep-bg: #f1d0c6; --keep-ink: #3a120d;
  --paper: #f4ead7;
  --panel: #fffaf0;
  --ink: #2a1c12;
  --ink-soft: #5b4535;
  --line: #e0cfb2;
  --line-strong: #8d7254;
  --accent: #9c1f18;        /* wax red: links and interactive text */
  --accent-soft: #f6e0d5;
  --focus: #1d4f9c;         /* postal blue */
  --pass: #1e6833;
  --pass-soft: #e4efdc;
  --fail: #a61f17;
  --fail-soft: #fbe5dd;
  --warn: #855000;
  --readout-bg: #fff6e1;
  --readout-ink: #2a1c12;
  --readout-dim: #66503f;
  --readout-warn: #855000;

  --wax: #a3231b;
  --wax-hi: #c2392d;
  --wax-lo: #7a140f;
  --on-wax: #fff7ec;
  --kraft: #caa36d;
  --kraft-lo: #b08650;
  --kraft-hi: #dbbb8c;
  --on-kraft: #2a1c12;
  --twine: #9b7a4c;
  --air-red: #b3261e;
  --air-blue: #1d4f9c;
  --stamp-field: #2c5a88;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 10px 24px -14px rgba(60, 35, 10, 0.55), 0 2px 4px rgba(60, 35, 10, 0.12);

  --serif: "Fraunces", Georgia, Cambria, "Times New Roman", serif;
  --type: "Courier Prime", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: var(--serif);
  --mono: var(--type);
  --radius: 6px;
}

/* The pages with a "requests since load" meter (/methodology/, /code/, /open/) set their type in the fallback
   faces and fetch no web font. The meter counts every load that lands after page.js starts it, and a font
   (even preloaded) can land after that on any real connection, which would read as a red "1 request" on a
   page that sent nothing. Nothing here is fetched, so the meters read exactly what the page itself does. */
body.meter {
  --serif: Georgia, Cambria, "Times New Roman", serif;
  --type: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: var(--serif);
  --mono: var(--type);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --stamp-paper: #f1e4cc; --stamp-box: #caa36d; --stamp-box-lo: #b08650;
    --roster-bg: #2a1f16; --roster-margin: rgba(255, 140, 120, 0.4); --roster-rule: rgba(158, 192, 255, 0.16);
    --placeholder: #a8927a;
    --keep-bg: #4a231c; --keep-ink: #fbe6df;
    --paper: #18110b;
    --panel: #251b13;
    --ink: #f4e8d4;
    --ink-soft: #cdb89c;
    --line: #3f3022;
    --line-strong: #977b5c;
    --accent: #ff9585;
    --accent-soft: #3a211b;
    --focus: #9ec0ff;
    --pass: #86dba0;
    --pass-soft: #1c2f20;
    --fail: #ff998d;
    --fail-soft: #3b1a15;
    --warn: #ffc46b;
    --readout-bg: #2d2117;
    --readout-ink: #f4e8d4;
    --readout-dim: #c3ad91;
    --readout-warn: #ffc46b;

    --wax: #b02a20;
    --wax-hi: #c43c2f;
    --wax-lo: #7d1610;
    --on-wax: #fff7ec;
    --kraft: #6e5134;
    --kraft-lo: #573f27;
    --kraft-hi: #82623f;
    --on-kraft: #fbf0dd;
    --twine: #a98a5c;
    --air-red: #c2392d;
    --air-blue: #5b86c9;
    --stamp-field: #2c5a88;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 26px -14px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.35);
  }
}

/* ---------- Page ---------- */

html { background: var(--paper); }

body {
  background-color: var(--paper);
  background-image: var(--art-grain);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.02rem;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}

@media (prefers-color-scheme: dark) {
  body { background-image: none; }
}

::selection { background: var(--wax); color: var(--on-wax); }

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- Header: an airmail envelope edge ---------- */

.site-header {
  background: var(--panel);
  border-bottom: 0;
  position: relative;
  padding-bottom: 7px;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background: repeating-linear-gradient(-45deg,
    var(--air-red) 0 12px, transparent 12px 18px,
    var(--air-blue) 18px 30px, transparent 30px 36px);
}
.site-header .inner {
  align-items: center;
  gap: 0 1.25rem;
  padding: 0.35rem 1rem 0.25rem;
}
.brand {
  font-family: var(--serif);
  font-weight: 760;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap);
}
.brand .brand-mark { display: none; }   /* still fetched, so the favicon stays warm; the seal is drawn below */
.brand::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background: var(--art-seal) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(60, 20, 10, 0.35));
  transform: rotate(-8deg);
}
.site-nav { gap: 0 1rem; margin-left: auto; }
.site-nav a {
  color: var(--ink-soft);
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 0;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--twine); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 560px) {
  .site-header .inner { padding: 0.2rem 1rem 0.1rem; }
  .site-nav { gap: 0 0.85rem; margin-left: 0; width: 100%; }
  .site-nav a { font-size: 0.88rem; min-height: 40px; }
}
@media (max-width: 380px) {
  .site-nav { gap: 0 0.6rem; }
  .site-nav a { font-size: 0.82rem; }
}

/* ---------- Type ---------- */

h1, h2, h3, .brand { font-family: var(--serif); }
h1 {
  font-weight: 720;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(1.65rem, 4.4vw, 2.6rem);
  text-wrap: balance;
}
h2 {
  font-weight: 680;
  font-variation-settings: "opsz" 72;
  font-size: 1.45rem;
  letter-spacing: -0.012em;
  margin-top: 2.6rem;
}
/* A short twist of twine under each section heading. */
h2::after {
  content: "";
  display: block;
  width: 3.4rem;
  height: 5px;
  margin-top: 0.35rem;
  border-radius: 3px;
  background: repeating-linear-gradient(115deg, var(--twine) 0 3px, var(--kraft-hi) 3px 5px);
  opacity: 0.9;
}
.tool-panel h2::after, .proof-drawer h2::after { display: none; }
h3 { font-weight: 660; font-size: 1.12rem; }

.lede { color: var(--ink-soft); font-size: 1.06rem; }

/* The eyebrow is a rubber stamp. */
.eyebrow {
  display: table;
  font-family: var(--type);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 0.05rem 0.45rem 0;
  transform: rotate(-1.5deg);
  margin: 0 0 0.6rem;
  box-shadow: 0 0 0 1px var(--paper) inset;
}

/* ---------- Hero postage: a stamp and a postmark (inline SVG, decorative) ---------- */

.hero { position: relative; }
.post {
  float: right;
  width: 9.5rem;
  height: auto;
  margin: -0.4rem -0.4rem 0 0.75rem;
  shape-outside: inset(0 0 0 1rem);
  overflow: visible;
  filter: drop-shadow(0 3px 4px rgba(60, 35, 10, 0.18));
}
.post .st-paper { fill: var(--stamp-paper); }
.post .st-field { fill: var(--stamp-field); }
.post .st-ink { fill: #fff7ec; font-family: var(--type); font-size: 7px; letter-spacing: 0.05em; }
.post .st-box { fill: var(--stamp-box); }
.post .st-box-lo { fill: var(--stamp-box-lo); }
.post .st-ribbon { fill: #c2392d; }
.post .pm { fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0.72; }
.post .pm-thin { stroke-width: 0.8; }
.post .pm-text { fill: var(--ink); opacity: 0.78; font-family: var(--type); font-size: 6.4px; letter-spacing: 0.06em; }
@media (max-width: 560px) {
  .post { width: 5.6rem; margin: -0.3rem -0.3rem 0 0.4rem; }
}

/* ---------- Panels: card stock ---------- */

.tool-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem;
}

/* The generator's panel is an open kraft envelope: the flap stands up behind the card, and a wax
   seal waits on it. Decorative only (pseudo-elements, no text). */
.prints-sheets .tool-panel,
.code-envelope .tool-panel {
  position: relative;
  /* Clears the flap (2.3rem) and the seal that rises above it, so the seal never sits on the text above. */
  margin-top: 3.3rem;
  border: 0;
  border-radius: 4px 4px 8px 8px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box;
  box-shadow:
    0 0 0 10px var(--kraft),
    0 0 0 11px var(--kraft-lo),
    0 22px 30px -18px rgba(60, 35, 10, 0.6);
  margin-left: 11px;
  margin-right: 11px;
}
.prints-sheets .tool-panel::before,
.code-envelope .tool-panel::before {
  content: "";
  position: absolute;
  left: -11px; right: -11px;
  top: -2.3rem;
  height: 2.3rem;
  background: var(--kraft-lo) var(--art-fibres);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  z-index: 0;
}
.prints-sheets .tool-panel::after,
.code-envelope .tool-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.95rem;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: -1.3rem;
  background: var(--art-seal) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 20, 10, 0.35));
  transform: rotate(-12deg);
  pointer-events: none;
}

/* ---------- Gift-tag stepper on a length of twine ---------- */

.stepper-nav {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0.2rem 0 1rem;
}
.stepper-nav::before {
  content: "";
  position: absolute;
  left: -0.6rem; right: -0.6rem;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(115deg, var(--twine) 0 3px, var(--kraft-hi) 3px 5px);
}
.step-dot {
  position: relative;
  isolation: isolate;
  font-family: var(--serif);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--on-kraft);
  background: transparent;
  border: 0;
  border-radius: 3px 5px 5px 3px;
  padding: 0.35rem 0.5rem 0.35rem 1.45rem;
  min-height: var(--tap);
  text-align: left;
  transition: transform 0.18s ease;
}
/* The tag's shape is drawn on a layer behind the label, so its clip-path never cuts the focus ring. */
.step-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--kraft-hi);
  clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0.7rem 100%, 0 50%);
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.08) inset;
  transition: background-color 0.18s ease;
}
/* the tag's eyelet */
.step-dot::before {
  content: "";
  position: absolute;
  left: 0.58rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--kraft-lo);
}
.step-dot:hover { transform: rotate(-2deg) translateY(-1px); }
.step-dot.current {
  background: transparent;
  color: var(--on-wax);
  border: 0;
  font-weight: 700;
  transform: rotate(-2deg);
}
.step-dot.current::after { background: var(--wax); }
.step-dot.current::before { box-shadow: 0 0 0 2px var(--wax-lo); }
.step-dot:focus-visible { outline-offset: 3px; }

.step-controls { border-top: 1px dashed var(--line-strong); }
.step-progress { font-family: var(--type); font-size: 0.8rem; color: var(--ink-soft); }

@media (max-width: 480px) {
  /* Tags wrap onto a second line when they do not fit, so every label stays whole. */
  .stepper-nav { display: flex; flex-wrap: wrap; gap: 0.3rem; }
  .step-dot { flex: 1 1 auto; font-size: 0.8rem; padding: 0.3rem 0.45rem 0.3rem 1.3rem; white-space: nowrap; }
  .step-dot::before { left: 0.5rem; width: 0.44rem; height: 0.44rem; margin-top: -0.22rem; }
  .prints-sheets .tool-panel, .code-envelope .tool-panel {
    padding: 0.85rem 0.8rem;
    margin-left: 8px; margin-right: 8px;
    box-shadow: 0 0 0 8px var(--kraft), 0 0 0 9px var(--kraft-lo), 0 22px 30px -18px rgba(60, 35, 10, 0.6);
  }
  .prints-sheets .tool-panel::before, .code-envelope .tool-panel::before { left: -9px; right: -9px; }
}

/* ---------- Fields ---------- */

.field-label, .mode-set legend { font-family: var(--serif); font-weight: 680; font-size: 1.02rem; }

select, input[type="text"], input[type="number"], #event-date, input[type="date"], .paste-box, .roster {
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background-color: var(--panel);
  color: var(--ink);
}

/* The name list is a ruled index card with a red margin line. */
.roster {
  --rule: 24px;
  font-family: var(--type);
  line-height: var(--rule);
  padding: 6px 0.7rem 6px 2.3rem;
  background-color: var(--roster-bg);
  background-image:
    linear-gradient(90deg, transparent 1.65rem, var(--roster-margin) 1.65rem, var(--roster-margin) calc(1.65rem + 1.5px), transparent calc(1.65rem + 1.5px)),
    repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--roster-rule) calc(var(--rule) - 1px) var(--rule));
  background-position: 0 0, 0 6px;
  background-attachment: local;
}
.roster::placeholder, .paste-box::placeholder, input::placeholder { color: var(--placeholder); opacity: 1; }

.field-help { color: var(--ink-soft); font-size: 0.86rem; }

.mode-set { border: 1.5px dashed var(--line-strong); border-radius: 6px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--wax); width: 1.05rem; height: 1.05rem; }

.budget-bar { height: 8px; background: var(--line); border-radius: 4px; }
.budget-bar > span { background: repeating-linear-gradient(115deg, var(--wax) 0 4px, var(--wax-hi) 4px 7px); }

/* ---------- Buttons: wax and card stock ---------- */

.btn {
  font-family: var(--serif);
  font-weight: 680;
  font-size: 1rem;
  letter-spacing: 0.005em;
  color: var(--on-wax);
  background: radial-gradient(120% 140% at 30% 15%, var(--wax-hi), var(--wax) 55%, var(--wax-lo));
  border: 1px solid var(--wax-lo);
  border-radius: 999px;
  padding: 0.62rem 1.2rem;
  min-height: var(--tap);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 -2px 0 rgba(0, 0, 0, 0.18) inset, 0 3px 6px -2px rgba(90, 20, 10, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

.btn.secondary {
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--line-strong);
  box-shadow: 0 2px 0 var(--line);
}
.btn.secondary:hover { border-color: var(--ink-soft); filter: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; transform: none; }

/* "Seal the draw" carries a little seal of its own. */
#seal::before {
  content: "";
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin: -0.2em 0.45em -0.2em -0.35em;
  vertical-align: -0.15em;
  background: var(--art-seal) center / contain no-repeat;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 247, 236, 0.85);
}

.link-btn { color: var(--accent); font-weight: 600; }
.rule-row .drop-rule { border: 1.5px solid var(--line-strong); border-radius: 50%; min-width: var(--tap); }

/* ---------- Readout: a typed postal label ---------- */

.readout {
  position: relative;
  background: var(--readout-bg);
  color: var(--readout-ink);
  font-family: var(--type);
  border-radius: 3px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 3px var(--readout-bg), 0 0 0 4.5px var(--line-strong);
  margin: 0.25rem 0.25rem 1.1rem;
}
.readout .r-label { color: var(--readout-dim); font-size: 0.7rem; letter-spacing: 0.1em; }
.readout .r-value { font-weight: 400; }
.readout .r-value.pass { color: var(--pass); }
.readout .r-value.fail { color: var(--fail); }
.readout .r-value.warn { color: var(--readout-warn); }

/* ---------- Notes: slips held with a strip of tape ---------- */

.note {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--twine);
  border-radius: 3px;
  color: var(--ink-soft);
  box-shadow: 0 6px 12px -10px rgba(60, 35, 10, 0.5);
}
.note.error { border-left-color: var(--fail); background: var(--fail-soft); color: var(--ink); }
.note.warn { border-left-color: var(--warn); }

/* ---------- Send list: one little envelope per person, the fingerprint as its stamp ---------- */

.send-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.65rem 0.8rem 0.65rem 1rem;
  box-shadow: 0 6px 12px -10px rgba(60, 35, 10, 0.55);
  position: relative;
  overflow: hidden;
}
.send-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(-45deg, var(--air-red) 0 6px, transparent 6px 9px, var(--air-blue) 9px 15px, transparent 15px 18px);
}
.send-row .who { font-family: var(--serif); font-weight: 680; font-size: 1.05rem; }
.send-row .fp {
  font-family: var(--type);
  font-size: 0.78rem;
  color: var(--on-wax);
  background: var(--stamp-field);
  border: 0;
  border-radius: 0;
  padding: 0.25rem 0.5rem;
  outline: 2px dotted #fffdf7;
  outline-offset: -3px;
  transform: rotate(2deg);
}
.send-row .tick { font-family: var(--type); color: var(--pass); }
.send-row.sent { background: var(--pass-soft); }
.send-row .btn { padding: 0.32rem 0.85rem; }

.code-out {
  font-family: var(--type);
  background: var(--readout-bg);
  border: 1.5px dashed var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
}

/* ---------- FAQ and drawers: envelopes that open ---------- */

.faq details, .proof-drawer {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 6px 12px -10px rgba(60, 35, 10, 0.5);
}
.faq summary, .proof-drawer summary {
  font-family: var(--serif);
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tap);
}
.faq summary::before, .proof-drawer summary::before {
  content: "+";
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  border-radius: 50%;
  font-family: var(--type);
  font-weight: 400;
  color: var(--on-wax);
  background: radial-gradient(circle at 35% 30%, var(--wax-hi), var(--wax) 60%, var(--wax-lo));
  box-shadow: 0 1px 2px rgba(60, 20, 10, 0.4);
}
.faq details[open] summary::before, .proof-drawer[open] summary::before { content: "–"; }
.proof-drawer { padding: 0.2rem 0.9rem 0.6rem; margin-top: 1.4rem; }

/* ---------- Related links and cards: gift tags ---------- */

.related { gap: 0.6rem 0.7rem; }
.related li a {
  position: relative;
  isolation: isolate;
  font-family: var(--serif);
  font-weight: 600;
  background: transparent;
  color: var(--on-kraft);
  border: 0;
  border-radius: 3px 6px 6px 3px;
  padding: 0.35rem 0.95rem 0.35rem 1.6rem;
}
/* the tag's shape, behind the label (a clip-path on the link itself would cut its focus ring) */
.related li a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--kraft-hi);
  clip-path: polygon(0.75rem 0, 100% 0, 100% 100%, 0.75rem 100%, 0 50%);
}
.related li a::before {
  content: "";
  position: absolute;
  left: 0.62rem; top: 50%;
  width: 0.45rem; height: 0.45rem; margin-top: -0.225rem;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--kraft-lo);
}
.related li:nth-child(odd) a { transform: rotate(-1deg); }
.related li:nth-child(even) a { transform: rotate(1deg); }
.related li a:hover { background: transparent; color: var(--on-wax); }
.related li a:hover::after { background: var(--wax); }

.tool-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding-top: 1.4rem;
  overflow: hidden;
}
.tool-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0.9rem;
  background: var(--kraft);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tool-card a.title { font-family: var(--serif); font-size: 1.12rem; }

.prose code { background: var(--accent-soft); color: var(--ink); }
.prose table, .prose th, .prose td { border-color: var(--line); }

/* ---------- Footer: the back of the envelope ---------- */

.site-footer {
  position: relative;
  border-top: 0;
  background: var(--kraft) var(--art-fibres);
  color: var(--on-kraft);
  padding-top: 7px;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7px;
  background: repeating-linear-gradient(-45deg,
    var(--air-red) 0 12px, var(--panel) 12px 18px,
    var(--air-blue) 18px 30px, var(--panel) 30px 36px);
}
.site-footer .inner, .site-footer a { color: var(--on-kraft); }
.site-footer a { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer .promise {
  font-family: var(--type);
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  transform: rotate(-1deg);
}

/* ======================================================================
   The reveal (/open/): a sealed kraft envelope that you tear open.
   States come from the DOM page.js already builds, read with :has(), so
   no script changes: #actions shown = sealed and waiting; .reveal-name
   present = opened.
   ====================================================================== */

.reveal-area {
  --flap: 6.4rem;
  min-height: 17.5rem;
  max-width: 40rem;
  margin: 0 auto;
  justify-content: flex-start;
  border: 0;
  border-radius: 8px;
  color: var(--on-kraft);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.14), transparent 45%),
    var(--art-fibres),
    var(--kraft);
  box-shadow: 0 0 0 1px var(--kraft-lo), 0 24px 34px -20px rgba(60, 35, 10, 0.7);
  padding: calc(var(--flap) + 2.5rem) 1.1rem 1.2rem;
  perspective: 900px;
}
/* the flap, folded down and sealed */
.reveal-area::before {
  height: var(--flap);
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.06)),
    var(--art-fibres),
    var(--kraft-lo);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.6s ease;
  z-index: 0;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.1));
}
/* the side folds, drawn as faint creases */
.reveal-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(60, 35, 10, 0.18) 50%, transparent calc(50% + 0.5px)) left bottom / 50% 62% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 0.5px), rgba(60, 35, 10, 0.18) 50%, transparent calc(50% + 0.5px)) right bottom / 50% 62% no-repeat;
  pointer-events: none;
  z-index: 0;
}
.reveal-area > * { position: relative; z-index: 1; }

/* the wax seal over the flap's tip: two halves that part when opened */
.wax {
  position: absolute !important;
  left: 50%;
  top: calc(var(--flap) - 2.3rem);
  width: 4.6rem;
  height: 4.6rem;
  margin-left: -2.3rem;
  z-index: 2 !important;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(60, 20, 10, 0.4));
  transition: opacity 0.3s ease 0.2s;
}
.wax i {
  position: absolute;
  inset: 0;
  background: var(--art-seal) center / contain no-repeat;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.wax i:first-child { clip-path: polygon(0 0, 54% 0, 44% 38%, 56% 62%, 46% 100%, 0 100%); }
.wax i:last-child { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%, 56% 62%, 44% 38%); }

.reveal-for { color: var(--on-kraft); font-size: 1rem; }

/* The tear strip: a perforated pull tab across the envelope. */
.btn.tear {
  border-radius: 3px;
  padding: 0.85rem 1rem;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  background:
    radial-gradient(circle, var(--kraft) 2px, transparent 2.5px) 0 0 / 10px 5px repeat-x,
    radial-gradient(circle, var(--kraft) 2px, transparent 2.5px) 0 100% / 10px 5px repeat-x,
    linear-gradient(180deg, var(--wax-hi), var(--wax) 55%, var(--wax-lo));
  border: 0;
  box-shadow: 0 4px 10px -4px rgba(90, 20, 10, 0.6);
}
.btn.tear::after {
  content: "\2192" / "";
  display: inline-block;
  margin-left: 0.55rem;
  animation: tug 1.8s ease-in-out infinite;
}
@keyframes tug { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(5px); } }

/* Opened: the flap lifts away, the seal breaks, and the card slides out. */
.reveal-area:has(.reveal-name)::before { transform: rotateX(-180deg); opacity: 0; }
.reveal-area:has(.reveal-name) .wax { opacity: 0; }
.reveal-area:has(.reveal-name) .wax i:first-child { transform: translate(-1.8rem, -1.4rem) rotate(-28deg); }
.reveal-area:has(.reveal-name) .wax i:last-child { transform: translate(1.8rem, -1.1rem) rotate(24deg); }
.reveal-area:has(.reveal-name) { padding-top: 1.4rem; }

#body-slot:has(.reveal-name) {
  position: relative;
  background: var(--panel);
  color: var(--ink);
  border-radius: 4px;
  padding: 1.1rem 1rem 1.2rem;
  margin: 0.2rem 0.2rem 0;
  box-shadow: 0 14px 24px -14px rgba(40, 20, 5, 0.75), 0 0 0 1px var(--line);
  animation: card-out 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
/* a gift tag's string, tied to the card */
#body-slot:has(.reveal-name)::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 50%;
  width: 3px;
  height: 1.4rem;
  margin-left: -1.5px;
  background: repeating-linear-gradient(25deg, var(--twine) 0 3px, var(--kraft-hi) 3px 5px);
  border-radius: 2px;
}
#body-slot:has(.reveal-name)::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -0.3rem;
  border-radius: 50%;
  background: var(--kraft);
  box-shadow: 0 0 0 2px var(--kraft-lo);
}
@keyframes card-out {
  from { transform: translateY(2.5rem) scale(0.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.reveal-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 640;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0.6rem 0 0.2rem;
}
.event-card {
  display: inline-block;
  font-family: var(--type);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink);
  border: 1.5px dashed var(--line-strong);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
}
.reveal-meta { color: var(--ink-soft); font-style: italic; }

/* Ink colours on the kraft envelope (it is darker than the page). */
.reveal-area .note, .reveal-area .controls { color: var(--ink); }

/* ---------- /code/: the key tags ---------- */

.code-envelope #code-out, .code-envelope #keep-out {
  position: relative;
  background: var(--kraft-hi);
  color: var(--on-kraft);
  border: 0;
  border-radius: 4px 8px 8px 4px;
  padding: 0.75rem 0.9rem 0.75rem 2.3rem;
  font-size: 0.92rem;
  clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 50%);
}
.code-envelope #code-out::before, .code-envelope #keep-out::before {
  content: "";
  position: absolute;
  left: 0.85rem; top: 50%;
  width: 0.7rem; height: 0.7rem; margin-top: -0.35rem;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 2.5px var(--kraft-lo);
}
.code-envelope #keep-out { background: var(--keep-bg); color: var(--keep-ink); }
.code-envelope .tool-panel h2 { font-size: 1.2rem; }

/* ---------- Under the footer: the back of the envelope runs on ----------
   The page canvas is kraft, so a short page (404, contact) ends on the footer's paper, never on a
   bare band of page colour. The body still paints the cream card stock behind everything above. */

html { background: var(--kraft) var(--art-fibres); }

/* ---------- Content pages: a postmark beside the heading ----------
   Every page that has no inline stamp (guides, hub, legal, about, contact, methodology, 404) gets a
   franked postmark, placed from CSS so no page's markup or copy changes. Decorative only. */

main.wrap:not(:has(> .post))::before {
  content: "";
  float: right;
  width: 8.25rem;
  height: 4.5rem;
  margin: -0.35rem -0.4rem 0.3rem 0.75rem;
  background: var(--art-postmark) center / contain no-repeat;
}
@media (max-width: 560px) {
  main.wrap:not(:has(> .post))::before { width: 5.2rem; height: 2.85rem; margin: -0.25rem -0.3rem 0.2rem 0.4rem; }
}

/* ---------- Prose: guides, legal, about, contact, methodology ---------- */

.prose ul li::marker, .prose ol li::marker { color: var(--wax); }
.prose ol li::marker { font-family: var(--type); }
.prose li + li { margin-top: 0.3rem; }
.prose strong { font-weight: 700; }

/* Tables are a typed ledger on card stock. */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 6px 12px -10px rgba(60, 35, 10, 0.5);
}
.prose table { background: transparent; }
.prose thead th {
  font-family: var(--type);
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--line-strong);
}
.prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper) 45%, transparent); }

/* Guide call-to-action panels are the generator's envelope in miniature. */
.prose .tool-panel { border-top: 4px solid var(--kraft); }

/* ---------- The 404: returned to sender ---------- */

.rts .letter {
  position: relative;
  margin: 3.6rem 11px 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--panel);
  border-radius: 4px 4px 8px 8px;
  box-shadow:
    0 0 0 10px var(--kraft),
    0 0 0 11px var(--kraft-lo),
    0 22px 30px -18px rgba(60, 35, 10, 0.6);
}
.rts .letter::before {
  content: "";
  position: absolute;
  left: -11px; right: -11px;
  top: -2.3rem;
  height: 2.3rem;
  background: var(--kraft-lo) var(--art-fibres);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.rts .letter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.95rem;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: -1.3rem;
  background: var(--art-seal) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 20, 10, 0.35));
  transform: rotate(-12deg);
}
.rts .letter > :first-child { margin-top: 0.4rem; }
.rts .letter > :last-child { margin-bottom: 0; }
/* the post office's hand-stamp, in the eyebrow it already has */
.rts .eyebrow { position: relative; z-index: 1; }
.rts .eyebrow::after { content: " · return to sender" / ""; }
@media (max-width: 480px) {
  .rts .letter {
    margin-left: 8px; margin-right: 8px;
    padding: 0.9rem 0.85rem 1rem;
    box-shadow: 0 0 0 8px var(--kraft), 0 0 0 9px var(--kraft-lo), 0 22px 30px -18px rgba(60, 35, 10, 0.6);
  }
  .rts .letter::before { left: -9px; right: -9px; }
  .rts main.wrap::before { display: none; }   /* the letter has its own seal; the stamp needs the width */
}

/* ---------- Print stays plain paper ---------- */

@media print {
  /* Paper is white whatever the screen theme: back to the light palette, or a dark OS theme prints its
     near-white ink on white paper. Printers drop backgrounds, so text that sat on wax or kraft is ink too. */
  :root {
    color-scheme: light;
    --paper: #fff; --panel: #fff; --ink: #2a1c12; --ink-soft: #5b4535; --line: #e0cfb2; --line-strong: #8d7254;
    --accent: #9c1f18; --accent-soft: #f6e0d5; --focus: #1d4f9c; --pass: #1e6833; --pass-soft: #e4efdc;
    --fail: #a61f17; --fail-soft: #fbe5dd; --warn: #855000;
    --readout-bg: #fff6e1; --readout-ink: #2a1c12; --readout-dim: #66503f; --readout-warn: #855000;
    --wax: #a3231b; --wax-hi: #c2392d; --wax-lo: #7a140f; --on-wax: #2a1c12;
    --kraft: #caa36d; --kraft-lo: #b08650; --kraft-hi: #dbbb8c; --on-kraft: #2a1c12;
    --twine: #9b7a4c; --air-red: #b3261e; --air-blue: #1d4f9c; --stamp-field: #2c5a88;
    --stamp-paper: #fffdf7; --stamp-box: #caa36d; --stamp-box-lo: #b08650;
    --roster-bg: #fffdf6; --roster-margin: rgba(176, 38, 30, 0.45); --roster-rule: rgba(29, 79, 156, 0.2);
    --placeholder: #7a6553;
    --keep-bg: #f1d0c6; --keep-ink: #3a120d;
  }
  html, body { background: #fff; color: var(--ink); }
  .site-header::after, .site-footer::before, .post, main.wrap::before,
  .rts .letter::before, .rts .letter::after,
  .prints-sheets .tool-panel::before, .prints-sheets .tool-panel::after,
  .code-envelope .tool-panel::before, .code-envelope .tool-panel::after { display: none; }
  .site-footer { background: none; }
  .rts .letter, .table-wrap, .prints-sheets .tool-panel, .code-envelope .tool-panel { box-shadow: none; }
}

/* ---------- Motion ----------
   kit/base.css already shortens every animation and transition under reduced motion; these also stop
   the decorative movement outright: no looping tug, no delayed slide-in of the revealed card, no
   flap or seal travel, and no hover lift. */

@media (prefers-reduced-motion: reduce) {
  .btn.tear::after, #body-slot:has(.reveal-name) { animation: none; }
  .reveal-area::before, .wax, .wax i, .btn, .step-dot, .step-dot::after { transition: none; }
  .btn:hover, .btn:active, .step-dot:hover, .step-dot.current, .related li a { transform: none; }
}