/* ============================================================
   CAFÉ FUNDSTÜCK — one stylesheet, no build step.

   DESIGN WORLD: the page is a corkboard.

   The café is furnished entirely from flea-market finds and everything
   carries an inventory number, so the site is not "a page about a
   collection" — it is the board the collector actually pins things to.
   Index cards, a kraft inventory tag, a carbon-copy receipt, a ledger
   sheet, found photographs behind photo corners, masking tape, pins.

   Rules that keep this out of scrapbook kitsch:
   · every element is a real printed object with a paper weight and an edge
   · one light source, from above — exactly two shadow tokens, never more
   · cards rotate 0.6–2.6°, never more; only tape sits at a real tape angle
   · the underlying grid is rigorous (12 columns, one --u unit); things sit
     off it on purpose, not by accident
   · no emoji, no clip-art, no rounded-everything

   TYPE — one job each:
   Alfa Slab One  → the name, register titles, prices. Printed-poster ink.
   Special Elite  → every number, label, tag, caption, form marker. Typed.
   Newsreader     → anything you actually read in sentences.
   ============================================================ */

/* ---------- 1. Fonts ---------- */
@font-face {
  font-family: "AlfaSlab";
  src: url("fonts/alfaslab-latin.woff2?v=a67b5351") format("woff2");
  font-weight: 100 900;   /* single weight, mapped to every request so the
                             browser never synthesises a fake bold */
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Elite";
  src: url("fonts/specialelite-latin.woff2?v=95d46c7f") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-var-latin.woff2?v=f94a697b") format("woff2-variations"),
       url("fonts/newsreader-var-latin.woff2?v=f94a697b") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: optional;
}
/* font-display: optional, not swap — the deliberate CLS decision from the
   first build, kept. All three faces are preloaded from this folder, so the
   real font is ready inside the 100 ms block period and paints first. If it
   ever is not, the browser keeps the fallback for that view instead of
   reflowing. The overrides below are derived from the real font tables
   (Alfa Slab upem 1000, asc 1036 / desc 333, avg lc advance .608;
   Special Elite upem 2048, asc 1440 / desc 608, avg lc advance .577;
   Newsreader upem 2000, asc 1470 / desc 530, avg lc advance .463) and each
   ascent/descent is divided by its own size-adjust, so a swap repaints
   without moving a line. */
@font-face {
  font-family: "AlfaSlab-fb";
  /* Georgia first, not Rockwell: Rockwell only ships with Office, so anchoring
     the size-adjust on it would leave most machines mis-scaled */
  src: local("Georgia"), local("Liberation Serif"), local("Times New Roman");
  size-adjust: 117.5%;
  ascent-override: 88.2%;
  descent-override: 28.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Elite-fb";
  src: local("Courier New"), local("Liberation Mono"), local("Consolas");
  size-adjust: 96%;
  ascent-override: 73.2%;
  descent-override: 30.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader-fb";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 93%;
  ascent-override: 79%;
  descent-override: 28.5%;
  line-gap-override: 0%;
}

/* ---------- 2. The material palette ----------
   This demo is the colour-forward one. The colours are not a brand palette;
   they are the materials on the board. Papers, tapes, inks, pin heads. */
:root {
  /* board */
  --cork:        #b9976e;
  --cork-2:      #ab8760;
  --cork-3:      #9a744f;
  --cork-deep:   #7d5b3a;
  --batten:      #6b4a2f;
  --batten-2:    #533722;

  /* paper stocks */
  --p-index:     #f6efe2;   /* index card */
  --p-index-2:   #ece1cd;   /* index card, older */
  --p-kraft:     #cfa87b;   /* kraft tag */
  --p-kraft-2:   #b98f60;
  --p-carbon:    #f0d9d3;   /* pink carbon copy */
  --p-ledger:    #e6ecd8;   /* accounting green */
  --p-graph:     #dee7ea;   /* graph paper */
  --p-legal:     #f2e5b0;   /* yellow legal pad */
  --p-news:      #ded6c6;   /* newsprint */
  --p-blot-dk:   #3c5348;   /* dark desk blotter */
  --p-blot-md:   #7d8f6a;   /* olive blotter */

  /* inks */
  --i-type:      #2b2622;   /* typewriter ribbon */
  --i-pencil:    #57504a;   /* pencil */
  --i-red:       #8f2f28;   /* stamp pad, oxblood */
  --i-red-2:     #b0463a;
  --i-navy:      #2b3f6b;   /* second stamp pad */
  --i-green:     #2f5d43;   /* ledger ink */
  --i-violet:    #6a4b7a;   /* mimeograph */
  --i-fade:      #8a7a68;   /* faded label */

  /* tapes */
  --t-mask:      rgba(224, 197, 143, .78);
  --t-mask-e:    rgba(196, 165, 110, .8);
  --t-red:       rgba(201, 105, 92, .74);
  --t-teal:      rgba(111, 155, 150, .74);
  --t-mustard:   rgba(211, 166, 60, .7);
  --t-blue:      rgba(95, 127, 168, .68);

  /* pin heads */
  --pin-red:     #c0392b;
  --pin-yellow:  #dfa72b;
  --pin-blue:    #31588a;
  --pin-green:   #3d7a54;
  --pin-bone:    #eee6d6;

  /* roles */
  --bg:    var(--cork);
  --fg:    var(--i-type);
  --muted: var(--i-pencil);
  --acc:   var(--i-red);
  --focus: #1d2a4a;

  --display: "AlfaSlab", "AlfaSlab-fb", Rockwell, Georgia, serif;
  --type:    "Elite", "Elite-fb", "Courier New", monospace;
  --body:    "Newsreader", "Newsreader-fb", Georgia, serif;

  /* one unit backs every measurement on the board */
  --u: clamp(9px, 1.05vw, 14px);
  --gut: clamp(16px, 3.2vw, 46px);
  --maxw: 1360px;
  --head-h: 58px;

  /* exactly two shadow tokens. One light, from above. */
  --lift-1: 0 2px 4px -1px rgba(58, 36, 16, .30);
  --lift-2: 0 9px 18px -7px rgba(58, 36, 16, .58), 0 2px 3px -1px rgba(58, 36, 16, .32);

  /* paper grain, generated — no raster, no request */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  --grain-cork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62 .38' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='210' height='210' filter='url(%23c)' opacity='.55'/%3E%3C/svg%3E");
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23m)' opacity='.19'/%3E%3C/svg%3E");
}
@media (min-width: 820px) { :root { --head-h: 66px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--cork-2); }
body {
  margin: 0;
  color: var(--fg);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  /* the board: mottled cork, lit slightly from above-left */
  background-color: var(--cork);
  background-image:
    radial-gradient(120% 62% at 22% -8%, rgba(255, 244, 224, .3), rgba(255, 244, 224, 0) 62%),
    radial-gradient(90% 55% at 88% 106%, rgba(80, 52, 26, .3), rgba(80, 52, 26, 0) 60%),
    /* cork granulate: two very faint fleck fields at non-harmonic pitches,
       under a real fractal-noise layer that does most of the work */
    radial-gradient(ellipse 3.4px 2.2px at 13px 11px, rgba(104, 70, 36, .085), rgba(104, 70, 36, 0) 70%),
    radial-gradient(ellipse 2.6px 3.8px at 61px 43px, rgba(232, 203, 162, .11), rgba(232, 203, 162, 0) 70%),
    var(--grain-cork);
  background-size: auto, auto, 43px 59px, 97px 79px, 210px 210px;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.05; font-weight: 400; }
a { color: inherit; }
::selection { background: var(--i-red); color: var(--p-index); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: calc(var(--u) * 5) calc(var(--u) * 5); }
[id] { scroll-margin-top: calc(var(--head-h) + 20px); }
.anchor, .anchor-inline { height: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gut); top: -80px; z-index: 200;
  background: var(--i-type); color: var(--p-index);
  font-family: var(--type); font-size: .95rem;
  padding: 12px 20px; text-decoration: none;
  transition: top .16s ease;
}
.skip:focus { top: 10px; }

/* ---------- 4. Physical objects ----------
   Everything on the board is built from three primitives: a sheet (paper
   with a grain and a cut edge), a pin, and a strip of tape. */

.sheet {
  position: relative;
  background-color: var(--p-index);
  background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 2);
}
.sheet--index  { background-color: var(--p-index); }
.sheet--aged   { background-color: var(--p-index-2); }
.sheet--kraft  { background-color: var(--p-kraft); color: #3a2a17; }
.sheet--carbon { background-color: var(--p-carbon); }
.sheet--ledger { background-color: var(--p-ledger); }
.sheet--graph  { background-color: var(--p-graph); }
.sheet--legal  { background-color: var(--p-legal); }
.sheet--news   { background-color: var(--p-news); }
/* the thin cut edge every real sheet has */
.sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 62, 34, .16);
}

/* pins */
.pin {
  position: absolute; z-index: 6; width: 19px; height: 19px; border-radius: 50%;
  background-image:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0 15%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 62% 76%, rgba(0, 0, 0, .35) 0 22%, rgba(0, 0, 0, 0) 60%);
  background-color: var(--pin, var(--pin-red));
  box-shadow: 0 3px 5px -1px rgba(58, 36, 16, .6);
}
.pin--red { --pin: var(--pin-red); }
.pin--yellow { --pin: var(--pin-yellow); }
.pin--blue { --pin: var(--pin-blue); }
.pin--green { --pin: var(--pin-green); }
.pin--bone { --pin: var(--pin-bone); }
.pin-tl { left: calc(var(--u) * 1.1); top: calc(var(--u) * -.7); }
.pin-tr { right: calc(var(--u) * 1.1); top: calc(var(--u) * -.7); }
.pin-tc { left: 50%; margin-left: -9px; top: calc(var(--u) * -.7); }

/* tape */
.tape {
  position: absolute; z-index: 5; pointer-events: none;
  width: var(--tw, 104px); height: 27px;
  background-color: var(--t-mask);
  background-image: var(--grain-fine);
  box-shadow: 0 2px 4px -2px rgba(58, 36, 16, .5);
  clip-path: polygon(0 7%, 3% 0, 52% 5%, 97% 1%, 100% 8%, 100% 93%, 96% 100%, 48% 95%, 4% 99%, 0 92%);
}
.tape--red { background-color: var(--t-red); }
.tape--teal { background-color: var(--t-teal); }
.tape--mustard { background-color: var(--t-mustard); }
.tape--blue { background-color: var(--t-blue); }
.tape--edge { background-color: var(--t-mask-e); }
/* a strip laid diagonally across a corner is how tape actually behaves */
/* --tape-out keeps the diagonal corner strips inside the viewport on small
   screens; the rotated bounding box reaches roughly 26px past the offset */
.tape-nw { left: var(--tape-out, -22px); top: 14px; transform: rotate(-45deg); }
.tape-ne { right: var(--tape-out, -22px); top: 14px; transform: rotate(45deg); }
.tape-sw { left: var(--tape-out, -22px); bottom: 14px; transform: rotate(45deg); }
.tape-se { right: var(--tape-out, -22px); bottom: 14px; transform: rotate(-45deg); }
/* narrow screens: a diagonal corner strip would land on the text, so the tape
   moves to the card's top and bottom edge instead — still tape, still outside
   the content, and it cannot push the layout past the viewport */
@media (max-width: 760px) {
  .tape-nw { left: 9%;  top: -12px;    transform: rotate(-3.2deg); }
  .tape-ne { right: 9%; top: -12px;    transform: rotate(3deg); }
  .tape-sw { left: 11%; bottom: -12px; transform: rotate(-2.4deg); }
  .tape-se { right: 11%; bottom: -12px; transform: rotate(2.6deg); }
}
.tape-top { left: 50%; top: -13px; margin-left: calc(var(--tw, 104px) / -2); transform: rotate(-2.4deg); }
.tape-top-l { left: 8%; top: -12px; transform: rotate(-3.4deg); }
.tape-top-r { right: 9%; top: -12px; transform: rotate(2.8deg); }

/* photographs: printed, then pinned. Border is uneven like a real print. */
.photo { position: relative; display: block; background: #fbf8f1; padding: 10px 10px 11px; box-shadow: var(--lift-2); }
/* the wide bottom border of a polaroid, sized to hold the written caption */
.photo--polaroid { padding: 12px 12px 62px; }
@media (min-width: 900px) { .photo--polaroid { padding-bottom: 46px; } }
.photo > .shot { position: relative; overflow: hidden; background: var(--p-index-2); }
.photo .shot > img { width: 100%; height: 100%; object-fit: cover; }
.shot-32 { aspect-ratio: 3 / 2; }
.shot-54 { aspect-ratio: 5 / 4; }
.shot-45 { aspect-ratio: 4 / 5; }
.shot-11 { aspect-ratio: 1 / 1; }
.photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(90, 62, 34, .14);
}
.photo-cap {
  font-family: var(--type); font-size: .78rem; line-height: 1.35;
  color: var(--i-pencil); margin: 0;
}
.photo--polaroid .photo-cap {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  color: #4a4038;
}
figure { margin: 0; }

/* the typed inventory number, everywhere */
.nr {
  font-family: var(--type); font-size: .82em; letter-spacing: .01em;
  color: var(--i-red); font-variant-numeric: tabular-nums;
  margin-right: .45em;
}

/* a rubber stamp: ink sits *on* the paper, so it multiplies */
.stampmark {
  font-family: var(--display); text-transform: uppercase;
  color: var(--i-red); border: 3px double var(--i-red);
  padding: .3em .55em .26em; display: inline-block;
  font-size: .8rem; letter-spacing: .04em; line-height: 1;
  mix-blend-mode: multiply; opacity: .88;
}
.stampmark--navy { color: var(--i-navy); border-color: var(--i-navy); }

/* ---------- 5. Shared type ---------- */
.kicker {
  font-family: var(--type); font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--i-red); margin: 0 0 .85em;
}
.lead { font-size: 1.06em; max-width: 40ch; }
.small { font-size: .92rem; color: var(--muted); max-width: 46ch; }
h2 { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.3rem); letter-spacing: -.005em; }
h3 { font-family: var(--display); font-size: clamp(1.02rem, 1.7vw, 1.22rem); }

/* the stamped call to action */
.btn {
  display: inline-block; position: relative;
  font-family: var(--display); font-size: 1rem; line-height: 1.15;
  color: var(--i-red); background: transparent;
  border: 2px solid var(--i-red);
  box-shadow: inset 0 0 0 2px var(--p-index), inset 0 0 0 4px var(--i-red);
  padding: .72em 1.15em .66em; text-decoration: none;
  text-transform: uppercase; letter-spacing: .02em;
  cursor: pointer; transform: rotate(-1.2deg);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover { background: var(--i-red); color: var(--p-index); box-shadow: inset 0 0 0 2px var(--p-index), inset 0 0 0 4px var(--i-red); }
.btn-sm { font-size: .8rem; padding: .52em .8em .48em; box-shadow: inset 0 0 0 1.5px var(--p-index), inset 0 0 0 3px var(--i-red); transform: rotate(-.8deg); }
.btn-big { font-size: 1.14rem; padding: .8em 1.35em .74em; }
.btn-light { color: var(--p-index); border-color: var(--p-index); box-shadow: inset 0 0 0 2px var(--p-blot-dk), inset 0 0 0 4px var(--p-index); }
.btn-light:hover { background: var(--p-index); color: var(--p-blot-dk); box-shadow: inset 0 0 0 2px var(--p-blot-dk), inset 0 0 0 4px var(--p-index); }
.btn-plain {
  font-family: var(--type); font-size: .95rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--i-navy); border-bottom: 1.5px solid var(--i-navy);
}
.btn-plain:hover { color: var(--i-red); border-color: var(--i-red); }

.link-arrow {
  display: inline-block; font-family: var(--type); font-size: .95rem;
  text-decoration: none; color: var(--i-navy);
  border-bottom: 1.5px solid var(--i-navy); padding-bottom: 1px;
  transition: color .16s ease, border-color .16s ease;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--i-red); border-color: var(--i-red); }
.link-arrow.sm { font-size: .86rem; }
.link-arrow.light { color: var(--p-legal); border-color: var(--p-legal); }
.link-arrow.light:hover { color: #fff; border-color: #fff; }

/* ---------- 6. Demo notice — a stapled kraft strip ---------- */
.demo-note {
  position: relative; z-index: 60;
  background-color: var(--p-kraft);
  background-image: var(--grain-fine);
  color: #33220f;
  box-shadow: var(--lift-1);
}
.demo-note-in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 9px var(--gut) 10px;
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
}
.demo-note p { margin: 0; font-family: var(--type); font-size: .78rem; line-height: 1.4; }
.demo-note strong { font-weight: 400; color: #5c1a15; letter-spacing: .05em; text-transform: uppercase; }
.demo-note a { color: #33220f; text-underline-offset: 3px; }
.demo-x {
  flex: 0 0 auto; background: none; border: 1.5px solid rgba(51, 34, 15, .45);
  color: #33220f; width: 28px; height: 28px; cursor: pointer;
  display: grid; place-items: center;
}
.demo-x:hover { color: var(--i-red); border-color: var(--i-red); }
/* torn lower edge */
.demo-note::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background-color: var(--p-kraft);
  clip-path: polygon(0 0, 3% 100%, 7% 20%, 12% 90%, 17% 30%, 23% 100%, 29% 25%, 35% 85%, 41% 15%, 47% 95%, 53% 25%, 59% 90%, 65% 20%, 71% 100%, 77% 30%, 83% 85%, 89% 15%, 95% 95%, 100% 20%, 100% 0);
}

/* ---------- 7. Header — the wooden batten across the top of the board ---------- */
.head {
  position: sticky; top: 0; z-index: 55;
  background-color: var(--batten);
  background-image:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .045) 0 2px, rgba(0, 0, 0, .05) 2px 5px, rgba(255, 255, 255, 0) 5px 11px),
    linear-gradient(180deg, rgba(255, 231, 200, .16), rgba(0, 0, 0, .22));
  color: #f3e6d2;
  box-shadow: 0 5px 12px -6px rgba(40, 24, 10, .7);
}
.head-in {
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gut);
  min-height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.brand { text-decoration: none; display: flex; align-items: baseline; gap: .6em; line-height: 1; }
.brand-name { font-family: var(--display); font-size: clamp(1.02rem, 2.1vw, 1.24rem); letter-spacing: -.01em; }
.brand-sub { font-family: var(--type); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #e2cfb4; }
.nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 22px); }
.nav > a { font-family: var(--type); font-size: .88rem; text-decoration: none; }
.nav > a:not(.btn) { border-bottom: 1.5px solid transparent; padding-bottom: 2px; color: #f3e6d2; }
.nav > a:not(.btn):hover { border-bottom-color: var(--p-legal); }
.head .btn { color: var(--p-legal); border-color: var(--p-legal); box-shadow: inset 0 0 0 1.5px var(--batten), inset 0 0 0 3px var(--p-legal); }
.head .btn:hover { background: var(--p-legal); color: var(--batten-2); }
.head .is-here { background: var(--p-legal); color: var(--batten-2); }
@media (max-width: 639px) {
  .nav > a:not(.btn) { display: none; }
  .brand-sub { display: none; }
}

/* === Language switcher ===
   Host for the one dropdown js/i18n.js injects (button + listbox). The box is
   reserved here — min-width/min-height match the injected control — so filling
   it after load cannot shift the header by a pixel. The four --wdm-lang-*
   variables are the only thing the control reads from us: they pull it into
   the batten's dark wood with the yellow legal-pad edge the header already
   uses for its button. Logical properties only (margin-inline) so the HE
   edition mirrors without a second ruleset. */
.lang {
  display: flex; align-items: center;
  min-width: 47px; min-height: 30px;
  margin-inline-start: clamp(4px, 1vw, 12px);
  --wdm-lang-font: var(--type);
  --wdm-lang-bg: var(--batten-2);
  --wdm-lang-fg: #f3e6d2;
  --wdm-lang-border: var(--p-legal);
}

/* ============================================================
   8. THE BOARD (hero)
   12 rigorous columns. Everything sits off them on purpose.
   ============================================================ */
.board {
  position: relative;
  max-width: var(--maxw); margin-inline: auto;
  padding: calc(var(--u) * 3.4) var(--gut) calc(var(--u) * 4.4);
  overflow-x: clip;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--u) * 1.6);
}
.board-grid > * { min-width: 0; }

/* the found photograph */
.b-photo { grid-column: 1 / 8; grid-row: 1 / 4; transform: rotate(-1.4deg); z-index: 2; align-self: start; }
/* the name — a printed label pinned across the top of the photograph */
.b-name  { grid-column: 4 / 13; grid-row: 1 / 2; transform: rotate(1.1deg); z-index: 7; align-self: start; margin-top: calc(var(--u) * .6); }
/* the typed index card that explains the place */
.b-lead  { grid-column: 8 / 13; grid-row: 2 / 4; transform: rotate(-.9deg); z-index: 4; align-self: start; margin-top: calc(var(--u) * 1.4); }
/* the torn ticket with the line */
.b-ticket { grid-column: 1 / 6; grid-row: 4 / 5; transform: rotate(-1.9deg); z-index: 5; align-self: start; }
/* kraft inventory tag, object 001 */
.b-tag   { grid-column: 6 / 9; grid-row: 4 / 5; transform: rotate(2.4deg); z-index: 6; align-self: start; }
/* the pencil memo carrying the live availability line */
.b-memo  { grid-column: 9 / 13; grid-row: 4 / 5; transform: rotate(1.4deg); z-index: 5; align-self: start; }

.b-name-in { padding: calc(var(--u) * 1.5) calc(var(--u) * 2.2) calc(var(--u) * 1.5); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6.4vw, 4.5rem);
  line-height: .94; letter-spacing: -.015em;
  margin: 0; color: var(--i-type);
  text-wrap: balance;
}
.b-name-sub {
  font-family: var(--type); font-size: clamp(.72rem, 1.2vw, .88rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--i-red);
  margin: 0 0 .75em;
}
.b-name-foot {
  font-family: var(--type); font-size: .8rem; color: var(--i-pencil);
  margin: .9em 0 0; padding-top: .6em; border-top: 1px solid rgba(90, 62, 34, .25);
  display: flex; flex-wrap: wrap; gap: .4em 1.2em; align-items: center;
}
/* the inventory range, stamped into the empty right end of the label */
.b-name .stampmark {
  position: absolute; right: calc(var(--u) * 2.4); top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  font-size: clamp(.8rem, 1.5vw, 1.15rem); letter-spacing: .06em;
}
@media (max-width: 899px) {
  .b-name .stampmark { position: static; transform: rotate(-3deg); margin-top: .9em; display: inline-block; }
}

.b-ticket-in { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); }
.b-ticket .sheet { clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 5.2% 92%, 6.4% 84%, 5% 76%, 6.2% 68%, 5.2% 60%, 6.4% 52%, 5% 44%, 6.2% 36%, 5.2% 28%, 6.4% 20%, 5% 12%, 6.2% 4%, 0 0); }
.b-ticket-line { font-family: var(--display); font-size: clamp(1.12rem, 2.3vw, 1.62rem); line-height: 1.1; margin: 0; }
.b-ticket-line em { font-style: normal; color: var(--i-red); }
.b-ticket-x { font-family: var(--type); font-size: .76rem; color: var(--i-pencil); margin: .7em 0 0; }

/* kraft tag with a punched hole and a string */
.tag {
  position: relative; background-color: var(--p-kraft); background-image: var(--grain-fine);
  color: #3a2a17; box-shadow: var(--lift-2);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 1.5) calc(var(--u) * 1.4);
  clip-path: polygon(0 9%, 50% 0, 100% 9%, 100% 100%, 0 100%);
}
.tag::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--u) * .95); margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cork-3);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .4);
}
.tag-nr { font-family: var(--display); font-size: 1.7rem; line-height: 1; margin: 0 0 .25em; color: var(--i-red); }
.tag-n  { font-family: var(--type); font-size: .92rem; margin: 0 0 .3em; }
.tag-x  { font-family: var(--type); font-size: .74rem; line-height: 1.4; color: #4a3517; margin: 0; }

/* pencil memo */
.memo-in { padding: calc(var(--u) * 1.5) calc(var(--u) * 1.6); }
.memo-h { font-family: var(--type); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--i-green); margin: 0 0 .55em; }
.live { font-family: var(--type); font-size: .88rem; line-height: 1.5; margin: 0 0 1em; color: var(--i-type); }
.live b { font-weight: 400; color: var(--i-red); border-bottom: 1.5px solid var(--i-red); }
.b-memo .btn { margin-top: .2em; }

.b-lead-in { padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); }
.b-lead .lead { font-size: 1rem; max-width: none; margin: 0 0 .9em; }
.b-lead-h { font-family: var(--type); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--i-navy); margin: 0 0 .7em; }

/* the found photograph, captioned as what it is — the note is a typed slip
   taped to the bottom-left corner of the print, not floating text on cork */
.b-photo .photo-cap { margin-top: .55em; }
.b-photo figcaption {
  position: relative; z-index: 4;
  width: min(100%, 40ch);
  margin: calc(var(--u) * .6) 0 0 calc(var(--u) * 2.2);
  transform: rotate(1.6deg);
  background-color: var(--p-news); background-image: var(--grain-fine);
  box-shadow: var(--lift-1);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3);
}
.b-photo-note {
  font-family: var(--type); font-size: .76rem; line-height: 1.5; color: #4a4038;
  margin: 0;
}

/* mobile: the board stacks, but everything stays a pinned object */
@media (max-width: 899px) {
  .board-grid { display: flex; flex-direction: column; gap: calc(var(--u) * 3.4); }
  .b-name { order: 1; margin-top: 0; transform: rotate(.8deg); }
  .b-photo { order: 2; transform: rotate(-1deg); }
  .b-ticket { order: 3; margin-top: 0; transform: rotate(-1.4deg); }
  .b-lead { order: 4; margin-top: 0; transform: rotate(.9deg); }
  .b-tag { order: 5; transform: rotate(1.8deg); align-self: flex-start; width: min(62%, 260px); }
  .b-memo { order: 6; transform: rotate(-1.1deg); }
  .board { padding-block: calc(var(--u) * 2.6) calc(var(--u) * 3.4); }
}

/* ============================================================
   9. DIE SAMMLUNG — the ledger sheet
   ============================================================ */
.coll {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 4);
  align-items: start;
}
@media (min-width: 940px) {
  .coll { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: calc(var(--u) * 3.4); }
}
.coll-text { transform: rotate(-.7deg); }
.coll-text-in { padding: calc(var(--u) * 2) calc(var(--u) * 2.2); }
.coll-text h2 { margin-bottom: .5em; }
.coll-text p:last-of-type { margin-bottom: 0; }
.sig {
  font-family: var(--type); font-size: .95rem; color: var(--i-navy);
  margin-top: 1.4em; padding-top: .6em; border-top: 1px solid rgba(90, 62, 34, .3);
  display: inline-block; transform: rotate(-1.3deg);
}

.ledger-box { position: relative; transform: rotate(.6deg); }
.ledger-in { padding: calc(var(--u) * 2.2) calc(var(--u) * 1.8) calc(var(--u) * 1.6); }
/* the coffee ring a real ledger picks up */
.ledger-box::after {
  content: ""; position: absolute; right: calc(var(--u) * 3.4); top: calc(var(--u) * 1.6);
  width: 84px; height: 80px; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 7px solid rgba(122, 74, 30, .17);
  border-left-color: rgba(122, 74, 30, .09);
  border-bottom-width: 9px; border-bottom-color: rgba(122, 74, 30, .22);
  background: radial-gradient(closest-side, rgba(122, 74, 30, .05), rgba(122, 74, 30, 0) 92%);
  transform: rotate(11deg) skewX(-4deg);
}
.ledger-scroll { overflow-x: auto; overscroll-behavior-x: contain; max-width: 100%; }
.ledger-scroll:focus-visible { outline-offset: 4px; }
.ledger { width: 100%; min-width: 31rem; border-collapse: collapse; }
.ledger caption {
  text-align: left; font-family: var(--type); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--i-green);
  padding-bottom: .8em;
}
.ledger th, .ledger td {
  text-align: left; vertical-align: baseline;
  padding: .58em .8em .54em 0;
  border-bottom: 1px solid rgba(47, 93, 67, .28);
  font-family: var(--type); font-size: .88rem;
}
.ledger thead th {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--i-green); border-bottom: 2px solid var(--i-green); padding-bottom: .45em;
}
.ledger .c-nr { width: 3.4rem; color: var(--i-red); font-variant-numeric: tabular-nums; }
.ledger .c-pr { text-align: right; padding-right: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* accounting green-bar */
.ledger tbody tr:nth-child(odd) { background: rgba(47, 93, 67, .07); }
.ledger tbody tr:hover td, .ledger tbody tr:hover th { background: rgba(143, 47, 40, .09); }
.ledger-foot { font-family: var(--type); font-size: .78rem; color: var(--i-pencil); margin: 1em 0 0; }

/* ============================================================
   10. THE REGISTERS — the catalogue as index cards
   ============================================================ */
.reg { position: relative; padding-block: calc(var(--u) * 3.2) calc(var(--u) * 4.4); overflow-x: clip; }
/* each register lies on its own material */
.reg-blotter { position: relative; }
.reg-blotter::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--gut) * -.4); right: calc(var(--gut) * -.4);
  top: calc(var(--u) * -1.4); bottom: calc(var(--u) * -1.4);
  background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
}
.reg-alt .reg-blotter::before { background-color: var(--p-blot-md); transform: rotate(-.35deg); }
.reg-dark .reg-blotter::before { background-color: var(--p-blot-dk); transform: rotate(.3deg); }
.reg-blotter > * { position: relative; z-index: 1; }

/* the register divider: a kraft label, taped down, with the range typed on it */
.reg-head-in {
  position: relative;
  display: inline-block;
  margin: 0 0 calc(var(--u) * 3);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 2.2) calc(var(--u) * 1.2);
  background-color: var(--p-kraft); background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
  transform: rotate(-1.1deg);
  max-width: 100%;
}
.reg-head-in::before {
  content: ""; position: absolute; z-index: 2; left: 12%; top: -12px;
  width: 96px; height: 24px; transform: rotate(-3deg);
  background-color: var(--t-mask); background-image: var(--grain-fine);
  clip-path: polygon(0 7%, 3% 0, 52% 5%, 97% 1%, 100% 8%, 100% 93%, 96% 100%, 48% 95%, 4% 99%, 0 92%);
}
.reg-head h2 { margin: 0; font-size: clamp(1.45rem, 3.2vw, 2.2rem); color: #33220f; }
.reg-rom {
  display: block; font-family: var(--type); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; color: #5c1a15;
  margin-bottom: .35em;
}
.reg-meta { font-family: var(--type); margin: .45em 0 0; font-size: .8rem; color: #4a3517; }
.reg-foot { font-family: var(--type); font-size: .82rem; color: var(--i-pencil); margin: calc(var(--u) * 2.4) 0 0; max-width: 58ch; }
.reg-dark .reg-foot { color: #d8d2c2; }

/* the cards. Rigorous grid, deterministic off-grid jitter. */
.entries {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 318px), 1fr));
  gap: calc(var(--u) * 3) calc(var(--u) * 2.4);
  align-items: start;
}
.entry {
  position: relative;
  background-color: var(--p-index); background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 1.6) calc(var(--u) * 1.6);
  transform: rotate(-1deg);
}
.entry::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 62, 34, .16);
}
/* pre-seeded offsets: the scatter is designed, not random */
.entry:nth-child(6n+1) { transform: rotate(-1.1deg); margin-top: 0; }
.entry:nth-child(6n+2) { transform: rotate(1.4deg);  margin-top: calc(var(--u) * 1.6); }
.entry:nth-child(6n+3) { transform: rotate(-.6deg);  margin-top: calc(var(--u) * .6); }
.entry:nth-child(6n+4) { transform: rotate(1deg);    margin-top: calc(var(--u) * 2.2); }
.entry:nth-child(6n+5) { transform: rotate(-1.8deg); margin-top: calc(var(--u) * .3); }
.entry:nth-child(6n+6) { transform: rotate(.8deg);   margin-top: calc(var(--u) * 1.9); }

.reg-light .entry { background-color: var(--p-index); }
.reg-alt .entry:nth-child(2n) { background-color: var(--p-carbon); }
.reg-alt .entry:nth-child(2n+1) { background-color: var(--p-legal); }
.reg-dark .entry:nth-child(2n) { background-color: var(--p-graph); }
.reg-dark .entry:nth-child(2n+1) { background-color: var(--p-index-2); }
/* the red rule an index card is printed with */
.reg-light .entry { border-top: 2px solid rgba(143, 47, 40, .3); }
.reg-alt .entry { border-top: 2px solid rgba(47, 93, 67, .32); }
.reg-dark .entry { border-top: 2px solid rgba(43, 63, 107, .32); }

.entry-no {
  font-family: var(--type); font-size: .86rem; letter-spacing: .06em;
  color: var(--i-red); font-variant-numeric: tabular-nums;
  margin: 0 0 .5em;
}
.entry-no::before { content: "Nr. "; color: var(--i-pencil); }
.entry-main { min-width: 0; }
.entry-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4em;
  font-family: var(--display); font-size: clamp(1rem, 1.9vw, 1.14rem);
  line-height: 1.18; margin: 0 0 .5em;
}
.leader {
  flex: 1 1 1.5rem; min-width: 1rem; align-self: baseline;
  border-bottom: 2px dotted rgba(90, 62, 34, .5);
  transform: translateY(-.22em);
  transition: border-color .2s ease;
}
.entry-price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--i-red); }
.entry-note { margin: 0; color: var(--i-pencil); font-size: .93rem; line-height: 1.55; }
.entry .link-arrow { margin-top: .8em; }
.entry:hover .leader, .entry:focus-within .leader { border-bottom-color: var(--i-red); }

/* a photograph taped onto the card */
.plate { margin: 0 0 calc(var(--u) * 1.3); }
.plate .photo { transform: rotate(1.6deg); }
.entry:nth-child(2n) .plate .photo { transform: rotate(-1.7deg); }
.plate .photo-cap { margin-top: .45em; }

/* ============================================================
   11. THE BOOKING SLIP BAND
   ============================================================ */
.band { padding-block: calc(var(--u) * 3.6); }
.band-in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 2.6); align-items: start;
}
@media (min-width: 940px) {
  .band-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: calc(var(--u) * 3.4); align-items: center; }
}
.band-slip { position: relative; transform: rotate(-.8deg); }
.band-slip-in { padding: calc(var(--u) * 2.2) calc(var(--u) * 2.4); }
.band-slip h2 { margin-bottom: .45em; }
.band-slip .lead { margin-bottom: 1.4em; }
.band-note { position: relative; transform: rotate(1.5deg); }
.band-note-in { padding: calc(var(--u) * 1.8) calc(var(--u) * 1.8); }
.band-live { font-family: var(--type); font-size: .86rem; line-height: 1.5; margin: 0 0 1.1em; }
.band-live b { font-weight: 400; color: var(--i-red); border-bottom: 1.5px solid var(--i-red); }
.band-note-x {
  font-family: var(--type); font-size: .78rem; line-height: 1.5; color: var(--i-pencil);
  margin: 0; padding-top: .8em; border-top: 1px dotted rgba(43, 63, 107, .4);
}
.band-note-x a { color: var(--i-navy); }

/* ============================================================
   12. DAS HAUS — address label + punch card
   ============================================================ */
.haus { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 3.4); align-items: start; }
@media (min-width: 900px) { .haus { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); } }
.haus > * { min-width: 0; }
.haus-a { transform: rotate(.7deg); }
.haus-b { transform: rotate(-1.1deg); }
.haus-in { padding: calc(var(--u) * 2) calc(var(--u) * 2.2); }
.adr { font-style: normal; font-family: var(--type); font-size: 1rem; line-height: 1.6; margin: 0 0 .9em; }
.tel {
  font-family: var(--display); font-size: clamp(1.25rem, 2.8vw, 1.7rem);
  text-decoration: none; color: var(--i-red);
  border-bottom: 2px solid var(--i-red); padding-bottom: 1px;
}
.tel:hover { color: var(--i-type); border-color: var(--i-type); }
.hrs-h { font-family: var(--type); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--i-navy); margin: 0 0 1em; }
.hrs { margin: 0 0 1.2em; border-top: 2px solid var(--i-navy); }
.hrs > div { display: flex; justify-content: space-between; gap: 14px; padding: .5em 0; border-bottom: 1px solid rgba(43, 63, 107, .25); }
.hrs dt { font-family: var(--type); font-size: .9rem; }
.hrs dd { margin: 0; font-family: var(--type); font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrs .is-closed dt { color: var(--i-pencil); }
.hrs .is-closed dd { color: var(--i-red); }
.haus .small { font-family: var(--body); }

/* The studio speaking, pinned into the café's own paper: the number and the
   address line belong to Wild Digital Moments, not to the fiction. Typed on
   the same typewriter, ruled off with the same dotted line as the band note,
   so it reads as a slip laid on the card rather than a new component. */
.wdm-block {
  margin-top: calc(var(--u) * 1.6);
  padding-top: calc(var(--u) * 1.4);
  border-top: 1px dashed rgba(90, 62, 34, .45);
}
.wdm-x {
  font-family: var(--type); font-size: .78rem; line-height: 1.55;
  color: var(--i-pencil); margin: 0 0 .9em; max-width: 46ch;
}
.wdm-x strong { color: var(--i-type); }
.wdm-tel { margin: 0 0 .7em; }

/* ============================================================
   13. STUDIO — deliberately not part of the fiction.
   A studio compliments card, cool ink, blue tape, own material.
   ============================================================ */
.studio { padding-block: calc(var(--u) * 4) calc(var(--u) * 4.6); }
.studio-card {
  position: relative;
  background-color: var(--p-blot-dk); background-image: var(--grain-fine);
  color: #eae4d5; box-shadow: var(--lift-2);
  transform: rotate(-.6deg);
}
.studio-in {
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.6);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 2.2);
}
@media (min-width: 900px) { .studio-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; } }
.studio-in h2 { color: #fbf5e6; max-width: 20ch; }
.studio-in p { color: #cfc9b8; max-width: 54ch; margin: 0; }
.studio .kicker { color: var(--p-legal); }
.studio-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; align-content: start; }

/* ---------- 14. Footer — the back of the board ---------- */
.foot { background-color: var(--batten-2); background-image: var(--grain-fine); color: #c9b599; }
.foot-in { padding-block: 26px 34px; }
.foot p { margin: 0 0 .6em; font-family: var(--type); font-size: .8rem; line-height: 1.5; }
.foot a { color: #f0e2cb; text-underline-offset: 3px; }
.foot a:hover { color: var(--p-legal); }
.foot-note { color: #c0aa8b; max-width: 66ch; }

/* ============================================================
   RESERVATION PAGE — Reservierungsschein Nr. 400
   A physical booking slip, filled in on the board, with the running
   summary as the carbon copy underneath it.
   ============================================================ */
.res-head { padding-block: calc(var(--u) * 3) calc(var(--u) * 2); }
.res-head-card { position: relative; transform: rotate(-.8deg); max-width: 44rem; }
.res-head-in { padding: calc(var(--u) * 2) calc(var(--u) * 2.2); }
.res-head h1 { font-family: var(--display); font-size: clamp(1.7rem, 4.4vw, 2.7rem); line-height: 1.02; margin: 0 0 .4em; }
.res-form-nr {
  font-family: var(--type); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--i-red); margin: 0 0 .8em;
}
.res-head .lead { margin-bottom: 0; }

.res-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * 3.2); padding-bottom: calc(var(--u) * 5); align-items: start;
}
.res-grid > * { min-width: 0; }
@media (min-width: 1040px) {
  .res-grid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: calc(var(--u) * 4); }
  .recall { grid-column: 1 / -1; }
  .res-form { grid-column: 1; }
  .beleg { grid-column: 2; position: sticky; top: calc(var(--head-h) + 20px); }
  .confirm { grid-column: 1 / -1; }
}

/* an existing reservation: a note clipped to the top of the slip */
.recall { position: relative; transform: rotate(.7deg); }
.recall-in { padding: calc(var(--u) * 1.8) calc(var(--u) * 2); border-top: 2px solid var(--i-red); }
.recall-t { font-family: var(--display); font-size: 1.1rem; margin: 0 0 .3em; }
.recall-d { font-family: var(--type); margin: 0 0 1em; color: var(--i-pencil); font-size: .88rem; }
.recall-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }

/* the slip itself */
.res-form { margin: 0; position: relative; }
.res-form-paper {
  background-color: var(--p-index); background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 2.4) calc(var(--u) * 2.8);
  transform: rotate(-.35deg);
}
.fs {
  border: 0; margin: 0 0 calc(var(--u) * 3); padding: 0; min-width: 0;
  border-top: 1px solid rgba(90, 62, 34, .3);
}
.fs:first-of-type { border-top: 0; }
.fs legend {
  font-family: var(--display); font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  line-height: 1.15; padding: .9em 0 .6em; float: left; width: 100%;
}
.fs legend + * { clear: both; }
/* the field number, stamped into the margin */
.step {
  display: inline-block; margin-right: .55em;
  font-family: var(--type); font-size: .72em; color: var(--p-index);
  background: var(--i-red); padding: .16em .42em .1em;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  vertical-align: 12%;
}
.opt { font-family: var(--type); font-size: .6em; color: var(--i-pencil); letter-spacing: .04em; }
.fs-note { font-family: var(--type); font-size: .8rem; line-height: 1.5; color: var(--i-pencil); margin: 0 0 1em; max-width: 58ch; }
.fs-note a { text-underline-offset: 3px; color: var(--i-navy); }
.fs > .fs-note:last-of-type { margin-bottom: 0; }
/* a correction written in red pen next to the field */
.err { margin: .6em 0 0; font-family: var(--type); font-size: .86rem; color: var(--i-red); }
.err::before { content: "\21B3\00A0"; }
.err:empty { display: none; }
.err:empty::before { content: none; }

/* 401 · party — pressed number keys */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 1.1em; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center;
  min-width: 3rem; height: 3rem; padding-inline: .5rem;
  border: 1.5px solid rgba(90, 62, 34, .45); background: rgba(255, 255, 255, .5);
  font-family: var(--type); font-size: 1.05rem; font-variant-numeric: tabular-nums;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chip input:checked + span { background: var(--i-red); border-color: var(--i-red); color: var(--p-index); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip:hover input:not(:checked) + span { border-color: var(--i-red); }

/* 402 · day strip — a row of tear-off day tickets */
.daystrip-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; margin-bottom: 1em; }
.daystrip { display: flex; gap: 7px; min-width: max-content; min-height: 5.9rem; }
.daystrip .nojs-note { align-self: center; min-width: 18rem; }
.day { position: relative; display: block; flex: 0 0 auto; }
.day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.day input:disabled { cursor: not-allowed; }
.day-b {
  display: block; width: 4.6rem; padding: 8px 5px 10px; text-align: center;
  border: 1.5px solid rgba(90, 62, 34, .45); background: rgba(255, 255, 255, .5);
  font-family: var(--type);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.day-w { display: block; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.day-d { display: block; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.day-m { display: block; font-size: .7rem; color: var(--i-pencil); }
.day input:checked + .day-b { background: var(--i-red); border-color: var(--i-red); color: var(--p-index); }
.day input:checked + .day-b .day-m { color: #f0cfc9; }
.day input:focus-visible + .day-b { outline: 3px solid var(--focus); outline-offset: 2px; }
.day:hover input:not(:checked):not(:disabled) + .day-b { border-color: var(--i-red); }
.day input:disabled + .day-b { background: transparent; border-style: dashed; border-color: rgba(90, 62, 34, .3); color: var(--i-fade); }
.day input:disabled + .day-b .day-d { text-decoration: line-through; }

/* 403 · slots */
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.1rem, 1fr)); gap: 7px; margin-bottom: 1em; min-height: 3rem; }
.slot { position: relative; display: block; }
.slot input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.slot input:disabled { cursor: not-allowed; }
.slot-b {
  display: block; padding: .62em .2em .58em; text-align: center;
  border: 1.5px solid rgba(90, 62, 34, .45); background: rgba(255, 255, 255, .5);
  font-family: var(--type); font-size: .96rem; font-variant-numeric: tabular-nums;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.slot input:checked + .slot-b { background: var(--i-red); border-color: var(--i-red); color: var(--p-index); }
.slot input:focus-visible + .slot-b { outline: 3px solid var(--focus); outline-offset: 2px; }
.slot:hover input:not(:checked):not(:disabled) + .slot-b { border-color: var(--i-red); }
.slot input:disabled + .slot-b {
  background: transparent; border-style: dashed; border-color: rgba(90, 62, 34, .3);
  color: var(--i-fade); text-decoration: line-through;
}
.slot-empty { font-family: var(--type); font-size: .9rem; color: var(--i-pencil); margin: 0; }

/* 404 · zones — ticked boxes on a form */
.zones { border-bottom: 1px solid rgba(90, 62, 34, .3); margin-bottom: 1em; }
.zone { position: relative; display: block; }
.zone input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zone input:disabled { cursor: not-allowed; }
.zone-b { display: block; position: relative; padding: 14px 6px 14px 38px; border-top: 1px solid rgba(90, 62, 34, .3); }
.zone-b::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 18px; height: 18px; border: 1.5px solid rgba(90, 62, 34, .5);
  background: rgba(255, 255, 255, .55);
  transition: border-color .16s ease;
}
/* a pen tick, not a radio dot */
.zone input:checked + .zone-b::after {
  content: ""; position: absolute; left: 6px; top: 20px;
  width: 12px; height: 7px; border-left: 3px solid var(--i-red); border-bottom: 3px solid var(--i-red);
  transform: rotate(-45deg);
}
.zone input:checked + .zone-b { background: rgba(143, 47, 40, .07); }
.zone input:checked + .zone-b::before { border-color: var(--i-red); }
.zone input:focus-visible + .zone-b { outline: 3px solid var(--focus); outline-offset: -2px; }
.zone-n { display: block; font-family: var(--display); font-size: 1.02rem; margin-bottom: .2em; }
.zone-n em { font-style: normal; font-family: var(--type); font-size: .78em; color: var(--i-red); }
.zone-x { display: block; font-size: .9rem; color: var(--i-pencil); max-width: 54ch; }
.zone-block { color: var(--i-red); font-weight: 400; font-family: var(--type); }
.zone input:disabled + .zone-b { opacity: .5; }
.zone input:disabled + .zone-b .zone-n { text-decoration: line-through; }

/* 405 · pre-order */
.pre-list { list-style: none; margin: 0 0 .5em; padding: 0; border-bottom: 1px solid rgba(90, 62, 34, .3); }
.pre {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px;
  justify-content: space-between;
  padding: 15px 0; border-top: 1px solid rgba(90, 62, 34, .3);
}
.pre-txt { flex: 1 1 15rem; min-width: 0; }
.pre-n { font-family: var(--display); font-size: 1rem; margin: 0 0 .22em; }
.pre-x { font-size: .9rem; color: var(--i-pencil); margin: 0; max-width: 46ch; }
.pre-warn { font-family: var(--type); font-size: .82rem; color: var(--i-red); margin: .5em 0 0; }
.pre-side { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.pre-p { font-family: var(--type); font-size: .92rem; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pre.is-off { opacity: .5; }
.pre.is-off .pre-warn { opacity: 1; }
.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid rgba(90, 62, 34, .45); background: rgba(255, 255, 255, .5); }
.st-b {
  width: 2.4rem; height: 2.4rem; border: 0; background: none; cursor: pointer;
  font-family: var(--type); font-size: 1.2rem; color: var(--i-type);
  display: grid; place-items: center;
}
.st-b:hover:not(:disabled) { background: var(--i-red); color: var(--p-index); }
.st-b:disabled { color: rgba(90, 62, 34, .35); cursor: not-allowed; }
.st-n {
  min-width: 2.2rem; display: grid; place-items: center;
  font-family: var(--type); font-variant-numeric: tabular-nums;
  border-inline: 1.5px solid rgba(90, 62, 34, .45);
}
.st-n.is-set { background: var(--i-red); color: var(--p-index); }

/* 406 · written in by hand */
.field { margin-bottom: 1.4em; max-width: 30rem; }
.field label { display: block; font-family: var(--type); font-size: .92rem; margin-bottom: .35em; }
.field input, .field textarea {
  width: 100%; font-family: var(--type); font-size: 1rem; line-height: 1.5;
  padding: .6em .7em; color: var(--i-navy);
  background: rgba(255, 255, 255, .55);
  border: 0; border-bottom: 2px solid rgba(90, 62, 34, .5);
  border-radius: 0;
}
.field textarea { resize: vertical; border: 1.5px solid rgba(90, 62, 34, .4); }
.field input:hover, .field textarea:hover { border-color: var(--i-red); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--i-red); border-bottom-width: 3px; }
.field .fs-note { margin: .45em 0 0; }

.submit-row { border-top: 2px solid var(--i-type); padding-top: calc(var(--u) * 2); }
.submit-row .fs-note { margin: 1.1em 0 0; }

/* der Beleg — the carbon copy under the slip */
.beleg { position: relative; transform: rotate(1.1deg); }
.beleg-in {
  background-color: var(--p-carbon); background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
  padding: calc(var(--u) * 1.9) calc(var(--u) * 1.8);
  border-top: 3px solid var(--i-red);
  font-family: var(--type);
}
.beleg-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 62, 34, .16);
}
.beleg-h { font-family: var(--type); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--i-red); margin: 0 0 1em; }
.beleg-l { margin: 0 0 1em; }
.beleg-l > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: .38em 0; border-bottom: 1px dotted rgba(90, 62, 34, .45); }
.beleg-l dt { font-size: .8rem; color: #6f4c44; flex: 0 0 auto; }
.beleg-l dd { margin: 0; font-size: .88rem; text-align: right; color: var(--i-type); }
.beleg-sub { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #6f4c44; margin: 0 0 .5em; }
.beleg-items { list-style: none; margin: 0 0 .6em; padding: 0; }
.beleg-items li { display: flex; align-items: baseline; gap: .4em; padding: .26em 0; font-size: .84rem; }
.beleg-items .bi-n { flex: 0 1 auto; min-width: 0; }
.beleg-items .bi-l { flex: 1 1 2rem; min-width: 1rem; border-bottom: 2px dotted rgba(90, 62, 34, .45); transform: translateY(-.22em); }
.beleg-items .bi-p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.beleg-sum { display: flex; justify-content: space-between; gap: 12px; border-top: 2px solid var(--i-red); padding-top: .5em; margin: 0 0 .5em; font-size: .9rem; }
.beleg-sum b { font-weight: 400; font-variant-numeric: tabular-nums; color: var(--i-red); }
.beleg-x { font-size: .76rem; color: #6f4c44; margin: 0; }
.beleg-hold { margin-top: 1em; padding-top: .8em; border-top: 1px dotted rgba(90, 62, 34, .45); }

/* confirmation — the entry that got stamped into the book */
.confirm { position: relative; transform: rotate(-.5deg); max-width: 48rem; }
.confirm-in {
  background-color: var(--p-index); background-image: var(--grain-fine);
  box-shadow: var(--lift-2);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 2.6) calc(var(--u) * 2.4);
  border-top: 4px double var(--i-green);
}
.confirm-k { font-family: var(--type); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--i-pencil); margin: 0 0 .8em; }
.confirm-k span { color: var(--i-red); letter-spacing: .1em; }
.confirm h2 { font-size: clamp(1.5rem, 3.8vw, 2.2rem); margin-bottom: .4em; }
.confirm-lead { font-size: 1.06em; max-width: 42ch; margin-bottom: 1.5em; }
.confirm-lead b { font-weight: 600; }
.confirm-stamp {
  position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 1.4);
  transform: rotate(7deg); font-size: .78rem;
}
.confirm-l { margin: 0 0 1.6em; border-top: 1px solid rgba(90, 62, 34, .3); max-width: 34rem; font-family: var(--type); }
.confirm-l > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: .5em 0; border-bottom: 1px dotted rgba(90, 62, 34, .4); }
.confirm-l dt { font-size: .82rem; color: var(--i-pencil); flex: 0 0 auto; }
.confirm-l dd { margin: 0; font-size: .9rem; text-align: right; }
.confirm-pre { max-width: 34rem; margin-bottom: 1.6em; font-family: var(--type); }
.confirm-h3 { font-family: var(--type); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--i-green); margin-bottom: .9em; }
.confirm-next { margin: 0 0 1.8em; padding: 0; list-style: none; max-width: 56ch; border-top: 1px solid rgba(90, 62, 34, .3); }
.confirm-next li { padding: .6em 0 .6em 1.5em; border-bottom: 1px solid rgba(90, 62, 34, .2); position: relative; font-size: .96rem; }
.confirm-next li::before { content: "\2713"; position: absolute; left: .1em; color: var(--i-green); font-family: var(--type); }
.confirm-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-bottom: 1.6em; }
.confirm-demo { font-family: var(--type); font-size: .8rem; color: var(--i-pencil); border-top: 1px solid rgba(90, 62, 34, .3); padding-top: 1em; max-width: 60ch; }

.noscript-box {
  background-color: var(--p-legal); background-image: var(--grain-fine);
  box-shadow: var(--lift-2); border-top: 3px solid var(--i-red);
  padding: 16px 20px 18px; margin-bottom: 34px; transform: rotate(-.6deg);
  font-family: var(--type); font-size: .9rem;
}

/* ---------- Reveal — opacity only, so it never fights a rotation ---------- */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-in { opacity: 1; transition: opacity .6s ease; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; }
}

/* ---------- Print ---------- */
@media print {
  .demo-note, .head, .studio, .res-form, .beleg, .noscript-box, .skip, .pin, .tape { display: none !important; }
  body { background: #fff; color: #000; }
  .confirm { transform: none; }
  .confirm-in { box-shadow: none; border-top: 2px solid #000; background: #fff; }
}