/*
It's My Treat · Guest Check
THESIS: "It's my treat" means grabbing the check. Every conversation is a diner guest check Brian wrote up and paid.
OWN-WORLD: speckled teal counter; mint guest-check paper with teal printing, red serials, ballpoint-blue pen; rust PAID stamp;
an aluminum order rail in the kitchen window holding 2024's tickets; canary and pink carbon copies.
*/
:root {
  --counter: #0a7880;
  --counter-deep: #075c63;
  --counter-ink: #04363b;
  --paper: #eaf6f0;
  --paper-2: #fff3ad;
  --paper-3: #fde3e1;
  --paper-white: #f7fbf8;
  --print: #076870;
  --rule: rgba(10, 123, 130, 0.28);
  --serial: #ad3410;
  --pen: #2541a6;
  --rust: #cf4a1c;
  --ink: #12302f;
  --marigold: #ffb914;
  --f-print: 'Besley', Georgia, serif;
  --f-pen: 'Nanum Pen Script', 'Comic Sans MS', cursive;
  --f-ui: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --speckle: url(speckle.webp);
  --grain: url(grain.webp) 0 0 / 200px 200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--paper) var(--counter-deep); overflow-x: clip; }
body {
  margin: 0;
  background: var(--speckle), linear-gradient(180deg, var(--counter) 0%, #0b7880 100%);
  background-size: 240px 240px, auto;
  color: var(--paper);
  font: 400 1.0625rem/1.6 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;   /* a short page still ends with the footer at the bottom of the window */
}
body > main { flex: 1 0 auto; }
::selection { background: var(--marigold); color: var(--ink); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 3px; }
.check :focus-visible, .back :focus-visible, .paper :focus-visible, .your-tab :focus-visible, .ticket:focus-visible { outline-color: var(--counter-ink); }   /* dark ink on paper (marigold is for the teal counter) */
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(1320px, 100% - 2rem); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(1320px, 100% - 4rem); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: 0; transform: translateY(-110%); z-index: 200; padding: 0.7rem 1rem; background: var(--paper); color: var(--print); font-weight: 700; border-radius: 6px; }
.skip:focus { transform: translateY(1rem); }   /* hidden by its own height, so it never peeks out with big text */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding-block: 1.1rem; }
.logo { display: block; width: 128px; aspect-ratio: 1400 / 816; background: var(--paper); -webkit-mask: url(logo-mark.png) center / contain no-repeat; mask: url(logo-mark.png) center / contain no-repeat; }
.nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: clamp(0.8rem, 2vw, 1.8rem); font-weight: 700; font-size: 0.98rem; }
.nav a { text-decoration: none; }
.nav a:not(.pen-btn) { padding-block: 0.65rem; }   /* 44px tap height; inline padding doesn't move anything (and doesn't undo .hide-sm) */
@media (hover: hover) { .nav a:not(.pen-btn):hover { text-decoration: underline; } }
.nav .hide-sm { display: none; }
@media (min-width: 760px) { .nav .hide-sm { display: inline; } }
.pen-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem 0.55rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--print);
  font: 800 0.95rem/1 var(--f-print);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s var(--ease-out), background 0.2s;
}
@media (hover: hover) { .pen-btn:hover { transform: translateY(-2px); background: #fff; } }
.text-link { font-weight: 700; color: var(--paper); }
@media (hover: hover) { .text-link:hover { color: #fff; } }

/* phone section tabs: little paper slips torn off the pad */
.tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0.1rem 0 0.6rem; }
.tabs .tab { min-width: max-content; }   /* normally one row; with big text they wrap to a second row instead of running off the screen */
.tab {
  position: relative;
  flex: 1 1 auto;   /* each tab gets the same extra room around its own label, so "2024 meals" isn't squeezed */
  text-align: center;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.4rem 0.6rem;
  background: var(--grain), var(--paper);
  color: var(--print);
  font: 800 0.76rem/1 var(--f-print);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.7);
  transform: rotate(-1.2deg);
}
.tab:nth-child(2) { transform: rotate(0.8deg); }
.tab:nth-child(3) { transform: rotate(-0.4deg); }
.tab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle at 5px 0, var(--counter) 3px, transparent 3.5px) 0 0 / 10px 8px repeat-x; }
.tab:active { transform: rotate(0deg) translateY(2px); }
@media (min-width: 760px) { .tabs { display: none; } }

/* ---------- the guest check ---------- */
.check {
  position: relative;
  background: var(--grain), var(--paper);
  color: var(--print);
  border-radius: 3px;
  padding: 0 0 1.2rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 2px rgba(0, 30, 33, 0.18), 0 30px 50px -22px rgba(0, 30, 33, 0.75);
}
.check::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  background: radial-gradient(circle at 6px 0, transparent 3.5px, var(--paper) 4px) 0 0 / 12px 12px repeat-x;
  transform: translateY(-11px);
}
.check-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.3rem 0.6rem; padding: 1rem 1.2rem 0.6rem; border-bottom: 2px solid var(--print); }   /* the sub-line never touches the number */
.check-head > div { flex: 1 1 auto; min-width: 0; }   /* the number moves under the title when the sub-line would otherwise have to wrap */
.check-head .serial { flex: none; margin-left: auto; }
.check-head .h { font: 800 1.05rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; }
.check-head small { display: block; margin-top: 0.35rem; font: 700 0.78rem/1 var(--f-ui); letter-spacing: 0.08em; text-transform: uppercase; }
.serial { font: 700 1.25rem/1 var(--f-print); color: var(--serial); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.serial i { font-style: normal; font-size: 0.75em; margin-right: 0.2em; }
.boxes { display: grid; grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto; border-bottom: 2px solid var(--print); }
.boxes > div { padding: 0.35rem 0.6rem 0.25rem; border-right: 1px solid var(--print); min-width: 0; }
.boxes > div:last-child { border-right: 0; }
.boxes .lbl { display: block; font: 700 0.8rem/1 var(--f-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.pen { font-family: var(--f-pen); color: var(--pen); font-weight: 400; }
/* names wrap only between words, never mid-word; a single long word shrinks to fit its box */
.boxes .pen { display: block; font-size: 1.45rem; line-height: 1.05; overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.boxes > div:nth-child(2) .pen, .boxes > div:nth-child(3) .pen { white-space: normal; }
.check { container-type: inline-size; }
@container (max-width: 18.75em) {   /* = 300px at normal text size; grows with enlarged text */
  .boxes { grid-template-columns: 1fr 1fr; }
  .boxes > div:nth-child(2) { border-right: 0; }
  .boxes > div:nth-child(1), .boxes > div:nth-child(2) { border-bottom: 1px solid var(--print); }
}
/* very large text: one box per row */
@container (max-width: 11em) {
  .boxes { grid-template-columns: 1fr; }
  .boxes > div { border-right: 0; border-bottom: 1px solid var(--print); }
  .boxes > div:last-child { border-bottom: 0; }
  .boxes .pen { white-space: normal; }
}
.g-long { white-space: nowrap; }
.lines {
  --lh: 2.05rem;
  position: relative;
  padding: 0 1.2rem;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh));
  background-position: 0 0.2rem;
}
.lines::before { content: ''; position: absolute; top: 0; bottom: 0; left: 2.6rem; border-left: 1px solid var(--rule); }
.lines .ln { display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; min-height: var(--lh); align-items: start; font: 400 1.65rem / var(--lh) var(--f-pen); color: var(--pen); }
.lines .ln > span:first-child { font-size: 1.4rem; text-align: center; }
.lines .ln > span { min-width: 0; overflow-wrap: break-word; }
.lines .q, .lines .qs { color: var(--pen); text-decoration: none; text-wrap: pretty; }
.lines .q { font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: var(--lh); }
.lines.big { --lh: clamp(2.4rem, 3.6vw, 3.1rem); }
.total { position: relative; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; justify-content: space-between; align-items: center; margin: 0.4rem 1.2rem 0; padding: 0.5rem 0.2rem 0; border-top: 2px solid var(--print); font: 800 0.8rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; }
.total .pen { font-size: 2rem; letter-spacing: 0; text-transform: none; }
.thanks { margin: 1rem 1.2rem 0; text-align: center; font: italic 600 0.95rem/1.2 var(--f-print); }
.stamp {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  color: var(--rust);
  border: 4px solid currentColor;
  border-radius: 8px;
  padding: 0.35rem 0.8rem 0.3rem;
  font: 900 min(var(--stamp-fs, 1.9rem), var(--stamp-cap, 13cqi))/0.95 var(--f-print);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  mix-blend-mode: multiply;
  filter: url(#rough);
  opacity: 0.92;
  --rot: rotate(-6deg);
  transform: var(--rot);
}
.paid-row { display: flex; justify-content: center; align-items: center; min-height: 5.6rem; padding: 0.7rem 1rem 0.1rem; }
.paid-row .stamp { position: relative; z-index: 1; }
.stamp small { display: block; font-size: 0.42em; letter-spacing: 0.2em; margin-top: 0.15rem; }
.stamp.thunk { animation: thunk 0.45s var(--ease-out) both; animation-delay: 0.9s; }
@keyframes thunk { 0% { opacity: 0; transform: var(--rot) scale(1.6); } 60% { opacity: 0.95; transform: var(--rot) scale(0.96); } 100% { opacity: 0.92; transform: var(--rot) scale(1); } }
@media (prefers-reduced-motion: reduce) { .stamp.thunk { animation: none; } }

/* ---------- hero ----------
   Desktop: the tilted check beside the TV.
   Phone and tablet: one check with the video clipped on, like the rest of the pad. */
.hero { padding-block: 1.2rem 2rem; }
/* the section right under the hero starts closer, so it reads as the next part of the page */
.hero + .sec { padding-top: clamp(3rem, 5vw, 4.6rem); }
.page-top { padding-top: 1.5rem; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.big-body { display: grid; gap: 0.4rem; }
.big-body .clip-photo { margin: 1.1rem 1.2rem 0; }
.big-check .screen { border-radius: 3px; }
.big-check .stamp { --stamp-fs: 2.3rem; border-width: 5px; }
.big-check .paid-row { min-height: 6.2rem; }
.hero-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin: 1.2rem 0 0; padding-inline: 0.4rem; font-weight: 700; }
.tv-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1rem; padding-inline: 0.4rem; font-weight: 700; }
.tv-note .pen { font-size: 1.7rem; line-height: 1; color: var(--paper); }
@media (max-width: 999px) {
  .hero .tv { display: none; }
  .hero-grid > .check { transform: rotate(-0.5deg); }
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 5fr 7fr; gap: 0; }
  .hero-grid > .check { transform: rotate(-2.2deg) translateX(1.5rem); z-index: 2; margin-block: 1rem; }
  .hero-grid > .check .clip-photo, .hero-note { display: none; }
  .tv-note { margin-left: 2.5rem; }
}
.tv-frame { position: relative; border-radius: 18px; padding: clamp(10px, 1.2vw, 16px); background: linear-gradient(180deg, #23393b, #0f2224); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 40px 60px -30px rgba(0, 0, 0, 0.75); }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0c1d1f; }
.screen .yt-poster { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.screen .yt-play { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; color: inherit; text-decoration: none; }
@media (hover: hover) { .screen:hover .yt-poster { transform: scale(1.025); } }
.play {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  color: var(--rust);
  box-shadow: 0 0 0 6px rgba(234, 246, 240, 0.35), 0 16px 30px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.play svg { width: 38%; height: 38%; margin-left: 8%; }
.yt-play:focus-visible .play { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(234, 246, 240, 0.3), 0 16px 30px -10px rgba(0, 0, 0, 0.6); }
@media (hover: hover) { .screen:hover .play { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(234, 246, 240, 0.3), 0 16px 30px -10px rgba(0, 0, 0, 0.6); } }

/* ---------- sections ---------- */
.sec { padding-block: clamp(4rem, 8vw, 7rem); position: relative; }
.sec.page-top { padding-top: 1.5rem; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: 2.5rem; }
.h2 { margin: 0; font: 800 max(1.5rem, min(clamp(2.4rem, 5vw, 4.2rem), 12.5vw))/0.98 var(--f-print); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; }
.h2 .pen { font-size: 1.15em; color: var(--paper-2); letter-spacing: 0; }
.lede { max-width: 44ch; margin: 0; font-size: 1.12rem; text-wrap: pretty; }
.more-link { margin: 3.5rem 0 0; text-align: center; }

/* "Want to be next?" lines up with the check below it */
#order .sec-head { max-width: 760px; margin-inline: auto; }

/* Order up! The bell pulls a ticket for you (one you haven't read yet). */
/* the same canary ticket as "Pull another check" at the end of every story */
.bell { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.7rem 1.2rem 0.65rem 0.95rem; background: var(--grain), var(--paper-2); color: var(--counter-ink); border-radius: 0 0 3px 3px; text-decoration: none; transform: rotate(-1deg); box-shadow: 0 14px 20px -14px rgba(0, 0, 0, 0.85); transition: transform 0.25s var(--ease-out); }
.bell svg { width: 1.8rem; height: 1.8rem; flex: none; transform-origin: 50% 80%; color: var(--serial); }
.bell > span { display: grid; gap: 0.25rem; }
.bell b { font: 800 1rem/1 var(--f-print); letter-spacing: 0.12em; text-transform: uppercase; }
.bell small { font: 400 1.35rem/1 var(--f-pen); color: var(--pen); }
@media (hover: hover) { .bell:hover { transform: rotate(0deg) translateY(-2px); } }
.bell.ring svg { animation: ding 0.6s var(--ease-out); }
@media (hover: hover) { .bell:hover svg { animation: ding 0.6s var(--ease-out); } }
@keyframes ding { 0%, 100% { rotate: 0deg; } 20% { rotate: -16deg; } 45% { rotate: 12deg; } 70% { rotate: -6deg; } }
.ticket.called { animation: called 0.5s var(--ease-out); }
@keyframes called { 0%, 100% { transform: rotate(var(--r, 0deg)); } 45% { transform: rotate(0deg) translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .bell:hover svg, .bell.ring svg, .ticket.called { animation: none; } .bell:hover { transform: rotate(-1deg); } }

/* anything marked hidden stays hidden, whatever display a class gives it */
[hidden] { display: none !important; }

/* Order up! and your tab sit together at the end of the rails' intro */
.order-up { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem 1.4rem; min-width: 0; max-width: 100%; }
.order-up > * { max-width: 100%; }
@media (max-width: 759px) { .order-up { justify-content: flex-start; } }
.your-tab { position: relative; display: grid; gap: 0.3rem; min-width: min(11.5rem, 100%); padding: 0.6rem 0.9rem 0.55rem; background: var(--grain), var(--paper); color: var(--print); border-radius: 0 0 3px 3px; transform: rotate(1.4deg); box-shadow: 0 12px 16px -12px rgba(0, 0, 0, 0.85); }
.your-tab::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 6px; background: radial-gradient(circle at 4px 6px, var(--paper) 3.5px, transparent 4px) 0 0 / 8px 6px repeat-x; }
.your-tab .yt-h { font: 800 0.78rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; }
.your-tab .yt-n { font-size: 1.5rem; line-height: 1; }
.your-tab.full .full-stamp { position: static; justify-self: center; --rot: rotate(-6deg); margin: 0.35rem 0 0.1rem; max-width: calc(100% - 1rem); white-space: normal; text-align: center; pointer-events: none; }   /* its own strip at the bottom of the slip, like PAID on a check */
.full-stamp { position: absolute; left: 50%; bottom: 0.45rem; --rot: translateX(-50%) rotate(-6deg); transform: var(--rot); padding: 0.2rem 0.5rem 0.12rem; border: 3px solid var(--serial); border-radius: 5px; color: var(--serial); font: 900 0.95rem/1 var(--f-print); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0.92; }
.full-stamp.thunk-now { animation: thunk 0.45s var(--ease-out) 0.5s both; }
/* end of a story: ring for another check */
.pull-wrap { display: flex; justify-content: center; padding-top: 3rem; }
.pull-another { max-width: 100%; display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.4rem 0.85rem 1.1rem; background: var(--grain), var(--paper-2); color: var(--counter-ink); border-radius: 0 0 3px 3px; text-decoration: none; transform: rotate(-1deg); box-shadow: 0 16px 22px -14px rgba(0, 0, 0, 0.8); transition: transform 0.25s var(--ease-out); }
@media (hover: hover) { .pull-another:hover { transform: rotate(0deg) translateY(-3px); } }
.pull-another svg { width: 2.1rem; height: 2.1rem; flex: none; transform-origin: 50% 80%; color: var(--serial); }
.pull-another span { display: grid; gap: 0.3rem; }
.pull-another b { font: 800 1.15rem/1 var(--f-print); letter-spacing: 0.12em; text-transform: uppercase; }
.pull-another small { font: 400 1.45rem/1.05 var(--f-pen); color: var(--pen); }
.pull-another.ring svg { animation: ding 0.6s var(--ease-out); }
@media (hover: hover) { .pull-another:hover svg { animation: ding 0.6s var(--ease-out); } }
.pull-another:focus-visible { outline-color: var(--counter-ink); }   /* dark ink on the canary slip, like every paper */
@media (prefers-reduced-motion: reduce) { .pull-another:hover svg, .pull-another.ring svg, .full-stamp.thunk-now { animation: none; } .pull-another:hover { transform: rotate(-1deg); } }

/* Pass it on: share a story or a video */
.share { position: relative; display: inline-block; }
.share > summary { list-style: none; }
.share > summary::-webkit-details-marker { display: none; }
.share-btn { display: block; cursor: pointer; user-select: none; filter: drop-shadow(0 10px 9px rgba(0, 0, 0, 0.35)); transition: transform 0.2s var(--ease-out); }
/* the perforated guest-receipt stub you tear off the bottom of a check */
.stub { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1.4rem; min-height: 52px; padding: 0.7rem 1.1rem 0.55rem; background: var(--grain), var(--paper); color: var(--print); border-top: 2px dashed rgba(7, 104, 112, 0.5); border-radius: 0 0 3px 3px;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 7px, #000 7.5px) top left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 7px, #000 7.5px) top right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 7px, #000 7.5px) top left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 7px, #000 7.5px) top right / 51% 100% no-repeat; }
.stub-l { font: 800 0.78rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; }
.stub-r { display: inline-flex; align-items: center; gap: 0.35rem; font: 400 1.6rem/1 var(--f-pen); color: var(--pen); white-space: nowrap; }
.stub-r .nw { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }   /* the arrow stays with "on" */
.stub-r svg { width: 1.15rem; height: 1.15rem; color: var(--serial); transition: translate 0.2s var(--ease-out); }
.share[open] > .share-btn { transform: translateY(2px) rotate(-0.6deg); }
@media (hover: hover) { .share-btn:hover { transform: translateY(2px) rotate(-0.6deg); } }
.share[open] .stub-r svg { translate: 3px 0; }
@media (hover: hover) { .share-btn:hover .stub-r svg { translate: 3px 0; } }
.share > summary:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 3px; }   /* on the summary: the stub's torn-corner mask would clip a ring drawn on the stub */
.stub.tight .stub-l { display: none; }   /* no room for the decorative label: "Pass it on" keeps the space */
.share-menu { position: absolute; z-index: 30; top: calc(100% + 14px); left: 0; display: grid; width: 15rem; max-width: calc(100vw - 3rem); padding: 0.85rem 0 0.7rem; background: var(--grain), var(--paper); color: var(--print); border-radius: 0 0 3px 3px; transform: rotate(-1.2deg); transform-origin: top left; box-shadow: 0 26px 34px -18px rgba(0, 0, 0, 0.8); }
/* torn top edge, like the guest checks */
.share-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 7px; background: radial-gradient(circle at 4px 7px, var(--paper) 4px, transparent 4.5px) 0 0 / 8px 7px repeat-x; }
.share-h { margin: 0 1rem 0.45rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--print); font: 800 0.78rem/1 var(--f-print); letter-spacing: 0.14em; text-transform: uppercase; text-wrap: balance; }
.share--center .share-menu { left: 50%; translate: -50% 0; transform-origin: top center; }
.share--up .share-menu, .share.flip .share-menu { top: auto; bottom: calc(100% + 14px); transform-origin: bottom left; }
.share--up .share-menu { left: auto; right: 0; transform-origin: bottom right; }
/* each choice is a ruled line on the slip, written in pen */
.share-menu a, .share-menu button { position: relative; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0.15rem 1rem 0 2.6rem; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none; color: var(--pen); font: 400 1.55rem/1 var(--f-pen); text-align: left; text-decoration: none; cursor: pointer; }
.share-menu a::before, .share-menu button::before { content: ''; position: absolute; left: 1.9rem; top: 0; bottom: -1px; width: 1px; background: var(--rule); }
.share-menu a::after, .share-menu button::after { content: '\2192'; position: absolute; left: 0.75rem; font-size: 1.2rem; color: var(--serial); opacity: 0; transition: opacity 0.15s; }
.share-menu button { border-bottom: 0; }
.share-menu a:focus-visible, .share-menu button:focus-visible { background: linear-gradient(transparent 52%, rgba(255, 220, 90, 0.75) 52%, rgba(255, 220, 90, 0.75) 86%, transparent 86%) no-repeat 2.4rem 0 / calc(100% - 3.4rem) 100%; }
@media (hover: hover) { .share-menu a:hover, .share-menu button:hover { background: linear-gradient(transparent 52%, rgba(255, 220, 90, 0.75) 52%, rgba(255, 220, 90, 0.75) 86%, transparent 86%) no-repeat 2.4rem 0 / calc(100% - 3.4rem) 100%; } }
.share-menu a:focus-visible::after, .share-menu button:focus-visible::after { opacity: 1; }
@media (hover: hover) { .share-menu a:hover::after, .share-menu button:hover::after { opacity: 1; } }
.share-menu :focus-visible { outline: 2px solid var(--counter-ink); outline-offset: -3px; }
.share-menu button.copied { color: var(--serial); }
.share[open] .share-menu { animation: slip 0.22s var(--ease-out); }
@keyframes slip { from { opacity: 0; translate: 0 -6px; } }
.share--center[open] .share-menu { animation-name: slip-c; }
@keyframes slip-c { from { opacity: 0; translate: -50% -6px; } to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .share[open] .share-menu { animation: none; } .share-btn:hover, .share[open] > .share-btn { transform: none; } }
.share-under { margin-top: 0.6rem; }
.share-under .share { display: block; }
.story-check .share-under { transform: rotate(-1.5deg); }
.story-check-end .share-under { margin-top: 0.5rem; }
.pull-wrap { flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.note-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; min-width: 0; max-width: 100%; }
.note-acts > * { max-width: 100%; }
.theater-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; }
.theater-foot .theater-q { flex: 1 1 20rem; }
.theater-foot .share { margin: 0; }
.theater-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin: 0.6rem 0.2rem 0.2rem; min-width: 0; max-width: calc(100% - 0.4rem); }
.theater-acts > *, .theater-acts .share { max-width: 100%; }   /* with enlarged text on a small phone the link and receipt wrap instead of running off */
.theater-acts .stub { flex-wrap: wrap; }
.theater-acts .stub-r { white-space: normal; flex-wrap: wrap; column-gap: 0.25em; }
.full-check { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); font-weight: 700; }
.full-check .arr { white-space: pre; color: var(--paper-2); }
.lost-pull { padding-top: 2rem; justify-content: flex-start; }
/* Tables we sat at: a plain list under the rails, no paper */
.tables { margin-top: 4rem; padding-top: 2.2rem; border-top: 1px solid rgba(234, 246, 240, 0.18); }
.tables h2 { margin: 0 0 1.2rem; font: 800 1rem/1 var(--f-print); letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-2); }
.tables ul { margin: 0; padding: 0; list-style: none; columns: 4 13rem; column-gap: 2.5rem; }
.tables li { break-inside: avoid; }
@media (max-width: 599px) { .tables ul { columns: 2 8.5rem; column-gap: 1.2rem; } .tables a { font-size: 0.95rem; } }
.tables a { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; color: var(--paper); font-weight: 700; text-decoration: none; }
.tables a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; }
@media (hover: hover) { .tables a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }
.tables .tally { margin-left: 0.35rem; font: 400 1.65rem/1 var(--f-pen); color: var(--paper-2); }
@container story (min-width: 20em) { .story-facts > span { white-space: nowrap; } }   /* whole items wrap, never a lone word (when the column has room for an item) */
.story-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0.45rem 0 0; font: 400 1.8rem/1.1 var(--f-pen); color: var(--paper-2); }

/* tickets you've already read get a small stamp (remembered in this browser only) */
.ticket .t-photo, .ticket .noimg { position: relative; }
.read-mark { position: absolute; right: 7px; bottom: 7px; padding: 0.28rem 0.42rem 0.2rem; border: 2px solid currentColor; border-radius: 4px; background: rgba(247, 251, 248, 0.9); color: var(--serial); font: 900 0.7rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; --rot: rotate(-8deg); transform: var(--rot); pointer-events: none; }
.read-mark.late { animation: thunk 0.45s var(--ease-out) 0.75s both; }
@media (prefers-reduced-motion: reduce) { .read-mark.late { animation: none; } }

/* phone: the rails run to the screen edge like the pad row, steel bar included */
@media (max-width: 759px) {
  .month .tickets { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scroll-padding-inline: 1rem; }
  @media (min-width: 720px) { .month .tickets { scroll-padding-inline: 2rem; } }   /* the page gutter is 2rem from 720px */   /* the page gutter (a % here would mean the rail's own width) */
  .month .rail::before { left: calc(50% - 50vw); right: calc(50% - 50vw); border-radius: 0; }
}
/* phone: the tilted checks on /videos keep clear of the screen edge */
@media (max-width: 600px) {
  .pad.pad-all > .check:nth-child(n) { transform: rotate(0.5deg); }
  .pad.pad-all > .check:nth-child(2n) { transform: rotate(-0.5deg); }
}
/* the hero note's link gets a full-size tap target without moving the text */
.hero-note a { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }

/* videos on the pad, each with its thumbnail clipped to the check */
.pad { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 800px) { .pad-all { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pad { grid-template-columns: repeat(3, 1fr); } }
.pad > .check:nth-child(3n + 1) { transform: rotate(1.2deg); }
.pad > .check:nth-child(3n + 2) { transform: rotate(-1.4deg) translateY(1rem); }
.pad > .check:nth-child(3n + 3) { transform: rotate(0.8deg); }
.pad-all { row-gap: 3.5rem; }
.clip-photo { margin: 1.1rem 1.2rem 0; position: relative; }
.clip-photo .screen { border-radius: 2px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.5); }
/* paper clip on the top-left corner: grips the check, barely touches the photo */
.clip {
  position: absolute;
  z-index: 3;
  top: -18px;
  left: -6px;
  width: 16px;
  height: 44px;
  border: 3px solid #aab7ba;
  border-radius: 9px;
  border-bottom-color: transparent;
  transform: rotate(-24deg);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.clip::after { content: ''; position: absolute; left: 2px; right: 2px; top: 5px; bottom: 9px; border: 2.5px solid #c3cdd0; border-radius: 6px; border-bottom-color: transparent; }
.pad .play { width: 58px; }
.pad .lines { --lh: 2rem; margin-top: 0.6rem; }
.pad .lines .ln { font-size: 1.6rem; }   /* the pen face runs small for its size; this is about the hero check's size */
.pages { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 4rem; font-weight: 700; }

/* ---------- the order rail (2024) ---------- */
.kitchen { background: var(--counter-ink); color: var(--paper); }
.kitchen .h2 .pen { color: var(--paper-2); }
.month { margin-top: 3rem; }
.month .month-h { margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; font: 800 1rem/1 var(--f-print); letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-2); }
.month .month-h span { font: 600 0.9rem/1 var(--f-ui); letter-spacing: 0.02em; text-transform: none; color: #cfe8e5; }
.rail { position: relative; padding-top: 14px; }
.rail::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: -0.5rem;
  right: -0.5rem;
  top: 0;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f3f6f7, #a9b6ba 55%, #7b888c 56%, #c4cfd2);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.6);
}
.tickets { position: relative; display: flex; gap: 1rem; overflow-x: auto; padding: 0 0.25rem 1.6rem; scrollbar-width: thin; scrollbar-color: var(--paper-2) transparent; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.knob { display: none; }
@media (min-width: 760px), (hover: hover) {
  .tickets { --fl: 0px; --fr: 80px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
  .rail:not([data-start]) .tickets { --fl: 60px; }
  .rail[data-end] .tickets { --fr: 0px; }
  .knob {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 3;
    top: -10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--counter-ink);
    background: radial-gradient(circle at 34% 28%, #ffffff 0, #dfe6e8 30%, #a7b4b8 70%, #7d8a8e 100%);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), opacity 0.2s;
  }
  .knob svg { width: 22px; height: 22px; }
  .knob.prev { left: -1.1rem; }
  .knob.next { right: -1.1rem; }
  @media (hover: hover) { .knob:hover:not(:disabled) { transform: scale(1.08); } }
  .knob:disabled { opacity: 0; pointer-events: none; }
}
/* snap only with a mouse or trackpad: on phones, snapping makes a swipe feel heavy (iOS fights the finger) */
@media (hover: hover) { .tickets, .pad:not(.pad-all) { scroll-snap-type: x proximity; } }
.tickets:focus-within, .pad:focus-within { scroll-snap-type: none; }   /* keyboard: the focused ticket scrolls into view and stays there (snapping would pull it back) */
.ticket {
  position: relative;
  flex: 0 0 auto;
  width: 214px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--print);
  background: var(--grain), var(--paper);
  border-radius: 0 0 3px 3px;
  padding: 0.7rem 0.75rem 0.9rem;
  transform-origin: top center;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 16px 20px -14px rgba(0, 0, 0, 0.8);
}
@media (hover: hover) { .ticket { transition: transform 0.35s var(--ease-out), box-shadow 0.35s; } }
.ticket.canary { background: var(--grain), var(--paper-2); }
.ticket.pink { background: var(--grain), var(--paper-3); }
.ticket:focus-visible { transform: rotate(0deg) translateY(8px); box-shadow: 0 24px 26px -14px rgba(0, 0, 0, 0.85); }
@media (hover: hover) { .ticket:hover { transform: rotate(0deg) translateY(8px); box-shadow: 0 24px 26px -14px rgba(0, 0, 0, 0.85); } }
.ticket .t-top { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--print); padding-bottom: 0.35rem; font: 800 0.72rem/1 var(--f-print); letter-spacing: 0.12em; text-transform: uppercase; }
.ticket .t-top .serial { font-size: 1.05rem; }
.t-photo { position: relative; margin-top: 0.7rem; }
.t-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5); }
.ticket .noimg { margin-top: 0.7rem; aspect-ratio: 1; display: grid; place-items: center; text-align: center; padding: 1rem; border: 1.5px dashed var(--rule); font: 400 1.6rem/1.1 var(--f-pen); color: var(--pen); }
.ticket .who { margin: 0.55rem 0 0; font: 400 1.75rem/1 var(--f-pen); color: var(--pen); }
.ticket .where { margin: 0.3rem 0 0; font: 700 0.85rem/1.3 var(--f-ui); }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 6fr 5fr; gap: 5rem; } }
.back { background: var(--grain), var(--paper); color: var(--ink); padding: clamp(1.5rem, 4vw, 3rem); border-radius: 3px; box-shadow: 0 30px 50px -22px rgba(0, 30, 33, 0.75); transform: rotate(-0.8deg); }
.back .h2 { color: var(--print); }
.big-type .back, .big-type .polaroid { transform: none; }
.about-grid > * { min-width: 0; }
.back p { overflow-wrap: break-word; }
.big-type .back p { hyphens: auto; }
.big-type .back { padding-inline: 0.75rem; }
.back p { font: 400 1.18rem/1.65 var(--f-print); margin: 1.1rem 0 0; max-width: 56ch; text-wrap: pretty; }
.back .sig { font: 400 2.6rem/1 var(--f-pen); color: var(--pen); margin-top: 1.4rem; }
.polaroid { width: min(100%, 460px); margin: 0; background: #fff; padding: 12px 12px 0.45rem; transform: rotate(2.5deg); box-shadow: 0 30px 40px -24px rgba(0, 0, 0, 0.8); position: relative; max-width: 460px; justify-self: center; }
.polaroid img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; width: 100%; }
.polaroid figcaption { padding: 0.75rem 0.2rem 0.3rem; text-align: center; font: 400 1.7rem/1 var(--f-pen); color: var(--pen); }
.tape { position: absolute; z-index: 2; top: -16px; left: 50%; width: 110px; height: 32px; margin-left: -55px; background: rgba(255, 243, 173, 0.78); transform: rotate(-4deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); }

/* ---------- blank check form ---------- */
.order { max-width: 760px; margin-inline: auto; }
.order .check { transform: none; }
.order .check .stamp { position: absolute; --rot: rotate(-9deg); --stamp-cap: 8.5cqi; right: 1.5rem; top: 4.4rem; opacity: 0; }
.order .check.paid .stamp { animation: thunk 0.45s var(--ease-out) both; }
.form-lines { padding: 0.4rem 1.2rem 0; }
.f { display: grid; grid-template-columns: 10.5rem 1fr; align-items: end; gap: 0.6rem; border-bottom: 1px solid rgba(7, 104, 112, 0.85); padding: 0.6rem 0 0.15rem; }
.f:has(textarea) { align-items: start; border-bottom: 0; }
.f:has(textarea) label { padding: 0.8rem 0 0; }
.f label { font: 700 0.8rem/1.2 var(--f-ui); letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 0.55rem; }
.f input, .f textarea { width: 100%; border: 0; background: transparent; font: 400 1.9rem/1.2 var(--f-pen); color: var(--pen); padding: 0.1rem 0; caret-color: var(--rust); resize: none; }
.f textarea { display: block; height: 4.6rem; min-height: 4.6rem; padding: 0; line-height: 2.3rem; background: repeating-linear-gradient(180deg, transparent 0 calc(2.3rem - 1.5px), rgba(7, 104, 112, 0.6) calc(2.3rem - 0.5px) 2.3rem); background-color: transparent; }
.f input::placeholder, .f textarea::placeholder { font: italic 400 1rem/1.4 var(--f-ui); color: var(--print); }
.f textarea::placeholder { line-height: 2.3rem; }
.f input:focus, .f textarea:focus { outline: none; background-color: #fff; box-shadow: inset 0 -3px 0 var(--pen); }
.f input[aria-invalid='true'] { background-color: var(--paper-3); box-shadow: inset 0 -2px 0 var(--serial); }
@media (max-width: 600px) { .f { grid-template-columns: 1fr; gap: 0; } .f label { padding-bottom: 0; } }
.boxes-form { display: flex; flex-wrap: wrap; gap: 0.7rem 1.6rem; padding: 0.5rem 1.2rem 0; margin-bottom: -0.3rem; }
.tick { display: inline-flex; gap: 0.6rem; align-items: center; min-height: 44px; font: 700 0.95rem/1.2 var(--f-ui); cursor: pointer; color: var(--ink); }
.tick input { appearance: none; width: 1.6rem; height: 1.6rem; border: 2px solid var(--print); border-radius: 2px; display: grid; place-items: center; margin: 0; background: transparent; cursor: pointer; }
.tick input::after { content: ''; width: 0.95rem; height: 0.95rem; background: var(--pen); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c3 2 5 5 6 7 3-7 7-12 13-17' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c3 2 5 5 6 7 3-7 7-12 13-17' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transform: scale(0); transition: transform 0.15s var(--ease-out); }
.tick input:checked::after { transform: scale(1); }
.submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 1.2rem 0; padding-top: 0.8rem; border-top: 2px solid var(--print); }
.stamp-btn { min-height: 44px; border: 3px solid var(--serial); color: var(--serial); background: transparent; border-radius: 8px; padding: 0.6rem 1.1rem 0.5rem; font: 900 1.1rem/1 var(--f-print); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transform: rotate(-2deg); transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-out); }
@media (hover: hover) { .stamp-btn:hover { background: #b23c12; border-color: #b23c12; color: #fff; transform: rotate(0deg); } }
.stamp-btn:disabled { opacity: 0.6; cursor: default; }
.note-col { flex: 1 1 14rem; display: grid; gap: 0.1rem; }
.form-note { margin: 0; font: 600 0.9rem/1.4 var(--f-ui); color: var(--print); text-wrap: pretty; }
.form-privacy { margin: 0; font: 600 0.9rem/1.4 var(--f-ui); }
.form-privacy a { display: inline-block; padding-block: 0.25rem; color: var(--print); text-decoration: underline; text-underline-offset: 0.2em; }
.form-note.err { color: var(--serial); }

/* ---------- story ---------- */
.story-grid { display: grid; gap: 2.5rem; align-items: start; }
.story-grid > *, .big-body > * { min-width: 0; }
.story-check { display: none; }
/* Two columns (check beside the story) from 1000px, and only while the story column keeps 30em or more: with
   enlarged text the page stays one column instead (em here follows the reader's text size; works without JS) */
.story { container: story / inline-size; }
@media (min-width: 1000px) {
  @container story (min-width: 50.5em) {
    .story-grid { grid-template-columns: minmax(min(17em, 45%), 4fr) 8fr; gap: 3.5rem; }   /* the check column grows with enlarged text (17em); unchanged at normal size */
    .story-check { display: block; position: sticky; top: 2rem; }
    .story-check .check { transform: rotate(-1.5deg); }
    .story-check-end { display: none; }
  }
}
.story-check .stamp, .story-check-end .stamp { --stamp-fs: 1.8rem; }
.story-check .lines.big .q { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.story-head { margin-bottom: 1.8rem; }
.story-title { margin: 0; font: 800 max(1.4rem, min(clamp(2.1rem, 4.4vw, 3.6rem), 11.5vw))/1.07 var(--f-print); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; }
.story-sub { margin: 0.9rem 0 0; max-width: 46ch; font: italic 500 clamp(1.15rem, 1.8vw, 1.35rem)/1.45 var(--f-print); text-wrap: pretty; }
.story-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 1rem 0 0; font-weight: 700; font-size: 0.95rem; color: var(--paper); }
.paper { background: var(--grain), var(--paper-white); color: var(--ink); border-radius: 3px; padding: clamp(1rem, 3vw, 2.6rem) clamp(1rem, 4vw, 3.4rem) clamp(2rem, 4vw, 3.4rem); box-shadow: 0 30px 50px -26px rgba(0, 30, 33, 0.75); }
.snap { margin: 0; background: #fff; padding: 9px 9px 9px; box-shadow: 0 18px 28px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.04); transform: rotate(var(--r, 0deg)); }
.snap .zoom { all: unset; display: block; width: 100%; cursor: zoom-in; }
.snap img { display: block; }
.snap .zoom:focus-visible { outline: 3px solid var(--rust); outline-offset: 2px; }
.snap img { width: 100%; height: auto; }
.snap.lead { margin: 0 0 1.8rem; }
.snap.lead img { aspect-ratio: 4 / 3; object-fit: cover; }
/* the opening photo floats beside the text only when the text column is wide enough (560px+) to keep full lines
   next to it; in a narrower column (phones and the 1000-1099px two-column story) it sits full width above */
@container prose (min-width: 30rem) and (max-width: 34.99rem) { .snap.lead img { --lead-cap: max(11rem, min(40vh, 100vh - 34rem)); aspect-ratio: 3 / 2; max-height: var(--lead-cap); max-width: calc(var(--lead-cap) * 2.2); margin-inline: auto; object-position: var(--focal-wide, 50% 30%) !important; } }   /* a wide crop keeps the faces: the photo's own focal point, worked out for a 2.2:1 box, and never wider than that (centred on its paper) */   /* the story's first lines stay near the first screen; never shorter than 11rem, faces kept in the crop */
@container prose (min-width: 35rem) {
  .snap.lead { float: right; width: 40%; margin: 0.4rem 0 1.4rem 1.8rem; }
}
@container prose (min-width: 35rem) and (max-width: 39.99rem) { .snap.lead { width: 44%; } }   /* a narrow column: a slightly larger share, so the photo isn't a thumbnail */
@media (min-width: 1500px) {
  @container prose (min-width: 35rem) {   /* only a floated photo grows on a wide screen (with enlarged text the column may be too narrow to float) */
    .snap.lead { width: 44%; }
    .snap.lead img { aspect-ratio: auto; max-height: 70vh; object-fit: cover; }
  }
}
.prose::after { content: ''; display: table; clear: both; }
.prose { max-width: 66ch; margin-inline: auto; font: 400 1.2rem/1.75 var(--f-print); container: prose / inline-size; }
.prose p { margin: 0 0 1.2em; text-wrap: pretty; }
.prose h2, .prose h3 { font-family: var(--f-print); line-height: 1.15; margin: 1.6em 0 0.6em; }
.prose blockquote { margin: 1.6em 0; padding: 0.2em 0 0.2em 1.2em; border-left: 2px solid var(--print); font-style: italic; }
.prose a { color: var(--print); }
.snaps { display: grid; gap: 1.2rem; margin: 2.2rem 0 2.4rem; clear: both; }
.snaps.n1 { max-width: 560px; margin-inline: auto; }
.snaps.n2, .snaps.n3 { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.snaps.n3 > .snap:nth-child(3) { grid-column: 1 / -1; }
.snaps.n3 > .snap:nth-child(3) img { aspect-ratio: 3 / 2; }
@media (min-width: 640px) { .snaps.n2, .snaps.n3 { gap: 1.2rem; } .snaps.n3 { grid-template-columns: repeat(3, 1fr); } .snaps.n3 > .snap:nth-child(3) { grid-column: auto; } .snaps.n3 > .snap:nth-child(3) img { aspect-ratio: 1; } }
.snaps.n2 img, .snaps.n3 img { aspect-ratio: 1; object-fit: cover; }
.story-check-end { margin-top: 3rem; max-width: 520px; }
.pager { display: grid; gap: 1rem; padding-block: 2rem 4rem; }
@media (min-width: 760px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { display: grid; gap: 0.35rem; padding: 1.1rem 1.3rem; border-radius: 3px; background: var(--grain), var(--paper); color: var(--print); text-decoration: none; box-shadow: 0 16px 24px -16px rgba(0, 0, 0, 0.7); transition: transform 0.25s var(--ease-out); }
@media (hover: hover) { .pager a:hover { transform: translateY(-3px) rotate(-0.5deg); } }
@media (min-width: 760px) { .pager a.next { text-align: right; } }
.pager small { font: 800 0.75rem/1 var(--f-print); letter-spacing: 0.14em; text-transform: uppercase; color: var(--serial); }
.pager b { font: 400 1.7rem/1.15 var(--f-pen); color: var(--pen); }
.pager .pg-q { font: 600 0.92rem/1.35 var(--f-ui); color: var(--print); text-wrap: pretty; }
.story-meta .table-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(234, 246, 240, 0.5); text-underline-offset: 0.22em; }
.story-meta .table-link:focus-visible { text-decoration-color: currentColor; }
@media (hover: hover) { .story-meta .table-link:hover { text-decoration-color: currentColor; } }

/* ---------- big video player ---------- */
dialog { color: inherit; }
.theater { width: min(1280px, 94vw, calc((92vh - 7rem) * 16 / 9 + 36px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
html:has(dialog[open]) { overflow: hidden; }
.theater::backdrop { background: rgba(3, 26, 29, 0.9); backdrop-filter: blur(4px); }
.theater-in { background: linear-gradient(180deg, #23393b, #0f2224); border-radius: 18px; padding: clamp(10px, 1.4vw, 18px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); }
.theater-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 0.2rem 0.7rem; }
.theater-title { margin: 0; font-weight: 700; color: var(--paper); }
.theater-screen { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((92vh - 7rem) * 16 / 9)); margin-inline: auto; background: #000; border-radius: 10px; overflow: hidden; }
.theater-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.theater-q { margin: 0.8rem 0.2rem 0.2rem; font: 400 1.7rem/1.15 var(--f-pen); color: var(--paper-2); text-wrap: balance; }
.theater-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; flex: none; }
.theater-close svg { width: 20px; height: 20px; }
.theater[open] .theater-in { animation: rise 0.35s var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lightbox::backdrop { background: rgba(3, 26, 29, 0.93); }
.lightbox { overflow: visible; }
.lb-frame { margin: 0; background: #fff; padding: 10px 10px 0; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.lightbox img { display: block; max-width: min(1100px, 90vw); max-height: calc(86vh - 4rem); width: auto; height: auto; }
.lb-frame { width: fit-content; }
.lb-frame figcaption { width: 0; min-width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 3rem; padding: 0.55rem 0.3rem 0.65rem; max-width: min(1100px, 90vw); }
#lightbox-cap { font: 400 1.45rem/1.15 var(--f-pen); color: var(--pen); }
.lb-count { flex: none; font: 700 0.85rem/1 var(--f-ui); color: var(--print); letter-spacing: 0.04em; }
.lb-nav { position: fixed; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.8); }
.lb-nav svg { width: 24px; height: 24px; }
.lb-nav.prev { left: max(12px, 2vw); }
.lb-nav.next { right: max(12px, 2vw); }
@media (hover: hover) { .lb-nav:hover { background: #fff; } }
.lightbox.single .lb-nav { display: none; }
@media (max-width: 700px) { .lb-nav { top: auto; bottom: 18px; translate: none; } .lightbox img { max-height: calc(80vh - 5rem); } }
.lightbox .theater-close { position: absolute; top: -14px; right: -14px; z-index: 2; }
@media (max-width: 600px) { .lightbox .theater-close { top: -54px; right: 4px; } }
@media (prefers-reduced-motion: reduce) { .theater[open] .theater-in { animation: none; } }

/* ---------- 404 ---------- */
.lost { max-width: 760px; }
.lost-check { margin-top: 1rem; transform: rotate(-1deg); }
.lost-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 2.5rem; }

/* ---------- footer ---------- */
.foot { padding-block: 4rem 2.5rem; background: var(--counter-ink); color: #d8eeec; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 50em) { .foot-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }   /* em: waits for room when the browser text size is larger */
.big-type .foot-grid { grid-template-columns: minmax(0, 1fr); }
.foot-about { max-width: 36ch; margin-top: 1rem; }
.foot-about .place { display: inline-block; }   /* "Champaign-Urbana, Illinois" moves to the next line whole when it can, and still wraps when it must */
.foot-h { margin: 0 0 0.8rem; font: 800 0.8rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.foot li a { display: block; min-height: 44px; padding: 0.6rem 0; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { text-decoration: underline; } }
.come-again { margin: 3rem 0 0; text-align: center; font: italic 700 clamp(1.4rem, 3vw, 2.2rem)/1.2 var(--f-print); color: var(--paper); }
.fine { text-align: center; font-size: 0.85rem; color: #a9cfcc; margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 600px) { .big-check .stamp { --stamp-fs: 1.8rem; border-width: 4px; } .big-check .paid-row { min-height: 5.4rem; } }
.g-short { display: none; }
.boxes .fit-short .g-long { display: none; }
.boxes .fit-short .g-short { display: inline; }

.paid-row .sr { position: absolute; }
@media (max-width: 600px) { .month .month-h span { flex-basis: 100%; } }

/* you are here */
.nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.tab[aria-current='page'] { transform: translateY(3px) rotate(0deg); background: var(--grain), var(--paper-2); box-shadow: inset 0 0 0 2px var(--print), 0 6px 10px -8px rgba(0, 0, 0, 0.7); }
/* question links on checks show they can be clicked */
.lines a.ans { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.4rem; color: var(--pen); text-decoration: underline dotted rgba(37, 65, 166, 0.45); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color 0.2s; }
.lines a.ans .arr { color: var(--serial); white-space: pre; transition: translate 0.2s var(--ease-out); text-decoration: none; }
.lines a.ans:focus-visible { text-decoration-color: var(--pen); }
@media (hover: hover) { .lines a.ans:hover { text-decoration-color: var(--pen); } }
.lines a.ans:focus-visible .arr { translate: 3px 0; }
@media (hover: hover) { .lines a.ans:hover .arr { translate: 3px 0; } }
/* ticket serials match the checks ("No", not "NO") */
.ticket .t-top .serial { text-transform: none; }

.f:has([aria-invalid='true']) { border-bottom-color: transparent; }
/* L6: photos that are still loading read as photos, not blank paper */
.t-photo img, .snap img { background: #dfe9e6; }

/* photo-heavy stories: the extra snapshots in a swipe strip at the end (no steel bar) */
.photo-strip { position: relative; margin: 2.6rem -0.5rem 0.5rem; padding-top: 0; clear: both; }
.photo-strip::before { display: none; }
.prose .strip-h, .strip-h { margin: 0 0.5rem 0.9rem; font: 400 1.9rem/1 var(--f-pen); color: var(--pen); }
.photo-strip .strip-row { gap: 1rem; padding: 0.6rem 0.5rem 1.4rem; scroll-padding-inline: 3.25rem; align-items: center; }   /* room for the knobs, so they never cover the focused photo */
.photo-strip .snap { flex: 0 0 auto; scroll-snap-align: start; }
.photo-strip .snap img { height: clamp(190px, 26vw, 260px); width: auto; max-width: none; }
.photo-strip .knob { top: calc(50% + 0.6rem); translate: 0 -50%; }
.photo-strip .knob.prev { left: -0.9rem; }
.photo-strip .knob.next { right: -0.9rem; }

@media (max-width: 1099px) {
  .pad:not(.pad-all) { display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-inline: calc(50% - 50vw); padding: 1.2rem calc(50vw - 50%) 3rem; scroll-padding-inline: calc(50vw - 50%); margin-bottom: -1.4rem; scrollbar-width: none; }
  .pad:not(.pad-all)::-webkit-scrollbar { display: none; }
  .pad:not(.pad-all) > .check { flex: 0 0 min(90%, 440px); scroll-snap-align: center; transform: none !important; }
  .pad:not(.pad-all) .check-head { padding-inline: 0.9rem; }
  .pad:not(.pad-all) .check-head .h { font-size: 0.95rem; letter-spacing: 0.12em; white-space: nowrap; }
  .pad:not(.pad-all) .check-head small { font-size: 0.72rem; letter-spacing: 0.05em; }
  .pad-hint { display: block; margin: -0.6rem 0 0; text-align: right; font: 400 1.4rem/1 var(--f-pen); color: var(--paper-2); }
}
@media (min-width: 1100px) { .pad-hint { display: none; } }
@media (max-width: 430px) { .boxes .lbl { font-size: 0.7rem; letter-spacing: 0.02em; } }
@media (max-width: 360px) {
  .pad:not(.pad-all) .boxes > div { padding-inline: 0.4rem; }
  .pad:not(.pad-all) .boxes .lbl { font-size: 0.7rem; letter-spacing: 0.05em; }
  .pad:not(.pad-all) .boxes > div:nth-child(1) .pen, .pad:not(.pad-all) .boxes > div:nth-child(4) .pen { font-size: 1.05rem; }
}

/* ---------- "pull a ticket": page-to-page lift (supporting browsers, motion allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(imt-check), ::view-transition-group(imt-photo) { animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.2, 0.85, 0.25, 1); }
  ::view-transition-group(imt-check) { z-index: 2; }
  ::view-transition-group(imt-photo) { z-index: 3; }
  ::view-transition-old(imt-photo), ::view-transition-new(imt-photo) { height: 100%; width: 100%; object-fit: cover; }
  ::view-transition-old(imt-photo) { animation: none; opacity: 0; }
  ::view-transition-new(imt-photo) { animation: none; }
  ::view-transition-old(imt-check), ::view-transition-new(imt-check) { animation-duration: 0.28s; }
  /* the old page stays solid underneath while the new one fades in on top (no washed-out midpoint) */
  ::view-transition-image-pair(root) { isolation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
  /* the old page steps out before the new one steps in, so two headlines never share the screen;
     the gap between them is plain counter, never white */
  ::view-transition { background: var(--counter-deep); }
  ::view-transition-old(root) { animation: 0.11s ease-out both vt-fade-out; }
  ::view-transition-new(root) { animation: 0.17s ease-out 0.09s both vt-fade-in; }
  @keyframes vt-fade-in { from { opacity: 0; } }
  @keyframes vt-fade-out { to { opacity: 0; } }
}
.stamp.pre-thunk { opacity: 0; }
.stamp.thunk-now { animation: thunk 0.45s var(--ease-out) both; }

/* ---------- accessibility (audit, Oct 4 2026) ---------- */
/* the guest check's boxes are a definition list now; keep them looking the same */
.boxes, .boxes dt, .boxes dd { margin: 0; }
.lines .qs { margin: 0; font: inherit; }
.label .req, label .req { margin-left: 0.4em; font: 600 0.8rem/1 var(--f-ui); letter-spacing: 0.04em; text-transform: none; color: var(--serial); }
main:focus { outline: none; }
.form-note:focus { outline: none; }

/* the popout and the photo gallery fit any screen, and scroll inside themselves when zoomed way in */
.theater { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; width: min(1280px, 94vw, calc((100dvh - min(16.5rem, 264px)) * 16 / 9 + 36px)); }
.theater-screen { width: min(100%, calc((100dvh - min(16.5rem, 264px)) * 16 / 9)); }   /* room for the title bar, question and buttons (fixed, so enlarged text doesn't shrink the video), so short laptop screens keep a margin */
.theater-bar { position: sticky; top: 0; z-index: 2; background: #23393b; }
@media (max-height: 480px) {
  .theater-q { font-size: 1.15rem; }
  .theater-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* short or narrow screens: the gallery's arrows sit at the bottom, so leave room to scroll the caption above them */
@media (max-width: 700px), (max-height: 480px) { .lightbox { padding-bottom: 76px; } }
@media (max-height: 480px) and (min-width: 701px) { .lb-nav { top: auto; bottom: 12px; translate: none; } }
.lightbox { max-height: 100dvh; overflow: auto; }
.lightbox .theater-close { position: fixed; top: 8px; right: 8px; }
.lightbox img { max-height: min(calc(86vh - 4rem), calc(100dvh - 9rem)); }
@media (max-width: 700px) { .lightbox img { max-height: min(calc(80vh - 5rem), calc(100dvh - 76px - 56px - 7lh)); } }   /* phones: the caption (about 7 lines, at the reader's text size) stays above the arrows */
.lightbox img { margin-inline: auto; }   /* a narrow photo sits centred in its white frame */
@media (max-width: 599px) and (orientation: portrait) { .lightbox { padding-top: 56px; } }   /* clear of the close button (sideways, the photo sits clear of it already) */
@media (min-width: 701px) { .lightbox img { max-width: min(1100px, calc(100vw - 2 * (max(12px, 2vw) + 60px) - 20px)); } }   /* the side arrows never sit on the photo */
.lb-frame { min-width: min(17rem, 90vw); }

/* focus you can always see */
.screen .yt-play:focus-visible { outline: 4px solid var(--marigold); outline-offset: -4px; border-radius: inherit; box-shadow: inset 0 0 0 8px var(--counter-ink); }
.logo { position: relative; background: none; -webkit-mask: none; mask: none; }
.logo::before { content: ''; position: absolute; inset: 0; background: var(--paper); -webkit-mask: url(logo-mark.png) center / contain no-repeat; mask: url(logo-mark.png) center / contain no-repeat; }
.f input:focus, .f textarea:focus { outline: 2px solid transparent; outline-offset: 2px; }   /* shows in Windows high contrast */
.f input[aria-invalid='true']:focus { background-color: var(--paper-3); box-shadow: inset 0 -3px 0 var(--serial); }   /* same pink as the other flagged field; the thicker underline shows focus */
.ticket:focus-visible, .photo-strip .zoom:focus-visible { outline-offset: -4px; }   /* inside the edge, so the rail never clips it */
.tickets { scroll-padding-inline: 12px 88px; }
.f textarea { background: repeating-linear-gradient(180deg, transparent 0 calc(2.3rem - 1.5px), rgba(7, 104, 112, 0.85) calc(2.3rem - 0.5px) 2.3rem); }

/* the sticky story check only sticks when the screen is tall enough to show all of it */
@media (min-width: 1000px) and (max-height: 719px) {
  /* a wide but short window: the check stays put (it's taller than the screen), and its receipt follows the reader
     down the empty left column, so "Pass it on" is in reach at the end of the story */
  .story-check { position: static; align-self: stretch; }
  .story-check .share-under { position: sticky; top: 1.5rem; }
}
.story-grid.check-tall .story-check { position: static; align-self: stretch; }   /* same, for enlarged text (site.js measures) */
.story-grid.check-tall .story-check .share-under { position: sticky; top: 1.5rem; }

/* narrow screens: nothing pokes past the edge */
.share-btn { max-width: 100%; }
.stub { flex-wrap: wrap; }
.prose a { overflow-wrap: anywhere; }

/* Windows high contrast */
@media (forced-colors: active) {
  .logo::before { forced-color-adjust: none; background: CanvasText; }
  .tick input:checked::after { forced-color-adjust: none; background: CanvasText; }
  .stamp, .full-stamp, .read-mark { forced-color-adjust: none; mix-blend-mode: normal; filter: none; opacity: 1; color: CanvasText; border-color: CanvasText; background: Canvas; }
  .screen .yt-play:focus-visible { outline-color: Highlight; }
}

/* reduced motion: nothing slides, scales or thunks */
@media (prefers-reduced-motion: reduce) {
  .ticket, .play, .screen .yt-poster, .knob, .pen-btn, .bell, .share-btn, .stamp-btn, .pull-another, .pager a, .lines a.ans .arr, .tick input::after, .stub-r svg { transition: none !important; }
  .screen:hover .yt-poster, .screen:hover .play, .yt-play:focus-visible .play, .knob:hover { transform: none; }
  .ticket:hover, .ticket:focus-visible { transform: rotate(var(--r, 0deg)); }
  .order .check.paid .stamp { animation: none; opacity: 0.92; }
}

/* admin preview of a post */
.preview-note { margin: 0 auto; padding: 0.7rem 1rem; background: var(--marigold); color: var(--ink); font-weight: 700; border-radius: 0 0 8px 8px; width: fit-content; }
/* Everyone at the table: repeat guests get small numbered links to their other meals */
/* privacy page and the form's link to it */
.privacy .paper { max-width: 760px; margin-inline: auto; }
.privacy .paper h1 { color: var(--ink); margin-bottom: 1.4rem; }
.privacy .prose h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
.fine a { display: inline-block; padding-block: 0.4rem; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* the tagline under the logo, like the line painted under a diner's sign */
.brand-lockup { display: grid; justify-items: start; gap: 0.15rem; min-width: 0; max-width: 100%; }
.tagline { margin: 0 0 0 -0.2rem; font: 400 clamp(1.3rem, 1.9vw, 1.65rem)/1 var(--f-pen); color: var(--paper-2); transform: rotate(-2deg); transform-origin: left center; overflow-wrap: break-word; }
.top .pen-btn { flex: none; white-space: nowrap; max-width: 100%; }
/* phones: the tagline sits on its own line under the logo and the button, a little straighter */
@media (max-width: 599px) {
  .top { row-gap: 0.25rem; }
  .brand-lockup { display: contents; }
  .top .logo { order: 1; }
  .top .nav { order: 2; }
  .tagline { order: 3; flex-basis: 100%; transform: rotate(-1deg); }
  .top .pen-btn { white-space: normal; text-align: center; }
}
@media (max-width: 359px) { .top .logo { width: 104px; } .top .pen-btn { padding-inline: 0.9rem; } }
@media (max-width: 420px) { .tagline { font-size: 1.2rem; } }
.lede .text-link { display: inline-block; }

/* Enlarged text on a narrow screen (.big-type from site.js): keep everything on its paper */
.big-type .pull-another { flex-direction: column; align-items: flex-start; }
.big-type .pull-another span { min-width: 0; }
.big-type .pad:not(.pad-all) .check-head .h { white-space: normal; }
.big-type .lines { padding-inline: 0.6rem; }
.big-type .lines::before { left: 1.95rem; }
.big-type .lines .ln { grid-template-columns: 1.1rem 1fr; gap: 0.5rem; font-size: max(1rem, min(1.65rem, 8.5vw)); }
.big-type .lines .ln > span:first-child { font-size: max(0.9rem, min(1.4rem, 7vw)); }
.big-type .lines .q { font-size: max(1rem, min(1.9rem, 9vw)); }

/* The video row: steel knobs and edge fades for mouse users while it's a swipe row (under 1100px), like the rails.
   The knobs sit in the empty strip under the checks, so they never land on a play button. */
.pad-wrap { position: relative; }
.pad-hint .by-mouse { display: none; }
@media (hover: hover) { .pad-hint .by-touch { display: none; } .pad-hint .by-mouse { display: inline; } }
@media (hover: hover) and (max-width: 1099px) {
  .pad-wrap .knob {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 3;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--counter-ink);
    background: radial-gradient(circle at 34% 28%, #ffffff 0, #dfe6e8 30%, #a7b4b8 70%, #7d8a8e 100%);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25), 0 4px 8px -2px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), opacity 0.2s;
    top: auto;
    bottom: -0.2rem;
  }
  .pad-wrap .knob svg { width: 22px; height: 22px; }
  .pad-wrap .knob.prev { left: 0; }
  .pad-wrap .knob.next { right: 0; }
  .pad-wrap .knob:hover:not(:disabled) { transform: scale(1.08); }
  .pad-wrap .knob:disabled { opacity: 0; pointer-events: none; }
  .pad-wrap .pad { --fl: 0px; --fr: 80px; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, #000 var(--fl), #000 calc(100% - var(--fr)), rgba(0, 0, 0, 0.3) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, #000 var(--fl), #000 calc(100% - var(--fr)), rgba(0, 0, 0, 0.3) 100%); }   /* a softer fade than the rails: the checks under it still have buttons */
  .pad-wrap:not([data-start]) .pad { --fl: 40px; }
  .pad-wrap[data-end] .pad { --fr: 0px; }
  .pad-wrap + .pad-hint { display: none; }
}
.pad-wrap[data-end] + .pad-hint { opacity: 0; transition: opacity 0.2s; }   /* nothing more to swipe to */
@media not ((hover: hover) and (max-width: 1099px)) { .pad-wrap .knob { display: none; } }
@media (prefers-reduced-motion: reduce) { .pad-wrap .knob:hover:not(:disabled) { transform: none; } }

/* a phone held sideways: the video on the left at full height, the title, question and buttons beside it */
@media (orientation: landscape) and (max-height: 500px) {
  .theater { width: min(98vw, 64rem); }
  .theater-in { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start; }
  .theater-screen { grid-column: 1; grid-row: 1 / 3; width: min(62vw, calc((100dvh - 3rem) * 16 / 9)); margin: 0; }
  .theater-bar { grid-column: 2; grid-row: 1; position: static; padding: 0 0 0.4rem; background: none; }
  .theater-foot { grid-column: 2; grid-row: 2; display: block; }
  .theater-q { margin: 0 0 0.4rem; font-size: min(1.7rem, 5.2vh); }
  .theater-acts { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0; }
  /* no room above or below the receipt here, so its slip opens to the left, over the video */
  .theater-acts .share .share-menu, .theater-acts .share.flip .share-menu { top: auto; bottom: -5rem; left: auto; right: calc(100% + 12px); transform-origin: right center; }
  /* a compact two-column slip, so it fits a short popout */
  .theater-acts .share-menu { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); width: min(21rem, 70vw); max-width: min(62vw, calc((100dvh - 3rem) * 16 / 9)); }   /* never wider than the video it covers */
  .theater-acts .share-menu .share-h, .theater-acts .share-menu [data-share-live] { grid-column: 1 / -1; }   /* two columns when they fit, one with enlarged text */
  .theater-title { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; hyphens: auto; font-size: min(1rem, 3.6vw); }   /* with enlarged text, small enough that words fit the column whole */   /* the full title, however many lines */
  .theater-acts .share-menu a, .theater-acts .share-menu button { padding-left: 2.2rem; font-size: 1.35rem; }
  .theater-acts .share-menu a::before, .theater-acts .share-menu button::before { left: 1.6rem; }
  .theater-acts .share-menu a::after, .theater-acts .share-menu button::after { left: 0.5rem; }
  /* with enlarged text the right column stays inside the popout: the receipt and the link wrap */
  .theater-acts { width: 100%; }
  .theater-acts .share { max-width: 100%; }
  .theater-acts .stub { flex-wrap: wrap; }
  .theater-acts .stub-r { white-space: normal; flex-wrap: wrap; column-gap: 0.25em; }
  .big-type .theater-acts .stub-l { display: none; }   /* a tiny sideways window with enlarged text: the decorative label gives way to "Pass it on" */
  .theater-acts .full-check { display: block; padding-block: 0.6rem; }
}

/* Next up: when a popout video ends, the next one's ticket slides in at the corner of the screen */
.next-up { position: relative; display: grid; gap: 0.2rem; justify-items: start; min-height: 44px; padding: 0.55rem 0.95rem 0.5rem; border: 0; border-radius: 0 0 3px 3px; background: var(--grain), var(--paper-2); color: var(--counter-ink); text-align: left; cursor: pointer; transform: rotate(-1.5deg) translateY(12px); opacity: 0; box-shadow: 0 14px 22px -12px rgba(0, 0, 0, 0.9); transition: transform 0.35s var(--ease-out), opacity 0.25s; }
.next-up.in { transform: rotate(-1.5deg); opacity: 1; }
.next-up { margin: 0.9rem 0 0.2rem 0.2rem; max-width: 100%; }   /* under the video, before the question */
.next-up b { font: 800 0.78rem/1 var(--f-print); letter-spacing: 0.16em; text-transform: uppercase; }
.next-up .pen { font-size: 1.45rem; line-height: 1.05; color: var(--pen); }
.next-up:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
@media (hover: hover) { .next-up.in:hover { transform: rotate(0deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .next-up, .next-up.in { transition: none; transform: rotate(-1.5deg); } }

/* End of a story: one slip (your tab, the next check, or surprise me, and the previous/next in small print) */
.end-wrap { padding-block: 3rem clamp(2.5rem, 6vw, 5.5rem); }   /* room before the footer */
.story-grid { padding-bottom: 1.5rem; }   /* the sticky check stops above this, so its tilted receipt never hangs over the footer */
.end-bell > span { line-height: 1.15; }
@container (max-width: 16em) { .end-bell b { letter-spacing: 0.05em; } }
.end-slip .full-stamp { max-width: calc(100% - 1rem); white-space: normal; text-align: center; }
.end-pager .pn-next { justify-content: flex-end; }
.end-pager .nw { white-space: nowrap; }
.end-slip { width: min(100%, 34rem); container-type: inline-size; gap: 0.55rem; padding: 1rem 1.3rem 0.9rem; transform: rotate(-0.8deg); }
.end-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; margin: 0; }
.end-top .yt-n { font-size: 1.45rem; color: var(--pen); }
.end-next { display: inline-block; justify-self: start; padding-block: 0.45rem; min-height: 44px; font: 400 clamp(1.3rem, 6cqi, 1.75rem)/1.1 var(--f-pen); color: var(--pen); text-decoration: underline; text-decoration-color: rgba(37, 65, 166, 0.45); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.end-next .arr { white-space: pre; color: var(--serial); }
.end-next .nm { display: inline-block; max-width: 100%; text-decoration: inherit; text-decoration-line: underline; text-decoration-color: rgba(37, 65, 166, 0.45); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }   /* a name stays whole when it fits (an inline-block doesn't inherit the link's underline, so it draws its own) */
.end-bell { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; justify-self: start; color: var(--print); text-decoration: none; }
.end-bell svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--serial); transform-origin: 50% 80%; }
.end-bell b { font: 800 0.85rem/1 var(--f-print); letter-spacing: 0.14em; text-transform: uppercase; }
.end-bell .pen { font-size: 1.4rem; color: var(--pen); }
@media (hover: hover) { .end-bell:hover b { text-decoration: underline; text-underline-offset: 0.2em; } .end-bell:hover svg { animation: ding 0.6s var(--ease-out); } }
.end-bell.ring svg { animation: ding 0.6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .end-bell:hover svg, .end-bell.ring svg { animation: none; } }
.end-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; margin: 0.3rem 0 0; padding-top: 0.45rem; border-top: 2px dashed rgba(7, 104, 112, 0.45); }
.end-pager a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; min-height: 44px; color: var(--print); font: 700 0.92rem/1.25 var(--f-ui); text-decoration: none; }
.end-pager a:hover, .end-pager a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.end-pager small { font: 800 0.72rem/1 var(--f-print); letter-spacing: 0.12em; color: var(--serial); }
.end-pager .pn-next { margin-left: auto; text-align: right; }
@media (hover: hover) and (max-width: 759px) { .rail .knob.prev { left: 0; } .rail .knob.next { right: 0; } }
/* A narrow check (by its own width, in em, so it also catches enlarged text on wide screens): a slimmer number
   column and pen text sized to the paper, so words stay whole. At normal text size only checks under 256px (none today) change. */
@container (max-width: 16em) {
  .check .lines { padding-inline: 0.6rem; }
  .check .lines::before { left: 1.95rem; }
  .check .lines .ln { grid-template-columns: 1.1rem 1fr; gap: 0.5rem; font-size: max(1rem, min(1.65rem, 8.5cqi)); }
  .check .lines .ln > span:first-child { font-size: max(0.9rem, min(1.4rem, 7cqi)); }
  .check .lines .q, .check .lines.big .q { font-size: max(1rem, min(1.9rem, 9cqi)); }
}

/* The open seat: a blank check that fills the gap at the end of the video grid (only where there is a gap) */
.open-seat { display: none; }
@media (min-width: 800px) and (max-width: 1099px) { .pad-all.m2-1 > .open-seat { display: block; } }
@media (min-width: 1100px) { .pad-all.m3-1 > .open-seat, .pad-all.m3-2 > .open-seat { display: block; } }
.seat-spot { display: grid; place-items: center; aspect-ratio: 16 / 9; margin: 1.1rem 1.2rem 0; border: 2px dashed rgba(7, 104, 112, 0.45); border-radius: 10px; }
.seat-spot .pen { font-size: 1.6rem; color: var(--print); opacity: 0.85; transform: rotate(-3deg); }

/* The photo gallery on a short, wide screen (a phone held sideways, a short laptop window): the caption sits in a
   white margin beside the photo, so the photo gets the full height and the caption reads without scrolling */
@media (orientation: landscape) and (max-height: 40em) {   /* em: with larger text the caption moves beside the photo sooner */
  .lightbox { padding-bottom: 0; }
  .lb-frame { display: grid; grid-template-columns: auto min(11em, 34vw); align-items: stretch; padding: 10px; min-width: 0; }   /* the note column grows with the text, but never past a third of the screen */
  .lightbox img { max-height: calc(100dvh - 2rem - 20px); max-width: calc(100vw - min(11em, 34vw) - 165px); }
  .lb-frame figcaption { width: auto; min-width: 0; max-width: none; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0.6rem; min-height: 0; padding: 0.3rem 0.4rem 0.2rem 0.9rem; }
  #lightbox-cap { font-size: clamp(1.1rem, 2.6vw, 1.35rem); }
  .lb-nav { top: 50%; bottom: auto; translate: 0 -50%; }
}
.lb-frame { position: relative; }
#lightbox-live { top: 0; left: 0; }   /* the hidden announcement stays inside the frame (it added a small scroll) */
.end-slip > *, .end-bell, .end-pager a { min-width: 0; max-width: 100%; }   /* with enlarged text on a small phone everything in the slip wraps inside it */
/* "ORDER UP!" never clipped: with enlarged text on a small phone the bell sits above the words (container queries in
   em follow the reader's text size, with or without JS) */
@media (max-width: 759px) { .order-up { container-type: inline-size; flex-basis: 100%; } }
.pull-wrap { container-type: inline-size; }
@container (max-width: 17em) {
  .bell, .pull-another, .end-bell { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}
.big-type .bell { flex-direction: column; align-items: flex-start; }
.your-tab.full:not(.end-slip) { min-width: min(15rem, 100%); }   /* room for PAID IN FULL on one line at normal size */
@container (max-width: 23em) { .check-head small { letter-spacing: 0.03em; font-size: 0.72rem; } }   /* a narrow check: the sub-line fits on one line */
/* without JavaScript: the controls that need it step aside (play and photo zoom are plain links and still work) */
@media (scripting: none) { .knob, [data-copy] { display: none !important; } }
/* without JavaScript nothing measures the Guests box, so it shows the short form ("Troy") that always fits */
@media (scripting: none) { .boxes .g-long { display: none; } .boxes .g-short { display: inline; } }