/* PhatHead Productions: "the menu board".
   JP 10/16: "kep it black not baby blue for phathead". One paper, black (the black of his logo plate, so the
   logo sits on the page with no box), one ink, white (the logo's letter white). The board is a black letter
   board: white type, white category bands, white strips on the pictures and a white ticket with black type.
   No greys for text, no accent colour, no gradients, no glows.
   Display: Gasoek One (OFL). Text: Libre Franklin (OFL). Device: [brackets], the client's own mark.
   Fluid root and guards from the house kit (tokens.css): 1440 frame on desktop, 375 frame on phones. */

@font-face {
  font-family: "Gasoek One";
  src: url("/fonts/gasoek-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/fonts/libre-franklin-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

:root {
  --paper: #000000;
  --ink: #ffffff;
  --plate: #000000;
  --wash: rgba(255, 255, 255, 0.14);
  --pad: 3rem;
  --gap: 1.5rem;
  --f-d: "Gasoek One", "Arial Black", "Helvetica Neue", sans-serif;
  --f-t: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.31, 0.13, 0.11, 1);
  color-scheme: only dark;
}

/* fluid root (house kit): 16px at 1440, 16px at 375; tablet pin; ultrawide cap */
html { font-size: calc(16 / 1440 * 100vw); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 1023px) { html { font-size: calc(16 / 375 * 100vw); } :root { --pad: 1rem; --gap: 0.75rem; } }
@media (min-width: 576px) and (max-width: 1023px) { html { font-size: 24.576px; } }
@media (min-width: 1921px) { html { font-size: 21.333px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { background: var(--paper); }
body {
  color: var(--ink);
  font-family: var(--f-t);
  font-size: max(1.0625rem, 16px);
  line-height: 1.4;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.18em; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.d { font-family: var(--f-d); font-weight: 400; letter-spacing: -0.012em; line-height: 0.9; }
.tag { font-family: var(--f-t); font-weight: 700; letter-spacing: 0.005em; white-space: nowrap; }

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad);
  min-height: 5.5rem;
}
.brand { display: flex; align-items: center; gap: 0.875rem; text-decoration: none; min-height: 44px; min-width: 44px; }
.brand img { width: 3rem; height: auto; background: var(--plate); }
.brand span { font-weight: 700; font-size: max(1.0625rem, 16px); letter-spacing: 0.005em; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.875rem;
  font-weight: 750;
  font-size: max(1.125rem, 16px);
  text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.16em; text-underline-offset: 0.3em; }
.nav a.nav-book { background: var(--ink); color: var(--paper); margin-left: 0.5rem; }
.nav a.nav-book:hover, .nav a.nav-book[aria-current="page"] { text-decoration: none; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 0.16rem var(--ink); }
.page-home .brand img { display: none; }
/* sound toggle: text only, the menu board's dotted leader as its underline */
.sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.875rem;
  margin-left: 0.25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--f-t);
  font-weight: 750;
  font-size: max(1.125rem, 16px);
  white-space: nowrap;
  cursor: pointer;
}
.sound span { border-bottom: 0.18rem dotted currentColor; padding-bottom: 0.1rem; }
.sound[aria-pressed="true"] span { border-bottom-style: solid; }
.sound:hover span { border-bottom-style: solid; }
@media (max-width: 1023px) {
  .top { min-height: 4rem; padding-top: 0.5rem; padding-bottom: 0.5rem; gap: 0.5rem; }
  .brand { gap: 0; flex: none; }
  .brand img, .page-home .brand img { display: block; width: 2.5rem; }
  .brand span, .page-home .brand span { display: none; }
  .nav { gap: 0; }
  .nav a { padding: 0 0.5rem; font-size: 1rem; }
  .nav a.nav-book { margin-left: 0.15rem; padding: 0 0.7rem; }
  .sound { padding: 0 0.45rem; margin-left: 0.1rem; font-size: 1rem; }
}

/* never let an anchor's heading land under anything at the top of the screen */
[id] { scroll-margin-top: 1.5rem; }
html { scroll-padding-top: 1.5rem; }

/* ---------- intro: his bumper on its own black plate, then it settles into the board ---------- */
.intro { display: none; }
.ph-intro .intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
}
.ph-intro body { overflow: hidden; }
.intro-plate { position: absolute; inset: 0; background: var(--plate); }
.intro-mark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(62vw, 40vh); aspect-ratio: 720 / 796; }
.intro-logo, .intro-bumper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro-bumper { opacity: 0; }
.intro.is-bumper .intro-bumper { opacity: 1; }
.intro.is-bumper .intro-logo { opacity: 0; }
.intro-skip {
  position: absolute;
  top: max(0.75rem, env(safe-area-inset-top));
  right: var(--pad);
  min-height: 44px;
  min-width: 64px;
  padding: 0 0.75rem;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--f-t);
  font-weight: 750;
  font-size: max(1.125rem, 16px);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.intro-enter {
  position: absolute;
  left: 50%;
  bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  transform: translateX(-50%);
  min-height: 3.5rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  background: var(--ink);
  color: var(--plate);
  font-family: var(--f-d);
  font-size: 1.75rem;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.intro-enter:hover { background: var(--plate); color: var(--ink); box-shadow: inset 0 0 0 0.18rem var(--ink); }
.intro :focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.intro.is-leaving .intro-skip, .intro.is-leaving .intro-enter, .intro.is-playing .intro-skip, .intro.is-playing .intro-enter { opacity: 0; pointer-events: none; transition: opacity 0.2s linear; }
@media (max-width: 1023px) {
  .intro-mark { width: min(64vw, 52vh); top: 44%; }
  .intro-enter { font-size: 1.375rem; min-height: 3.25rem; }
}

/* ---------- plates and pictures ---------- */
.plate { background: var(--plate); }
.pic { position: relative; background: var(--plate); aspect-ratio: 16 / 9; overflow: hidden; }
.pic > img, .pic > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic > video { opacity: 0; transition: opacity 0.4s var(--ease); }
.pic > video.is-on { opacity: 1; }

/* the strip: the only place type touches footage, a label on the picture's bottom edge */
.strip {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: calc(100% - 1.5rem);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 0.9rem 0.65rem;
  font-size: max(0.9375rem, 14px);
  font-weight: 650;
  line-height: 1.25;
}
.strip .tag { margin-right: 0.35em; }

/* ---------- home: the board row ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas: "sign sign sign sign pic pic pic pic pic pic pic pic" "h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 .";
  column-gap: var(--gap);
  row-gap: 2.25rem;
  padding: 0.5rem var(--pad) 0;
}
.sign { grid-area: sign; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.sign img { width: auto; height: 100%; max-height: 100%; object-fit: contain; }
.board .pic { grid-area: pic; }
.board h1 { grid-area: h1; font-size: 6rem; }
@media (max-width: 1023px) {
  .board {
    grid-template-areas: "sign sign sign sign sign h1 h1 h1 h1 h1 h1 h1" "pic pic pic pic pic pic pic pic pic pic pic pic";
    row-gap: 1rem;
    padding-top: 0.25rem;
    align-items: center;
  }
  .sign { padding: 0.5rem; aspect-ratio: 1320 / 1460; }
  .sign img { height: auto; width: 100%; }
  .board h1 { font-size: 2.15rem; line-height: 0.92; padding-left: 0.25rem; }
}

/* ---------- section scaffolding (no kickers, no numbering) ---------- */
.block { padding: 6rem var(--pad) 0; }
.block > h2, .block-head { font-size: 4.5rem; margin-bottom: 2.25rem; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.block-head h2 { font-size: 4.5rem; }
.block-head a { font-weight: 750; font-size: max(1.125rem, 16px); display: inline-flex; align-items: center; min-height: 44px; }
.page-h1 { padding: 1.5rem var(--pad) 0; font-size: 11rem; line-height: 0.86; }
.page-lede { padding: 1.5rem var(--pad) 0; max-width: 46rem; font-size: max(1.375rem, 18px); font-weight: 550; line-height: 1.3; }
@media (max-width: 1023px) {
  .block { padding-top: 3.5rem; }
  .block > h2, .block-head h2 { font-size: 2.6rem; }
  .block > h2, .block-head { margin-bottom: 1.25rem; }
  .page-h1 { font-size: 4.25rem; padding-top: 0.75rem; }
  .page-lede { font-size: 1.125rem; padding-top: 1rem; }
}

/* ---------- the menu: three panels like a lit board (packages | off the menu | ticket) ---------- */
.menu-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.menu-cols { grid-column: 1 / 10; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: calc(var(--gap) * 1.5); align-items: start; }
.ticket-col { grid-column: 10 / 13; position: sticky; top: 1.5rem; }
/* category heads are white bands with black type, the header strip of a menu board panel */
.cat { background: var(--ink); color: var(--paper); font-size: 1.75rem; line-height: 1; padding: 0.7rem 1rem 0.75rem; margin: 0 0 0.5rem; }
.cat-note { margin: 0.25rem 0 0.5rem; padding: 0 1rem; font-weight: 600; max-width: 34rem; }
.menu-lines { display: flex; flex-direction: column; }
.menu-item {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(1.25rem, 1fr) auto;
  align-items: end;
  column-gap: 0.6rem;
  width: 100%;
  padding: 0.9rem 1rem 1rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-item:hover { background: var(--wash); }
.menu-item.is-selected { background: var(--ink); color: var(--paper); }
.menu-item:focus-visible { outline-offset: -3px; }
.menu-item.is-selected:focus-visible { outline-color: var(--paper); }
.menu-label, .menu-item strong { font-family: var(--f-d); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: -0.01em; }
.menu-item strong { font-variant-numeric: tabular-nums; }
.menu-item strong.is-quote { font-family: var(--f-t); font-weight: 750; font-size: 1.1875rem; letter-spacing: 0.005em; line-height: 1.1; }
.leader { border-bottom: 0.22rem dotted currentColor; margin-bottom: 0.3rem; min-width: 1.25rem; }
.menu-copy { grid-column: 1 / -1; display: block; margin-top: 0.45rem; font-size: max(1rem, 15px); font-weight: 520; line-height: 1.35; max-width: 40rem; }
.menu-desc { display: inline; }
.menu-note { display: inline; font-weight: 750; }
.menu-note::before { content: " "; }
.menu-group--custom .menu-label { font-size: 1.5rem; }
.menu-group--custom .menu-item { padding-top: 0.75rem; padding-bottom: 0.8rem; }
@media (max-width: 1023px) {
  .menu-cols { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  .menu-group--custom { margin-top: 2rem; }
  .ticket-col { grid-column: 1 / -1; position: static; margin-top: 1.25rem; }
  .cat { font-size: 1.375rem; padding: 0.6rem 0.75rem 0.65rem; }
  .menu-item { column-gap: 0.45rem; padding: 0.75rem 0.75rem 0.85rem; }
  .menu-label, .menu-item strong { font-size: 1.5rem; }
  .menu-group--custom .menu-label { font-size: 1.3rem; }
  .menu-item strong.is-quote { font-size: 1.0625rem; }
  .leader { border-bottom-width: 0.19rem; margin-bottom: 0.25rem; }
  .menu-copy { font-size: 0.9375rem; margin-top: 0.35rem; }
  .cat-note { padding: 0 0.75rem; }
}

/* ---------- menu photos (/packages): two of his videos under the package lines they illustrate ----------
   Live /packages: Servin' on "For release day", AMG Music on "For bigger rollouts". The credit strip hangs under the
   picture (at this size a strip on the picture would cover a third of it); tap plays the video in place. */
.menu-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1.75rem; }
.shot { display: flex; flex-direction: column; }
.shot-strip { flex: 1; background: var(--ink); color: var(--paper); padding: 0.5rem 1rem 0.6rem; font-size: max(0.9375rem, 14px); font-weight: 650; line-height: 1.25; }
.shot-strip .tag { margin-right: 0.3em; }
.shot figcaption { margin-top: 0.7rem; padding: 0 1rem; } /* type lines up with the menu lines above */
.shot-for { display: block; font-size: 1.3rem; line-height: 1; }
.shot-line { display: block; margin-top: 0.35rem; font-size: max(1rem, 15px); font-weight: 520; line-height: 1.35; }
@media (max-width: 1023px) {
  .menu-shots { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.25rem; }
  .shot-strip, .shot figcaption { padding-left: 0.75rem; padding-right: 0.75rem; }
  .shot-for { font-size: 1.2rem; }
  .shot-line { font-size: 0.9375rem; }
}
@media (min-width: 576px) and (max-width: 1023px) { .menu-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }

/* ---------- the ticket ---------- */
.ticket-slot { position: relative; overflow: hidden; padding-top: 0.375rem; }
.ticket-slot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.375rem; background: var(--ink); z-index: 2; }
.ticket-slot::after { content: ""; position: absolute; left: 0; right: 0; top: 0.375rem; height: 0.18rem; background: var(--paper); z-index: 2; }
.menu-ticket { background: var(--ink); color: var(--paper); padding: 1.4rem 1.4rem 1.4rem; }
.menu-ticket.is-printing { animation: feed 0.5s var(--ease); }
@keyframes feed { from { transform: translateY(-101%); } to { transform: none; } }
.ticket-head { font-weight: 750; font-size: max(1rem, 15px); }
.ticket-name { font-family: var(--f-d); font-size: 2.25rem; line-height: 0.95; margin-top: 0.85rem; }
.ticket-copy { margin-top: 0.75rem; font-weight: 550; font-size: max(1.0625rem, 16px); line-height: 1.35; }
.ticket-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 0.9rem; border-top: 0.22rem dotted var(--paper); }
.ticket-total span { font-weight: 750; }
.ticket-total strong { font-family: var(--f-d); font-weight: 400; font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.send {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-d);
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
}
.send:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.menu-ticket :focus-visible { outline-color: var(--paper); }
.ticket-alt { margin-top: 0.85rem; font-size: max(0.9375rem, 15px); font-weight: 550; }
.ticket-alt a { font-weight: 750; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1023px) {
  .menu-lines .ticket-slot { margin: 0 0 0.75rem; }
  .menu-ticket { padding: 1.1rem 1rem 1.15rem; }
  .ticket-name { font-size: 1.875rem; margin-top: 0.6rem; }
  .ticket-total strong { font-size: 1.875rem; }
  .send { font-size: 1.375rem; min-height: 3.25rem; }
}

/* ---------- the board of work (video cards) ---------- */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* home: the three videos he features, right under his reel, in his order. On desktop the picture row of the
   board mirrors the sign row above it: one big plate on the left, two stacked on the right. */
.block--featured { padding-top: 4.5rem; }
@media (min-width: 1024px) {
  .wall--home { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .wall--home > * { grid-column: span 6; }
  .wall--home:has(> .video-card:nth-child(3)) > .video-card:first-child { grid-column: 1 / 9; grid-row: 1 / 3; }
  .wall--home:has(> .video-card:nth-child(3)) > .video-card:first-child .video-frame { aspect-ratio: auto; height: 100%; }
  .wall--home:has(> .video-card:nth-child(3)) > .video-card:nth-child(n+2) { grid-column: 9 / 13; }
  .wall--home > .video-card:first-child .video-meta h3 { font-size: 2.25rem; }
  .wall--home > .video-card:first-child .video-meta p { -webkit-line-clamp: 2; }
  .wall--home > .video-card:first-child .yt-play { width: 3.75rem; height: 3.75rem; }
  .wall--home > .video-card:first-child .yt-play::after { left: 1.45rem; top: 1.15rem; border-left-width: 1.15rem; border-top-width: 0.72rem; border-bottom-width: 0.72rem; }
}
.wall--work .featured-video { grid-column: span 2; grid-row: span 2; }
.video-card { position: relative; background: var(--plate); }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--plate); cursor: pointer; }
.video-frame:focus-visible { outline-offset: -3px; }
.video-frame .yt-facade, .video-frame .yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-frame .yt-poster { object-fit: cover; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--plate); }
/* his preview loop sits over the poster and shows once it is really playing (portfolio.js) */
.video-frame .yt-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s linear; pointer-events: none; }
.video-frame.is-looping .yt-loop { opacity: 1; }
.yt-play { position: absolute; right: 0; bottom: 0; z-index: 2; width: 3rem; height: 3rem; background: var(--ink); }
.yt-play::after { content: ""; position: absolute; left: 1.15rem; top: 0.9rem; border-left: 0.95rem solid var(--paper); border-top: 0.6rem solid transparent; border-bottom: 0.6rem solid transparent; }
.video-frame.is-playing .yt-play, .video-frame.is-playing ~ .video-meta { display: none; }
.video-hint { display: none; }
.video-meta {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: calc(100% - 4rem);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 0.9rem 0.7rem;
  pointer-events: none;
}
.video-meta h3 { font-family: var(--f-d); font-weight: 400; font-size: 1.3rem; line-height: 1; letter-spacing: -0.01em; }
.video-meta p { margin-top: 0.3rem; font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.featured-video .video-meta p { -webkit-line-clamp: 2; }
.featured-video .video-meta h3 { font-size: 2rem; }
.video-card.is-file .video-meta { top: 0; bottom: auto; }
.channel-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: 1.25rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.channel-tile strong { font-family: var(--f-d); font-weight: 400; font-size: 2.5rem; line-height: 0.95; }
.channel-tile span { margin-top: 0.5rem; font-weight: 650; }
.channel-tile:hover { background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 0.2rem var(--ink); }
/* on the wall the channel link closes the board as one full-width line, whatever the number of videos */
.wall--work .channel-tile { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1.5rem; padding: 1.5rem 1.75rem; }
.wall--work .channel-tile span { margin-top: 0; }
@media (max-width: 1023px) {
  .block--featured { padding-top: 2.75rem; }
  /* phones: the label hangs under the picture, so the whole frame of his video stays visible */
  .video-card .video-meta { position: relative; max-width: none; pointer-events: auto; }
  .video-card .video-meta p { -webkit-line-clamp: 2; }
  .video-frame.is-playing ~ .video-meta { display: block; }
  .wall { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .wall--work .featured-video { grid-column: auto; grid-row: auto; }
  .video-meta h3, .featured-video .video-meta h3 { font-size: 1.3rem; }
  .video-meta { max-width: calc(100% - 3.25rem); padding: 0.5rem 0.75rem 0.55rem; }
  .yt-play { width: 2.75rem; height: 2.75rem; }
  .yt-play::after { left: 1.05rem; top: 0.8rem; }
  .channel-tile strong { font-size: 1.875rem; }
  .wall--work .channel-tile { padding: 1.1rem 1rem; flex-direction: column; }
}

/* ---------- frames (stills) and film cuts ---------- */
.frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.still-card { position: relative; background: var(--plate); aspect-ratio: 16 / 9; overflow: hidden; }
.still-card img { width: 100%; height: 100%; object-fit: cover; }
.still-card-lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* the owner's caption for each still (studio label + title): the board's strip, like the film cuts below */
.still-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: calc(100% - 1.5rem);
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 0.9rem 0.65rem;
  font-size: max(0.9375rem, 14px);
  font-weight: 650;
  line-height: 1.25;
}
.still-caption .d { margin-right: 0.3em; letter-spacing: 0; }
.films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.film .pic { cursor: pointer; }
.film .pic iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.film .pic.is-playing .strip, .film .pic.is-playing .yt-play { display: none; }
.after-note { margin-top: 1.5rem; font-weight: 600; }
@media (max-width: 1023px) {
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  /* phones: the caption hangs under the still, so the whole frame stays visible (as the video labels do) */
  .still-card, .still-card-lead { display: flex; flex-direction: column; aspect-ratio: auto; }
  .still-card img { height: auto; aspect-ratio: 16 / 9; }
  .still-card-lead { grid-column: 1 / -1; grid-row: auto; }
  .still-card:nth-child(even):last-child { grid-column: 1 / -1; }
  .still-caption { position: relative; flex: 1; max-width: none; padding: 0.4rem 0.6rem 0.5rem; font-size: 14px; line-height: 1.2; }
  .films { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ---------- packages page ---------- */
.after-send { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.after-send p { grid-column: 1 / 7; font-size: max(1.375rem, 18px); font-weight: 550; line-height: 1.3; }
.after-send .proof { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.after-send .proof .pic:first-child { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  .after-send p, .after-send .proof { grid-column: 1 / -1; }
  .after-send p { font-size: 1.125rem; }
  .after-send .proof { margin-top: 1.5rem; gap: 0.5rem; }
}

/* ---------- booking: the ticket is the form ---------- */
.booking-panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: 2.5rem var(--pad) 0; }
.booking-panel .ticket-slot { grid-column: 1 / 9; }
/* the slip's paper sits on a wrapper, not on <form> (WebKit's getComputedStyle misreports a form that
   has a control named "name", which broke the contrast check) */
.order { background: var(--ink); color: var(--paper); padding: 1.75rem 2rem 2rem; }
.booking-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 2rem;
  color: var(--paper);
}
.booking-form .ticket-head { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.field { display: flex; flex-direction: column; padding: 0.85rem 0 0.15rem; border-bottom: 0.15rem solid var(--paper); min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 750; font-size: max(0.9375rem, 15px); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--f-t);
  font-size: max(1.125rem, 16px);
  font-weight: 550;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--paper); opacity: 0.72; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.field select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M0 0h14L7 9z' fill='%23000000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  background-size: 0.875rem auto;
  cursor: pointer;
}
.field input[type="date"] { min-height: 3rem; line-height: 2rem; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.4; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.booking-form button[type="submit"] {
  grid-column: 1 / -1;
  min-height: 4rem;
  margin-top: 1.75rem;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-d);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.booking-form button[type="submit"]:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.booking-form button:focus-visible { outline-color: var(--paper); }
.form-note, .form-status { grid-column: 1 / -1; margin-top: 0.9rem; font-weight: 550; font-size: max(0.9375rem, 15px); }
.form-status:empty { display: none; }
.booking-aside { grid-column: 10 / 13; }
.booking-aside h2 { font-size: 2.25rem; margin-bottom: 1rem; }
.booking-aside p + p { margin-top: 0.9rem; }
.booking-aside ul { list-style: none; padding: 0; margin-top: 1.25rem; }
.booking-aside li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; }
@media (max-width: 1023px) {
  .booking-panel { padding-top: 1.25rem; }
  .booking-panel .ticket-slot, .booking-aside { grid-column: 1 / -1; }
  .order { padding: 1.1rem 1rem 1.25rem; }
  .booking-form { grid-template-columns: minmax(0, 1fr); }
  .booking-form button[type="submit"] { font-size: 1.5rem; min-height: 3.5rem; }
  .booking-aside { margin-top: 2.5rem; }
  .booking-aside h2 { font-size: 1.75rem; }
}

/* ---------- 404 ---------- */
.lost { padding: 3rem var(--pad) 0; }
.lost h1 { font-size: 9rem; line-height: 0.86; max-width: 70rem; }
.lost p { margin-top: 1.5rem; font-size: max(1.375rem, 18px); font-weight: 550; }
.lost ul { list-style: none; padding: 0; margin-top: 1.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.lost li a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-d); font-size: 2.25rem; }
@media (max-width: 1023px) { .lost h1 { font-size: 3.75rem; } .lost li a { font-size: 1.75rem; } }

/* ---------- footer ---------- */
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-top: 8rem;
  padding: 2.25rem var(--pad) 2.5rem;
  border-top: 0.24rem dotted var(--ink);
}
.foot-name { grid-column: 1 / 6; font-size: 3rem; }
.foot-name small { display: block; margin-top: 0.6rem; font-family: var(--f-t); font-size: max(1rem, 15px); font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.foot ul { grid-column: 6 / 13; list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 1.75rem; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 750; }
@media (max-width: 1023px) {
  .foot { margin-top: 4.5rem; padding-top: 1.5rem; }
  .foot-name, .foot ul { grid-column: 1 / -1; }
  .foot-name { font-size: 1.45rem; }
  .foot ul { justify-content: flex-start; margin-top: 1rem; column-gap: 1.25rem; }
}

/* owner's draft preview (studio ?draft=1) */
.draft-preview-banner { position: sticky; top: 0; z-index: 100; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1rem; background: var(--ink); color: var(--paper); font-weight: 650; text-align: center; }
.draft-preview-banner a { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .menu-ticket.is-printing { animation: none; }
  .pic > video, .video-frame .yt-loop { transition: none; }
}


/* JDLO creator signature. Color may be tuned to the footer with --jdlo-color. */
.jdlo-credit {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35em;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 3px;
  color: inherit;
  font-family: inherit;
  font-size: max(14px, .875rem);
  line-height: 1.5;
  text-decoration: none;
  overflow: visible;
}
.jdlo-credit:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.jdlo-credit:hover .jdlo-credit__label { text-decoration: underline; text-underline-offset: .2em; }
.jdlo-credit__name {
  --jdlo-color: #ff5969;
  position: relative;
  display: inline-block;
  padding: 0 .18em .08em;
  color: var(--jdlo-color);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  text-shadow: 0 0 12px color-mix(in srgb, var(--jdlo-color) 25%, transparent);
  isolation: isolate;
}
.jdlo-credit[data-jdlo-theme="orange"] .jdlo-credit__name { --jdlo-color: #c34c08; }
.jdlo-credit[data-jdlo-theme="purple"] .jdlo-credit__name { --jdlo-color: #bd83f7; }
.jdlo-credit[data-jdlo-theme="white"] .jdlo-credit__name { --jdlo-color: #fff; }
.jdlo-credit__name::after {
  content: "";
  position: absolute;
  inset: -3px -5px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--jdlo-color) 15%, transparent), transparent 70%);
}
.jdlo-credit__spark {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--jdlo-color);
  clip-path: polygon(50% 0,61% 36%,100% 50%,61% 63%,50% 100%,38% 63%,0 50%,38% 36%);
  pointer-events: none;
  transform: scale(.35) rotate(0deg);
  opacity: .25;
  animation: jdlo-spark 4.8s ease-in-out infinite;
}
.jdlo-credit__spark--one { top: -4px; right: 3px; }
.jdlo-credit__spark--two { bottom: 0; left: -3px; width: 5px; height: 5px; animation-delay: -1.7s; }
.jdlo-credit__spark--three { top: 1px; left: 45%; width: 4px; height: 4px; animation-delay: -3.1s; }
.jdlo-credit__drip {
  position: absolute;
  left: 61%;
  top: calc(100% - 3px);
  width: 3px;
  height: 7px;
  border-radius: 0 0 70% 70%;
  background: var(--jdlo-color);
  transform-origin: center top;
  pointer-events: none;
  opacity: 0;
  animation: jdlo-drip 6.4s ease-in infinite;
}
@keyframes jdlo-spark {
  0%, 45%, 100% { opacity: .2; transform: scale(.35) rotate(0deg); }
  62% { opacity: 1; transform: scale(1.15) rotate(45deg); }
  78% { opacity: .35; transform: scale(.55) rotate(90deg); }
}
@keyframes jdlo-drip {
  0%, 68%, 100% { opacity: 0; transform: translateY(-2px) scaleY(.2); }
  73% { opacity: .85; transform: translateY(0) scaleY(1); }
  86% { opacity: 0; transform: translateY(13px) scaleY(.65); }
}
@media (prefers-reduced-motion: reduce) {
  .jdlo-credit__spark, .jdlo-credit__drip { animation: none; }
  .jdlo-credit__spark { opacity: .65; transform: scale(.7); }
  .jdlo-credit__drip { display: none; }
}

.foot .foot-credit { grid-column: 1 / -1; margin-top: 1rem; }