/* site.css — the site's look since 2026-10-13: style 6 "Your mix", chosen by Guy in the lab (decisions.md, "The site
   style is a mix of the five lab directions"). Every page that links it carries <html data-style="6">.
   Built from lab/v2.css with the other four lab styles and the lab's style bar left out. The section colours and the
   soft seams between them are set here, by section id — the lab set them by script after load, which on a real phone
   flashed the old colours first. Homepage motion: site.js. The hero film's rules below (html.film, html.film-wait) are
   unused since the film came off the site on 2026-10-14 (film.js: archive/hero-film-2026-10-14/). */

/* ===================== tokens ===================== */
html { --ink: #22160B; --body: #574330; --accent: #B8893B; --accent-text: #74531A; --hl: #8A6425;
       --frame-r: 14px; --btn-r: 2px; }
html[data-style="6"] { --accent-text: #5E4216;
  --bg-vision-quest: #EDD7B5; --bg-experience: #E9C9A0; --bg-about: #E9CEA7; --bg-gallery: #E7D1AE;
  --bg-reviews: #E1C194; --bg-contact: #E4CBA3; --bg-footer: #1F150D; --fade: 200px; --frame-r: 26px; }

/* ===================== HERO — sunrise, then sand ===================== */
#home { background: #0d0805; }
#home .v2-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
#home .v2-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
#home .v2-glow-wrap { position: absolute; left: 50%; top: 66%; width: 0; height: 0; z-index: 1; pointer-events: none; }
#home .v2-glow { position: absolute; width: 120vmax; height: 120vmax; left: -60vmax; top: -60vmax; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,214,140,.8) 0%, rgba(255,170,90,.36) 14%, rgba(230,120,60,.12) 32%, rgba(0,0,0,0) 52%); }
#home .v2-night { position: absolute; inset: 0; z-index: 2; opacity: .06; background: linear-gradient(to bottom, #0b0705 0%, #150d07 60%, #1d120a 100%); }
#home .v2-scrollnight { position: absolute; inset: 0; z-index: 2; background: #0e0905; opacity: 0; }
#home canvas.v2-stars { position: absolute; left: 0; top: 0; width: 100%; height: 72%; z-index: 3; pointer-events: none; }
/* brighter arrival: only the text corner is darkened, and the bottom melts into the next section */
#home .v2-wash { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, var(--bg-vision-quest, #2A1A0A) 0%, rgba(30,18,9,.45) 16%, rgba(30,18,9,.10) 42%, rgba(30,18,9,0) 64%),
              radial-gradient(ellipse 70% 60% at 0% 70%, rgba(24,14,6,.38), rgba(24,14,6,0) 70%); }
#home canvas.v2-sand { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
#hero-h1 { text-shadow: 0 2px 30px rgba(30,16,6,.35); }
#hero-h1 .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
#hero-h1 .line > span { display: inline-block; }
/* desktop: the text column is as wide as the page (the German italic line fits on one row), the title is capped by the screen's height
   (the H1's inline clamp needs !important to be overridden), and nothing can sit under the 85px nav */
@media (min-width: 1024px) {
  #home { padding-top: 100px; }
  #hero-content > div { max-width: none; }
  #hero-h1 { font-size: clamp(44px, min(7vw, 10.5vh), 100px) !important; }
}
/* tablets: the German last line ran under the side tab at 768px (the H1's inline clamp needs !important to be overridden) */
@media (min-width: 768px) and (max-width: 1023px) { #hero-h1 { font-size: 6.5vw !important; } }
/* phones: the hard line break in the subtitle left one word alone on a row */
@media (max-width: 767px) { #hero-sub br { display: none; } }
/* until the film hands over, its frames cover the hero — the sunrise must not flash before the first frame */
html.film-wait #home :is(.v2-media, .v2-glow-wrap) { opacity: 0; }

/* ===================== nav ===================== */
/* the hamburger is text-ink: invisible on the dark bar over the hero. Only the homepages have #main-nav (the FAQ and reviews navs are light) */
#main-nav:not(.nav-light) #nav-toggle { color: #F5EDE0; }
/* below 1024px the main row is logo · language switch · hamburger: the switch sits next to the hamburger, not mid-bar (footer navs have no .nlw-lang) */
@media (max-width: 1023px) { :is(nav[aria-label="Main"], nav[aria-label="Navigation"]) .nlw-lang { margin-left: auto; margin-right: 8px; } }

/* ===================== soft transitions between sections ===================== */
section.seam > div:not([class^="xp-"]):not(.orn) { position: relative; z-index: 1; }
#break .brk-fade { position: absolute; left: 0; right: 0; height: 190px; z-index: 1; pointer-events: none; }
#break .brk-fade.top { top: 0; background: linear-gradient(to bottom, var(--prev), transparent); }
#break .brk-fade.bottom { bottom: 0; background: linear-gradient(to top, var(--next), transparent); }
html[data-style] section.seam, html[data-style] footer.seam { background: linear-gradient(to bottom, var(--prev) 0px, var(--bg) var(--fade, 180px)) !important; }
#experience .xp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 170px);
          mask: linear-gradient(to bottom, transparent 0, #000 170px); }
/* which colour each section fades in from (--prev) and settles on (--bg) */
html[data-style="6"] #vision-quest { background-color: var(--bg-vision-quest) !important; }
#experience { --prev: var(--bg-vision-quest); --bg: var(--bg-experience); }
#break { --prev: #170F09; --next: var(--bg-about); }          /* the experience section ends at night */
#about { --prev: var(--bg-about); --bg: var(--bg-about); }
#gallery { --prev: var(--bg-about); --bg: var(--bg-gallery); }
/* Gallery carousel (Guy, 2026-10-14): a 4:3 box instead of the wide strip, which cut most photos' heads or feet. As big as
   the screen allows — at most 930 px tall, never more than 84% of the screen height — and centred. Phones keep their tall box. */
@media (min-width: 768px) {
  #gallery-box { width: min(100%, calc(min(930px, 84vh) * 4 / 3)); margin-inline: auto; }
  #gallery-box > .relative { height: auto !important; aspect-ratio: 4 / 3; }
}
/* a warm dark wash along the bottom, so "Tap to enlarge" and the counter stay readable over the brightest sand */
#gallery-box > .relative::after { content: ''; position: absolute; inset: auto 0 0 0; height: 96px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(42, 26, 10, 0), rgba(42, 26, 10, 0.5)); }
/* the photo viewer above the newsletter side tab (9990), which covered its Next arrow; level with the video (9999) */
#lightbox { z-index: 9999; }
#reviews { --prev: var(--bg-gallery); --bg: var(--bg-reviews); }
#contact { --prev: var(--bg-reviews); --bg: var(--bg-contact); }
footer.seam { --bg: var(--bg-footer); }
#contact ~ footer.seam { --prev: var(--bg-contact); }
/* the line-and-circle ornament above each section */
html[data-style="6"] .orn { display: block; position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: min(420px, 70vw); height: 30px; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--accent), var(--accent)) left center / calc(50% - 26px) 1px no-repeat,
              linear-gradient(var(--accent), var(--accent)) right center / calc(50% - 26px) 1px no-repeat; opacity: .55; }
html[data-style="6"] .orn::after { content: ""; position: absolute; left: 50%; top: 0; width: 28px; height: 28px; transform: translateX(-50%); border: 1px solid var(--accent); border-radius: 50%; }

/* ===================== type and colour ===================== */
html[data-style] :is(#about, #gallery, #reviews, #contact) :is(h2, h3) { color: var(--ink); }
html[data-style] .text-body, html[data-style] :is(#about, #contact) p:not(.eyebrow):not(.pull) { color: var(--body) !important; }
html[data-style] .eyebrow:not(.on-photo) { color: var(--accent-text) !important; letter-spacing: .3em; }
html[data-style] .eyebrow:not(.on-photo)::before { background: var(--accent) !important; }
html[data-style] :is(#about, #gallery, #reviews, #contact, #experience) h2 { letter-spacing: -0.028em; line-height: 1.06; }
html[data-style] .text-body, html[data-style] :is(#about, #contact) p.text-body { font-size: 17.5px; line-height: 1.78; }
.hl { font-style: normal; }
html[data-style] .pull.text-gold, html[data-style] .text-gold { color: var(--accent-text) !important; }

/* buttons — the base shape (style 6 colours them below) */
html[data-style] .btn-3d { box-shadow: none !important; border-radius: var(--btn-r) !important; transition: transform .25s cubic-bezier(0.16,1,0.3,1), background-color .25s, color .25s, box-shadow .25s !important; }
html[data-style] .btn-3d::after, html[data-style] #hero-cta::after { content: "→"; display: inline-block; margin-left: 12px; transition: transform .25s cubic-bezier(0.16,1,0.3,1); }
html[data-style] .btn-3d:hover::after, html[data-style] #hero-cta:hover::after { transform: translateX(5px); }
html[data-style] #hero-cta { border-radius: var(--btn-r) !important; }
html[data-style="6"] #vision-quest .hl { color: #8A6425 !important; }

/* photo frames — less rigid: rounding, a slight tilt, and a fine inner line */
#experience .group.overflow-hidden { border-radius: var(--frame-r); isolation: isolate; box-shadow: 0 34px 60px -34px rgba(42,26,10,.55); }
#experience .group.overflow-hidden::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,244,220,.55); border-radius: calc(var(--frame-r) - 6px); pointer-events: none; z-index: 2; }
#experience .group.overflow-hidden { position: relative; }
#experience .grid:nth-of-type(odd) .group.overflow-hidden { rotate: -1.1deg; }
#experience .grid:nth-of-type(even) .group.overflow-hidden { rotate: 1.1deg; }
#about img.about-photo { border-radius: var(--frame-r); rotate: -1deg; box-shadow: 0 34px 60px -34px rgba(42,26,10,.55); }
#contact .relative.overflow-hidden { border-radius: var(--frame-r); rotate: .8deg; box-shadow: 0 34px 60px -34px rgba(42,26,10,.55); }

/* ===================== 24 HOURS — on phones the joke reads first: headline → photo → story ===================== */
@media (max-width: 767px) {
  #vision-quest { display: flex; flex-direction: column; padding: 60px 24px 64px; }
  #vision-quest .vq-text, #vision-quest .vq-copy { display: contents; }
  #vision-quest .hairline { order: 1; margin-bottom: 28px; }
  #vision-quest h2 { order: 2; margin-bottom: 6px !important; }
  #vision-quest h2::after { content: ""; display: block; width: 46px; height: 46px; margin: 4px 18% 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%23E8C96A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4 C 22 6, 30 16, 30 40'/%3E%3Cpath d='M23 33 L 30 41 L 37 33'/%3E%3C/svg%3E") center / contain no-repeat; }
  #vision-quest .vq-media { order: 3; margin: 6px 0 32px; aspect-ratio: 4 / 5; border-radius: var(--frame-r); rotate: -1.2deg;
    box-shadow: 0 30px 50px -28px rgba(0,0,0,.7); }
  #vision-quest .vq-media img { object-position: 55% 55%; }
  #vision-quest p { order: 4; }
}

/* ===================== EXPERIENCE — one day, sunrise to campfire ===================== */
#experience { --xp-ink: #2A1C10; --xp-body: #5A4630; --xp-gold: #74531A; --orb: 74px; clip-path: inset(0); }
#experience h2, #experience h3 { color: var(--xp-ink) !important; }
#experience .text-body { color: var(--xp-body) !important; }
#experience .eyebrow { color: var(--xp-gold) !important; }
#experience .xp-starsky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#experience .xp-starsky canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#experience .xp-sky { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#experience .xp-orb { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
#experience .xp-sun, #experience .xp-moon { position: absolute; left: 0; top: 0; width: var(--orb); height: var(--orb); transform: translate(-50%, -50%); }
#experience .xp-moon { width: calc(var(--orb) * .66); height: calc(var(--orb) * .66); opacity: 0; }
#experience :is(.xp-sun, .xp-moon) i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
#experience .xp-sun .bloom { width: 640%; height: 640%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,214,150,.5) 0%, rgba(255,190,120,.2) 16%, rgba(255,170,100,.07) 36%, rgba(255,160,90,0) 60%); }
#experience .xp-sun .rays { width: 480%; height: 480%; mix-blend-mode: screen; filter: blur(1.4px); animation: xp-spin 120s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255,238,200,0) 0deg 8deg, rgba(255,238,200,.20) 10deg, rgba(255,238,200,0) 13deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, rgba(0,0,0,.35) 28%, transparent 60%);
          mask: radial-gradient(circle, #000 10%, rgba(0,0,0,.35) 28%, transparent 60%); }
#experience .xp-sun .core { width: 100%; height: 100%;
  background: radial-gradient(circle, #FFFEF8 0%, #FFF6DC 40%, #FFE3A3 60%, rgba(255,214,140,0) 72%);
  box-shadow: 0 0 46px 16px rgba(255,236,190,.5); }
@keyframes xp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
#experience .xp-moon .mglow { width: 520%; height: 520%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(236,230,214,.30) 0%, rgba(236,230,214,.09) 26%, rgba(236,230,214,0) 58%); }
#experience .xp-moon .mdisc { width: 100%; height: 100%;
  background: radial-gradient(circle at 32% 36%, rgba(150,140,120,.32) 0 8%, transparent 9%),
              radial-gradient(circle at 60% 56%, rgba(150,140,120,.28) 0 11%, transparent 12%),
              radial-gradient(circle at 44% 72%, rgba(150,140,120,.22) 0 6%, transparent 7%),
              radial-gradient(circle at 40% 36%, #FFFDF5 0%, #ECE5D3 58%, #CFC4AB 100%);
  box-shadow: inset calc(var(--orb) * -.2) calc(var(--orb) * -.04) 0 0 rgba(18,12,7,.94), 0 0 18px 4px rgba(245,237,224,.18); }
@media (max-width: 767px) { #experience { --orb: 50px; } }

/* ===================== REVIEWS — field-note zig-zag ===================== */
#reviews.v2r { background-color: var(--bg-reviews, #EAD9C0); }
.rv-list { display: flex; flex-direction: column; gap: 72px; margin: 8px 0 80px; }
.rv { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.rv figure { margin: 0; position: relative; width: 74%; }
.rv.right figure { justify-self: end; }
.rv figure::before { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border: 1px solid rgba(184,137,59,.55); background: rgba(184,137,59,.10); border-radius: var(--frame-r); }
.rv.right figure::before { transform: translate(-14px, 14px); }
.rv figure img { position: relative; z-index: 1; width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; display: block; border-radius: var(--frame-r);
  box-shadow: 0 30px 60px -32px rgba(42,26,10,.6); }
.rv blockquote { margin: 0; position: relative; padding-top: 34px; }
.rv .mark { position: absolute; left: -4px; top: -14px; font-family: 'Fraunces', serif; font-style: italic; font-size: 96px; line-height: 1; color: var(--accent); opacity: .32; pointer-events: none; }
.rv .q { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; color: var(--ink); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.42; text-wrap: pretty; }
.rv.featured .q { font-size: clamp(23px, 2.8vw, 36px); line-height: 1.32; }
.rv cite { display: flex; align-items: center; gap: 14px; margin-top: 20px; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-text); }
.rv cite::before { content: ""; width: 34px; height: 1px; background: var(--accent); opacity: .6; }
@media (min-width: 768px) {
  .rv { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .rv figure { width: min(var(--w), 100%); }
  .rv.left figure { grid-column: 1 / span 5; justify-self: end; }
  .rv.left blockquote { grid-column: 7 / span 6; }
  .rv.right blockquote { grid-column: 1 / span 6; grid-row: 1; }
  .rv.right figure { grid-column: 8 / span 5; grid-row: 1; justify-self: start; }
  .rv-list { gap: 24px; }
}

/* ===================== CONTACT — the 10-day seal ===================== */
.v2-seal-host { position: relative; }
.v2-seal { position: absolute; z-index: 4; width: 124px; right: -4px; top: -48px; pointer-events: none; }
.v2-seal svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 10px 18px rgba(42,26,10,.25)); }
.v2-seal .disc { fill: var(--bg-contact, #EAD9C0); stroke: rgba(184,137,59,.7); stroke-width: 1; }
.v2-seal .ring-text { font-family: 'Inter', sans-serif; font-size: 9.4px; font-weight: 600; letter-spacing: .14em; fill: var(--accent-text); }
.v2-seal .inner { fill: none; stroke: rgba(184,137,59,.45); stroke-width: 1; }
.v2-seal .day { fill: rgba(184,137,59,.35); }
.v2-seal .day.on { fill: var(--accent); }
.v2-seal .big { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; font-size: 44px; fill: var(--ink); text-anchor: middle; }
.v2-seal .small { font-family: 'Inter', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: .3em; fill: var(--accent-text); text-anchor: middle; }
.v2-seal .sunmark { fill: #F2B45C; filter: drop-shadow(0 0 5px rgba(242,160,70,.9)); }
@media (min-width: 1024px) { .v2-seal { width: 176px; left: -64px; right: auto; top: -64px; } }

/* =====================================================================================
   STYLE 6 — YOUR MIX (Guy, 2026-10-12): Golden sand's soft fades, buttons and 10-day seal ·
   Sand & espresso's line-and-circle ornament and rounder photo frames, without the corner circle ·
   "Your companion" and the reviews in One canvas's colour · darker brown section titles.
   2026-10-13: the 24-hours section in One canvas too — light sand, dark text, the photo floats as a card.
   ===================================================================================== */
html[data-style="6"] .hl { font-style: italic; color: var(--hl); }
html[data-style="6"] .btn-3d, html[data-style="6"] #hero-cta { background: #C9973A !important; color: #22160B !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-style="6"] .btn-3d:hover, html[data-style="6"] #hero-cta:hover { background: #D9AA4C !important; transform: translateY(-2px); }
html[data-style="6"] #experience .group.overflow-hidden::after { display: none; }
html[data-style="6"] :is(.eyebrow, #experience .eyebrow):not(.on-photo) { color: var(--accent-text) !important; }
html[data-style="6"] #vision-quest h2 { color: #22160B !important; }
html[data-style="6"] #vision-quest p { color: #574330 !important; }
html[data-style="6"] #vision-quest .pull { color: #74531A !important; }
html[data-style="6"] #vision-quest h2::after { filter: brightness(.45) sepia(1); }
@media (min-width: 768px) {
  /* a fixed shape, centred: the crop must not depend on how long the text is (German is longer). 690px keeps it inside the section on very wide screens */
  html[data-style="6"] #vision-quest .vq-media { top: 50%; bottom: auto; right: 5%; width: min(42%, 690px); aspect-ratio: 605 / 666; transform: translateY(-50%); border-radius: var(--frame-r); box-shadow: 0 50px 80px -40px rgba(42,26,10,.65); }
  html[data-style="6"] #vision-quest .vq-media::after { display: none; }
}
html[data-style="6"] .v2-seal :is(.ring-text, .small) { fill: #74531A; }
/* "Your companion" (with fitAbout() in site.js): lines use the full column width; the photo keeps its own size and stops
   being sticky — fitAbout() centres it on the text beside it */
@media (min-width: 1024px) {
  html[data-style="6"] #about .grid { column-gap: 48px !important; grid-template-rows: auto 1fr; } /* 1fr: whatever the photo
     column adds goes below the text, it never pushes the "My approach" block down */
  html[data-style="6"] #about p.text-body { max-width: none !important; }
  html[data-style="6"] #about p.text-body.mb-5 { margin-bottom: 12px !important; }
  html[data-style="6"] #about p.text-body.mb-12 { margin-bottom: 30px !important; }
  html[data-style="6"] #about p.pull.text-gold.mb-5 { margin-bottom: 8px !important; }
  html[data-style="6"] #about .lg\:sticky { position: relative; top: 0; }
}
/* the seal sat on top of the line-and-circle ornament (Guy, 2026-10-13): start it just below the ornament, on the photo corner */
@media (min-width: 1024px) { html[data-style="6"] .v2-seal { top: -6px; } }

/* ===================== FAQ and reviews pages (Guy, 2026-10-13: the homepage's section transitions and photo look) =====================
   Each page hero already fades out to #EAD9C0, so the first section fades in from there. */
#faq-essentials { --prev: #EAD9C0; --bg: var(--bg-gallery); }
#faq-questions { --prev: var(--bg-gallery); --bg: var(--bg-about); }
#faq-questions ~ footer.seam { --prev: var(--bg-about); }
#rv-stories { --prev: #EAD9C0; --bg: var(--bg-about); padding-top: 56px; }
#rv-stories article:first-of-type { border-top: 0 !important; }   /* the ornament above it is the divider now */
#rv-cta { --prev: var(--bg-about); --bg: var(--bg-gallery); }
#rv-cta ~ footer.seam { --prev: var(--bg-gallery); }
/* the six facts read as one card, framed like the photos */
#faq-essentials .grid { border-radius: var(--frame-r); overflow: hidden; box-shadow: 0 34px 60px -34px rgba(42,26,10,.45); }
/* review photos: rounded, a slight alternating tilt, a sand-coloured frame offset behind — as on the homepage */
.rvp { margin: 0; position: relative; }
.rvp::before { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border: 1px solid rgba(184,137,59,.55); background: rgba(184,137,59,.10); border-radius: var(--frame-r); }
.rvp img { position: relative; z-index: 1; display: block; border-radius: var(--frame-r); box-shadow: 0 30px 60px -32px rgba(42,26,10,.6); }
#rv-stories article:nth-of-type(odd) .rvp { rotate: -1.6deg; }
#rv-stories article:nth-of-type(even) .rvp { rotate: 1.6deg; }
#rv-stories article:nth-of-type(even) .rvp::before { transform: translate(-14px, 14px); }

@media (prefers-reduced-motion: reduce) {
  #experience .xp-sky, #experience .xp-starsky { display: none; }
  #experience .xp-sun .rays { animation: none; }
}

/* ===================== the hero film (film.js) ===================== */
html.film #home .film-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 8; pointer-events: none; }   /* a canvas (computers) or a video (phones) */
html.film #home .film-shade { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(to top, rgba(20,12,6,.78) 0%, rgba(20,12,6,.45) 34%, rgba(20,12,6,0) 62%); }
html.film #home canvas.v2-sand { opacity: 0; }