/* AFTER (16 Oct 2026) · beyond boxes. Three changes over the original site:
   subtitles at the door, the three days pinned on the salt flat, the ledger at the fire. Loaded after style.css. */

/* ---- 1 · SUBTITLES over the held doorway ---- */
.story.subs{ display:block; position:absolute; left:0; right:0; bottom:0; top:0; width:auto; margin:0; padding:0; z-index:5; pointer-events:none; }
.story.subs::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:52%;
  background: linear-gradient(to top, rgba(13,11,16,.62) 0%, rgba(13,11,16,.32) 45%, rgba(13,11,16,0) 100%);
  opacity:0; transition: opacity .6s ease; }
.story.subs.story--on::before{ opacity:1; }
.story .sub{ position:absolute; left:50%; bottom:11vh; transform:translateX(-50%); width:min(1120px, 88vw); text-align:center; perspective:900px; perspective-origin:50% 100%; }
.story .sub-k{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:15px; letter-spacing:.3em; text-transform:uppercase; color:var(--lav, #BCB0D3); margin:0 0 22px; opacity:0; text-shadow: 0 1px 14px rgba(13,11,16,.7); }   /* 16 Oct: "the 'what it is' should also be bigger" */
.story .sub-t{ margin:0; font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(38px, 4.1vw, 66px); line-height:1.1; letter-spacing:-.005em; color:var(--bone, #EFE9DF);
  transform-style:preserve-3d;
  /* depth: a stacked shade under each letter, then a soft drop, so the words stand off the film */
  text-shadow: 0 1px 0 rgba(13,11,16,.32), 0 2px 0 rgba(13,11,16,.24), 0 3px 1px rgba(13,11,16,.22), 0 6px 14px rgba(13,11,16,.5), 0 14px 40px rgba(13,11,16,.55); }
.story .sub-t .w{ display:inline-block; opacity:0; transform-origin:50% 100%; will-change: transform, opacity, filter; }
.story .sub-t .w.em{ font-weight:700; }
/* THE LEDGE (16 Oct, her pick "3"): a fine line above each label for the bird to sit on, drawn in from the centre as the line rises */
.story .sub-ledge{ display:none; }
.perch-line .story .sub-ledge{ display:block; width:240px; height:1px; margin:0 auto 30px; opacity:0; transform:scaleX(0);
  background: linear-gradient(90deg, rgba(239,233,223,0), rgba(239,233,223,.75) 16%, rgba(239,233,223,.75) 84%, rgba(239,233,223,0));
  box-shadow: 0 1px 6px rgba(13,11,16,.5); }   /* 16 Oct: "bigger, bolder letters": the words that carry it go bold, as on the hero */

/* ---- 2 · THE THREE DAYS on the salt flat ---- */
.days-ann{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.ann-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ann-line{ fill:none; stroke:var(--bone, #EFE9DF); stroke-width:1; opacity:0; }
.ann-dot{ fill:none; stroke:var(--bone, #EFE9DF); stroke-width:1; opacity:0; }
.ann{ position:absolute; width:400px; opacity:0; color:var(--bone, #EFE9DF); }   /* 16 Oct: "bigger letters, more present, because the salar is pinkish-white and the letters are white" */
.ann::before{ content:""; position:absolute; inset:-64px -80px; z-index:-1; background: radial-gradient(closest-side, rgba(13,11,16,.6), rgba(13,11,16,.32) 55%, rgba(13,11,16,0)); }
.ann-when{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:13px; text-shadow: 0 1px 12px rgba(13,11,16,.9); letter-spacing:.22em; text-transform:uppercase; margin:0; color:rgba(239,233,223,.86); }
.ann h3{ font-family:"Melodrama", Georgia, serif; font-weight:400; font-size: clamp(50px, 4.8vw, 80px); line-height:.95; margin:12px 0 14px; text-shadow: 0 2px 4px rgba(13,11,16,.35), 0 4px 26px rgba(13,11,16,.7); }
.ann p:not(.ann-when){ font-family:"Satoshi", system-ui, -apple-system, sans-serif; font-size:18px; font-weight:500; line-height:1.45; margin:0; text-shadow: 0 1px 2px rgba(13,11,16,.5), 0 1px 16px rgba(13,11,16,.9); }

/* ---- 3 · THE LEDGER at the fire, no card ---- */
#stay{ background:transparent; }
#stay .pagelet-bg, .pagelet--long#stay .pagelet-bg{ background-image:none !important; background-color:transparent !important; filter:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }   /* the fire stays sharp behind the ledger: the elder must be seen moving */
#stay .pagelet-bg::after{ background: linear-gradient(90deg, rgba(13,11,16,.9) 0%, rgba(13,11,16,.74) 34%, rgba(13,11,16,.25) 56%, rgba(13,11,16,0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 280px); mask-image: linear-gradient(180deg, transparent 0, #000 280px); }   /* no hard top edge as the ledger rises */
#stay .pagelet-inner.ledger{ display:block; height:auto; width:min(560px, 84vw); margin:0 0 0 6vw; padding: 124px 0 96px; }
.ledger .pk{ margin:0; }
.ledger h2{ font-family:"Melodrama", Georgia, serif; font-weight:300; font-size: clamp(38px, 3.6vw, 56px); line-height:1; letter-spacing:-.01em; margin:12px 0 24px; }
.led-rows{ margin:0; }
.led-row{ display:flex; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid rgba(239,233,223,.24); margin:0; }
.led-row dt{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,233,223,.82); white-space:nowrap; }
.led-dots{ flex:1; border-bottom:1px dotted rgba(239,233,223,.32); transform:translateY(-4px); }
.led-row dd{ margin:0; font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:22px; line-height:1.2; text-align:right; }
.led-cols{ display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; margin-top:26px; }
.led-cols ul{ list-style:none; margin:0; padding:0; }
.led-cols li{ font-family:"Satoshi", system-ui, sans-serif; font-size:14px; line-height:1.45; padding:6px 0; border-bottom:1px solid rgba(239,233,223,.16); color:var(--bone, #EFE9DF); }
.led-cols li.no{ color:rgba(239,233,223,.7); }
.led-cols li.led-h{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav, #BCB0D3); border:0; padding-bottom:4px; }
.led-note{ font-family:"Satoshi", system-ui, sans-serif; font-size:13px; line-height:1.55; color:rgba(239,233,223,.72); max-width:48ch; margin:22px 0 0; }
.led-more{ display:flex; gap:22px; margin-top:20px; }
.led-more .more-link{ background:none; border:0; padding:6px 0 5px; border-bottom:1px solid rgba(239,233,223,.3); color:var(--bone, #EFE9DF); font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
.ledger .stay-actions{ margin-top:26px; }

@media (max-width: 810px){
  .story .sub{ width:auto; left:20px; right:20px; transform:none; bottom: calc(7vh + env(safe-area-inset-bottom, 0px)); }   /* low, so the bird has her tuft above the words */
  .story .sub-k{ font-size:12.5px; margin-bottom:16px; }
  .perch-line .story .sub-ledge{ width:170px; margin-bottom:24px; }
  .story .sub-t{ font-size:33px; line-height:1.14; }
  .ann{ width:290px; }
  .ann-when{ font-size:11.5px; }
  .ann h3{ font-size:46px; }
  .ann p:not(.ann-when){ font-size:16px; }
  #stay .pagelet-bg::after{ background: linear-gradient(180deg, rgba(13,11,16,.55) 0%, rgba(13,11,16,.78) 40%, rgba(13,11,16,.86) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 200px); mask-image: linear-gradient(180deg, transparent 0, #000 200px); }
  #stay .pagelet-inner.ledger{ width:auto; margin:0; padding: 96px 20px 96px; }
  .ledger h2{ font-size:38px; }
  .led-row dd{ font-size:18px; }
  .led-cols{ grid-template-columns: 1fr; gap:14px; }
}
@media (prefers-reduced-motion: reduce){
  .story .sub-t .w{ filter:none !important; }
}

/* ---- 0 · THE GATE WORDS, no box (16 Oct, Susana: "the align transform should not be on the box anymore ... for the Framer
   template you had already done the letters much bigger, on the right side"). Same look as the template: big Melodrama on the
   right, the last word bold, held by a soft radial shade instead of the ink-glass pane. The padding carries the shade, so the
   box sits 64 px past the words and the words keep their 5vw margin. */
.line-gate{ left:auto !important; right:calc(5vw - 64px); top:34%; margin:0; text-align:right;
  font-size: clamp(40px, 5.4vw, 84px); line-height:1.05; letter-spacing:-.01em; font-weight:300;
  padding: 44px 64px; border-radius:0;
  background: radial-gradient(closest-side, rgba(13,11,16,.30), rgba(13,11,16,0));
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
  text-shadow: 0 2px 28px rgba(13,11,16,.45); }
@media (max-width: 810px){
  .line-gate{ right:calc(20px - 32px); top:24%; font-size: clamp(32px, 9.4vw, 40px); font-weight:300; padding: 30px 32px; }
}

/* ---- THE OPENING, bigger (16 Oct, Susana: "since the letters have become so big ... the beginning should also be bigger. 'Thunupa,
   Ancestral Expedition, a three-day' should definitely be a little bit bigger ... this should be the first thing that really comes up").
   On a laptop the door lines are ~59 px, so the opening steps up past them: the title ~216 px, the two lines ~52 and ~37 px. */
@media (min-width: 811px){
  .copy .title{ font-size: clamp(64px, min(15vw, 21svh), 230px); }   /* was min(12vw, 17svh): 153 px at 1440 x 900, now 189 */
  .copy .kicker{ margin-top: calc(clamp(64px, min(15vw, 21svh), 230px) * .19); font-size: clamp(22px, min(2.5vw, 3.6svh), 38px); }
  .copy .sub{ font-size: clamp(30px, 3.6vw, 60px); line-height:1.05; }
  .copy .rhythm{ font-size: clamp(24px, 2.6vw, 42px); line-height:1.2; max-width: 26ch; }
  /* THE BALANCE (16 Oct, Susana: "everything is very left-aligned and the letters are large ... the heavy content feels stuck on the left.
     Could you do a UX pass to improve the balance?"). A diagonal around the gate: the name and the date hold the sky top left, the
     expedition and its line answer from the foot on the right, and the Cholita and the path keep the open middle. */
}
/* THE OPENING, four ways (16 Oct, after the diagonal: "it's not looking good to me ... can you help me decide what other options there are and
   what would be the best UI for it"). html[data-hero], ?hero=
   left    · the name top left, the expedition and its line at the foot, left (as before)
   diag    · the foot block answers from the right (the diagonal she did not like)
   center  · a centred title card over the gate: the name and the date in the sky, the expedition and its line centred at the foot
   lockup  · one block: name, date, expedition and line together in the sky, top left; the foot is the path and the cue alone */
@media (min-width: 811px){
  [data-hero="diag"] .copy .sub, [data-hero="diag"] .copy .rhythm{ justify-self:end; text-align:right; }
  [data-hero="diag"] .copy .rhythm{ margin-left:auto; }
  [data-hero="center"] .copy .title, [data-hero="center"] .copy .kicker, [data-hero="center"] .copy .sub, [data-hero="center"] .copy .rhythm{ justify-self:center; text-align:center; }
  [data-hero="center"] .copy .rhythm{ margin-left:auto; margin-right:auto; max-width:34ch; }
  [data-hero="center"] .copy{ grid-template-rows: auto auto 1fr auto auto; }
  [data-hero="center"] .copy .kicker{ grid-row:1; margin:0 0 6px; }   /* the date over the name, as on a film title card, so the gate keeps its sky */
  [data-hero="center"] .copy .title{ grid-row:2; }
  [data-hero="lockup"] .copy{ grid-template-rows: auto auto auto auto 1fr; }
  [data-hero="lockup"] .copy .sub{ grid-row:3; align-self:start; margin-top: clamp(28px, 4svh, 48px); }
  [data-hero="lockup"] .copy .rhythm{ grid-row:4; align-self:start; margin-top:10px; max-width: 30ch; }
}
@media (max-width: 810px){
  .copy .title{ font-size: clamp(60px, 18vw, 110px); }   /* 58 px -> 70 px at 390 */
  .copy .sub{ font-size:28px; }
  .copy .rhythm{ font-size:18px; }
}

/* ---- THE BEAT CUE (16 Oct, Susana: "it should also say 'scroll' at the bottom, not just the lines" and on the salt "the little lines with
   'scroll' should be present as well"). The walk's lights strobing down toward the viewer, the word under them, at every stop: both door
   lines and each day on the salt. */
.beat-cue{ position:absolute; z-index:6; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transition:opacity .7s ease; pointer-events:none; }
.beat-cue.on{ opacity:1; }
.bc-lights{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.bc-lights i{ display:block; border-radius:2px; background:var(--bone, #EFE9DF); box-shadow:0 0 8px 2px rgba(243,194,122,.75); opacity:.18;
  animation:cue-strobe 2s ease-out infinite; animation-play-state:paused; }
.beat-cue.on .bc-lights i{ animation-play-state:running; }
.bc-lights i:nth-child(1){ width:2px; height:5px; animation-delay:0s; }
.bc-lights i:nth-child(2){ width:2px; height:7px; animation-delay:.18s; }
.bc-lights i:nth-child(3){ width:3px; height:9px; animation-delay:.36s; }
.bc-lights i:nth-child(4){ width:3px; height:12px; animation-delay:.54s; }
.bc-word{ font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:17px; letter-spacing:.03em; color:var(--bone, #EFE9DF); text-shadow:0 1px 14px rgba(0,0,0,.75); }
.story .sub{ bottom: calc(11vh + 40px); }   /* room for the cue's word under the line */
@media (max-width: 810px){
  .story .sub{ bottom: calc(12vh + 30px + env(safe-area-inset-bottom, 0px)); }
  .beat-cue{ bottom: calc(14px + env(safe-area-inset-bottom, 0px)); gap:7px; }
  .bc-lights{ gap:5px; }
  .bc-word{ font-size:15px; }
}
@media (prefers-reduced-motion: reduce){ .bc-lights i{ animation:none; opacity:.7; } }

/* ---- THE LEDGER, three lighter ways (16 Oct, "it's just very busy ... just give me options"). html[data-ledger] a | b | c, ?ledger= ---- */
.led-two, .led-ribbon, .led-toggle, .led-all{ display:none; }
/* a · FOLDED: the facts stay, the lists and the note open with one click */
[data-ledger="a"] .led-toggle{ display:flex; align-items:center; gap:12px; margin-top:22px; background:none; border:0; border-bottom:1px solid rgba(239,233,223,.3);
  padding:8px 0; color:var(--bone, #EFE9DF); font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
[data-ledger="a"] .led-toggle i{ font-style:normal; font-size:16px; letter-spacing:0; transition:transform .3s ease; }
[data-ledger="a"] .led-toggle[aria-expanded="true"] i{ transform:rotate(45deg); }
[data-ledger="a"] .led-fold:not(.open){ display:none; }
[data-ledger="a"] .led-fold.open{ animation: led-open .5s ease both; }
@keyframes led-open{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
/* b · TWO LINES: no rows, no lists; a two-line summary, everything in a sheet */
[data-ledger="b"] #stay .led-rows, [data-ledger="b"] #stay .led-fold{ display:none; }
[data-ledger="b"] .led-two{ display:block; font-family:"Melodrama", Georgia, serif; font-weight:300; font-size: clamp(22px, 1.9vw, 30px); line-height:1.35; margin:6px 0 4px; color:var(--bone, #EFE9DF); }
[data-ledger="b"] .led-all{ display:inline-block; }
/* c · DOTS: the facts stay, each list is one dotted line */
[data-ledger="c"] #stay .led-fold{ display:none; }
[data-ledger="c"] .led-ribbon{ display:block; font-family:"Satoshi", system-ui, sans-serif; font-size:14.5px; line-height:1.6; margin:18px 0 0; color:var(--bone, #EFE9DF); max-width:52ch; }
[data-ledger="c"] .led-ribbon.no{ margin-top:8px; color:rgba(239,233,223,.7); }
[data-ledger="c"] .led-rh{ display:block; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav, #BCB0D3); margin-bottom:4px; }
[data-ledger="c"] .led-all{ display:inline-block; }
/* the sheet holds the whole ledger in every version */
.led-sheet{ margin-top:18px; }
.led-sheet .led-cols{ display:grid; }
.led-more{ flex-wrap:wrap; gap:12px 24px; }
.led-more .more-link{ white-space:nowrap; }

/* ---- THE NIGHT GROUND (16 Oct): the Framer template's sections after the film, matched to its screenshots (Ink ground, hairlines,
   Melodrama heads, Michroma labels, Satoshi body). ---- */
.night{ position:relative; z-index:6; background:#0D0B10; color:var(--bone, #EFE9DF); }
.night-sec{ border-top:1px solid rgba(239,233,223,.08); padding: 112px 48px 120px; }
.night-sec:first-child{ border-top:0; padding-top:120px; background: radial-gradient(120% 70% at 50% 0%, rgba(188,176,211,.07), rgba(13,11,16,0) 60%); }
.night-inner{ max-width:1104px; margin:0 auto; }
.night-split{ display:grid; grid-template-columns: .9fr 1.3fr; gap:72px; align-items:start; }
.night-k{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--lav, #BCB0D3); margin:0 0 18px; }
.night h2{ font-family:"Melodrama", Georgia, serif; font-weight:300; font-size: clamp(44px, 4.6vw, 64px); line-height:1.02; letter-spacing:-.01em; margin:0 0 18px; }
.night-lead{ font-family:"Satoshi", system-ui, sans-serif; font-size:17px; line-height:1.55; color:rgba(239,233,223,.78); max-width:46ch; margin:0; }
.night-note{ font-family:"Satoshi", system-ui, sans-serif; font-size:13px; color:rgba(239,233,223,.5); margin:0; }
.night-pill{ display:inline-block; margin-top:32px; }
.night-head{ margin-bottom:48px; }
.night-split .night-head{ margin-bottom:0; }
/* editions */
.ed-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.ed-card{ border:1px solid rgba(239,233,223,.14); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.015); display:flex; flex-direction:column; }
.ed-cover{ position:relative; aspect-ratio: 1.26; overflow:hidden; }
.ed-cover img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.ed-card:hover .ed-cover img{ transform:scale(1.04); }
.ed-status{ position:absolute; top:16px; left:16px; padding:6px 11px; border-radius:999px; background:rgba(13,11,16,.72); border:1px solid rgba(239,233,223,.16);
  font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
.ed-body{ padding:26px 24px 22px; display:flex; flex-direction:column; flex:1; }
.ed-when{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,233,223,.82); margin:0 0 12px; }
.ed-card h3{ font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:32px; line-height:1.05; margin:0 0 10px; }
.ed-place{ font-family:"Satoshi", system-ui, sans-serif; font-size:15px; color:rgba(239,233,223,.78); margin:0 0 20px; }
.ed-row{ margin-top:auto; padding-top:16px; border-top:1px solid rgba(239,233,223,.16); display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:"Satoshi", system-ui, sans-serif; font-size:15px; }
.ed-view{ background:none; border:0; color:var(--lav, #BCB0D3); cursor:pointer; padding:6px 0; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.ed-view i{ font-style:normal; display:inline-block; transition:transform .3s ease; }
.ed-view:hover i{ transform:translateX(4px); }
/* voices */
.vo-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.voice{ margin:0; border:1px solid rgba(239,233,223,.14); border-radius:18px; padding:30px 28px 26px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.015); }
.voice blockquote{ margin:0; font-family:"Melodrama", Georgia, serif; font-weight:300; font-size:25px; line-height:1.3; }
.voice figcaption{ margin-top:28px; display:flex; flex-direction:column; gap:6px; }
.voice b{ font-family:"Satoshi", system-ui, sans-serif; font-weight:500; font-size:15px; }
.voice span{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav, #BCB0D3); }
/* questions */
.faq-list{ border-top:1px solid rgba(239,233,223,.16); }
.faq-item{ border-bottom:1px solid rgba(239,233,223,.16); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; background:none; border:0; color:var(--bone, #EFE9DF); cursor:pointer; text-align:left;
  font-family:"Melodrama", Georgia, serif; font-weight:300; font-size: clamp(22px, 2vw, 28px); line-height:1.2; }
.faq-q i{ font-style:normal; color:var(--lav, #BCB0D3); font-family:"Satoshi", system-ui, sans-serif; font-size:26px; font-weight:300; transition:transform .3s ease; }
.faq-q[aria-expanded="true"] i{ transform:rotate(45deg); }
.faq-a p{ margin:0 0 26px; max-width:56ch; font-family:"Satoshi", system-ui, sans-serif; font-size:16px; line-height:1.6; color:rgba(239,233,223,.78); }
/* reserve */
.enq{ border:1px solid rgba(239,233,223,.14); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:20px; background:rgba(255,255,255,.015); }
.enq label{ display:flex; flex-direction:column; gap:10px; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(239,233,223,.82); }
.enq input, .enq select, .enq textarea{ font:16px/1.4 "Satoshi", system-ui, sans-serif; letter-spacing:0; text-transform:none; color:var(--bone, #EFE9DF); background:#1c1b20;
  border:1px solid rgba(239,233,223,.14); border-radius:12px; padding:14px 16px; outline:none; }
.enq input::placeholder, .enq textarea::placeholder{ color:rgba(239,233,223,.42); }
.enq input:focus, .enq select:focus, .enq textarea:focus{ border-color:rgba(239,233,223,.45); }
.enq textarea{ resize:vertical; min-height:120px; }
.enq-send{ align-self:flex-start; margin-top:6px; padding:16px 30px; border-radius:999px; border:0; background:var(--bone, #EFE9DF); color:#0D0B10; cursor:pointer;
  font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; }
.enq-note{ margin:-6px 0 0; font-family:"Satoshi", system-ui, sans-serif; font-size:13px; color:rgba(239,233,223,.5); }
.night a:focus-visible, .night button:focus-visible, .enq input:focus-visible, .enq select:focus-visible, .enq textarea:focus-visible{ outline:2px solid var(--bone, #EFE9DF); outline-offset:3px; }
@media (max-width: 980px){
  .ed-list, .vo-list{ grid-template-columns: 1fr 1fr; }
  .night-split{ grid-template-columns: 1fr; gap:40px; }
}
@media (max-width: 640px){
  .night-sec{ padding: 80px 20px 88px; }
  /* (18 Oct, her phone: sections "almost fit on the screen") a little less air inside each section, so a swipe can land it whole under the top bar */
  .night-k{ margin-bottom:12px; } .night h2{ margin-bottom:12px; } .night-head{ margin-bottom:26px; } .night-split{ gap:24px; }
  .ed-list, .vo-list{ grid-template-columns: 1fr; gap:18px; }
  .voice{ min-height:0; }
  .enq{ padding:22px; }
}
.night-pill, .sheet .pill[data-close-goto]{ display:inline-block; padding:15px 28px; border-radius:999px; border:1px solid rgba(239,233,223,.55); color:var(--bone, #EFE9DF); text-decoration:none;
  font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; transition: background .2s ease, color .2s ease; }
.night-pill:hover, .sheet .pill[data-close-goto]:hover{ background:var(--bone, #EFE9DF); color:#0D0B10; }

/* ---- THE SHEETS, glassier (16 Oct, Susana: "can they be a little bit more glassy? They look very dark, and 'Who we are' maybe we should also
   do"). The sheet itself was ink at .95, so the glass inside had nothing to show: now the sheet is frosted over the film, and the boxes
   in it are a lighter frost with a hairline and a top highlight. */
dialog.sheet{ background: linear-gradient(rgba(30,27,38,.62), rgba(18,16,24,.70)); -webkit-backdrop-filter: blur(26px) saturate(1.25); backdrop-filter: blur(26px) saturate(1.25);
  border:1px solid rgba(239,233,223,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 30px 80px rgba(0,0,0,.45); }
dialog.sheet::backdrop{ background:rgba(13,11,16,.38); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.sheet .card.glass{ background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 40px rgba(0,0,0,.18); }
/* WHO WE ARE (16 Oct: "a little bit smaller letters ... a plus to read more, because if you open it, it has a huge wall of text. Maybe just
   use some kind of pictures"). A picture of the place on each card (the gate, the volcano, the salt: no stand-in faces), the bio in smaller
   type cut to three lines, the rest one tap away. */
.who-card{ overflow:hidden; padding-top:0 !important; }
.who-pic{ display:block; width:calc(100% + 48px); margin:0 -24px 6px; height:150px; object-fit:cover; }
.who-text p{ font-size:15px !important; line-height:1.55 !important; margin:0 0 8px; }
.who-text{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.who-card.open .who-text{ display:block; -webkit-line-clamp:unset; }
.who-more{ align-self:flex-start; display:flex; align-items:center; gap:10px; background:none; border:0; border-bottom:1px solid rgba(239,233,223,.3); padding:6px 0; cursor:pointer;
  color:var(--bone, #EFE9DF); font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; }
.who-more i{ font-style:normal; font-size:15px; letter-spacing:0; transition:transform .3s ease; }
.who-card.open .who-more i{ transform:rotate(45deg); }
#sheet-who .cards{ grid-template-columns: repeat(3, 1fr); gap:14px; }
#sheet-who{ width:min(1040px, calc(100% - 48px)); }
@media (max-width: 860px){ #sheet-who .cards{ grid-template-columns: 1fr; } }
/* VOICES, glassier (16 Oct: "can the boxes from the circle also be a little bit more glassmorphism?") */
.voice{ background: linear-gradient(rgba(255,255,255,.075), rgba(255,255,255,.025)); border-color: rgba(239,233,223,.18);
  -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,.16), 0 18px 50px rgba(0,0,0,.25); }
/* glass needs something behind it: the voices sit over the salt at night, deep in shade (16 Oct) */
#voices{ background: linear-gradient(180deg, #0D0B10 0%, rgba(13,11,16,.55) 22%, rgba(13,11,16,.62) 78%, #0D0B10 100%), url(media/2a-mirror-thunupa.webp) center / cover no-repeat; }
#sheet-who .cards{ align-items:start; }
/* THE FOOT, lighter (16 Oct, her: "the top part, Bolivia Thunupa, that's perfect on the left ... it's just the bottom part that makes it feel
   really big and loaded on the side"). Two ways to unload it, both keeping the top lockup as it is:
   light   · same place, a step down in the scale: the foot is a caption, not a second headline
   eyebrow · "Ancestral Expedition" goes up as a small label over the name (it names the title, so it lives with it); the foot keeps only the line */
@media (min-width: 811px){
  [data-hero="light"] .copy .sub{ font-size: clamp(22px, 2.1vw, 34px); font-weight:300; }
  [data-hero="light"] .copy .rhythm{ font-size: clamp(17px, 1.45vw, 22px); max-width: 36ch; }
  [data-hero="eyebrow"] .copy{ grid-template-rows: auto auto auto 1fr auto; }
  [data-hero="eyebrow"] .copy .sub{ grid-row:1; align-self:start; margin:0 0 12px 4px; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-weight:400;
    font-size:13px; letter-spacing:.34em; text-transform:uppercase; line-height:1.2; }
  [data-hero="eyebrow"] .copy .title{ grid-row:2; font-size: clamp(64px, min(15vw, 19svh), 220px); }
  [data-hero="eyebrow"] .copy .kicker{ grid-row:3; margin-top: calc(clamp(64px, min(15vw, 19svh), 220px) * .17); }
  [data-hero="eyebrow"] .copy .rhythm{ grid-row:5; font-size: clamp(20px, 1.8vw, 28px); max-width: 34ch; }
}
/* the voices' faces (16 Oct, her: "yes, pull the portraits" and "make sure that they have the same background ... one tone for all of them").
   Three free Unsplash portraits on the same soft grey mountain sky, cropped on the face and graded together (colour .82, contrast .96). */
.voice figcaption{ flex-direction:row; align-items:center; gap:14px; }
.vo-pic{ width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; box-shadow: 0 0 0 1px rgba(239,233,223,.25); }
.vo-who{ display:flex; flex-direction:column; gap:5px; }
.voice .vo-who > span{ font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--lav, #BCB0D3); }
.voice .vo-who{ font-family:"Satoshi", system-ui, sans-serif; font-size:15px; letter-spacing:0; text-transform:none; color:var(--bone, #EFE9DF); }
.voice .vo-who b{ font-weight:500; }
.voice .vo-who > span{ font-size:10.5px; letter-spacing:.18em; }

/* ---- COUNTERS (16 Oct: "I do like the 1/2 ... that tells you exactly where you are") ---- */
.sub-n, .ann-n{ opacity:.62; white-space:nowrap; }   /* Spanish "Día 2 de 3" moves as one piece, never split */
.sub-n::before, .ann-n::before{ content:"·"; margin:0 .7em; opacity:.7; }
/* ---- THE JOURNEY RAIL ---- */
.rail{ position:fixed; z-index:40; right:26px; top:50%; transform:translateY(-50%); height:min(46vh, 380px); display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  pointer-events:none; opacity:0; transition:opacity .6s ease; }
.rail.on{ opacity:1; }
.rail-track{ position:absolute; right:4px; top:5px; bottom:5px; width:1px; background:rgba(239,233,223,.22); }
.rail-fill{ position:absolute; left:0; top:0; width:1px; height:0; background:var(--bone, #EFE9DF); box-shadow:0 0 6px rgba(243,194,122,.6); }
.rail-mark{ position:relative; display:flex; align-items:center; gap:12px; background:none; border:0; padding:4px 0; cursor:pointer; pointer-events:auto; color:var(--bone, #EFE9DF); }
.rail-mark i{ display:block; width:9px; height:9px; border-radius:50%; border:1px solid rgba(239,233,223,.55); background:rgba(13,11,16,.6); transition: background .4s ease, border-color .4s ease, transform .4s ease; order:2; }
.rail-mark.past i{ background:rgba(239,233,223,.55); border-color:transparent; }
.rail-mark.now i{ background:var(--bone, #EFE9DF); border-color:transparent; transform:scale(1.25); box-shadow:0 0 10px rgba(243,194,122,.7); }
.rail-mark span{ order:1; font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:10px; letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 10px rgba(13,11,16,.9); opacity:0; transform:translateX(6px); transition: opacity .4s ease, transform .4s ease; }
.rail-mark.now span, .rail:hover .rail-mark span, .rail-mark:focus-visible span{ opacity:.9; transform:none; }
.rail-mark:focus-visible{ outline:none; } .rail-mark:focus-visible i{ outline:2px solid var(--bone, #EFE9DF); outline-offset:3px; }
@media (max-width: 810px){
  .rail{ right:10px; height:min(34vh, 260px); }
  .rail-mark span{ font-size:9px; letter-spacing:.16em; }
  .rail:hover .rail-mark:not(.now) span{ opacity:0; }   /* phones: only the chapter you are in names itself */
}
@media (prefers-reduced-motion: reduce){ .rail-mark i, .rail-mark span{ transition:none; } }
@media (max-width: 810px){
  .rail{ right:5px; }
  .rail-mark span{ display:none; }                 /* phones: the names collided with the words; the dots alone say where you are */
  .rail-mark i{ width:7px; height:7px; }
  .rail-track{ right:3px; }
  .ann-n{ display:block; margin-top:6px; }          /* "Day 1 of 3" on its own line, so the date never wraps */
  .ann-n::before{ content:none; }
}
/* Spanish dates are longer ("Sábado 24 de octubre"): the counter takes its own line on every screen, like phones, so the date stays whole */
html[lang="es"] .ann-n{ display:block; margin-top:6px; }
html[lang="es"] .ann-n::before{ content:none; }
html[lang="es"] .ann-when > span[data-es]:not(.ann-n){ white-space:nowrap; }
/* NO SIDEWAYS SPILL (16 Oct, found while checking the rail at 390 px: the page measured 405 wide, so the rail sat off screen and the page
   could drift sideways). Two causes, both from today: the gate words' shade box ran 12 px past the edge, and the form's edition menu
   stretched the reserve column to fit its longest option. */
@media (max-width: 810px){ .line-gate{ right:0; padding: 30px 18px 30px 32px; } }
.night-split > *{ min-width:0; }
.enq input, .enq select, .enq textarea{ width:100%; min-width:0; box-sizing:border-box; }
body{ overflow-x: clip; }
/* the rail, aligned (16 Oct: "one line is above the circle, so the circles are not aligned"): odd-sized dots centred exactly on a 1 px line,
   opaque so the line never runs through them, the line kept under them; eight chapters need a taller rail */
.rail{ height:min(64vh, 540px); }
.rail-track{ right:5px; top:6px; bottom:6px; z-index:0; }
.rail-mark{ z-index:1; }
.rail-mark i{ width:11px; height:11px; box-sizing:border-box; background:#0D0B10; }
.rail-mark.past i{ background:#9b958f; border-color:#9b958f; }
.rail-mark.now i{ background:var(--bone, #EFE9DF); border-color:var(--bone, #EFE9DF); transform:none; box-shadow:0 0 0 3px rgba(239,233,223,.16), 0 0 12px rgba(243,194,122,.7); }
@media (max-width: 810px){
  .rail{ height:min(50vh, 380px); }
  .rail-mark i{ width:7px; height:7px; }
  .rail-track{ right:3px; }
}
/* WHO WE ARE, with faces (16 Oct, her: "use people in the same way that it was for the reviews"). Real photos only: Rio and Susana, cut out
   and set on one lavender-grey backdrop, graded like the voices; Tata Estevan keeps his initials in the same circle until we have his photo. */
.who-card{ padding-top:22px !important; }
.who-head{ display:flex; align-items:center; gap:14px; }
.who-face{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 1px rgba(239,233,223,.28); }
.who-initials{ display:grid; place-items:center; background:linear-gradient(#c4bdd2, #686278); color:#0D0B10;
  font-family:"Michroma", ui-monospace, system-ui, sans-serif; font-size:13px; letter-spacing:.12em; }
.who-head h3{ margin:0; }
/* the rail names every chapter while you point at the M (wide screens) */
.rail.reveal .rail-mark span{ opacity:.9; transform:none; }
.radial-item{ font-family:inherit; cursor:pointer; }
/* the names need a ground when they all show over a bright sky */
/* (17 Oct, her: "there's a big square in it ... soften or blur it more") no edges anywhere: a soft oval from the right edge that fades out
   in every direction, a light blur under it (feathered by the same mask) so the names read even over the gate words */
.rail::before{ content:""; position:absolute; right:-26px; top:-24vh; bottom:-24vh; width:min(560px, 48vw); pointer-events:none; opacity:0; transition:opacity .45s ease;
  background: rgba(13,11,16,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: radial-gradient(farthest-side at 100% 50%, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.35) 70%, transparent 100%);
          mask-image: radial-gradient(farthest-side at 100% 50%, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.35) 70%, transparent 100%); }
.rail.reveal::before, .rail:hover::before{ opacity:1; }
@media (max-width: 810px){ .rail::before{ display:none; } }

/* LEGIBLE LABELS (16 Oct, her Spanish QA: "¿Qué es?" and "Propósito" "are almost invisible", the dates on the salar "are very hard to read ...
   the white letters need a slightly darker shade"). The door label goes from lavender to bone, a step bigger, and both labels get a soft dark
   shade close behind the letters (tight + wide), so they hold over the bright sky and the white salar. Counters brighter too. */
.story .sub-k{ font-size:17px; color:var(--bone, #EFE9DF); text-shadow: 0 1px 2px rgba(13,11,16,.75), 0 0 10px rgba(13,11,16,.7), 0 0 26px rgba(13,11,16,.55); }
.ann-when{ font-size:14px; color:var(--bone, #EFE9DF); text-shadow: 0 1px 2px rgba(13,11,16,.75), 0 0 10px rgba(13,11,16,.7), 0 0 26px rgba(13,11,16,.55); }
.sub-n, .ann-n{ opacity:.88; }
@media (max-width: 810px){
  .story .sub-k{ font-size:13.5px; }
  .ann-when{ font-size:12.5px; }
}

/* ONE EDITION (16 Oct, live): only the real retreat is shown, so its card spans the row as a wide feature, picture left, details right,
   instead of a lone third of a grid. Phones keep the stacked card. When more real editions come, the grid comes back by itself. */
@media (min-width: 811px){
  .ed-list:has(> .ed-card:only-child){ grid-template-columns: 1fr; }
  .ed-card:only-child{ flex-direction:row; }
  .ed-card:only-child .ed-cover{ flex:0 0 58%; aspect-ratio:auto; min-height:360px; }
  .ed-card:only-child .ed-body{ padding:40px 40px 32px; justify-content:center; }
  .ed-card:only-child h3{ font-size:44px; }
  .ed-card:only-child .ed-place{ font-size:17px; }
}

/* FIRST LOAD (16 Oct): the top menu shows once its font is in, so the pill never changes width on screen */
.menu{ transition: opacity .5s ease; }
html:not(.fonts-in) .menu{ opacity:0; }

/* LIGHTHOUSE (16 Oct, before going live): read-only text for screen readers; the phone rail keeps its chapter names for them
   (hidden from the eye, not removed); the bird credit links in the footer's own colour instead of the browser's blue. */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width: 810px){
  .rail-mark span{ display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
.site-fine a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* THE DISSOLVE (17 Oct): the copy of the screen a jump melts from (main.js window.__dissolve); never black, never a flash */
.dissolve{ position:fixed; inset:0; width:100%; height:100%; z-index:60; pointer-events:none; display:none; opacity:0; }
/* the jump's crossfade (View Transitions): the held screen melts into the new place over .65 s */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.65s; animation-timing-function:ease; }

/* THE BREATHING CORONA (18 Oct, her pick A): a small light canvas on the sun of the held door, screen blended over the film, under the bird and the words. corona.js places and sizes it. */
.corona{ position:absolute; z-index:1; display:none; opacity:0; pointer-events:none; mix-blend-mode:screen; }

/* THE SCREEN'S REAL HEIGHT (18 Oct, her iPhone in Chrome: black below the film): at least the height the browser shows (--app-h, main.js). */
.stage{ height:max(100svh, var(--app-h, 100svh)); }