/* THE VAULT · THE REEL · shared/vault-reel.css (improvements, 2026-09-28)
   The art style Kevin chose on 27 and 28 September 2026 ("The Vault: art
   style"): the video series, as an interface. Tactile, with polish and
   nuance; it does not always scream. Small tracked capitals for labels,
   gold hairlines instead of boxes, light sentence case for the story, and
   the picture always alive under scanlines and grain.

   ONE ROOM AT A TIME. A page opts in on its <html>:
       <html data-look="reel" data-film>
   and links this file after vault-fonts.css and vault-sheets.css. Pages that
   have not converted never match a selector here, so the shared pieces
   (the sheets, the door, the menu, the language switch) wear the reel only
   inside a converted room. The moving parts are shared/vault-reel.js.

   Every colour has an owner (the art style, section 04):
     near-black #050505  the stage
     warm white #F2EFE8  the story
     gold       #FFAA00  the house, and the only bright colour: the key
                         word, the ball, the main action
     sand       #D4B37F  the reader and the quiet brand. An outline next to
                         gold, never a fill. Kevin, 2026-09-28: sand
                         replaces Chalk as the second voice
     cyan       #7DF9FF  the machine: the hologram ring and Sync only
     red        #FF5E6B  the heartbeat: suspense and loss, in story text only
   Three families, one job each: Saira (light for everything you read,
   narrow and tracked for labels), Bebas Neue (the punch word and big
   numbers, once per moment), Michroma (the Vault's mark and stamps). */

:root[data-look="reel"]{
  --bg:#050505; --ink:#F2EFE8; --muted:#9C978D; --dim:#6E6A62;
  --gold:#FFAA00; --gold-hi:#FFC24D; --sand:#D4B37F; --sand-rgb:212,179,127;
  --cyan:#7DF9FF; --red:#FF5E6B; --line:rgba(255,255,255,.12);
  --fb:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ft:'Bebas Neue','Saira',sans-serif;
  --fk:'Michroma','Saira',system-ui,sans-serif;
  --e:cubic-bezier(.22,1,.28,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color-scheme:dark;
}
[data-look="reel"] body{font-family:var(--fb);font-weight:300;}

/* ---------- the film: scanlines stronger than the grain, both always there ----------
   Fine lines that never darken the picture, a grain that crawls, and thin
   letterbox bars framing the screen. The bars sit under the chrome (the top
   bar, the sheets) and over the page, as they sit behind a screen's words
   in the art style; the lines and grain lie over everything, the way film
   does. On a laptop the screen is the 480px column.
   The lines still crawl 2px every 9s, but in 72 small steps (2026-10-12), a
   thirty-sixth of a pixel every eighth of a second, each landing on one of
   the grain's own steps: the screen is redrawn only when the grain moves,
   where a smooth crawl had it redrawn every frame. Motion off, both hold
   their first frame (the end of this file). */
[data-film] .reel-bars,[data-film] .reel-fx{position:fixed;top:0;bottom:0;left:50%;width:100%;max-width:480px;
  transform:translateX(-50%);pointer-events:none;}
[data-film] .reel-bars{z-index:40;
  background:linear-gradient(#000,#000) top/100% 3.5vh no-repeat,linear-gradient(#000,#000) bottom/100% 3vh no-repeat;}
[data-film] .reel-fx{z-index:9500;overflow:hidden;}
[data-film] .reel-fx::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:0;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 1.2px,rgba(0,0,0,.2) 1.2px 2px);animation:reelRoll 9s steps(72) infinite;}
[data-film] .reel-fx::after{content:"";position:absolute;inset:-40%;background:var(--grain);background-size:160px 160px;
  opacity:.13;mix-blend-mode:overlay;animation:reelGrain .5s steps(4) infinite;}
@keyframes reelRoll{to{transform:translateY(2px);}}
@keyframes reelGrain{0%{transform:translate(0,0);}25%{transform:translate(-5%,3%);}50%{transform:translate(4%,-4%);}75%{transform:translate(-2%,-3%);}100%{transform:translate(0,0);}}
/* a light grade on every picture: slightly warm, slightly desaturated, never crushed */
[data-film] .reel-grade{filter:contrast(1.05) saturate(.86) sepia(.08) brightness(.98);}
/* the picture is alive, but it never shakes: a slight weave and a rare, soft flicker */
[data-film] .reel-live{animation:reelWeave 1.8s steps(2) infinite,reelFlick 6.1s linear infinite;}
@keyframes reelWeave{0%{translate:0 0;}50%{translate:.3px -.3px;}100%{translate:0 0;}}
@keyframes reelFlick{0%,46%,50%,100%{opacity:1;}48%{opacity:.965;}}

/* ---------- story text arrives: word by word out of a soft blur ----------
   VaultReel.words() wraps each word in .rw and paces it by its punctuation;
   this is how each one sharpens into place. */
[data-look="reel"] .rw-on .rw{display:inline-block;opacity:0;filter:blur(4px);animation:rwIn .3s linear forwards;}
@keyframes rwIn{to{opacity:1;filter:blur(0);}}

/* ---------- the pointer: the hairline ball ----------
   The ball drawn in gold hairlines, a true one-pixel line at any size. Its
   seams turn slowly, and it blinks twice like a projectionist's cue mark.
   The markup is VaultReel.BALL (shared/vault-reel.js), or the same <svg>
   written into the page. The turn is the whole <svg>, not its seams
   (2026-10-08): the rim is a circle, so it looks the same, and an element's
   transform runs on the compositor, where rotating the seams inside the SVG
   repainted every frame on the main thread (the saga reader: about 250
   repaints in 6 s, its main thread 51% busy on a slow phone, 28% without). */
.vball{display:inline-block;width:18px;height:18px;line-height:0;}
.vball svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 3px rgba(255,170,0,.5));
  animation:vballCue 4.2s ease-in-out infinite,vballTurn 18s linear infinite;}
.vball .rim{fill:rgba(255,170,0,.06);stroke:#FFAA00;stroke-width:1px;vector-effect:non-scaling-stroke;}
.vball .seams path{fill:none;stroke:#FFAA00;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;}
@keyframes vballTurn{to{transform:rotate(360deg);}}
@keyframes vballCue{0%,86%,100%{opacity:1;}89%{opacity:.3;}92%{opacity:1;}95%{opacity:.3;}}

/* ---------- the two buttons of the house ----------
   The main action is paint (see "the main actions, painted" below): no
   frame, the brush's own strokes in gold, and the words on top in Saira at
   its widest and boldest, near-black (Kevin, 2026-09-29). The reader's own way (sand): a light line with a short rule
   under it. The tracking would push capitals off centre, so the same space
   is given back on the left. */
.reel-main{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:0 20px 0 calc(20px + .05em);
  border:0;border-radius:0;background:none;color:var(--paint-ink,#0B0907);text-decoration:none;cursor:pointer;
  font-family:var(--fb);font-stretch:125%;font-weight:640;font-size:13px;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;text-align:center;
  box-shadow:none;transition:transform .15s ease;}
.reel-main:active,.reel-main.press{transform:scale(.985);}
.reel-main:focus-visible,.reel-second:focus-visible{outline:2px solid var(--sand);outline-offset:3px;}
.reel-second{position:relative;display:flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px 6px;border:0;background:none;
  color:var(--sand);text-decoration:none;cursor:pointer;font-family:var(--fb);font-size:14px;font-weight:300;line-height:1.3;text-align:center;}
.reel-second::after{content:"";position:absolute;left:36%;right:36%;bottom:4px;height:1px;background:rgba(212,179,127,.5);transition:left .3s var(--e),right .3s var(--e);}
.reel-second:hover::after{left:24%;right:24%;}

/* ---------- the language, a line of two tracked capitals ---------- */
[data-look="reel"] .vlang{border:0;border-radius:0;overflow:visible;gap:2px;}
[data-look="reel"] .vlang button{padding:6px 4px 6px calc(4px + .22em);font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;
  letter-spacing:.22em;line-height:1.4;color:rgba(242,239,232,.55);background:none;}
[data-look="reel"] .vlang button:hover{color:var(--ink);}
[data-look="reel"] .vlang button[aria-current="true"]{color:var(--gold);background:none;box-shadow:inset 0 -1px 0 rgba(255,170,0,.8);}

/* ---------- the sheets (shared/vault-sheets.css), in the reel ---------- */
[data-look="reel"] .scrim{background:rgba(0,0,0,.78);}
[data-look="reel"] .sheet{border-radius:22px 22px 0 0;border-top:1px solid rgba(255,170,0,.5);
  background:linear-gradient(180deg,#0f0e0b 0%,#080807 42%,#050505 100%);box-shadow:0 -30px 80px rgba(0,0,0,.72),0 60px 0 #050505;}
[data-look="reel"] .sheet::after{background:radial-gradient(closest-side,rgba(255,170,0,.1),transparent);}
[data-look="reel"] .sheet-close{border:0;border-radius:0;background:none;color:rgba(242,239,232,.85);}
[data-look="reel"] .sheet-close:hover{color:var(--gold);border:0;}
[data-look="reel"] .sheet-close svg{width:16px;height:16px;}
[data-look="reel"] .sheet-eyebrow{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;letter-spacing:.3em;}
[data-look="reel"] .sheet-title{font-family:var(--fb);font-weight:300;font-size:clamp(1.55rem,7vw,1.85rem);letter-spacing:0;text-transform:none;line-height:1.2;margin:14px 0 10px;}
[data-look="reel"] .sheet-title em{font-weight:500;color:var(--gold);background:none;-webkit-text-fill-color:currentColor;text-shadow:0 0 14px rgba(255,170,0,.45);animation:none;}
[data-look="reel"] .sheet-sub{font-size:15px;font-weight:300;color:rgba(242,239,232,.78);}
[data-look="reel"] .sheet-fine{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);line-height:1.7;}
/* the wire's dispatches: rows between hairlines, not cards */
[data-look="reel"] .news-list{gap:0;}
[data-look="reel"] .news-item{border:0;border-radius:0;background:none;box-shadow:none;padding:16px 2px 17px;border-bottom:1px solid rgba(255,255,255,.08);}
[data-look="reel"] .news-item.unread{border-color:rgba(255,255,255,.08);background:none;}
[data-look="reel"] .news-item.unread::after{right:4px;top:20px;width:5px;height:5px;}
[data-look="reel"] .news-meta{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.2em;}
[data-look="reel"] .news-tag{border:0;border-radius:0;padding:0;color:var(--gold);}
[data-look="reel"] .news-t{font-size:17px;font-weight:400;line-height:1.35;margin-top:9px;}
[data-look="reel"] .news-item:not(.unread) .news-t{color:rgba(242,239,232,.8);}
[data-look="reel"] .news-b{font-size:14px;font-weight:300;line-height:1.55;color:rgba(242,239,232,.72);}
[data-look="reel"] .news-law{font-style:normal;font-weight:300;color:var(--gold);}
[data-look="reel"] .news-link{border:0;border-radius:0;background:none;padding:6px 0 7px;margin-top:10px;color:var(--gold);
  font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;letter-spacing:.26em;box-shadow:inset 0 -1px 0 rgba(255,170,0,.55);}
[data-look="reel"] .news-link:hover{background:none;}
[data-look="reel"] .news-empty{font-weight:300;}

/* ---------- the door (shared/vault-threshold.js), in the reel ----------
   The door injects its own styles at runtime, after this file; every rule
   here names the room first, so it wins on weight, not on order. */
[data-look="reel"] .vth-veil{background:rgba(0,0,0,.78);}
[data-look="reel"] .vth-sheet{color:var(--ink);font-family:var(--fb);font-weight:300;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,170,0,.5);
  background:linear-gradient(180deg,#0f0e0b 0%,#080807 42%,#050505 100%);}
[data-look="reel"] .vth-sheet::after{background:radial-gradient(closest-side,rgba(255,170,0,.1),transparent);}
[data-look="reel"] .vth-fx{display:none;}
[data-look="reel"] .vth-x{border:0;border-radius:0;background:none;color:rgba(242,239,232,.85);}
[data-look="reel"] .vth-x:hover{color:var(--gold);border:0;}
[data-look="reel"] .vth-x svg{width:16px;height:16px;}
[data-look="reel"] .vth-k,[data-look="reel"] .vth-k2{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;letter-spacing:.3em;}
[data-look="reel"] .vth-h{font-family:var(--fb);font-weight:300;font-size:clamp(1.55rem,7vw,1.85rem);letter-spacing:0;text-transform:none;line-height:1.2;margin-top:14px;}
[data-look="reel"] .vth-h em,[data-look="reel"] .vth-h2 em{font-style:normal;background:none;-webkit-text-fill-color:currentColor;animation:none;color:var(--gold);}
[data-look="reel"] .vth-h em{font-weight:500;text-shadow:0 0 14px rgba(255,170,0,.45);}
/* the pass's line is a title card: thin capitals, then the gold punch */
[data-look="reel"] .vth-h2{margin-top:12px;font-family:var(--fb);font-stretch:50%;font-weight:230;font-size:19px;line-height:1.3;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,239,232,.92);}
[data-look="reel"] .vth-h2 em{font-family:var(--ft);font-stretch:100%;font-weight:400;font-size:1.75em;line-height:1;letter-spacing:.045em;text-shadow:0 2px 18px rgba(0,0,0,.5);}
[data-look="reel"] .vth-l{font-size:15px;font-weight:300;color:rgba(242,239,232,.78);}
[data-look="reel"] .vth-pass .vth-l{font-size:14px;}
[data-look="reel"] .vth-code{border:0;border-radius:0;background:rgba(212,179,127,.07);min-height:46px;padding:0 16px;color:var(--sand);font-size:15px;font-weight:400;
  box-shadow:inset 0 0 0 1px rgba(212,179,127,.55);}
[data-look="reel"] .vth-code:hover{background:rgba(212,179,127,.13);border:0;}
[data-look="reel"] .vth-code svg{color:var(--sand);}
[data-look="reel"] .vth-or{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.2em;color:var(--dim);}
[data-look="reel"] .vth-or::before,[data-look="reel"] .vth-or::after{background:rgba(242,239,232,.14);}
[data-look="reel"] .vth-fine{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.2em;color:var(--dim);}
[data-look="reel"] .vth-new{font-size:15px;font-weight:400;color:var(--ink);}
[data-look="reel"] .vth-pass{border:0;border-radius:0;background:none;padding:20px 4px 18px;
  box-shadow:inset 0 1px 0 rgba(255,170,0,.45),inset 0 -1px 0 rgba(255,170,0,.45);}
[data-look="reel"] .vth-email{border:0;border-radius:0;background:rgba(255,255,255,.03);box-shadow:inset 0 -1px 0 rgba(242,239,232,.32);
  font-family:var(--fb);font-weight:400;font-size:16px;padding:13px 12px;}
[data-look="reel"] .vth-email:focus{border:0;box-shadow:inset 0 -1px 0 var(--gold),0 1px 0 rgba(255,170,0,.4);}
[data-look="reel"] .vth-email.bad{box-shadow:inset 0 -1px 0 var(--red);}
[data-look="reel"] .vth-go{min-height:50px;border-radius:0;background:none;color:var(--paint-ink,#0B0907);
  font-family:var(--fb);font-stretch:125%;font-weight:640;font-size:13px;letter-spacing:.05em;padding:0 16px 0 calc(16px + .05em);
  box-shadow:none;transition:transform .15s ease;}
[data-look="reel"] .vth-go:hover{box-shadow:none;background:none;}
[data-look="reel"] .vth-go:active{transform:scale(.985);background:none;color:var(--paint-ink,#0B0907);}
[data-look="reel"] .vth-legal{font-size:12px;font-weight:300;}
[data-look="reel"] .vth-nocard{margin-top:14px;font-family:var(--fm);font-stretch:70%;font-weight:440;font-size:11px;letter-spacing:.2em;color:var(--gold);}
[data-look="reel"] .vth-mem{border:0;border-radius:0;background:none;padding:12px 8px;}
[data-look="reel"] .vth-mem:hover{background:none;}
[data-look="reel"] .vth-mem b{font-weight:300;font-size:15px;color:var(--sand);}
[data-look="reel"] .vth-mem b i{color:var(--sand);}
[data-look="reel"] .vth-mem span{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.2em;color:var(--muted);margin-top:6px;}
[data-look="reel"] .vth-skip{font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;letter-spacing:.26em;color:rgba(212,179,127,.75);}
[data-look="reel"] .vth-skip:hover{color:var(--sand);}
[data-look="reel"] .vth-tongue{border:0;border-radius:0;background:none;padding:6px 4px;color:rgba(212,179,127,.85);font-size:14px;font-weight:300;}
[data-look="reel"] .vth-tongue:hover{border:0;background:none;color:var(--sand);}
[data-look="reel"] .vth-tongue svg,[data-look="reel"] .vth-tongue i{color:var(--sand);}

/* ---------- the menu (shared/vault-menu.js builds it this way inside the reel) ----------
   A screen of its own: the room darkens from the left, and the list stands
   at the foot like a film's closing titles. Numbered, light, the first line
   lit with a gold dot; Close in sand. The menu key is the hairline ball. */
.vreel{position:fixed;inset:0;z-index:95;visibility:hidden;pointer-events:none;}
.vreel.show{visibility:visible;pointer-events:auto;}
.vreel-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.62));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease;}
.vreel.show .vreel-scrim{opacity:1;}
/* the logo and the key: placed by script exactly over the top bar's own */
.vreel-brand{position:absolute;left:18px;top:calc(12px + env(safe-area-inset-top));line-height:0;opacity:0;transition:opacity .3s ease;}
.vreel-brand img{display:block;height:44px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.55));}
.vreel-mark{display:block;line-height:1;font-family:var(--fk);font-size:9.5px;letter-spacing:.3em;color:var(--gold);text-shadow:0 0 14px rgba(255,170,0,.4);white-space:nowrap;}
.vreel-key{position:absolute;right:6px;top:calc(8px + env(safe-area-inset-top));display:grid;place-items:center;width:40px;height:38px;padding:0;border:0;background:none;
  cursor:pointer;opacity:0;transition:opacity .3s ease;}
.vreel.show .vreel-brand,.vreel.show .vreel-key{opacity:1;}
.vreel-sheet{position:absolute;left:50%;bottom:0;width:100%;max-width:480px;transform:translateX(-50%);
  padding:0 26px calc(40px + 3vh + env(safe-area-inset-bottom));max-height:100%;overflow-y:auto;}
.vreel-label{display:block;margin:0 0 12px 2px;font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);}
.vreel-sheet .vreel-k{display:block;margin:20px 0 4px 2px;font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim);}
.vreel-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 2px;border:0;border-bottom:1px solid rgba(255,255,255,.08);
  background:none;color:rgba(242,239,232,.62);text-decoration:none;text-align:left;cursor:pointer;
  font-family:var(--fb);font-size:24px;font-weight:300;line-height:1.15;transition:color .2s ease;}
.vreel-item:hover,.vreel-item:focus-visible{color:var(--ink);outline:none;}
.vreel-item:focus-visible{box-shadow:inset 0 -1px 0 var(--sand);}
.vreel-item .n{flex:0 0 26px;font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.2em;color:var(--gold);}
.vreel-item.lit{color:var(--ink);}
.vreel-item.lit::after{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,170,0,.8);}
.vreel-note{display:none;padding:6px 2px 10px 38px;font-size:14px;line-height:1.5;color:var(--muted);}
.vreel-note.show{display:block;}
.vreel-close{display:block;margin-top:16px;padding:8px 2px;border:0;background:none;cursor:pointer;color:var(--sand);
  font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;}
.vreel-close:hover{color:#E8CD9C;}
/* the lines rise in order when the menu opens */
.vreel-sheet>*{opacity:0;transform:translate3d(0,12px,0);transition:opacity .45s var(--e),transform .55s var(--e);}
.vreel.show .vreel-sheet>*{opacity:1;transform:none;transition-delay:calc(.05s + var(--i,0) * .045s);}
/* 2026-09-30 (Kevin: "always shows contextually what it should, and a bit more flair"). The heading is a departure
   board: the place's name flips in, a letter a beat. The place the visitor is in is painted with the house's brush,
   in ink on the gold; its rooms open under it on a gold hairline, each with where the visitor stands. The account,
   the language and the app are the small doors underneath, in sand. The key, the hairline ball, rolls in. */
.vreel-label{min-height:1.2em;white-space:nowrap;}
.vreel-label span{display:inline-block;width:.86em;text-align:center;}
.vreel-you{margin:-4px 0 8px 2px;font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.vreel-item .vreel-place{transition:transform .3s var(--e);}
.vreel-item:hover .vreel-place{transform:translateX(5px);}
.vreel-item:hover .n,.vreel-item:focus-visible .n{text-shadow:0 0 10px rgba(255,170,0,.85);}
.vreel-item.lit::after{display:none;}
.vreel-item.lit .vreel-place{position:relative;isolation:isolate;margin:6px 0;padding:0 6px;color:var(--paint-ink,#0B0907);font-weight:520;}
.vreel-item.lit:hover .vreel-place{transform:none;}
.vreel-rooms{position:relative;margin:4px 0 8px 38px;padding-left:14px;}
.vreel-rooms::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold),rgba(255,170,0,.08));
  transform:scaleY(0);transform-origin:top;transition:transform .7s var(--e) .3s;}
.vreel.show .vreel-rooms::before{transform:scaleY(1);}
.vreel-sub{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;color:rgba(242,239,232,.74);text-decoration:none;
  font-family:var(--fb);font-weight:300;font-size:17px;line-height:1.2;transition:color .2s ease;}
.vreel-sub i{font-style:normal;font-family:var(--fm);font-stretch:70%;font-weight:380;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.vreel-sub:hover,.vreel-sub:focus-visible{color:var(--ink);outline:none;}
.vreel-sub:focus-visible{box-shadow:inset 0 -1px 0 var(--sand);}
.vreel-tools{display:flex;flex-wrap:wrap;gap:2px 20px;margin-top:16px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
.vreel-tool{padding:8px 0;border:0;background:none;color:var(--sand);text-decoration:none;cursor:pointer;font-family:var(--fb);font-weight:300;font-size:15px;transition:color .2s ease;}
.vreel-tool:hover,.vreel-tool:focus-visible{color:#E8CD9C;outline:none;}
.vreel-tool:focus-visible{box-shadow:inset 0 -1px 0 var(--sand);}
.vreel.show .vreel-key .vball{animation:vreelRoll .9s var(--e);}
@keyframes vreelRoll{from{transform:translateX(-18px) rotate(-240deg);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){
  .vreel.show .vreel-key .vball{animation:none;}
  .vreel-rooms::before,.vreel-item .vreel-place{transition:none;}
}

/* ---------- the main actions, painted (Kevin, 2026-09-29) ----------
   Looking at the button's brush beside the page transition's: "the transition
   is irregular and tilted, if we are using this the button should have no
   borders and a broader font that sits on top of the brush strokes". So a
   main action is paint: the transition's own brush, tilted bands of bristles,
   ragged where it lands and lifts, laid in the button's colour and drawn for
   the button's own size by shared/vault-reel.js (--swatch; a still copy, vault-paint.svg,
   stands in until it is drawn). The paint's box is the button and 12px above
   and below, 14px each side: room for the tilt and for ragged ends, and the
   brush keeps all of it inside. The words sit on it in Saira at its widest
   (125%) and bold, in near-black, and the brush runs its full core under every
   one of them. Every five seconds a fresh coat goes over it on
   the same tilt, brighter (--swatch2), and settles back in. The paint never
   leaves, so the button never goes back to being a line of text. A device
   that asks for less motion keeps the paint and skips the fresh coat. */
[data-look="reel"] .reel-main,[data-look="reel"] .vth-go,[data-look="reel"] .confirm-btn,[data-look="reel"] .gate-go,[data-look="reel"] .offer button.cta,[data-look="reel"] .stage-gate a.gate-seat,[data-look="reel"] .stage-gate a.gate-own,[data-look="reel"] .vp-gate a.vp-gate-seat,[data-look="reel"] .vp-gate a.vp-gate-own,[data-look="reel"] .vp-gate button.vp-gate-seat,[data-look="reel"] .viewer-enter{position:relative;isolation:isolate;}
[data-look="reel"] .reel-main::before,[data-look="reel"] .vth-go::before,[data-look="reel"] .confirm-btn::before,[data-look="reel"] .gate-go::before,[data-look="reel"] .offer button.cta::before,[data-look="reel"] .stage-gate a.gate-seat::before,[data-look="reel"] .stage-gate a.gate-own::before,[data-look="reel"] .vp-gate a.vp-gate-seat::before,[data-look="reel"] .vp-gate a.vp-gate-own::before,[data-look="reel"] .vp-gate button.vp-gate-seat::before,[data-look="reel"] .viewer-enter::before,[data-look="reel"] .cta-brush::before{content:"";display:block;position:absolute;inset:-12px -14px;z-index:-1;pointer-events:none;
  background:var(--paint,var(--gold));-webkit-mask:var(--swatch,url("vault-paint.svg")) 0 0/100% 100% no-repeat;
  mask:var(--swatch,url("vault-paint.svg")) 0 0/100% 100% no-repeat;transition:filter .2s ease;}
[data-look="reel"] .reel-main::after,[data-look="reel"] .vth-go::after,[data-look="reel"] .confirm-btn::after,[data-look="reel"] .gate-go::after,[data-look="reel"] .offer button.cta::after,[data-look="reel"] .stage-gate a.gate-seat::after,[data-look="reel"] .stage-gate a.gate-own::after,[data-look="reel"] .vp-gate a.vp-gate-seat::after,[data-look="reel"] .vp-gate a.vp-gate-own::after,[data-look="reel"] .vp-gate button.vp-gate-seat::after,[data-look="reel"] .viewer-enter::after,[data-look="reel"] .cta-brush::after{content:"";display:block;position:absolute;inset:-12px -14px;z-index:-1;pointer-events:none;
  background:var(--paint-hi,var(--gold-hi));-webkit-mask:var(--swatch2,url("vault-paint-coat.svg")) 0 0/100% 100% no-repeat;
  mask:var(--swatch2,url("vault-paint-coat.svg")) 0 0/100% 100% no-repeat;
  opacity:0;clip-path:polygon(-20% 0,-20% 0,-40% 100%,-40% 100%);animation:ctaCoat 5s cubic-bezier(.22,1,.28,1) infinite;}
[data-look="reel"] .reel-main:hover::before,[data-look="reel"] .vth-go:hover::before,[data-look="reel"] .confirm-btn:hover::before,[data-look="reel"] .gate-go:hover::before,[data-look="reel"] .offer button.cta:hover::before,[data-look="reel"] .stage-gate a.gate-seat:hover::before,[data-look="reel"] .stage-gate a.gate-own:hover::before,[data-look="reel"] .vp-gate a.vp-gate-seat:hover::before,[data-look="reel"] .vp-gate a.vp-gate-own:hover::before,[data-look="reel"] .vp-gate button.vp-gate-seat:hover::before,[data-look="reel"] .viewer-enter:hover::before,[data-look="reel"] .cta:hover .cta-brush::before{filter:brightness(1.1);}
[data-look="reel"] .reel-main:active::before,[data-look="reel"] .vth-go:active::before,[data-look="reel"] .confirm-btn:active::before,[data-look="reel"] .gate-go:active::before,[data-look="reel"] .offer button.cta:active::before,[data-look="reel"] .stage-gate a.gate-seat:active::before,[data-look="reel"] .stage-gate a.gate-own:active::before,[data-look="reel"] .vp-gate a.vp-gate-seat:active::before,[data-look="reel"] .vp-gate a.vp-gate-own:active::before,[data-look="reel"] .vp-gate button.vp-gate-seat:active::before,[data-look="reel"] .viewer-enter:active::before,[data-look="reel"] .cta:active .cta-brush::before{filter:brightness(1.22);}
[data-look="reel"] .cta-rail .cta-brush{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;}
[data-look="reel"] .stage-gate a.gate-own::after,[data-look="reel"] .vp-gate a.vp-gate-own::after,[data-look="reel"] .offer-own button.cta::after{animation-delay:.8s;}
[data-look="reel"] .confirm-btn.idle::before,[data-look="reel"] .confirm-btn.idle::after{opacity:0!important;animation:none!important;}
@keyframes ctaCoat{
  0%{clip-path:polygon(-20% 0,-20% 0,-40% 100%,-40% 100%);opacity:.85;}
  26%{clip-path:polygon(-20% 0,120% 0,100% 100%,-40% 100%);opacity:.85;}
  50%{clip-path:polygon(-20% 0,120% 0,100% 100%,-40% 100%);opacity:.85;}
  72%{clip-path:polygon(-20% 0,120% 0,100% 100%,-40% 100%);opacity:0;}
  100%{clip-path:polygon(-20% 0,-20% 0,-40% 100%,-40% 100%);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  [data-look="reel"] .reel-main::after,[data-look="reel"] .vth-go::after,[data-look="reel"] .confirm-btn::after,[data-look="reel"] .gate-go::after,[data-look="reel"] .offer button.cta::after,[data-look="reel"] .stage-gate a.gate-seat::after,[data-look="reel"] .stage-gate a.gate-own::after,[data-look="reel"] .vp-gate a.vp-gate-seat::after,[data-look="reel"] .vp-gate a.vp-gate-own::after,[data-look="reel"] .vp-gate button.vp-gate-seat::after,[data-look="reel"] .viewer-enter::after,[data-look="reel"] .cta-brush::after{animation:none;opacity:0;}
}

/* a device that asks for less motion: the film holds still, nothing rises */
@media (prefers-reduced-motion: reduce){
  [data-film] .reel-fx::before,[data-film] .reel-fx::after,[data-film] .reel-live,.vball svg,.vball .seams{animation:none;}
  .vreel-scrim,.vreel-brand,.vreel-key,.vreel-sheet>*{transition:none;}
  .vreel-sheet>*{transform:none;}
  [data-look="reel"] .rw-on .rw{animation:none;opacity:1;filter:none;}
}