/* HumanIA — the book landing page (/libro, /en/libro).
   Implemented from design-files/landing-page/Claudia A Luminous.dc.html
   ("Luminous": Newsreader + Hanken Grotesk, sunrise light, centred, airy).

   THIS PAGE DELIBERATELY DEPARTS FROM THE MAIN SITE'S LOOK. Its colours, fonts
   and spacing come from the design, not from /styles.css — Nick, 2026-09-24:
   the rule against new colours, fonts or spacing does not apply here. Do not
   pull it back towards the homepage's style.

   /styles.css is still loaded (asynchronously) for the waitlist quiz modal
   only. Every rule here uses a class or body.lb, so it out-ranks the site's
   element-level rules whenever that file arrives. */

body.lb {
  margin: 0;
  background: #F6F1E9;
  color: #3E342C;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.lb *, body.lb *::before, body.lb *::after { box-sizing: border-box; }
/* the design's paper grain */
body.lb::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lb-main { overflow-x: hidden; background: #F6F1E9; }
.lb a.lb-link { color: #A4552F; }
.lb a.lb-link:hover { color: #221B16; }
.lb :focus-visible { outline: 2px solid #A4552F; outline-offset: 3px; }
.lb-serif { font-family: Newsreader, Georgia, 'Times New Roman', serif; }
.lb-em { font-style: italic; color: #A4552F; }
.lb-p, .lb-h1, .lb-h2 { margin: 0; }

/* the live-type wordmark — never the image file */
.lb-mark { font-family: Outfit, system-ui, sans-serif; font-weight: 200; letter-spacing: -.005em; color: #221B16; line-height: 1; }
.lb-mark .ia { color: #62DDE8; font-weight: 500; letter-spacing: .005em; }

/* buttons */
.lb-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 34px;
  border-radius: 999px; background: #221B16; color: #F6F1E9; font: 500 17px/1 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: .01em; text-decoration: none; transition: background .3s;
}
.lb-btn:hover { background: #A4552F; color: #F6F1E9; }

/* ---------- image slots ----------
   Every image position is an empty slot until the real image arrives. To fill
   one, put an <img> inside the slot element; it fills and crops to the slot:
     <div class="lb-slot" data-slot="hero-portrait"><img src="…" alt="…" …></div>
   Add ?slots to the page address to see every slot labelled with its name and
   the size it needs. */
.lb-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-slot > img, .lb-slot > picture > img, .lb-slot > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.show-slots .lb-slot::after {
  content: attr(data-slot) "\A" attr(data-slot-size);
  white-space: pre; position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed rgba(164, 85, 47, .7); border-radius: inherit; color: #A4552F; font: 500 13px/1.4 'Hanken Grotesk', sans-serif;
  background: rgba(246, 241, 233, .55); z-index: 5;
}

/* ---------- language switch (same ES · EN switch as the rest of the site) ---------- */
.lb-langtog {
  position: absolute; top: 28px; right: 24px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: Outfit, system-ui, sans-serif; font-size: .76rem; letter-spacing: .1em;
}
.lb-langtog a { color: rgba(34, 27, 22, .5); text-decoration: none; padding: 6px 2px; }
.lb-langtog a:hover { color: #221B16; }
.lb-langtog a[aria-current="true"] { color: #221B16; }
.lb-langtog span { color: rgba(34, 27, 22, .35); }

/* ---------- 01 Opening ---------- */
.lb-open { position: relative; background: radial-gradient(120% 70% at 50% 0%, #F9DDC3 0%, #F6EADB 38%, #F6F1E9 70%); padding: 28px 24px clamp(96px, 14vw, 160px); }
.lb-open__in { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
/* The wordmark, three times the design's 24px (Nick, 2026-09-24): clear and prominent. */
.lb-open .lb-mark { font-size: 72px; }
/* At that size it would meet the ES · EN switch on narrow screens, so there the
   switch sits on its own line above it. */
@media (max-width: 700px) { .lb-open { padding-top: 64px; } }
.lb-open__copy { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; padding-top: clamp(72px, 14vw, 132px); }
.lb-h1 { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(46px, 11vw, 100px); line-height: 1.02; letter-spacing: -.025em; color: #221B16; max-width: 14ch; text-wrap: balance; }
.lb-open__sub { font-size: clamp(17px, 4.4vw, 20px); line-height: 1.6; max-width: 30em; text-wrap: pretty; }
.lb-open__from { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 300; font-size: 19px; color: #A4552F; }
.lb-open__cta { display: flex; padding-top: 10px; }
.lb-open__media { position: relative; width: 100%; max-width: 980px; margin-top: clamp(64px, 10vw, 104px); }
.lb-open__frame { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; border-radius: 28px; overflow: hidden; background: #E7DDCD; box-shadow: 0 40px 80px -30px rgba(120, 70, 30, .35); }
.lb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(246, 241, 233, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .3s; z-index: 3;
}
.lb-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.lb-play__tri { display: block; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid #221B16; margin-left: 5px; }
/* keep Claudia's face in frame when the frame is wider than the photo (desktop) */
.lb-open__frame .lb-slot > img { object-position: 50% 18%; }
.lb-open__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #221B16; z-index: 4; }
.lb-book { position: absolute; left: clamp(-10px, -2vw, -28px); bottom: clamp(-28px, -4vw, -44px); width: clamp(96px, 26%, 190px); aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: #E7DDCD; box-shadow: 0 24px 50px -12px rgba(60, 35, 15, .45); }

/* ---------- 02 Why ---------- */
.lb-why { position: relative; background: #F6F1E9; }
.lb-band { position: relative; width: 100%; aspect-ratio: 21 / 10; min-height: 320px; max-height: 640px; background: #EADFCF; }
.lb-band__fade { position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(180deg, rgba(246, 241, 233, 0) 0%, #F6F1E9 100%); pointer-events: none; }
/* The name over the mountains (Nick, 2026-09-24): live-type wordmark and descriptor,
   centred over the sunrise, on a soft cream glow so it reads on a phone while the
   image stays visible around it. */
.lb-band__name {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.4vw, 16px); padding: 0 16px 6%; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse 58% 46% at 50% 47%, rgba(246, 241, 233, .78) 0%, rgba(246, 241, 233, .5) 45%, rgba(246, 241, 233, 0) 100%);
}
.lb-band__mark { font-size: clamp(64px, 17vw, 168px); line-height: .9; }
.lb-band__desc {
  font-family: Outfit, system-ui, sans-serif; font-weight: 300; font-size: clamp(11.5px, 1.6vw, 20px);
  letter-spacing: .22em; text-transform: uppercase; color: #221B16; max-width: 30em;
}
@media (max-width: 480px) {
  .lb-band__name { background: radial-gradient(ellipse 80% 52% at 50% 47%, rgba(246, 241, 233, .82) 0%, rgba(246, 241, 233, .55) 50%, rgba(246, 241, 233, 0) 100%); }
  .lb-band__desc { letter-spacing: .16em; }
}
.lb-why__in { max-width: 1000px; margin: 0 auto; padding: clamp(40px, 8vw, 80px) 24px clamp(120px, 20vw, 200px); text-align: center; }
.lb-why__h { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(32px, 7.4vw, 64px); line-height: 1.14; letter-spacing: -.02em; color: #221B16; text-wrap: balance; }

/* ---------- 03 Skills ---------- */
.lb-skills { background: linear-gradient(180deg, #F6F1E9 0%, #F3E7D8 50%, #F6F1E9 100%); padding: 0 24px clamp(120px, 20vw, 200px); }
.lb-skills__in { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lb-skills__h { margin: 0 0 clamp(64px, 12vw, 112px); font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(26px, 6vw, 40px); color: #A4552F; }
.lb-skills__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(64px, 12vw, 112px); }
.lb-skill { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.lb-skill__dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #E0A075 0%, #E0A075 40%, rgba(224, 160, 117, 0) 100%); box-shadow: 0 0 24px 8px rgba(224, 160, 117, .45); }
.lb-skill__t { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(30px, 7.2vw, 56px); line-height: 1.12; letter-spacing: -.02em; color: #221B16; max-width: 19ch; text-wrap: balance; }
.lb-skills__close { margin: clamp(96px, 16vw, 160px) 0 0; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(40px, 10vw, 88px); line-height: 1.02; letter-spacing: -.03em; color: #A4552F; text-wrap: balance; }

/* ---------- 04 Courses ---------- */
.lb-courses { background: #F6F1E9; padding: clamp(40px, 8vw, 80px) 24px clamp(120px, 20vw, 200px); }
.lb-courses__in { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 8vw, 80px); }
.lb-courses__h { margin: 0 auto; text-align: center; font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(34px, 8vw, 64px); line-height: 1.06; letter-spacing: -.025em; color: #221B16; max-width: 20ch; text-wrap: balance; }
.lb-courses__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(40px, 5vw, 32px); }
.lb-course { display: flex; flex-direction: column; gap: 24px; text-decoration: none; color: #221B16; }
.lb-course__art { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 999px 999px 20px 20px; overflow: hidden; background: #E7DDCD; box-shadow: 0 30px 60px -30px rgba(120, 70, 30, .4); }
.lb-course__text { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 0 8px; }
.lb-course__title { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(28px, 6.6vw, 34px); line-height: 1.1; letter-spacing: -.015em; }
.lb-course__line { font-size: 17px; line-height: 1.5; color: #3E342C; max-width: 24em; text-wrap: pretty; }
.lb-course__go { margin-top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #C9B79F; display: flex; align-items: center; justify-content: center; color: #A4552F; font-size: 18px; transition: background .3s, color .3s, border-color .3s; }
.lb-course:hover .lb-course__go { background: #221B16; border-color: #221B16; color: #F6F1E9; }

/* ---------- 05 Different ---------- */
.lb-diff { background: linear-gradient(180deg, #F6F1E9 0%, #F1EBE1 100%); padding: 0 24px clamp(120px, 20vw, 200px); }
.lb-diff__in { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 8vw, 72px); }
.lb-diff__copy { display: flex; flex-direction: column; gap: 28px; align-items: center; text-align: center; }
.lb-diff__h { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(32px, 7.6vw, 60px); line-height: 1.1; letter-spacing: -.02em; color: #221B16; max-width: 24ch; text-wrap: balance; }
.lb-body { font-size: 18px; line-height: 1.65; max-width: 34em; text-wrap: pretty; }
.lb-diff__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.lb-diff__img { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; }
.lb-diff__img--same { background: #DCD6CE; }
.lb-diff__img--own { background: #EBD3BA; }

/* ---------- 06 Community ---------- */
.lb-comm { position: relative; background: linear-gradient(180deg, #F1EBE1 0%, #3E342C 18%, #221B16 40%); color: #F6F1E9; padding: clamp(120px, 22vw, 220px) 24px clamp(120px, 20vw, 200px); }
.lb-comm__in { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(48px, 8vw, 80px); }
.lb-comm__img { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px; border-radius: 28px; overflow: hidden; background: #3E342C; }
.lb-comm__glow { position: absolute; inset: 0; background: radial-gradient(90% 70% at 70% 20%, rgba(224, 160, 117, .25), rgba(34, 27, 22, 0) 60%); pointer-events: none; z-index: 1; }
/* the HumanIA film: a large play button and a live-text title over the still;
   plays in place, whole */
.lb-film-btn {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 16px; border: none; margin: 0; cursor: pointer; font: inherit; color: #F6F1E9;
  background: radial-gradient(ellipse 60% 55% at 50% 52%, rgba(34, 27, 22, .5) 0%, rgba(34, 27, 22, .22) 55%, rgba(34, 27, 22, 0) 100%);
}
.lb-film-btn .lb-play { position: static; transform: none; }
.lb-film-btn:hover .lb-play { transform: scale(1.06); }
.lb-film-btn:focus-visible { outline: 3px solid #F6F1E9; outline-offset: -8px; border-radius: 28px; }
.lb-film-btn__text { text-align: center; text-shadow: 0 1px 18px rgba(34, 27, 22, .55); line-height: 1.3; }
.lb-film-btn__title { font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: clamp(24px, 4.4vw, 36px); letter-spacing: -.01em; }
.lb-film-btn__dot { opacity: .7; margin: 0 .2em; font-size: clamp(18px, 3vw, 26px); }
.lb-film-btn__sub { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 500; font-size: clamp(15px, 2.2vw, 18px); letter-spacing: .02em; white-space: nowrap; }
.lb-play--film { width: 96px; height: 96px; }
/* narrow screens: the title's two parts on two lines, without a dangling dot */
@media (max-width: 600px) {
  .lb-film-btn__title, .lb-film-btn__sub { display: block; }
  .lb-film-btn__dot { display: none; }
  .lb-film-btn__sub { margin-top: 4px; }
}
.lb-play--film .lb-play__tri { border-top-width: 13px; border-bottom-width: 13px; border-left-width: 22px; margin-left: 6px; }
.lb-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #221B16; z-index: 4; }
.lb-comm__img.is-playing .lb-comm__glow { display: none; }
.lb-comm__copy { display: flex; flex-direction: column; gap: 28px; align-items: center; text-align: center; }
.lb-comm__h { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(34px, 8.4vw, 72px); line-height: 1.06; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; color: #F6F1E9; }
.lb-comm__h em { font-style: italic; color: #E0A075; }
.lb-comm .lb-body { color: #E7DDCD; }

/* ---------- 07 People ---------- */
.lb-people { background: linear-gradient(180deg, #221B16 0%, #3E342C 12%, #F1EBE1 34%, #F6F1E9 100%); padding: clamp(140px, 24vw, 240px) 24px clamp(100px, 16vw, 160px); }
.lb-people__in { max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 64px); }
.lb-people__h { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(28px, 6.4vw, 44px); letter-spacing: -.015em; color: #221B16; }
.lb-people__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 48px 40px; width: 100%; }
.lb-person { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lb-person__face { position: relative; width: 168px; height: 168px; flex: none; border-radius: 50%; overflow: hidden; background: #E7DDCD; box-shadow: 0 0 0 6px #F6F1E9, 0 0 0 7px #E0C7A8; }
.lb-person__p { font-size: 16px; line-height: 1.6; max-width: 22em; text-wrap: pretty; }
/* the fuller biography — closed by default. The three cards share rows (photo, text,
   More), so closed they are the same height with the More buttons in line, and
   opening one lengthens only that card. */
@supports (grid-template-rows: subgrid) {
  .lb-person { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 18px; justify-items: center; align-content: start; }
  .lb-person__p { align-self: start; }
}
.lb-more-bio { align-self: start; width: 100%; max-width: 24em; border-top: 1px solid #E0C7A8; }
.lb-more-bio__sum {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px; cursor: pointer;
  font-family: Outfit, system-ui, sans-serif; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #3E342C;
}
.lb-more-bio__sum::-webkit-details-marker { display: none; }
.lb-more-bio__sum:hover { color: #A4552F; }
.lb-more-bio__plus { font-size: 1.4rem; font-weight: 200; line-height: 1; color: #A4552F; transition: transform .3s; }
.lb-more-bio[open] .lb-more-bio__plus { transform: rotate(45deg); }
.lb-more-bio__body { text-align: left; padding-bottom: 18px; }
.lb-more-bio__body p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: #3E342C; }
.lb-more-bio__body p:first-child { margin-top: 0; }
.lb-person__name { display: block; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 24px; color: #221B16; margin-bottom: 6px; }
.lb-more { font-size: 16px; font-weight: 500; text-decoration: none; padding: 12px 0; color: #A4552F; }
.lb-more:hover { color: #221B16; }

/* ---------- 08 Offer ---------- */
.lb-offer { position: relative; background: radial-gradient(80% 60% at 50% 55%, #F4C9A2 0%, #F3DCC4 40%, #F6F1E9 80%); padding: clamp(100px, 18vw, 180px) 20px; }
.lb-offer__in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(40px, 7vw, 64px); text-align: center; }
.lb-offer__h { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(32px, 7.6vw, 58px); line-height: 1.08; letter-spacing: -.02em; color: #221B16; max-width: 17ch; text-wrap: balance; }
.lb-ticket { width: 100%; border-radius: 28px; padding: 1px; background: linear-gradient(135deg, #FFFFFF 0%, #E0A075 45%, #FFFFFF 100%); box-shadow: 0 50px 90px -40px rgba(140, 70, 30, .5); }
.lb-ticket__in { border-radius: 27px; background: rgba(250, 246, 240, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: clamp(36px, 7vw, 56px) clamp(24px, 6vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lb-ticket .lb-mark { font-size: 22px; }
.lb-ticket__price { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(24px, 5.6vw, 34px); line-height: 1.25; color: #221B16; text-wrap: balance; }
.lb-ticket__first { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(22px, 5vw, 28px); line-height: 1.3; color: #A4552F; }
.lb-ticket__rule { display: block; width: 64px; height: 1px; background: #D9B48E; margin: 6px 0; }
.lb-limit { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.lb-limit__count { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px; }
.lb-limit__text { font-size: 17px; color: #3E342C; }
.lb-limit__bar { width: 100%; height: 3px; border-radius: 999px; background: #E7DDCD; overflow: hidden; }
.lb-limit__fill { height: 100%; width: 0; background: linear-gradient(90deg, #E0A075, #A4552F); }

/* ---------- 09 Join ---------- */
.lb-join { position: relative; background: #F6F1E9; padding: 0 0 clamp(120px, 18vw, 180px); }
.lb-join__band { position: relative; width: 100%; aspect-ratio: 21 / 9; min-height: 280px; max-height: 560px; background: #EBDCC9; }
.lb-join__fade { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, rgba(246, 241, 233, 0), #F6F1E9); pointer-events: none; }
.lb-join__in { max-width: 900px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.lb-join__h { font-family: Newsreader, Georgia, serif; font-weight: 300; font-size: clamp(40px, 9.6vw, 84px); line-height: 1.02; letter-spacing: -.03em; color: #221B16; text-wrap: balance; }
.lb-btn--big { display: flex; width: 100%; max-width: 380px; min-height: 62px; padding: 0 24px; font-size: 18px; }

/* ---------- the fixed "Claim your place" bar, phones only ---------- */
.lb-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; padding: 8px; border-radius: 999px;
  background: rgba(246, 241, 233, .72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px -10px rgba(60, 35, 15, .35);
  transform: translateY(160%); visibility: hidden;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .4s;
}
.lb-bar.is-on { transform: translateY(0); visibility: visible; transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.lb-bar .lb-btn { display: flex; width: 100%; min-height: 48px; font-size: 16px; padding: 0 20px; }
@media (min-width: 821px) { .lb-bar { display: none; } }

/* ---------- motion: reveal as each block arrives ---------- */
.lb-motion [data-lb-reveal].lb-hidden { opacity: 0; transform: translateY(28px); }
.lb-motion [data-lb-reveal] { transition: opacity 1.2s cubic-bezier(.2, .7, .2, 1), transform 1.2s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  body.lb *, body.lb *::before, body.lb *::after { transition: none !important; animation: none !important; }
  .lb-motion [data-lb-reveal].lb-hidden { opacity: 1; transform: none; }
}

/* skip link: off-screen until focused */
.lb-skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: #221B16; color: #F6F1E9; font: 500 15px/1 'Hanken Grotesk', system-ui, sans-serif; text-decoration: none; }
.lb-skip:focus { top: 12px; }