/* Figma LBK 2026: lp-01-a through lp-01-i. The home supplies the fixed
   gradients, glass, grain, popup controls, menu and text animation. */
@font-face{font-family:'Big Shoulders';src:url('/assets/fonts/BigShoulders-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:block}
@font-face{font-family:'PP Neue Machina';src:url('/assets/fonts/PPNeueMachina-PlainRegular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Monument Extended';src:url('/assets/fonts/PPMonumentExtended-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Supply Sans';src:url('/assets/fonts/PPSupplySans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
.aulao{--copy-size:calc(24 * var(--u))}
.aulao main{position:relative;z-index:1}
.aulao-viewport{position:fixed;top:0;left:0;width:0;height:100svh;visibility:hidden;pointer-events:none}
.aulao-scene{position:relative;display:flow-root;min-height:100svh;padding-block:calc((100svh - 1080 * var(--u))/2);color:var(--sand)}
.aulao-scene[data-warm]{color:var(--ink)}
.scene-canvas{position:relative;width:calc(1920 * var(--u));height:calc(1080 * var(--u));margin-inline:auto}
.aulao .block-title{position:relative;isolation:isolate;width:fit-content;max-width:100%;font:800 calc(63.857 * var(--u))/1.16667 var(--tall);letter-spacing:-.02em;color:var(--ink);--band:var(--sand)}
.aulao .block-title:not([data-typed]){color:var(--sand)}
.aulao .type-band,.aulao .type-tail{height:1.11em!important;transform:translateY(-.05em)}
.aulao .block-copy{font:500 var(--copy-size)/1.5 var(--body);letter-spacing:0;color:inherit}
.aulao .block-copy p+p{margin-top:1.5em}
.aulao strong{font-weight:800}
.aulao .front-copy{margin:0}
.aulao .front-copy mark{--hl:1;color:var(--sand);font-weight:800;background:linear-gradient(#006453,#006453) 0 0/calc(var(--hl) * 100%) 100% no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .07em}
.aulao .button{min-height:calc(50 * var(--u));padding:calc(9 * var(--u)) calc(24 * var(--u));border-radius:0;border:0;font:700 calc(20.524 * var(--u))/1.4 var(--label);letter-spacing:-.01em}
.aulao .brand-logo{width:calc(196.389 * var(--u));min-width:0}
.aulao .menu-toggle,.aulao .menu-close{right:calc(30 * var(--u));top:calc(30 * var(--u));width:calc(42.545 * var(--u));height:calc(36 * var(--u));padding:0;margin:0;gap:calc(8.18 * var(--u))}
.aulao .menu-toggle::after,.aulao .menu-close::after{content:'';position:absolute;inset:-8px}
.aulao .menu-toggle span,.aulao .menu-close span{width:100%;height:calc(6.545 * var(--u));flex-shrink:0}
.aulao .header-enrollment{position:absolute;right:calc(88.545 * var(--u));top:calc(30 * var(--u));width:calc(156 * var(--u));height:calc(36 * var(--u));min-height:0;padding:0;font-size:calc(18 * var(--u));background:color-mix(in srgb,var(--sand) var(--warm-mix),var(--orange));border:1px solid color-mix(in srgb,var(--ink) var(--warm-mix),transparent)}
.aulao .header-enrollment[hidden]{display:none}
.aulao .page-nav{right:calc(30 * var(--u))}
.aulao .page-nav button{width:calc(14 * var(--u));height:calc(18 * var(--u));padding-bottom:calc(4 * var(--u))}
.aulao .page-nav button:last-child{height:calc(14 * var(--u));padding:0}
.aulao .social{right:calc(30 * var(--u));left:auto;bottom:calc(30 * var(--u));gap:calc(15.46 * var(--u))}
.aulao .social .icon{width:calc(23.6 * var(--u));height:calc(23.6 * var(--u))}
.countdown{position:absolute;left:calc(30 * var(--u));bottom:calc(30 * var(--u));font:400 calc(18 * var(--u))/.85 var(--wide);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.countdown span{display:inline-block;font-weight:700;min-width:1.65em;text-align:right}
/* Preserve the exported SVG geometry. Perspective belongs only to the
   explicitly interactive hero, never to the popup media. */
.aulao-hero-copy{position:absolute;left:calc(303 * var(--u));top:calc(268 * var(--u));width:calc(524.384 * var(--u))}
.aulao-logo{position:relative;width:100%;line-height:0}
.aulao-logo img{display:block;width:100%;height:auto}
.hero-copy-line{position:relative;margin-top:calc(30.073 * var(--u));width:calc(498 * var(--u));font:400 var(--copy-size)/1.3 var(--body);letter-spacing:-.01em}
.hero-date{margin-top:calc(19 * var(--u));font-size:calc(18 * var(--u));line-height:1.3;font-weight:800;text-decoration:underline;text-underline-offset:.1em}
.hero-actions{margin-top:calc(30 * var(--u))}
.layer-block{position:absolute;left:calc(931 * var(--u));top:calc(289 * var(--u));width:calc(739 * var(--u));height:calc(502 * var(--u));padding:0;border:0;background:transparent;cursor:pointer;touch-action:pan-y}
.layer-fallback{position:absolute;inset:0;display:block;pointer-events:none;perspective:calc(2400 * var(--u))}
.layer-canvas{position:absolute;left:calc(-100 * var(--u));top:calc(-100 * var(--u));width:calc(939 * var(--u));height:calc(702 * var(--u));display:block;pointer-events:none}
.layer-block[data-renderer=webgl] .layer-fallback{visibility:hidden}
html[data-hero-handoff]{transition:none}
@media(scripting:enabled){html:not([data-ready]) :is(.aulao-hero-copy,.layer-block){visibility:hidden}}
.project-layer.popup{--pu:var(--u);position:absolute;left:calc(-59.58 * var(--u));top:calc(35.589 * var(--u));display:block;width:calc(408 * var(--u));height:calc(430.822 * var(--u));border-width:calc(2.282 * var(--u));transform:matrix(.70710678,.40824829,0,.81649658,0,0);z-index:4}
.project-layer.popup:nth-child(2){left:calc(101.07 * var(--u));z-index:3}
.project-layer.popup:nth-child(3){left:calc(245.66 * var(--u));z-index:2}
.project-layer.popup:nth-child(4){left:calc(390.24 * var(--u));top:calc(36.929 * var(--u));z-index:1}
.project-layer.popup::before{height:calc(20.54 * var(--u));border-bottom-width:calc(2.282 * var(--u))}
.project-layer .layer-caption{position:absolute;left:calc(5 * var(--u));top:calc(3 * var(--u));font:400 calc(13.693 * var(--u))/1 'PP Supply Sans',var(--sans);color:#006453}
.project-layer img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.project-intro{position:absolute;left:calc(271 * var(--u));top:calc(160 * var(--u));width:calc(556.469 * var(--u))}
.aulao #apresentacao-title{color:var(--sand);--band:var(--ink)}
.project-intro .block-copy{width:calc(520 * var(--u));margin-top:calc(29 * var(--u))}
.aulao :is(.project-intro,.speaker-copy,.audience-copy) strong{color:inherit;background:none;font-weight:800;text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.1em}
.project-intro .block-title,.audience-copy .block-title,.speaker-copy .block-title,.outcomes-intro .block-title{margin-left:calc(3 * var(--u))}
.media-figure{position:absolute;margin:0}
.aulao-popup.popup{position:relative;inset:auto;width:100%;height:100%;border-width:calc(2.282 * var(--u));overflow:hidden}
.aulao-popup.popup::before{height:calc(20.54 * var(--u));border-bottom-width:calc(2.282 * var(--u));background-position:right calc(-2.282 * var(--u)) top calc(-2.282 * var(--u));background-size:calc(45 * var(--u)) calc(25.105 * var(--u))}
.popup-caption{position:absolute;left:calc(5 * var(--u));top:calc(3 * var(--u));font:400 calc(13.693 * var(--u))/1 'PP Supply Sans',var(--sans);color:#006453}
.aulao-popup :is(img,video){display:block;width:100%;height:calc(100% - 22.822 * var(--u));object-fit:cover}
.project-media{display:flow-root}
.project-code{left:calc(1307 * var(--u));top:calc(186 * var(--u));width:calc(466 * var(--u));height:calc(469 * var(--u));z-index:1}
.site-preview{left:calc(898 * var(--u));top:calc(287 * var(--u));width:calc(790.796 * var(--u));height:calc(469 * var(--u));z-index:2}
.site-link{margin-top:calc(25 * var(--u))}
.aulao .statement-title{position:absolute;left:calc(531 * var(--u));top:calc(186.32 * var(--u));width:calc(848.153 * var(--u));font-size:calc(97.329 * var(--u));text-align:center}
.statement-copy{position:absolute;left:calc(519.13 * var(--u));top:calc(451 * var(--u));width:calc(875.492 * var(--u));text-align:center}
/* Page d: the composition stays in place while the complete reading column
   passes through the home's top and bottom glass. */
.program-section{padding:0}
.program-stage,.audience-stage{position:sticky;top:0;width:calc(1920 * var(--u));height:100svh;margin-inline:auto;pointer-events:none}
.program-art,.audience-art{position:absolute;top:calc((100svh - 1080 * var(--u))/2);left:0;width:100%;height:calc(1080 * var(--u))}
.program-back{left:calc(91 * var(--u));top:calc(178 * var(--u));width:calc(466 * var(--u));height:calc(469 * var(--u))}
.program-middle{left:calc(172 * var(--u));top:calc(318 * var(--u));width:calc(790.796 * var(--u));height:calc(469 * var(--u))}
.program-front{left:calc(417 * var(--u));top:calc(478 * var(--u));width:calc(466 * var(--u));height:calc(469 * var(--u))}
.aulao #programa-title{position:absolute;z-index:3;left:calc(363 * var(--u));top:calc(293 * var(--u));white-space:nowrap}
/* The first topic settles below the 12svh glass, with room to read its title. */
.program-list{position:relative;width:calc(520 * var(--u));margin-left:calc(50% + 140 * var(--u));margin-top:calc(-100svh + max(18svh,(100svh - 1080 * var(--u))/2 + 190 * var(--u)));padding-bottom:50svh}
.program-item+.program-item{margin-top:calc(45 * var(--u))}
.program-item h3{margin:0 0 calc(15 * var(--u));font:800 calc(27.932 * var(--u))/1.5 var(--body);text-decoration:underline}
/* Pages e and f share one reading span and one stationary video window. */
.audience-section{padding:0}
.audience-reading{position:relative;width:calc(522 * var(--u));margin-left:calc(50% - 570 * var(--u));margin-top:calc(-100svh + (100svh - 1080 * var(--u))/2 + 204 * var(--u));padding-bottom:50svh}
.audience-copy{position:relative;width:100%}
.audience-copy .block-copy{margin-top:calc(20 * var(--u));font-weight:400}
.audience-media{left:calc(1042 * var(--u));top:calc(302 * var(--u));width:calc(466 * var(--u));height:calc(469 * var(--u))}
.outcomes-copy{margin-top:50svh;color:var(--sand)}
.outcomes-intro{position:relative;width:100%}
.aulao .outcomes-intro p{width:100%;margin-top:calc(31 * var(--u));font-weight:400;text-decoration:underline;color:var(--sand)}
.outcomes-list{position:relative;width:100%;margin:calc(36 * var(--u)) 0 0;padding:0;list-style:none;font:800 var(--copy-size)/1.5 var(--body);text-transform:uppercase;color:var(--sand)}
.outcomes-list li{position:relative;margin-bottom:calc(36 * var(--u))}
.outcomes-list li::before{content:'→ ';white-space:pre}
.outcomes-list li:last-child{margin-bottom:0}
.speaker-copy{position:absolute;left:calc(408 * var(--u));top:calc(203 * var(--u));width:calc(551 * var(--u))}
.speaker-copy .block-copy{margin-top:calc(44 * var(--u));font-weight:400}
.portrait-figure{left:calc(1078 * var(--u));top:calc(205 * var(--u));width:calc(466 * var(--u));height:calc(577 * var(--u))}
.portrait-figure img{object-position:center 24%}
.registration-layout{position:absolute;left:calc(601 * var(--u));top:calc(265 * var(--u));width:calc(748 * var(--u))}
.aulao .registration-layout .block-title{font-size:calc(97.329 * var(--u));margin-left:calc(8 * var(--u))}
.aulao .event-details{font-size:calc(27.932 * var(--u));line-height:2;text-transform:uppercase;margin:calc(26 * var(--u)) 0 0}
.event-details>div{display:flex;flex-wrap:wrap;column-gap:.25em}
.event-details dt{font-weight:400}
.event-details dd{margin:0;font-weight:800}
.aulao .recording-note{margin-top:calc(16 * var(--u))}
.registration-layout .button{margin-top:calc(30 * var(--u))}
.faq-layout{position:relative;display:grid;grid-template-columns:calc(518 * var(--u)) calc(614 * var(--u));column-gap:calc(127 * var(--u));width:calc(1259 * var(--u));margin:calc(283 * var(--u)) auto calc(220 * var(--u))}
.aulao #duvidas-title{font-size:calc(97.329 * var(--u));margin:calc(11 * var(--u)) 0 0 calc(16.5 * var(--u));max-width:calc(518 * var(--u));height:fit-content}
.aulao .faq-list{font-size:calc(27.932 * var(--u))}
.faq-list details{border-bottom:calc(2 * var(--u)) solid var(--ink)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:calc(60 * var(--u));list-style:none;cursor:pointer;padding:calc(31 * var(--u)) 0;font-weight:800}
.faq-list details:first-child summary{padding-top:0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';font-size:.9em;flex-shrink:0}
.faq-list details[open] summary::after{content:'−'}
.faq-answer{padding:0 0 calc(30 * var(--u));font-size:var(--copy-size)}
.skip-link{position:fixed;left:20px;top:20px;z-index:30;transform:translateY(-200%);clip-path:inset(50%);background:var(--sand);color:var(--ink);padding:12px 18px}
.skip-link:focus{transform:none;clip-path:none}
body[data-motion=paused] .grain{animation-play-state:paused}
@media(max-width:900px),(max-aspect-ratio:1/1){
  .aulao{--pu:max(.65px,var(--v));--copy-size:18px}
  .aulao .brand{left:20px;top:22px}
  .aulao .brand-logo{width:132px}
  .aulao .menu-toggle,.aulao .menu-close{right:20px;top:22px;width:30px;height:30px;gap:6px}
  .aulao .menu-toggle span,.aulao .menu-close span{height:6px}
  .aulao .header-enrollment{right:64px;top:22px;width:120px;height:30px;font-size:14px}
  .aulao .page-nav{right:13px}
  .aulao .page-nav button{width:6px;height:10px;padding-bottom:4px}
  .aulao .page-nav button:last-child{height:6px}
  .aulao .social{right:20px;left:auto;bottom:20px;gap:12px}
  .aulao .social .icon{width:15px;height:15px}
  .countdown{left:20px;bottom:20px;font-size:11.25px}
  .aulao-scene{padding:110px 0;min-height:100svh}
  .scene-canvas{display:flex;flex-direction:column;gap:30px;position:relative;width:calc(100% - 70px);max-width:580px;height:auto;min-height:0;margin:0 auto}
  .aulao .block-title{font-size:clamp(38px,8vw,58px);line-height:1.16}
  .aulao .block-copy p+p{margin-top:1.5em}
  .aulao .button{min-height:44px;padding:9px 20px;font-size:18px}
  .aulao .header-enrollment{min-height:0;padding:0;font-size:14px}
  .hero-section{display:flex;align-items:center;min-height:100svh;padding-top:max(88px,calc(env(safe-area-inset-top) + 72px));padding-bottom:64px}
  .hero-section .scene-canvas{gap:18px}
  .aulao-hero-copy{position:relative;inset:auto;width:100%}
  .aulao-logo{width:min(80%,312px)}
  .hero-copy-line{width:100%;margin-top:20px}
  .hero-date{font-size:15px;margin-top:16px}
  .hero-actions{margin-top:16px}
  .layer-block{--u:min(calc((100vw - 90px)/739),.55px,var(--hero-layer-unit,.55px));position:relative;inset:auto;width:calc(739 * var(--u));height:calc(502 * var(--u));margin:0 auto;order:-1}
  .project-intro,.audience-copy,.speaker-copy,.outcomes-intro,.registration-layout{position:relative;inset:auto;width:100%}
  .project-intro .block-copy,.audience-copy .block-copy,.speaker-copy .block-copy{width:100%;margin-top:26px}
  .media-figure{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1/1}
  .site-preview,.program-middle{aspect-ratio:1.69}
  /* Mobile compositions intentionally extend past the right viewport edge.
     The page clips that edge; the reading column stays in front of the art. */
  #apresentacao{padding-top:clamp(60px,15.4vw,100px)}
  #apresentacao .scene-canvas{gap:0}
  .project-intro{z-index:3;margin-top:calc(-1 * min(20vw,100px))}
  .project-media{position:relative;left:calc((100% - 100vw)/2);width:100vw;height:calc(57.53125vw + 15px);order:-1;z-index:0;pointer-events:none}
  .project-media .project-code{position:absolute;left:64vw;right:auto;top:0;width:53vw;height:auto;aspect-ratio:auto}
  .project-media .site-preview{position:absolute;left:21vw;right:auto;top:10vw;width:84.5vw;height:auto;aspect-ratio:auto;margin:0}
  .project-media .aulao-popup{height:auto}
  .project-media .aulao-popup video{height:auto}
  .aulao-popup.popup{--u:.85px;border-width:1px}
  .aulao-popup.popup::before{height:12px;border-bottom-width:1px;background-position:right -1px top -1px;background-size:28px 14px}
  .popup-caption{top:2px;left:4px;font-size:8px}
  .aulao-popup :is(img,video){height:calc(100% - 13px)}
  .site-link{margin-top:24px}
  .aulao .statement-title{position:relative;inset:auto;width:100%;font-size:clamp(40px,8vw,60px);text-align:left}
  .aulao .statement-copy{position:relative;inset:auto;width:100%;text-align:left}
  .program-section{padding-top:60px}
  .program-stage{position:relative;top:auto;width:100%;height:auto;margin:auto}
  .program-art{position:relative;inset:auto;width:100%;height:auto;padding-top:calc(54.45625vw + 15px)}
  .program-back{position:absolute;left:7vw;top:8vw;width:43.3vw;aspect-ratio:auto;z-index:1}
  .program-middle{position:absolute;left:14.6vw;top:21vw;width:73.7vw;aspect-ratio:auto;z-index:2}
  .program-front{position:absolute;left:64vw;top:0;width:43.3vw;aspect-ratio:auto;z-index:0}
  .program-art .aulao-popup,.program-art video{height:auto}
  .aulao #programa-title{position:relative;inset:auto;margin-left:max(35px,calc((100vw - 580px)/2));max-width:min(calc(100% - 70px),580px);font-size:clamp(38px,8vw,58px);white-space:normal}
  .program-list{width:calc(100% - 70px);max-width:580px;margin:26px auto 0;padding:0}
  .program-item+.program-item{margin-top:36px}
  .program-item h3{font-size:20px;line-height:1.5;margin:0 0 12px}
  .audience-section{display:flex;flex-direction:column;gap:35px;padding:110px 0}
  .audience-reading{display:contents}
  .audience-stage,.audience-copy,.outcomes-copy{width:calc(100% - 70px);max-width:580px;margin:0 auto}
  .audience-copy{order:0}
  .audience-stage{position:relative;top:auto;height:auto;order:1}
  .audience-art{position:relative;inset:auto;height:auto}
  .audience-media{aspect-ratio:auto}
  .audience-media .aulao-popup,.audience-media video{height:auto}
  .outcomes-copy{order:2;margin-top:50px}
  .aulao .outcomes-intro p{margin-top:24px}
  .outcomes-list{margin-top:30px}
  .outcomes-list li{margin-bottom:28px}
  #leo{padding-top:clamp(72px,20vw,130px)}
  #leo .scene-canvas{display:block}
  .speaker-copy{padding-top:30vw;z-index:2}
  .portrait-figure{position:absolute;left:calc(40vw - (100vw - 100%)/2);top:0;width:70vw;aspect-ratio:466/577;z-index:0;pointer-events:none}
  .portrait-figure .aulao-popup::after{content:'';position:absolute;inset:13px 0 0;background:linear-gradient(transparent 22%,rgb(0 32 28 / .78) 48%,rgb(0 32 28 / .88));pointer-events:none}
  .aulao .registration-layout .block-title{font-size:clamp(44px,9vw,66px)}
  .aulao .event-details{font-size:18px;line-height:1.6;margin-top:30px}
  .event-details>div{margin-bottom:20px}
  .aulao .recording-note{margin-top:26px}
  .registration-layout .button{margin-top:28px}
  .faq-layout{display:block;width:calc(100% - 70px);max-width:580px;margin:0 auto}
  .aulao #duvidas-title{max-width:100%;font-size:clamp(44px,9vw,66px);margin:0 0 40px}
  .aulao .faq-list{font-size:18px}
  .faq-list details{border-bottom-width:1px}
  .faq-list summary{gap:24px;padding:24px 0}
  .faq-answer{padding:0 0 24px}
}
@media(max-width:360px){
  .hero-section .scene-canvas{gap:16px}
  .hero-copy-line{margin-top:18px}
  .hero-date,.hero-actions{margin-top:14px}
  .aulao .brand-logo{width:110px}
  .aulao .header-enrollment{width:108px;font-size:13px}
  .aulao .social{gap:10px}
  .aulao .social .icon{width:12px;height:12px}
  .countdown{font-size:10px}
}
@media(max-width:360px) and (max-height:620px){
  .hero-section{padding-top:72px;padding-bottom:48px}
  .hero-section .scene-canvas{gap:12px}
  .hero-copy-line{margin-top:12px}
  .hero-date,.hero-actions{margin-top:10px}
}
@media(scripting:none){
  .aulao .menu-toggle,.aulao .countdown{display:none}
  .aulao .aulao-scene[data-warm]{color:var(--sand)}
  .aulao-scene+.aulao-scene{margin-top:100svh}
}
