/* Every jb-* component. Colours only through tokens. Motion only under html.jb-js and outside reduced motion. */

/* Controls that site.js reveals stay hidden until it does, even when they are styled as flex boxes. */
.jb-tabs__toggle[hidden], .jb-doodle-toggle[hidden], .jb-video__play[hidden] { display: none; }

/* Header: logo, index tabs on the page edge, tools */
.jb-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 2px solid var(--rule); }
.jb-header__inner { display: flex; align-items: center; gap: 1rem; padding: 0.5rem var(--gutter); max-width: calc(var(--wrap) + 4rem); margin-inline: auto; }
.jb-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--font-hand);
  font-variation-settings: var(--infm-display); font-weight: 700; font-size: var(--step-1); white-space: nowrap; }
.jb-logo img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; transform: rotate(-2deg); }
.jb-tabs { margin-left: auto; align-self: flex-end; margin-bottom: -0.5rem; }
.jb-tabs__list { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.jb-tabs__list a { display: block; padding: 0.35rem 0.8rem; min-height: 44px; line-height: 2rem; text-decoration: none; white-space: nowrap;
  font-family: var(--font-hand); font-variation-settings: var(--infm-label); background: var(--paper-edge);
  border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; transform: rotate(-1deg); transform-origin: bottom center;
  box-shadow: inset 0 5px 0 var(--tab); }
.jb-tabs__list li:nth-child(even) a { transform: rotate(1deg); }
/* index dividers: every tab has its own highlighter, a stripe at rest and the whole tab on hover or for this page */
.jb-tabs__list li:nth-child(4n+1) a { --tab: var(--highlight); }
.jb-tabs__list li:nth-child(4n+2) a { --tab: var(--hl-pink); }
.jb-tabs__list li:nth-child(4n+3) a { --tab: var(--hl-green); }
.jb-tabs__list li:nth-child(4n) a { --tab: var(--hl-orange); }
.jb-tabs__list a:hover, .jb-tabs__list a[aria-current="page"] { background: var(--tab); color: var(--ink-deep); }
.jb-tabs__toggle, .jb-doodle-toggle, .jb-lang { min-height: 44px; padding: 0.3rem 0.9rem; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--font-hand); text-decoration: none;
  display: inline-flex; align-items: center; white-space: nowrap; }
.jb-doodle-toggle[aria-pressed="true"] { background: var(--highlight); color: var(--ink-deep); }
.jb-header__tools { display: flex; gap: 0.5rem; }
@media (min-width: 64em) { .jb-tabs__toggle { display: none; } }
/* Logo, eight tabs, doodle and language in one row (review round 1 added Fotografie): smaller tab type until 86em, the
   name beside the logo for screen readers only below 72em (as on a phone), and from 86em a header a little wider than
   the page, so the tabs keep their full size. */
@media (min-width: 64em) and (max-width: 85.99em) {
  .jb-header__inner { gap: 0.75rem; }
  .jb-tabs__list a { font-size: var(--step--1); padding-inline: 0.55rem; }
}
@media (min-width: 64em) and (max-width: 71.99em) {
  .jb-logo__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 86em) { .jb-header__inner { max-width: calc(var(--wrap) + 15rem); } }
@media (max-width: 63.99em) {
  /* The eight tabs need about 1000 px. Narrower, without JS they get their own row along the page edge and
     scroll sideways (the header then scrolls away); with JS it is one row (logo, menu, tools) and a sheet. */
  .jb-header { position: relative; }
  .jb-header__inner { flex-wrap: wrap; row-gap: 0.25rem; }
  html:not(.jb-js) .jb-header__inner { padding-bottom: 0; }
  .jb-header__tools { margin-left: auto; }
  .jb-tabs { order: 3; flex: 1 0 100%; min-width: 0; margin: 0 calc(-1 * var(--gutter)); }
  .jb-tabs .jb-tabs__list { flex-wrap: nowrap; overflow-x: auto; padding: 0.35rem var(--gutter) 0; scrollbar-width: none; }
  .jb-tabs__list a { padding-inline: 0.65rem; }
  .jb-js .jb-header { position: sticky; }
  .jb-js .jb-tabs { order: 0; flex: 0 0 auto; margin: 0 0 0 auto; align-self: center; }
  .jb-js .jb-header__tools { margin-left: 0; }
  .jb-js .jb-tabs__list { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; overflow: visible;
    background: var(--paper); padding: 1rem var(--gutter); border-bottom: 2px solid var(--ink); box-shadow: var(--shadow); }
  .jb-js .jb-tabs.is-open .jb-tabs__list { display: flex; }
  .jb-js .jb-tabs__list a { border-bottom: 2px solid var(--ink); border-radius: 10px; }
}
@media (max-width: 39.99em) {
  /* Room for menu, doodle and language buttons: the name stays for screen readers only. */
  .jb-js .jb-logo__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 29.99em) {
  .jb-logo { font-size: var(--step-0); gap: 0.5rem; }
  .jb-logo img { width: 40px; height: 40px; }
  .jb-js .jb-header__inner, .jb-js .jb-header__tools { gap: 0.4rem; }
  .jb-js .jb-tabs__toggle, .jb-js .jb-doodle-toggle, .jb-js .jb-lang { padding-inline: 0.55rem; font-size: var(--step--1); }
}

/* Buttons and small type */
.jb-button { display: inline-flex; align-items: center; min-height: 48px; padding: 0.4rem 1.2rem; border: 2.5px solid var(--ink);
  border-radius: 14px 18px 12px 20px; background: var(--highlight); color: var(--ink-deep); font-family: var(--font-hand);
  font-variation-settings: var(--infm-label); font-weight: 700; line-height: 1.3; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.jb-button:hover { color: var(--ink-deep); transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); text-decoration: none; }
.jb-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.jb-button--ghost { background: var(--paper); color: var(--ink); }
.jb-eyebrow { font-family: var(--font-hand); font-variation-settings: var(--infm-label); color: var(--graphite); letter-spacing: 0.04em; }
.jb-link-arrow { font-family: var(--font-hand); font-weight: 700; }
.jb-link-arrow::after { content: " \2192"; }

/* Sections. Light and strong grounds alternate (the balance of plastilose.nl, in this sketchbook's own
   materials): ruled paper, the ballpoint-blue page, graph paper, the pink highlighter, kraft board, the orange
   highlighter, ruled paper. No two neighbours share a ground or a layout, and most sections carry a real image.
   One section is one Elementor widget in WordPress, so a rule selects a section by its block (data-jb-blok,
   data-jb-ground or its class) and never by its place in <main>, a neighbour or its position, and a section
   never reaches into another (tests/site/test_css_structure.py). */
[data-jb-blok] { padding-block: calc(var(--section-y) * 0.85); position: relative; }
.jb-hero { padding-top: calc(var(--section-y) * 0.5); }
:where([data-jb-blok]) h2 + * { margin-top: 0.75rem; }
p.jb-wrap { max-width: none; } /* a wrap is a column, not a measure; base.css caps every p at 62ch */

/* Torn paper: the coloured sheets glued onto the page have torn edges. Decoration only (clip-path); the
   padding keeps every word and focus ring well inside the tears. Each section draws its own edges: a tear cut
   inside its box shows the page through it, and a section that overlaps the one above draws the overlap itself,
   as a ::before strip of --tear above its box in its own ground (a textured ground starts its texture a tear
   higher, so it runs on from the strip). */
:root {
  --tear: 0.9rem;
  --torn-top-1: 0 0.22rem, 1.5% 0.19rem, 3.7% 0.6rem, 5.5% 0.37rem, 7.8% 0.57rem, 10.2% 0.79rem, 11.3% 0.38rem, 12.3% 0.28rem, 15.1% 0.52rem, 16.7% 0.41rem, 18.2% 0.49rem, 21.4% 0.45rem, 23.4% 0.52rem, 26.2% 0.59rem, 28.2% 0.85rem, 30.6% 0.72rem, 31.9% 0.41rem, 34.3% 0.72rem, 37.2% 0.73rem, 39.4% 0.59rem, 42% 0.62rem, 44.5% 0.55rem, 45.6% 0.52rem, 48.3% 0.52rem, 50.6% 0.82rem, 52.3% 0.55rem, 53.4% 0.25rem, 56.3% 0.3rem, 58.3% 0.06rem, 60.9% 0.04rem, 63.8% 0.19rem, 66.4% 0.17rem, 69.4% 0.37rem, 71.3% 0.36rem, 74.1% 0.36rem, 76.1% 0.37rem, 79.2% 0.61rem, 82.1% 0.62rem, 83.3% 0.37rem, 84.6% 0.85rem, 86.1% 0.85rem, 89.2% 0.75rem, 91.2% 0.38rem, 93.6% 0.46rem, 95.3% 0.38rem, 97.4% 0.55rem, 99.2% 0.58rem, 100% 0.71rem;
  --torn-top-2: 0 0.85rem, 2% 0.57rem, 4.2% 0.66rem, 7.2% 0.45rem, 9.2% 0.65rem, 11.3% 0.65rem, 13.6% 0.68rem, 15% 0.64rem, 17.1% 0.64rem, 19.5% 0.85rem, 22.2% 0.69rem, 23.4% 0.47rem, 25.1% 0.55rem, 26.3% 0.75rem, 29.1% 0.73rem, 31.6% 0.71rem, 32.7% 0.85rem, 35.9% 0.6rem, 39% 0.56rem, 41.4% 0.66rem, 43.8% 0.85rem, 45.1% 0.85rem, 46.1% 0.68rem, 48.3% 0.41rem, 49.4% 0.61rem, 50.8% 0.64rem, 52.3% 0.41rem, 53.4% 0.55rem, 55.4% 0.19rem, 57.4% 0.14rem, 60.3% 0.53rem, 62.4% 0.31rem, 64.8% 0.33rem, 66.9% 0.04rem, 69.4% 0.38rem, 71.4% 0.24rem, 73% 0.75rem, 76.2% 0.7rem, 79.4% 0.56rem, 82.2% 0.81rem, 84.8% 0.85rem, 86.5% 0.85rem, 88% 0.35rem, 89.6% 0.26rem, 90.8% 0.73rem, 93.5% 0.53rem, 95.4% 0.43rem, 98.3% 0.44rem, 100% 0.35rem;
  --torn-bottom-1: 100% calc(100% - 0.52rem), 99.1% calc(100% - 0.49rem), 98% calc(100% - 0.63rem), 96.7% calc(100% - 0.85rem), 95.3% calc(100% - 0.55rem), 93.5% calc(100% - 0.35rem), 91.8% calc(100% - 0.37rem), 88.8% calc(100% - 0.22rem), 85.7% calc(100% - 0.4rem), 83.2% calc(100% - 0.04rem), 80.1% calc(100% - 0.42rem), 78.6% calc(100% - 0.35rem), 76.1% calc(100% - 0.46rem), 73.9% calc(100% - 0.62rem), 70.8% calc(100% - 0.38rem), 69.2% calc(100% - 0.32rem), 66.3% calc(100% - 0.83rem), 63.1% calc(100% - 0.56rem), 61.6% calc(100% - 0.77rem), 60.1% calc(100% - 0.65rem), 57.2% calc(100% - 0.81rem), 56.2% calc(100% - 0.85rem), 54.9% calc(100% - 0.75rem), 52.5% calc(100% - 0.63rem), 51.2% calc(100% - 0.53rem), 48.4% calc(100% - 0.36rem), 47% calc(100% - 0.42rem), 44.3% calc(100% - 0.56rem), 41.3% calc(100% - 0.43rem), 39.7% calc(100% - 0.49rem), 38.2% calc(100% - 0.41rem), 37.2% calc(100% - 0.41rem), 34.9% calc(100% - 0.41rem), 32.7% calc(100% - 0.11rem), 31.2% calc(100% - 0.09rem), 29.2% calc(100% - 0.53rem), 28% calc(100% - 0.6rem), 25% calc(100% - 0.68rem), 22.6% calc(100% - 0.71rem), 19.5% calc(100% - 0.69rem), 17.5% calc(100% - 0.85rem), 16.4% calc(100% - 0.77rem), 13.4% calc(100% - 0.54rem), 10.8% calc(100% - 0.58rem), 7.7% calc(100% - 0.64rem), 5% calc(100% - 0.29rem), 2.4% calc(100% - 0.4rem), 0 calc(100% - 0.4rem);
  --torn-bottom-2: 100% calc(100% - 0.33rem), 99.9% calc(100% - 0.58rem), 98.1% calc(100% - 0.71rem), 95% calc(100% - 0.43rem), 93.2% calc(100% - 0.6rem), 90.5% calc(100% - 0.4rem), 89.4% calc(100% - 0.08rem), 87.6% calc(100% - 0.38rem), 86.6% calc(100% - 0.28rem), 83.6% calc(100% - 0.22rem), 80.8% calc(100% - 0.28rem), 78% calc(100% - 0.17rem), 76.7% calc(100% - 0.09rem), 73.5% calc(100% - 0.18rem), 71.5% calc(100% - 0.33rem), 68.4% calc(100% - 0.31rem), 67.2% calc(100% - 0.27rem), 65.5% calc(100% - 0.39rem), 63.1% calc(100% - 0.31rem), 60.2% calc(100% - 0.1rem), 58% calc(100% - 0.43rem), 56.5% calc(100% - 0.36rem), 53.4% calc(100% - 0.4rem), 51.2% calc(100% - 0.34rem), 48.6% calc(100% - 0.59rem), 47.3% calc(100% - 0.53rem), 44.4% calc(100% - 0.44rem), 41.6% calc(100% - 0.45rem), 40.5% calc(100% - 0.58rem), 37.3% calc(100% - 0.32rem), 35.4% calc(100% - 0.42rem), 32.3% calc(100% - 0.85rem), 29.4% calc(100% - 0.85rem), 27.7% calc(100% - 0.72rem), 25.6% calc(100% - 0.53rem), 24% calc(100% - 0.67rem), 21.4% calc(100% - 0.85rem), 19.6% calc(100% - 0.75rem), 18.5% calc(100% - 0.42rem), 17.3% calc(100% - 0.76rem), 14.8% calc(100% - 0.71rem), 12.3% calc(100% - 0.64rem), 9.6% calc(100% - 0.43rem), 8% calc(100% - 0.29rem), 4.9% calc(100% - 0.23rem), 2.1% calc(100% - 0.37rem), 0 calc(100% - 0.49rem);
}
/* the blue page lies on the paper: both its tears are cut inside its own box */
.jb-now { clip-path: polygon(var(--torn-top-1), var(--torn-bottom-1)); padding-block: calc(var(--section-y) * 0.85 + var(--tear)); }
/* every section below it overlaps the one above; the graph paper runs on under the blue page's torn bottom */
.jb-doors::before, .jb-highlights::before, .jb-art-strip::before, .jb-films-teaser::before { content: ""; position: absolute;
  left: 0; right: 0; bottom: 100%; height: var(--tear); background: inherit; background-position: 0 0; pointer-events: none;
  clip-path: polygon(var(--edge-top), 100% 100%, 0 100%); }
.jb-doors::before { background-position: -1px -1px; clip-path: polygon(var(--torn-bottom-1), 0 100%, 100% 100%); }
/* the bands: their clip leaves room for the strip, and the bottom padding keeps words clear of the next
   section's overlap or of their own torn bottom */
.jb-highlights, .jb-art-strip, .jb-films-teaser { --edge-bottom: 100% 100%, 0 100%;
  clip-path: polygon(0 calc(-1 * var(--tear)), 100% calc(-1 * var(--tear)), var(--edge-bottom));
  padding-bottom: calc(var(--section-y) * 0.85 + var(--tear)); }
.jb-highlights { --edge-top: var(--torn-top-2); }
.jb-art-strip { --edge-top: var(--torn-top-1); }
.jb-films-teaser { --edge-top: var(--torn-top-2); --edge-bottom: var(--torn-bottom-2); }

/* Red pen: corrections, arrows and circles. Strokes only (it is AA text on white paper and no more). */
svg.jb-redpen path { stroke: var(--red-pen); }

/* Prints taped to the page: a white border, two strips of tape, a small tilt */
.jb-print { position: relative; margin: 0; padding: 0.55rem; background: var(--paper); box-shadow: var(--shadow); }
.jb-print::before, .jb-print::after { content: ""; position: absolute; z-index: 2; width: 5.5rem; height: 1.6rem; background: var(--tape);
  clip-path: polygon(3% 8%, 97% 0, 100% 52%, 96% 100%, 2% 93%, 0 45%); }
.jb-print::before { top: -0.45rem; left: -1.5rem; transform: rotate(-38deg); }
.jb-print::after { bottom: -0.45rem; right: -0.6rem; transform: rotate(-38deg); } /* inside the 1rem gutter at 375 px */
.jb-print img { width: 100%; height: auto; background: var(--paper-edge); }

/* 1. Hero (ruled paper): the headline left, a taped polaroid of the real Joram right */
.jb-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eyebrow" "title" "photo" "lead" "actions"; }
.jb-hero .jb-eyebrow { grid-area: eyebrow; }
.jb-hero__title { grid-area: title; max-width: 14ch; }
.jb-hero__lead { grid-area: lead; font-size: var(--step-1); line-height: 1.6; margin-top: var(--line); }
.jb-hero__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--line); }
.jb-hero__photo { grid-area: photo; position: relative; width: 100%; max-width: 30rem; margin-top: 3.75rem; }
.jb-polaroid { padding-bottom: 0; transform: rotate(1.5deg); z-index: 1; }
.jb-polaroid img { aspect-ratio: 3 / 2; object-fit: cover; }
.jb-polaroid figcaption { padding: 0.7rem 0.25rem 0.9rem; font-family: var(--font-hand); font-variation-settings: var(--infm-display);
  font-weight: 600; font-size: var(--step-1); line-height: 1.25; text-align: center; color: var(--ink); }
.jb-polaroid::after { top: -0.45rem; bottom: auto; transform: rotate(38deg); }
.jb-hero__arrow { position: absolute; z-index: 2; left: 0.5rem; top: -3.75rem; width: 4rem; height: auto; overflow: visible;
  transform: rotate(18deg); }
.jb-hero__arrow path { stroke-width: 3.5; }
@media (min-width: 56em) {
  .jb-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem); column-gap: clamp(2.5rem, 6vw, 5.5rem);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". photo" "eyebrow photo" "title photo" "lead photo" "actions photo" ". photo"; }
  .jb-hero__photo { margin-top: 1rem; }
  .jb-hero__arrow { left: -5.25rem; top: 1.5rem; width: 5.25rem; transform: none; }
}

/* Scribbles (max-width: none, or base.css squeezes them back to the width of the word) */
.jb-scribble-wrap { position: relative; display: inline-block; }
.jb-scribble { position: absolute; pointer-events: none; overflow: visible; max-width: none; }
.jb-scribble path { stroke-width: 4; }
.jb-scribble--under { left: -2%; width: 104%; bottom: -0.3em; height: 0.45em; }
.jb-scribble--circle { left: -8%; top: -18%; width: 114%; height: 140%; transform: rotate(-2deg); }
.jb-scribble--arrow { position: static; width: 7rem; height: auto; }
.jb-scribble--arrow path { stroke-width: 3; }

/* 2. Now (the ballpoint-blue page): a taped photo left, sticky notes in three highlighter colours right */
.jb-now { color: var(--paper); background-color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px),
    color-mix(in srgb, var(--paper) 9%, transparent) calc(var(--line) - 1px), color-mix(in srgb, var(--paper) 9%, transparent) var(--line)); }
.jb-now h2 { color: var(--paper); }
.jb-now :focus-visible { outline-color: var(--highlight); }
/* on the blue page the highlighter is a full label behind ink, so no letter ever sits on blue */
.jb-now .jb-mark { color: var(--ink-deep); background-size: 100% 100%; background-position: 0 0; padding-inline: 0.2em; }
.jb-now .jb-note { font-family: var(--font-hand); font-variation-settings: var(--infm-label); color: var(--paper); }
.jb-now__inner { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "notes"; }
.jb-now__head { grid-area: head; }
.jb-now__photo { grid-area: photo; max-width: 28rem; margin-top: calc(var(--line) * 1.5); transform: rotate(-1.5deg); }
.jb-now__photo img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 46% 50%; } /* photo-joram-workspace: his face sits just left of the middle, so the 4:5 crop on a wide screen keeps it centred */
.jb-notes { grid-area: notes; display: grid; gap: 2.5rem 1.75rem; align-items: start; margin-top: calc(var(--line) * 1.75); list-style: none; padding: 0; }
@media (min-width: 40em) {
  .jb-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-sticky:first-child { grid-column: 1 / -1; }
}
@media (min-width: 56em) {
  .jb-now__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-rows: auto 1fr; grid-template-areas: "photo head" "photo notes"; }
  .jb-now__photo { align-self: start; margin-top: 0.5rem; max-width: none; }
  .jb-now__photo img { aspect-ratio: 4 / 5; }
  .jb-notes { margin-top: calc(var(--line) * 1.25); }
  .jb-sticky:nth-child(3) { margin-top: 1.25rem; }
}
.jb-sticky { --note: var(--highlight); position: relative; padding: 1.9rem 1.35rem 1.5rem; color: var(--ink-deep);
  background-color: var(--note);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--ink-deep) 7%, transparent), transparent 1.6rem);
  box-shadow: 0 18px 16px -12px color-mix(in srgb, var(--ink-deep) 70%, transparent);
  transform: rotate(calc(-0.6 * var(--tilt))); }
.jb-sticky:nth-child(2) { --note: var(--hl-pink); transform: rotate(var(--tilt)); }
.jb-sticky:nth-child(3) { --note: var(--hl-green); transform: rotate(calc(-1 * var(--tilt))); }
.jb-sticky h3 { margin-bottom: 0.35rem; color: var(--ink-deep); }
.jb-sticky::before { content: ""; position: absolute; top: -0.8rem; left: 50%; width: 5.5rem; height: 1.6rem;
  background: var(--tape); transform: translateX(-50%) rotate(-3deg); clip-path: polygon(3% 8%, 97% 0, 100% 52%, 96% 100%, 2% 93%, 0 45%); }
/* the pink note hangs on a pushpin */
.jb-sticky:nth-child(2)::before { top: -0.45rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; clip-path: none; transform: translateX(-50%);
  background: radial-gradient(circle at 35% 32%, var(--paper) 0 0.12rem, var(--red-pen) 0.2rem 100%);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--ink-deep) 40%, transparent); }
.jb-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.jb-badge { font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-size: var(--step--1); line-height: 1.35;
  border: 2px solid var(--ink); border-radius: 1rem 0.8rem 1.1rem 0.7rem; padding: 0.2rem 0.65rem; background: var(--paper); color: var(--ink); }

/* 3. Doors (graph paper): index cards, each with a coloured divider tab at its own position (a staggered set),
   the red line under the header and blue lines below, like a real index card */
.jb-doors { background-color: var(--paper);
  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 1.25rem 1.25rem; background-position: -1px calc(-1px - var(--tear)); }
.jb-doors__list { display: grid; gap: 2.9rem 1.75rem; margin-top: calc(var(--line) + 1.25rem); list-style: none; padding: 0; }
@media (min-width: 48em) { .jb-doors__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .jb-doors__list { grid-template-columns: repeat(3, 1fr); } }
.jb-doors__list li { display: flex; }
.jb-door { --tab: var(--highlight); position: relative; flex: 1; display: grid; grid-template-columns: 3.25rem 1fr; grid-template-rows: auto 2px 1fr;
  column-gap: 0.85rem; align-items: center; padding: 0.85rem 1.25rem 0.5rem; text-decoration: none; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: 4px 7px 5px 6px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 20%, transparent); }
.jb-door[data-door="kunst"], .jb-door[data-door="over"] { --tab: var(--hl-pink); }
.jb-door[data-door="films"] { --tab: var(--hl-orange); }
.jb-door[data-door="lab"] { --tab: var(--hl-green); }
.jb-door::before { content: ""; grid-column: 1 / -1; grid-row: 2; height: 2px; margin-inline: -1.25rem; background: var(--red-pen); }
.jb-door::after { content: ""; position: absolute; top: calc(-1.45rem - 2px); left: 1.25rem; width: 5.5rem; height: 1.45rem;
  background: var(--tab); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 12px 0 0; }
.jb-doors__list li:nth-child(3n+2) .jb-door::after { left: 50%; transform: translateX(-50%); }
.jb-doors__list li:nth-child(3n) .jb-door::after { left: auto; right: 1.25rem; }
.jb-doors__list li:nth-child(3n+1) .jb-door { transform: rotate(-0.8deg); }
.jb-doors__list li:nth-child(3n+2) .jb-door { transform: rotate(0.6deg); }
@media (min-width: 64em) {
  .jb-doors__list li:nth-child(3n+2) { margin-top: 1.5rem; margin-bottom: -1.5rem; }
}
@media (max-width: 47.99em) {
  /* one column: the cards step left and right like a loose stack */
  .jb-doors__list li:nth-child(odd) { margin-right: 1rem; }
  .jb-doors__list li:nth-child(even) { margin-left: 1rem; }
}
.jb-door:hover, .jb-door:focus-visible { background-color: var(--tab); color: var(--ink-deep); transform: rotate(0) translateY(-3px);
  box-shadow: 5px 6px 0 var(--ink); }
.jb-door__doodle { width: 3.25rem; height: 3.25rem; margin-bottom: 0.4rem; }
.jb-door__doodle path { stroke-width: 3; }
.jb-door__label { font-family: var(--font-hand); font-variation-settings: var(--infm-display); font-weight: 700; font-size: var(--step-2);
  line-height: 1.1; margin-bottom: 0.4rem; }
.jb-door__text { grid-column: 1 / -1; grid-row: 3; align-self: stretch; font-size: var(--step--1); line-height: var(--line);
  margin-inline: -1.25rem; padding: 0.15rem 1.25rem 0; background-image: repeating-linear-gradient(to bottom, transparent 0,
  transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line)); background-position: 0 0.15rem; }
.jb-door:hover .jb-door__text, .jb-door:focus-visible .jb-door__text { background-image: none; }

/* 4. Highlights (the pink highlighter band): a centred statement, blue rubber stamps pressed around it */
.jb-highlights { background-color: var(--hl-pink); color: var(--ink-deep); text-align: center; }
.jb-highlights__inner { padding-inline: var(--gutter); }
.jb-highlights h2 { color: var(--ink-deep); max-width: 22ch; margin-inline: auto; }
.jb-highlights [data-draw] path { stroke: var(--ink-deep); }
.jb-stamps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem 1.4rem; max-width: 56rem; margin-inline: auto;
  list-style: none; padding: 0; }
.jb-highlights h2 + .jb-stamps { margin-top: calc(var(--line) * 1.5); }
.jb-stamp { font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-weight: 700; line-height: 1.35; padding: 0.6rem 1.05rem;
  color: var(--ink-deep); border: 3px solid var(--ink-deep); border-radius: 10px 8px 11px 7px; background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--hl-pink), inset 0 0 0 4px var(--ink-deep); transform: rotate(-2deg); }
.jb-stamp:nth-child(3n+2) { transform: rotate(1.5deg); }
.jb-stamp:nth-child(3n) { transform: rotate(-0.75deg); }
.jb-stamp:first-child { font-size: var(--step-1); padding: 0.75rem 1.3rem; }

/* 5. Art strip (kraft board): taped white drawing cards, scrolling sideways full width */
.jb-art-strip { --strip-start: calc(max(var(--gutter), (100% - var(--wrap)) / 2) + var(--margin-x)); background-color: var(--paper-edge);
  background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--graphite) 14%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--graphite) 10%, transparent) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, color-mix(in srgb, var(--ink) 9%, transparent) 0 1.2px, transparent 1.7px);
  background-size: 23px 29px, 37px 31px, 53px 47px; background-position: 0 calc(-1 * var(--tear)); }
.jb-strip { display: flex; align-items: flex-start; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none;
  scroll-padding-inline: var(--strip-start) var(--gutter);
  margin: var(--line) 0 0; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
/* (two classes: base.css resets ul[role="list"] padding with a stronger selector than one class) */
.jb-art-strip .jb-strip { padding: 1.75rem var(--gutter) 2rem var(--strip-start); }
.jb-strip:focus-visible { outline-offset: -3px; }
.jb-taped { position: relative; flex: 0 0 auto; scroll-snap-align: start; background: var(--paper);
  padding: 0.6rem 0.6rem 1.5rem; box-shadow: var(--shadow); transform: rotate(-1.2deg); }
.jb-taped:nth-child(even) { transform: rotate(1.4deg); margin-top: 0.75rem; }
.jb-taped::before { content: ""; position: absolute; z-index: 1; top: -0.9rem; left: 50%; width: 5rem; height: 1.75rem; background: var(--tape);
  transform: translateX(-50%) rotate(2deg); clip-path: polygon(3% 8%, 97% 0, 100% 52%, 96% 100%, 2% 93%, 0 45%); }
.jb-taped:nth-child(3n+2)::before { transform: translateX(-60%) rotate(-3deg); }
/* Whole drawings, never cropped; a light paper card behind, so white or transparent art does not look like a hole. */
.jb-taped img { height: clamp(13rem, 52vw, 18rem); width: auto; max-width: min(78vw, 26rem); object-fit: contain; background: var(--paper); }
.jb-art-strip .jb-strip + .jb-wrap { margin-top: 0.5rem; }

/* 6. Films teaser (the orange highlighter band): the words left, a film strip right (one large still, two small) */
.jb-films-teaser { background-color: var(--hl-orange); color: var(--ink-deep); }
.jb-films-teaser h2, .jb-films-teaser a, .jb-films-teaser a:hover, .jb-films-teaser figcaption { color: var(--ink-deep); }
.jb-film-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.1rem; align-items: start;
  margin-top: calc(var(--line) * 1.25); list-style: none; padding: 0; }
.jb-film-card:first-child { grid-column: 1 / -1; transform: rotate(-0.8deg); }
.jb-film-card:nth-child(2) { transform: rotate(1deg); }
.jb-film-card:nth-child(3) { transform: rotate(-0.5deg); }
.jb-films-teaser .jb-film-cards + p { margin-top: 1.5rem; }
@media (min-width: 56em) {
  .jb-films__inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.6fr); column-gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-rows: auto auto 1fr; align-items: start; }
  .jb-films__inner > h2, .jb-films__inner > p { grid-column: 1; }
  .jb-films__inner > p:last-child { grid-row: 3; }
  .jb-films-teaser .jb-film-cards { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .jb-films-teaser .jb-film-cards + p { margin-top: 1.25rem; }
}
.jb-video { position: relative; margin: 0; }
.jb-video img, .jb-video iframe { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; display: block; padding: 1.1rem 0.45rem;
  background-color: var(--ink-deep); border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, var(--paper) 0 0.55rem, transparent 0.55rem 1.25rem),
                    repeating-linear-gradient(90deg, var(--paper) 0 0.55rem, transparent 0.55rem 1.25rem);
  background-size: 100% 0.4rem; background-repeat: no-repeat; background-position: 0.35rem 0.35rem, 0.35rem calc(100% - 0.35rem); }
.jb-film-card:first-child .jb-video img { padding: 1.5rem 0.6rem; background-size: 100% 0.55rem;
  background-image: repeating-linear-gradient(90deg, var(--paper) 0 0.75rem, transparent 0.75rem 1.6rem),
                    repeating-linear-gradient(90deg, var(--paper) 0 0.75rem, transparent 0.75rem 1.6rem);
  background-position: 0.45rem 0.45rem, 0.45rem calc(100% - 0.45rem); }
.jb-video figcaption { padding: 0.5rem 0.15rem 0; font-family: var(--font-hand); font-variation-settings: var(--infm-label); line-height: 1.35; }
.jb-film-card:first-child figcaption { font-size: var(--step-1); }
/* margin-top in % follows the width, so this is the middle of the 16:9 still whatever the caption does */
.jb-video__play { position: absolute; left: 50%; top: 0; margin-top: 28.125%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%);
  border: 3px solid var(--ink); border-radius: 50%; background: var(--highlight); }
.jb-video__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.8rem 0 0.8rem 1.3rem; border-color: transparent transparent transparent var(--ink-deep); }

/* 7. Contact (ruled paper): an airmail postcard. The message left; right the stamp (a portrait of Joram),
   the postmark and the "address", which is the button, with a red-pen arrow towards it. */
.jb-contact-cta__inner { display: grid; grid-template-columns: minmax(0, 54rem); }
.jb-postcard { position: relative; display: grid; gap: 1.25rem; padding: 1.4rem 1.25rem 1.5rem;
  border: 0.6rem solid transparent; box-shadow: var(--shadow); transform: rotate(-1deg);
  background: linear-gradient(var(--paper), var(--paper)) padding-box,
    repeating-linear-gradient(-45deg, var(--red-pen) 0 1rem, var(--paper) 1rem 1.5rem, var(--ink) 1.5rem 2.5rem, var(--paper) 2.5rem 3rem) border-box; }
.jb-postcard__msg { grid-row: 2; }
.jb-postcard__msg > p { margin-top: 0.75rem; }
.jb-postcard__to { grid-row: 1; position: relative; display: grid; grid-template-columns: auto 1fr; align-items: start; }
.jb-postcard__stamp { --perf: 0.3rem; display: block; width: 7rem; padding: var(--perf); background: var(--hl-pink); transform: rotate(2deg);
  /* perforation: round bites along every edge, the inside kept whole by the content-box layer */
  -webkit-mask: radial-gradient(circle var(--perf), transparent 96%, var(--ink)) calc(-1.25 * var(--perf)) calc(-1.25 * var(--perf)) / calc(2.5 * var(--perf)) calc(2.5 * var(--perf)) round,
    linear-gradient(var(--ink) 0 0) content-box;
  mask: radial-gradient(circle var(--perf), transparent 96%, var(--ink)) calc(-1.25 * var(--perf)) calc(-1.25 * var(--perf)) / calc(2.5 * var(--perf)) calc(2.5 * var(--perf)) round,
    linear-gradient(var(--ink) 0 0) content-box; }
.jb-postcard__stamp img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border: 0.3rem solid var(--hl-pink); }
.jb-postcard__postmark { position: absolute; top: 0.75rem; left: 4.5rem; width: 6.5rem; height: auto; opacity: 0.6; pointer-events: none; }
.jb-postcard__postmark path { fill: none; stroke: var(--ink-deep); stroke-width: 2; stroke-linecap: round; }
.jb-postcard__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; max-width: none;
  margin-top: 1.25rem; padding-bottom: 0.9rem;
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 35%, transparent), color-mix(in srgb, var(--ink) 35%, transparent));
  background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; }
.jb-postcard__arrow { width: 3.5rem; height: auto; overflow: visible; transform: rotate(30deg); }
.jb-postcard__arrow path { stroke-width: 3.5; }
@media (max-width: 47.99em) {
  /* phones: the stamp sits top right, the message beside nothing, the button on the address line below */
  .jb-postcard__to { display: contents; }
  .jb-postcard__stamp { grid-row: 1; justify-self: end; }
  .jb-postcard__postmark { top: 2.25rem; left: auto; right: 5.6rem; }
  .jb-postcard__msg { grid-row: 2; }
  .jb-postcard__send { grid-row: 3; margin-top: 0; }
}
@media (min-width: 48em) {
  .jb-postcard { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 2rem; padding: 1.75rem 1.75rem 1.75rem 2rem; }
  .jb-postcard__msg { grid-row: 1; grid-column: 1; align-self: center; }
  .jb-postcard__to { grid-row: 1; grid-column: 2; padding-left: 2rem; border-left: 2px solid color-mix(in srgb, var(--ink) 35%, transparent);
    grid-template-columns: 1fr auto; }
  .jb-postcard__stamp { grid-column: 2; width: 9rem; }
  .jb-postcard__postmark { left: auto; right: 7.4rem; top: 1.75rem; }
  .jb-postcard__send { margin-top: 1.75rem; flex-wrap: nowrap; margin-left: -4.5rem; }
  .jb-postcard__arrow { width: 4rem; transform: none; flex: 0 0 auto; }
}

/* The mascot: one cartoon Joram for the whole site, rising out of the bottom-right corner of the screen.
   Every pose is cut at 78 % of its height (sources.json), so the cut always sits on the screen edge.
   Clicks pass through him; only the hide control, a round button over his shoulder inside his own corner,
   takes pointer events. Above the doodle canvas, below the doodle bar, so the bar's stop button is never
   covered; a lightbox opens in the top layer, above everything. site.js sends him away (is-away) while a
   control named in --buddy-clear sits in his corner or where his bubble goes (on a phone or tablet: the
   homepage's hero buttons), and while the mobile menu is open (html.jb-menu-open). */
:root { --buddy-w: clamp(10.5rem, 6rem + 14vw, 19rem); }
/* Review round 1. Joram asked for him bigger on a desktop, then chose "Iets kleiner, altijd zichtbaar": from 64em he
   is 1.5 times the formula above (every term times 1.5), never taller than 60 % of the screen (77vh wide, cut at
   0.78), and he never steps aside there (:not(*) matches nothing): clicks pass through him to what is under him. */
.jb-buddy { --buddy-clear: .jb-hero__actions a; }
@media (min-width: 64em) {
  :root { --buddy-w: min(clamp(15.75rem, 9rem + 21vw, 28.5rem), 77vh); }
  .jb-buddy { --buddy-clear: :not(*); }
}
/* keyboard focus and scrolled-to targets stop above him (WCAG 2.2, 2.4.11 focus not obscured) */
html { scroll-padding-bottom: calc(var(--buddy-w) * 0.78 + 1rem); }
.jb-buddy { position: fixed; right: 0; bottom: 0; z-index: 35; width: var(--buddy-w); pointer-events: none; }
.jb-menu-open .jb-buddy { display: none; }
.jb-mascot { margin: 0; }
.jb-mascot img { width: 100%; height: auto; }
.jb-buddy__figure { position: relative; transform-origin: 50% 100%; }
.jb-buddy__figure img { aspect-ratio: 480 / 374; object-fit: cover; object-position: 50% 0; transform-origin: 50% 100%; }
.jb-buddy.is-tucked .jb-buddy__figure { transform: translateY(calc(100% - 1.75rem)); }
.jb-buddy.is-away .jb-buddy__figure { transform: translateY(110%); }
.jb-buddy__bubble { position: absolute; right: calc(100% - 1.75rem); bottom: calc(var(--buddy-w) * 0.47); width: max-content;
  max-width: min(17rem, calc(100vw - var(--buddy-w) - 0.25rem)); margin: 0; padding: 0.55rem 0.95rem 0.6rem;
  font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-weight: 600; font-size: var(--step-0); line-height: 1.3;
  color: var(--ink-deep); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 1.3rem 1.1rem 1.4rem 1rem;
  box-shadow: 3px 3px 0 var(--ink); visibility: hidden; opacity: 0; transform-origin: 100% 100%; }
.jb-buddy__bubble::after { content: ""; position: absolute; right: 1.1rem; bottom: -0.62rem; width: 1rem; height: 1rem; background: var(--paper);
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(30deg) skew(12deg, 12deg); }
.jb-buddy__bubble.is-saying { visibility: visible; opacity: 1; }
.jb-buddy.is-tucked .jb-buddy__bubble, .jb-buddy.is-away .jb-buddy__bubble { visibility: hidden; opacity: 0; }
.jb-buddy__hide { position: absolute; right: 6%; bottom: calc(var(--buddy-w) * 0.3); pointer-events: auto; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper);
  color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.jb-buddy__hide svg { width: 22px; height: 22px; overflow: visible; }
.jb-buddy__hide path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jb-buddy__hide[aria-pressed="true"] { right: 0.35rem; bottom: 0.35rem; background: var(--highlight); color: var(--ink-deep); }
.jb-buddy__hide[aria-pressed="true"] svg { transform: rotate(180deg); }
/* two tones, so the ring shows on every ground: paper on the blue page, ink on paper and highlighters */
.jb-buddy__hide:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
.jb-buddy.is-away .jb-buddy__hide { visibility: hidden; }
/* On a desktop he speaks from above his shoulder, inside the screen. */
@media (min-width: 64em) { .jb-buddy__bubble { right: 52%; bottom: 74%; } }
@keyframes jb-rise { from { transform: translateY(105%); } }
@keyframes jb-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03); } }
@keyframes jb-bounce { 30% { transform: scale(1.05, 0.93); } 65% { transform: scale(0.97, 1.05); } }
@keyframes jb-pop { from { opacity: 0; transform: scale(0.6) rotate(-4deg); } }
@media (prefers-reduced-motion: no-preference) {
  .jb-js .jb-buddy__figure { animation: jb-rise 900ms var(--ease) 300ms backwards; transition: transform 450ms var(--ease); }
  .jb-js .jb-buddy__figure img { animation: jb-breathe 4.2s ease-in-out 1.2s infinite; }
  .jb-js .jb-buddy__figure.is-bouncing img { animation: jb-bounce 600ms var(--ease), jb-breathe 4.2s ease-in-out 600ms infinite; }
  .jb-js .jb-buddy__bubble { transition: opacity 250ms var(--ease), visibility 0s linear 250ms; }
  .jb-js .jb-buddy__bubble.is-saying { animation: jb-pop 380ms var(--ease); transition: opacity 150ms var(--ease), visibility 0s; }
  .jb-js .jb-buddy.is-tucked .jb-buddy__figure, .jb-js .jb-buddy.is-tucked .jb-buddy__figure img,
  .jb-js .jb-buddy.is-away .jb-buddy__figure, .jb-js .jb-buddy.is-away .jb-buddy__figure img { animation: none; }
  .jb-js .jb-buddy__hide { transition: right 450ms var(--ease), bottom 450ms var(--ease); }
}

/* Footer */
/* the page ends with room for the mascot, so he never sits on the last footer line */
.jb-footer { border-top: 2px solid var(--rule); padding-block: 3rem calc(var(--buddy-w) * 0.78 + 1rem); }
.jb-footer__inner { display: grid; gap: 1.25rem; }
.jb-footer__sign { font-size: var(--step-2); }
.jb-footer__nav ul, .jb-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; list-style: none; padding: 0; margin: 0; }

/* Doodle mode */
.jb-doodle-canvas { position: absolute; left: 0; top: 0; z-index: 30; touch-action: none; }
.jb-doodle-bar { position: fixed; z-index: 40; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: 0.5rem;
  align-items: center; padding: 0.5rem 0.75rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); }
.jb-doodle-bar button { min-height: 44px; padding: 0.3rem 0.9rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-family: var(--font-hand); }
.jb-doodle-bar p { margin: 0; font-size: var(--step--1); color: var(--graphite); }
html.jb-doodling, html.jb-doodling body { overscroll-behavior: none; }

/* 404 and the block library */
.jb-404 h1 { max-width: 16ch; margin-bottom: 0.75rem; }
.jb-404__back { margin-top: var(--line); }
.jb-lib__item { border-top: 2px dashed var(--rule); padding-block: 2rem; }
.jb-lib__name { font-family: var(--font-body); font-size: var(--step-0); color: var(--graphite); padding-left: var(--margin-x);
  margin-bottom: var(--tear); } /* room for a block that overlaps the one above */
.jb-lib__code { padding-left: var(--margin-x); }

/* Motion that answers a hover or a click; none of it for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .jb-button, .jb-door, .jb-tabs__list a { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .jb-buddy__figure, .jb-buddy__figure img, .jb-buddy__bubble { animation: none; transition: none; }
  .jb-button:hover, .jb-button:active { transform: none; }
}

/* ---- Plan 2: grounds. Each <main> section names its ground; light grounds (paper, kraft, graph) and strong
   ones (a highlighter band or the full ballpoint-blue page) take turns, like plastilose.nl's cream and navy
   bands, in this sketchbook's own colours. Text colour follows the ground through two custom properties;
   a component with its own paper or kraft background resets them. ---- */
:where(.jb-page:not(.jb-page--home)) [data-jb-ground] { --ground-text: var(--ink); --ground-soft: var(--graphite); color: var(--ground-text); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="kraft"] { background: var(--paper-edge); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="graph"] { background-color: var(--paper);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 1.25rem 1.25rem; }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="yellow"] { background: var(--highlight); --ground-text: var(--ink-deep); --ground-soft: var(--ink-deep); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="pink"] { background: var(--hl-pink); --ground-text: var(--ink-deep); --ground-soft: var(--ink-deep); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="green"] { background: var(--hl-green); --ground-text: var(--ink-deep); --ground-soft: var(--ink-deep); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="orange"] { background: var(--hl-orange); --ground-text: var(--ink-deep); --ground-soft: var(--ink-deep); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="ink"] { background: var(--ink); --ground-text: var(--paper); --ground-soft: var(--paper); }
/* On a yellow band the highlighter swipe and the buttons turn pink, or they would vanish. */
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="yellow"] > * { --highlight: var(--hl-pink); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground] :is(h2, h3) { color: var(--ground-text); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground] a:not(.jb-button) { color: var(--ground-text); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground] :is(.jb-eyebrow, .jb-note, .jb-years__label, .jb-video__meta,
  .jb-timeline__when, .jb-timeline__org, .jb-crumbs ol, .jb-num) { color: var(--ground-soft); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="ink"] .jb-mark { color: var(--ink-deep); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="ink"] :focus-visible { outline-color: var(--paper); }
/* ...except inside a white card or form on that blue page, where the ring sits on paper again. */
:where(.jb-page:not(.jb-page--home)) [data-jb-ground="ink"] :is(.jb-card, .jb-form, .jb-pinned, .jb-snap, .jb-piece,
  .jb-diploma, .jb-points__item, .jb-commission-cta__card, .jb-lightbox) :focus-visible { outline-color: var(--ink); }
/* Stamps are not reset: their text follows the ground (ink-deep on pink, as on the homepage). */
:where(.jb-page:not(.jb-page--home)) :is(.jb-card, .jb-pinned, .jb-snap, .jb-piece, .jb-form, .jb-diploma,
  .jb-points__item, .jb-commission-cta__card, .jb-chip, .jb-badge, .jb-year, .jb-lightbox, .jb-more__link) {
  --ground-text: var(--ink); --ground-soft: var(--graphite); color: var(--ink); }
/* Torn-paper edges on every ground but plain paper, with the homepage round's polygons (--tear and the
   --torn-* lists live on :root in this file), so every page tears the same way. Each section draws its own
   edges and never reaches into a neighbour (one section is one Elementor widget in Plan 3;
   tests/site/test_css_structure.py): the torn top is the section's own ::before, a strip of --tear above its
   box in its own ground (its texture runs on into the section), so it overlaps the section above and its tear
   shows that section; the torn bottom is cut inside its own box, and the bottom padding keeps words and focus
   rings clear of it. Strong grounds tear along the second pair of polygons and light ones along the first, so
   neighbours, which take turns, never tear alike. */
:where(.jb-page:not(.jb-page--home)) [data-jb-ground] { --edge-top: var(--torn-top-1); --edge-bottom: var(--torn-bottom-1); }
:where(.jb-page:not(.jb-page--home)) :is([data-jb-ground="yellow"], [data-jb-ground="pink"], [data-jb-ground="green"],
  [data-jb-ground="orange"], [data-jb-ground="ink"]) { --edge-top: var(--torn-top-2); --edge-bottom: var(--torn-bottom-2); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground]:not([data-jb-ground="paper"]) {
  clip-path: polygon(0 calc(-1 * var(--tear)), 100% calc(-1 * var(--tear)), var(--edge-bottom));
  padding-bottom: calc(var(--section-y) * 0.85 + var(--tear)); }
:where(.jb-page:not(.jb-page--home)) [data-jb-ground]:not([data-jb-ground="paper"])::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--tear); pointer-events: none;
  background: inherit; background-position-y: var(--tear); clip-path: polygon(var(--edge-top), 100% 100%, 0 100%); }
/* Long Dutch words in big handwriting ("ontwerpprojecten") must wrap on a phone. */
:where(.jb-page:not(.jb-page--home) [data-jb-blok]) :is(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }

/* ---- Plan 2: shared layouts. A split (text and a picture, mirrored with --flip), a snapshot (jb-snap: a polaroid
   frame that keeps the photo's own shape; the homepage's jb-polaroid crops to 3:2), a taped picture,
   a round sticker, a centred statement ---- */
.jb-split { display: grid; gap: var(--line) 3rem; align-items: center; }
@media (min-width: 48em) {
  .jb-split { grid-template-columns: minmax(0, 3fr) minmax(12rem, 2fr); }
  .jb-split--flip { grid-template-columns: minmax(12rem, 2fr) minmax(0, 3fr); }
  .jb-split--flip > .jb-split__pic { order: -1; }
}
.jb-split__pic { justify-self: center; width: min(100%, 26rem); }
.jb-pinned, .jb-snap { position: relative; margin: 0; background: var(--paper); box-shadow: var(--shadow); }
.jb-pinned { padding: 0.6rem 0.6rem 1rem; transform: rotate(-1.2deg); }
.jb-snap { padding: 0.75rem 0.75rem 2.75rem; transform: rotate(1.5deg); }
.jb-pinned::before { content: ""; position: absolute; z-index: 1; top: -0.9rem; left: 50%; width: 5rem; height: 1.75rem;
  background: var(--tape); transform: translateX(-50%) rotate(2deg); clip-path: polygon(3% 8%, 97% 0, 100% 52%, 96% 100%, 2% 93%, 0 45%); }
.jb-pinned img, .jb-snap img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: var(--paper); }
.jb-sticker { float: right; width: clamp(6.5rem, 24vw, 11rem); margin: 0 0 1rem 1.25rem; transform: rotate(2deg); }
.jb-sticker img { border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); }
/* On a phone the sticker stands above the heading, so the heading and its lead keep the full width (final review M10). */
@media (max-width: 47.99em) { .jb-sticker { float: none; width: 6rem; margin: 0 0 0.5rem auto; } }
.jb-statement { text-align: center; }
.jb-statement > * { margin-inline: auto; }
.jb-statement__line { font-size: var(--step-2); margin-top: 1rem; }

/* ---- Plan 2: the page intro (every page except home): the title, a lead and, on most pages, a taped picture ---- */
.jb-intro__inner { display: grid; gap: var(--line) 3rem; align-items: center; }
@media (min-width: 48em) { .jb-intro__inner:has(.jb-intro__art) { grid-template-columns: minmax(0, 3fr) minmax(12rem, 2fr); } }
.jb-intro__title { max-width: 18ch; }
.jb-intro__lead { font-size: var(--step-1); line-height: 1.6; margin-top: var(--line); }
.jb-intro__art { justify-self: center; width: min(100%, 22rem); }
.jb-intro__visit { margin-top: var(--line); }

/* ---- Plan 2: Over. The story beside a polaroid, the timeline, facts as a ticked list, diplomas, stamps and chips ---- */
.jb-story__text { display: grid; gap: 1rem; margin-top: var(--line); }
/* Work and volunteering only (degrees and certificates have their own blocks); each entry carries its own piece of
   the line, so the list can run in two newspaper columns on a wide screen and still read as one line through time.
   Entries that ended by 2017 fold under "Eerder" (a <details>, so it opens without JavaScript). */
.jb-timeline__list { margin-top: var(--line); }
@media (min-width: 64em) { .jb-timeline__list { clear: both; columns: 2; column-gap: 3.5rem; } }
.jb-timeline__item { position: relative; padding: 0 0 calc(var(--line) * 1.1) 1.75rem; border-left: 3px solid var(--ink); break-inside: avoid; }
.jb-timeline__item:last-child { padding-bottom: 0.75rem; }
.jb-timeline__item::before { content: ""; position: absolute; left: -10px; top: 0.55rem; width: 17px; height: 17px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); }
.jb-timeline__item--volunteer::before { background: var(--hl-green); }
.jb-timeline__earlier { margin-top: 1rem; }
.jb-timeline__more { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.3rem 1.1rem; cursor: pointer;
  list-style: none; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-weight: 700; }
.jb-timeline__more::-webkit-details-marker { display: none; }
.jb-timeline__more::before { content: ""; width: 0.55rem; height: 0.55rem; border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.jb-timeline__earlier[open] .jb-timeline__more::before { transform: rotate(45deg); }
.jb-timeline__more:hover { background: var(--highlight); color: var(--ink-deep); }
.jb-timeline__when { font-family: var(--font-hand); font-variation-settings: var(--infm-label); }
.jb-timeline__title { margin-top: 0.25rem; overflow-wrap: anywhere; }
.jb-timeline__org { font-size: var(--step--1); }
.jb-tag { display: inline-block; padding: 0 0.5rem; margin-right: 0.35rem; border: 2px solid var(--ink); border-radius: 4px;
  font-size: var(--step--1); color: var(--ink); background: var(--paper); }
.jb-factlist { display: grid; gap: 1rem; margin-top: var(--line); }
.jb-factlist li { position: relative; padding-left: 2rem; max-width: 62ch; }
.jb-factlist li::before { content: ""; position: absolute; left: 0.2rem; top: 0.45rem; width: 0.9rem; height: 0.5rem;
  border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.jb-diplomas { display: grid; gap: 1.75rem 1.25rem; margin-top: var(--line); }
@media (min-width: 48em) { .jb-diplomas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jb-diploma { position: relative; padding: 1.25rem 1.25rem 2rem; background: var(--paper); border: 3px double var(--ink);
  border-radius: 4px; box-shadow: var(--shadow); }
.jb-diploma:nth-child(2) { transform: rotate(1deg); }
.jb-diploma::after { content: ""; position: absolute; right: 1rem; bottom: -1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--red-pen); box-shadow: inset 0 0 0 4px var(--hl-orange); }
.jb-skills__tools { margin-top: calc(var(--line) * 1.5); }
.jb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.jb-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0.2rem 0.9rem; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--paper); font-family: var(--font-hand); font-variation-settings: var(--infm-label);
  line-height: 1.3; text-decoration: none; }

/* ---- Plan 2: index cards (Werk, Lab, Leven); a card with a page is one big link ---- */
.jb-cards { display: grid; gap: 1.75rem 1.5rem; margin-top: var(--line); }
@media (min-width: 48em) { .jb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .jb-cards--projects, .jb-cards--lab, .jb-cards--hobby { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jb-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem 1.1rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 4px 7px 5px 6px; box-shadow: 3px 3px 0 var(--rule); }
.jb-card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.jb-card:nth-child(3n+2) { transform: rotate(0.5deg); }
.jb-card__pic { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--paper-edge); }
.jb-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.jb-card--venture .jb-card__pic img, .jb-card--role .jb-card__pic img { object-fit: contain; padding: 1.25rem; }
.jb-card__pic .jb-doodle { width: 38%; height: auto; }
.jb-card__pic .jb-doodle path, .jb-intro__art .jb-doodle path { stroke-width: 3; }
.jb-card__title { font-size: var(--step-1); overflow-wrap: anywhere; }
.jb-card__link { text-decoration: none; }
.jb-card__link::after { content: ""; position: absolute; inset: 0; }
/* The whole card shows the focus ring; only where :has() works, or the link would lose its ring. */
@supports selector(:has(*)) {
  .jb-card__link:focus-visible { outline: none; }
  .jb-card:has(.jb-card__link:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
  :where(.jb-page:not(.jb-page--home)) [data-jb-ground="ink"] .jb-card:has(.jb-card__link:focus-visible) { outline-color: var(--paper); }
}
.jb-card:has(.jb-card__link):hover { background: var(--highlight); box-shadow: 5px 6px 0 var(--ink); transform: rotate(0) translateY(-3px); }
.jb-card:has(.jb-card__link):hover .jb-eyebrow, .jb-card:has(.jb-card__link):hover .jb-card__text,
.jb-card:has(.jb-card__link):hover .jb-card__link, .jb-card:has(.jb-card__link):hover .jb-card__more { color: var(--ink-deep); }
.jb-card__text { font-size: var(--step--1); line-height: 1.6; }
.jb-card__more { margin-top: auto; font-family: var(--font-hand); font-weight: 700; }
.jb-card__more::after { content: " \2192"; }
.jb-card__visit { position: relative; z-index: 1; }
.jb-card__visit a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-hand); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .jb-card { transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
}
/* Roles read as rows, picture left and text right, so they differ from the ventures above and the project grid below. */
@media (min-width: 48em) {
  .jb-cards--roles { grid-template-columns: 1fr; }
  .jb-cards--roles .jb-card { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; align-content: start; }
  .jb-cards--roles .jb-card__pic { grid-row: 1 / span 5; }
}
.jb-cards--ventures .jb-card__pic { background: var(--paper); }
/* The link to the venture's own site ends the card, so the two cards finish on one line however many badges they carry. */
.jb-cards--ventures .jb-card__visit { margin-top: auto; }
/* Projects (Task 11b): a row with the picture left on a phone, two columns from 30em, three from 64em (above). */
@media (max-width: 29.99em) {
  .jb-cards--projects .jb-card { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.4rem;
    align-content: start; }
  .jb-cards--projects .jb-card > * { grid-column: 1 / -1; }
  /* the eyebrow ("MSc-afstudeerproject, TU Delft, bij Plastilose · 2026") runs the full width above the picture and title */
  .jb-cards--projects .jb-card > .jb-eyebrow { grid-row: 1; line-height: 1.4; }
  .jb-cards--projects .jb-card > .jb-card__pic { grid-column: 1; grid-row: 2; align-self: start; aspect-ratio: 1; }
  .jb-cards--projects .jb-card > .jb-card__title { grid-column: 2; grid-row: 2; align-self: center; }
}
@media (min-width: 30em) and (max-width: 47.99em) { .jb-cards--projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Plan 2: Kunst. Chips that filter, the year line, the wall of taped drawings, the lightbox ---- */
.jb-years[hidden], .jb-wall__group[hidden], .jb-piece[hidden] { display: none; }
.jb-filter button.jb-chip { cursor: pointer; }
.jb-filter .jb-chip[aria-pressed="true"] { background: var(--highlight); color: var(--ink-deep); box-shadow: 2px 2px 0 var(--ink); }
/* The years are a line of inline chips with balanced rows (Task 11b), so the last year never wraps onto a row of its own. */
.jb-years { margin-top: var(--line); padding-top: 0.75rem; border-top: 2px dashed var(--ink); line-height: 1; text-wrap: balance; }
.jb-years__label { max-width: none; margin-bottom: 0.4rem; line-height: var(--line); font-family: var(--font-hand);
  font-variation-settings: var(--infm-label); color: var(--graphite); }
.jb-year { min-height: 44px; min-width: 44px; margin: 0 0.15rem 0.4rem 0; padding: 0.2rem 0.6rem; border: 2px solid var(--ink); border-radius: 6px;
  background: var(--paper); color: var(--ink); font-family: var(--font-hand); vertical-align: middle; }
.jb-year[aria-pressed="true"] { background: var(--highlight); color: var(--ink-deep); }
.jb-year:disabled { border-style: dashed; color: var(--graphite); cursor: not-allowed; }
.jb-wall__hint { font-size: var(--step-1); }
.jb-wall__group { margin-top: calc(var(--line) * 1.5); }
.jb-wall__title { scroll-margin-top: 6rem; }
.jb-wall__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; margin-top: 1.5rem; }
@media (min-width: 48em) { .jb-wall__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .jb-wall__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jb-piece:nth-child(3n+2) { transform: rotate(1.2deg); }
.jb-piece:nth-child(3n) { transform: rotate(-0.4deg); }
.jb-piece__link { display: block; }
.jb-piece__link img { aspect-ratio: 1; }
.jb-piece__meta { margin-top: 0.4rem; font-size: var(--step--1); line-height: 1.4; color: var(--graphite); overflow-wrap: anywhere; }
.jb-piece__meta .jb-badge { display: inline-block; margin-top: 0.2rem; color: var(--ink); } /* inline-block: a badge after a wrapped title takes its own room instead of crossing out the line above */
.jb-piece:hover, .jb-piece:focus-within { z-index: 2; transform: rotate(0) scale(1.03); }
.jb-commission-cta__card { max-width: 40rem; padding: 1.5rem; border: 2px dashed var(--ink); border-radius: 10px; background: var(--paper-edge); }
.jb-lightbox { width: min(92vw, 60rem); max-height: 92vh; padding: 0; border: 3px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.jb-lightbox::backdrop { background: color-mix(in srgb, var(--ink-deep) 60%, transparent); }
.jb-lightbox__figure { margin: 0; padding: 1rem 1rem 0; }
.jb-lightbox__img { width: auto; height: auto; max-width: 100%; max-height: 70vh; margin-inline: auto; background: var(--paper); }
.jb-lightbox__figure figcaption { padding-top: 0.5rem; text-align: center; font-family: var(--font-hand); font-variation-settings: var(--infm-label); }
.jb-lightbox__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: none; padding: 0.75rem 1rem 1rem; }
.jb-lightbox__nav button { min-height: 44px; min-width: 44px; padding: 0.3rem 1rem; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-family: var(--font-hand); }
.jb-lightbox__nav button:hover { background: var(--highlight); color: var(--ink-deep); }
@media (prefers-reduced-motion: no-preference) {
  .jb-js .jb-lightbox[open] { animation: jb-lightbox-in 220ms var(--ease); }
  .jb-piece { transition: transform 160ms var(--ease); }
}
@keyframes jb-lightbox-in { from { transform: scale(0.96) rotate(-1deg); opacity: 0; } }

/* ---- Review round 1: Fotografie. Prints taped onto the ballpoint-blue page, in rows that keep each photo's own shape:
   a print grows in proportion to its photo's width over height (--r, written by gen/fotografie.py), so the photos in a
   row share one height and the rows read left to right in data order. The lightbox is Kunst's. ---- */
.jb-photos__hint { margin-top: 0.5rem; font-size: var(--step-1); color: var(--ground-text); } /* .jb-hand is ink; this one sits on the blue page */
.jb-photos__list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 1.25rem; margin-top: calc(var(--line) * 1.25); }
.jb-photos__list::after { content: ""; flex: 999 1 0; } /* the last row keeps the size of the rows above it */
.jb-photo { flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * 9rem + 1.2rem); min-width: 0; } /* + its paper border, so the photos share one height */
.jb-photo:nth-child(3n+2) { transform: rotate(1deg); }
.jb-photo:nth-child(3n) { transform: rotate(-0.5deg); }
.jb-photo__link { display: block; }
/* the photo's own shape before it loads (.jb-pinned img drops the width and height attributes' ratio): no layout shift,
   and a lazy print far down the page stays unloaded until it comes near */
.jb-photo img { aspect-ratio: var(--r); }
.jb-photo:hover, .jb-photo:focus-within { z-index: 2; transform: rotate(0) scale(1.03); }
@media (prefers-reduced-motion: no-preference) { .jb-photo { transition: transform 160ms var(--ease); } }

/* ---- Plan 2: Films. Shelves of film strips, a drawn clapperboard for a missing still, the SmileminerArt line ---- */
/* Three shelves, three layouts: one big film with two beside it, a grid, polaroids. */
.jb-film-shelf .jb-film-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 48em) {
  .jb-film-shelf--featured .jb-film-cards { grid-template-columns: 2fr 1fr; }
  .jb-film-shelf--featured .jb-film-item:first-child { grid-row: span 2; }
}
/* Two small stills side by side on a phone, so eleven design films are six rows, not eleven screens. */
.jb-film-shelf--study .jb-film-cards { grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 0.6rem), 16rem), 1fr)); gap: 1.5rem 1rem; }
.jb-film-shelf .jb-video__title { overflow-wrap: anywhere; hyphens: auto; } /* "Ontwerpstudenten" in a half-width card */
@media (max-width: 47.99em) {
  .jb-film-shelf--study .jb-video img { padding: 0.7rem 0.3rem; background-size: 100% 0.28rem;
    background-image: repeating-linear-gradient(90deg, var(--paper) 0 0.4rem, transparent 0.4rem 0.9rem),
                      repeating-linear-gradient(90deg, var(--paper) 0 0.4rem, transparent 0.4rem 0.9rem);
    background-position: 0.25rem 0.21rem, 0.25rem calc(100% - 0.21rem); }
}
.jb-film-shelf--commissions .jb-film-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 2rem 1.25rem; }
.jb-film-shelf--commissions .jb-video { --ground-text: var(--ink); --ground-soft: var(--graphite); color: var(--ink);
  padding: 0.6rem 0.6rem 1rem; background: var(--paper); box-shadow: var(--shadow); transform: rotate(-1.2deg); }
.jb-film-shelf--commissions .jb-film-item:nth-child(even) .jb-video { transform: rotate(1.2deg); }
.jb-video .jb-doodle { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; padding: 1.4rem 34%; border-radius: 3px;
  background-color: var(--ink-deep);
  background-image: repeating-linear-gradient(90deg, var(--paper) 0 0.55rem, transparent 0.55rem 1.25rem),
                    repeating-linear-gradient(90deg, var(--paper) 0 0.55rem, transparent 0.55rem 1.25rem);
  background-size: 100% 0.4rem; background-repeat: no-repeat; background-position: 0.35rem 0.35rem, 0.35rem calc(100% - 0.35rem); }
.jb-video .jb-doodle path { stroke: var(--paper); stroke-width: 3; }
.jb-video iframe ~ .jb-doodle { display: none; }
/* The year and role sit inside the figcaption (it comes last in the figure), in running text, not handwriting. */
.jb-video__meta { font-family: var(--font-body); font-variation-settings: normal; font-size: var(--step--1); line-height: 1.4; color: var(--graphite); }
/* The stills lead (Task 11b): "not online" is a quiet pencil stamp under the year and role, never on the picture;
   the shelf says it once, in a note under its films. Both follow the ground's text colour. */
.jb-video__off { display: block; width: fit-content; margin: 0.4rem 0 0; padding: 0 0.5rem; border: 1.5px dashed currentColor;
  border-radius: 4px; color: var(--ground-soft); font-family: var(--font-hand); font-variation-settings: var(--infm-label);
  font-size: var(--step--1); line-height: 1.5; }
.jb-film-shelf__note { margin-top: calc(var(--line) * 0.9); font-family: var(--font-hand); font-variation-settings: var(--infm-label);
  font-weight: 700; color: var(--ground-text); }
.jb-film-shelf__note::before { content: "\2192"; margin-right: 0.5rem; }
.jb-video__link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-hand); font-weight: 700; }
/* The SmileminerArt corner (review round 1): one handwritten line in a slim kraft band, in the background. The bottom
   keeps the torn edge's room (--tear), as every ground but paper does. */
.jb-archive[data-jb-blok] { padding-top: calc(var(--section-y) * 0.4); padding-bottom: calc(var(--section-y) * 0.4 + var(--tear)); }
.jb-archive__line { font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-size: var(--step-1); line-height: 1.4; }
.jb-archive__line::before { content: "\2192"; margin-right: 0.5rem; }

/* ---- Plan 2: project pages. Breadcrumb, more pictures and the film, the way on ---- */
.jb-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-size: var(--step--1); color: var(--graphite); }
.jb-crumbs li + li::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.5rem;
  border-top: 2px solid var(--graphite); border-right: 2px solid var(--graphite); transform: rotate(45deg); }
.jb-crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.jb-intro--project .jb-intro__title { max-width: 22ch; overflow-wrap: anywhere; }
.jb-media__list { display: grid; gap: 2rem 1.5rem; margin-top: var(--line); }
@media (min-width: 48em) { .jb-media__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* One picture or film alone gets two thirds of the band instead of half of it (Task 11b). */
@media (min-width: 48em) { .jb-media__list:has(> li:only-child) { grid-template-columns: minmax(0, 44rem); } }
.jb-media__pic:nth-child(even) { transform: rotate(1.1deg); }
.jb-more__list { display: grid; gap: 0.75rem; margin-top: var(--line); }
@media (min-width: 48em) { .jb-more__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jb-more__link { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; min-height: 44px; height: 100%;
  padding: 0.75rem 1rem; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); text-decoration: none; }
.jb-more__link:hover { background: var(--highlight); color: var(--ink-deep); }
.jb-more__label { font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-size: var(--step--1); color: var(--graphite); }
.jb-more__link:hover .jb-more__label { color: var(--ink-deep); }
.jb-more__title { font-family: var(--font-hand); font-weight: 700; font-size: var(--step-1); overflow-wrap: anywhere; }
.jb-more__link--back .jb-more__title::after { content: " \2192"; }
.jb-crumbs { margin-bottom: 0.75rem; }
.jb-intro--project .jb-intro__art .jb-doodle { display: block; width: min(60%, 12rem); height: auto; margin: 0 auto; padding: 1.25rem 0; }

/* ---- Plan 2: Lab cards on graph paper, Leven cards as taped sticky notes ---- */
.jb-card--lab .jb-card__pic { background-color: var(--paper);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 1rem 1rem; }
.jb-card--lab .jb-card__pic img { object-fit: contain; }
.jb-chip--small { min-height: 0; padding: 0 0.6rem; font-size: var(--step--1); }
.jb-card--lab .jb-chips { gap: 0.35rem; margin-top: 0.25rem; }
.jb-card--hobby { border: 0; background: var(--paper-edge); box-shadow: var(--shadow); padding-top: 1.5rem; }
.jb-card--hobby::before { content: ""; position: absolute; z-index: 1; top: -0.8rem; left: 50%; width: 5.5rem; height: 1.6rem;
  background: var(--tape); transform: translateX(-50%) rotate(-3deg); }
.jb-card--hobby .jb-card__pic { background: var(--paper); }
.jb-card--hobby .jb-card__pic img { object-fit: contain; }
/* Three sticky-note colours on the pink band; ink stays AAA on each (7.96 and 7.18:1). */
.jb-card--hobby:nth-child(3n+2) { background: var(--highlight); }
.jb-card--hobby:nth-child(3n) { background: var(--hl-green); }
/* A last card alone on its row spans the row, picture left (final review M11). */
@media (min-width: 48em) and (max-width: 63.99em) {
  .jb-cards--hobby .jb-card:last-child:nth-child(2n+1) { grid-column: 1 / -1; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; align-content: start; }
  .jb-cards--hobby .jb-card:last-child:nth-child(2n+1) .jb-card__pic { grid-row: 1 / span 4; }
}
@media (min-width: 64em) {
  .jb-cards--hobby .jb-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.5rem 1.5rem; align-content: start; }
  .jb-cards--hobby .jb-card:last-child:nth-child(3n+1) .jb-card__pic { grid-row: 1 / span 4; }
}

/* ---- Review round 1: the websites Joram built (Lab). Each card holds a picture of the live site in a drawn browser
   window (a thick top bar with three dots), read from its top left, as a visitor sees it. ---- */
@media (min-width: 64em) { .jb-cards--websites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jb-card--website .jb-card__pic { aspect-ratio: 16 / 10; place-items: start; padding-top: 1rem; border: 2px solid var(--ink);
  border-radius: 8px 8px 3px 3px;
  background: radial-gradient(circle at 0.7rem 0.45rem, var(--paper) 0.16rem, transparent 0.2rem),
    radial-gradient(circle at 1.3rem 0.45rem, var(--paper) 0.16rem, transparent 0.2rem),
    radial-gradient(circle at 1.9rem 0.45rem, var(--paper) 0.16rem, transparent 0.2rem),
    linear-gradient(var(--ink) 1rem, var(--paper) 1rem); }
.jb-card--website .jb-card__pic img { object-fit: cover; object-position: 0 0; }
.jb-card--website .jb-card__title { overflow-wrap: anywhere; }

/* ---- Plan 2: Contact. A letter on ruled paper, a hidden honeypot, the mascot's speech bubble ---- */
.jb-letter { scroll-margin-top: 6rem; }
.jb-form { position: relative; display: grid; gap: 1rem 1.5rem; max-width: 44rem; padding: 1.5rem; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); }
@media (min-width: 48em) {
  .jb-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-form > :not(.jb-form__field), .jb-form__field--wide { grid-column: 1 / -1; }
}
.jb-form__field { display: grid; gap: 0.25rem; max-width: none; }
.jb-form__field label { font-family: var(--font-hand); font-variation-settings: var(--infm-label); font-weight: 700; }
.jb-form input, .jb-form select, .jb-form textarea { width: 100%; min-height: 48px; padding: 0.5rem 0.75rem; border: 2px solid var(--ink);
  border-radius: 6px; background: var(--paper); color: var(--ink); line-height: 1.5; }
.jb-form textarea { resize: vertical; line-height: var(--line); padding-block: 0; background-attachment: local; /* rules sit under the text lines */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line)); }
.jb-form__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jb-form__note, .jb-form__prototype, .jb-form__status { max-width: none; }
.jb-form__prototype { padding: 0.5rem 0.75rem; border-radius: 4px; background: var(--highlight); color: var(--ink-deep); }
.jb-form__status { font-family: var(--font-hand); font-weight: 700; }
/* The mascot block: Joram's line in big handwriting and a red-pen arrow down to the corner where the overlay mascot stands. */
.jb-mascot-note__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; }
.jb-shout { max-width: 18ch; font-size: var(--step-3); line-height: 1.2; text-align: center; }
.jb-shout__arrow { width: 7rem; height: auto; } /* the red stroke comes from the homepage's svg.jb-redpen */
.jb-shout__arrow path { stroke-width: 3; }
.jb-letter__title { margin-bottom: 1rem; }
.jb-letter .jb-form__note { max-width: 44rem; margin-top: 1rem; }
.jb-form__req { font-family: var(--font-body); font-size: 0.8em; font-weight: 400; }

/* ---- Plan 2: Privacy as short labelled points on a green band, then a centred call on graph paper ---- */
.jb-points__list { display: grid; gap: 1rem 1.5rem; margin-top: var(--line); }
@media (min-width: 48em) { .jb-points__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jb-points__item { padding: 1rem 1.25rem; border-left: 4px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); }
.jb-points__item dt { font-family: var(--font-hand); font-variation-settings: var(--infm-display); font-weight: 700; font-size: var(--step-1); }
.jb-points__item dd { margin: 0.25rem 0 0; }
.jb-call { text-align: center; }
.jb-call > * { margin-inline: auto; }
.jb-questions .jb-button { margin-top: 0.5rem; }
.jb-intro--privacy .jb-intro__art .jb-doodle { display: block; width: min(50%, 10rem); height: auto; margin: 0 auto; padding: 1rem 0; }

/* ---- Plan 2 quality pass ---- */
.jb-lang { min-width: 44px; justify-content: center; }
/* Jumps and focus stop below the sticky header (WCAG 2.4.11); the homepage round already set the bottom for the overlay. */
html { scroll-padding-top: 5.5rem; }
.jb-filter__count { min-height: 1.5em; margin-top: 0.75rem; font-family: var(--font-hand); font-weight: 700; }
.jb-piece[data-tilt="1"] { transform: rotate(1.2deg); }
.jb-piece[data-tilt="2"] { transform: rotate(-0.4deg); }
.jb-piece[data-tilt="0"] { transform: none; }
.jb-piece[data-tilt]:hover, .jb-piece[data-tilt]:focus-within { transform: rotate(0) scale(1.03); }
.jb-lightbox.is-loading .jb-lightbox__img { opacity: 0.35; }