/* The Stationery Shop: the site's screen design (concept A, built out site-wide).
   Kraft-paper counter, washi tape, pads in wooden cubbies, the live sheet on a
   green cutting mat, and a Print button that behaves like a rubber stamp.
   SCREEN ONLY, every rule, at every depth: print output stays paper.css and
   puzzle.css alone, byte for byte. tests/structure.js gates this file with the
   same walker it uses for shell.css. Art: ./art/*.svg, hand-made, first-party.
   Fonts: Caveat (headings) and Andika (text), both SIL OFL 1.1, fonts/.
   docs/stationery-css.md has the map of which page wears what. */

@media screen {
  /* font-display: optional, so a late font never reflows the page. */
  @font-face { font-family: "Shop Hand"; font-weight: 700; font-style: normal; font-display: optional; src: url("fonts/caveat-700.woff2") format("woff2"); }
  @font-face { font-family: "Shop Sans"; font-weight: 400; font-style: normal; font-display: optional; src: url("fonts/andika-400.woff2") format("woff2"); }
  @font-face { font-family: "Shop Sans"; font-weight: 700; font-style: normal; font-display: optional; src: url("fonts/andika-700.woff2") format("woff2"); }

  :root { color-scheme: light; }
  body, body.shell-page {
    --kraft: #d4b285;
    --paper: var(--kraft);
    --panel: #fffaf0;
    --card: #fffaf0;
    --ink: #1d2b4f;          /* blue-black fountain-pen ink */
    --ink-soft: #533e29;
    --line: #dccaa8;
    --line-strong: #9c8259;
    --accent: #173f8a;
    --accent-soft: #e4ebf7;
    --focus: #0d3fb8;
    --pass: #1c6b37;
    --fail: #b3261e;
    --warn: #8a5200;
    --stamp-ink: #7a1712;
    --hilite: rgba(255, 210, 74, 0.6);
    --mat: #2f6e51;
    --mat-edge: #1f4d39;
    --wood: #9a6538;
    --wood-light: #b47c4a;
    --wood-dark: #6a4120;
    --cubby: #4a2e17;
    --tray-focus: #1a0f05;
    --awning: #1f4d3a;
    --awning-ink: #fbf3e2;
    --stamp: #a8201a;
    --stamp-face: #fbf4e6;
    --tag: #ecd6a6;
    --tag-ink: #3b2814;
    --tag-edge: #a88a57;
    --legal: #fbf1b0;
    --legal-line: rgba(80, 130, 190, 0.3);
    --legal-ink: #3a2e10;
    --receipt: #fffdf6;
    --receipt-ink: #26221c;
    --receipt-dim: #625544;
    --hand: "Shop Hand", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    --sans: "Shop Sans", "Trebuchet MS", Verdana, sans-serif;
    --radius: 4px;
  }
}
@media screen and (prefers-color-scheme: dark) {
  /* After hours: the same shop with the lamps on. Paper objects stay paper. */
  :root { color-scheme: dark; }
  body, body.shell-page {
    --kraft: #2b2119;
    --panel: #3a2e23;
    --card: #362a20;
    --ink: #f4e9d6;
    --ink-soft: #d9c8ab;
    --line: #5a4835;
    --line-strong: #937a59;
    --accent: #f4bf6b;
    --accent-soft: #4a3a26;
    --focus: #ffd54a;
    --pass: #8ad9a3;
    --fail: #ffa395;
    --warn: #f0b35a;
    --stamp-ink: #ffaa9c;
    --hilite: rgba(214, 150, 40, 0.42);
    --mat: #24563f;
    --mat-edge: #153626;
    --wood: #5e3c20;
    --wood-light: #6f4826;
    --wood-dark: #3a2412;
    --cubby: #1d140b;
    --tray-focus: #ffd54a;
    --awning: #173a2c;
    --tag: #4a3a24;
    --tag-ink: #f6e6c4;
    --tag-edge: #937a59;
    --legal: #39331a;
    --legal-line: rgba(170, 200, 240, 0.16);
    --legal-ink: #f4ead0;
    --receipt: #ece4d2;
    --receipt-dim: #594d3d;
  }
}

@media screen {
  /* ---------- The shop floor: kraft paper ---------- */
  body {
    background: var(--kraft) url("art/kraft.svg") repeat;
    font-family: var(--sans);
    color: var(--ink);
  }
  ::selection { background: var(--hilite); color: var(--ink); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }

  /* ---------- Shop front: striped awning, green sign, tab nav ---------- */
  .site-header {
    --focus: #ffd54a;
    position: relative;
    z-index: 3;
    background: var(--awning);
    border-bottom: 0;
    padding-top: 12px;
    color: var(--awning-ink);
  }
  .site-header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12px;
    background: repeating-linear-gradient(90deg, #c8402e 0 22px, #fbf3e2 22px 44px);
  }
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 11px;
    pointer-events: none;
    background: radial-gradient(circle at 11px 0, var(--awning) 10.5px, transparent 11px) 0 0 / 22px 11px repeat-x;
  }
  .site-header .inner { align-items: center; gap: 0.25rem 1.25rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .brand {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--awning-ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--tap);
  }
  .brand .brand-mark {
    width: 28px;
    height: 28px;
    padding: 4px;
    border-radius: 50%;
    background: #fbf3e2;
    box-shadow: 0 0 0 2px #c8402e;
    vertical-align: middle;
  }
  .site-nav { gap: 0.3rem; }
  .site-nav a {
    color: var(--awning-ink);
    background: rgba(255, 255, 255, 0.09);
    border: 0;
    border-radius: 9px 9px 2px 2px;
    padding: 0 0.75rem;
    font-weight: 700;
    font-size: 0.92rem;
  }
  .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.2); border: 0; }
  .site-nav a[aria-current="page"] { background: #fbf3e2; color: #1f4d3a; }

  /* ---------- Type: handwriting for headings, Andika for reading ---------- */
  h1 {
    font-family: var(--hand);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.6vw, 3.3rem);
    line-height: 1.02;
    letter-spacing: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  h2 {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: 0;
    width: fit-content;
    max-width: 100%;
    padding: 0 0.3rem;
    margin-left: -0.3rem;
    background: linear-gradient(transparent 56%, var(--hilite) 56% 90%, transparent 90%);
  }
  h3 { font-size: 1.08rem; }

  /* Eyebrow: a rubber-stamped label */
  .eyebrow {
    display: table;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--stamp-ink);
    border: 2px solid currentColor;
    border-radius: 5px;
    padding: 0.05rem 0.5rem;
    transform: rotate(-1.5deg);
    width: fit-content;
    align-self: flex-start;
    justify-self: start;
    margin: 0 0 0.6rem;
  }

  /* Lede: an index card held on with a strip of washi tape */
  .lede {
    position: relative;
    max-width: min(46rem, calc(100% - 1.5rem));
    background: var(--card);
    color: var(--ink-soft);
    padding: 1rem 1.15rem 0.9rem;
    border-radius: 2px;
    box-shadow: 0 1px 0 var(--line-strong), 0 8px 16px -10px rgba(40, 20, 0, 0.55);
  }
  .lede::before {
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 96px;
    height: 22px;
    margin-left: -48px;
    transform: rotate(-3deg);
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0 5px, transparent 5px 10px), var(--tool-tape, rgba(127, 200, 180, 0.85));
    clip-path: polygon(0 0, 4px 20%, 0 40%, 4px 60%, 0 80%, 4px 100%, calc(100% - 4px) 100%, 100% 80%, calc(100% - 4px) 60%, 100% 40%, calc(100% - 4px) 20%, 100% 0);
  }

  /* Readout: a till receipt with a torn edge */
  .readout {
    background: var(--receipt);
    color: var(--receipt-ink);
    border-radius: 0;
    padding: 0.75rem 1rem 1.2rem;
    box-shadow: 0 8px 14px -10px rgba(0, 0, 0, 0.6);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 14px 7px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 14px 7px repeat-x;
  }
  .readout .r-label { color: var(--receipt-dim); }
  .readout .r-value.pass { color: #1c6b37; }
  .readout .r-value.fail { color: #b3261e; }

  /* ---------- Cubbies: every generator is a pad on a wooden shelf ---------- */
  .tool-grid {
    gap: 12px;
    padding: 12px;
    border-radius: 6px;
    background:
      repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 37px),
      linear-gradient(var(--wood-light), var(--wood));
    box-shadow: inset 0 0 0 3px var(--wood-dark), 0 14px 22px -14px rgba(0, 0, 0, 0.7);
  }
  .tool-card {
    --binding: #1d3f8f;
    --tape: #bfe6d9;
    --motif: url("art/pads.svg#lined");
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 2px;
    background: var(--cubby);
    box-shadow: inset 0 10px 14px -8px rgba(0, 0, 0, 0.75), inset 0 -3px 0 rgba(255, 255, 255, 0.06);
    padding: 64px 22px 22px 20px;
    color: var(--ink);
  }
  /* the pad itself, with its cover label and the sheets under it */
  .tool-card::before {
    content: "";
    position: absolute;
    inset: 10px 12px 12px 10px;
    z-index: -1;
    border-radius: 2px 2px 3px 3px;
    background:
      var(--motif) center 9px / auto 44px no-repeat,
      linear-gradient(var(--binding), var(--binding)) top / 100% 62px no-repeat,
      var(--card);
    box-shadow:
      2px 3px 0 -1px var(--card), 2px 3px 0 0 rgba(0, 0, 0, 0.22),
      4px 6px 0 -1px var(--card), 4px 6px 0 0 rgba(0, 0, 0, 0.22),
      0 10px 14px -8px rgba(0, 0, 0, 0.6);
  }
  .tool-card:nth-child(6n+2) { --binding: #2f6e51; --tape: #f7c1b5; }
  .tool-card:nth-child(6n+3) { --binding: #8c2323; --tape: #f5dc8a; }
  .tool-card:nth-child(6n+4) { --binding: #8a5a12; --tape: #d6cff2; }
  .tool-card:nth-child(6n+5) { --binding: #5b4a9b; --tape: #c6def5; }
  .tool-card:nth-child(6n+6) { --binding: #1f6b73; --tape: #f2c6dc; }
  /* washi-tape label across the cover */
  .tool-card .eyebrow {
    display: table;
    position: relative;
    margin: 0 0 0.55rem -0.4rem;
    padding: 0.05rem 0.9rem 0.1rem;
    border: 0;
    border-radius: 0;
    font-family: var(--hand);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #2a1c10;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.38) 0 5px, transparent 5px 10px), var(--tape);
    clip-path: polygon(0 0, 5px 25%, 0 50%, 5px 75%, 0 100%, 100% 100%, calc(100% - 5px) 75%, 100% 50%, calc(100% - 5px) 25%, 100% 0);
    transform: rotate(-2deg);
  }
  .tool-card:nth-child(even) .eyebrow { transform: rotate(1.5deg); }
  .tool-card a.title {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.05;
    color: var(--ink);
  }
  .tool-card a.title:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; }
  .tool-card p { color: var(--ink-soft); font-size: 0.92rem; }
  .tool-card p a { color: var(--accent); }

  /* each pad's cover shows what the tool prints */
  .tool-card:has(a.title[href*="graph-paper"]) { --motif: url("art/pads.svg#graph"); }
  .tool-card:has(a.title[href*="squared-paper"]) { --motif: url("art/pads.svg#squared"); }
  .tool-card:has(a.title[href*="dot-grid"]) { --motif: url("art/pads.svg#dots"); }
  .tool-card:has(a.title[href*="cornell"]) { --motif: url("art/pads.svg#cornell"); }
  .tool-card:has(a.title[href*="isometric"]) { --motif: url("art/pads.svg#iso"); }
  .tool-card:has(a.title[href*="music-staff"]) { --motif: url("art/pads.svg#staff"); }
  .tool-card:has(a.title[href*="calendar"]) { --motif: url("art/pads.svg#cal"); }
  .tool-card:has(a.title[href*="calendar-with-holidays"]) { --motif: url("art/pads.svg#holiday"); }
  .tool-card:has(a.title[href*="coloring-calendar"]) { --motif: url("art/pads.svg#ccal"); }
  .tool-card:has(a.title[href*="moon-calendar"]) { --motif: url("art/pads.svg#moon"); }
  .tool-card:has(a.title[href*="bingo"]) { --motif: url("art/pads.svg#bingo"); }
  .tool-card:has(a.title[href*="word-search"]) { --motif: url("art/pads.svg#wsearch"); }
  .tool-card:has(a.title[href*="crossword"]) { --motif: url("art/pads.svg#cross"); }
  .tool-card:has(a.title[href*="sudoku"]) { --motif: url("art/pads.svg#sudoku"); }
  .tool-card:has(a.title[href*="flash-card"]) { --motif: url("art/pads.svg#flash"); }
  .tool-card:has(a.title[href*="maze"]) { --motif: url("art/pads.svg#maze"); }
  .tool-card:has(a.title[href*="connect-the-dots"]) { --motif: url("art/pads.svg#cdots"); }
  .tool-card:has(a.title[href*="name-cards"]) { --motif: url("art/pads.svg#names"); }
  .tool-card:has(a.title[href*="handwriting"]) { --motif: url("art/pads.svg#hand"); }
  .tool-card:has(a.title[href*="blank-maps"]) { --motif: url("art/pads.svg#map"); }
  .tool-card:has(a.title[href*="pumpkin-stencil"]) { --motif: url("art/pads.svg#pumpkin"); }
  .tool-card:has(a.title[href*="cat-pumpkin"]) { --motif: url("art/pads.svg#cat"); }
  .tool-card:has(a.title[href*="printer-test"]) { --motif: url("art/pads.svg#printer"); }
  .tool-card:has(a.title[href*="nozzle"]) { --motif: url("art/pads.svg#nozzle"); }
  .tool-card:has(a.title[href*="alignment"]) { --motif: url("art/pads.svg#align"); }
  .tool-card:has(a.title[href*="methodology"]) { --motif: url("art/pads.svg#method"); }

  /* ---------- Notebook pages, index cards, tags ---------- */
  .prose {
    position: relative;
    background:
      linear-gradient(90deg, transparent 2.6rem, rgba(224, 122, 122, 0.65) 2.6rem calc(2.6rem + 1px), transparent 0),
      radial-gradient(circle at 1.15rem 50%, var(--kraft) 0 0.42rem, rgba(0, 0, 0, 0.18) 0.45rem, transparent 0.55rem) 0 0 / 2.4rem 6rem no-repeat round,
      var(--card);
    padding: 0.6rem 1.25rem 1rem 3.4rem;
    border-radius: 2px;
    box-shadow: 0 1px 0 var(--line-strong), 0 10px 18px -12px rgba(40, 20, 0, 0.6);
    margin-top: 2.4rem;
    margin-bottom: 1.5rem;
  }
  .prose h2:first-child { margin-top: 0.9rem; }
  /* a whole-page sheet always leaves some kraft floor at each side */
  main.wrap.prose { max-width: min(var(--maxw), calc(100% - 1.5rem)); padding-top: 1.5rem; margin-top: 1.8rem; }
  main.wrap.prose > .eyebrow { margin-top: 0.3rem; }

  .faq details {
    background:
      linear-gradient(transparent 2.75rem, rgba(208, 76, 76, 0.75) 2.75rem calc(2.75rem + 2px), transparent 0),
      #fffefa;
    color: #2a1c10;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 0 #c9b48f, 0 6px 12px -8px rgba(40, 20, 0, 0.55);
    --accent: #173f8a;
    --focus: #0d3fb8;
  }
  .faq details:nth-child(odd) { transform: rotate(-0.3deg); }
  .faq summary { min-height: 2.75rem; display: flex; align-items: center; color: #2a1c10; }
  .faq summary::before { color: #a8201a; font-family: var(--hand); font-size: 1.4rem; }
  .faq details > div {
    color: #4a3a28;
    line-height: 1.6rem;
    padding-top: 0.5rem;
    background: repeating-linear-gradient(transparent 0 calc(1.6rem - 1px), rgba(80, 130, 190, 0.32) calc(1.6rem - 1px) 1.6rem) 0 0.5rem / 100% calc(100% - 0.5rem) no-repeat;
  }

  /* related links: luggage tags */
  .related li a {
    background: radial-gradient(circle at 0.7rem 50%, var(--kraft) 0 3px, var(--tag-edge) 3.5px 4.5px, transparent 5px), var(--tag);
    color: var(--tag-ink);
    border: 1px solid var(--tag-edge);
    border-radius: 4px 12px 12px 4px;
    padding: 0.3rem 0.95rem 0.3rem 1.45rem;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    font-weight: 700;
    font-size: 0.92rem;
  }
  .related li a:hover { color: var(--tag-ink); border-color: var(--stamp); }

  /* status notes: sticky notes */
  .note {
    --accent: #173f8a;
    --focus: #0d3fb8;
    background: #fff3a6;
    color: #3a2e10;
    border: 0;
    border-radius: 1px;
    box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.45);
  }
  .note.error { background: #ffd6d0; color: #3a1410; }
  .note.warn { background: #ffe1b0; }

  /* ---------- Buttons: the rubber stamp and the manila tags ---------- */
  .btn {
    font-family: var(--sans);
    font-weight: 700;
    min-height: var(--tap);
  }
  .btn:not(.secondary), .shell-page .btn:not(.secondary) {
    background: var(--stamp-face);
    color: var(--stamp);
    border: 2px solid var(--stamp);
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    box-shadow:
      inset 0 0 0 2px var(--stamp-face), inset 0 0 0 3.5px var(--stamp),
      0 4px 0 var(--wood-dark), 0 7px 10px -3px rgba(0, 0, 0, 0.45);
    transform: rotate(-1.5deg);
  }
  .btn:not(.secondary):hover, .shell-page .btn:not(.secondary):hover { filter: none; background: #fff; transform: rotate(-1.5deg) translateY(-1px); }
  .btn:not(.secondary):active {
    transform: rotate(-1.5deg) translateY(3px);
    box-shadow:
      inset 0 0 0 2px var(--stamp-face), inset 0 0 0 3.5px var(--stamp),
      0 1px 0 var(--wood-dark), 0 2px 3px rgba(0, 0, 0, 0.35);
  }
  .btn.secondary {
    --hole: var(--kraft);
    background: radial-gradient(circle at 0.7rem 50%, var(--hole) 0 3px, var(--tag-edge) 3.5px 4.5px, transparent 5px), var(--tag);
    color: var(--tag-ink);
    border: 1px solid var(--tag-edge);
    border-radius: 4px 12px 12px 4px;
    padding-left: 1.45rem;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22);
  }
  .btn.secondary:hover { border-color: var(--stamp); filter: none; }
  .btn.secondary:active { transform: translateY(1px); box-shadow: none; }

  input, select, textarea { accent-color: var(--stamp); }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .btn, .tool-card::before { transition: transform 0.12s ease, box-shadow 0.12s ease; }
  .tool-card:hover::before, .tool-card:focus-within::before { transform: translateY(-3px) rotate(-0.6deg); }
}
@media screen and (prefers-color-scheme: dark) {
  .btn:not(.secondary):hover { background: #fffaf0; }
}

/* ---------- The workbench: tool panel, cutting mat, ruler, tray ---------- */
@media screen {
  .tool-panel:not(.shell) {
    background: var(--card);
    border: 0;
    border-radius: 3px;
    box-shadow: 0 1px 0 var(--line-strong), 0 10px 18px -12px rgba(40, 20, 0, 0.6);
  }
  /* The green self-healing mat. Its own background keeps the shell's eight
     magenta crop ticks (shell.css), which on a cutting mat read as cut marks;
     the grid, 45-degree guide, pencil marks and steel ruler sit on a layer
     behind the sheet (::before, z-index -1 inside an isolated box). */
  .sheet-wrap:not(.preview-inspector-open),
  .tool-panel.shell .sheet-wrap:not(.preview-inspector-open) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 1rem 1rem 3rem;
    border: 0;
    border-radius: 12px;
    background-color: var(--mat);
    box-shadow: inset 0 0 0 2px var(--mat-edge), 0 4px 0 var(--mat-edge), 0 14px 22px -12px rgba(0, 0, 0, 0.7);
  }
  .sheet-wrap:not(.preview-inspector-open)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* layer 1 is the tool's own desk object (--sticker, see "Every tool its
       own bench" below); none on pages that set no object */
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
    background-image:
      var(--sticker, none),
      url("art/ruler.svg"),
      url("art/pencil-marks.svg"),
      linear-gradient(45deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.16) 50%, transparent calc(50% + 1px)),
      linear-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 58px 58px, auto 26px, 300px 200px, 100% 100%, 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: right 6px bottom 2px, left 10px bottom 10px, left 6px bottom 34px, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  /* calendars (every page whose canonical is a calendar): wire binding
     across the top of the sheet */
  :root:has(link[rel="canonical"]:is([href*=".app/calendar"], [href*="-calendar/"])) .sheet-wrap:not(.preview-inspector-open)::after {
    content: "";
    position: absolute;
    top: calc(1rem - 8px);
    left: 50%;
    width: min(calc(100% - 3rem), 25rem);
    height: 18px;
    transform: translateX(-50%);
    pointer-events: none;
    background:
      radial-gradient(circle at 50% 14px, #2f3437 0 2.4px, transparent 2.9px) 0 0 / 16px 18px repeat-x,
      linear-gradient(90deg, transparent 6px, #eef1f3 6px 7.5px, #8d959b 7.5px 10px, transparent 10px) 0 0 / 16px 13px repeat-x;
  }
  #sheet, .sheet-wrap svg.sheet { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15), 0 10px 18px -6px rgba(0, 0, 0, 0.55); }

  /* sticky tray: a wooden pencil ledge */
  .shell-tray {
    --focus: var(--tray-focus);
    background:
      repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 8px),
      linear-gradient(var(--wood-light), var(--wood));
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 var(--wood-dark), 0 -4px 14px -6px rgba(0, 0, 0, 0.5);
    /* keeps shell.css's bottom safe-area inset: the tray is sticky at
       bottom: 0, so on a phone with a home indicator it must clear it */
    padding: 0.65rem 0.6rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    gap: 0.45rem;
  }
  .shell-tray .btn.secondary { --hole: var(--wood-dark); padding-left: 1.3rem; padding-right: 0.35rem; font-size: 0.95rem; background-position: -0.1rem 0, 0 0; }
  .shell-tray .btn:not(.secondary) { flex-grow: 1.15; padding-left: 0.25rem; padding-right: 0.25rem; letter-spacing: 0.08em; font-size: 0.95rem; }
  .shell-tray .btn.secondary[aria-expanded="true"] { background-color: #f6e8c6; color: #3b2814; border-color: var(--stamp); }
}
/* narrow phones: shell.css splits the tray into equal shares and ellipsizes
   an overfull label, which cut the stamp to "PRI…" and Adjust to "Adj…" at
   360 px. Each button sizes from its own label here, with a smaller tag hole
   margin and stamp spacing, so all four names fit down to 320 px. */
@media screen and (max-width: 419px) {
  .shell-tray { gap: 0.3rem; padding-left: 0.45rem; padding-right: 0.45rem; }
  .shell-tray .btn { flex: 1 1 auto; font-size: 0.9rem; }
  .shell-tray .btn.secondary { padding-left: 1.05rem; padding-right: 0.2rem; }
  .shell-tray .btn:not(.secondary) { letter-spacing: 0.03em; }
}
@media screen {

  /* Adjust drawer: a yellow legal pad with a gummed binding */
  .shell-drawer {
    --ink-soft: var(--legal-ink);
    background:
      linear-gradient(90deg, transparent 0.55rem, rgba(224, 122, 122, 0.55) 0.55rem calc(0.55rem + 1px), transparent 0),
      repeating-linear-gradient(transparent 0 calc(1.75rem - 1px), var(--legal-line) calc(1.75rem - 1px) 1.75rem),
      var(--legal);
    color: var(--legal-ink);
  }
  .shell-drawer-head {
    --focus: #ffd54a;
    margin: -1rem -1rem 0.85rem;
    padding: 0.25rem 1rem;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 5px), var(--drawer-head, #8c2323);
    color: #fbf3e2;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .shell-drawer-head h2 { background: none; margin: 0; padding: 0; font-size: 1.6rem; color: #fbf3e2; }
  .shell-drawer-close { color: #fbf3e2; text-decoration: underline; text-underline-offset: 0.2em; }
  .shell-drawer .gen-controls label, .shell-drawer .gen-controls .gen-field { color: var(--legal-ink); font-weight: 700; }

  /* Details: the summary reads like a receipt spike */
  .sheet-details > summary { color: var(--ink); font-family: var(--hand); font-size: 1.45rem; }
  .sheet-details .readout { transform: rotate(-0.4deg); }

  /* Halloween pages' preview figure: a taped-down photo */
  .tool-preview img { border: 6px solid #fff; border-bottom-width: 18px; border-radius: 1px; box-shadow: 0 8px 14px -8px rgba(0, 0, 0, 0.6); transform: rotate(-2deg); }
}
@media screen and (min-width: 860px) {
  .tool-panel.shell .shell-tray { padding: 0.8rem; }
  .tool-panel.shell .shell-drawer { border: 0; border-radius: 4px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.7); }
  /* a pencil resting beside the sheet, on the layer behind it */
  .tool-panel.shell .sheet-wrap:not(.preview-inspector-open)::before {
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat;
    background-image:
      var(--sticker, none),
      url("art/pencil-v.svg"),
      url("art/ruler.svg"),
      url("art/pencil-marks.svg"),
      linear-gradient(45deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.16) 50%, transparent calc(50% + 1px)),
      linear-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px),
      linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 104px 104px, 80px 240px, auto 26px, 300px 200px, 100% 100%, 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: left max(4px, calc((100% - 26rem) / 4 - 52px)) top 11.5rem, right max(0px, calc((100% - 26rem) / 4 - 40px)) top 7rem, left 10px bottom 10px, left 6px bottom 34px, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  /* a pencilled note in the mat's margin, worded per tool (--note, below).
     Not on calendars: their ::after is the wire binding. */
  :root:not(:has(link[rel="canonical"]:is([href*=".app/calendar"], [href*="-calendar/"]))) .tool-panel.shell .sheet-wrap:not(.preview-inspector-open)::after {
    content: var(--note) / "";
    white-space: pre;
    text-align: center;
    position: absolute;
    top: 5.5rem;
    left: max(0.5rem, calc((100% - 26rem) / 4 - 2.3rem));
    pointer-events: none;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(240, 246, 241, 0.78);
    transform: rotate(-9deg);
  }
}


/* ---------- Every tool its own bench ----------
   Each tool page, found by its own canonical link (no markup hook needed),
   gets a family mat colour and Adjust-pad binding, its own washi tape, its
   own object lying on the mat (art/desk.svg) and, on wide screens, its own
   pencilled margin note. Calendars keep the wire binding instead of a note.
   Month and year calendar pages share the calendar family and its pushpin. */
@media screen {
  :root:has(link[rel="canonical"]:is([href$=".app/graph-paper/"], [href$=".app/squared-paper/"], [href$=".app/dot-grid/"], [href$=".app/lined-paper/"], [href$=".app/cornell-notes-template/"], [href$=".app/isometric-paper/"], [href$=".app/music-staff-paper/"], [href$=".app/blank-maps/"])) body { --mat: #2f6e51; --mat-edge: #1f4d39; --drawer-head: #1f4d3a; }
  :root:has(link[rel="canonical"]:is([href*=".app/calendar"], [href*="-calendar/"])) body { --mat: #6b2f3c; --mat-edge: #4a1f29; --drawer-head: #8c2323; }
  :root:has(link[rel="canonical"]:is([href$=".app/bingo-card-generator/"], [href$=".app/word-search-maker/"], [href$=".app/crossword-puzzle-maker/"], [href$=".app/printable-sudoku/"], [href$=".app/flash-card-maker/"], [href$=".app/maze-maker/"], [href$=".app/connect-the-dots/"], [href$=".app/name-cards/"], [href$=".app/handwriting-worksheets/"])) body { --mat: #25557f; --mat-edge: #183a5a; --drawer-head: #1d3f8f; }
  :root:has(link[rel="canonical"]:is([href$=".app/pumpkin-stencil-maker/"], [href$=".app/pumpkin-stencils/"], [href$=".app/cat-pumpkin-stencil/"])) body { --mat: #3a2d4a; --mat-edge: #271d33; --drawer-head: #8a3d00; }
  :root:has(link[rel="canonical"]:is([href$=".app/printer-test-page/"], [href$=".app/nozzle-check-pattern/"], [href$=".app/printer-alignment-test-page/"])) body { --mat: #363c42; --mat-edge: #24282c; --drawer-head: #2b2f33; }
  :root:has(link[rel="canonical"][href$=".app/graph-paper/"]) body { --sticker: url("art/desk.svg#setsquare"); --tool-tape: rgba(242, 162, 58, 0.85); --note: "measure\A twice"; }
  :root:has(link[rel="canonical"][href$=".app/squared-paper/"]) body { --sticker: url("art/desk.svg#eraser"); --tool-tape: rgba(247, 166, 180, 0.88); --note: "square\A deal"; }
  :root:has(link[rel="canonical"][href$=".app/dot-grid/"]) body { --sticker: url("art/desk.svg#fineliner"); --tool-tape: rgba(190, 190, 200, 0.9); --note: "bullet\A journal"; }
  :root:has(link[rel="canonical"][href$=".app/lined-paper/"]) body { --sticker: url("art/desk.svg#paperclip"); --tool-tape: rgba(159, 182, 220, 0.9); --note: "dear\A diary,"; }
  :root:has(link[rel="canonical"][href$=".app/cornell-notes-template/"]) body { --sticker: url("art/desk.svg#highlighter"); --tool-tape: rgba(255, 225, 74, 0.85); --note: "cue\A notes\A summary"; }
  :root:has(link[rel="canonical"][href$=".app/isometric-paper/"]) body { --sticker: url("art/desk.svg#cube"); --tool-tape: rgba(143, 169, 212, 0.9); --note: "draw it\A in 3D"; }
  :root:has(link[rel="canonical"][href$=".app/music-staff-paper/"]) body { --sticker: url("art/desk.svg#notes"); --tool-tape: rgba(214, 207, 242, 0.92); --note: "allegro!"; }
  :root:has(link[rel="canonical"][href$=".app/blank-maps/"]) body { --sticker: url("art/desk.svg#compass"); --tool-tape: rgba(198, 222, 245, 0.92); --note: "here be\A dragons"; }
  :root:has(link[rel="canonical"][href*=".app/calendar"]) body { --sticker: url("art/desk.svg#pushpin"); --tool-tape: rgba(247, 193, 181, 0.9); }
  :root:has(link[rel="canonical"][href$=".app/calendar-with-holidays/"]) body { --sticker: url("art/desk.svg#dayoff"); --tool-tape: rgba(230, 90, 76, 0.75); }
  :root:has(link[rel="canonical"][href$=".app/coloring-calendar/"]) body { --sticker: url("art/desk.svg#crayons"); --tool-tape: rgba(242, 178, 48, 0.85); }
  :root:has(link[rel="canonical"][href$=".app/moon-calendar/"]) body { --sticker: url("art/desk.svg#moon"); --tool-tape: rgba(246, 231, 166, 0.92); }
  :root:has(link[rel="canonical"][href$=".app/bingo-card-generator/"]) body { --sticker: url("art/desk.svg#chips"); --tool-tape: rgba(245, 220, 138, 0.9); --note: "B-I-N-\A G-O!"; }
  :root:has(link[rel="canonical"][href$=".app/word-search-maker/"]) body { --sticker: url("art/desk.svg#found"); --tool-tape: rgba(255, 210, 74, 0.8); --note: "found\A it!"; }
  :root:has(link[rel="canonical"][href$=".app/crossword-puzzle-maker/"]) body { --sticker: url("art/desk.svg#grid"); --tool-tape: rgba(214, 207, 242, 0.92); --note: "7 down?"; }
  :root:has(link[rel="canonical"][href$=".app/printable-sudoku/"]) body { --sticker: url("art/desk.svg#tiles"); --tool-tape: rgba(243, 223, 178, 0.95); --note: "pencil\A first"; }
  :root:has(link[rel="canonical"][href$=".app/flash-card-maker/"]) body { --sticker: url("art/desk.svg#ring"); --tool-tape: rgba(242, 198, 220, 0.92); --note: "quiz\A me"; }
  :root:has(link[rel="canonical"][href$=".app/maze-maker/"]) body { --sticker: url("art/desk.svg#arrow"); --tool-tape: rgba(191, 230, 217, 0.92); --note: "start\A here"; }
  :root:has(link[rel="canonical"][href$=".app/connect-the-dots/"]) body { --sticker: url("art/desk.svg#stardots"); --tool-tape: rgba(198, 222, 245, 0.92); --note: "1, 2, 3 ..."; }
  :root:has(link[rel="canonical"][href$=".app/name-cards/"]) body { --sticker: url("art/desk.svg#badge"); --tool-tape: rgba(230, 90, 76, 0.7); --note: "hello!"; }
  :root:has(link[rel="canonical"][href$=".app/handwriting-worksheets/"]) body { --sticker: url("art/desk.svg#sharpener"); --tool-tape: rgba(217, 160, 102, 0.85); --note: "Aa Bb\A Cc"; }
  :root:has(link[rel="canonical"][href$=".app/pumpkin-stencil-maker/"]) body { --sticker: url("art/desk.svg#pumpkin"); --tool-tape: rgba(240, 138, 44, 0.85); --note: "BOO!"; }
  :root:has(link[rel="canonical"][href$=".app/pumpkin-stencils/"]) body { --sticker: url("art/desk.svg#candle"); --tool-tape: rgba(246, 178, 58, 0.85); --note: "trick or\A treat"; }
  :root:has(link[rel="canonical"][href$=".app/cat-pumpkin-stencil/"]) body { --sticker: url("art/desk.svg#cat"); --tool-tape: rgba(170, 150, 200, 0.9); --note: "meow"; }
  :root:has(link[rel="canonical"][href$=".app/printer-test-page/"]) body { --sticker: url("art/desk.svg#swatch"); --tool-tape: rgba(120, 200, 235, 0.85); --note: "C M Y K"; }
  :root:has(link[rel="canonical"][href$=".app/nozzle-check-pattern/"]) body { --sticker: url("art/desk.svg#drops"); --tool-tape: rgba(224, 120, 180, 0.8); --note: "no gaps?"; }
  :root:has(link[rel="canonical"][href$=".app/printer-alignment-test-page/"]) body { --sticker: url("art/desk.svg#registration"); --tool-tape: rgba(200, 200, 200, 0.9); --note: "line it\A up"; }
}
@media screen and (prefers-color-scheme: dark) {
  :root:has(link[rel="canonical"]:is([href$=".app/graph-paper/"], [href$=".app/squared-paper/"], [href$=".app/dot-grid/"], [href$=".app/lined-paper/"], [href$=".app/cornell-notes-template/"], [href$=".app/isometric-paper/"], [href$=".app/music-staff-paper/"], [href$=".app/blank-maps/"])) body { --mat: #24563f; --mat-edge: #153626; }
  :root:has(link[rel="canonical"]:is([href*=".app/calendar"], [href*="-calendar/"])) body { --mat: #4f222c; --mat-edge: #33151c; }
  :root:has(link[rel="canonical"]:is([href$=".app/bingo-card-generator/"], [href$=".app/word-search-maker/"], [href$=".app/crossword-puzzle-maker/"], [href$=".app/printable-sudoku/"], [href$=".app/flash-card-maker/"], [href$=".app/maze-maker/"], [href$=".app/connect-the-dots/"], [href$=".app/name-cards/"], [href$=".app/handwriting-worksheets/"])) body { --mat: #1c4062; --mat-edge: #112a42; }
  :root:has(link[rel="canonical"]:is([href$=".app/pumpkin-stencil-maker/"], [href$=".app/pumpkin-stencils/"], [href$=".app/cat-pumpkin-stencil/"])) body { --mat: #2c2238; --mat-edge: #1b1424; }
  :root:has(link[rel="canonical"]:is([href$=".app/printer-test-page/"], [href$=".app/nozzle-check-pattern/"], [href$=".app/printer-alignment-test-page/"])) body { --mat: #2a2f34; --mat-edge: #181b1e; }
}


/* ---------- Every other page type ----------
   Calendar month and year pages: the same workbench as the tool pages.
   Only non-focusable blocks move (the lede goes below the panel, the sheet
   to its top), so keyboard order always matches what is on screen. Phones:
   sheet, readout, form, then a wooden Print ledge that is sticky at the
   bottom of the screen while the panel is in view, so Print is on the first
   screen (there it overlaps the sheet or the read-only readout). From 640px
   the controls stand in a column beside the mat, Print after the form. */
@media screen {
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) { display: flex; flex-direction: column; }
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) > * { order: 3; }
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) > .eyebrow,
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) > h1 { order: 0; }
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) > .tool-panel { order: 1; margin-top: 0.4rem; }
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) > .lede { order: 2; margin-top: 2rem; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .controls {
    --focus: var(--tray-focus);
    margin: 1rem 0 0;
    padding: 0.65rem 0.6rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-radius: 8px;
    background:
      repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 8px),
      linear-gradient(var(--wood-light), var(--wood));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 var(--wood-dark), 0 -4px 14px -6px rgba(0, 0, 0, 0.5);
  }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .controls .btn { width: 100%; }
}
@media screen and (max-width: 639px) {
  main.wrap:has(> .tool-panel:not(.shell) > .sheet-wrap) > h1 { font-size: 1.9rem; margin-bottom: 0.5rem; }
  .tool-panel:not(.shell):has(> .sheet-wrap) { display: flex; flex-direction: column; padding: 0.5rem; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > * { order: 2; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .sheet-wrap { order: 0; margin-top: 0; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .readout { order: 1; margin-top: 1rem; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .controls { position: sticky; bottom: 0; z-index: 2; }
  /* a field focused from the keyboard scrolls clear of the sticky ledge */
  html:has(.tool-panel:not(.shell) > .sheet-wrap) { scroll-padding-bottom: 6rem; }
}
@media screen and (min-width: 640px) {
  .tool-panel:not(.shell):has(> .sheet-wrap) {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
  }
  .tool-panel:not(.shell):has(> .sheet-wrap) > * { grid-column: 1; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .sheet-wrap { grid-column: 2; grid-row: 1 / span 8; margin-top: 0; }
  .tool-panel:not(.shell):has(> .sheet-wrap) .gen-controls { grid-template-columns: 1fr; }
  .tool-panel:not(.shell):has(> .sheet-wrap) > .readout { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; }
}
@media screen and (min-width: 1100px) {
  .tool-panel:not(.shell):has(> .sheet-wrap) .gen-controls { grid-template-columns: 1fr 1fr; }
}

/* A desk object beside each page type's heading (art/desk.svg) */
@media screen {
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"])) main.wrap > h1,
  :root:has(link[rel="canonical"]:is([href$=".app/about/"], [href$=".app/contact/"])) main.wrap > h1,
  :root:has(link[rel="canonical"][href$=".app/methodology/"]) main.wrap > h1,
  :root:has(link[rel="canonical"][href*=".app/guides/"]:not([href$=".app/guides/"])) main.wrap > h1,
  :root:has(link[rel="icon"]):not(:has(link[rel="canonical"])) main.wrap > h1 {
    width: fit-content;
    max-width: 100%;
    padding-right: 4rem;
    background: var(--page-object) right 0 top 0 / 3.4rem 3.4rem no-repeat;
  }
  :root:has(link[rel="canonical"][href$=".app/methodology/"]) body { --page-object: url("art/desk.svg#loupe"); }
  :root:has(link[rel="canonical"][href*=".app/guides/"]) body { --page-object: url("art/desk.svg#bookmark"); }
  :root:has(link[rel="canonical"]:is([href$=".app/about/"], [href$=".app/contact/"])) body { --page-object: url("art/desk.svg#postage"); }
  :root:not(:has(link[rel="canonical"])) body { --page-object: url("art/desk.svg#lostfound"); }

  /* Legal pages: a typed sheet held on a hardboard clipboard */
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"])) main.wrap.prose {
    margin-top: 2.6rem;
    border: 12px solid #8a5a2b;
    border-top-width: 26px;
    border-radius: 10px;
    background: var(--card);
    padding-left: 1.4rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 12px 20px -12px rgba(30, 15, 0, 0.75);
  }
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"])) main.wrap.prose::before {
    content: "";
    position: absolute;
    top: -52px;
    left: 50%;
    width: 96px;
    height: 72px;
    margin-left: -48px;
    background: url("art/desk.svg#clip") center / contain no-repeat;
    pointer-events: none;
  }

  /* About and contact: a letter on cream stock with an airmail edge */
  :root:has(link[rel="canonical"]:is([href$=".app/about/"], [href$=".app/contact/"])) main.wrap.prose {
    padding-left: 1.4rem;
    background: var(--card);
    border: 8px solid transparent;
    border-image: repeating-linear-gradient(-45deg, #c8402e 0 10px, var(--card) 10px 20px, #1d3f8f 20px 30px, var(--card) 30px 40px) 8;
  }

  /* 404: a page torn out of the notebook, waiting at lost and found */
  :root:not(:has(link[rel="canonical"])) main.wrap.prose {
    padding-bottom: 2rem;
    max-width: min(46rem, calc(100% - 1.5rem));
    transform: rotate(-0.6deg);
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) bottom / 18px 9px repeat-x;
  }
  :root:not(:has(link[rel="canonical"])) main.wrap.prose a { font-weight: 700; }
  :root:not(:has(link[rel="canonical"])) main.wrap > h1 { padding-right: 5rem; background-size: 4.4rem 4.4rem; }

  /* Methodology: its notebook pages are an engineer's pad, ruled in 5 mm */
  :root:has(link[rel="canonical"][href$=".app/methodology/"]) .prose {
    background:
      linear-gradient(90deg, transparent 2.6rem, rgba(224, 122, 122, 0.65) 2.6rem calc(2.6rem + 1px), transparent 0),
      linear-gradient(rgba(80, 130, 190, 0.13) 1px, transparent 1px) 0 0 / 5mm 5mm,
      linear-gradient(90deg, rgba(80, 130, 190, 0.13) 1px, transparent 1px) 0 0 / 5mm 5mm,
      var(--card);
  }

  /* Guides: the lede is a bookmarked page corner */
  :root:has(link[rel="canonical"][href*=".app/guides/"]:not([href$=".app/guides/"])) main.wrap > .lede {
    background: linear-gradient(225deg, var(--kraft) 0 14px, #e9dcc0 14px 22px, var(--card) 22px);
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"])) main.wrap.prose { border-color: #4f3519; }
}
@media screen and (max-width: 640px) {
  /* whole-page notebook sheets keep the 16px side gutter on phones */
  main.wrap.prose { padding-left: 2.9rem; padding-right: 1rem; }
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"], [href$=".app/about/"], [href$=".app/contact/"])) main.wrap.prose { padding-left: 1rem; }
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"])) main.wrap.prose { border-width: 18px 8px 8px; }
  main.wrap > h1 { padding-right: 0; }
  :root:has(link[rel="canonical"]) main.wrap > h1 { background-size: 2.6rem 2.6rem; }
  :root:has(link[rel="canonical"]:is([href$=".app/privacy/"], [href$=".app/terms/"], [href$=".app/about/"], [href$=".app/contact/"], [href$=".app/methodology/"], [href*=".app/guides/"])) main.wrap > h1,
  :root:not(:has(link[rel="canonical"])) main.wrap > h1 { padding-right: 3rem; background-size: 2.6rem 2.6rem; }
}

/* ---------- Counter, front of shop: home page ---------- */
@media screen {
  main.wrap:has(> .home-priority) > h1 { font-size: clamp(2.5rem, 7vw, 4rem); margin-bottom: 1rem; }
  main.wrap:has(> .home-priority)::after {
    content: "";
    display: block;
    aspect-ratio: 560 / 380;
    width: min(100%, 34rem);
    background: url("art/counter.svg") center / contain no-repeat;
  }
  main.wrap:has(> .home-priority) > .readout { transform: rotate(-0.8deg); max-width: 34rem; }
  /* Counter picks: three loose pads lying on the counter, no cubbies */
  .home-priority { position: relative; }
  .home-priority > p { color: var(--ink-soft); }
  .home-priority .tool-grid { background: none; box-shadow: none; padding: 0.5rem 0 0; gap: 1.1rem; }
  .home-priority .tool-card { background: none; box-shadow: none; }
  .home-priority .tool-card::before { inset: 0 6px 6px 0; }
  .home-priority .tool-card:nth-child(1)::before { transform: rotate(-1.2deg); }
  .home-priority .tool-card:nth-child(2)::before { transform: rotate(0.9deg); }
  .home-priority .tool-card:nth-child(3)::before { transform: rotate(-0.5deg); }
  .home-priority .tool-card { padding: 58px 18px 16px 14px; }
  .home-priority h2::after {
    content: "counter picks" / "";
    display: inline-block;
    margin-left: 0.7rem;
    padding: 0 0.6rem 0.1rem;
    font-size: 1.05rem;
    vertical-align: 0.35rem;
    color: #2a1c10;
    background: #ecd6a6;
    border: 1px solid #a88a57;
    border-radius: 3px 10px 10px 3px;
    transform: rotate(4deg);
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .home-priority .tool-card:hover::before, .home-priority .tool-card:focus-within::before { transform: translateY(-3px) rotate(0deg); }
}
/* Phone and tablet: the counter picks come straight after the heading. */
@media screen and (max-width: 859px) {
  main.wrap:has(> .home-priority) { display: flex; flex-direction: column; }
  main.wrap:has(> .home-priority) > * { order: 3; }
  main.wrap:has(> .home-priority) > .eyebrow,
  main.wrap:has(> .home-priority) > h1 { order: 0; }
  main.wrap:has(> .home-priority) > .home-priority { order: 1; }
  main.wrap:has(> .home-priority) > .lede,
  main.wrap:has(> .home-priority) > .readout { order: 2; }
  main.wrap:has(> .home-priority)::after { order: 2; margin: 0.5rem auto 1.5rem; }
  .home-priority > h2 { margin-top: 0.5rem; }
  main.wrap:has(> .home-priority) > .lede { margin-top: 1.5rem; }
}
@media screen and (min-width: 860px) {
  main.wrap:has(> .home-priority) {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: 2rem;
    align-items: start;
  }
  main.wrap:has(> .home-priority) > * { grid-column: 1 / -1; }
  main.wrap:has(> .home-priority) > .eyebrow,
  main.wrap:has(> .home-priority) > h1,
  main.wrap:has(> .home-priority) > .lede,
  main.wrap:has(> .home-priority) > .readout { grid-column: 1; }
  main.wrap:has(> .home-priority)::after { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; }
}

/* ---------- Phone ---------- */
@media screen and (max-width: 640px) {
  .site-header .inner { padding-left: 0.75rem; padding-right: 0; }
  .site-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-right: 2.5rem;
    scrollbar-width: none;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    mask: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .site-nav a { white-space: nowrap; flex: 0 0 auto; }
  .brand { font-size: 1.8rem; }
  .shell-page main.wrap > h1 { font-size: 1.75rem; line-height: 1; margin-bottom: 0.4rem; }
  .shell-page main.wrap > .eyebrow { margin-bottom: 0.35rem; }
  .tool-card a.title { font-size: 1.55rem; }
  .prose { padding-left: 3rem; padding-right: 1rem; }
}

/* ---------- Footer: the counter's wooden edge ---------- */
@media screen {
  .site-footer {
    --focus: #ffd54a;
    position: relative;
    margin-top: 3rem;
    border-top: 0;
    background:
      repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 9px),
      linear-gradient(#7a4c27, #5a361a);
    box-shadow: inset 0 6px 0 #a06b3c, inset 0 8px 0 rgba(0, 0, 0, 0.25);
  }
  .site-footer .inner { color: #f3e4c8; padding-top: 1.5rem; }
  .site-footer a { color: #fff3dc; }
  .site-footer a:hover { color: #fff; }
  .site-footer .promise { font-family: var(--hand); font-weight: 700; font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: #fbe7b5; }
}