/* ============================================================================
   lakbaybook.html — "The fold-out". Loaded after css/home.css; uses its tokens,
   the .scene / .scene__stage sticky primitives, the type primitives and the
   same header. The product's own plate: cream, forest, LakBi yellow.

   Two sticky stages and a footer:
     S1 .lb-cover   the cover opens from night (timed), turns like a page
                    (scrub) and reveals the promo spread
     S2 .lb-leaves  thirteen concertina leaves unfold one hinge per scroll,
                    fold back up, go into a phone; scroll the app; the back
                    cover is the colophon
   CSS default = the key pose of the still edition (html:not(.motion)): the
   cover open and turned, the leaves in a native scroller, the screens in a
   swipe row, the colophon. js/lakbaybook.js moves things away from that pose
   and the scrub brings them back. Every class is lb-.
   ========================================================================== */

:root {
  --lb-ease: var(--ease-out);
}
body.lb {
  color: var(--fg);
}
.lb main {
  z-index: auto;
}
html[data-plate="cream"] ::selection {
  background: var(--lakbi);
  color: var(--forest);
}
/* the book's own tiers: forest mixed into cream, never transparent (the leaves and the print sit under them) */
html[data-plate="cream"] {
  --fg-2: color-mix(in srgb, var(--forest) 80%, var(--cream));
  --fg-3: color-mix(in srgb, var(--forest) 62%, var(--cream));
  --line: color-mix(in srgb, var(--forest) 26%, transparent);
}
/* the header bar on phones follows the body (night for one frame, then cream) */
.lb .hdr--solid {
  background: var(--hdr-bg, var(--plate-bg));
}
/* the one night frame: the cover starts edge-on (invisible) until JS opens it; the still edition never has this plate */
html.motion[data-plate="night"] .lb-cover__sheet {
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
}

/* ---------- the line that persists top-left once the cover is gone ---------- */
.lb-persist {
  position: fixed;
  z-index: 10;
  top: calc(var(--header-h) + 8px);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--fg-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--lb-ease), visibility 0.35s;
  pointer-events: none;
}
.lb-persist__lockup {
  width: auto;
  height: 28px;
}
html.motion .lb-persist.is-on {
  opacity: 1;
  visibility: visible;
}
html:not(.motion) .lb-persist {
  display: none;
}

/* ============================================================================
   S1 · The cover
   ========================================================================== */
.lb-cover {
  /* LAKBAY fits the width (JS refines from the real glyph widths) */
  --lb-size: 18vw;
  --lb-title-top: calc(var(--header-h) + 64px);
  --lb-o-x: 1.04em;
}
.lb-cover__persp {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

/* the cover sheet: one element that hinges open on load and turns about its left edge on scroll */
.lb-cover__sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--cream);
  border-right: 1px solid var(--line);
  transform-origin: 0% 50%;
  backface-visibility: hidden;
  overflow: clip;
}
.lb-cover__label {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lb-cover__lockup {
  width: auto;
  height: 40px;
}
.lb-cover__meaning {
  color: var(--fg-2);
}
.lb-cover__title {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  top: var(--lb-title-top);
  margin: 0;
  font-size: var(--lb-size);
  font-variation-settings: "wdth" 110, "wght" 900;
  font-stretch: 110%;
  line-height: 0.86;
  letter-spacing: -0.015em;
  color: var(--forest);
  white-space: nowrap;
  pointer-events: none;
}
.lb-cover__t1,
.lb-cover__t2 {
  display: block;
  width: max-content;
}
.lb-cover__o {
  position: relative;
  display: inline-block;
}
/* LakBi stands in the O, feet on BOOK's baseline (the sprite has ~16% of padding under the feet) */
.lb-cover__lakbi {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: 0.92em;
  height: 0.92em;
  max-width: none;
  translate: -50% 0;
  pointer-events: none;
}
.lb-cover__mascot {
  position: absolute;
  z-index: 2;
  top: calc(var(--lb-title-top) + 1.72 * var(--lb-size) + 12px);
  left: calc(var(--gutter) + var(--lb-o-x));
  transform: translateX(-50%);
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: var(--forest);
}
.lb-cover__line {
  max-width: 14ch;
  color: var(--forest);
}
/* the crease: the one gradient allowed here, a soft band along the hinge (bottom while opening, left while turning) */
.lb-cover__crease {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 40%);
  opacity: 0;
  pointer-events: none;
}
.lb-cover--turning .lb-cover__crease {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
}

/* the first spread, beneath the cover: the promo on a white print with a forest edge */
.lb-spread {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 44px) var(--gutter) 24px;
}
html.motion .lb-spread {
  visibility: hidden;
}
.lb-promo {
  width: min(72vw, 1600px, calc((100svh - var(--header-h) - 150px) * 16 / 9));
  max-width: 100%;
}
.lb-promo__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 2px solid var(--forest);
}
.lb-promo__cap {
  margin-top: 12px;
  color: var(--fg-2);
}

/* ============================================================================
   S2 · The fold-out
   ========================================================================== */
.lb-leaves {
  /* the leaf: a square; capped so a pubmat stays a leaf and not a wall on 2560px */
  --L: min(60svh, 42vw, 680px);
  --lb-axis: x; /* read by lakbaybook.js: x (hinges on vertical edges, the strip runs right) | y (phones: down) */
  --lb-strip-top: calc(50svh - var(--L) / 2 + 16px);
  --lb-strip-left: 0px;
  /* the phone: the trips screenshot's own device frame (720×1516); its screen is the inset rect below */
  --lb-ph: min(72svh, 36vw / 0.4749);
  --lb-pw: calc(var(--lb-ph) * 0.4749);
  --lb-sw: calc(var(--lb-pw) * 0.926);
  --lb-edge: color-mix(in srgb, var(--forest) 25%, transparent);
}
.lb-leaves__stage {
  color: var(--forest);
}
.lb-leaves__persp {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1400px;
  perspective-origin: 54% 50%;
}
.lb-strip {
  position: absolute;
  left: var(--lb-strip-left);
  top: var(--lb-strip-top);
  width: var(--L);
  height: var(--L);
  transform-style: preserve-3d;
}
.lb-leaf {
  position: absolute;
  left: calc(var(--k) * var(--L));
  top: 0;
  width: var(--L);
  height: var(--L);
  transform-origin: 0% 50%;
  backface-visibility: hidden;
}
/* the crease on the moving leaf: --crease is written by the scrub, 0.18·sin(angle) */
.lb-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
  opacity: var(--crease, 0);
  pointer-events: none;
}
.lb-leaf__btn {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--lb-edge);
  background: var(--cream);
  transition: opacity 0.25s;
}
.lb-leaf__btn:focus-visible {
  outline-offset: -4px;
}
.lb-leaf.is-dim .lb-leaf__btn {
  opacity: 0.4;
}
.lb-leaf__btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the phone pictured inside the pubmat (data-shot, in percent): the Flip's origin */
.lb-leaf__shot {
  position: absolute;
  left: var(--sx, 0%);
  top: var(--sy, 0%);
  width: var(--sw, 100%);
  height: var(--sh, 100%);
  pointer-events: none;
  opacity: 0;
}
.lb-leaf__shot.is-full {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
/* the backs of the leaves (cream, hinged on the same edge from the other side) and the closed stack */
.lb-strip__actors {
  display: contents;
}
.lb-deck {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--L);
  height: var(--L);
  transform-origin: 0 0;
  pointer-events: none;
}
.lb-deck i {
  position: absolute;
  inset: 0;
  background: var(--cream);
  border: 1px solid var(--lb-edge);
  transform: translateX(calc(var(--j) * 3px));
}
.lb-deck i.is-open {
  display: none;
}
/* the itinerary line along the leaves' feet; a stop at every hinge */
.lb-line {
  position: absolute;
  left: 0;
  top: calc(var(--L) + 18px);
  width: calc(13 * var(--L));
  height: 12px;
  color: var(--forest);
  pointer-events: none;
}
.lb-line__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lb-stop {
  position: absolute;
  left: calc(var(--k) * var(--L));
  top: 6px;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--lakbi);
  outline: 1.5px solid var(--forest);
}
.lb-look {
  position: absolute;
  left: 0;
  top: calc(var(--L) + 40px);
  margin: 0;
  white-space: nowrap;
  color: var(--fg-2);
}
.lb-fold-line {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  top: calc(var(--header-h) + 52px);
  max-width: 24ch;
  color: var(--forest);
}

/* ---------- the pocket: the phone, the seven screens inside it, the captions beside it ---------- */
/* under the leaves (z 1): the closed book shrinks over the phone and into its screen */
.lb-pocket {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lb-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--lb-pw);
  height: var(--lb-ph);
}
.lb-phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* the screen rect inside the baked frame (measured on app-trips-720.webp) */
.lb-phone__screen {
  position: absolute;
  left: 3.7%;
  top: 0.9%;
  width: 92.6%;
  height: 98.2%;
  overflow: clip;
  border-radius: calc(var(--lb-pw) * 0.095);
  background: transparent;
}
.lb-shots {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.lb-shot {
  position: relative;
  width: 100%;
  height: calc(var(--lb-ph) * 0.982);
  margin: 0;
  overflow: clip;
  background: var(--cream);
}
/* each screenshot carries the same baked frame: crop it away (and round its corners) so only the screen scrolls */
.lb-shot__inner {
  position: absolute;
  left: -4%;
  top: -0.92%;
  width: 108%;
  overflow: clip;
  border-radius: calc(var(--lb-pw) * 0.09);
}
.lb-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.lb-shot__cap {
  display: none;
}
/* the map's stops, popped in sequence over the screenshot's pins */
.lb-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);
}
.lb-pocket__os {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--lb-ph) / 2 + 24px);
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  color: var(--fg-2);
}
.lb-captions {
  position: absolute;
  left: calc(50% + var(--lb-sw) / 2 + 44px);
  top: 50%;
  margin: 0;
  height: 1.4em;
  font-size: clamp(14px, 1.25vw, 20px);
  letter-spacing: 0.12em;
  color: var(--forest);
  transform: translateY(-50%);
}
.lb-captions span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}
.lb-mascot {
  position: absolute;
  left: var(--lb-mascot-x, 0px);
  top: var(--lb-mascot-y, 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  translate: 0 -100%;
}
.lb-mascot__lakbi {
  width: clamp(72px, 9svh, 120px);
  height: auto;
}
.lb-mascot__cap {
  margin: 0;
  white-space: nowrap;
  color: var(--forest);
}

/* ---------- the back cover: the colophon on the right, the trip print tucked top-right ---------- */
.lb-colophon {
  position: absolute;
  z-index: 4;
  left: 50%;
  right: var(--gutter);
  top: max(42%, calc(var(--header-h) + 26svh + 56px));
  display: grid;
  justify-items: start;
  gap: 18px;
  max-width: 560px;
}
.lb-colophon__h {
  font: inherit;
  margin: 0;
}
.lb-colophon__disclose {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--forest);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.lb-colophon__disclose:hover,
.lb-colophon__disclose[aria-expanded="true"] {
  text-decoration-color: currentColor;
}
.lb-colophon .card {
  position: relative;
  width: min(100%, 440px);
  margin-top: -6px;
}
.lb-colophon__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}
.lb-colophon__links .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lb-colophon__sep {
  color: var(--fg-3);
}
.lb-colophon__tf {
  color: var(--fg-2);
}
.lb-colophon__note {
  color: var(--fg-3);
}
.lb-colophon__line {
  max-width: 18ch;
  color: var(--forest);
}
.lb-colophon__back {
  margin: 0;
}
.lb-colophon__back .link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.lb-print {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: calc(var(--header-h) + 8px);
  width: calc(26svh * 0.8);
  max-width: 220px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--paper);
  outline: 1px solid var(--lb-edge);
}

/* ---------- footer, as the landing page's ---------- */
.lb-foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 28px var(--gutter) max(24px, env(safe-area-inset-bottom));
  color: var(--fg-2);
  background: var(--cream);
}
.lb-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--forest);
}
.lb-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Look closer: one native dialog, the screenshot at 72vh ---------- */
.lb-light {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--forest);
  --focus: var(--forest);
}
.lb-light::backdrop {
  background: color-mix(in srgb, var(--forest) 30%, transparent);
}
.lb-light:not([open]) {
  display: none;
}
.lb-light__frame {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  padding: 12px var(--gutter) 20px;
}
.lb-light__close {
  justify-self: end;
  min-height: 44px;
  border-color: var(--forest);
  background: var(--cream);
  color: var(--forest);
}
.lb-light__fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 4px 0;
}
.lb-light__img {
  width: auto;
  height: 72svh;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 2px solid var(--forest);
  border-radius: 22px;
  background: var(--cream);
}
.lb-light__img.is-pub {
  border-radius: 0;
}
.lb-light__cap {
  text-align: center;
  color: var(--fg-2);
  max-width: 60ch;
}

/* ============================================================================
   Phone edition (< 768): the concertina unfolds downward, the cover opens from the top edge
   ========================================================================== */
@media (max-width: 767px) {
  .lb-cover {
    --lb-size: 22vw;
    --lb-title-top: calc(var(--header-h) + 72px);
  }
  .lb-cover__sheet {
    transform-origin: 50% 0%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  html.motion[data-plate="night"] .lb-cover__sheet {
    transform: rotateX(-90deg);
    transform-origin: 50% 0%;
  }
  .lb-cover--turning .lb-cover__crease {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
  }
  .lb-cover__lockup {
    height: 32px;
  }
  .lb-cover__label {
    gap: 10px;
  }
  .lb-cover__line {
    font-size: var(--serif-l);
    max-width: 12ch;
  }
  @media (max-width: 374px) {
    .lb-cover__meaning {
      top: calc(var(--header-h) + 32px);
    }
    .lb-cover {
      --lb-title-top: calc(var(--header-h) + 84px);
    }
  }
  .lb-spread {
    padding: calc(var(--header-h) + 52px) var(--gutter) 24px;
    align-items: start;
  }
  .lb-promo {
    width: 100%;
  }

  .lb-leaves {
    --L: calc(100vw - 2 * var(--gutter));
    --lb-axis: y;
    --lb-strip-top: 0px;
    --lb-strip-left: var(--gutter);
    --lb-ph: min(calc(70vw / 0.4749), 62svh);
  }
  html.motion .lb-persist.is-off {
    opacity: 0;
    visibility: hidden;
  }
  .lb-leaves__persp {
    perspective: 1200px;
    perspective-origin: 50% 56%;
  }
  .lb-leaf {
    left: 0;
    top: calc(var(--k) * var(--L));
    transform-origin: 50% 0%;
  }
  .lb-leaf::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
  }
  .lb-deck i {
    transform: translateY(calc(var(--j) * 3px));
  }
  .lb-line {
    left: calc(10px - var(--gutter));
    top: 0;
    width: 12px;
    height: calc(13 * var(--L));
  }
  .lb-stop {
    left: 6px;
    top: calc(var(--k) * var(--L));
  }
  .lb-look {
    top: calc(var(--L) + 12px);
  }
  .lb-fold-line {
    top: calc(var(--header-h) + 44px);
    right: var(--gutter);
    max-width: none;
    font-size: 22px;
  }
  .lb-pocket__os {
    top: calc(50% + var(--lb-ph) / 2 + 18px);
  }
  .lb-captions {
    left: 50%;
    top: calc(50% + var(--lb-ph) / 2 + 46px);
    transform: translateX(-50%);
    font-size: 15px;
  }
  .lb-captions span {
    left: 50%;
    transform: translateX(-50%);
  }
  .lb-mascot__lakbi {
    width: 76px;
  }
  .lb-colophon {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: 16px;
    gap: 6px;
    max-width: none;
  }
  .lb-colophon__disclose,
  .lb-colophon__links .link,
  .lb-colophon__back .link {
    min-height: 48px;
  }
  .lb-colophon__links {
    gap: 0 10px;
  }
  .lb-colophon__line {
    font-size: 22px;
  }
  .lb-print {
    width: 36vw;
    max-width: 180px;
  }
  .lb-light__frame {
    padding: 8px 16px 16px;
  }
  .lb-light__close {
    min-height: 48px;
  }
  .lb-light__img {
    height: 80svh;
  }
  .lb-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .lb-foot a {
    min-height: 48px;
  }
}

/* ---------- landscape phones: the desktop strip, leaves at 70vh ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .lb-cover {
    --lb-size: min(18vw, 19svh);
    --lb-title-top: calc(var(--header-h) + 40px);
  }
  .lb-cover__sheet {
    transform-origin: 0% 50%;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .lb-cover--turning .lb-cover__crease {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
  }
  .lb-spread {
    padding-top: calc(var(--header-h) + 12px);
    align-items: center;
  }
  .lb-promo {
    width: min(72vw, calc((100svh - var(--header-h) - 70px) * 16 / 9));
  }
  .lb-leaves {
    --L: 62svh;
    --lb-axis: x;
    --lb-strip-top: calc(var(--header-h) + 44px);
    --lb-strip-left: 0px;
    --lb-ph: 80svh;
  }
  .lb-leaves__persp {
    perspective: 1400px;
    perspective-origin: 54% 50%;
  }
  .lb-leaf {
    left: calc(var(--k) * var(--L));
    top: 0;
    transform-origin: 0% 50%;
  }
  .lb-leaf::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 55%);
  }
  .lb-deck i {
    transform: translateX(calc(var(--j) * 3px));
  }
  .lb-line {
    left: 0;
    top: calc(var(--L) + 14px);
    width: calc(13 * var(--L));
    height: 12px;
  }
  .lb-stop {
    left: calc(var(--k) * var(--L));
    top: 6px;
  }
  .lb-look {
    top: calc(var(--L) + 30px);
  }
  .lb-fold-line {
    top: calc(var(--header-h) + 36px);
    max-width: 22ch;
    font-size: 20px;
  }
  .lb-pocket__os {
    top: calc(50% + var(--lb-ph) / 2 + 10px);
  }
  .lb-captions {
    left: calc(50% + var(--lb-sw) / 2 + 32px);
    top: 50%;
    transform: translateY(-50%);
  }
  .lb-captions span {
    left: 0;
    transform: none;
  }
  .lb-colophon {
    left: 44%;
    right: var(--gutter);
    top: calc(var(--header-h) + 8px);
    bottom: auto;
    gap: 6px;
  }
  .lb-colophon__line {
    font-size: 20px;
  }
  .lb-mascot__lakbi {
    width: 52px;
  }
  .lb-print {
    display: none;
  }
  .lb-light__img {
    height: 86svh;
  }
}

/* ============================================================================
   The still edition (html:not(.motion)): one screen each, no 3D, native scrollers
   ========================================================================== */
html:not(.motion) .lb-cover__persp {
  position: relative;
  display: flex;
  flex-direction: column;
  perspective: none;
}
html:not(.motion) .lb-cover__sheet {
  position: relative;
  order: -1;
  min-height: min(100svh, 760px);
  border: 0;
  transform: none !important;
}
html:not(.motion) .lb-cover__crease {
  display: none;
}
html:not(.motion) .lb-spread {
  position: relative;
  padding: 24px var(--gutter) 72px;
  visibility: visible;
}
html:not(.motion) .lb-leaves__stage {
  display: grid;
  gap: 40px;
  padding: 24px 0 64px;
}
html:not(.motion) .lb-leaves__persp {
  position: relative;
  inset: auto;
  perspective: none;
}
html:not(.motion) .lb-strip {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  gap: 16px;
  width: auto;
  height: auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: thin;
  transform: none !important;
  transform-style: flat;
}
html:not(.motion) .lb-leaf {
  position: static;
  flex: 0 0 min(var(--L), 440px);
  width: auto;
  height: auto;
  aspect-ratio: 1;
  scroll-snap-align: start;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html:not(.motion) .lb-leaf::after,
html:not(.motion) .lb-strip__actors,
html:not(.motion) .lb-look,
html:not(.motion) .lb-captions {
  display: none;
}
html:not(.motion) .lb-fold-line {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 var(--gutter);
  max-width: 24ch;
}
html:not(.motion) .lb-pocket {
  position: relative;
  inset: auto;
  display: grid;
  gap: 16px;
  pointer-events: auto;
}
html:not(.motion) .lb-phone {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  transform: none !important;
}
html:not(.motion) .lb-phone__frame {
  display: none;
}
html:not(.motion) .lb-phone__screen {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  border-radius: 0;
}
html:not(.motion) .lb-shot__inner {
  position: static;
  width: auto;
}
html:not(.motion) .lb-shots {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: thin;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html:not(.motion) .lb-shot {
  flex: 0 0 min(280px, 70vw);
  height: auto;
  overflow: visible;
  scroll-snap-align: start;
}
html:not(.motion) .lb-shot__cap {
  display: block;
  margin-top: 10px;
  color: var(--fg-2);
}
html:not(.motion) .lb-pin {
  display: none;
}
html:not(.motion) .lb-pocket__os {
  position: relative;
  left: auto;
  top: auto;
  margin: 0 var(--gutter);
  transform: none;
}
html:not(.motion) .lb-mascot {
  position: relative;
  left: auto;
  top: auto;
  align-items: flex-start;
  margin: 8px var(--gutter) 0;
  translate: none;
}
html:not(.motion) .lb-colophon {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0 var(--gutter);
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html:not(.motion) .lb-print {
  position: relative;
  right: auto;
  top: auto;
  width: 36vw;
  max-width: 220px;
  margin: 0 var(--gutter);
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---------- print ---------- */
@media print {
  .lb-persist,
  .lb-light {
    display: none !important;
  }
}