/* The cardboard design (Joris, 2026-09-21): Mariana's own pin style, clean and girly, on a real corrugated
   board. From her collages: an editorial serif with a handwritten line under it ("That Girl / morning routine",
   "Amazon finds / fall edition"), thin capitals for labels, sparkles, confetti stars, little attention strokes,
   curly arrows and squiggles, pastels, a signature at the bottom ("@ltsmar"). From the board: kraft cardboard,
   the collage printed on paper and pushed in with a red pin (a 3D render, assets/img/pin-3d.webp), washi
   tape, a sticker for the name, and the other looks pinned around it.
   Everything drawn on the board is ink on cardboard: black fine liner (multiplied into the board, so the
   fibres show through) and white gel pen. Paper and stickers cast soft shadows, ink does not.
   Loaded after site.css, and only on pages whose body has the class "cardboard".
   The board is ambientCG Cardboard002 (CC0), cleaned of its stains. Fonts: Instrument Serif and Sacramento
   (both OFL). */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Sacramento"; font-weight: 400; font-display: swap; src: url(/assets/fonts/sacramento-400.woff2) format("woff2"); }

.cardboard {
  --board: #BE976A; --board-0: rgba(190, 151, 106, 0);   /* the mean of the board; build.mjs BOARD too */
  --ink: #1F1C1A; --soft: #4A423D; --muted: #6E6660; --canvas: #F2F1EF; --chalk: #FFF8EC;
  --rose: #6E2233;
  --blush: #F1CFCB; --sage: #CCD6C1; --cream: #EFE6D6;
  --script: "Sacramento", "Snell Roundhand", "Apple Chancery", cursive;
  --caps: 500 0.74rem/1.3 var(--sans);
  --lift: 0 1px 1px rgba(40, 22, 5, 0.18), 0 10px 18px -10px rgba(40, 22, 5, 0.5);
  --torn: polygon(2% 0, 98% 0, 100% 16%, 98.5% 33%, 100% 50%, 98.5% 67%, 100% 84%, 98% 100%, 2% 100%, 0 84%, 1.5% 67%, 0 50%, 1.5% 33%, 0 16%);
  --torn-short: polygon(6% 0, 94% 0, 100% 22%, 94% 44%, 100% 66%, 94% 88%, 97% 100%, 6% 100%, 0 80%, 6% 58%, 0 36%, 5% 16%);
  --stripes: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.42) 0 3px, rgba(255, 255, 255, 0) 3px 8px);
  --dots: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.1px, rgba(255, 255, 255, 0) 1.6px) 0 0 / 7px 7px;
  background-color: var(--board);
  background-image: radial-gradient(130% 50% at 50% 0%, rgba(255, 244, 226, 0.16), rgba(255, 244, 226, 0) 70%), url(/assets/img/cardboard-kraft.webp);
  background-size: auto, 640px 640px;
  background-repeat: no-repeat, repeat;   /* the light falls once; only the board repeats */
  min-height: 100vh;
  color: var(--ink);
}
/* Safari paints the strip around the Dynamic Island itself, in one flat colour it takes from the page. So the
   page starts in exactly that colour and lets the board fade in: no line where Safari's strip ends. */
.cardboard::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top, 0px) + 44px); background: linear-gradient(var(--board) calc(env(safe-area-inset-top, 0px) + 4px), var(--board-0)); pointer-events: none; }
.cardboard .page { position: relative; max-width: 800px; }
.cardboard main { gap: 22px; }
.cardboard :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The name: a glossy die-cut sticker on the box, with a printed line inside its edge. */
.cardboard .brand { position: relative; align-self: flex-start; display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin: 4px 0 0 2px; padding: 8px 16px 9px; border-radius: 16px; background: linear-gradient(160deg, #FFFFFF 0%, #FBF8F4 55%, #F3EDE5 100%); box-shadow: 0 0 0 1px rgba(60, 40, 20, 0.06), 0 1px 1px rgba(40, 22, 5, 0.24), 0 6px 12px -6px rgba(40, 22, 5, 0.45); transform: rotate(-3deg); color: var(--ink); }
.cardboard .brand::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(31, 28, 26, 0.16); border-radius: 12px; pointer-events: none; }
.cardboard .brand a { font: 400 1.95rem/0.95 var(--script); letter-spacing: 0; text-transform: lowercase; text-decoration: none; color: var(--ink); }
.cardboard .brand span { font: 500 0.5rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--soft); text-align: center; }

/* Doodles on the board next to the sticker: gel-pen stars and a few fine-liner strokes. */
.cardboard .board-doodles { position: absolute; top: 14px; right: 4px; width: 150px; height: 70px; pointer-events: none; }
.cardboard .board-doodles svg { position: absolute; color: var(--chalk); opacity: 0.92; }
.cardboard .board-doodles svg:nth-child(1) { width: 12px; height: 12px; right: 10px; top: 18px; }
.cardboard .board-doodles svg:nth-child(2) { width: 7px; height: 7px; right: 44px; top: 6px; }
.cardboard .board-doodles svg:nth-child(3) { width: 9px; height: 9px; right: 62px; top: 44px; }
.cardboard .board-doodles svg:nth-child(4) { width: 6px; height: 6px; right: 28px; top: 56px; }
.cardboard .board-doodles svg:nth-child(5) { width: 24px; height: 19px; right: 96px; top: 16px; color: var(--ink); opacity: 1; mix-blend-mode: multiply; transform: rotate(-24deg); }

/* The title: serif, with its last words handwritten under it and a squiggle after them; sparkles and
   confetti around it. */
.cardboard .intro { position: relative; gap: 12px; align-items: flex-start; padding-top: 6px; }
.cardboard h1 { position: relative; font: 400 clamp(3rem, 13vw, 4.6rem)/0.9 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.cardboard h1 .t-main { display: block; }
.cardboard h1 .t-accent { display: block; font: 400 clamp(2.5rem, 11vw, 3.7rem)/0.8 var(--script); text-transform: lowercase; color: var(--rose); margin: -0.06em 0 0 1.1em; transform: rotate(-4deg); transform-origin: left center; }
.cardboard h1 .squig { display: inline-block; width: 1.5em; height: 0.34em; margin-left: 0.1em; vertical-align: 0.1em; color: var(--rose); }
.cardboard h1 > .squig { display: block; width: 2.4em; height: 0.3em; margin: 0.12em 0 0 0.2em; }
/* The sparkles and confetti are part of the title, so they sit beside it whatever its length: on a phone in a
   band of their own at the right (the title wraps before it), on a wider screen just right of the title. */
.cardboard h1 { padding-right: 54px; }
.cardboard .sparkles { position: absolute; top: 0; right: 0; width: 54px; height: 58px; color: var(--ink); pointer-events: none; }
.cardboard .sparkles svg { position: absolute; mix-blend-mode: multiply; }
.cardboard .sparkles svg:first-child { width: 28px; height: 28px; right: 4px; top: 4px; }
.cardboard .sparkles svg:last-child { width: 15px; height: 15px; right: 32px; top: 30px; }
.cardboard .confetti { position: absolute; top: 0; right: 0; bottom: 0; width: 54px; color: var(--chalk); pointer-events: none; }
.cardboard .confetti svg { position: absolute; opacity: 0.92; }
.cardboard .confetti svg:nth-child(1) { width: 9px; height: 9px; right: 6px; top: 62px; }
.cardboard .confetti svg:nth-child(2) { width: 6px; height: 6px; right: 40px; top: 6px; }
.cardboard .confetti svg:nth-child(3) { width: 11px; height: 11px; right: 24px; top: 76px; }
.cardboard .confetti svg:nth-child(4) { width: 7px; height: 7px; right: 44px; top: 62px; }
.cardboard .confetti svg:nth-child(5) { width: 8px; height: 8px; right: 34px; top: 98px; }
.cardboard .confetti svg:nth-child(6) { width: 6px; height: 6px; right: 6px; top: 96px; }

/* The line Amazon wants before the first shop link, on a strip of blush washi tape. */
.cardboard .tape { margin: 4px 0 0; max-width: 100%; font: 400 0.8rem/1.35 var(--sans); color: var(--ink); background: var(--stripes), var(--blush); padding: 8px 16px; transform: rotate(-1deg); box-shadow: 0 1px 2px rgba(50, 30, 10, 0.2); clip-path: var(--torn); }

/* The pin: the collage printed on paper, pushed into the board with a red pin (a 3D render: the head, the
   needle and its shadow are one image; the needle enters the paper 13px below its top edge). The print has a
   faint sheen. The numbers on the collage are the same shop links as in the classic design. */
.cardboard .pinned { position: relative; margin: 8px auto 0; width: 100%; max-width: 520px; padding: 24px 10px 12px; background: #FFFFFF; transform: rotate(-0.8deg); box-shadow: 0 1px 1px rgba(40, 22, 5, 0.22), 0 12px 20px -8px rgba(40, 22, 5, 0.42), 0 30px 44px -26px rgba(40, 22, 5, 0.5); }
.cardboard .pinned::before { content: ""; position: absolute; z-index: 3; left: calc(50% - 30px); top: -20px; width: 53px; height: 58px; background: url(/assets/img/pin-3d.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.cardboard .pinned .burst { position: absolute; left: -4px; top: -30px; width: 30px; height: 24px; color: var(--ink); transform: rotate(-30deg); mix-blend-mode: multiply; pointer-events: none; }
.cardboard .pinned .burst svg { width: 100%; height: 100%; }
.cardboard .hero { border-radius: 0; background: var(--canvas); }
.cardboard .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.13) 44%, rgba(255, 255, 255, 0) 58%); pointer-events: none; }
.cardboard .hero a { z-index: 2; width: 28px; height: 28px; background: var(--ink); border: 2px solid #FFFFFF; font: 600 0.76rem/24px var(--sans); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.cardboard .scribble { margin: -2px 0 0; display: flex; align-items: flex-end; justify-content: center; gap: 8px; font: italic 400 1.28rem/1.2 var(--serif); color: var(--ink); }
.cardboard .scribble .arrow { width: 42px; height: 36px; flex: none; margin-bottom: 2px; mix-blend-mode: multiply; }

/* Below the pin: the note about the look, on her grid paper, with a strip of tape and a sparkle. */
.cardboard .notecard { position: relative; margin: 10px 0 0; padding: 24px 20px 18px; display: flex; flex-direction: column; gap: 10px; background-color: var(--canvas); background-image: linear-gradient(#FFFFFF 1px, transparent 1px), linear-gradient(90deg, #FFFFFF 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; box-shadow: var(--lift); transform: rotate(0.4deg); }
.cardboard .notecard::before, .cardboard .item::before { content: ""; position: absolute; top: -10px; left: 50%; width: 78px; height: 22px; margin-left: -39px; background: var(--stripes), var(--blush); opacity: 0.94; clip-path: var(--torn-short); transform: rotate(-2deg); }
.cardboard .nc-sparkle { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; color: var(--ink); opacity: 0.7; }
.cardboard .nc-sparkle svg { width: 100%; height: 100%; }
.cardboard .notecard p { margin: 0; }
.cardboard .notecard .sub { font: italic 400 1.45rem/1.2 var(--serif); color: var(--ink); text-wrap: balance; padding-right: 22px; }
.cardboard .notecard .note { font-size: 0.97rem; line-height: 1.6; color: var(--soft); }
.cardboard .notecard .disclose { font: var(--caps); letter-spacing: 0.06em; color: var(--muted); border-left: 1px solid rgba(31, 28, 26, 0.35); padding-left: 10px; }

/* The products: white cards, the name in her thin capitals, the line in italic serif. */
.cardboard .items { gap: 24px 16px; }
.cardboard .item { position: relative; background: #FFFFFF; border: 0; border-radius: 1px; box-shadow: var(--lift); }
.cardboard .item::before { left: 24%; transform: rotate(-4deg); }
.cardboard .item:nth-child(3n+2)::before { left: 76%; transform: rotate(3deg); background: var(--dots), var(--sage); }
.cardboard .item:nth-child(3n)::before { left: 50%; transform: rotate(-1.5deg); background: var(--stripes), var(--cream); }
.cardboard .item:target { outline: 2px solid var(--ink); outline-offset: 3px; }
.cardboard .thumb { border-radius: 1px; background-color: var(--canvas); }
.cardboard .thumb span { background: var(--ink); }
.cardboard .item h2 { font: var(--caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.cardboard .item p { font: italic 400 1.08rem/1.3 var(--serif); color: var(--soft); }
.cardboard .buy { background: var(--ink); font: 600 0.66rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 10px; }
.cardboard .buy small { font: italic 400 0.92rem/1 var(--serif); letter-spacing: 0; text-transform: none; opacity: 0.85; }

/* The other looks, pinned to the board as prints with a handwritten caption. On a phone they sit loosely
   below the page, each at its own tilt; on a wide screen they hang around the pin (see the last block). */
.cardboard .pinboard h2 { display: flex; align-items: flex-end; gap: 4px; font: 400 2.1rem/1 var(--serif); color: var(--ink); margin: 0 0 8px; }
.cardboard .pinboard h2::after { content: ""; width: 34px; height: 30px; margin-bottom: -10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 40'%3E%3Cpath d='M3 34 C 12 38, 24 36, 26 27 C 28 19, 18 17, 17 24 C 16 31, 30 32, 36 22 C 39 17, 40 11, 39 5 M39 5 L 33.5 10.5 M39 5 L 43.5 10.8' fill='none' stroke='%231F1C1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleY(-1) rotate(-20deg); mix-blend-mode: multiply; }
.cardboard .pinboard .looks { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 20px; padding: 18px 4px 8px; }
.cardboard .pinboard .looks a { position: relative; flex: 0 0 auto; width: calc(50% - 12px); max-width: 230px; background: #FFFFFF; padding: 8px 8px 10px; box-shadow: var(--lift); color: var(--ink); text-align: center; text-decoration: none; transform: translateY(var(--jy)) rotate(var(--r)); transition: transform 0.25s ease; }
.cardboard .pinboard .looks a:hover { transform: translateY(calc(var(--jy) - 4px)) rotate(0deg); }
.cardboard .pinboard .looks a::before, .cardboard .card::before { content: ""; position: absolute; z-index: 2; left: calc(50% - 17px); top: -12px; width: 30px; height: 33px; background: url(/assets/img/pin-3d.webp) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.cardboard .pinboard .pic { aspect-ratio: 4 / 5; border-radius: 0; background: var(--canvas); }
.cardboard .pinboard .cap { display: block; margin-top: 8px; font: 400 1.38rem/1 var(--script); color: var(--ink); }
/* On a phone: not a grid but prints pinned where there was room, each its own size, height and place. */
@media (max-width: 699px) {
  .cardboard .pinboard .looks { justify-content: space-between; align-items: flex-start; gap: 0; padding: 18px 0 20px; }
  .cardboard .pinboard .looks a { margin-bottom: 30px; }
  .cardboard .pinboard .looks a:nth-child(3n+1) { width: 51%; }
  .cardboard .pinboard .looks a:nth-child(3n+2) { width: 43%; margin-top: 46px; margin-right: 1%; }
  .cardboard .pinboard .looks a:nth-child(3n) { width: 48%; margin: -4px 0 30px 15%; }
}
@media (min-width: 700px) {
  .cardboard .intro { align-items: center; text-align: center; }
  .cardboard h1 .t-accent { margin-left: 2.2em; }
  .cardboard h1 { padding-right: 0; }
  .cardboard h1 > .squig { margin-left: auto; margin-right: auto; }
  .cardboard .sparkles { right: -78px; top: -6px; width: 64px; }
  .cardboard .confetti { right: -112px; width: 108px; }
  .cardboard .pinned { padding-top: 28px; }
  .cardboard .pinned::before { left: calc(50% - 36px); top: -24px; width: 63px; height: 69px; }
  .cardboard .pinboard .looks a { width: calc(33.3% - 18px); }
}
@media (prefers-reduced-motion: reduce) { .cardboard .pinboard .looks a { transition: none; } }

/* Home and the text pages, for when this is the design of the whole site. */
.cardboard .grid { gap: 30px 16px; padding-top: 12px; }
.cardboard .card { position: relative; background: #FFFFFF; padding: 7px 7px 12px; box-shadow: var(--lift); color: var(--ink); text-align: center; }
.cardboard .card:nth-child(3n+1) { transform: rotate(-2deg); }
.cardboard .card:nth-child(3n+2) { transform: rotate(1.5deg); }
.cardboard .card:nth-child(3n) { transform: rotate(-0.8deg); }
.cardboard .pic { border-radius: 0; background: var(--canvas); }
.cardboard .card b { font: 400 1.3rem/1.05 var(--serif); }
.cardboard .card span:last-child { font: var(--caps); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cardboard .intro .sub { font: italic 400 1.2rem/1.35 var(--serif); color: var(--ink); }
.cardboard .text { background: #FFFFFF; padding: 28px 22px 24px; box-shadow: var(--lift); }

/* The footer, and her kind of signature under it. */
.cardboard .foot { color: var(--ink); border-top: 1px solid rgba(31, 28, 26, 0.45); }
.cardboard .foot a { color: var(--ink); }
.cardboard .foot .signature { margin-top: 6px; text-align: center; font: 400 2rem/1 var(--script); color: var(--ink); mix-blend-mode: multiply; }

/* A wide screen has room on both sides of the page: the other looks hang there, pinned at their own spot and
   tilt (--r, --jx and --jy come from build.mjs, the same for a look on every build), instead of below. */
@media (min-width: 1200px) {
  .cardboard .pinboard { --w: clamp(140px, calc(50vw - 480px), 230px); height: 0; margin-top: -22px; }
  .cardboard .pinboard h2 { position: absolute; left: calc(-1 * var(--w) - 28px); top: 108px; font: 400 2.2rem/1 var(--script); }
  .cardboard .pinboard h2::after { transform: rotate(150deg); margin: 0 0 -24px 6px; }
  .cardboard .pinboard .looks { display: block; padding: 0; }
  .cardboard .pinboard .looks a { position: absolute; width: var(--w); max-width: none; transform: rotate(var(--r)); }
  .cardboard .pinboard .looks a:hover { transform: translateY(-4px) rotate(0deg); }
  .cardboard .pinboard .looks a:nth-child(odd) { left: calc(-1 * var(--w) - 40px + var(--jx)); }
  .cardboard .pinboard .looks a:nth-child(even) { right: calc(-1 * var(--w) - 40px + var(--jx)); }
  .cardboard .pinboard .looks a:nth-child(1) { top: calc(186px + var(--jy)); }
  .cardboard .pinboard .looks a:nth-child(2) { top: calc(250px + var(--jy)); }
  .cardboard .pinboard .looks a:nth-child(3) { top: calc(660px + var(--jy)); }
  .cardboard .pinboard .looks a:nth-child(4) { top: calc(730px + var(--jy)); }
  .cardboard .pinboard .looks a:nth-child(5) { top: calc(1130px + var(--jy)); }
  .cardboard .pinboard .looks a:nth-child(6) { top: calc(1200px + var(--jy)); }
}

/* The same page on the site's own neutral ground instead of the board (Joris, 2026-09-21: "de achtergrond terug
   naar gewoon de neutrale kleur", test page /test/gifts-for-him-v2/). Everything stays, except what does not work
   on a light ground: white gel-pen stars would vanish, so they are her grey confetti (as on her gift collage),
   and the note card, the colour of the ground itself, becomes white paper with a light grey grid. */
.cardboard.neutral { --chalk: #BDB5AC; background: var(--ground); }
.cardboard.neutral::before { display: none; }   /* nothing to blend: theme-color is this same ground */
.cardboard.neutral .board-doodles svg, .cardboard.neutral .confetti svg { opacity: 1; }
.cardboard.neutral .notecard { background-color: #FFFFFF; background-image: linear-gradient(#EEEAE4 1px, transparent 1px), linear-gradient(90deg, #EEEAE4 1px, transparent 1px); }

/* Options (Joris, 2026-09-21, the v3 test page). Each is a class on the body, so any of them can go on any
   cardboard page: "options" in site.config.json, for every page or per preview. */
/* sage-pins: the push pins in sage, the same 3D render in another colour (same size and needle point). */
.cardboard.sage-pins .pinned::before, .cardboard.sage-pins .pinboard .looks a::before, .cardboard.sage-pins .card::before { background-image: url(/assets/img/pin-3d-sage.webp); }
/* pink-dots: the numbers on the collage in pink, the number itself in ink so it stays readable. */
.cardboard.pink-dots .hero a { background: #F2A7B7; color: var(--ink); }
/* straight-looks: the other looks pinned straight and in line, in rows on a phone and in columns beside the page. */
.cardboard.straight-looks .pinboard .looks a { transform: none; }
.cardboard.straight-looks .pinboard .looks a:hover { transform: translateY(-3px); }
@media (max-width: 1199px) {
  .cardboard.straight-looks .pinboard .looks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .cardboard.straight-looks .pinboard .looks a, .cardboard.straight-looks .pinboard .looks a:nth-child(n) { width: auto; max-width: none; margin: 0; }
}
@media (min-width: 700px) and (max-width: 1199px) { .cardboard.straight-looks .pinboard .looks { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) {
  .cardboard.straight-looks .pinboard .looks a:nth-child(odd) { left: calc(-1 * var(--w) - 40px); }
  .cardboard.straight-looks .pinboard .looks a:nth-child(even) { right: calc(-1 * var(--w) - 40px); }
  .cardboard.straight-looks .pinboard .looks a:nth-child(1), .cardboard.straight-looks .pinboard .looks a:nth-child(2) { top: 200px; }
  .cardboard.straight-looks .pinboard .looks a:nth-child(3), .cardboard.straight-looks .pinboard .looks a:nth-child(4) { top: 620px; }
  .cardboard.straight-looks .pinboard .looks a:nth-child(5), .cardboard.straight-looks .pinboard .looks a:nth-child(6) { top: 1040px; }
}
/* straight-looks on the home page too: the looks hang straight there, in line, like on the look pages. */
.cardboard.straight-looks .card:nth-child(n) { transform: none; }

/* Bounties (2026-09-21): Amazon offers that pay per sign-up, as paper tickets. A stub in sage with a fine-liner icon,
   a perforated edge with a notch at each end, her thin capitals for the label and her serif for the line; the whole
   ticket is the link, so it is easy to tap. "top" is compact, between the tape and the pin, in the first screen;
   "pin" sits right under the collage; "end" after the list. The paper is masked for the notches, so its shadow is a
   drop-shadow filter on the link around it. */
.cardboard .bounties { gap: 20px; }
.cardboard .bounties.top { width: 100%; max-width: 520px; margin: 2px auto 10px; }
.cardboard .bounties.pin, .cardboard .bounties.end { padding-top: 4px; }
@media (min-width: 700px) { .cardboard .bounties.pin, .cardboard .bounties.end { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px 18px; } }
.cardboard .bounty { position: relative; filter: drop-shadow(0 1px 1px rgba(40, 22, 5, 0.2)) drop-shadow(0 7px 9px rgba(40, 22, 5, 0.2)); transform: rotate(-0.7deg); transition: transform 0.2s ease; }
.cardboard .bounty:nth-child(2n) { transform: rotate(0.6deg); }
.cardboard .bounty:hover { transform: translateY(-2px) rotate(0deg); }
.cardboard .b-paper { --nx: 64px; grid-template-columns: var(--nx) 1fr auto; border: 0; border-radius: 3px; background: #FFFFFF;
  -webkit-mask: radial-gradient(circle 8px at var(--nx) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at var(--nx) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 8px at var(--nx) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 8px at var(--nx) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat; }
.cardboard .b-stub { background: var(--dots), var(--sage); border-right: 2px dashed rgba(31, 28, 26, 0.3); }
.cardboard .b-stub svg { width: 30px; height: 30px; color: var(--ink); }
.cardboard .b-body { gap: 5px; padding: 16px 18px; }
.cardboard .b-label { font: var(--caps); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cardboard .b-head { font: 400 1.6rem/1.05 var(--serif); color: var(--ink); text-wrap: balance; }
.cardboard .b-text { font: italic 400 1.06rem/1.35 var(--serif); color: var(--soft); }
.cardboard .bounty .buy { align-self: flex-start; margin-top: 8px; padding: 12px 18px; }
/* The compact ticket: the label and the heading, and a round arrow instead of a button. */
.cardboard .bounty.compact .b-paper { --nx: 52px; }
.cardboard .bounty.compact .b-stub svg { width: 25px; height: 25px; }
.cardboard .bounty.compact .b-body { justify-content: center; gap: 3px; padding: 11px 6px 11px 14px; }
.cardboard .bounty.compact .b-head { font-size: 1.2rem; line-height: 1.1; }
/* "side": a print among the other looks, pinned like them (Joris, 2026-09-21: the ticket on top was "too much focus
   on being commercial"; on desktop "on the side ... along the links to the other pages", on a phone "below
   somewhere"). It is a child of .pinboard .looks, so the board's own rules place it: beside the page from 1200px,
   in their grid below the list on a tablet or phone. The print frame and the pin come from those rules too; here
   only its inside: the sage stub as its picture, a perforation, the label, the line and the button. */
.cardboard .pinboard .bounty.side { filter: none; }
.cardboard .bounty.side .b-paper { display: flex; flex-direction: column; background: transparent; border-radius: 0; -webkit-mask: none; mask: none; }
.cardboard .bounty.side .b-stub { min-height: 88px; border-right: 0; border-bottom: 2px dashed rgba(31, 28, 26, 0.3); }
.cardboard .bounty.side .b-stub svg { width: 34px; height: 34px; }
.cardboard .bounty.side .b-body { align-items: center; gap: 5px; padding: 12px 4px 4px; }
.cardboard .bounty.side .b-label { font-size: 0.6rem; letter-spacing: 0.14em; }
.cardboard .bounty.side .b-head { font: italic 400 1.18rem/1.15 var(--serif); }
.cardboard .bounty.side .buy { align-self: stretch; margin-top: 8px; padding: 10px 6px; font-size: 0.58rem; }
.cardboard .b-go { padding: 0 14px 0 4px; }
.cardboard .b-go svg { box-sizing: content-box; width: 18px; height: 18px; padding: 9px; border-radius: 50%; background: var(--ink); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .cardboard .bounty { transition: none; } }