/* banca. estúdio v3. Soft work, from late afternoon into night.
   Performance rules for everything here: transforms and opacity only while
   scrolling; no blend modes, no backdrop filters, no animated filters. */
:root {
  --sc-canvas:     #14100C;
  --sc-surface:    #1E1813;
  --sc-ink:        #F4EFE7;
  --sc-ink-soft:   #C2B6A6;
  --sc-accent:     #F5D400;
  --sc-accent-ink: #15110D;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-shadow-color: 25 40% 4%;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --paper-ink: #1B150F;
  --paper-soft: #564A3E;
  --bar-h: 4.25rem;
}
html, body { background: var(--sc-canvas); }
body { font-stretch: 100%; }

/* ----------------------------------------------------------- opening -- */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #14100C; will-change: transform; }
html:not(.js) .intro { display: none; }
.intro__mark { position: relative; width: min(46vw, 15rem); animation: intro-rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.intro__logo { display: block; width: 100%; height: auto; animation: intro-wipe 700ms cubic-bezier(0.65, 0, 0.35, 1) 120ms both; }
.intro__bar { position: absolute; left: 0; right: 0; bottom: -1.1rem; height: 2px; background: rgba(244, 239, 231, 0.14); overflow: hidden; border-radius: 1px; }
.intro__bar::after { content: ""; position: absolute; inset: 0; background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); animation: intro-load 1.6s cubic-bezier(0.25, 0.8, 0.3, 1) 200ms forwards; }
@keyframes intro-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes intro-load { to { transform: scaleX(0.86); } }
/* exit: the bar completes, the curtain lifts, the desk settles, the title arrives */
html.intro-out .intro { animation: intro-lift 820ms cubic-bezier(0.76, 0, 0.24, 1) forwards; pointer-events: none; }
html.intro-out .intro__bar::after { animation: none; transform: scaleX(1); transition: transform 220ms ease-out; }
html.intro-out .intro__mark { animation: intro-mark-out 620ms cubic-bezier(0.6, 0, 0.4, 1) 120ms forwards; }
@keyframes intro-lift { 0%, 18% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -100%, 0); } }
@keyframes intro-mark-out { to { opacity: 0; transform: translate3d(0, -36px, 0) scale(0.96); } }
html.intro-out .hero__copy { animation: intro-copy 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 380ms backwards; }
@keyframes intro-copy { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .intro__mark, .intro__logo, .intro__bar::after, html.intro-out .intro__mark, html.intro-out .hero__copy { animation: none; }
  html.intro-out .intro { animation: intro-fade 300ms ease-out forwards; }
  @keyframes intro-fade { to { opacity: 0; } }
}

.skip {
  position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-2) var(--sc-4); background: var(--sc-accent); color: var(--sc-accent-ink);
  border-radius: var(--sc-r-sm); transform: translateY(-160%);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar.is-muted > * { pointer-events: none; }
.bar:focus-within { opacity: 1 !important; }
.bar:focus-within > * { pointer-events: auto; }
.bar__mark { position: relative; display: block; width: 8.6rem; height: 2.9rem; border-radius: var(--sc-r-pill); background: var(--bar-ground); transition: background-color var(--sc-d-slow) var(--sc-ease-out); }
.bar__logo {
  position: absolute; inset: 0.45rem 0.9rem; width: calc(100% - 1.8rem); height: calc(100% - 0.9rem); object-fit: contain; object-position: center;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
body[data-tone="light"] .bar__logo--bone,
body[data-tone="dark"] .bar__logo--ink { opacity: 0; }
body[data-tone="light"] { --bar-ink: var(--paper-ink); --bar-soft: #4A4037; --bar-ground: rgba(247, 240, 229, 0.86); }
body[data-tone="dark"]  { --bar-ink: var(--sc-ink); --bar-soft: var(--sc-ink-soft); --bar-ground: rgba(20, 16, 12, 0.72); }

.chapters { position: relative; }
.chapters__list {
  display: flex; gap: var(--sc-5); list-style: none; margin: 0;
  padding: var(--sc-2) var(--sc-5) var(--sc-2) var(--sc-6);
  border-radius: var(--sc-r-pill); background: var(--bar-ground);
  font-size: var(--sc-t-sm);
  transition: background-color var(--sc-d-slow) var(--sc-ease-out);
}
.chapters__list a {
  position: relative; display: inline-block; padding-block: var(--sc-2);
  color: var(--bar-soft); text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.chapters__list a::before {
  content: ""; position: absolute; left: -0.85em; top: 50%;
  width: 0.42em; height: 0.42em; margin-top: -0.18em; background: var(--sc-accent);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out);
}
.chapters__list a[aria-current="true"] { color: var(--bar-ink); }
.chapters__list a[aria-current="true"]::before { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .chapters__list a:hover { color: var(--bar-ink); } }
.chapters__you { font-weight: 600; color: var(--bar-ink) !important; }
.chapters__toggle { display: none; }

/* ------------------------------------------------------------ the film -- */
.film { position: relative; }
.stage { position: relative; }
.scene { position: relative; overflow: hidden; }
.cam { position: absolute; inset: 0; transform-origin: 0 0; }
.shot { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.shot > img, .shot > picture, .shot > picture > img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
}
.anchor { display: none; }

.screen, .portal { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; backface-visibility: hidden; }
.screen { width: 1600px; height: 1000px; background: #0c0a08; }

/* a real site on a lit display: still, an optional slow scroll, and glass */
.site { position: absolute; inset: 0; overflow: hidden; background: #f2efe9; }
.site__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; max-width: none; }
.site__strip { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; opacity: 0; transition: opacity 600ms var(--sc-ease-out);
  animation: site-scroll 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; animation-play-state: paused; will-change: transform; }
.site__strip.is-ready { opacity: 1; }
.site.is-live .site__strip { animation-play-state: running; }
.site__head { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; z-index: 2; }
@keyframes site-scroll { 0%, 10% { transform: translate3d(0, 0, 0); } 90%, 100% { transform: translate3d(0, calc(-100% + 1000px), 0); } }

.glass {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(112deg, rgba(255, 246, 232, 0.12) 0%, rgba(255, 246, 232, 0.03) 30%, transparent 55%),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(10, 6, 2, 0.24) 100%),
    linear-gradient(0deg, rgba(60, 34, 12, 0.08), rgba(60, 34, 12, 0.08));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5), inset 0 0 22px rgba(0, 0, 0, 0.32);
}
/* The studio's own site on the hero laptop (a 1600 x 1000 screen). Large
   shapes that read at a third of an inch; every motion is a compositor
   transform or opacity, and it all stops when the screen is off camera. */
.bx { background: radial-gradient(80% 75% at 78% 32%, #2B2119 0%, #18130F 58%, #120E0B 100%); color: #F4EFE7; font-family: var(--sc-font-display); }
.bx p { margin: 0; }
.bx__nav { position: absolute; left: 0; right: 0; top: 0; height: 104px; padding: 0 84px; display: flex; align-items: center; gap: 46px; font-size: 22px; color: #B9AD9D; border-bottom: 1px solid rgba(244, 239, 231, 0.08); }
.bx__logo { height: 46px; width: auto; max-width: none; margin-right: auto; }
.bx__nav b { padding: 16px 28px; border-radius: 999px; background: #F5D400; color: #15110D; font-size: 21px; font-weight: 650; }
.bx__copy { position: absolute; left: 84px; top: 150px; width: 720px; }
.bx__kicker { font-size: 19px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #F5D400; }
.bx__title { text-wrap: balance; margin-top: 20px !important; font-size: 70px; line-height: 0.98; font-weight: 650; font-stretch: 104%; letter-spacing: -0.04em; }
.bx__title em { display: block; font-style: italic; font-weight: 380; color: #F5D400; }
.bx__sub { margin-top: 30px !important; max-width: 580px; font-size: 26px; line-height: 1.45; color: #C2B6A6; font-family: var(--sc-font-text); }
.bx__ctas { margin-top: 42px; display: flex; gap: 18px; font-size: 23px; }
.bx__ctas b { padding: 22px 34px; border-radius: 10px; background: #F5D400; color: #15110D; font-weight: 650; box-shadow: 0 16px 34px -14px rgba(245, 212, 0, 0.55); }
.bx__ctas span { padding: 20px 30px; border-radius: 10px; border: 2px solid rgba(244, 239, 231, 0.32); }
.bx__steps { list-style: none; margin: 54px 0 0; padding: 0; display: grid; gap: 26px; }
.bx__step { display: flex; align-items: center; gap: 24px; font-size: 36px; font-weight: 560; letter-spacing: -0.015em; color: #F4EFE7; opacity: 0.38; animation: 6s linear infinite both; animation-play-state: paused; }
.bx__step i { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #F5D400; color: #15110D; font-style: normal; font-size: 28px; font-weight: 700; }
.bx__step--1 { animation-name: bx-s1; } .bx__step--2 { animation-name: bx-s2; } .bx__step--3 { animation-name: bx-s3; }
@keyframes bx-s1 { 0%, 34% { opacity: 1; } 40%, 96% { opacity: 0.38; } 100% { opacity: 1; } }
@keyframes bx-s2 { 0%, 34% { opacity: 0.38; } 40%, 54% { opacity: 1; } 60%, 100% { opacity: 0.38; } }
@keyframes bx-s3 { 0%, 54% { opacity: 0.38; } 60%, 94% { opacity: 1; } 100% { opacity: 0.38; } }
/* a site being born, three businesses in turn (18 s, 6 s each) */
.bx__demo { position: absolute; left: 860px; top: 128px; width: 670px; height: 700px; }
.bx__set { position: absolute; inset: 0; opacity: 0; animation: bx-set 18s linear infinite both; animation-delay: calc(var(--s) * 6s); animation-play-state: paused; }
.bx__set * { animation-duration: 18s; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--s) * 6s); animation-play-state: paused; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes bx-set { 0% { opacity: 0; } 1% { opacity: 1; } 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
.bx__browser { position: absolute; left: 0; top: 0; width: 640px; height: 430px; border-radius: 16px; overflow: hidden; background: #F4F0EA; box-shadow: 0 0 0 1px rgba(244, 239, 231, 0.14), 0 40px 80px -30px rgba(0, 0, 0, 0.85); }
.bx__url { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px; background: #E6E0D7; }
.bx__url i { width: 12px; height: 12px; border-radius: 50%; background: #C9C1B5; }
.bx__url span { margin-left: 14px; flex: 1; height: 30px; border-radius: 999px; background: #F8F5F0; padding: 0 16px; display: flex; align-items: center; font-size: 17px; color: #5F5850; font-family: system-ui, "Segoe UI", sans-serif; }
.bx__page { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; overflow: hidden; }
.bx__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; animation-name: bx-photo; }
.bx__page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 9, 0.78), rgba(20, 14, 9, 0.2) 75%); }
.bx__hero { position: absolute; z-index: 1; left: 36px; bottom: 40px; right: 120px; color: #FBF7F1; }
.bx__name { font-size: 60px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; animation-name: bx-rise-1; }
.bx__tag { margin-top: 12px !important; font-size: 21px; opacity: 0.9; animation-name: bx-rise-2; }
.bx__btn { display: inline-block; margin-top: 24px; padding: 15px 22px; border-radius: 10px; background: #F5D400; color: #15110D; font-size: 19px; font-weight: 650; animation-name: bx-pop; }
.bx__google { position: absolute; left: -60px; top: 400px; width: 470px; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; background: #FDFCFA; color: #202124; font-family: system-ui, "Segoe UI", sans-serif; box-shadow: 0 0 0 3px #F5D400, 0 24px 48px -18px rgba(0, 0, 0, 0.8); animation-name: bx-google; }
.bx__google i { width: 40px; height: 40px; border-radius: 50%; background: #F5D400; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 18px; color: #15110D; }
.bx__google b { display: block; font-size: 21px; font-weight: 500; color: #1A4FB8; }
.bx__google span { font-size: 16px; color: #4D5156; }
.bx__google em { font-style: normal; font-size: 14px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #15110D; color: #F5D400; }
.bx__wa { position: absolute; right: 0; top: 540px; width: 470px; display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: #FAF8F4; color: #202124; font-family: system-ui, "Segoe UI", sans-serif; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.8); animation-name: bx-wa; }
.bx__wa i { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E") center / 24px no-repeat; }
.bx__wa p { font-size: 19px; line-height: 1.35; }
.bx__wa b { display: block; font-size: 16px; color: #4D5156; margin-bottom: 4px; }
.bx__ex { position: absolute; right: 0; top: -36px; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: #8F8476; }
@keyframes bx-photo { 0% { opacity: 0; transform: scale(1.1); } 3% { opacity: 1; } 33%, 100% { opacity: 1; transform: scale(1); } }
@keyframes bx-rise-1 { 0%, 3% { opacity: 0; transform: translate3d(0, 24px, 0); } 6%, 100% { opacity: 1; transform: none; } }
@keyframes bx-rise-2 { 0%, 4.5% { opacity: 0; transform: translate3d(0, 18px, 0); } 7.5%, 100% { opacity: 1; transform: none; } }
@keyframes bx-pop { 0%, 7% { opacity: 0; transform: scale(0.6); } 9% { opacity: 1; transform: scale(1.06); } 10.5%, 100% { opacity: 1; transform: none; } }
@keyframes bx-google { 0%, 12% { opacity: 0; transform: translate3d(0, 40px, 0); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes bx-wa { 0%, 17.5% { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.94); } 20.5%, 100% { opacity: 1; transform: none; } }
.bx__band { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; padding: 0 84px; display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #F5D400; color: #15110D; }
.bx__band p { font-size: 36px; letter-spacing: -0.02em; }
.bx__band b { font-weight: 700; }
.bx__band span { flex: none; padding: 24px 38px; border-radius: 12px; background: #15110D; color: #F5D400; font-size: 28px; font-weight: 650; }
.bx__band span i { display: inline-block; font-style: normal; margin-left: 8px; animation: bx-nudge 1.6s ease-in-out infinite; animation-play-state: paused; }
@keyframes bx-nudge { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(8px, 0, 0); } }
.site.is-live .bx__step, .site.is-live .bx__set, .site.is-live .bx__set *, .site.is-live .bx__band span i { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .bx__step, .bx__set, .bx__set *, .bx__band span i { animation: none !important; }
  .bx__set:first-child, .bx__step { opacity: 1; }
}

/* the hero laptop faces a low sun coming from the window on the right */
.glass--sun {
  background:
    linear-gradient(250deg, rgba(255, 226, 180, 0.22) 0%, rgba(255, 226, 180, 0.06) 28%, transparent 52%),
    linear-gradient(112deg, transparent 55%, rgba(255, 246, 232, 0.05) 70%, transparent 82%),
    radial-gradient(130% 95% at 40% 50%, transparent 58%, rgba(30, 14, 4, 0.26) 100%),
    linear-gradient(0deg, rgba(255, 196, 130, 0.07), rgba(255, 196, 130, 0.07));
}

/* ---------------------------------------------------------- live film -- */
html.film-on .film { height: 2200vh; }
/* fixed, not sticky: the film is the whole page, and a fixed stage spares
   phones the sticky repositioning that made layers blink during momentum */
html.film-on .stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100svh; overflow: clip; }
/* phones: camera planes keep one raster while the camera moves in, instead of
   re-rasterising full photographs at every new scale (memory, blinking) */
html.film-on.is-m .cam { will-change: transform; }
html.film-on .scene { position: absolute; inset: 0; transform-origin: 50% 50%; opacity: 0; pointer-events: none; overflow: clip; }
html.film-on .scene--hero { opacity: 1; }
html.film-on .scene.is-on { pointer-events: auto; }
html.film-on .scene.is-far .cam,
/* the live site keeps its layout while far: skipping it would resize the
   embedded page on the way in and make it lay itself out again mid-scroll */
html.film-on .scene.is-far .portal:not(.portal--site),
html.film-on .scene.is-far .book,
html.film-on .scene.is-far .vex__frame { content-visibility: hidden; }
html.film-on [data-fade] { opacity: 0; visibility: hidden; }
html.film-on [data-fade="hero-copy"] { opacity: 1; visibility: visible; }
.scene--hero { z-index: 1; } .scene--search { z-index: 3; } .scene--wall { z-index: 4; } .scene--brindar { z-index: 5; } .scene--night { z-index: 6; }

/* 1 · hero */
.scene--hero { background: #C8AE88; }
.hero__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(68% 60% at 14% 24%, rgba(248, 236, 216, 0.6) 0%, rgba(248, 236, 216, 0.3) 46%, transparent 72%);
}
.scene--hero .cam[data-par="0.8"] { z-index: 0; }
.hero__copy { position: absolute; z-index: 2; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1.5rem, 6vh, 4.5rem)); width: fit-content; max-width: min(52rem, 58vw); color: var(--paper-ink); }
.scene--hero .cam[data-par="1"] { z-index: 3; }
.scene--hero .cam[data-par="1.45"] { z-index: 5; }
.hero__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 640; font-stretch: 104%;
  font-size: min(clamp(2.6rem, 1rem + 3.3vw, 4.9rem), 7.2vh); line-height: 0.98; letter-spacing: -0.04em;
}
.hero__title em { display: block; font-style: italic; font-weight: 380; letter-spacing: -0.03em; }
@media (min-width: 1280px) { .hero__title { white-space: nowrap; } }
.hero__sub { margin: var(--sc-4) 0 0; max-width: min(38ch, 40vw); font-size: var(--sc-t-lg); line-height: 1.42; letter-spacing: -0.01em; color: #3C3229; text-wrap: pretty; }
.beam {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(122deg, transparent 40%, rgba(255, 206, 140, 0.13) 53%, transparent 66%),
              radial-gradient(48% 58% at 88% 18%, rgba(255, 210, 150, 0.16), transparent 70%);
}
.hero__note {
  position: absolute; z-index: 7; right: var(--sc-gutter); bottom: clamp(1.25rem, 4vh, 2.5rem); margin: 0;
  padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-pill);
  background: rgba(22, 15, 10, 0.8); color: var(--sc-ink); font-size: var(--sc-t-xs); letter-spacing: 0.02em;
}

/* scroll cue: the film only starts when the reader scrolls */
.hero__cue {
  position: absolute; z-index: 7; left: 50%; bottom: clamp(1.25rem, 4vh, 2.5rem); translate: -50% 0; margin: 0;
  display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-2) var(--sc-4) var(--sc-2) var(--sc-5);
  border-radius: var(--sc-r-pill); background: rgba(22, 15, 10, 0.8); color: var(--sc-ink); font-size: var(--sc-t-sm); white-space: nowrap;
}
.hero__cue i { position: relative; width: 2px; height: 22px; border-radius: 1px; background: rgba(244, 239, 231, 0.3); overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 9px; border-radius: 1px; background: var(--sc-accent); animation: cue-drop 1.6s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes cue-drop { 0% { transform: translate3d(0, -10px, 0); } 70%, 100% { transform: translate3d(0, 24px, 0); } }
.hero__cue-touch { display: none; }
/* touch screens move the page down with a swipe up: say so, and point up */
@media (hover: none) and (pointer: coarse) {
  .hero__cue-wheel { display: none; }
  .hero__cue-touch { display: inline; }
  .hero__cue i::after { animation-name: cue-swipe; }
}
@keyframes cue-swipe { 0% { transform: translate3d(0, 24px, 0); } 70%, 100% { transform: translate3d(0, -10px, 0); } }
html.film-on [data-fade="scroll-cue"] { opacity: 1; visibility: visible; }
html.no-film .hero__cue { display: none; }
@media (prefers-reduced-motion: reduce) { .hero__cue i::after { animation: none; } }

/* the notebook plane */
.book { position: absolute; left: 0; top: 0; z-index: 4; transform-origin: 0 0; will-change: transform; --lift: 0; }
.book::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 18%; bottom: -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(30, 16, 6, 0.42), transparent);
  opacity: var(--lift); transform: translate3d(0, 6%, 0);
}
.book__img, .book__img > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.book__pages { position: absolute; left: 0; top: 0; width: 1410px; height: 1000px; transform-origin: 0 0; }
/* the paper's own gutter sits on the photographed book's gutter (x 648) */
.book__paper { position: absolute; top: 0; left: -114px; width: calc(100% + 114px); height: 100%; object-fit: cover; max-width: none; opacity: 0; }
.writing { position: absolute; inset: 0; color: #403c37; font-family: var(--hand); }
.writing > * {
  position: absolute; margin: 0; line-height: 1.12;
  background: url("assets/v3/graphite.webp") 0 0 / 200px 200px, #6a645b;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.writing__title { left: 7%; top: 20%; width: 36%; font-size: 108px; font-weight: 600; letter-spacing: 0.005em; transform: rotate(-1.2deg); }
.writing__line { left: 57%; width: 37%; font-size: 70px; font-weight: 500; transform: rotate(-0.8deg); }
.writing__line span { font-weight: 600; margin-right: 0.15em; }
.writing__line[data-ink="2"] { top: 18%; }
.writing__line[data-ink="3"] { top: 42%; }
.writing__sign { left: 57%; top: 70%; width: 36%; font-size: 52px; font-weight: 500; transform: rotate(-0.6deg); }
html.film-on .writing > * { opacity: 0; }

/* 2 · search */
.scene--search { background: #B89A74; }
.dim { position: absolute; inset: 0; z-index: 2; background: #0E0A07; opacity: 0; pointer-events: none; }
.search__shade { position: absolute; inset: auto 0 0 0; height: 26vh; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(20, 13, 8, 0.55), transparent); }
.search__hook {
  position: absolute; z-index: 4; left: 50%; bottom: clamp(1.5rem, 6vh, 3.5rem); translate: -50% 0; margin: 0;
  padding: var(--sc-3) var(--sc-5); border-radius: var(--sc-r-pill);
  background: rgba(24, 17, 11, 0.86); color: var(--sc-ink); font-size: var(--sc-t-base); white-space: nowrap;
}
.portal--phone { z-index: 3; margin: 0; border-radius: 40px; }
.serp { position: absolute; inset: 0; background: #FDFCFA; color: #202124; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; }
.serp::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(118deg, rgba(255, 236, 205, 0.14) 0%, rgba(255, 236, 205, 0.03) 34%, transparent 52%); }
/* the search head stays put while the results scroll beneath it */
.serp::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 178px; z-index: 4; background: #FDFCFA; box-shadow: 0 6px 10px -8px rgba(32, 33, 36, 0.18); pointer-events: none; }
.serp__status, .serp__box, .serp__tabs { position: relative; z-index: 5; }
.serp__status { display: flex; justify-content: space-between; align-items: center; padding: 18px 30px 6px; font-size: 15px; font-weight: 600; }
.serp__icons { display: flex; gap: 6px; align-items: center; color: #202124; }
.serp__icons svg { height: 11px; width: auto; fill: currentColor; }
.serp__box { margin: 14px 16px 10px; height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.22); font-size: 16px; color: #3C4043; }
.serp__box svg { width: 20px; height: 20px; color: #5F6368; flex: none; }
.serp__tabs { display: flex; gap: 22px; padding: 6px 22px 0; border-bottom: 1px solid #E6E3DE; font-size: 14px; color: #5F6368; height: 38px; }
.serp__tabs b { color: #202124; font-weight: 600; box-shadow: inset 0 -3px 0 #3C4043; }
.serp__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.serp__item {
  position: absolute; left: 12px; right: 12px; top: 0; height: 114px; padding: 12px 14px;
  display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 2px; align-content: start;
  background: #fff; border-radius: 16px; font-size: 13px; line-height: 1.35;
  transform: translate3d(0, calc(190px + var(--r, 0) * 126px), 0);
}
.serp__item[data-rank="0"] { --r: 0; } .serp__item[data-rank="1"] { --r: 1; } .serp__item[data-rank="2"] { --r: 2; }
.serp__item[data-rank="3"] { --r: 3; } .serp__item[data-rank="4"] { --r: 4; } .serp__item.is-you { --r: 7; }
.serp__fav { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: #EFEBE4; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #5B4A33; }
.serp__site { font-size: 13px; color: #202124; line-height: 1.25; }
.serp__site small { display: block; font-size: 11.5px; color: #4D5156; }
.serp__item strong { grid-column: 2; font-weight: 500; font-size: 16px; color: #1A4FB8; line-height: 1.25; }
.serp__snip { grid-column: 2; color: #4D5156; font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.serp__item.is-you { z-index: 2; }
.serp__item.is-you .serp__fav { background: #F5D400; color: #15110D; }
.serp__tag { position: absolute; right: 12px; top: 12px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; background: #15110D; color: #F5D400; }
.serp__item.is-top { box-shadow: 0 0 0 2px #F5D400, 0 10px 30px -8px rgba(90, 70, 0, 0.35); }
.serp__more {
  position: absolute; left: 12px; right: 12px; top: 952px; height: 60px; display: flex; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: 14px; background: #F3F0EA; font-size: 13px; color: #4D5156; opacity: 0; z-index: 3;
  transform: translate3d(0, -130px, 0);
}
.serp__more b { color: #1A4FB8; font-weight: 600; }
.serp__more em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: #15110D; color: #F5D400; }
.notes { position: absolute; left: 10px; right: 10px; top: 50px; z-index: 8; display: grid; gap: 8px; pointer-events: none; }
.note {
  display: grid; grid-template-columns: 34px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 12px 14px; border-radius: 18px; background: #FAF8F4;
  box-shadow: 0 0 0 5px #FDFCFA, 0 10px 28px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.04); opacity: 0;
}
.note__icon { grid-row: span 2; width: 34px; height: 34px; border-radius: 9px; background: #F5D400 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2315110D' d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z'/%3E%3C/svg%3E") center / 18px no-repeat; }
.note b { font-size: 13px; font-weight: 700; color: #202124; }
.note time { font-size: 11.5px; color: #6B6F75; }
.note p { grid-column: 2 / span 2; margin: 0; font-size: 13.5px; line-height: 1.35; color: #2A2C30; }
.serp__cap { position: absolute; z-index: 4; left: var(--sc-gutter); bottom: clamp(1rem, 3vh, 2rem); width: min(26rem, 28vw); margin: 0; font-size: 0.72rem; line-height: 1.45; color: var(--sc-ink-soft); }
.story { position: absolute; z-index: 4; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(26rem, 30vw); display: grid; }
.story > .pillar { grid-area: 1 / 1; }
.pillar { color: var(--sc-ink); }
.pillar__title { margin: 0; font-family: var(--sc-font-display); font-weight: 620; font-stretch: 104%; font-size: clamp(2.1rem, 1rem + 2.8vw, 4rem); line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.pillar__body { margin: var(--sc-5) 0 0; max-width: 34ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
.pillar__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink); }
.pillar__list li { position: relative; padding-left: 1.4em; line-height: 1.4; }
.pillar__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5em; height: 0.5em; background: var(--sc-accent); }
.pillar__list--find { position: absolute; z-index: 4; right: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(22rem, 25vw); margin: 0; }

/* 3 · gallery */
.scene--wall { background: #2C2219; }
.hall { position: absolute; inset: 0; pointer-events: none; }
.hall__night { position: absolute; inset: 0; background: #0E0A07; opacity: 0; }
.hall__pool { position: absolute; inset: 0; background: radial-gradient(60% 50% at 62% 48%, rgba(255, 196, 130, 0.08), transparent 70%), radial-gradient(90% 70% at 50% 120%, rgba(0, 0, 0, 0.5), transparent 70%), linear-gradient(90deg, rgba(10, 7, 5, 0.55) 0%, rgba(10, 7, 5, 0.12) 42%, transparent 60%); }
/* each site brings its own room: the blurred, darkened light of the photo it lives in */
.room { position: absolute; inset: -6%; background: var(--room) center / cover no-repeat; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.wall__intro { position: absolute; z-index: 30; left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(34rem, 44vw); color: var(--sc-ink); }
.wall__title { margin: 0; font-family: var(--sc-font-display); font-weight: 620; font-stretch: 104%; font-size: clamp(2.6rem, 1rem + 4vw, 5.4rem); line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance; }
.wall__body { margin: var(--sc-5) 0 0; max-width: 36ch; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); }
.vex { position: absolute; inset: 0; visibility: hidden; opacity: 0; pointer-events: none; }
/* a gallery light on the wall behind each site, where it will hold */
.vex__light { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vex__light::before { content: ""; position: absolute; left: -46vw; top: -52vh; width: 92vw; height: 104vh;
  background: radial-gradient(42% 46% at 50% 44%, rgba(255, 205, 140, 0.16) 0%, rgba(255, 205, 140, 0.05) 45%, transparent 72%); }
.vex__frame {
  position: absolute; left: 0; top: 0; transform-origin: 50% 50%; overflow: hidden; border-radius: 4px; will-change: transform;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.75), 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.vex__cap { position: absolute; z-index: 200; top: 50%; margin-top: -4rem; width: min(24rem, 27vw); color: var(--sc-ink); visibility: hidden; }
.vex[data-side="r"] .vex__cap, .vex[data-side="c"] .vex__cap { left: var(--sc-gutter); }
.vex[data-side="l"] .vex__cap { right: var(--sc-gutter); }
.vex__n { margin: 0 0 var(--sc-4); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.16em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.vex__n span { color: var(--sc-ink-soft); font-weight: 400; }
.vex__why { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-stretch: 102%; font-size: clamp(1.8rem, 1rem + 1.7vw, 2.9rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.vex__meta { margin: var(--sc-4) 0 0; padding-top: var(--sc-3); border-top: 1px solid rgba(244, 239, 231, 0.2); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: 0.01em; }
.vex__meta::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.6em; background: var(--sc-accent); }


/* 5 · brindar */
.scene--brindar { background: transparent; }
.brindar__hook {
  position: absolute; z-index: 4; left: var(--sc-gutter); top: calc(var(--bar-h) + 6vh); bottom: auto; margin: 0;
  font-family: var(--sc-font-display); font-style: italic; font-weight: 380; font-size: var(--sc-t-3xl); letter-spacing: -0.03em; color: var(--sc-ink);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.portal--site { z-index: 2; background: #1A1410; }
.site-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity 500ms var(--sc-ease-out); background: transparent; }
.site-frame.is-ready { opacity: 1; }
.site-still { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.portal--site .site-frame { z-index: 1; }
.site-frame--phone { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: none; }
.inside__chip {
  position: absolute; z-index: 6; left: 50%; top: clamp(0.75rem, 2.5vh, 1.5rem); translate: -50% 0;
  display: flex; align-items: center; gap: var(--sc-4); padding: var(--sc-2) var(--sc-2) var(--sc-2) var(--sc-5);
  border-radius: var(--sc-r-pill); background: rgba(18, 13, 9, 0.9); color: var(--sc-ink); font-size: var(--sc-t-sm); white-space: nowrap;
  box-shadow: var(--sc-e2);
}
.inside__chip a { padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-pill); background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none; font-weight: 560; }
.inside__line {
  position: absolute; z-index: 6; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 0; margin: 0;
  padding: 18vh 0 clamp(2rem, 8vh, 5rem);
  font-family: var(--sc-font-display); font-weight: 600; font-stretch: 104%;
  font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: -0.035em; color: var(--sc-ink);
  background: linear-gradient(to top, rgba(12, 9, 6, 0.94) 0%, rgba(12, 9, 6, 0.8) 45%, transparent 100%);
  margin-inline: calc(var(--sc-gutter) * -1); padding-inline: var(--sc-gutter);
}
.inside__line em { font-style: italic; font-weight: 380; color: var(--sc-accent); }

/* 6 · night + draft */
.scene--night { background: #0F0B08; }
.portal--draft { z-index: 2; background: #F2EEE8; }
.draft { position: absolute; inset: 0; background: #F4F0EA; color: #1C1712; font-family: var(--sc-font-text); overflow: hidden; --seg-img: url("assets/v3/seg-eventos-b.webp"); }
.draft__nav { position: absolute; left: 0; right: 0; top: 0; height: 88px; display: flex; align-items: center; gap: 44px; padding: 0 72px; font-size: 21px; color: #50463C; z-index: 2; }
.draft__nav b { font-family: var(--sc-font-display); font-weight: 700; font-size: 30px; color: #1C1712; letter-spacing: -0.02em; margin-right: auto; max-width: 560px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.draft__nav i { font-style: normal; padding: 14px 26px; background: #1C1712; color: #F4F0EA; border-radius: 8px; font-size: 19px; }
.draft__hero { position: absolute; left: 36px; right: 36px; top: 96px; height: 520px; border-radius: 18px; overflow: hidden; }
.draft__photo { position: absolute; inset: -30px; background: var(--seg-img) center / cover no-repeat; transform: scale(1.04); }
.draft__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 14, 9, 0.7) 0%, rgba(20, 14, 9, 0.35) 55%, rgba(20, 14, 9, 0.1) 100%); }
.draft__copy { position: absolute; z-index: 2; left: 64px; bottom: 60px; right: 40%; color: #FBF7F1; }
.draft__kicker { margin: 0 0 14px; font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.draft__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-stretch: 106%; font-size: var(--ts, 104px); line-height: 0.94; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.draft__sub { margin: 18px 0 30px; font-size: 26px; opacity: 0.9; }
.draft__btn { display: inline-block; padding: 18px 30px; border-radius: 10px; background: #F5D400; color: #15110D; font-size: 21px; font-weight: 600; }
.draft__row { position: absolute; left: 36px; right: 36px; top: 640px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.draft__card { display: grid; gap: 12px; }
.draft__thumb { height: 150px; border-radius: 12px; background: var(--seg-img) center / cover no-repeat; }
.draft__card:nth-child(1) .draft__thumb { background-position: 20% 40%; }
.draft__card:nth-child(2) .draft__thumb { background-position: 60% 70%; }
.draft__card:nth-child(3) .draft__thumb { background-position: 90% 30%; }
.draft__card span { display: block; height: 14px; border-radius: 7px; background: #DDD5CA; }
.draft__card span:last-child { width: 62%; }
.draft__tag { position: absolute; right: 30px; bottom: 26px; font-size: 18px; letter-spacing: 0.12em; text-transform: uppercase; color: #9A8E80; }

.close {
  position: absolute; z-index: 4; left: var(--sc-gutter); top: calc(var(--bar-h) + clamp(1rem, 6vh, 4rem)); bottom: clamp(1rem, 3vh, 2rem);
  width: min(30rem, 36vw); display: flex; flex-direction: column;
}
.scene--night::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 8, 5, 0.86) 0%, rgba(12, 8, 5, 0.6) 30%, transparent 50%);
  opacity: var(--close-scrim, 1);
}
.close__title { margin: 0; font-family: var(--sc-font-display); font-weight: 640; font-stretch: 104%; font-size: clamp(2.3rem, 1.2rem + 2.8vw, 4.4rem); line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance; }
.close__text { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.5; max-width: 36ch; }
.ask { margin-top: var(--sc-6); display: grid; gap: var(--sc-4); }
.ask__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sc-3); }
.ask__field { display: grid; gap: var(--sc-2); }
.ask__label { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0; }
.ask__input {
  height: 3.1rem; padding: 0 var(--sc-4); min-width: 0;
  background: rgba(244, 239, 231, 0.07); color: var(--sc-ink);
  border: 1px solid rgba(244, 239, 231, 0.26); border-radius: var(--sc-r-sm);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.ask__input::placeholder { color: rgba(244, 239, 231, 0.48); }
.ask__input:hover { border-color: rgba(244, 239, 231, 0.45); }
.ask__input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; background: rgba(244, 239, 231, 0.1); }
.ask__seg { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.ask__seg legend { margin-bottom: var(--sc-2); }
.ask__seg label { position: relative; }
.ask__seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ask__seg span {
  display: inline-flex; align-items: center; height: 2.4rem; padding: 0 var(--sc-4); border-radius: var(--sc-r-pill);
  border: 1px solid rgba(244, 239, 231, 0.26); color: var(--sc-ink); font-size: var(--sc-t-sm);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.ask__seg input:checked + span { background: var(--sc-ink); color: var(--sc-accent-ink); border-color: var(--sc-ink); }
.ask__seg input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ask__seg label:hover span { border-color: rgba(244, 239, 231, 0.6); } }
.ask__go {
  justify-self: start; display: inline-flex; align-items: center; height: 3.2rem; padding: 0 var(--sc-6); margin-top: var(--sc-2);
  background: var(--sc-accent); color: var(--sc-accent-ink); border-radius: var(--sc-r-sm); text-decoration: none; font-weight: 600; white-space: nowrap;
  box-shadow: 0 12px 28px -12px rgba(245, 212, 0, 0.4), var(--sc-e1);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ask__go:hover { background: #FFE033; } }
.ask__go:active { transform: scale(0.97); }
.foot { margin-top: auto; padding-top: var(--sc-6); display: flex; align-items: center; gap: var(--sc-4); color: var(--sc-ink-soft); font-size: var(--sc-t-xs); }
.foot img { width: 5rem; height: auto; }
.foot p { margin: 0; }

/* ------------------------------------------------------------ mobile -- */


/* fixes in the exit zone that keep its design and remove its seams */
.portal--site::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(12, 9, 6, 0.62); opacity: var(--l, 0); }
.scene--night.is-ghost { background: transparent; }
.scene--night.is-ghost::before { opacity: 0 !important; }
.scene--night.is-ghost .cam { opacity: 0; }

/* ------------------------------------------------------------ mobile -- */
@media (max-width: 860px) and (orientation: portrait) {
  :root { --bar-h: 3.75rem; }
  .bar__mark { width: 7rem; height: 2.6rem; }
  .chapters__toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sc-4);
    border: 1px solid color-mix(in oklab, var(--bar-ink) 28%, transparent); border-radius: var(--sc-r-pill);
    background: var(--bar-ground); color: var(--bar-ink); font-size: var(--sc-t-sm);
  }
  .chapters__list {
    position: absolute; right: 0; top: calc(100% + var(--sc-2)); flex-direction: column; gap: 0; min-width: 13rem;
    padding: var(--sc-3) var(--sc-5); border-radius: var(--sc-r-md); background: #1B1511; box-shadow: var(--sc-e3);
    border: 1px solid rgba(244, 239, 231, 0.12);
    --bar-ink: var(--sc-ink); --bar-soft: var(--sc-ink-soft);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right;
    transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
  }
  .chapters__list a { display: block; padding-block: var(--sc-3); }
  .chapters.is-open .chapters__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  .hero__copy { z-index: 6; left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; top: calc(var(--bar-h) + 1rem); }
  .hero__title { font-size: min(9.2vw, 5vh); white-space: normal; }
  .hero__sub { font-size: 0.95rem; line-height: 1.45; max-width: 34ch; margin-top: var(--sc-3); color: #2E261F; }
  .hero__wash { background: linear-gradient(180deg, rgba(247, 236, 218, 0.92) 0%, rgba(247, 236, 218, 0.8) 30%, rgba(247, 236, 218, 0.36) 44%, transparent 56%); }
  .hero__note { left: var(--sc-gutter); right: auto; bottom: var(--sc-4); }
  .hero__cue { bottom: calc(var(--sc-4) + 3.25rem + env(safe-area-inset-bottom)); }

  html.is-m .writing__title { left: 12%; top: 13%; width: 27%; font-size: 74px; }
  html.is-m .writing__line { left: 12%; width: 27%; font-size: 50px; }
  html.is-m .writing__line[data-ink="2"] { top: 40%; }
  html.is-m .writing__line[data-ink="3"] { top: 55%; }
  html.is-m .writing__sign { left: 12%; top: 73%; width: 27%; font-size: 38px; }

  .search__hook { white-space: normal; width: calc(100vw - 2 * var(--sc-gutter)); text-align: center; border-radius: var(--sc-r-md); }
  .portal--phone { border-radius: 26px; }
  .story {
    left: 0; right: 0; top: auto; bottom: 0; translate: none; width: auto;
    padding: 14vh var(--sc-gutter) calc(var(--sc-6) + 1.6rem);
    background: linear-gradient(to top, rgba(14, 10, 7, 0.98) 0%, rgba(14, 10, 7, 0.95) 62%, transparent 100%);
  }
  .story .pillar__title { font-size: clamp(1.8rem, 8.4vw, 2.5rem); }
  .story .pillar__body { font-size: var(--sc-t-sm); margin-top: var(--sc-3); }
  .pillar__list--find { display: none; }
  .serp__cap { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: var(--sc-3); font-size: 0.66rem; }

  .wall__intro { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  .wall__title { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .vex__cap, .vex[data-side] .vex__cap { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 9vh; margin-top: 0; }
  .vex__why { font-size: clamp(1.5rem, 7vw, 2rem); }

  .brindar__hook { font-size: var(--sc-t-2xl); }
  .inside__chip { font-size: 0.72rem; gap: var(--sc-2); padding-left: var(--sc-4); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 1.5rem); translate: none; white-space: normal; top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); }
  .inside__chip a { white-space: nowrap; }
  .inside__line { font-size: var(--sc-t-2xl); }

  .scene--night::before { background: linear-gradient(to top, rgba(12, 8, 5, 0.96) 0%, rgba(12, 8, 5, 0.9) 48%, transparent 64%); }
  .close { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: var(--sc-4); }
  .close__title { font-size: clamp(1.8rem, 8.2vw, 2.4rem); }
  .close__text { font-size: var(--sc-t-sm); margin-top: var(--sc-3); }
  .ask { margin-top: var(--sc-4); gap: var(--sc-3); }
  .ask__input { height: 2.9rem; }
  .ask__seg span { height: 2.6rem; padding: 0 var(--sc-3); }
  .ask__go { justify-self: stretch; justify-content: center; }
  .foot { padding-top: var(--sc-4); }
}
@media (max-width: 860px) and (orientation: portrait) and (max-height: 700px) {
  .close__text, .foot { display: none; }
  .close__title { font-size: 1.7rem; }
}
/* short landscape screens (phones turned sideways) keep the wide art */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --bar-h: 3.25rem; }
  .hero__title { font-size: 9vh; }
  .hero__sub { display: none; }
  .story { width: 40vw; }
  .story .pillar__body { display: none; }
  .pillar__list--find { display: none; }
  .vex__cap { width: 30vw; }
  .vex__why { font-size: 1.4rem; }
  .close__text, .foot { display: none; }
  .close { top: calc(var(--bar-h) + 0.5rem); }
  .close__title { font-size: 1.6rem; }
}

/* ----------------------------------------- plain document (no film) --
   No script, reduced motion or a tiny window: the same scenes as ordinary
   sections, every text visible, the notebook page laid flat. */
html.no-film .scene { min-height: 100svh; }
html.no-film .scene--hero .cam { height: 100svh; bottom: auto; }
html.no-film .scene--hero { padding-top: 100svh; }
html.no-film .book { position: relative; left: auto; top: auto; transform: none !important; width: auto !important; height: auto !important; padding: var(--sc-8) var(--sc-gutter); }
html.no-film .book__img, html.no-film .book::before { display: none; }
html.no-film .book__pages { position: relative; transform: none !important; width: min(1410px, 100%); height: auto; aspect-ratio: 1.41; margin: 0 auto; container-type: inline-size; }
html.no-film .book__paper { opacity: 1; }
html.no-film .writing__title { font-size: 7.6cqi; }
html.no-film .writing__line { font-size: 5cqi; }
html.no-film .writing__sign { font-size: 3.7cqi; }
html.no-film .scene--search { height: auto; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 30rem) 1fr minmax(0, 22rem); gap: var(--sc-6); align-items: center; padding: 14vh var(--sc-gutter); }
html.no-film .scene--search .story, html.no-film .scene--search .pillar__list--find { position: relative; left: auto; right: auto; top: auto; translate: none; width: auto; z-index: 4; }
html.no-film .scene--search .serp__cap { position: relative; grid-column: 1 / -1; left: auto; bottom: auto; width: auto; z-index: 4; }
html.no-film .scene--search .story { grid-column: 1; } html.no-film .scene--search .pillar__list--find { grid-column: 3; }
html.no-film .story { background: rgba(14, 10, 7, 0.82); padding: var(--sc-6); border-radius: var(--sc-r-md); display: grid; gap: var(--sc-6); }
html.no-film .story > .pillar { grid-area: auto; }
html.no-film .pillar__list--find { background: rgba(14, 10, 7, 0.82); padding: var(--sc-5); border-radius: var(--sc-r-md); }
html.no-film .search__hook, html.no-film .brindar__hook, html.no-film .inside__line, html.no-film .notes, html.no-film .serp__more { display: none; }
html.no-film .scene--wall { height: auto; padding: var(--sc-9) var(--sc-gutter); display: grid; gap: var(--sc-9); }
html.no-film .wall__intro, html.no-film .vex, html.no-film .vex__cap { position: relative; inset: auto; left: auto; right: auto; top: auto; translate: none; margin: 0; width: auto; visibility: visible; opacity: 1; }
html.no-film .vex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--sc-6); align-items: center; }
html.no-film .vex__frame { position: relative; transform: none !important; width: 100% !important; height: auto !important; aspect-ratio: var(--ar); }
html.no-film .scene--brindar { height: 100svh; }
html.no-film .site-frame { display: none; }
html.no-film .inside__chip { top: auto; bottom: var(--sc-5); }
html.no-film .scene--night { height: 100svh; min-height: 44rem; }
html.no-film [data-fade] { opacity: 1; visibility: visible; }
html.no-film:not(.js) .shot { inset: 0; width: 100% !important; height: 100% !important; transform: none !important; }
html.no-film:not(.js) .shot > img, html.no-film:not(.js) .shot > picture > img { object-fit: cover; }
html.no-film:not(.js) .screen, html.no-film:not(.js) .portal--draft { display: none; }
@media (max-width: 860px) {
  html.no-film .vex { grid-template-columns: 1fr; }
  html.no-film .scene--night { height: auto; min-height: 100svh; }
  html.no-film .scene--night .cam { position: relative; height: 60svh; }
  html.no-film .close { position: relative; left: 0; right: 0; bottom: auto; padding: var(--sc-5) var(--sc-gutter); }
}