/* SKF v02 theme for Publii — Soup Kitchen Films
   VCR front panel: split SKF banner, OSD bar, CRT hero, VCR menu, cassette shelf, J-card. */
:root {
  --tape: #0f0d0b;      /* page: black tape shell */
  --shell: #1b1915;     /* raised plastic panels */
  --rule: #34302a;      /* panel seams */
  --label: #eee5d0;     /* cassette-label cream text */
  --muted: #a39a87;     /* secondary text */
  --phosphor: #ffb547;  /* amber OSD readout */
  --y: #EDBC40; --o: #E9662D; --r: #E83C37; --m: #AC287B; --b: #1F4B91; --g: #499D49; /* the logo rainbow */
  --font-display: "Michroma", "Eurostile", "Arial Black", sans-serif;
  --font-osd: "VT323", "Courier New", monospace;
  --font-body: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --spine-h: 300px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tape); color: var(--label); font-family: var(--font-body); font-size: 17px; line-height: 1.6; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 3px; }
[hidden] { display: none !important; }

/* scanlines + vignette over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.4) 100%);
}
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; background: var(--phosphor); color: var(--tape); padding: 6px 12px; font-family: var(--font-osd); font-size: 20px; }
.skip:focus { left: 8px; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.osd { font-family: var(--font-osd); color: var(--phosphor); letter-spacing: .04em; text-shadow: 0 0 6px rgba(255,181,71,.45); }
.stripes { display: flex; height: 6px; }
.stripes span { flex: 1; }
.stripes span:nth-child(1){background:var(--y)} .stripes span:nth-child(2){background:var(--o)} .stripes span:nth-child(3){background:var(--r)}
.stripes span:nth-child(4){background:var(--m)} .stripes span:nth-child(5){background:var(--b)} .stripes span:nth-child(6){background:var(--g)}

/* ---------- MASTHEAD: SKF banner split in two, always full width ---------- */
.masthead { position: relative; display: block; overflow: hidden; background: #000; height: clamp(40px, calc(100vw / 11.2), 100px); }
.mh-rain, .mh-word { position: absolute; top: 0; height: 100%; width: auto; display: block; }
.mh-rain { left: 0; aspect-ratio: 8400 / 2917; }
.mh-word { right: env(safe-area-inset-right, 0px); aspect-ratio: 7400 / 2917; }

/* ---------- OSD BAR + MENU ---------- */
.topbar { position: sticky; top: 0; z-index: 55; background: var(--tape); border-bottom: 1px solid var(--rule); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px; }
.brand { flex: 0 0 auto; text-decoration: none; }
.brand-mark { display: block; width: 74px; height: auto; color: var(--label); }
.rec { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; flex: 0 0 auto; }
.rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--r); box-shadow: 0 0 8px var(--r); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.osd-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-toggle { display: none; background: none; border: 2px solid var(--phosphor); padding: 2px 12px 0; font-size: 22px; cursor: pointer; }
.nav-list, .nav-list .sub { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; justify-content: center; font-family: var(--font-osd); font-size: 22px; text-transform: uppercase; }
.nav-list > li { position: relative; }
.nav-list a, .nav-list .sep { color: var(--phosphor); text-decoration: none; text-shadow: 0 0 6px rgba(255,181,71,.45); background: none; border: 0; font: inherit; text-transform: inherit; letter-spacing: .04em; padding: 2px 0; cursor: pointer; }
.nav-list a:hover, .nav-list .sep:hover, .nav-list .active > a { color: var(--label); }
.nav-list .sub { display: none; position: absolute; left: -14px; top: 100%; min-width: 220px; background: var(--shell); border: 1px solid var(--rule); padding: 8px 14px; z-index: 40; }
.nav-list .sub li { padding: 2px 0; }
.nav-list li:hover > .sub, .nav-list li:focus-within > .sub, .nav-list li.open > .sub { display: block; }

/* ---------- HOME: HERO ---------- */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; padding-block: 64px 72px; }
.eyebrow { font-size: 24px; margin: 0 0 14px; }
.wordmark { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.04; letter-spacing: .02em; margin: 0; text-wrap: balance; text-shadow: -2px 0 rgba(232,60,55,.75), 2px 0 rgba(31,75,145,.9); }
.lede { color: var(--muted); max-width: 46ch; margin: 22px 0 30px; font-size: 18px; }
.lede p { margin: 0 0 .8em; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-block; font-family: var(--font-osd); font-size: 24px; text-decoration: none; padding: 8px 18px 6px; border: 2px solid var(--phosphor); color: var(--phosphor); background: transparent; letter-spacing: .06em; cursor: pointer; line-height: 1.1; }
.btn.solid { background: var(--phosphor); color: var(--tape); }
.btn:hover { filter: brightness(1.15); }

.crt { position: relative; background: #050504; border: 14px solid var(--shell); border-radius: 22px; box-shadow: 0 0 0 1px var(--rule), 0 30px 60px rgba(0,0,0,.6); overflow: hidden; max-width: 100%; }
.crt canvas, .crt video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; object-fit: cover; }
.crt canvas { filter: blur(.4px) saturate(1.2); }
.crt .glass { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.08), rgba(255,255,255,0) 45%), radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
.crt .hud { position: absolute; inset: 0; padding: 4% 5%; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; font-size: clamp(18px, 2.6vw, 30px); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.7); font-family: var(--font-osd); }
.hud-row { display: flex; justify-content: space-between; }

/* ---------- SECTIONS ---------- */
.sec { border-top: 1px solid var(--rule); }
.sec .wrap { padding-block: 72px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 3vw, 32px); letter-spacing: .06em; margin: 0; text-wrap: balance; }
.sec-head .osd { font-size: 22px; }
.note { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 65ch; }
.more { font-family: var(--font-osd); font-size: 22px; color: var(--phosphor); text-decoration: none; }
.more:hover { color: var(--label); }

/* VCR MENU */
.menu { background: #0a1a6e; border: 3px solid #cfd6ff; padding: 22px 26px; font-family: var(--font-osd); color: #fff; max-width: 900px; box-shadow: 0 0 0 6px var(--shell); }
.menu-title { font-size: 26px; display: flex; justify-content: space-between; border-bottom: 2px solid #cfd6ff; padding-bottom: 8px; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: grid; grid-template-columns: 22px minmax(0, 16ch) minmax(0, 1fr); gap: 12px; padding: 10px 4px; font-size: 24px; line-height: 1.2; text-decoration: none; color: inherit; }
.menu li .cur { visibility: hidden; color: var(--y); }
.menu li a:hover .cur, .menu li a:focus-visible .cur, .menu li:first-child a .cur { visibility: visible; }
.menu li a:hover, .menu li a:focus-visible { background: rgba(255,255,255,.08); outline: none; }
.menu li strong { font-weight: 400; color: var(--y); text-transform: uppercase; }
.menu li .desc { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: #dfe3ff; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.menu li .desc p { margin: 0; display: inline; }
.menu-foot { font-size: 20px; margin-top: 12px; color: #cfd6ff; }

/* BREAKDOWN WIPE */
.wipe { position: relative; max-width: 100%; border: 1px solid var(--rule); background: #000; touch-action: pan-y; }
.wipe canvas { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; }
.wipe .top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 50%)); }
.wipe .line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: var(--phosphor); box-shadow: 0 0 8px var(--phosphor); pointer-events: none; }
.wipe .tag { position: absolute; top: 12px; font-family: var(--font-osd); font-size: 24px; color: #fff; text-shadow: 2px 2px 0 #000; pointer-events: none; }
.wipe .tag.l { left: 14px; } .wipe .tag.r { right: 14px; }
.wipe-ctl { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.wipe-ctl label { font-size: 22px; }
.wipe-ctl input { flex: 1; accent-color: var(--phosphor); min-width: 0; }

/* ---------- CASSETTE SHELF (built by skf.js from poster images) ---------- */
.shelf-intro { color: var(--muted); max-width: 65ch; margin-bottom: 28px; }
.shelf-intro p { margin: 0 0 .8em; }
.shelf-intro a { color: var(--phosphor); }
.shelf-group { margin-bottom: 40px; }
.shelf-label { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.shelf-label .count { font-family: var(--font-osd); font-size: 20px; color: var(--phosphor); letter-spacing: .04em; }
.shelf {
  /* rows of spines; the gradient paints a wooden-ish ledge under every row */
  --row: calc(var(--spine-h) + 28px);
  display: flex; flex-wrap: wrap; gap: 28px 6px; padding: 14px 4px 14px;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--spine-h) + 14px), #5a5045 calc(var(--spine-h) + 14px) calc(var(--spine-h) + 16px), #2e2822 calc(var(--spine-h) + 16px) calc(var(--spine-h) + 28px), transparent calc(var(--spine-h) + 28px) var(--row));
}
.spine {
  flex: 0 0 56px; height: var(--spine-h); position: relative; overflow: hidden;
  background: var(--label); color: var(--tape); border: 0; padding: 10px 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  border-radius: 3px; box-shadow: inset -6px 0 0 rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.5);
  transition: transform .2s ease;
}
.spine:hover, .spine:focus-visible { transform: translateY(-12px); }
.spine .kind { font-family: var(--font-osd); font-size: 15px; letter-spacing: .06em; line-height: 1; }
.spine .title { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: 12.5px; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 0; max-height: calc(var(--spine-h) - 96px); overflow: hidden; }
.spine .band { width: 100%; height: 28px; flex: 0 0 auto; }
.spine .skf { width: 34px; height: auto; color: var(--tape); transform: rotate(-90deg); margin-bottom: 8px; }
/* VHS case covers, face out on the shelf (assets/vhs/*.webp) */
/* four covers to a row (two on phones); a shelf of one or two tapes shows them twice the size */
.shelf-group { container-type: inline-size; }
.shelf { --cols: 4; --gap: 24px; --cover-w: calc((100cqw - 8px - (var(--cols) - 1) * var(--gap)) / var(--cols)); --spine-h: calc(var(--cover-w) / 0.585); column-gap: var(--gap); }
.shelf.feature { --cover-w: calc((100cqw - 8px - var(--gap)) / 2); }
@media (max-width: 700px) { .shelf { --cols: 2; --gap: 14px; } }
.cover { flex: 0 0 auto; width: var(--cover-w); height: var(--spine-h); padding: 0; margin: 0; border: 0; background: none; cursor: pointer; transition: transform .2s ease; }
.cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.cover:hover, .cover:focus-visible { transform: translateY(-12px) rotate(-1deg); }
.cover:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 4px; }

dialog.case { border: 0; padding: 0; background: transparent; color: var(--label); max-width: min(560px, calc(100vw - 32px)); }
dialog.case::backdrop { background: rgba(0,0,0,.85); }
.case-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); background: var(--shell); border: 1px solid var(--rule); }
.case-box img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3; background: #000; }
dialog.case.has-cover .case-box img { object-fit: contain; aspect-ratio: 7 / 12; height: auto; padding: 18px; background: radial-gradient(circle at 50% 40%, #2a2420, #0b0a09 75%); }
.case-info { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.case-info .osd { font-size: 20px; }
.case-info h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.3; text-transform: uppercase; text-wrap: balance; }
.case-info .role { color: var(--muted); margin: 0; }
.case-info .close { margin-top: auto; align-self: flex-start; }

/* images sit above the scanline overlay (body::after, z-index 50) so posters and covers stay clean; the top bar sits above them */
.cover, .page-spine, .entry img, .entry figure, .entry video, .entry iframe { position: relative; z-index: 51; }

/* tape spine banner on service pages: the spine replaces the visible page title (kept for screen readers) */
.page-spine { display: block; width: 100%; height: auto; margin: 0 0 8px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.6)); }
.page-head .has-spine .eyebrow { margin-top: 18px; }
.page-head .has-spine .page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- SCREENING ROOM (private pages) ---------- */
.screening { display: grid; gap: 40px; margin: 8px 0 28px; }
.screening-item { margin: 0; }
.screening-frame { position: relative; z-index: 51; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--rule); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.screening-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screening-item figcaption { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; }
.screening-item figcaption .osd { font-size: 20px; color: var(--phosphor); }
.screening-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
.screening-note, .screening-empty { font-size: 20px; color: var(--muted); }

/* ---------- J-CARD CONTACT ---------- */
.jcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); background: var(--label); color: var(--tape); border-radius: 4px; overflow: hidden; max-width: 900px; }
.jcard .side { background: var(--tape); color: var(--label); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-right: 6px solid var(--o); }
.jcard .side h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: .06em; margin: 0; }
.jcard .main { padding: 28px; display: grid; gap: 18px; }
.field { display: grid; grid-template-columns: minmax(0, 10ch) minmax(0, 1fr); gap: 12px; border-bottom: 1px solid #c9bea4; padding-bottom: 10px; }
.field span:first-child { font-family: var(--font-osd); font-size: 20px; color: #6d6455; letter-spacing: .06em; }
.field span:last-child { font-weight: 500; overflow-wrap: anywhere; }
.field a { color: inherit; }
.jcard-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.copy { font-family: var(--font-osd); font-size: 22px; background: var(--tape); color: var(--phosphor); border: 0; padding: 6px 16px 4px; cursor: pointer; }
.jcard-actions .more { color: var(--tape); text-shadow: none; }

/* ---------- INNER PAGES ---------- */
.page-head { border-bottom: 1px solid var(--rule); }
.page-head .wrap { padding-block: 48px 36px; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.1; letter-spacing: .02em; margin: 0; text-wrap: balance; text-shadow: -2px 0 rgba(232,60,55,.75), 2px 0 rgba(31,75,145,.9); }
.page-hero img { display: block; width: 100%; max-height: 70vh; object-fit: cover; }
.entry { max-width: 760px; padding-block: 40px 72px; font-size: 18px; }
.entry > *:first-child { margin-top: 0; }
.entry p { margin: 0 0 1.1em; }
.entry h2, .entry h3, .entry h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; margin: 2em 0 .8em; text-wrap: balance; }
.entry h2.align-center, .entry h3.align-center, .entry h4.align-center { text-align: left; }
.entry h2 { font-size: 24px; } .entry h3 { font-size: 19px; } .entry h4 { font-size: 16px; }
.entry h3 span[style*="underline"] { text-decoration: none !important; }
.entry a { color: var(--phosphor); }
.entry strong { color: #fff; font-weight: 600; }
.entry ul, .entry ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.entry li { margin-bottom: .4em; }
.entry blockquote { margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--o); color: var(--muted); }
.entry figure { margin: 1.6em 0; }
.entry figure img { display: block; }
.entry figcaption { font-family: var(--font-osd); font-size: 18px; color: var(--muted); margin-top: 6px; }
.entry .post__image--wide, .entry .post__image--full { width: 100%; }
.entry .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 1.6em 0; }
.entry .gallery figure { margin: 0; }
.entry .gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.entry table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.entry th, .entry td { border-bottom: 1px solid var(--rule); padding: 8px 10px; text-align: left; }
.entry .shelf-group { margin-top: 10px; }
.align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; }
.subpages { border-top: 1px solid var(--rule); }
.subpages .wrap { padding-block: 40px 64px; }
.subpages ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-family: var(--font-osd); font-size: 22px; }
.subpages a { color: var(--phosphor); text-decoration: none; }
.subpages a::before { content: "▶ "; }

/* ---------- FOOTER ---------- */
.site-foot { border-top: 1px solid var(--rule); }
.site-foot .wrap { padding-block: 28px 36px; display: grid; gap: 18px; }
.ack { color: var(--muted); font-size: 15px; max-width: 75ch; }
.ack p { margin: 0 0 .6em; }
.ack strong { font-weight: 500; color: var(--label); }
.ack .align-center { text-align: left; }
.foot-row { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 22px; }
.foot-row a { color: var(--phosphor); text-decoration: none; }
.foot-row a:hover { color: var(--label); }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .osd-nav { justify-content: flex-end; }
  .nav-toggle { display: block; }
  .nav-list { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--tape); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 16px; }
  .osd-nav.open .nav-list { display: flex; }
  .nav-list > li { width: 100%; padding: 4px 0; }
  .nav-list .sub { position: static; display: block; background: none; border: 0; padding: 2px 0 2px 18px; min-width: 0; }
  .topbar .wrap { position: relative; }
  .rec { display: none; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 40px 48px; }
  .jcard { grid-template-columns: minmax(0, 1fr); }
  .jcard .side { border-right: 0; border-bottom: 6px solid var(--o); }
  .menu { padding: 16px 16px; }
  .menu li a { grid-template-columns: 22px minmax(0, 1fr); }
  .menu li .desc { grid-column: 2; }
  .case-box { grid-template-columns: minmax(0, 1fr); }
  .case-box img { aspect-ratio: 16 / 10; }
  :root { --spine-h: 240px; }
  .spine { flex-basis: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .rec i { animation: none; }
  .spine, .cover { transition: none; }
}