/* Willka — hero film. tokens.css is linked first; hard values here are multiples of 8. */
:root{ --ink:#0d0b10; --bone:#efe9df; --lav:#bcb0d3; --rose:#e8a6a0; --sun:#f3c27a; }
html{ background:var(--ink); color:var(--bone); }
body{ margin:0; font-family: "Inter", -apple-system, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
#loader{ position:fixed; inset:0; z-index:50; background:var(--ink); display:grid; place-content:center; gap:16px; text-align:center; transition:opacity .6s ease; }
#loader.done{ opacity:0; pointer-events:none; }
.loader-mark{ font-family: "Melodrama", Georgia, serif; letter-spacing:.32em; font-size:14px; color:var(--lav); }
.loader-bar{ width:160px; height:1px; background:#2a2630; position:relative; }
.loader-bar i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--bone); }
.loader-pct{ font-size:11px; letter-spacing:.2em; color:#7d7590; }

.hero{ position:relative; }
.track{ height: var(--track-h, 700vh); }           /* set by main.js from the manifest */
.stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--ink); }   /* svh, not vh: on iOS vh is the toolbar-collapsed height, so the film hung below the fold and shifted as the bar moved */
#seq, #poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#poster{ z-index:0; } #seq{ z-index:1; }
.bird{ position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0; transition:opacity .25s; pointer-events:none; }
.reveal{ position:absolute; inset:0; z-index:1;   /* Sep 14: under the bird (it sat on top and hid her arrival from the summit); later in the DOM than #seq, so still over the film */  width:100%; height:100%; opacity:0; transition:opacity .18s; pointer-events:none; }
.burn{ position:absolute; inset:0; z-index:3; background:#fff; opacity:0; pointer-events:none; }
.seam{ position:absolute; inset:0; z-index:3; width:100%; height:100%; opacity:0; pointer-events:none; }   /* the sun seam (seam.js) sits with the burn, above the film and the bird */

.copy{ position:absolute; inset:0; z-index:4; display:grid; grid-template-rows: 1fr auto 1fr; padding: 112px 48px 48px; pointer-events:none; }   /* top padding clears the nav: the kicker sat on the wordmark's heels (Susana 21:50) */
.copy > *{ grid-column:1; opacity:0; transform: translateY(8px); will-change: opacity, transform; }   /* all beats share one column: rows overlap as designed, nothing lands in an implicit column */
.kicker{ grid-row:1; align-self:start; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); text-shadow:0 1px 18px rgba(0,0,0,.55); margin:0; }
.title{ grid-row:2; margin:0; font-family: "Melodrama", Georgia, serif; font-weight:400; font-size: clamp(56px, 12vw, 176px); line-height:.92; letter-spacing:-.01em; color:var(--bone);
        /* the broken rule: the title overlaps the door edge on purpose */ margin-left:-8px; }
.sub{ grid-row:3; align-self:start; margin:16px 0 0; font-family:"Melodrama", Georgia, serif; font-weight:400; font-size:20px; letter-spacing:.01em; color:var(--bone); text-shadow:0 1px 18px rgba(0,0,0,.45); }
/* the feeling line, directly under the factual one: fact first, feeling second */
.rhythm{ grid-row:3; align-self:start; margin:58px 0 0; font-family:"Melodrama", Georgia, serif; font-weight:400; font-size:20px; letter-spacing:.01em; color:var(--bone); text-shadow:0 1px 18px rgba(0,0,0,.55); }   /* was rose 300 with no shadow: ~1.3:1 on the dawn sky, invisible (Susana 21:55) */
.rhythm .em{ font-weight:700; color:var(--bone); }
.line{ grid-row:2; align-self:center; justify-self:end; max-width: 28ch; text-align:right; font-family: "Melodrama", Georgia, serif; font-weight:300; font-size: clamp(24px, 3.4vw, 48px); line-height:1.18; color:var(--bone); text-shadow: 0 1px 24px rgba(0,0,0,.35); }
.scrollcue{ grid-row:3; align-self:end; justify-self:center; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--lav); }

/* THE LAST DOOR (Susana 00:10: "it just ends on the salt, and the white is a shock"): the film dips to ink, then the view from
   the bed rises as the ground, the parked line, the invitation, the studio's signature. */
.lastdoor h2{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(36px, 4.4vw, 74px); line-height:1.0; letter-spacing:-.01em; margin: 12px 0 22px; max-width:none; }
.lastdoor h2 [data-t]{ display:block; white-space:nowrap; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }   /* Sep 15, her "weird dot" in "a journey": at line-height 1 the box ends .150 em under the baseline and Melodrama's j descends .262 em, so the clip cut the hook and left its ball terminal floating (y, p, g lost .10 em too). The padding lets descenders through; the negative margin keeps the lines where they were */   /* each line is its own pinned box: the break is a decision, not a wrap, and a scrambled string can never reflow it */
.lastdoor .kicker{ color:var(--lav); text-shadow:none; }
.after-lead{ font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-weight:400; font-size: clamp(16px, 1.3vw, 20px); line-height:1.5; margin:0 0 32px; max-width: 34ch; color:rgba(239,233,223,.92); }
.after-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.lastdoor .pill{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding:14px 22px; border-radius:999px;
  background: linear-gradient(rgba(239,233,223,.90), rgba(239,233,223,.76)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(13,11,16,.26); }
.lastdoor .quiet{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone); text-decoration:underline; text-underline-offset:6px; text-decoration-color:rgba(239,233,223,.45); }
.sig{ position:relative; z-index:1; padding: 24px 48px 28px; border-top:1px solid rgba(239,233,223,.12); }
.sig a{ display:inline-flex; align-items:center; gap:14px; color:var(--bone); text-decoration:none; font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:15px; letter-spacing:.02em; opacity:.85; }
.sig a:hover{ opacity:1; }
.sig .sigil{ display:block; flex:none; }
.sig b{ font-weight:700; }
@media (max-width: 810px){ .sig{ padding:20px 24px 24px; } }
.line .em{ font-weight:700; }   /* the phrase that carries the meaning, two steps up from the 300 around it */
/* line-a is stepped, not wrapped: it breaks after "built" and the second line starts just before that
   word ends — the overlap rule (Gate 2) carried into the copy. The indent is in em so it tracks the type. */
.line-a{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; max-width:none; }   /* kept for the last door */
/* left-aligned inside a pinned box: the resolved characters stay put and the line assembles rightward.
   When resolved the box is exactly the text width, so it still sits flush to the margin. */

/* "Walk through it." belongs AT the door, not on the right margin. The doorway sits at 46-54% of the
   frame and the gate stone spans 34-66%, so the line starts just past the opening, over the right
   jamb, and runs out into the sky. */
/* The one line inside the film. It sits in the 3-second hold at the door (global 0.43-0.53) — the only
   still moment in the shot — centred in the opening and high in the sky, clear of the bird and the sun.
   Smaller than the old copy on purpose: during a dolly, text must be glanceable, not readable. */
/* The glass pane. Its own plane, above the film: it separates the offer from the landscape and gives
   the hummingbird something to hover against. A whisper of frost with a hairline — not a milky slab.
   `translate` (not `transform`) carries the sideways drift, because the fade beats own `transform`. */
.line-gate{ position:absolute; z-index:5; top:22%; left:50%; margin:0; text-align:left;
  font-size: clamp(18px, 1.9vw, 26px); line-height:1.25;
  box-sizing:border-box; padding: 20px 30px; border-radius:16px;   /* the pin sets the BORDER box; without this the padding doubles the offset */
  /* Susana 21:00: the frost was invisible on the pale sky. Ink glass now: the card is a dark pane, the bone text on it
     measures 9:1 (was ~1.6:1 against the sun haze). Still glass: the sky moves behind it, blurred. */
  /* Susana, Sep 13, on her phone: "the card at the gate is really hard to read". Measured against the sky pixels
     under it (1b f_0008, avg rgb 178,178,198): bone on .42/.34 ink = 3.87:1. At .68/.60 it is 7.54:1. */
  background: linear-gradient(rgba(13,11,16,.68), rgba(13,11,16,.60));
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 50px rgba(13,11,16,.28);
  will-change: opacity, transform, translate; }
.line-gate .em{ color:var(--bone); }
/* CENTRED IN THE DOORWAY, not the screen (Susana, Sep 15: "it does not feel in the middle of the two pillars"). The opening was measured
   in frames/1b-v2 (jambs .23 to .14 on the left, .74 to .84 on the right): its centre is .485 to .487 on every frame the card is shown,
   so a screen-centred card sat 1.4 % of the frame to the right of it. The film is object-fit: cover, so a frame fraction lands at
   50% + (fx - .5) x max(100vw, 100svh x 16/9). Phones draw the 9:16 cut, where both jambs are out of frame: they stay screen-centred. */
.line-gate{ left:calc(50% + (.486 - .5) * max(100vw, 100svh * 1.7778)); }
@media (orientation: portrait) and (max-width: 899px) and (min-resolution: 2dppx){ .line-gate{ left:50%; } }
/* A scrambled run must never wrap: it made line-a break to three rows mid-reveal and settle back to two. */
/* A scrambled run must never wrap (it made line-a break to three rows mid-reveal), and never grow
   past its resolved width either — the box is pinned in JS and clips, so the right edge is a hard
   line that does not move. Only the glyphs inside change. */
.line-a .l1, .line-a .l2, .line-gate{ white-space:nowrap; overflow:hidden; }
.line-a .l2{ margin-left: 9.2em; }
/* the broken rule, second half: one family, two weights inside one word — the W is the jamb, the rest is the light through it */
.title .w{ font-weight:700; }
.title .rest{ font-weight:300; }

/* 390. The lines share the title's column (base rule) so they never get squeezed into an implicit
   second column; here they simply take the padded width. Melodrama's zero is narrow, so ch-based
   maxima under-measure badly — no ch on this face. */
@media (max-width: 810px){
  .copy{ padding:88px 24px 24px; }
  .line{ max-width:none; font-size: clamp(22px, 6vw, 32px); }
  .kicker{ font-size:11px; letter-spacing:.16em; }
  .line-a .l2{ margin-left: 2.6em; }   /* 390 has no room for a full step; a short indent still reads as one */
  .line-gate{ top:22%; font-size: clamp(21px, 5.6vw, 26px); font-weight:400; padding:18px 26px; }   /* was 17 px at 300: a hairline on a phone (Sep 13) */
  .title{ font-size: clamp(52px, 15vw, 96px); align-self:end; margin-left:-4px; }
  /* MOBILE HERO ANCHORING (Susana, Sep 4: "the Willka and tagline are not aligned with the bottom").
     The desktop grid is 1fr auto 1fr, which floats the title dead centre — on a tall phone that parks it
     right on top of the cholita with dead air under it. On a phone the block belongs at the foot of the
     frame, reading upward: kicker at the top, then the picture, then the name and the line, then the cue.
     So the rows become auto 1fr auto and the title aligns to the END of the flexible row, which sets it
     directly above the sub and the rhythm rather than in the middle of nothing. */
  .copy{ grid-template-rows: auto 1fr auto; padding: 74px 24px calc(26px + env(safe-area-inset-bottom, 0px)); }
  .sub{ margin-top:10px; font-size:18px; padding-right:34px; }   /* clear the vertical scroll cue's column */
  .rhythm{ margin-top:46px; font-size:18px; padding-right:34px; }
  /* THE CUE SAT ON THE COPY (Susana, Sep 7: "one adventure sits on top of the scroll"). Centred at the foot
     of the frame it collided with the rhythm line once the copy was anchored to the bottom. On a phone it
     stands VERTICALLY down the right edge instead, clear of every line and reading as a margin note. */
  .scrollcue{ position:absolute; right:9px; bottom:26px; left:auto; top:auto;
              align-self:auto; justify-self:auto; margin:0;
              writing-mode: vertical-rl; text-orientation: mixed;
              font-size:8.5px; letter-spacing:.36em; }
}
/* REDUCE MOTION USED TO DELETE THE SITE (Susana, Sep 4, on her phone: "nothing is happening, only the footer").
   It collapsed the track to one screen and hid the film canvas, so the page became a still and a footer.
   That is the wrong reading of the setting: this film does not move on its own, it moves exactly as much
   as the reader moves it, and a scrubbed canvas is no more self-animating than a scrollbar. What the
   setting must switch off is the AUTONOMOUS motion: entrance animations, the hummingbird flying itself,
   the scrambling text, the sheen. Those are all handled. The film stays. */
@media (prefers-reduced-motion: reduce){ .copy > *{ opacity:1; transform:none; } }

/* ---- NAV (Susana 21:30: "Apple-style glass, three items, Willka top-left, a mark"). CSS backdrop glass, not liquid-glass-js:
   that library refracts an html2canvas snapshot and cannot follow a live canvas film (her lab verdict, Sep 3). Ink glass
   so it reads over the pale dawn as well as the dark plain. The mark: Willka's W turned over = two peaks, the sun in the notch. */
.nav{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center;
      padding:16px 24px; pointer-events:none; }
.nav > *{ pointer-events:auto; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--bone); text-decoration:none;
        filter: drop-shadow(0 1px 12px rgba(13,11,16,.45)); }
.brand .mark{ display:block; }
.wordmark{ font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:20px; letter-spacing:.06em; line-height:1; }
.wordmark b{ font-weight:700; }   /* the jamb and the light, as in the title */
.menu{ display:flex; align-items:center; gap:4px; padding:6px 6px 6px 18px; border-radius:999px;
       background: linear-gradient(rgba(13,11,16,.40), rgba(13,11,16,.30));
       -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
       box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 40px rgba(13,11,16,.28); }
.menu a{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
         color:rgba(239,233,223,.82); text-decoration:none; padding:8px 14px; border-radius:999px; transition: color .25s, background .25s; }
.menu a:hover{ color:var(--bone); background:rgba(255,255,255,.06); }
.menu a.cta{ background:var(--bone); color:var(--ink); padding:9px 16px; margin-left:6px; }
.menu a.cta:hover{ background:#fff; }
@media (max-width: 810px){
  .nav{ padding:12px 16px; }
  .wordmark{ font-size:18px; }
  .menu{ padding:4px 4px 4px 4px; }
  .menu a:not(.cta){ display:none; }   /* 390: the wordmark and Reserve only; the film is the menu */
  .menu a.cta{ margin-left:0; }
}

/* The bar fades out as the film starts (no flight: Susana 22:15 "the M flying from corner to corner is distracting").
   A separate home mark fades in at the right corner once we have passed the Sun Gate, and takes you back to the beginning. */
.nav{ transition: opacity .4s ease; }
.nav--min{ opacity:0; pointer-events:none; }
.home{ position:fixed; top:16px; right:24px; z-index:41; display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
  color:var(--bone); opacity:0; pointer-events:none; transition: opacity .6s ease;
  background: linear-gradient(rgba(13,11,16,.40), rgba(13,11,16,.30));
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 40px rgba(13,11,16,.28); }
.home--on{ opacity:1; pointer-events:auto; }
@media (max-width: 810px){ .home{ top:12px; right:16px; } }

/* ---- THE STAY: a page section that rides over the film on a rest point (p2out hold), so the site has a page between two films
   (Arina: film -> page -> film). Slides up from below, holds while it is read, slides on up; then the white and the salt. ---- */
.pagelet{ position:absolute; inset:0; z-index:5; transform:translateY(100%); will-change:transform; background:var(--ink); color:var(--bone); overflow:hidden; }
.pagelet-bg{ position:absolute; inset:0; background: url(media/stay-plate.webp) center / cover no-repeat; background-color:#0d0b10; filter: saturate(.85); }   /* a blurred mountain plate (the orbit at 6.2 s, the range over the lake): the cards are the only thing to read (Susana, Sep 4) */   /* the healed landing still behind the cards (Susana, Sep 4) */
.pagelet-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,11,16,.42) 0%, rgba(13,11,16,.52) 55%, rgba(13,11,16,.72) 100%); }   /* an even veil: nothing behind needs to stay visible */   /* dark on the right where the words are; the lodge on the left stays clear (Susana 23:05) */
.pagelet-inner{ position:relative; z-index:1; height:100%; box-sizing:border-box; padding: 88px 48px 36px; display:grid; grid-template-rows:auto auto 1fr auto; gap:22px; width:min(1120px, 86%); margin:0 auto; }   /* four bands: head · facts · cards · actions (UI pass, Sep 4). Must total under the viewport height or the block stops holding */
.pagelet-head{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 14px 48px; align-items:end; }   /* title left, lead right, bottoms on one line: the dead gap under the title is gone */
.pagelet-head h2{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(36px, 4.2vw, 62px); line-height:.96; letter-spacing:-.01em; margin:10px 0 0; max-width: 11ch; }
.pagelet .pk{ color:var(--lav); }
.pagelet .lead{ font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-weight:400; font-size: clamp(15px, 1.2vw, 18px); line-height:1.5; max-width: 40ch; margin:0 0 5px; color:rgba(239,233,223,.88); justify-self:end; }
.facts{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:24px; margin:0; padding:16px 0 15px; border-top:1px solid rgba(239,233,223,.16); border-bottom:1px solid rgba(239,233,223,.16); }   /* the ledger: the numbers carry the data so the cards can stay short */
.facts > div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:7px; }   /* values sit on one top line even when a label wraps (phones) */
.facts dd{ margin:0; font-family:"Melodrama", Georgia, serif; font-weight:300; font-size: clamp(26px, 2.3vw, 34px); line-height:1; letter-spacing:-.01em; color:var(--bone); }
.facts dd small{ font-size:.5em; margin-left:.14em; color:var(--lav); }
.facts dt{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(239,233,223,.62); }
.cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; align-self:end; }
.card.glass{ padding:20px 22px 22px; border-radius:20px; box-sizing:border-box; display:flex; flex-direction:column; gap:10px;
  background: linear-gradient(rgba(13,11,16,.42), rgba(13,11,16,.30));
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 50px rgba(13,11,16,.28); }
.card-n{ display:flex; align-items:center; gap:12px; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.2em; color:var(--lav); }   /* "01 ------" : number, then a hairline to the edge */
.card-n::after{ content:""; flex:1; height:1px; background: rgba(239,233,223,.14); }
.card h3{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(22px, 1.8vw, 26px); line-height:1.05; letter-spacing:-.005em; margin:4px 0 0; color:var(--bone); }   /* the title in the display face: the card reads title first, copy second */
.card p{ font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-weight:400; font-size:15px; line-height:1.5; margin:0; color:rgba(239,233,223,.84); }   /* running copy in a text face: Melodrama light was unreadable on phones (Susana, Sep 4) */
.stay-actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.pagelet .pill{ justify-self:start; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--ink); padding:14px 22px; border-radius:999px;
  background: linear-gradient(rgba(239,233,223,.90), rgba(239,233,223,.76)); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(13,11,16,.26); }
.pagelet .quiet-link{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:rgba(239,233,223,.78); display:inline-flex; align-items:center; gap:10px; padding:6px 0 5px; border-bottom:1px solid rgba(239,233,223,.22); transition: color .25s ease, border-color .25s ease; }
.pagelet .quiet-link:hover{ color:var(--bone); border-color: rgba(239,233,223,.6); }
.pagelet .quiet-link .arr{ display:inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.pagelet .quiet-link:hover .arr{ transform: translateX(4px); }
/* THE STAY, ON A PHONE (Susana, Sep 4: "the card is still broken, it is not showing whole").
   Stacking three cards one under another made the block ~1140 px against an 844 px screen, so it could
   never show whole however far you scrolled — card 01 was sliced mid-sentence and 02 and 03 sat under the
   fold. Shrinking the type is not the answer either; she already told me the small text was unreadable.
   So the cards become a SWIPE CAROUSEL, one card at a time with the next peeking, which is what a phone
   wants anyway: it returns ~400 px to the block and loses no content. The rest is tightened around it, and
   the head now keeps clear of the M mark, which the title was running into. */
@media (max-width: 810px){
  /* THE CLIP (Susana, Sep 4: "still the cards look broken"). .pagelet is pinned inset:0 with overflow:hidden,
     so it is exactly one screen tall — and once the cards stack vertically the block is ~835 px. The last
     card and both buttons were being cut off by that box and could never be scrolled to, however far the
     section travelled. On a phone the pagelet grows with its content instead; the stage still clips to the
     viewport, which is what actually does the travelling. */
  .pagelet:not(.lastdoor){ bottom:auto; height:auto; min-height:100%; overflow:visible; }   /* the stay grows with its cards; the last door stays one screen */
  .pagelet-inner{ height:auto; min-height:100%; padding: 50px 20px calc(12px + env(safe-area-inset-bottom, 0px)); gap:8px; width:auto; margin:0; grid-template-rows:auto auto auto auto; }
  .pagelet-bg::after{ background: linear-gradient(rgba(13,11,16,.45), rgba(13,11,16,.8)); }
  .pagelet-head{ grid-template-columns: 1fr; gap:7px; }
  .pagelet-head h2{ font-size: clamp(24px, 6.6vw, 31px); margin:2px 0 0; max-width:none; padding-right:60px; line-height:1.0; }   /* clears the M mark in the corner */
  .pagelet .lead{ justify-self:start; font-size:13px; line-height:1.4; max-width:none; margin:0; }
  .facts{ grid-template-columns: 1fr 1fr; gap:6px 18px; padding:7px 0; }
  .facts dd{ font-size:19px; } .facts dt{ font-size:8px; letter-spacing:.1em; }
  .facts > div{ gap:3px; }
  /* THE CAROUSEL.
     min-height is not optional: a scroll container's automatic minimum size is 0, so the grid was free to
     squash this row flat on a short viewport and the cards spilled over the Reserve pill (Susana, Sep 4 —
     it did not show at 844 but Chrome's bars leave far less than that on a real phone).
     The affordance is the peek: cards are 72% wide so a quarter of the next one is always in frame, and the
     right edge fades, which is how a phone says "there is more this way" without a caption. */
  /* Her call, Sep 4: the cards read as a vertical stack, not a sideways carousel. That makes the block
     taller than the screen again, which is fine and is what the engine's `tall` rule already handles — the
     section travels up through the frame instead of holding, so all three are read by scrolling. The
     carousel was solving for a hold; she would rather read them. */
  .cards{ display:grid; grid-template-columns: 1fr; gap:7px; align-self:start; }
  .card.glass{ padding:10px 14px 12px; gap:4px; border-radius:16px; }
  .card h3{ font-size:17px; margin-top:1px; }
  .card p{ font-size:12.5px; line-height:1.38; }
  .stay-actions{ gap:12px; }
  .pagelet .pill{ padding:9px 14px; font-size:9px; }
  .pagelet .quiet-link{ font-size:9.5px; }
}

/* A CUT for the nav jumps: dip to ink, jump, come back. Susana 23:35: clicking the mark dragged her back through the whole film. */
.cut{ position:fixed; inset:0; z-index:60; background:var(--ink); opacity:0; pointer-events:none; transition: opacity .22s ease; }
.cut.on{ opacity:1; }

/* THE LAST DOOR - a pagelet over the pinned stage. It carries NO plate of its own: the room behind it is the
   film's own held final frame, which is the whole point. It used to be a section with its own copy of
   media/pod-interior.webp, and because the water reveal lands on that same image the ending played as two
   identical rooms stacked on top of each other. Only the words travel now. */
.lastdoor{ background:transparent; }
.lastdoor-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,11,16,.22) 0%, rgba(13,11,16,.48) 44%, rgba(13,11,16,.86) 100%); }
.lastdoor-inner{ position:relative; z-index:1; height:100%; box-sizing:border-box; padding: 96px 48px 28px; display:grid; grid-template-rows: 1fr auto; }
.lastdoor-words{ align-self:center; max-width: 1040px; }
.lastdoor .sig{ position:static; }
@media (max-width: 810px){
  .lastdoor-inner{ padding: 80px 24px calc(22px + env(safe-area-inset-bottom, 0px)); }
  /* the words sat centred, which on a tall phone left the whole floor empty beneath them (Susana, Sep 4) */
  .lastdoor-words{ align-self:end; }
  .lastdoor h2{ font-size: clamp(30px, 8.4vw, 44px); margin:10px 0 16px; }
}

/* THE FOOTER. Her note: "this is not just the end". The film lands in the room and the card says come; this is
   the plain, quiet page underneath it - where it is, how to reach it, when the mirror is on the salt, and who
   made it. Black, Michroma micro-caps for the labels, the same bone and lavender as the film. It scrolls up
   over the pinned stage like an ordinary section, so the room stays behind the card until the footer takes it. */
.site{ position:relative; z-index:6; background:#07080d; color:var(--bone); padding: 96px 48px 28px; }
.site-inner{ display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 48px; max-width: 1320px; margin: 0 auto; }
.site-name{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(30px, 3.4vw, 46px); line-height:1; margin:0 0 14px; }
.site-note{ font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-weight:400; font-size:16px; line-height:1.6; margin:0; max-width:40ch; color:rgba(239,233,223,.86); }   /* Sep 15, her note on desktop: "readability here is not so great". Melodrama 300 at 17 px is a hairline display face; the footer note now wears the running-copy face of the cards */
.site-label{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.20em; text-transform:uppercase; color:var(--lav); margin:0 0 18px; }
.site-list{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.site-list a{ font-size:15px; color:var(--bone); text-decoration:none; border-bottom:1px solid rgba(239,233,223,.22); padding-bottom:2px; transition:border-color .2s, color .2s; }
.site-list a:hover{ border-bottom-color:var(--bone); }
.site-quietline{ font-size:15px; color:rgba(239,233,223,.52); }
.site-base{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  max-width:1320px; margin: 72px auto 0; padding-top:22px; border-top:1px solid rgba(239,233,223,.12); }
.site-sig{ display:inline-flex; align-items:center; gap:12px; color:rgba(239,233,223,.78); text-decoration:none; font-size:13px; }
.site-sig .sigil{ width:44px; height:44px; flex:none; color:var(--bone); }   /* 51 paths in a 200 box: below ~44 the fish and the crescent read as a blob */
.site-sig b{ font-weight:500; color:var(--bone); }
.site-sig:hover{ color:var(--bone); }
.site-fine{ margin:0; font-size:12px; letter-spacing:.02em; color:rgba(239,233,223,.38); }
@media (max-width: 980px){ .site-inner{ grid-template-columns: 1fr 1fr; gap:36px; } .site-col--mark{ grid-column:1 / -1; } }
@media (max-width: 560px){ .site{ padding: 64px 24px 24px; } .site-inner{ grid-template-columns:1fr; gap:30px; }
  .site-base{ margin-top:48px; flex-direction:column; align-items:flex-start; gap:14px; } }
/* TAP TARGETS. Measured at 390 px: these links are 21 px tall, half of what a thumb needs. The hit area is
   grown with a pseudo-element rather than padding, so the underline stays tight to the word and nothing moves. */
@media (pointer: coarse), (max-width: 560px){
  .site-list a, .lastdoor .quiet{ position:relative; }
  .site-list a::after, .lastdoor .quiet::after{ content:''; position:absolute; left:0; right:0; top:-12px; bottom:-12px; }
}

/* THE RADIAL MENU (Susana, Sep 4, after the GSAP "Radial Menu" demo): three pills spring out of the M with elastic.out(1, .5) and fold back with the mirrored ease. */
.radial{ position:fixed; top:38px; right:46px; z-index:41; width:0; height:0; pointer-events:none; }
.radial-item{ position:absolute; left:0; top:0; transform: translate(-50%, -50%); opacity:0; visibility:hidden; white-space:nowrap; pointer-events:auto;
  font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--bone);
  padding:9px 14px; min-width:132px; box-sizing:border-box; text-align:center; border-radius:999px; background:rgba(13,11,16,.62); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: background .25s ease, border-color .25s ease; }
.radial-item:hover{ background:rgba(13,11,16,.8); border-color:rgba(255,255,255,.3); }
.radial-item--cta{ background: linear-gradient(rgba(239,233,223,.90), rgba(239,233,223,.76)); color:var(--ink); border-color:rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 24px rgba(0,0,0,.28); }
.radial-item--cta:hover{ background: linear-gradient(rgba(255,255,255,.95), rgba(239,233,223,.84)); color:var(--ink); }
.home--open{ box-shadow: 0 0 0 2px rgba(239,233,223,.55) inset; }
/* micro: the glass cards and the pills lift a touch under the cursor */
.card.glass{ transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s ease, background .35s ease; }
.card.glass:hover{ transform: translateY(-3px); border-color: rgba(255,255,255,.24); }
.pill, .menu a.cta, .lastdoor .pill{ transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease; }
.pill:hover, .lastdoor .pill:hover{ transform: translateY(-2px); }
@media (max-width: 810px){ .radial{ top:34px; right:38px; } .radial-item{ font-size:9px; padding:8px 12px; min-width:118px; } }

/* ---- THE SHEEN (Susana, Sep 4: "that effect where a glimpse of light goes through the button").
   A narrow diagonal highlight travelling across, clipped to the pill's own radius. It is one
   compositor-only transform on a pseudo-element, so it costs nothing and never touches layout.
   :active replays it faster, so a click feels like it strikes the glass rather than repeating the hover. ---- */
/* NB: only the pills are unpositioned. .radial-item is absolute and .home is fixed, and blanket-setting
   position:relative here overrode both — it threw the M mark to x -24, off the left edge (Susana, Sep 4). */
.pill, .lastdoor .pill, .pagelet .pill{ position:relative; overflow:hidden; isolation:isolate; }
.radial-item, .home{ overflow:hidden; isolation:isolate; }
.pill::after, .lastdoor .pill::after, .pagelet .pill::after, .radial-item::after, .home::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.55) 50%, transparent 64%);
  transform: translateX(-140%); opacity:0; }
.lastdoor .pill::after, .pagelet .pill::after, .radial-item--cta::after{
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.95) 50%, transparent 64%); }
.pill:hover::after, .lastdoor .pill:hover::after, .pagelet .pill:hover::after, .radial-item:hover::after, .home:hover::after{
  animation: sheen .95s cubic-bezier(.32,.72,.3,1) forwards; }
.pill:active::after, .lastdoor .pill:active::after, .pagelet .pill:active::after, .radial-item:active::after, .home:active::after{
  animation: sheen .45s cubic-bezier(.32,.72,.3,1) forwards; }
@keyframes sheen{ 0%{ transform:translateX(-140%); opacity:0 } 10%{ opacity:1 } 100%{ transform:translateX(140%); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .pill::after, .lastdoor .pill::after, .pagelet .pill::after, .radial-item::after, .home::after{ display:none } }

/* the browser must not re-anchor the scroll as the film track grows to its full height (Susana, Sep 4: reloads landed mid-film) */
html, body{ overflow-anchor: none; }

/* ============ THUNUPA · the retreat card (Sep 12) ============
   Her call: the salar ends, the card with ALL the flyer info rides in, then the fire night carries the big words.
   One long pagelet: the existing lock-and-scroll-inside logic in main.js reads it as "tall". More air than the stay card had. */
.pagelet--long .pagelet-inner{ height:auto; display:flex; flex-direction:column; gap:44px; padding: 128px 48px 128px; }
.pagelet--long .pagelet-head{ align-items:end; }
.pagelet--long .band{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav); margin: 28px 0 -20px; font-weight:400; }
.pillars{ list-style:none; margin:0; padding: 8px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 40px; }
.pillars li{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(24px, 2.2vw, 32px); line-height:1.1; color:var(--bone); }
.pillars li.em{ font-style:italic; color:var(--lav); font-size: clamp(18px, 1.5vw, 22px); }
.card-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.card-list li{ font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size:15px; line-height:1.45; color:rgba(239,233,223,.84); padding-left:16px; position:relative; }
.card-list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--lav); opacity:.7; }
.card-when{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav); margin:0; }
.cards--two{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiers .card h3{ font-size: clamp(30px, 2.8vw, 42px); }
.tiers-note{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(239,233,223,.72); margin: -20px 0 0; }
@media (max-width: 760px){
  .pagelet--long .pagelet-inner{ padding: 104px 22px 104px; width:auto; gap:34px; }
  .pagelet--long .pagelet-head{ grid-template-columns: 1fr; }
  .pagelet--long .pagelet-head .lead{ justify-self:start; }
  .pagelet--long .facts{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pagelet--long .cards, .cards--two{ grid-template-columns: 1fr; }
  .pillars{ gap:8px 22px; }
}
/* the base .cards carries align-self:end for the old grid; in the long card column that shrank the two-up and price rows. Stretch them to the full measure. */
.pagelet--long .cards{ align-self:stretch; }
/* "See life in everything" is the retreat’s line, not a footnote (Susana, Sep 12: "more present, bigger weight"). Its own row, display size, full bone. */
.pillars li.em{ flex-basis:100%; order:-1; font-style:italic; font-weight:400; color:var(--bone); font-size: clamp(38px, 4.4vw, 68px); line-height:1.02; letter-spacing:-.01em; margin: 0 0 14px; }
.pillars li:not(.em){ color:var(--lav); font-size: clamp(20px, 1.7vw, 26px); }
/* THUNUPA hero (Sep 12, Susana: "Quya Raymi and the next line should be bigger and more obvious"). Both lines step up; the second line drops to clear the taller first one. */
.sub{ font-size: clamp(24px, 2.5vw, 38px); line-height:1.1; margin-top:18px; }
.rhythm{ font-size: clamp(20px, 1.9vw, 30px); line-height:1.25; margin-top: clamp(66px, 6.2vw, 96px); max-width: 30ch; }
@media (max-width: 760px){ .sub{ font-size:24px; } .rhythm{ font-size:19px; margin-top:62px; } }
/* THUNUPA · language toggle (EN / ES) in the nav, same voice as the other nav labels */
.menu .lang{ appearance:none; background:transparent; border:1px solid rgba(239,233,223,.32); color:var(--bone); border-radius:999px; padding:7px 12px; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.18em; cursor:pointer; min-width:44px; min-height:32px; transition: border-color .2s ease, background .2s ease; }
.menu .lang:hover{ border-color: var(--bone); background: rgba(239,233,223,.08); }
.menu .lang:focus-visible, .skip:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }
/* skip link: invisible until focused by keyboard */
.skip{ position:fixed; left:16px; top:-60px; z-index:100; padding:10px 16px; border-radius:999px; background:var(--bone); color:var(--ink); font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.14em; text-decoration:none; transition: top .2s ease; }
.skip:focus{ top:16px; }
/* The deposit is its own beat under the lead (Susana, Sep 12: "one sentence down, to create hierarchy"): the small instrument voice, so the lead reads as the invitation and this reads as the terms. */
.after-lead{ margin-bottom:14px; }
.after-note{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav); margin:0 0 30px; }
/* PHONE WALK-THROUGH (Sep 12, 375 px): the bigger Quya Raymi line wraps to two rows on a phone and ran into
   the line under it, and the date kicker broke "2026" onto its own row. Smaller first line, more drop, tighter kicker. */
@media (max-width: 760px){
  .copy .kicker{ font-size:11px; letter-spacing:.12em; }
  .sub{ font-size:21px; line-height:1.15; }
  .rhythm{ margin-top: 104px; font-size:18px; }
}
/* Tap targets on phones (walk-through, Sep 12): the WhatsApp pills measured 31 px tall and the footer links 21 px.
   44 px is the floor for a thumb; the main call to action cannot sit under it. */
@media (max-width: 760px){
  .pagelet .pill, .lastdoor .pill{ min-height:44px; display:inline-flex; align-items:center; padding:14px 24px; box-sizing:border-box; }
  .site-list a{ display:inline-block; padding:12px 0 10px; }
  .brand{ min-height:44px; display:inline-flex; align-items:center; }
}
/* THUNUPA card background (Sep 13, her recording: "weird shadow blackness"): the card still carried the blurred POD plate
   from Willka. Now a blurred, upside-down salar, the world the flip just turned, so the card belongs to the film around it. */
.pagelet--long .pagelet-bg{ background-image:url(media/card-plate-thunupa.webp); }
@media (max-width: 760px){
  .pagelet--long .pagelet-bg{ background-image:url(media/card-plate-thunupa-9x16.webp); }
  /* "Quya Raymi on the card should be bigger, more weight" (Sep 13): the kicker becomes a display line on phones */
  .pagelet--long .pagelet-head .kicker{ font-family:"Melodrama", Georgia, serif; font-size:28px; line-height:1.05; letter-spacing:0; text-transform:none; color:var(--bone); margin-bottom:6px; }
}
/* Lighthouse (Sep 13): the fine print measured 3.09:1 on the footer ink; 4.5:1 is the floor for 12 px text. */
.site-fine{ color:rgba(239,233,223,.66); }
/* THE STUDIO SIGNATURE strip. Desktop: one quiet row, hairlines between. Phone: 2 x 2 tiles, each a full thumb target. */
.site-standards{ list-style:none; margin: 56px auto 0; padding: 18px 0; max-width:1320px; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid rgba(239,233,223,.12); border-bottom:1px solid rgba(239,233,223,.12); }
.site-standards li{ display:flex; flex-direction:column; gap:6px; padding: 4px 20px; border-left:1px solid rgba(239,233,223,.12); }
.site-standards li:first-child{ border-left:0; padding-left:0; }
.site-standards b{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size:20px; line-height:1.1; color:var(--bone); }
.site-standards span{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--lav); }
@media (max-width: 760px){
  .site-standards{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; border:0; padding:0; margin-top:40px; }
  .site-standards li, .site-standards li:first-child{ border:1px solid rgba(239,233,223,.14); border-radius:14px; padding:14px 14px 12px; min-height:64px; justify-content:center; background:rgba(239,233,223,.03); }
  .site-standards b{ font-size:18px; }
  .site-standards span{ font-size:9px; letter-spacing:.14em; }
}
/* "After the card the mask in darkness is still visible" (Sep 13): the card carried its own full-screen dark plate, so as it slid
   away a dark blurred panel crossed the fire. Now the card is a veil over the LIVE film: a translucent scrim with a backdrop blur,
   so whatever the film shows stays under it and nothing dark travels across the screen when it leaves. */
.pagelet--long .pagelet-bg{ background-image:none !important; background-color:rgba(13,11,16,.58); -webkit-backdrop-filter: blur(14px) saturate(.9); backdrop-filter: blur(14px) saturate(.9); filter:none; }
.pagelet--long .pagelet-bg::after{ background: linear-gradient(180deg, rgba(13,11,16,.10) 0%, rgba(13,11,16,.25) 100%); }
.pagelet--long{ background:transparent; }
/* PHONE PERFORMANCE (Sep 13, her live-site note: "very laggy and slow"): a full-screen backdrop blur over a canvas that
   redraws every scroll frame is the heaviest thing an iPhone can be asked to composite. On phones the card veil is a plain
   dark scrim, no blur; the nav pills keep their small glass. */
@media (max-width: 760px){
  .pagelet--long .pagelet-bg{ -webkit-backdrop-filter:none; backdrop-filter:none; background-color:rgba(13,11,16,.78); }
}
/* THE INFO CARD, READABLE (Susana, Sep 13: "the card with the info needs better readability ... bigger as well on desktop and
   mobile"). Measured on a 375 px phone before this: lead 13 px, card copy 12.5 px, fact labels 8 px at .62, pills 9 px, all
   left over from the Sep 4 stay card that had to fit one screen. This card scrolls, so it no longer has to be small.
   Scoped to .pagelet--long so the last door and the footer are untouched. The veil darkens so the fire's flare cannot
   wash the copy out. */
.pagelet--long .pagelet-bg{ background-color:rgba(13,11,16,.68); }
.pagelet--long .lead{ font-size: clamp(17px, 1.35vw, 21px); line-height:1.55; color:rgba(239,233,223,.95); }
.pagelet--long .facts dt{ font-size:12px; letter-spacing:.14em; color:rgba(239,233,223,.82); }
.pagelet--long .facts dd{ font-size: clamp(30px, 2.6vw, 40px); font-weight:400; }
.pagelet--long .band{ font-size:13px; }
.pagelet--long .card.glass{ padding:24px 26px 26px; gap:12px; }
.pagelet--long .card h3{ font-size: clamp(26px, 2.1vw, 32px); }
.pagelet--long .card p, .pagelet--long .card-list li{ font-size:17px; line-height:1.55; color:rgba(239,233,223,.93); }
.pagelet--long .card p.card-when{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:12px; line-height:1.4; letter-spacing:.16em; text-transform:uppercase; color:var(--lav); }
.pagelet--long .pill{ font-size:12px; }
.pagelet--long .quiet-link{ font-size:12px; color:rgba(239,233,223,.9); }
.pagelet--long .tiers-note{ font-size:12px; color:rgba(239,233,223,.85); }
@media (max-width: 760px){
  .pagelet--long .pagelet-bg{ background-color:rgba(13,11,16,.86); }
  .pagelet--long .pagelet-head h2{ font-size: clamp(28px, 8vw, 34px); line-height:1.05; }
  .pagelet--long .lead{ font-size:17px; line-height:1.55; }
  .pagelet--long .facts{ gap:14px 18px; padding:14px 0; }
  .pagelet--long .facts > div{ gap:6px; }
  .pagelet--long .facts dd{ font-size:27px; }
  .pagelet--long .facts dt{ font-size:11px; letter-spacing:.1em; }
  .pagelet--long .pillars li:not(.em){ font-size:24px; }
  .pagelet--long .cards{ gap:12px; }
  .pagelet--long .card.glass{ padding:18px 18px 20px; gap:8px; }
  .pagelet--long .card h3{ font-size:24px; }
  .pagelet--long .card p, .pagelet--long .card-list li{ font-size:16px; line-height:1.55; }
  .pagelet--long .card p.card-when{ font-size:11px; }
  .pagelet--long .pill{ font-size:12px; }
  .pagelet--long .quiet-link{ font-size:12px; }
}
/* FEWER TINY CAPITALS (Susana, Sep 13, suggestion 2): the day names were tracked uppercase, the hardest thing on the card to read.
   They read as a normal line now, lavender so they still sit apart from the title. Short labels (facts, band, pill) keep the caps. */
.pagelet--long .card p.card-when{ font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size:15px; font-weight:500; line-height:1.4; letter-spacing:0; text-transform:none; color:var(--lav); }
@media (max-width: 760px){ .pagelet--long .card p.card-when{ font-size:15px; } }
/* THE RUNWAY ON THE PATH (Sep 13; feedback from several people: "they land on the page, especially on the phone, and don't
   know what to do". Susana, after the right-edge version: the line should sit ON the path, right in the middle of it, because
   at the edge it is not obvious; the words stay horizontal, because written vertically along the path it looks ugly).
   The dirt path in the film is the runway: a column of approach lights dead centre at the foot of the frame, small and far at
   the top, larger and near at the bottom, flashing one after another toward you, then "Scroll to begin" and an arrow that lights
   up at the threshold. Transform and opacity only. It fades with the first scroll (data-out 1a:0.25), pauses once hidden
   (rAF heat rule), holds still under reduce-motion, and the nudge pulses it once. */
/* ALIGNED WITH THE DOOR, not the screen (her note: "it looks off-centre, put it in the middle of the path, aligned with the door").
   The door's centre was measured in the frames: 0.488 of the 16:9 set, 0.474 of the phone cut. The film is object-fit:cover,
   so a frame fraction lands at 50% + (fx − 0.5) × the drawn frame width, and the drawn width is max(screen width, screen height
   × frame aspect). A zero-width box sits on that x and the column centres on it. Dial: ?doorx=0.48 (remembered). */
.copy .scrollcue{ position:absolute; top:auto; left:calc(50% + (var(--door-x-user, .488) - .5) * max(100vw, 100svh * 1.7778)); right:auto; bottom:22svh; width:0;   /* Sep 14, her note: the lights sat too low; up to the middle of the path, toward the gate light */  margin:0; grid-row:auto; grid-column:auto;   /* auto placement: an absolute grid child placed in column 1 measured left from the text column, 12 px (phone) / 24 px (desktop) off the door */ align-self:auto; justify-self:auto;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size:16px; font-weight:500; letter-spacing:.03em; text-transform:none;
  color:var(--bone); text-shadow:0 1px 14px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); writing-mode:horizontal-tb; white-space:nowrap; pointer-events:none; }
.cue-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.cue-lights{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:2px; }
.cue-light{ display:block; border-radius:2px; background:var(--bone); box-shadow:0 0 8px 2px rgba(243,194,122,.75); opacity:.18;
  animation:cue-strobe 2s ease-out infinite; }
/* perspective: far lights small and dim, near lights larger */
.cue-light:nth-child(1){ width:2px; height:5px; animation-delay:0s; }
.cue-light:nth-child(2){ width:2px; height:7px; animation-delay:.14s; }
.cue-light:nth-child(3){ width:3px; height:9px; animation-delay:.28s; }
.cue-light:nth-child(4){ width:3px; height:11px; animation-delay:.42s; }
.cue-light:nth-child(5){ width:4px; height:13px; animation-delay:.56s; }
.cue-light:nth-child(6){ width:4px; height:15px; animation-delay:.70s; }
@keyframes cue-strobe{ 0%{ opacity:.18; } 6%{ opacity:1; } 24%, 100%{ opacity:.18; } }
.cue-word{ display:block; }
.cue-end{ display:block; line-height:0; }
.cue-arrow{ display:block; width:18px; height:11px; color:var(--bone); filter:drop-shadow(0 0 5px rgba(243,194,122,.85)); opacity:.3; animation:cue-strobe 2s ease-out .9s infinite; }
.scrollcue.cue--pulse .cue-lights, .scrollcue.cue--pulse .cue-word, .scrollcue.cue--pulse .cue-end{ animation:cue-pulse .9s ease-in-out 2; }
@keyframes cue-pulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.4; } }
.scrollcue[style*="opacity: 0;"] .cue-light, .scrollcue[style*="opacity: 0;"] .cue-arrow{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .cue-light, .cue-arrow{ animation:none; } .cue-light{ opacity:.7; } .cue-arrow{ opacity:.85; }
  .scrollcue.cue--pulse .cue-lights, .scrollcue.cue--pulse .cue-word, .scrollcue.cue--pulse .cue-end{ animation:none; } }
@media (max-width: 810px){
  /* the copy block rises to leave the foot of the frame, the lower path, to the runway. .sub and .rhythm keep their 34 px right
     padding: at the full width the rhythm line flipped between one and two lines while the fonts loaded (a measured layout shift). */
  .copy{ padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }   /* 150 left the top light 12 px into the rhythm line at 390 */
  .copy .scrollcue{ left:calc(50% + (var(--door-x-user, .474) - .5) * max(100vw, 100svh * .5625)); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); font-size:15px; gap:8px; }
  .cue-lights{ gap:6px; }
}

/* PHONE HERO: SKY, GATE, FOOT (Susana, Sep 14, on her iPhone: "very convoluted, you barely see the cholita"; her layout: the scroll sign
   toward the gate, the middle free, the tagline at the bottom). Measured on her phone (Chrome, about 393 x 649): six text layers sat on the
   path, the title across the door, the Quya Raymi line across the cholita. Now the sky holds the date and the name, the middle holds the
   door, the cholita and a small cue on the path just under the gate, the foot holds the tagline. The phone walk is re-cut as
   frames/1a-carved-916-pan: the crop starts at x 390 of 1280 so the cholita is in frame, and eases to the old 437 by f55.
   The sky under the title measured 1.9:1 against bone, so a twilight shade deepens the top of the frame and leaves with the title. */
.hero-shade{ display:none; }
@media (max-width: 810px){
  .copy{ grid-template-rows: auto auto 1fr auto auto; padding: 74px 24px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .copy .hero-shade{ display:block; position:absolute; left:0; right:0; top:0; bottom:0; grid-row:auto; grid-column:auto;   /* auto: an absolute grid child in column 1 measures from the text column, 24 px short of the edge */
    /* top: the lightest shade that passes on her phone (date 4.9:1, title 3.3:1). foot: the tagline's brightest grass measured 4.2:1, a faint floor lifts it */
    /* hierarchy pass (Sep 14): the date now sits under the title at 22–24 px regular, which needs 4.5:1, so the top holds deeper for longer:
       date worst 5.0:1 at 393×649 and 5.6:1 at 390×844, title 5.4:1 (the lighter .5/.44 option measured 4.0 and failed) */
    background: linear-gradient(180deg, rgba(13,11,16,.52) 0%, rgba(13,11,16,.48) 50%, rgba(13,11,16,0) 100%) top / 100% 60% no-repeat,
                linear-gradient(0deg, rgba(13,11,16,.34) 0%, rgba(13,11,16,.22) 40%, rgba(13,11,16,0) 100%) bottom / 100% 30% no-repeat; }
  .copy .kicker{ grid-row:1; font-size:10.5px; letter-spacing:.13em; }   /* 11 px / .16em wrapped "2026" on her iPhone */
  html[lang="es"] .copy .kicker{ letter-spacing:.06em; }   /* "21 al 23 de septiembre 2026" is four characters longer and still wrapped at 393 */
  .copy .title{ grid-row:2; align-self:start; margin-top:40px; text-shadow:0 1px 22px rgba(13,11,16,.45); }
  .copy .sub{ grid-row:4; align-self:end; margin:0; }
  .copy .rhythm{ grid-row:5; align-self:end; margin:8px 0 0; }
  /* ON THE PATH, NOT THE DOOR LINE (Susana, Sep 14: "the dots have to be aligned to that path, more towards the left"). The path's centre
     was measured row by row in the pan crop's first frame: it leans left as it comes toward the camera, .579 of the frame just under the
     gate to .554 where the words sit. The words centre on .554; each light steps right by its own row's lean. Top: frame y .552. */
  .copy .scrollcue{ --fw:max(100vw, 100svh * .5625); top:calc(50% + (.552 - .5) * max(100%, 177.78vw)); bottom:auto;
    left:calc(50% + (var(--door-x-user, .554) - .5) * var(--fw)); font-size:14px; gap:6px; }
  .cue-lights{ gap:5px; }
  .cue-light:nth-child(-n+2), .copy .cue-end{ display:none; }
  .cue-light:nth-child(3){ transform:translateX(calc(var(--fw) * .025)); }
  .cue-light:nth-child(4){ transform:translateX(calc(var(--fw) * .020)); }
  .cue-light:nth-child(5){ transform:translateX(calc(var(--fw) * .014)); }
  .cue-light:nth-child(6){ transform:translateX(calc(var(--fw) * .008)); }
  /* THE SEQUENCE (Susana, Sep 14: "they glow in a sequence: first one, then the second, then the third, and the same thing with Scroll to
     begin"). One 3 s cycle for the whole hero, all started at load so they stay in step: the four path lights fire 0 / .2 / .4 / .6 s, the
     three words .9 / 1.2 / 1.5 s, the three dots 1.9 / 2.25 / 2.6 s. Each peaks fast and is gone before the next, so it reads as a count,
     not a wave. The words wear the hero's own letters, Melodrama 300 and smaller (her note: "thinner, not so obvious, the same letters as
     the rest"; Satoshi 500 read as another site). */
  .copy .scrollcue{ font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:15px; letter-spacing:.02em; }
  .copy .cue-light{ animation:cue-seq 3s ease-out infinite; }
  .copy .cue-light:nth-child(3){ animation-delay:0s; }
  .copy .cue-light:nth-child(4){ animation-delay:.2s; }
  .copy .cue-light:nth-child(5){ animation-delay:.4s; }
  .copy .cue-light:nth-child(6){ animation-delay:.6s; }
  /* Sep 14, after seeing it on her phone: only the path lights count; the words and the dots stay still ("too busy"). */

  /* LESS TEXT AT THE FOOT (Susana, Sep 14: "too much text on the bottom ... play with different weights ... little dots, ding, ding, first,
     second, third, they light up"). The name in bold, the season light; the feeling line stops at "A three-day experience" and three dots
     light in turn; a tap opens the rest. Collapsed, the rest is only visually hidden, so a screen reader still reads the whole line and
     the dots stay a pointer nicety (aria-hidden, tabindex -1). Desktop keeps the full line. */
  .copy .sub{ font-weight:300; padding-right:0; }
  .sub-name{ font-weight:700; }
  html[lang="es"] .copy .sub{ font-size:min(21px, calc((100vw - 48px) * .059)); }   /* "equinoccio de primavera" needs 350 px at 21 px and wrapped at 393; scales to one line down to 360 */
  .copy .rhythm{ font-size:16px; margin-top:6px; }
  .rh-more{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .rhythm.is-open .rh-more{ position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
  .rh-dots{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; padding:20px 12px; margin:-20px -12px -20px 0; border:0; background:none; color:inherit; cursor:pointer; pointer-events:auto; -webkit-tap-highlight-color:transparent; }   /* 49 x 45 touch box around 25 x 5 of dots */
  .rh-dots i{ display:block; width:5px; height:5px; border-radius:50%; background:var(--bone); box-shadow:0 0 5px 1px rgba(243,194,122,.5); opacity:.75; }
  .rh-dots i:nth-child(1){ animation-delay:1.9s; }
  .rh-dots i:nth-child(2){ animation-delay:2.25s; }
  .rh-dots i:nth-child(3){ animation-delay:2.6s; }
  /* HOW TO GO BACK (her question, Sep 14): once open, the dots stay at the end of the line, still and dim, and a tap anywhere on the line
     (or the dots) folds it again. The whole line is the target, so it never needs a second control. */
  .copy .rhythm{ pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .rhythm.is-open .rh-dots{ margin-left:4px; }
  .rhythm.is-open .rh-dots i{ animation:none; opacity:.45; }
  .rhythm[style*="opacity: 0;"], .rhythm[style*="opacity: 0;"] .rh-dots{ pointer-events:none; }
  .rhythm[style*="opacity: 0;"] .rh-dots i, .scrollcue[style*="opacity: 0;"] .cw{ animation-play-state:paused; }
}
@media (min-width: 811px){ .rh-dots{ display:none; } }
@keyframes cue-seq{ 0%{ opacity:.18; } 4%{ opacity:1; } 12%, 100%{ opacity:.18; } }
@keyframes cue-word-seq{ 0%, 14%, 100%{ color:var(--bone); text-shadow:0 1px 14px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); }
  4%{ color:#fbe6c4; text-shadow:0 1px 14px rgba(0,0,0,.7), 0 0 10px rgba(243,194,122,.95), 0 0 2px rgba(243,194,122,.8); } }
@keyframes rh-seq{ 0%{ opacity:.22; } 4%{ opacity:1; } 12%, 100%{ opacity:.22; } }
/* REDUCE MOTION KEEPS THE COUNT (Susana, Sep 14: "I am not seeing the dots or the path light up in that sequence"; her iPhone runs with
   Reduce Motion on, see Sep 4). The lights, words and dots only change brightness and colour, nothing travels, so they stay on under the
   setting; the 3 s cycle is far under any flash threshold. What moves (the nudge, the scrambles) stays off. */

/* THE ORGANISER'S ANSWERS (Sep 14): Quya Raymi, the ceremony, who we are. A single card spans the measure and its copy keeps a reading
   width; the lead-ins of the Quya Raymi list are the card's own weight step, Satoshi 500 in bone. */
.cards--one{ grid-template-columns:1fr; }
.pagelet--long .cards--one .card p, .pagelet--long .cards--one .card-list{ max-width:68ch; }
.pagelet--long .card-list b{ font-weight:500; color:var(--bone); }

/* LEARN MORE + THE SHEETS (Susana, Sep 14: "a little bit hidden ... then an extra panel opens"). Three quiet pills in the card open native
   dialogs: full screen on a phone, a centred glass sheet on desktop, their own scroll (data-lenis-prevent), close top right, Esc closes. */
.more{ display:flex; flex-wrap:wrap; gap:10px; }
.more-link{ appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:11px 18px; border-radius:999px;
  border:1px solid rgba(239,233,223,.26); background:rgba(239,233,223,.06); color:var(--bone); cursor:pointer;
  font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-weight:500; font-size:15px; line-height:1.2; letter-spacing:0;
  transition:border-color .25s ease, background .25s ease; }
.more-link::after{ content:"+"; font-weight:400; font-size:18px; line-height:1; color:var(--lav); }
.more-link:hover{ border-color:rgba(239,233,223,.5); background:rgba(239,233,223,.1); }
.more-link:focus-visible, .sheet-close:focus-visible{ outline:2px solid var(--sun); outline-offset:3px; }
dialog.sheet{ box-sizing:border-box; width:min(760px, calc(100% - 48px)); max-width:100%; max-height:min(90dvh, calc(100% - 48px)); margin:auto; padding:0;
  border:1px solid rgba(239,233,223,.14); border-radius:24px; background:rgba(13,11,16,.95); color:var(--bone); overflow:auto; overscroll-behavior:contain; }
dialog.sheet::backdrop{ background:rgba(13,11,16,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
dialog.sheet[open]{ animation:sheet-in .28s ease-out; }
@keyframes sheet-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.sheet-inner{ display:flex; flex-direction:column; gap:16px; padding:28px 28px 34px; }
.sheet-close{ position:sticky; top:0; align-self:flex-end; z-index:1; display:grid; place-items:center; width:44px; height:44px; margin:-8px -8px -52px 0; padding:0;
  border-radius:50%; border:1px solid rgba(239,233,223,.26); background:rgba(13,11,16,.78); color:var(--bone); cursor:pointer; }
.sheet-title{ margin:0 52px 4px 0; font-family:"Melodrama", Georgia, serif; font-weight:400; font-size:clamp(32px, 4vw, 46px); line-height:1.02; letter-spacing:-.01em; color:var(--bone); }
.sheet .cards{ grid-template-columns:1fr; gap:12px; align-self:stretch; }
.sheet .card.glass{ padding:22px 24px 24px; gap:10px; }
.sheet .card h3{ font-size:clamp(24px, 2.4vw, 30px); }
.sheet .card p, .sheet .card-list li{ font-size:17px; line-height:1.55; color:rgba(239,233,223,.93); }
.sheet .card-list b{ font-weight:500; color:var(--bone); }
/* Who we are opens with one line on how the retreat is made (Susana, Sep 15: "convey that we are all collaborating") */
.sheet .sheet-lead{ margin:-4px 2px 4px; max-width:60ch; font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-weight:400; font-size:17px; line-height:1.55; color:rgba(239,233,223,.9); }
@media (max-width: 760px){ .sheet .sheet-lead{ font-size:16px; } }
.sheet .credit{ margin:6px 2px 0; font-family:"Satoshi", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size:14px; line-height:1.5; color:var(--lav); }
@media (max-width: 760px){
  dialog.sheet{ width:100%; height:100%; max-height:100%; border:0; border-radius:0; }
  .sheet-inner{ padding:calc(16px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .sheet .card.glass{ padding:18px 18px 20px; }
  .sheet .card p, .sheet .card-list li{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){ dialog.sheet[open]{ animation:none; } }

/* HIERARCHY PASS (Susana, Sep 14: "Bolivia, 21 to 23 September should be more prominent because it is hard to read ... many elements
   competing for attention; the most important parts are Thunupa, the date, the spring equinox"). Crawford: size, contrast, spacing, and
   hierarchy is subtraction. Measured at 393 x 649 before: the date was 10.5 px Michroma tracked capitals (the smallest text on the hero),
   the nav repeated "Thunupa" at 18 px, and the bone-filled RESERVE pill was the brightest block on screen. Phone only; desktop keeps its layout.
   Now: 1 Thunupa (59 px) · 2 the date as a lockup directly under the name, in the title's own face (24 px, scaled so it never wraps:
   EN needs 331 px at 24 px, ES 366 px) · 3 Quya Raymi at the foot (21 px). The nav wordmark goes (the title is the name) and RESERVE
   becomes an outline, so the brightest thing on the screen is the name. */
@media (max-width: 810px){
  .copy .title{ grid-row:1; margin-top:36px; }
  .copy .kicker{ grid-row:2; align-self:start; margin:8px 0 0; font-family:"Melodrama", Georgia, serif; font-weight:400;
    font-size:min(24px, calc((100vw - 48px) * .0705)); line-height:1.15; letter-spacing:.005em; text-transform:none; white-space:nowrap; }
  html[lang="es"] .copy .kicker{ font-size:min(24px, calc((100vw - 48px) * .0637)); letter-spacing:.005em; }
  .nav .wordmark{ display:none; }
  .menu a.cta{ background:transparent; color:var(--bone); box-shadow:inset 0 0 0 1px rgba(239,233,223,.55); }
  .menu a.cta:hover{ background:rgba(239,233,223,.12); }
}
/* the poster shows before the canvas: on a phone its slice matches the pan crop's first frame, so the load does not jump */
@media (orientation: portrait) and (max-width: 899px) and (min-resolution: 2dppx){ #poster{ object-position:44.6% 50%; } }

/* DESKTOP HERO: SKY, GATE, FOOT (Susana, Sep 15, on desktop: "Scroll to begin is on the same line as the tagline, also in Spanish", "the
   typography is not right", "the cholita is not so visible"). Measured on the live site: at 1000 x 659 the cue words sat inside the tagline
   (430-542 x 472-493 over 48-524 x 483-533), at 1440 x 900 59 px into it; the 120-176 px title crossed the cholita; the cue was Satoshi 500
   and the date Michroma tracked capitals, two faces the phone had already left. Now the phone's order on a wide screen: the sky holds the
   name with the date as its lockup, the middle holds the gate, the cholita and the path lights, the foot holds Quya Raymi and the line.
   The title is capped by the screen height too, so the name and the date stay above the mountains. */
@media (min-width: 811px){
  .copy{ grid-template-rows: auto auto 1fr auto auto; padding: 92px 48px 44px; }
  .copy .title{ grid-row:1; align-self:start; font-size: clamp(56px, min(12vw, 17svh), 176px); }
  .copy .kicker{ grid-row:2; align-self:start; margin:calc(clamp(56px, min(12vw, 17svh), 176px) * .19) 0 0; font-family:"Melodrama", Georgia, serif; font-weight:400;   /* clears the descender of the title's p, which cut through "2026" at 6 px */
    font-size: clamp(20px, min(2.1vw, 3svh), 32px); line-height:1.15; letter-spacing:.005em; text-transform:none; white-space:nowrap; }
  .copy .sub{ grid-row:4; align-self:end; margin:0; }
  .copy .rhythm{ grid-row:5; align-self:end; margin:10px 0 0; }
  .nav .wordmark{ display:none; }   /* the title is the name; the bar fades as the film starts, so the wordmark never shows without it */
  /* the path lights start just under the gate (frame y .56) and run down the path: four lights and the words, in the hero's own letters */
  .copy .scrollcue{ top:calc(50% + (.56 - .5) * max(100%, 56.25vw)); bottom:auto; gap:8px;
    font-family:"Melodrama", Georgia, serif; font-weight:300; font-size: clamp(16px, 1.15vw, 19px); letter-spacing:.02em; }
  .cue-lights{ gap:6px; }
  .cue-light:nth-child(-n+2), .copy .cue-end{ display:none; }
  /* the sky under the name is pale dawn: a shade from the top-left corner carries the name and the date, a faint floor carries the foot */
  .copy .hero-shade{ display:block; position:absolute; inset:0; grid-row:auto; grid-column:auto;
    /* measured at 1512 x 982 with .50/.34: title 3.34:1 on its brightest sky (worst pixel 2.92), date 3.29:1; one step deeper */
    background: radial-gradient(75% 60% at 0% 0%, rgba(13,11,16,.56) 0%, rgba(13,11,16,.40) 45%, rgba(13,11,16,0) 100%),
                linear-gradient(0deg, rgba(13,11,16,.34) 0%, rgba(13,11,16,.18) 45%, rgba(13,11,16,0) 100%) bottom / 100% 34% no-repeat; }
}

/* THE FILM PLAYS ITSELF (Sep 16): pause / play, bottom right, 44 px touch target. Pause bars while it plays, a triangle when it waits. */
.autoplay{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:41; width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center; padding:0; cursor:pointer; color:var(--bone); background:rgba(13,11,16,.32); border:1px solid rgba(239,233,223,.32);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition: opacity .4s ease, border-color .2s ease, background .2s ease; }
.autoplay[hidden]{ display:none; }
.autoplay.is-off, .autoplay.is-text{ opacity:0; pointer-events:none; visibility:hidden; transition: opacity .4s ease, visibility 0s .4s; }
.autoplay:hover{ border-color:var(--bone); background:rgba(13,11,16,.5); }
.autoplay:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; }
.ap-i{ display:block; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent currentColor; margin-left:3px; }
.autoplay.is-playing .ap-i{ width:10px; height:12px; border:0; margin:0; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box; }