/* 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:2; 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; }   /* 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. */
  background: linear-gradient(rgba(13,11,16,.42), rgba(13,11,16,.34));
  -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); }
/* 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(17px, 4.6vw, 24px); }
  .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:"Melodrama", Georgia, serif; font-weight:300; font-size:17px; line-height:1.5; margin:0; max-width:36ch; color:rgba(239,233,223,.80); }
.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); }
}