/* ============================================================================
   S9 · After hours — LakbayBook, then the fold.
   CSS default = the key pose: phones risen, line fully drawn, LakBi in the O,
   every line of copy visible, the book flat. js/scenes/lakbay.js moves things
   away from this pose and the scrub brings them back.

   Desktop: the product is the hero. The itinerary phone stands ~68svh tall on
   the centre line (the page's route docks into its own dotted line), map and
   atlas fan behind it to the right, and the words live in the left column:
   LAKBAY / BOOK sized to the column, LakBi in the O, the copy and the links
   bottom-aligned with the phone's foot.
   ========================================================================== */

.scene--lakbay {
  --lb-mode: desk; /* read by lakbay.js: desk | grid | land */
  --lb-top: max(10svh, calc(var(--header-h) + 56px));
  /* the itinerary phone; 720×1516 screenshots → width = 0.4749 × height */
  --lb-ph: min(68svh, 50vw);
  --lb-pw: calc(var(--lb-ph) * 0.4749);
  --lb-pb: 4svh;
  /* the page's route line, and where the itinerary's own spine sits inside the screenshot: the accent bar down
     the left of the day's stop cards (x = 170.5 / 720 of app-itinerary-720.webp) */
  --lb-line-x: 50%;
  --lb-line-xv: 50vw;
  --lb-dock: 0.2368;
  --lb-itin-l: calc(var(--lb-line-x) - var(--lb-dock) * var(--lb-pw));
  --lb-line-top: calc(var(--header-h) + 10px);
  --lb-line-h: calc(100svh - var(--lb-pb) - var(--lb-ph) - var(--lb-line-top));
  /* the fan behind the itinerary phone, in phone widths from its left edge */
  --lb-map-dx: 0.74;
  --lb-atlas-dx: 1.4;
  /* LAKBAY fits the column left of the phone (JS refines from the real glyph widths) */
  --lb-size: min(calc((var(--lb-line-xv) - var(--lb-dock) * var(--lb-pw) - var(--gutter) - 40px) / 5), 17svh);
  --lb-o-x: 1.04em;
}
.scene--lakbay .scene__stage {
  background: var(--night);
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
/* While the stage is still rising (js: p < the stick), the sheet and the stage are see-through: the chapter's
   content rises on the body that golden hour is warming paper → cream, over the gold band on the canvas, so
   there is never an edge between two creams. At the stick the body is cream, and the sheet turns cream unseen. */
.scene--lakbay.lakbay--rising .scene__stage,
.scene--lakbay.lakbay--rising .lakbay__book {
  background: transparent;
}

/* ---------- the book: a cream sheet that can fold ---------- */
.lakbay__book {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--cream);
  color: var(--forest);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  /* the book stays the product's brand even while the plate under it turns to night */
  --fg: var(--forest);
  --fg-2: color-mix(in srgb, var(--forest) 80%, var(--cream));
  --fg-3: color-mix(in srgb, var(--forest) 60%, var(--cream));
  --line: color-mix(in srgb, var(--forest) 28%, transparent);
  --plate-bg: var(--cream);
}
.lakbay__book--closed {
  visibility: hidden;
}
.lakbay__book .chapter {
  color: var(--forest);
}
.lakbay__book .chapter::before {
  color: var(--forest);
}
.lakbay__book .link {
  color: var(--forest);
  text-decoration-color: color-mix(in srgb, var(--forest) 45%, transparent);
}
.lakbay__book .link:hover {
  text-decoration-color: var(--forest);
}
.lakbay__book .pill {
  border-color: color-mix(in srgb, var(--forest) 45%, transparent);
  color: var(--forest);
}
.lakbay__book .pill:hover {
  border-color: var(--forest);
}

/* ---------- label row and the mono top-right ---------- */
.lakbay__label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lakbay__label .chapter {
  font-weight: 400;
  font-size: var(--mono-s);
}
.lakbay__lockup {
  width: 36px;
  height: 36px;
  padding: 3px;
  background: var(--forest);
}
.lakbay__meaning {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* ---------- LAKBAY / BOOK ---------- */
.lakbay__title {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: var(--lb-top);
  font-size: var(--lb-size);
  line-height: 0.86;
  color: var(--forest);
  white-space: nowrap;
  pointer-events: none;
}
.lakbay__t1,
.lakbay__t2 {
  display: block;
  width: max-content;
}
.lakbay__o {
  position: relative;
  display: inline-block;
}
/* LakBi stands in the O, feet on BOOK's baseline. The image has ~16% of padding under the feet. */
.lakbay__lakbi {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 0.92em;
  height: 0.92em;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.lakbay__mascot {
  position: absolute;
  z-index: 2;
  top: calc(var(--lb-top) + 1.72 * var(--lb-size) + 10px);
  left: calc(var(--gutter) + var(--lb-o-x));
  transform: translateX(-50%);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--forest);
}

/* ---------- the route, vertical: dashes and stop dots, from under the header to the docked phone's top edge ---------- */
.lakbay__route {
  position: absolute;
  z-index: 1;
  top: var(--lb-line-top);
  left: var(--lb-line-x);
  width: 12px;
  height: var(--lb-line-h);
  transform: translateX(-50%);
  color: var(--forest);
  pointer-events: none;
}
.lakbay__route-svg {
  width: 12px;
  height: 100%;
  overflow: visible;
}
.lakbay__stop {
  position: absolute;
  left: 50%;
  top: calc(var(--at) * 100%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--lakbi);
  outline: 2px solid var(--forest);
  outline-offset: 0;
}
/* a short drop (under 110px: phones, landscape, a line pushed under the wordmark) has no room for stops */
.scene--lakbay.lakbay--shortline .lakbay__stop {
  display: none;
}

/* ---------- three phones at three depths: itinerary in front and docked, the fan behind it to the right ---------- */
.lakbay__phones {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.lakbay__strip {
  display: contents;
}
.lakbay__phone {
  position: absolute;
  margin: 0;
  bottom: var(--lb-pb);
  width: var(--lb-pw);
  transform-origin: 50% 100%;
}
.lakbay__phone img {
  display: block;
  width: 100%;
  height: auto;
}
.lakbay__phone--itin {
  z-index: 3;
  left: var(--lb-itin-l);
}
.lakbay__phone--map {
  z-index: 2;
  left: calc(var(--lb-itin-l) + var(--lb-map-dx) * var(--lb-pw));
  bottom: calc(var(--lb-pb) + 5svh);
  width: calc(var(--lb-pw) * 0.82);
}
.lakbay__phone--atlas {
  z-index: 1;
  left: calc(var(--lb-itin-l) + var(--lb-atlas-dx) * var(--lb-pw));
  bottom: calc(var(--lb-pb) + 9svh);
  width: calc(var(--lb-pw) * 0.68);
}
/* the map's stops, popped in sequence over the screenshot's pins */
.lakbay__pin {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 9%;
  aspect-ratio: 1;
  margin: -4.5% 0 0 -4.5%;
  border-radius: 50%;
  background: var(--lakbi);
  border: 2px solid var(--forest);
}

/* ---------- the left column: copy, then the mono, then the links; its foot sits on the phone's foot ---------- */
.lakbay__col {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: var(--lb-pb);
  width: calc(var(--lb-itin-l) - var(--gutter) - 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.lakbay__copy {
  display: grid;
  gap: 4px;
  margin-bottom: 6px;
}
.lakbay__copy .serif-line {
  max-width: none;
  text-wrap: balance;
}
.lakbay__l1 {
  font-size: clamp(24px, 3.3vw, 60px);
}
.lakbay__l2,
.lakbay__l3 {
  font-size: clamp(20px, 2.1vw, 38px);
}
.lakbay__features {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--mono-m);
  color: var(--forest);
}
.lakbay__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--mono-m);
  color: var(--forest);
}
.lakbay__links .link,
.lakbay__plain {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lakbay__plain {
  color: var(--fg-2);
}
.lakbay__links .pill {
  font-size: var(--mono-s);
}
.lakbay__built {
  position: relative;
}
.lakbay__disclose {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--mono-m);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--forest);
  line-height: 1.2;
}
.lakbay__disclose::after {
  content: "\00a0+";
}
.lakbay__disclose[aria-expanded="true"]::after {
  content: "\00a0–";
}
.lakbay__card {
  left: 0;
  bottom: calc(100% + 6px);
  text-align: left;
  color: var(--forest);
}

/* ---------- the trip print: a 4:5 letterbox of Hanoi, pinned top-right on wide screens only ---------- */
.lakbay__print {
  display: none;
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  top: calc(var(--header-h) + 44px);
  width: clamp(120px, 10.5vw, 190px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--paper);
  outline: 1px solid color-mix(in srgb, var(--forest) 24%, transparent);
}
@media (min-width: 1280px) and (min-height: 700px) {
  .lakbay__print {
    display: block;
  }
}

/* ---------- the crease: the one gradient allowed here, a soft band along the fold edge ---------- */
.lakbay__crease {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22svh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35));
  opacity: 0;
  pointer-events: none;
}

/* ---------- short desktops (≤ 760px tall): the copy one notch smaller so the column stays under BOOK ---------- */
@media (min-width: 1024px) and (max-height: 760px) and (min-height: 501px) {
  .lakbay__col {
    gap: 8px;
  }
  .lakbay__copy {
    margin-bottom: 2px;
  }
  .lakbay__l1 {
    font-size: clamp(22px, 2.5vw, 40px);
  }
  .lakbay__l2,
  .lakbay__l3 {
    font-size: clamp(18px, 1.8vw, 30px);
  }
  .lakbay__links {
    gap: 0 18px;
  }
}

/* ============================================================================
   Tablets and phones (portrait, < 1024 wide): LAKBAY / BOOK across the top,
   then the copy column beside one large docked phone. Tablets keep map and
   atlas under the copy; phones get them as a swipe row beneath.
   ========================================================================== */
@media (max-width: 1023px) and (min-height: 501px) {
  .scene--lakbay {
    --lb-mode: grid;
    --lb-size: min(17vw, 15svh);
    --lb-top: calc(var(--header-h) + 64px);
    --lb-ph: min(54svh, 72vw);
    --lb-pb: 0px;
    --lb-line-x: calc(100% - var(--gutter) - var(--lb-pw) + var(--lb-dock) * var(--lb-pw));
    --lb-line-top: calc(var(--header-h) + 8px);
    --lb-line-h: calc(var(--lb-top) + 1.72 * var(--lb-size) + 36px - var(--lb-line-top));
  }
  .lakbay__book {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lb-pw);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "title title"
      "col phone"
      "strip phone";
    column-gap: 24px;
    padding: var(--lb-top) var(--gutter) 0;
  }
  .lakbay__title {
    position: relative;
    left: auto;
    top: auto;
    grid-area: title;
    margin-bottom: 36px;
  }
  .lakbay__mascot {
    top: calc(var(--lb-top) + 1.72 * var(--lb-size) + 8px);
  }
  .lakbay__phones {
    display: contents;
  }
  .lakbay__phone {
    position: static;
    width: 100%;
  }
  .lakbay__phone--itin {
    grid-area: phone;
    align-self: start;
  }
  .lakbay__col {
    position: static;
    grid-area: col;
    width: auto;
    min-width: 0;
    gap: 10px;
  }
  .lakbay__copy .serif-line {
    min-width: 0;
  }
  .lakbay__l1 {
    font-size: clamp(24px, 4.2vw, 36px);
  }
  .lakbay__l2,
  .lakbay__l3 {
    font-size: clamp(19px, 3.2vw, 28px);
  }
  .lakbay__links .link,
  .lakbay__plain,
  .lakbay__links .pill,
  .lakbay__disclose {
    min-height: 48px;
  }
  .lakbay__strip {
    display: flex;
    grid-area: strip;
    align-self: stretch;
    gap: 16px;
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 3svh;
    overflow: clip;
  }
  .lakbay__strip .lakbay__phone {
    position: relative;
    inset: auto;
    height: 100%;
    width: auto;
    aspect-ratio: 720 / 1516;
    max-height: 40svh;
  }
  .lakbay__strip .lakbay__phone img {
    height: 100%;
    object-fit: contain;
  }
  .scene--lakbay.lakbay--nostrip .lakbay__strip {
    display: none;
  }
  .lakbay__crease {
    height: 18svh;
  }
}

/* phones (< 768): the copy column is narrow, so the lines sit one per row beside the phone,
   the links and "How it's built" run full width, and map + atlas become a swipe row */
@media (max-width: 767px) and (min-height: 501px) {
  .scene--lakbay {
    --lb-size: 18vw;
    --lb-ph: min(44svh, 97vw);
    --lb-pw: min(calc(var(--lb-ph) * 0.4749), 46vw);
  }
  .scene--lakbay {
    --lb-line-h: calc(var(--lb-top) + 1.72 * var(--lb-size) + 48px - var(--lb-line-top));
  }
  .lakbay__title {
    margin-bottom: 48px;
  }
  /* the drop from BOOK to the phone is ~50px: dashes and the pen, no stops */
  .lakbay__stop {
    display: none;
  }
  .lakbay__book {
    /* the stanza sits beside the phone's top: the one flexible row under it takes the phone's spare height
       (the strip row is auto: a hidden strip must not keep a share of the space) */
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "title title"
      "l1 phone"
      "l2 phone"
      "l3 phone"
      "features phone"
      ". phone"
      "links links"
      "built built"
      "strip strip";
    column-gap: 12px;
  }
  .lakbay__label {
    gap: 10px;
  }
  .lakbay__lockup {
    width: 24px;
    height: 24px;
    padding: 2px;
  }
  .lakbay__meaning {
    top: calc(var(--header-h) + 34px);
    left: var(--gutter);
    right: auto;
    text-align: left;
  }
  .lakbay__mascot {
    font-size: 11px;
  }
  .lakbay__col,
  .lakbay__copy {
    display: contents;
  }
  .lakbay__copy .serif-line {
    align-self: start;
  }
  .lakbay__l1 {
    grid-area: l1;
    font-size: 24px;
    margin-bottom: 8px;
  }
  .lakbay__l2 {
    grid-area: l2;
    margin-bottom: 8px;
  }
  .lakbay__l3 {
    grid-area: l3;
    margin-bottom: 10px;
  }
  .lakbay__l2,
  .lakbay__l3 {
    font-size: 19px;
  }
  .lakbay__features {
    grid-area: features;
    align-self: start;
    font-size: 12px;
  }
  .lakbay__links {
    grid-area: links;
    margin-top: 10px;
    gap: 0 20px;
    font-size: 12px;
  }
  .lakbay__built {
    grid-area: built;
    justify-self: start;
  }
  .lakbay__disclose {
    font-size: 12px;
  }
  .lakbay__strip {
    align-self: end;
    gap: 12px;
    height: min(28svh, 240px);
    max-height: none;
    margin: 12px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter);
    overflow-x: auto;
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lakbay__strip::-webkit-scrollbar {
    display: none;
  }
  .lakbay__strip .lakbay__phone {
    flex: 0 0 48vw;
    width: 48vw;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    scroll-snap-align: start;
  }
  .lakbay__strip .lakbay__phone img {
    height: auto;
  }
}
/* short phones: no room for the swipe row under the links; the docked phone carries the product alone,
   and the column tightens so "How it's built" stays whole above the fold line */
@media (max-width: 767px) and (min-height: 501px) and (max-height: 740px) {
  .scene--lakbay {
    --lb-top: calc(var(--header-h) + 58px);
    --lb-ph: min(42svh, 97vw);
  }
  .lakbay__strip {
    display: none;
  }
  .lakbay__title {
    margin-bottom: 30px;
  }
  .lakbay__l1 {
    font-size: 22px;
    margin-bottom: 4px;
  }
  .lakbay__l2 {
    margin-bottom: 4px;
  }
  .lakbay__l3 {
    margin-bottom: 6px;
  }
  .lakbay__l2,
  .lakbay__l3 {
    font-size: 17px;
  }
  .lakbay__links {
    margin-top: 4px;
  }
}

/* ============================================================================
   Landscape phones (≤ 500px tall): the desktop composition, the line a little
   left of centre, the mono and the links in a column right of the fan.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .scene--lakbay {
    --lb-mode: land;
    --lb-top: calc(var(--header-h) + 38px);
    --lb-ph: 62svh;
    --lb-pb: 4svh;
    --lb-line-x: 44%;
    --lb-line-xv: 44vw;
    --lb-line-top: calc(var(--header-h) + 8px);
    --lb-map-dx: 0.7;
    --lb-atlas-dx: 1.3;
    --lb-size: min(calc((var(--lb-line-xv) - var(--lb-dock) * var(--lb-pw) - var(--gutter) - 24px) / 5), 15svh);
    --lb-right: calc(var(--lb-itin-l) + (var(--lb-atlas-dx) + 0.68) * var(--lb-pw) + 20px);
  }
  .lakbay__lockup {
    width: 24px;
    height: 24px;
    padding: 2px;
  }
  .lakbay__mascot {
    font-size: 10px;
    top: calc(var(--lb-top) + 1.72 * var(--lb-size) + 5px);
  }
  .lakbay__stop {
    display: none;
  }
  .lakbay__col {
    display: contents;
  }
  .lakbay__copy {
    position: absolute;
    z-index: 4;
    left: var(--gutter);
    top: calc(var(--lb-top) + 1.72 * var(--lb-size) + 28px);
    width: calc(var(--lb-itin-l) - var(--gutter) - 20px);
    gap: 2px;
  }
  .lakbay__l1 {
    font-size: 18px;
  }
  .lakbay__l2,
  .lakbay__l3 {
    font-size: 15px;
  }
  .lakbay__features {
    position: absolute;
    z-index: 4;
    left: var(--lb-right);
    right: var(--gutter);
    top: calc(var(--header-h) + 34px);
    font-size: 11px;
  }
  .lakbay__links {
    position: absolute;
    z-index: 4;
    left: var(--lb-right);
    right: var(--gutter);
    bottom: 12px;
    flex-direction: column;
    align-items: flex-start;
    font-size: 11px;
  }
  .lakbay__links .pill {
    min-height: 44px;
    font-size: 10px;
  }
  .lakbay__built {
    position: absolute;
    z-index: 4;
    left: var(--gutter);
    bottom: 10px;
  }
  .lakbay__disclose {
    font-size: 11px;
  }
  .lakbay__phone--map {
    bottom: calc(var(--lb-pb) + 4svh);
  }
  .lakbay__phone--atlas {
    bottom: calc(var(--lb-pb) + 7svh);
  }
}

/* ---------- print ---------- */
@media print {
  .scene--lakbay .scene__stage {
    perspective: none;
  }
  .lakbay__book {
    position: relative;
    min-height: 100svh;
  }
}