/* Riso Poster family: shared inks, type and pieces.
   Single theme by choice. Every dinner prints the page in its own two inks. */

:root {
  --p-bg: #b3261e; --p-fg: #fff4ec; --p-accent: #f5c243; --p-deep: #9a2019;
  --disp: "Anybody", "Arial Narrow", Impact, sans-serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--p-bg); color: var(--p-fg); font: 16px/1.5 var(--sans); padding-inline: 16px; padding-block: 16px 90px; transition: background-color 0.6s ease, color 0.6s ease; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: var(--grain); opacity: 0.5; mix-blend-mode: multiply; z-index: 19; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--p-accent); outline-offset: 2px; }
.wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 40px; }

/* Top strip */
.strip { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font: 600 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; border-top: 4px solid var(--p-fg); border-bottom: 1.5px solid var(--p-fg); padding: 9px 0; position: relative; z-index: 5; }
.strip b { font: 800 16px/1 var(--disp); font-stretch: 130%; letter-spacing: 0.02em; }
.strip .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lang { display: inline-flex; border: 1.5px solid var(--p-fg); }
.lang button { background: none; border: 0; padding: 2px 8px; font: inherit; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--p-fg); color: var(--p-bg); }
.nav { display: inline-flex; gap: 6px; }
.nav button { background: none; border: 1.5px solid var(--p-fg); width: 32px; height: 26px; cursor: pointer; font: 600 13px var(--mono); }

/* Type pieces */
.country { margin: 0; font: 900 200px/0.78 var(--disp); font-stretch: 62%; text-transform: uppercase; white-space: nowrap; color: var(--p-fg); text-shadow: 0.035em 0.025em 0 var(--p-accent); letter-spacing: -0.005em; }
.label { font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.cook { font: 800 clamp(26px, 3.4vw, 46px)/0.95 var(--disp); font-stretch: 85%; text-transform: uppercase; margin: 0; text-wrap: balance; }
.cook small { display: block; font: 600 11px var(--mono); letter-spacing: 0.12em; margin-bottom: 6px; }
.date { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: end; }
.date .big { font: 900 clamp(48px, 6vw, 88px)/0.8 var(--disp); font-stretch: 58%; }
.date .meta { font: 600 11.5px/1.35 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; display: grid; gap: 4px; }
.date .rel { background: currentColor; justify-self: start; padding: 3px 7px; }
.date .rel span { color: var(--card-bg, var(--p-bg)); }

/* Seats */
.seats { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-bottom: 18px; }
.dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-content: center; font: 900 26px var(--disp); font-stretch: 70%; border: 2.5px solid currentColor; position: relative; }
.dot.taken { background: currentColor; }
.dot.taken b { color: var(--card-bg, var(--p-bg)); }
.dot.invited { border-style: dashed; }
.dot.open { border-style: dotted; opacity: 0.75; }
.dot small { position: absolute; top: 100%; margin-top: 3px; left: 50%; translate: -50% 0; font: 600 9.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.seatline { font: 600 12px var(--mono); letter-spacing: 0.04em; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions .t { width: 100%; font: 600 12px var(--mono); letter-spacing: 0.04em; }
.btn { font: 600 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 16px; border: 2px solid currentColor; background: none; cursor: pointer; }
.btn.primary { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-bg); }
.yes { font: 800 22px var(--disp); font-stretch: 100%; text-transform: uppercase; }

/* Printed cards that sit on top of the poster */
.card { --card-bg: var(--p-fg); background: var(--p-fg); color: var(--p-bg); padding: 16px 18px; display: grid; gap: 10px; align-content: start; box-shadow: 6px 5px 0 var(--p-accent); position: relative; z-index: 3; }
.card.ink { --card-bg: var(--p-accent); background: var(--p-accent); color: var(--p-bg); box-shadow: 6px 5px 0 var(--p-fg); }
.card.dark { --card-bg: var(--p-deep); background: var(--p-deep); color: var(--p-fg); box-shadow: 6px 5px 0 var(--p-accent); }
.card .btn.primary { background: var(--p-bg); border-color: var(--p-bg); color: var(--p-fg); }
.card.dark .btn.primary { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-bg); }
.card h2 { margin: 0; font: 800 24px/1 var(--disp); font-stretch: 100%; text-transform: uppercase; }
.card h3 { margin: 0; font: 600 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.card p { margin: 0; }
.card .phrase { font: 800 32px/1 var(--disp); font-stretch: 85%; }
.card ul, .card ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 15px; }
.card h4 { margin: 0; font: 700 17px var(--sans); }
.lock { border: 2px dashed currentColor; padding: 12px; display: grid; gap: 4px; font-size: 14px; }
.lock b { font: 800 18px/1.1 var(--disp); font-stretch: 100%; text-transform: uppercase; }
.player { display: flex; gap: 12px; align-items: center; }
.play { width: 52px; height: 52px; flex: none; border-radius: 50%; border: 0; background: currentColor; font-size: 17px; cursor: pointer; }
.play span { color: var(--card-bg, var(--p-bg)); }
.fine { font: 400 12px/1.4 var(--mono); margin: 0; }
.fine a { color: inherit; }

/* Small print: the same content without cards */
.print { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 4px solid var(--p-fg); }
.print > div { padding: 18px 22px 8px 0; display: grid; gap: 12px; align-content: start; }
.print > div + div { border-left: 1.5px solid var(--p-fg); padding-left: 22px; }
.print h2 { margin: 0; font: 800 26px/1 var(--disp); font-stretch: 100%; text-transform: uppercase; }
.print h3 { margin: 0; font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.print p { margin: 0; max-width: 44ch; }
.print .phrase { font: 800 34px/1 var(--disp); font-stretch: 85%; color: var(--p-accent); }
.print ul, .print ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 15px; }
.print h4 { margin: 0; font: 700 18px var(--sans); }

/* Wall of 24 posters */
.wall { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.mini { aspect-ratio: 0.72; border: 0; padding: 7px 6px 6px; display: grid; grid-template-rows: auto 1fr auto; text-align: left; cursor: pointer; overflow: hidden; position: relative; box-shadow: 0 0 0 1.5px rgba(0,0,0,0.12); transition: transform 0.2s ease; }
.mini:hover { transform: translateY(-3px); }
.mini .n { font: 600 10px var(--mono); letter-spacing: 0.06em; }
.mini .c { align-self: end; font: 700 clamp(14px, 1.25vw, 17px)/1.1 var(--sans); overflow-wrap: anywhere; hyphens: auto; }
.mini .dte { font: 600 11px var(--mono); margin-top: 4px; }
.mini.on { outline: 3px solid var(--p-fg); outline-offset: 3px; transform: translateY(-3px); }
.mini.past::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(0,0,0,0.16) 6px 7px); }
.mini.booked .n::after { content: " ✓"; }
.section-title { margin: 0 0 14px; font: 900 48px/0.9 var(--disp); font-stretch: 75%; text-transform: uppercase; }

canvas.globe { display: block; cursor: grab; touch-action: none; max-width: 100%; }
canvas.globe:active { cursor: grabbing; }

@media (max-width: 900px) {
  .print { grid-template-columns: 1fr; }
  .print > div + div { border-left: 0; border-top: 1.5px solid var(--p-fg); padding-left: 0; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mini .c { font-size: 14px; }
}
@media (max-width: 480px) {
  .strip .right { margin-left: 0; }
  .dot { width: 50px; height: 50px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { body, .mini { transition: none; } }