/* Jetsun Momo — Idee 2 · Marktplakat.
   Screen-printed market posters in three inks (blue, fluorescent pink, yellow) on cream paper, pasted
   onto a wall one over the other as you scroll. Pictures are printed as halftone dots, headlines in two
   inks that slip out of register while you scroll and settle back. */

@font-face { font-family: "Big Shoulders"; font-weight: 100 900; font-display: swap; src: url("assets/fonts/big-shoulders-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url("assets/fonts/instrument-sans-normal.woff2") format("woff2"); }

:root {
  --wall: #ddd1b8;
  --paper: #f5eedd;
  --blue: #2a56c6;
  --blue-ink: #1f3f96;   /* text: the blue ink laid down twice, so small type stays crisp */
  --pink: #ff4aa8;
  --yellow: #ffe01a;
  --gutter: clamp(16px, 2.6vw, 40px);
  --bar: 46px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.35, .6, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--wall) var(--grain); color: var(--blue-ink); font-family: "Instrument Sans", system-ui, sans-serif; font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, canvas { display: block; }
::selection { background: var(--yellow); color: var(--blue-ink); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 56px; z-index: 100; background: var(--blue-ink); color: var(--paper); padding: 10px 16px; }

/* ---------- the header strip: one band of blue ink ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); background: var(--blue-ink); color: var(--paper); }
.bar__name { font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: 28px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; text-decoration: none; }
.bar__nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-weight: 600; font-size: 16px; }
.bar__nav a { text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) 0 100% / 0 3px no-repeat; transition: background-size .35s var(--ease); } /* an underline that prints in from the left */
.bar__nav a:hover { background-size: 100% 3px; }

/* ---------- posters: pasted one over the other ---------- */
main { padding-top: var(--bar); }
.poster { position: sticky; top: var(--stick, var(--bar)); padding: 12px clamp(8px, 1.2vw, 16px); }
.poster__sheet {
  position: relative; min-height: calc(100svh - var(--bar) - 24px); padding: clamp(18px, 2.6vw, 40px); overflow: hidden;
  background: var(--paper) var(--grain); border-radius: 3px; rotate: var(--tilt, 0deg);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .18), 0 18px 40px -18px rgba(60, 40, 10, .35); /* paper on a wall */
}
.poster:nth-child(2) { --tilt: .5deg; }
.poster:nth-child(3) { --tilt: -.4deg; }
.poster:nth-child(4) { --tilt: .35deg; }
.poster:nth-child(5) { --tilt: -.3deg; }
/* the poster underneath dims a little as the next one slides over it */
.poster__sheet::after { content: ""; position: absolute; inset: 0; background: #3b2c10; opacity: var(--under, 0); pointer-events: none; }

.meta { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.meta span:nth-child(2) { color: var(--pink); }

/* printed in two inks: the pink pass sits on top of the blue and slips out of register while you scroll */
.print { position: relative; z-index: 2; font-family: "Big Shoulders", sans-serif; font-weight: 900; text-transform: uppercase; line-height: .8; letter-spacing: -.005em; color: var(--blue); }
.print::before { content: attr(data-text); position: absolute; inset: 0; color: var(--pink); mix-blend-mode: multiply; transform: translate(var(--mx, 3px), var(--my, -2px)); pointer-events: none; }
.print-s { position: relative; font-family: "Big Shoulders", sans-serif; font-weight: 800; text-transform: uppercase; line-height: .9; color: var(--blue); }
.print-s::before { content: attr(data-text); position: absolute; inset: 0; color: var(--pink); mix-blend-mode: multiply; transform: translate(calc(var(--mx, 3px) * .5), calc(var(--my, -2px) * .5)); pointer-events: none; }
.print--sec { margin-top: clamp(18px, 2.4vw, 36px); font-size: clamp(64px, 10.5vw, 184px); line-height: .86; }

.tone { mix-blend-mode: multiply; touch-action: pan-y; }

/* registration marks and the colour strip at the edge of the sheet */
.marks { position: absolute; inset: 10px; pointer-events: none; z-index: 1; }
.cross { position: absolute; width: 22px; height: 22px; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--blue-ink); }
.cross::before { left: 50%; top: 0; width: 1.5px; height: 100%; translate: -50% 0; } /* taste-skill-ignore: a printer's registration mark */
.cross::after { top: 50%; left: 0; height: 1.5px; width: 100%; translate: 0 -50%; } /* taste-skill-ignore: a printer's registration mark */
.cross { border: 1.5px solid var(--blue-ink); border-radius: 50%; } /* taste-skill-ignore: a printer's registration mark */
.cross--tl { left: 0; top: 0; } .cross--tr { right: 0; top: 0; } .cross--bl { left: 0; bottom: 0; } .cross--br { right: 0; bottom: 0; }
.strip { position: absolute; right: clamp(18px, 2.6vw, 40px); bottom: clamp(18px, 2.6vw, 40px); z-index: 3; display: flex; }
.strip i { width: 22px; height: 22px; mix-blend-mode: multiply; }
.strip i:nth-child(1) { background: var(--yellow); } .strip i:nth-child(2) { background: var(--pink); } .strip i:nth-child(3) { background: var(--blue); }
.strip i:nth-child(4) { background: var(--pink); box-shadow: inset 0 0 0 22px rgba(255, 224, 26, .9); } .strip i:nth-child(5) { background: var(--blue); box-shadow: inset 0 0 0 22px rgba(255, 74, 168, .7); } .strip i:nth-child(6) { background: var(--blue); box-shadow: inset 0 0 0 22px rgba(255, 224, 26, .7); }

/* ---------- Poster 1 ---------- */
.poster--1 .poster__sheet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 16px; }
.poster--1 .meta { grid-column: 1 / -1; grid-row: 1; }
.print--hero { grid-column: 1 / -1; grid-row: 3; align-self: end; font-size: min(28.4vw, 56svh); margin: 0 -.02em -.06em; white-space: nowrap; }
.sun { position: absolute; right: 7%; top: 9%; width: min(44vw, 64svh); aspect-ratio: 1; border-radius: 50%; background: var(--yellow); mix-blend-mode: multiply; z-index: 0; }
.tone--hero { position: absolute; left: 25%; top: 6%; width: min(46vw, 72svh); aspect-ratio: 1; z-index: 1; }
.hero__claim { grid-column: 1 / 5; grid-row: 2; align-self: start; margin-top: clamp(28px, 6svh, 72px); font-size: clamp(34px, 3.6vw, 60px); max-width: 9ch; z-index: 2; }
.hero__price { position: absolute; right: calc(7% + min(44vw, 64svh) * .14); top: calc(9% + min(44vw, 64svh) * .2); z-index: 2; display: grid; justify-items: end; text-align: right; }
.hero__n { font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: clamp(30px, 3vw, 48px); line-height: 1; text-transform: uppercase; }
.hero__chf { font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: clamp(64px, 7.4vw, 124px); line-height: .85; color: var(--pink); mix-blend-mode: multiply; }
.hero__kinds { margin-top: 6px; font-weight: 600; font-size: 17px; }

/* ---------- Poster 2 ---------- */
.pick { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(18px, 2vw, 28px); }
.pick button {
  min-height: 52px; padding: 0 22px; border: 3px solid var(--blue-ink); border-radius: 0; background: transparent; color: var(--blue-ink); cursor: pointer;
  font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase;
  transition: background-color .2s, color .2s, transform .3s var(--spring);
}
.pick button:hover { transform: translateY(-2px) rotate(-1deg); }
.pick button:active { transform: translateY(1px) scale(.97); }
.pick button[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--paper); }
/* one screen: title on top, the momo on the left, the switch and the word list on the right */
.poster--2 .poster__sheet { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr; column-gap: clamp(20px, 3vw, 48px); align-content: start; }
.poster--2 .meta, .poster--2 .print--sec { grid-column: 1 / -1; }
.poster--2 .print--sec { font-size: clamp(64px, 8.4vw, 150px); }
.poster--2 .pick { grid-column: 2; grid-row: 3; align-self: end; }
.inside { display: contents; }
.inside__pic { grid-column: 1; grid-row: 3 / 5; align-self: center; margin-top: clamp(10px, 1.4vw, 20px); }
.words { grid-column: 2; grid-row: 4; align-self: center; margin-top: 20px; }
.pop { width: min(100%, calc((100svh - var(--bar) - 340px) * 1.3)); }
/* after the first poster the food is shown as it is. The momo sits on the paper, cracks open,
   and its ingredients jump out onto an arc above it (the idea from the sticker site). */
.pop { position: relative; display: block; aspect-ratio: 1.3; margin: 0 auto; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pop:focus-visible { outline-offset: 6px; }
.pop__whole { position: absolute; left: 50%; bottom: 4%; width: 52%; transform: translate(-50%, 0); filter: drop-shadow(4px 14px 16px rgba(60, 40, 10, .25)); pointer-events: none; }
.halves { position: absolute; left: 12%; right: 12%; bottom: 0; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.halves img { width: 50%; height: auto; object-fit: contain; filter: drop-shadow(4px 12px 14px rgba(60, 40, 10, .22)); }
.halves img:first-child { rotate: -6deg; translate: 4% 0; }
.halves img:last-child { rotate: 6deg; translate: -4% 0; }
.pop__ings { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pop__ings img { position: absolute; width: var(--ing, 22%); aspect-ratio: 1; object-fit: contain; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); filter: drop-shadow(3px 9px 10px rgba(60, 40, 10, .25)); }
/* closed: only the whole momo; open: the halves and the ingredients */
.pop:not(.is-open) .halves, .pop:not(.is-open) .pop__ings { opacity: 0; }
.pop.is-open .pop__whole { opacity: 0; }
/* steam, printed as dots like everything else on the wall */
.pop__steam { position: absolute; left: 0; right: 0; bottom: 30%; height: 0; z-index: 1; pointer-events: none; }
.pop__steam i { position: absolute; bottom: 0; width: 26%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: multiply;
  background: radial-gradient(circle, var(--blue) 1.6px, transparent 2.2px) 0 0 / 9px 9px;
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent); mask: radial-gradient(closest-side, #000 20%, transparent); }
.pop__hint { position: absolute; right: 0; top: 0; z-index: 3; padding: 4px 10px; background: var(--yellow); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; rotate: 3deg; opacity: 0; transition: opacity .25s, translate .3s var(--spring); }
.pop.is-open:hover .pop__hint, .pop.is-open:focus-visible .pop__hint { opacity: 1; translate: 0 -4px; }
.inside__pic figcaption { max-width: 40ch; margin-top: 10px; font-size: 19px; }
.words { display: grid; gap: 2px; counter-reset: w; }
.words li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; counter-increment: w; }
.words li::before { content: counter(w, decimal-leading-zero); font-weight: 600; font-size: 15px; letter-spacing: .06em; }
.words b { font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: clamp(40px, 4.7vw, 84px); line-height: .9; text-transform: uppercase; color: var(--blue); }
.words li:nth-child(even) b { color: var(--pink); mix-blend-mode: multiply; }
.words small { font-size: 16px; font-weight: 500; }
.words.is-printing li { animation: reprint .7s var(--ease) both; animation-delay: calc(var(--d, 0ms) + var(--k) * 110ms); }
.words li { cursor: default; }
/* the clip reaches above the line so umlauts (Rösti, Käse) are never cut off */
@keyframes reprint { 0% { clip-path: inset(-30% 100% -10% 0); translate: 8px -3px; } 60% { translate: -2px 1px; } 100% { clip-path: inset(-30% -10% -10% 0); translate: 0 0; } }

/* ---------- Poster 3 ---------- */
.menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: clamp(20px, 3vw, 44px); }
.menu__group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; margin: 26px 0 6px; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
.menu__group::after { content: ""; flex: 1; border-top: 3px dotted var(--blue-ink); translate: 0 -4px; } /* taste-skill-ignore: a dotted leader, as printed on a price list */
.item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 0; }
.item img { width: 120px; height: 100px; object-fit: contain; filter: drop-shadow(3px 8px 10px rgba(60, 40, 10, .2)); transition: transform .4s var(--spring); }
.item:hover img { transform: scale(1.14) rotate(-4deg); }
.item h3 { font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: clamp(30px, 2.6vw, 44px); line-height: .95; text-transform: uppercase; }
.item p { font-size: 17px; line-height: 1.35; }
.item__portion { font-weight: 600; }
.item .item__price { font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: clamp(48px, 4.6vw, 80px); line-height: .9; color: var(--pink); mix-blend-mode: multiply; white-space: nowrap; }
.item .item__price--soon { font-size: clamp(30px, 2.6vw, 44px); color: var(--blue); }
.menu__note { margin-top: 18px; font-weight: 600; }

/* ---------- Poster 4 ---------- */
/* one screen: the title over the photo on the left, the next dates and the request button on the right */
.poster--4 .poster__sheet { display: flex; flex-direction: column; }
.truck { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px); row-gap: 14px; margin-top: clamp(14px, 1.6vw, 22px); }
.truck__title { grid-column: 2; grid-row: 1; margin-top: 0; font-size: clamp(48px, 5.2vw, 96px); }
/* the truck photo, taped onto the poster; it takes the full height on the left, so the whole poster fits the screen */
.snap { grid-column: 1; grid-row: 1 / 3; position: relative; align-self: center; justify-self: center; margin: 0; rotate: -1.2deg; width: min(100%, calc((100svh - var(--bar) - 170px) * 4 / 3)); }
.snap img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 10px solid #fff; box-shadow: 0 2px 3px rgba(60, 40, 10, .15), 0 14px 30px -12px rgba(60, 40, 10, .4); }
.tape { position: absolute; top: -16px; width: 120px; height: 34px; background: var(--pink); opacity: .78; mix-blend-mode: multiply; }
.tape--l { left: -26px; rotate: -32deg; }
.tape--r { right: -26px; rotate: 30deg; }
.truck__words { position: absolute; left: 18px; bottom: -14px; padding: 6px 12px 4px; background: var(--yellow); rotate: 2deg; font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: clamp(20px, 1.8vw, 30px); line-height: 1; text-transform: uppercase; color: var(--blue-ink); }

/* the calendar: one torn-off leaf per date */
.cal { grid-column: 2; grid-row: 2; align-self: start; display: grid; gap: 12px; }
.cal__head { display: flex; align-items: baseline; gap: 12px; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); }
.cal__head::after { content: ""; flex: 1; border-top: 3px dotted var(--blue-ink); translate: 0 -4px; } /* taste-skill-ignore: a dotted leader, as on the price list */
.cal__list { display: grid; gap: 8px; }
.leaf { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 6px 14px 6px 6px; background: #fffaf0; box-shadow: 0 1px 2px rgba(60, 40, 10, .14), 0 8px 18px -10px rgba(60, 40, 10, .35); transition: translate .3s var(--spring), rotate .3s var(--spring); }
.leaf:nth-child(odd) { rotate: -.6deg; } .leaf:nth-child(even) { rotate: .5deg; }
.leaf:hover { translate: -4px -2px; rotate: 0deg; }
.leaf__day { display: grid; justify-items: center; overflow: hidden; border: 2px solid var(--blue-ink); text-align: center; line-height: 1; }
.leaf__day span { align-self: stretch; padding: 3px 0 2px; background: var(--blue-ink); color: var(--paper); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.leaf__day b { font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: 32px; line-height: .95; padding-top: 3px; color: var(--pink); mix-blend-mode: multiply; }
.leaf__day small { padding-bottom: 4px; font-weight: 600; font-size: 13px; }
.leaf__what { display: grid; line-height: 1.2; }
.leaf__what b { font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: clamp(24px, 1.9vw, 30px); line-height: 1; text-transform: uppercase; }
.leaf__what span { font-size: 16px; }
.leaf__time { font-weight: 600; font-size: 15px; white-space: nowrap; }
/* the weekly market: a yellow leaf with "Fr+Sa" instead of a date */
.leaf--weekly { background: var(--yellow); }
.leaf--weekly .leaf__day { background: var(--paper); }
.leaf--weekly .leaf__day b { font-size: 24px; padding: 6px 2px 2px; letter-spacing: -.01em; }
.leaf--closed { opacity: .62; }
.leaf--closed .leaf__day b { color: var(--blue-ink); }
.leaf--empty { display: block; padding: 18px; font-weight: 600; }
.cal__note { font-size: 16px; max-width: 44ch; }
.cal .ask { justify-self: start; }
/* short laptop screens: three dates, so the poster still fits */
@media (max-height: 820px) and (min-width: 761px) { .leaf:nth-child(n + 4) { display: none; } .cal__note { display: none; } }

/* the big request button: a pink block that presses like a stamp */
.ask { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 24px; border: 0; background: var(--pink); color: var(--paper); cursor: pointer;
  font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: clamp(26px, 2.1vw, 34px); line-height: 1; text-transform: uppercase;
  box-shadow: 5px 5px 0 var(--blue-ink); transition: translate .2s var(--spring), box-shadow .2s var(--spring); }
.ask span { transition: translate .3s var(--spring); }
.ask:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--blue-ink); }
.ask:hover span { translate: 6px 0; }
.ask:active { translate: 4px 4px; box-shadow: 1px 1px 0 var(--blue-ink); }

/* ---------- the request slip ---------- */
.slip { width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 3px; background: var(--paper) var(--grain); color: var(--blue-ink); box-shadow: 0 30px 80px -20px rgba(30, 20, 5, .6); overscroll-behavior: contain; }
.slip::backdrop { background: rgba(31, 63, 150, .55); backdrop-filter: blur(3px); }
.slip[open] { animation: slipIn .5s var(--spring); }
.slip[open]::backdrop { animation: fadeIn .3s ease; }
@keyframes slipIn { from { opacity: 0; translate: 0 40px; rotate: -2deg; } }
@keyframes fadeIn { from { opacity: 0; } }
.slip__form { position: relative; display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px); }
.slip__x { position: absolute; right: 10px; top: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--blue-ink); font-size: 34px; line-height: 1; cursor: pointer; }
.slip .meta { padding-right: 44px; }
.slip__title { font-size: clamp(46px, 7vw, 76px); line-height: .86; }
.slip__lede { font-size: 17px; max-width: 52ch; }
.slip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.f { display: grid; gap: 4px; }
.f--wide { grid-column: 1 / -1; }
.f span { font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid var(--blue-ink); border-radius: 0; background: #fffaf0; color: var(--blue-ink); font: 500 17px/1.3 "Instrument Sans", system-ui, sans-serif; }
.f textarea { resize: vertical; }
.f :focus { outline: 3px solid var(--pink); outline-offset: 0; }
.ask--full { width: 100%; margin-top: 4px; }
.slip__small { font-size: 14px; }

/* ---------- Poster 5: the flyer with tear-off strips ---------- */
.poster--5 .poster__sheet { display: flex; flex-direction: column; }
.flyer__lede { max-width: 52ch; margin-top: 20px; font-size: 20px; }
.tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: auto calc(-1 * clamp(18px, 2.6vw, 40px)) 0; padding-top: 40px; }
.tabs li { border-left: 2px dashed var(--blue-ink); } /* taste-skill-ignore: the cut line between tear-off strips */
.tabs li:first-child { border-left: 0; }
/* each strip hangs from its top edge; the words run up the strip, as on a real notice */
.tab { display: flex; justify-content: center; min-height: 230px; padding: 18px 8px; text-decoration: none; transform-origin: 50% 0; transition: translate .3s var(--spring), rotate .3s var(--spring); }
.tab__in { display: flex; align-items: center; gap: 8px; writing-mode: vertical-rl; rotate: 180deg; }
.tab__in span { font-family: "Big Shoulders", sans-serif; font-weight: 900; font-size: clamp(30px, 2.8vw, 46px); line-height: 1; text-transform: uppercase; }
.tab__in small { font-weight: 600; font-size: 15px; }
.tab:hover { translate: 0 6px; rotate: -2deg; }
.tabs li:nth-child(odd) .tab__in span { color: var(--pink); }
.tab.is-torn { animation: tear .75s var(--ease) forwards; }
@keyframes tear { 25% { rotate: -9deg; translate: 0 14px; } 100% { rotate: 24deg; translate: 60px 110vh; opacity: 0; } }
.legal { margin-top: 18px; font-size: 15px; }

/* ---------- Impressum and Datenschutz: one long poster sheet ---------- */
.doc { padding: calc(var(--bar) + 12px) clamp(8px, 1.2vw, 16px) 24px; }
.doc__sheet { max-width: 920px; margin: 0 auto; padding: clamp(22px, 4vw, 56px); background: var(--paper) var(--grain); border-radius: 3px; rotate: -.3deg; box-shadow: 0 1px 2px rgba(60, 40, 10, .18), 0 18px 40px -18px rgba(60, 40, 10, .35); }
.doc__title { margin: clamp(14px, 2vw, 24px) 0 clamp(18px, 2.4vw, 32px); font-size: clamp(60px, 10vw, 128px); line-height: .86; }
.doc__lede { font-size: 21px; font-weight: 500; max-width: 54ch; }
.doc h2 { margin: 30px 0 6px; font-family: "Big Shoulders", sans-serif; font-weight: 800; font-size: clamp(28px, 3vw, 38px); line-height: 1; text-transform: uppercase; color: var(--blue); }
.doc p { max-width: 64ch; margin-top: 8px; }
.doc a:not(.ask) { text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc__back { margin-top: 40px !important; }
.doc .ask { text-decoration: none; }
mark.todo { background: var(--yellow); color: var(--blue-ink); padding: 0 4px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .bar__nav { display: none; }
  .poster--1 .poster__sheet { grid-template-rows: auto auto 1fr auto; }
  .print--hero { font-size: 26.5vw; grid-row: 4; }
  .marks, .meta span:nth-child(2) { display: none; }
  .meta { font-size: 14px; }
  .sun { width: 74vw; right: -12%; top: 13%; }
  .tone--hero { width: 82vw; left: 6%; top: 20%; }
  .hero__claim { grid-column: 1 / -1; grid-row: 2; font-size: 34px; margin-top: 18px; }
  .hero__price { right: 6%; top: auto; bottom: calc(37vw + 30px); }
  .hero__chf { font-size: 64px; }
  .strip { display: none; }
  .menu { grid-template-columns: minmax(0, 1fr); }
  .poster--2 .poster__sheet { display: block; }
  .poster--2 .print--sec { font-size: 64px; }
  .inside { display: block; margin-top: 8px; }
  .inside__pic { margin-top: 0; }
  .words { margin-top: 12px; }
  .pop { width: 100%; }
  .truck { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .truck__title, .snap, .cal { grid-column: 1; grid-row: auto; }
  .truck__title { font-size: 54px; }
  .snap { width: 100%; justify-self: stretch; }
  .snap img { aspect-ratio: 16 / 10; border-width: 7px; }
  .cal { gap: 10px; margin-top: 8px; }
  .cal__list { gap: 8px; }
  .leaf { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding-right: 10px; }
  .leaf__day b { font-size: 28px; }
  .leaf__day span, .leaf__day small { font-size: 12px; }
  .leaf--weekly .leaf__day b { font-size: 18px; padding-top: 5px; }
  .leaf--weekly .leaf__day small { font-size: 11px; }
  .leaf__time { font-size: 13px; }
  .leaf__what b { font-size: 22px; }
  .leaf__what span { font-size: 14px; }
  .ask { width: 100%; min-height: 58px; font-size: 26px; }
  .slip__grid { grid-template-columns: minmax(0, 1fr); }
  .item { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; }
  .item img { width: 76px; height: 68px; }
  .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tab { min-height: 190px; }
  .tab__in span { font-size: 26px; }
  .tab__in small { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .print::before, .print-s::before { transform: translate(3px, -2px) !important; }
  .words.is-printing li, .tab.is-torn { animation: none; }
  .pick button, .item canvas, .tab, .bar__nav a, .leaf, .ask, .ask span { transition: none; }
  .slip[open], .slip[open]::backdrop { animation: none; }
}