:root {
  --ink: #071f30;
  --ink-soft: #12374a;
  --paper: #f2efe7;
  --paper-warm: #e8e1d3;
  --white: #f8f6f0;
  --coral: #f34562;
  --cyan: #35a5b4;
  --amber: #f1a343;
  --moss: #3b583c;
  --line: rgba(7, 31, 48, 0.18);
  --side: clamp(1.25rem, 5vw, 5.5rem);
  --max: 92rem;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Helvetica Neue", "Arial Nova", Arial, sans-serif; overflow-x: clip; }
body.pulse-on { --coral: #ff385c; }
img { display: block; width: 100%; }
a { color: inherit; }
button { font: inherit; }
::selection { color: var(--white); background: var(--coral); }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .8rem 1rem; color: var(--white); background: var(--ink); transition: top .2s; }
.skip-link:focus { top: 1rem; }
.grain { position: fixed; inset: 0; z-index: 100; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: rgba(255,255,255,.12); }
.scroll-progress span { display: block; width: 100%; height: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left center; }

.topbar { position: fixed; z-index: 200; inset: 0 0 auto; height: 5.3rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: .8rem var(--side); color: var(--white); mix-blend-mode: difference; pointer-events: none; }
.topbar a { text-decoration: none; pointer-events: auto; }
.wordmark { display: inline-grid; grid-template-columns: auto 1fr; width: max-content; align-items: end; line-height: .8; font-size: 1.22rem; font-weight: 800; letter-spacing: -.045em; }
.wordmark i { width: .42rem; height: .42rem; margin: 0 0 .08rem .18rem; background: var(--white); border-radius: 50%; }
.wordmark small { grid-column: 1 / 3; margin-top: .25rem; font-size: .48rem; line-height: 1; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.topbar nav { display: flex; gap: 1.6rem; font-size: .66rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.topbar nav a { position: relative; opacity: .62; transition: opacity .25s; }
.topbar nav a:hover, .topbar nav a.active { opacity: 1; }
.topbar nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.4rem; height: 1px; background: currentColor; transition: right .3s var(--ease); }
.topbar nav a:hover::after, .topbar nav a.active::after { right: 0; }
.director { margin: 0; justify-self: end; font: italic 1rem Georgia, serif; }

.section-shell { width: min(100%, var(--max)); margin: 0 auto; padding-left: var(--side); padding-right: var(--side); }
.chapter-mark { display: flex; align-items: center; gap: .8rem; font-size: .64rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.chapter-mark span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid currentColor; border-radius: 50%; }
.chapter-mark p { margin: 0; }
.kicker, .eyebrow { margin: 0 0 1.4rem; font-size: .7rem; line-height: 1; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.kicker.light { color: rgba(255,255,255,.66); }
.display { margin: 0; font-size: clamp(3rem, 7.4vw, 8.2rem); line-height: .91; letter-spacing: -.062em; font-weight: 700; }
.display em { font-family: Georgia, serif; font-weight: 400; }

.opening { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: 8rem var(--side) clamp(4.5rem, 9vh, 7rem); color: var(--white); background: #17232d; overflow: hidden; }
.opening-image { position: absolute; inset: 0; background-image: url('assets/routine.jpg'); background-size: cover; background-position: 54% 50%; filter: saturate(.15) contrast(.92) brightness(.64); transform: scale(1.025); animation: openingDrift 14s ease-out both; }
.opening-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,17,25,.82) 0%, rgba(4,17,25,.48) 50%, rgba(4,17,25,.25) 100%), linear-gradient(0deg, rgba(4,17,25,.62), transparent 55%); }
.opening-copy { position: relative; z-index: 1; width: min(60rem, 82vw); }
.opening h1 { margin: 0; font-size: clamp(4.2rem, 11.5vw, 11rem); line-height: .78; letter-spacing: -.075em; font-weight: 700; }
.opening h1 span { display: block; }
.opening h1 span:last-child { margin-left: clamp(1.5rem, 8vw, 9rem); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.86); }
.opening-quote { margin: 2.2rem 0 0; font: italic clamp(1rem, 1.5vw, 1.35rem)/1.4 Georgia, serif; color: rgba(255,255,255,.72); }
.opening-caption { position: absolute; z-index: 1; right: var(--side); bottom: 5rem; max-width: 17rem; margin: 0; padding-left: 2.5rem; font-size: .66rem; line-height: 1.45; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.opening-caption::before { content: ""; position: absolute; left: 0; top: .45rem; width: 1.8rem; height: 1px; background: currentColor; }
.scroll-cue { position: absolute; z-index: 2; right: var(--side); bottom: 1.6rem; display: flex; align-items: center; gap: .8rem; text-decoration: none; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.scroll-cue i { width: 2.6rem; height: 1px; background: currentColor; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; right: 0; top: -3px; width: .45rem; height: .45rem; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }

.prologue { min-height: 120vh; padding-top: clamp(8rem, 14vw, 15rem); padding-bottom: clamp(8rem, 14vw, 15rem); }
.prologue-copy { width: min(72rem, 100%); margin: clamp(5rem, 9vw, 9rem) 0 0 auto; }
.prologue .accent { margin-left: clamp(0rem, 8vw, 9rem); color: var(--coral); font-family: Georgia, serif; font-weight: 400; font-style: italic; }
.two-column-copy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 8rem); width: min(62rem, 88%); margin: clamp(4rem, 8vw, 8rem) 0 0 auto; }
.two-column-copy p { margin: 0; font-size: clamp(1.08rem, 1.65vw, 1.48rem); line-height: 1.55; }
.pull-quote { margin: clamp(6rem, 12vw, 12rem) 0 0; padding-top: 2.5rem; border-top: 1px solid var(--ink); font-size: clamp(2rem, 4vw, 4.5rem); line-height: 1.12; letter-spacing: -.035em; }
.pull-quote em { color: var(--cyan); font-family: Georgia, serif; font-weight: 400; }

.rupture { position: relative; height: 240vh; color: var(--white); background: var(--ink); }
.rupture-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-content: center; padding: 7rem var(--side); overflow: hidden; }
.rupture-prelude { position: absolute; top: 16%; left: var(--side); width: min(22rem, 60vw); margin: 0; font: italic 1rem/1.5 Georgia, serif; color: rgba(255,255,255,.48); opacity: calc(1 - var(--rupture-progress, 0)); }
.rupture h2 { position: relative; z-index: 2; margin: 0; font-size: clamp(5rem, 15vw, 14rem); line-height: .7; letter-spacing: -.08em; text-transform: uppercase; }
.rupture h2 span { display: block; transform: translateX(calc((var(--rupture-progress, 0) - .45) * var(--shift, 0px))); }
.rupture h2 span:nth-child(1) { --shift: -45px; }
.rupture h2 span:nth-child(2) { --shift: 80px; color: var(--coral); }
.rupture h2 span:nth-child(3) { --shift: -110px; color: transparent; -webkit-text-stroke: 1.5px var(--white); }
.rupture-note { position: absolute; right: var(--side); bottom: 8%; width: min(21rem, 65vw); margin: 0; font-size: .73rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.58); transform: translateY(calc((1 - var(--rupture-progress, 0)) * 3rem)); opacity: var(--rupture-progress, 0); }
.fault { position: absolute; z-index: 1; left: 50%; top: 50%; width: 1px; height: 0; background: var(--white); box-shadow: 0 0 12px rgba(255,255,255,.5); transform-origin: top; transition: height .1s linear; }
.fault-a { transform: translate(-7rem,-18rem) rotate(19deg); height: calc(var(--rupture-progress, 0) * 50rem); }
.fault-b { transform: translate(11rem,-13rem) rotate(-25deg); height: calc(var(--rupture-progress, 0) * 34rem); opacity: .4; }

.impact-strip { position: relative; z-index: 3; overflow: hidden; padding: 1.2rem 0 1.35rem; color: var(--ink); background: var(--coral); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.impact-strip div { display: flex; align-items: center; width: max-content; gap: 2.2rem; white-space: nowrap; animation: ticker 22s linear infinite; }
.impact-strip span, .impact-strip i { font-size: clamp(1.5rem, 3.7vw, 4rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.impact-strip i { font-family: Georgia, serif; font-weight: 400; text-transform: none; }
.impact-strip i::before, .impact-strip i::after { content: "·"; margin: 0 2.2rem; font-family: Arial, sans-serif; font-style: normal; }

.arrival { position: relative; min-height: 115svh; display: flex; align-items: flex-end; padding: 9rem var(--side) 8rem; color: var(--white); overflow: hidden; }
.arrival-image { position: absolute; inset: 0; background: url('assets/teide.jpg') center / cover no-repeat; transform: scale(1.04); }
.arrival-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,17,25,.8), rgba(4,17,25,.05) 67%), linear-gradient(0deg, rgba(4,17,25,.68), transparent 54%); }
.arrival-copy { position: relative; z-index: 1; width: min(55rem, 90%); }
.arrival-copy h2, .sensations-head h2, .locations-head h2, .ending-copy h2 { margin: 0; font-size: clamp(4rem, 10vw, 10.5rem); line-height: .82; letter-spacing: -.072em; }
.arrival-copy > p:last-child { width: min(36rem, 100%); margin: 2.5rem 0 0; font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.5; }
.image-label { position: absolute; z-index: 1; right: var(--side); bottom: 2rem; margin: 0; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }

.pulse { padding-top: clamp(8rem, 13vw, 14rem); padding-bottom: clamp(8rem, 13vw, 14rem); }
.pulse-intro { max-width: 75rem; margin: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem) auto; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.story-card { min-height: 44rem; display: flex; flex-direction: column; padding: clamp(2rem, 4.5vw, 5rem); background: var(--paper); }
.story-card:nth-child(1) { color: var(--ink); background: #e5e4e0; }
.story-card.vivid { color: var(--white); background: var(--coral); }
.story-card.moss { color: var(--white); background: var(--moss); }
.story-card.water { color: var(--white); background: var(--cyan); }
.story-number { margin: 0 0 auto; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-card h3 { margin: 4rem 0 2rem; font-size: clamp(3.2rem, 6vw, 6.4rem); line-height: .84; letter-spacing: -.06em; }
.story-card h3.story-title-long { font-size: clamp(2.65rem, 4.2vw, 4.75rem); letter-spacing: -.07em; }
.story-card blockquote { margin: 0 0 1.8rem; padding-top: 1.5rem; border-top: 1px solid currentColor; font: italic clamp(1.05rem, 1.7vw, 1.45rem)/1.4 Georgia, serif; }
.story-card > p:not(.story-number,.story-sense) { max-width: 34rem; margin: 0; font-size: .95rem; line-height: 1.6; }
.story-sense { margin: 2.5rem 0 0; font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }

.sensations { padding: clamp(8rem, 13vw, 14rem) 0; color: var(--white); background: var(--ink); }
.sensations-head h2 { margin-bottom: clamp(4rem, 8vw, 8rem); }
.sensations-grid { width: min(calc(100% - 2 * var(--side)), 106rem); margin: auto; display: grid; grid-template-columns: 1.35fr .75fr .75fr; gap: clamp(.7rem, 1.5vw, 1.6rem); align-items: end; }
.sensation { margin: 0; }
.sensation img { height: min(63vw, 49rem); object-fit: cover; }
.sensation-teide img { height: min(48vw, 39rem); }
.sensation-anaga { transform: translateY(-8vw); }
.sensation-carnival { transform: translateY(5vw); }
.sensation figcaption { display: flex; align-items: center; gap: .8rem; padding-top: .75rem; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.sensation figcaption span { color: var(--coral); }

.manifesto { padding-top: clamp(8rem, 13vw, 14rem); padding-bottom: clamp(8rem, 13vw, 14rem); }
.manifesto-head { margin: clamp(4rem, 8vw, 8rem) 0 clamp(7rem, 13vw, 13rem) auto; width: min(72rem, 100%); }
.principle { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(20rem,.85fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; margin-bottom: clamp(8rem, 16vw, 17rem); }
.principle.reverse { grid-template-columns: minmax(20rem,.8fr) minmax(0,1.2fr); }
.principle.reverse .principle-media { order: 2; }
.principle-media { position: relative; overflow: hidden; }
.principle-media img { aspect-ratio: 4 / 3; height: 100%; object-fit: cover; transition: transform 1.5s var(--ease); }
.principle-media.portrait { width: min(100%, 34rem); margin-left: auto; }
.principle-media.portrait img { aspect-ratio: 3 / 4; }
.principle:hover .principle-media img { transform: scale(1.035); }
.principle-index { margin: 0 0 2.2rem; font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--coral); }
.principle-copy h3, .lens-language h3 { margin: 0 0 2.6rem; font-size: clamp(3rem, 5.7vw, 6.5rem); line-height: .88; letter-spacing: -.06em; }
.principle-copy h3 em { color: var(--cyan); font-family: Georgia, serif; font-weight: 400; }
.principle-copy > p:not(.principle-index) { margin: 0 0 1.1rem; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; }
.principle-copy strong { display: block; margin-top: 2.7rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.25; }
.lens-language { --lens-progress: 0; --micro-opacity: 1; --body-opacity: 0; --forest-opacity: 0; --monument-opacity: 0; --lens-reticle-opacity: .72; --lens-reticle-scale: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 8vw, 9rem); padding: clamp(4rem, 7vw, 7rem); color: var(--white); background: var(--ink); }
.lens-language p:last-child { align-self: end; margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.65; }
.lens-journey { position: relative; grid-column: 1 / -1; height: 240vh; min-height: 84rem; margin: 1rem 0 0; }
.lens-zoom { position: sticky; top: 5.3rem; height: calc(100vh - 6.3rem); min-height: 32rem; overflow: hidden; isolation: isolate; background: #061824; }
.lens-frame { position: absolute; z-index: -3; inset: -1px; background-position: center; background-size: cover; will-change: opacity, transform; }
.lens-frame-micro { background-image: url('assets/micro-skin-v1.jpg'); opacity: var(--micro-opacity); transform: scale(calc(1.16 - var(--lens-progress) * .1)); }
.lens-frame-body { background-image: url('assets/calma.jpg'); background-position: 67% 49%; opacity: var(--body-opacity); transform: scale(calc(1.12 - var(--lens-progress) * .08)); }
.lens-frame-forest { background-image: url('assets/anaga.jpg'); background-position: center 42%; opacity: var(--forest-opacity); transform: scale(calc(1.08 - var(--lens-progress) * .05)); }
.lens-frame-monument { background-image: url('assets/teide.jpg'); background-position: center 48%; opacity: var(--monument-opacity); transform: scale(calc(1.06 - var(--lens-progress) * .06)); }
.lens-zoom-shade { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 46% 50%, transparent 5%, rgba(2,20,31,.1) 36%, rgba(2,20,31,.56) 100%), linear-gradient(180deg, rgba(2,20,31,.08), rgba(2,20,31,.38)); }
.lens-reticle { position: absolute; left: 46%; top: 50%; width: clamp(4rem, 7vw, 7rem); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; opacity: var(--lens-reticle-opacity); transform: translate(-50%,-50%) scale(var(--lens-reticle-scale)); }
.lens-reticle i { position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.72); transform: translate(-50%,-50%); }
.lens-reticle i:first-child { width: 135%; height: 1px; }
.lens-reticle i:last-child { width: 1px; height: 135%; }
.lens-readout { position: absolute; z-index: 2; top: 1.5rem; right: 1.5rem; font-size: clamp(1.35rem, 2.6vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; text-shadow: 0 1px 16px rgba(0,0,0,.55); }
.lens-hint { position: absolute; z-index: 3; left: 1.5rem; top: 1.5rem; display: inline-flex; align-items: center; gap: .7rem; max-width: 24rem; padding: .75rem .9rem; border: 1px solid rgba(255,255,255,.55); border-radius: 2rem; background: rgba(2,20,31,.42); backdrop-filter: blur(10px); opacity: calc(1 - var(--lens-progress)); font-size: .58rem; font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; transition: opacity .15s linear; }
.lens-hint i { font: normal 1rem/1 Arial, sans-serif; }
.scale-axis { position: absolute; z-index: 4; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.38); border-radius: 3rem; background: rgba(2,20,31,.48); backdrop-filter: blur(12px); font-size: .55rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.scale-axis input { --thumb: 1.15rem; width: 100%; height: var(--thumb); margin: 0; appearance: none; -webkit-appearance: none; cursor: ew-resize; background: linear-gradient(90deg, var(--coral), var(--cyan)) 0 50% / calc(var(--lens-progress) * 100%) 2px no-repeat, linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) center / 100% 1px no-repeat; border-radius: 1rem; }
.scale-axis input::-webkit-slider-thumb { width: var(--thumb); height: var(--thumb); appearance: none; -webkit-appearance: none; border: 3px solid var(--white); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .32rem rgba(245,72,100,.22), 0 .2rem 1rem rgba(0,0,0,.35); }
.scale-axis input::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 3px solid var(--white); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 .32rem rgba(245,72,100,.22), 0 .2rem 1rem rgba(0,0,0,.35); }
.scale-axis input:focus-visible { outline: 2px solid var(--white); outline-offset: .45rem; }

.locations { padding: clamp(8rem, 13vw, 14rem) 0; color: var(--white); background: var(--coral); }
.locations-head > p:last-child { margin: 2rem 0 7rem; font: italic clamp(1.5rem, 3vw, 3rem) Georgia, serif; }
.location-list { border-top: 1px solid rgba(255,255,255,.5); }
.location-row { display: grid; grid-template-columns: 4rem 1fr 1.35fr; gap: 2rem; align-items: center; min-height: 13rem; padding-top: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.5); }
.location-row > span { align-self: start; font-size: .6rem; font-weight: 800; }
.location-row h3 { margin: 0; font-size: clamp(2.2rem, 4.5vw, 5rem); line-height: .84; letter-spacing: -.055em; }
.location-row p { margin: 0; font-size: clamp(.9rem, 1.35vw, 1.2rem); line-height: 1.5; }
.location-closure { margin-top: 7rem; font-size: clamp(1.45rem, 3vw, 3rem); line-height: 1.2; letter-spacing: -.035em; }

.sound { padding-top: clamp(8rem, 13vw, 14rem); padding-bottom: clamp(8rem, 13vw, 14rem); color: var(--white); background: var(--ink); }
.sound-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 9vw, 10rem); margin: clamp(5rem, 10vw, 10rem) 0; }
.sound-copy h2 { margin: 0; font-size: clamp(3.5rem, 7vw, 7.7rem); line-height: .87; letter-spacing: -.065em; }
.sound-emphasis { margin: 1.5rem 0 3.5rem !important; color: var(--cyan); font: italic clamp(2rem, 4vw, 4rem)/1.1 Georgia, serif !important; }
.sound-copy > p:not(.kicker,.sound-emphasis) { max-width: 40rem; margin: 0 0 1.2rem; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.6; color: rgba(255,255,255,.72); }
.sound-step { color: inherit; font-weight: 400; transition: color .3s ease, font-weight .3s ease, text-shadow .3s ease; }
.sound-step.is-heard { color: var(--white); font-weight: 800; }
.sound-step.is-current { color: var(--cyan); text-shadow: 0 0 1.2rem rgba(53,165,180,.75); }
.pulse-button { display: inline-flex; align-items: center; gap: .8rem; margin-top: 2rem; padding: .9rem 1.2rem; color: var(--white); border: 1px solid rgba(255,255,255,.6); border-radius: 2rem; background: transparent; cursor: pointer; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: color .25s, background .25s; }
.pulse-button:hover, .pulse-button[aria-pressed="true"] { color: var(--ink); background: var(--white); }
.pulse-button i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(243,69,98,.6); }
.pulse-button[aria-pressed="true"] i { animation: buttonPulse 1s infinite; }
.wave { height: clamp(24rem, 45vw, 45rem); display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.wave span { display: block; width: clamp(3px, .45vw, 8px); height: var(--h); background: rgba(255,255,255,.27); transform-origin: center; transition: height .8s var(--ease), background .4s; }
.wave span.hit { background: var(--coral); }
.pulse-on .wave span { animation: waveBeat 1.6s calc(var(--h) * -0.01) ease-in-out infinite alternate; background: var(--cyan); }
.pulse-on .wave span.hit { background: var(--coral); }
.voice-note { margin: 0 0 0 auto; width: min(54rem, 100%); padding-top: 2.2rem; border-top: 1px solid rgba(255,255,255,.4); font: italic clamp(1.7rem, 3.2vw, 3.4rem)/1.25 Georgia, serif; color: rgba(255,255,255,.72); }

.ending { position: relative; min-height: 115svh; display: flex; align-items: flex-end; padding: 10rem var(--side) 9rem; color: var(--white); overflow: hidden; }
.ending-image { position: absolute; inset: 0; background: url('assets/calma.jpg') center / cover no-repeat; transform: scale(1.03); }
.ending-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,28,46,.83), rgba(2,28,46,.06) 65%), linear-gradient(0deg, rgba(2,28,46,.72), transparent 58%); }
.ending-copy { position: relative; z-index: 1; width: min(62rem, 90%); }
.ending-copy h2 { margin-bottom: 3rem; }
.ending-copy > p:not(.kicker) { max-width: 34rem; margin: 0 0 1.2rem; font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.55; color: rgba(255,255,255,.75); }
.ending-copy strong { display: block; max-width: 43rem; font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.3; }
.closing-credit { position: absolute; z-index: 1; right: var(--side); bottom: 2rem; display: flex; gap: 2rem; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.68); }
.closing-credit p { margin: 0; }

.js .reveal { opacity: 0; transform: translateY(2.5rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in-view { opacity: 1; transform: none; }

@keyframes openingDrift { from { transform: scale(1.09); } to { transform: scale(1.025); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes buttonPulse { 70% { box-shadow: 0 0 0 .55rem rgba(243,69,98,0); } 100% { box-shadow: 0 0 0 0 rgba(243,69,98,0); } }
@keyframes waveBeat { from { transform: scaleY(.55); } to { transform: scaleY(1.12); } }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr 1fr; }
  .topbar nav { display: none; }
  .director { display: block; }
  .opening-caption { display: none; }
  .two-column-copy, .principle, .principle.reverse, .lens-language, .sound-grid { grid-template-columns: 1fr; }
  .two-column-copy { width: 100%; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-card { min-height: 38rem; }
  .sensations-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .sensation-teide { grid-column: 1 / -1; }
  .sensation-teide img { height: 60vw; }
  .sensation-anaga, .sensation-carnival { transform: none; }
  .sensation img { height: 78vw; }
  .principle.reverse .principle-media { order: 0; }
  .principle-media.portrait { width: 100%; }
  .lens-language .scale-axis { grid-column: 1; }
  .lens-journey { grid-column: 1; }
  .location-row { grid-template-columns: 2.5rem 1fr; }
  .location-row p { grid-column: 2; }
  .wave { grid-row: 1; height: 18rem; }
}

@media (max-width: 600px) {
  .topbar { height: 4.5rem; }
  .director { font-size: .8rem; }
  .opening { padding-bottom: 6.5rem; }
  .opening-image { background-position: 62% center; }
  .opening h1 { font-size: clamp(4rem, 21vw, 6.4rem); line-height: .82; }
  .opening h1 span:last-child { margin-left: 0; }
  .opening-quote { width: 70%; }
  .prologue { min-height: auto; }
  .prologue .accent { margin-left: 0; margin-top: .4rem; }
  .two-column-copy { grid-template-columns: 1fr; }
  .rupture h2 { font-size: 20vw; }
  .rupture-prelude { top: 19%; }
  .impact-strip div { animation-duration: 13s; }
  .arrival { min-height: 100svh; padding-bottom: 7rem; }
  .arrival-copy { width: 100%; }
  .image-label { right: auto; left: var(--side); }
  .story-card { min-height: 33rem; }
  .sensations-grid { display: flex; overflow-x: auto; width: 100%; padding: 0 var(--side) 1.5rem; scroll-snap-type: x mandatory; }
  .sensation { min-width: 78vw; scroll-snap-align: center; }
  .sensation img, .sensation-teide img { height: 105vw; }
  .principle { gap: 2.5rem; margin-bottom: 9rem; }
  .principle-copy h3 { margin-bottom: 1.8rem; }
  .lens-language { padding: 3rem 1.5rem; }
  .lens-journey { height: 230vh; min-height: 76rem; margin-left: -1.5rem; margin-right: -1.5rem; }
  .lens-zoom { top: 4.5rem; height: calc(100vh - 5.25rem); min-height: 28rem; }
  .lens-frame-body { background-position: 69% 49%; }
  .lens-frame-forest { background-position: 52% 42%; }
  .lens-reticle { left: 52%; }
  .lens-hint { right: 1rem; left: 1rem; max-width: none; width: fit-content; }
  .lens-readout { top: 5.5rem; right: 1rem; }
  .scale-axis { right: 1rem; bottom: 1rem; left: 1rem; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; border-radius: 1.1rem; }
  .scale-axis input { grid-column: 1 / -1; grid-row: 1; }
  .scale-axis span:last-child { text-align: right; }
  .location-row { min-height: 12rem; padding-left: 0; padding-right: 0; }
  .location-row h3 { font-size: 2.8rem; }
  .location-closure br { display: none; }
  .wave { height: 13rem; gap: .22rem; }
  .closing-credit { left: var(--side); right: var(--side); justify-content: space-between; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .opening-image { transform: none; }
  .lens-journey { height: auto; min-height: 0; }
  .lens-zoom { position: relative; top: auto; height: min(70vh, 42rem); }
  .lens-frame { transform: none; }
  .lens-frame-micro, .lens-frame-body, .lens-frame-forest { opacity: 0; }
  .lens-frame-monument { opacity: 1; }
  .lens-reticle { opacity: 0; }
  .js .reveal { opacity: 1; transform: none; }
}