/* Tiny Galaxy Studios — mobile first. Base = phone. Media queries scale UP. */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-var.woff2") format("woff2");font-weight:100 900;font-display:swap;}
:root{--sky:#07080C;--ink:#EDEBE4;--dim:#8B8F99;--line:#171B23;--gold:#E8C87A;--soft:#B9B7B0;--gut:22px;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:dark;-webkit-text-size-adjust:100%;}
::selection{background:rgba(232,200,122,.28);}
body{background:var(--sky);color:var(--ink);line-height:1.55;overflow-x:hidden;
  font-family:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;-webkit-font-smoothing:antialiased;}
img,video{display:block;max-width:100%;}
.lbl{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;}

/* ── nav: same on every page ── */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;padding:20px var(--gut);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;}
.nav.solid{position:relative;border-bottom:1px solid var(--line);padding-top:22px;padding-bottom:22px;}
.nav a{text-decoration:none;}
.nav .brand{color:var(--gold);text-indent:.3em;white-space:nowrap;}
.nav .links{display:flex;gap:18px;align-items:baseline;}
.nav .links a{color:rgba(237,235,228,.58);text-indent:.3em;position:relative;padding-bottom:3px;transition:color .3s;}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--ink);}
.nav .links a:hover::after,.nav .links a[aria-current]::after{transform:scaleX(1);}
.nav .mail{display:none;}

/* ── hero ── */
.hero{position:relative;min-height:92svh;overflow:hidden;background:#05060A;display:flex;align-items:flex-end;}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero .poster{object-position:50% 34%;}
.hero video{opacity:0;transition:opacity 1.4s ease;}
.hero video.on{opacity:1;}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(5,6,10,.97) 0%,rgba(5,6,10,.74) 34%,rgba(5,6,10,.3) 64%,rgba(5,6,10,.6) 100%);}
.grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hbody{position:relative;z-index:3;width:100%;padding:0 var(--gut) 46px;}
.hbody .in{max-width:1400px;margin:0 auto;}
h1{font-size:clamp(30px,8.2vw,72px);font-weight:300;font-variation-settings:"opsz" 144;
  line-height:1.05;letter-spacing:-.02em;max-width:15ch;text-wrap:balance;}
.lede{margin-top:20px;font-size:16px;font-weight:400;color:rgba(237,235,228,.84);max-width:46ch;line-height:1.6;}
.cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;width:1px;height:30px;
  background:linear-gradient(to bottom,transparent,rgba(237,235,228,.5));animation:cue 2.4s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.25;transform:translateX(-50%) scaleY(.6);}50%{opacity:1;transform:translateX(-50%) scaleY(1);}}

/* ── filmstrip ── */
.strip{display:grid;grid-template-columns:1fr;background:#05060A;}
.pane{position:relative;overflow:hidden;cursor:pointer;background:#05060A;aspect-ratio:9/13;}
.pane img,.pane video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .9s ease,filter .7s ease;}
.pane img{filter:saturate(.85) brightness(.78);}
.pane video{opacity:0;}
.pane.on video{opacity:1;}
.pane.on img{opacity:0;}
.pane::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,6,10,.9) 0%,rgba(5,6,10,.25) 34%,transparent 62%);}
.pane + .pane{box-shadow:0 -1px 0 rgba(237,235,228,.07);}
.pmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px var(--gut);}
.pmeta a,.pmeta .nm{display:block;color:var(--ink);text-decoration:none;font-size:19px;font-weight:400;
  font-variation-settings:"opsz" 72;letter-spacing:-.01em;transition:color .35s;}
.pmeta a:hover{color:var(--gold);}
.pmeta .s{display:block;margin-top:6px;color:rgba(237,235,228,.5);}

/* ── sections ── */
section{padding:56px var(--gut);border-top:1px solid var(--line);}
section .in{max-width:1400px;margin:0 auto;}
.eyebrow{color:var(--dim);margin-bottom:26px;}
h2{font-size:clamp(24px,6vw,42px);font-weight:300;font-variation-settings:"opsz" 144;
  line-height:1.1;letter-spacing:-.02em;margin-bottom:10px;}

.names{padding-left:0;padding-right:0;}
.names .in{padding:0 var(--gut);}
.names .eyebrow{text-align:center;margin-bottom:30px;}
.names .rows{display:flex;flex-direction:column;gap:8px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);}
.names .row{overflow:hidden;}
.names .rail{display:flex;gap:8px;width:max-content;animation:drift 62s linear infinite;}
.names .row.rev .rail{animation-direction:reverse;}
.names .row:nth-child(2) .rail{animation-duration:78s;}
.names .row:nth-child(3) .rail{animation-duration:70s;}
.names .tile{width:208px;flex:0 0 auto;border:1px solid var(--line);padding:18px 16px;min-height:98px;
  display:flex;flex-direction:column;justify-content:flex-end;background:rgba(255,255,255,.012);
  transition:border-color .45s ease,background .45s ease;}
.names .tile b{display:block;font-weight:400;font-size:15px;color:var(--ink);line-height:1.28;letter-spacing:-.01em;}
.names .tile em{font-style:normal;display:block;margin-top:8px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@media(hover:hover) and (pointer:fine){
  .names .rows:hover .rail{animation-play-state:paused;}
  .names .tile:hover{border-color:rgba(232,200,122,.5);background:rgba(232,200,122,.05);}
}
@media(prefers-reduced-motion:reduce){ .names .rail{animation:none;} }

.big{font-size:clamp(28px,7.5vw,58px);font-weight:300;font-variation-settings:"opsz" 144;
  line-height:1.1;letter-spacing:-.02em;}
.big em{font-style:normal;color:var(--gold);}
.reach .txt{margin-top:24px;}
.reach p{font-size:16px;color:var(--soft);line-height:1.65;max-width:48ch;}
.reach .tag{color:var(--gold);margin-bottom:12px;}

/* ── the pitch page ── */
.cols{display:grid;grid-template-columns:1fr;gap:44px;}
.col h3{color:var(--gold);margin-bottom:20px;}
.col li{list-style:none;font-size:16px;color:var(--soft);line-height:1.6;padding:14px 0;border-top:1px solid var(--line);}
.col li:first-of-type{border-top:0;padding-top:0;}
.col li b{color:var(--ink);font-weight:500;display:block;margin-bottom:4px;}
.col p{font-size:16px;color:var(--soft);line-height:1.68;}
.col p + p{margin-top:14px;}
.col p b{color:var(--ink);font-weight:500;}
.places{margin-top:26px;font-style:italic;color:var(--soft);font-size:16px;max-width:44ch;}

/* ── contact ── */
.end{padding:78px var(--gut) 68px;border-top:1px solid var(--line);text-align:center;}
.end .lbl{color:var(--dim);margin-bottom:26px;}
.end a.m{font-size:clamp(24px,7vw,62px);font-weight:300;font-variation-settings:"opsz" 144;
  color:var(--ink);text-decoration:none;letter-spacing:-.02em;transition:color .35s;word-break:break-word;}
.end a.m:hover{color:var(--gold);}
.end p{margin-top:22px;font-size:16px;color:var(--soft);max-width:40ch;margin-inline:auto;}
.foot{margin-top:52px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;color:var(--dim);}
.foot a{color:var(--dim);text-decoration:none;}
.foot a:hover{color:var(--ink);}

/* ── tablet ── */
@media(min-width:700px){
  :root{--gut:32px;}
  .lbl{font-size:10.5px;letter-spacing:.34em;}
  .nav{padding:28px var(--gut);}
  .nav .mail{display:inline;}
  .hbody{padding-bottom:54px;}
  .lede{font-size:17px;}
  .strip{grid-template-columns:repeat(2,1fr);}
  .pane + .pane{box-shadow:none;}
  .pane{box-shadow:inset 1px 0 0 rgba(237,235,228,.07);}
  section{padding:76px var(--gut);}
  .cols{grid-template-columns:repeat(2,1fr);gap:48px;}
  .names .rows{gap:10px;}
  .names .rail{gap:10px;}
  .names .tile{width:246px;padding:22px 20px;min-height:112px;}
  .names .tile b{font-size:16.5px;}
  .reach .in{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;}
  .reach .txt{margin-top:0;}
}

/* ── desktop ── */
@media(min-width:1000px){
  :root{--gut:40px;}
  .nav{padding:34px var(--gut);}
  .nav .links{gap:26px;}
  .hero{min-height:100svh;}
  .hbody{padding-bottom:62px;}
  .hbody .in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:end;}
  .lede{margin-top:0;padding-bottom:9px;font-size:18px;max-width:38ch;}
  .strip{grid-template-columns:repeat(4,1fr);height:82svh;min-height:520px;}
  .pane{aspect-ratio:auto;}
  .pmeta{padding:26px 24px;}
  .pmeta a,.pmeta .nm{font-size:21px;}
  section{padding:92px var(--gut);}
  .cols{grid-template-columns:repeat(3,1fr);gap:64px;}
  .end{padding:84px var(--gut) 96px;}
  .foot{margin-top:74px;gap:26px;}
}
@media(hover:hover) and (pointer:fine){
  .pane:hover img,.pane:hover video{transform:scale(1.035);}
  .pane:hover img{filter:saturate(1) brightness(.92);}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ── hero with nothing on it: the video is the whole point, so the heavy
   bottom gradient that existed to make headline text readable is gone.
   Only enough darkening at the very top to keep the nav legible. ── */
.hero.clean{align-items:stretch;}
.hero.clean::after{background:
  linear-gradient(to bottom,rgba(5,6,10,.55) 0%,rgba(5,6,10,.12) 16%,rgba(5,6,10,0) 34%,rgba(5,6,10,0) 78%,rgba(5,6,10,.45) 100%);}
.hero.clean .poster{object-position:50% 42%;}/* 2026-09-21 ~7:25pm PT: REVERTED ON ROSS'S WORD, "we should revert that change".
   A 14% value was set on BOTH the poster and the film to stop the chef's head being cut on a wide
   screen. It fixed that one frame and wrecked the others: the hero plays an 18s-46s window containing
   several different shots, and ONE fixed crop cannot serve them all. Ross saw it live and called it.
   ⛔ DO NOT re-tune this by picking a number off a single frame. The framing mismatch between the
   still and the film is real and still unfixed; the fix is a properly framed source, not a crop value. */

/* ── the headline band: the line that used to sit on the video, centred ── */
.statement{border-top:0;padding-top:64px;padding-bottom:64px;text-align:center;}
.statement h1{max-width:24ch;margin:0 auto;}

/* ── the closing line: a pull quote, not body copy ── */
.reason{text-align:center;padding-top:56px;padding-bottom:56px;position:relative;
  background:radial-gradient(120% 90% at 50% 50%,rgba(232,200,122,.055) 0%,rgba(232,200,122,0) 62%);}
.reason .in{position:relative;}
.reason .in::before{content:"";display:block;width:80px;height:1px;margin:0 auto 30px;
  background:linear-gradient(to right,transparent,rgba(232,200,122,.85),transparent);}
.reason p{font-family:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  font-size:clamp(24px,5.6vw,34px);font-weight:300;font-variation-settings:"opsz" 144;
  line-height:1.32;letter-spacing:-.015em;color:var(--ink);max-width:26ch;margin:0 auto;text-wrap:balance;}
.reason p em{font-style:normal;color:var(--gold);}

.reach .tag a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(232,200,122,.4);padding-bottom:2px;transition:border-color .3s;}
.reach .tag a:hover{border-bottom-color:var(--gold);}

@media(min-width:700px){
  .statement{padding-top:92px;padding-bottom:92px;}
  .reason{padding-top:52px;padding-bottom:52px;}
  .reason p{max-width:30ch;}
}
@media(min-width:1000px){
  .statement{padding-top:128px;padding-bottom:124px;}
  .statement h1{max-width:26ch;}
  .reason{padding-top:48px;padding-bottom:48px;}
  .reason .in::before{width:96px;margin-bottom:34px;}
  .reason p{font-size:clamp(34px,3.1vw,46px);max-width:31ch;}
}

/* ── the places line, under the centred headline ── */
.statement .places{margin:30px auto 0;max-width:40ch;font-style:italic;
  font-size:16px;line-height:1.75;color:rgba(185,183,176,.8);text-wrap:balance;}
@media(min-width:700px){ .statement .places{margin-top:36px;font-size:17px;max-width:52ch;} }
@media(min-width:1000px){ .statement .places{margin-top:42px;font-size:18px;max-width:58ch;} }

/* hero sound toggle — muted autoplay is the only autoplay browsers allow,
   so sound is opt-in on a tap and fades rather than snapping on. */
.snd{position:absolute;right:16px;bottom:16px;z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px 9px 12px;border-radius:999px;cursor:pointer;
  background:rgba(8,9,14,.42);border:1px solid rgba(232,200,122,.28);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  color:rgba(240,238,232,.9);font:inherit;
  transition:border-color .35s ease,background .35s ease,opacity .5s ease;}
.snd .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1;}
.snd .ico{position:relative;width:13px;height:13px;flex:0 0 auto;}
.snd .ico::before{content:"";position:absolute;left:0;top:3px;
  width:5px;height:7px;background:currentColor;
  clip-path:polygon(0 0,55% 0,100% -40%,100% 140%,55% 100%,0 100%);}
.snd .ico::after{content:"";position:absolute;left:6px;top:1px;width:7px;height:11px;
  border:1.5px solid currentColor;border-left:0;border-radius:0 8px 8px 0;
  opacity:0;transition:opacity .3s ease;}
.snd[aria-pressed="true"] .ico::after{opacity:1;}
.snd[aria-pressed="true"]{border-color:rgba(232,200,122,.6);background:rgba(232,200,122,.13);}
@media(hover:hover) and (pointer:fine){
  .snd:hover{border-color:rgba(232,200,122,.62);background:rgba(8,9,14,.62);}
}
@media(min-width:1000px){ .snd{right:28px;bottom:26px;} }

/* ────────────────────────────────────────────────────────────────────────
   2026-09-21, the audit pass. Backup: _shared.css.bak-20260921-onepass
   ──────────────────────────────────────────────────────────────────────── */

/* Headings were added to the markup for screen readers. They must not be seen. */
.names .eyebrow{font-weight:400;}
.pmeta h2{font:inherit;font-weight:inherit;margin:0;}

/* A keyboard user could not see where they were: the focus ring computed to none.
   Public-sector reviewers check this, and the Renton page is a bid credential. */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;}
.snd:focus-visible{outline-offset:4px;}

/* On a phone the top bar had no way to reach him at all — the address was hidden
   below 700px and the How we work link was removed. A visitor had to scroll the
   whole page to find an email address. */
.nav .mail{display:inline;}
@media(max-width:699px){
  .nav{align-items:center;gap:10px;}
  .nav .mail{font-size:9px;letter-spacing:.2em;}
}

/* Four things you tap were under the 44px minimum. Padding only — every one of
   them sits in generous space, so nothing moves. */
.nav .brand{display:inline-block;padding:14px 6px 14px 0;margin:-14px 0;}
.nav .links a{display:inline-block;padding:15px 4px;margin:-15px 0;}
.nav .links a::after{bottom:12px;}
.snd{padding:15px 18px 15px 16px;}
.reach .tag a{display:inline-block;padding:11px 2px;margin:-11px 0;}
.end a.m{display:inline-block;padding:8px 4px;}

/* The first phone screen was the film and nothing else — the headline began at
   exactly 1.00 screens, so a reviewer skimming on a phone might never see what
   the studio does. Ross's instruction stands: nothing goes over the film. So the
   film ends a little sooner and the headline arrives instead.
   Bonus, and the reason 82 was chosen: at 375 wide the box becomes 375x666, a
   ratio of 0.563 against the source's 0.5627 — the whole frame fits, nothing is
   cropped away on a phone at all. */
@media(max-width:699px){
  .hero{min-height:82svh;}
  .statement{padding-top:52px;}
}

/* ────────────────────────────────────────────────────────────────────────
   THE FILM VIEWER — 2026-09-22. Backup: _shared.css.bak-20260922-viewer
   Tapping a film in the strip opens it here instead of leaving the site.
   ⭐ In the strip the films are CROPPED to fill a wide tile. In here they
   are shown WHOLE — these are vertical cuts, so the viewer is the only
   place a visitor sees the actual frame the film was made in.
   The behaviour is copied from the hospitality page's player, read off the
   live page rather than from memory. The COLOURS are this site's own.
   ──────────────────────────────────────────────────────────────────────── */
.vw{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:rgba(5,6,10,.94);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .24s cubic-bezier(.22,.61,.36,1);padding:24px;}
.vw.is-open{display:flex;opacity:1;}
.vw-stage{position:relative;width:min(92vw,calc(82svh * 9 / 16));max-height:82svh;aspect-ratio:9/16;
  transform:scale(.96);transition:transform .24s cubic-bezier(.22,.61,.36,1);}
.vw.is-open .vw-stage{transform:scale(1);}
.vw-video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}

/* Every control fades out while the film plays and comes back on a tap or a
   pause, so nothing sits over the picture. */
.vw-close,.vw-mute,.vw-toggle{-webkit-appearance:none;appearance:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1);pointer-events:none;}
.vw-close svg,.vw-mute svg,.vw-toggle svg{flex-shrink:0;display:block;}
.vw-close{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));
  width:44px;height:44px;border:0;background:none;color:var(--ink);z-index:3;}
.vw-toggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(8,9,14,.42);
  border:1.5px solid rgba(232,200,122,.55);color:var(--ink);z-index:2;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.vw-mute{position:absolute;bottom:12px;right:12px;width:44px;height:44px;border-radius:50%;
  background:rgba(8,9,14,.45);border:1px solid rgba(232,200,122,.28);color:var(--ink);z-index:3;}
.vw.controls-visible .vw-close,.vw.controls-visible .vw-mute{opacity:1;pointer-events:auto;}
.vw.controls-visible .vw-toggle{opacity:1;pointer-events:auto;}

.vw-cap{position:absolute;left:0;right:0;bottom:-52px;text-align:center;
  opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1);pointer-events:none;}
.vw.controls-visible .vw-cap{opacity:1;}
.vw-cap-name{font-size:19px;font-weight:400;color:var(--ink);line-height:1.2;margin:0;}
.vw-cap-sub{margin:6px 0 0;color:var(--dim);}

/* The whole tile is the button now, so it has to be reachable by keyboard. */
.pane:focus-visible{outline:2px solid var(--gold);outline-offset:-4px;}

@media(max-width:699px){
  .vw{padding:14px;}
  .vw-stage{width:min(94vw,calc(74svh * 9 / 16));max-height:74svh;}
  .vw-cap{bottom:-46px;}
  .vw-cap-name{font-size:17px;}
}
@media(prefers-reduced-motion:reduce){ .vw,.vw *{transition:none !important;} }

/* "Up next" — the name of the film that follows, shown in its last six seconds
   so the roll from one to the next is never a jump cut. Copied in behaviour from
   the Kappo Kappo page, read off that live page. */
.vw-next{position:absolute;left:12px;bottom:12px;z-index:3;display:flex;gap:8px;align-items:baseline;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  opacity:0;transition:opacity .4s cubic-bezier(.22,.61,.36,1);pointer-events:none;}
.vw-next b{font-weight:400;letter-spacing:.14em;color:var(--gold);}
.vw.showing-next .vw-next{opacity:1;}
@media(max-width:699px){ .vw-next{font-size:9px;letter-spacing:.2em;left:10px;bottom:10px;} }

/* The end card, after the last film. It replaces the picture rather than
   sitting over it, so the stage never shows a frozen final frame. Every word
   on it is already on the page and none of it is a link — the close button is
   the way back, and everything a visitor might want is on the page behind. */
.vw-end{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;
  background:#05060A;padding:26px 20px;overflow:auto;}
.vw.at-end .vw-end{display:flex;}
.vw.at-end .vw-video,.vw.at-end .vw-toggle,.vw.at-end .vw-mute,.vw.at-end .vw-next,.vw.at-end .vw-cap{
  opacity:0;pointer-events:none;}
.vw-end-in{width:100%;max-width:30ch;text-align:center;}
.vw-end-places{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 10px;margin-bottom:26px;}
.vw-end-places span{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.5;}
.vw-end-q{font-size:clamp(20px,5.4vw,27px);font-weight:300;font-variation-settings:"opsz" 144;
  color:var(--ink);line-height:1.2;letter-spacing:-.01em;margin:0;}
.vw-end-mail{margin:14px 0 0;font-size:15px;color:var(--gold);letter-spacing:.01em;}
@media(max-width:699px){
  .vw-end{padding:20px 16px;}
  .vw-end-places{gap:4px 8px;margin-bottom:20px;}
  .vw-end-places span{font-size:8px;letter-spacing:.12em;}
  .vw-end-mail{font-size:14px;}
}

/* The address on the end card is a real mailto, matching the closing section's
   own markup on this page. ⛔ It is the ONLY link on the card — the places stay
   as text, because they are proof of work rather than destinations, and linking
   them is how the old outbound band comes back through the side door.
   The target clears 44px so a thumb can land on it. */
.vw-end-mail a{color:inherit;text-decoration:none;display:inline-block;padding:11px 8px;margin:-11px 0;
  border-bottom:1px solid rgba(232,200,122,.38);transition:border-color .3s;}
.vw-end-mail a:hover{border-bottom-color:var(--gold);}

/* ────────────────────────────────────────────────────────────────────────
   2026-09-22 — WHAT ROSS FOUND ON HIS PHONE, AND WHY IT HAPPENED.
   He opened a film and there was no visible way out. The exit WAS there and
   it was invisible: every control was hidden while the film played, and the
   only thing that brought them back was moving a mouse. A phone has no mouse,
   so the one route left was tapping the picture — which PAUSED the film.
   ⭐ The fix is not a new control. It is that the way out must never need to
   be discovered: the close button is now visible the whole time.
   ──────────────────────────────────────────────────────────────────────── */
.vw-close{opacity:1 !important;pointer-events:auto !important;}

/* Skip forward and back. Next is what he asked for; back costs nothing and a
   visitor who skips past one always wants it. Neither appears on the end card
   — the roll has stopped there by design and the card is the destination. */
.vw-prev,.vw-nextb{position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;background:rgba(8,9,14,.42);
  border:1px solid rgba(232,200,122,.32);color:var(--ink);z-index:3;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s cubic-bezier(.22,.61,.36,1);pointer-events:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.vw-prev{left:10px;} .vw-nextb{right:10px;}
.vw-prev svg,.vw-nextb svg{flex-shrink:0;display:block;}
.vw.controls-visible .vw-prev,.vw.controls-visible .vw-nextb{opacity:1;pointer-events:auto;}
.vw.at-end .vw-prev,.vw.at-end .vw-nextb{opacity:0;pointer-events:none;}
@media(max-width:699px){
  .vw-prev,.vw-nextb{width:44px;height:44px;}
  .vw-prev{left:6px;} .vw-nextb{right:6px;}
}