/* Generated by scripts/build-site-css.mjs. Do not edit this bundle directly. */
/* ===== static/css/main.css ===== */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}input:where([type=checkbox]),input:where([type=radio]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow:0 0 #0000}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}input:where([type=checkbox]):checked,input:where([type=radio]):checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=checkbox]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active) {input:where([type=radio]):checked{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{border-color:transparent;background-color:currentColor}input:where([type=checkbox]):indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:50%;background-repeat:no-repeat}@media (forced-colors:active) {input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{border-color:transparent;background-color:currentColor}input:where([type=file]){background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}[dir=rtl]{font-family:Noto Sans Arabic,Inter,sans-serif}[dir=rtl] .font-headline{font-family:Noto Sans Arabic,"Noto Serif",serif}[dir=rtl] .font-label{font-family:Noto Sans Arabic,Plus Jakarta Sans,sans-serif}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-3{left:.75rem;right:.75rem}.-bottom-10{bottom:-2.5rem}.-left-\[2\.65rem\]{left:-2.65rem}.-right-10{right:-2.5rem}.bottom-0{bottom:0}.bottom-10{bottom:2.5rem}.bottom-3{bottom:.75rem}.end-0{inset-inline-end:0}.end-10{inset-inline-end:2.5rem}.left-0{left:0}.left-4{left:1rem}.right-0{right:0}.right-3{right:.75rem}.right-4{right:1rem}.start-10{inset-inline-start:2.5rem}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-10{top:2.5rem}.top-3{top:.75rem}.top-32{top:8rem}.top-4{top:1rem}.top-full{top:100%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[110\]{z-index:110}.z-\[1\]{z-index:1}.z-\[90\]{z-index:90}.-m-1{margin:-.25rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:3rem;margin-bottom:3rem}.-ml-1{margin-left:-.25rem}.-mt-4{margin-top:-1rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-11{margin-left:2.75rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.h-0\.5{height:.125rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-56{height:14rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.max-h-\[360px\]{max-height:360px}.max-h-\[75vh\]{max-height:75vh}.max-h-\[85vh\]{max-height:85vh}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[160px\]{min-width:160px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[90vw\]{max-width:90vw}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.max-w-screen-2xl{max-width:1536px}.max-w-screen-xl{max-width:1280px}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.scroll-mt-24{scroll-margin-top:6rem}.list-none{list-style-type:none}.columns-1{-moz-columns:1;column-count:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2.5rem*var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-16>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(4rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(4rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-r-xl{border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-dashed{border-style:dashed}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-200\/40{border-color:hsla(48,97%,77%,.4)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-green-200\/60{border-color:rgba(187,247,208,.6)}.border-on-surface\/10{border-color:rgba(28,27,27,.1)}.border-outline-variant\/10{border-color:hsla(142,9%,77%,.1)}.border-outline-variant\/20{border-color:hsla(142,9%,77%,.2)}.border-outline-variant\/30{border-color:hsla(142,9%,77%,.3)}.border-outline-variant\/40{border-color:hsla(142,9%,77%,.4)}.border-outline-variant\/60{border-color:hsla(142,9%,77%,.6)}.border-primary{--tw-border-opacity:1;border-color:rgb(0 75 56/var(--tw-border-opacity,1))}.border-primary\/15{border-color:rgba(0,75,56,.15)}.border-primary\/20{border-color:rgba(0,75,56,.2)}.border-primary\/30{border-color:rgba(0,75,56,.3)}.border-primary\/40{border-color:rgba(0,75,56,.4)}.border-red-200\/60{border-color:hsla(0,96%,89%,.6)}.border-surface{--tw-border-opacity:1;border-color:rgb(252 249 248/var(--tw-border-opacity,1))}.border-surface-container-highest{--tw-border-opacity:1;border-color:rgb(229 226 225/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-l-outline-variant{--tw-border-opacity:1;border-left-color:rgb(190 201 194/var(--tw-border-opacity,1))}.border-l-outline-variant\/20{border-left-color:hsla(142,9%,77%,.2)}.border-l-primary{--tw-border-opacity:1;border-left-color:rgb(0 75 56/var(--tw-border-opacity,1))}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-50\/60{background-color:rgba(255,251,235,.6)}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-black\/90{background-color:rgba(0,0,0,.9)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-50\/70{background-color:rgba(240,253,244,.7)}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-highlight\/30{background-color:rgba(249,196,228,.3)}.bg-outline-variant\/20{background-color:hsla(142,9%,77%,.2)}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 75 56/var(--tw-bg-opacity,1))}.bg-primary\/10{background-color:rgba(0,75,56,.1)}.bg-primary\/5{background-color:rgba(0,75,56,.05)}.bg-primary\/60{background-color:rgba(0,75,56,.6)}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50\/60{background-color:hsla(0,86%,97%,.6)}.bg-red-50\/70{background-color:hsla(0,86%,97%,.7)}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-secondary\/10{background-color:rgba(157,66,40,.1)}.bg-surface{--tw-bg-opacity:1;background-color:rgb(252 249 248/var(--tw-bg-opacity,1))}.bg-surface-container{--tw-bg-opacity:1;background-color:rgb(240 237 237/var(--tw-bg-opacity,1))}.bg-surface-container-high{--tw-bg-opacity:1;background-color:rgb(234 231 231/var(--tw-bg-opacity,1))}.bg-surface-container-highest{--tw-bg-opacity:1;background-color:rgb(229 226 225/var(--tw-bg-opacity,1))}.bg-surface-container-highest\/50{background-color:hsla(15,7%,89%,.5)}.bg-surface-container-highest\/60{background-color:hsla(15,7%,89%,.6)}.bg-surface-container-highest\/70{background-color:hsla(15,7%,89%,.7)}.bg-surface-container-low{--tw-bg-opacity:1;background-color:rgb(246 243 242/var(--tw-bg-opacity,1))}.bg-surface-container\/80{background-color:hsla(0,9%,94%,.8)}.bg-surface-variant\/40{background-color:hsla(15,7%,89%,.4)}.bg-surface\/80{background-color:hsla(15,40%,98%,.8)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/70{background-color:hsla(0,0%,100%,.7)}.bg-white\/80{background-color:hsla(0,0%,100%,.8)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-on-background\/80{--tw-gradient-from:rgba(28,27,27,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(28,27,27,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary\/10{--tw-gradient-from:rgba(0,75,56,.1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,75,56,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-surface\/90{--tw-gradient-from:hsla(15,40%,98%,.9) var(--tw-gradient-from-position);--tw-gradient-to:hsla(15,40%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-inverse-primary\/10{--tw-gradient-to:rgba(134,214,184,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(134,214,184,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-surface\/50{--tw-gradient-to:hsla(15,40%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(15,40%,98%,.5) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-primary-fixed\/15{--tw-gradient-to:rgba(161,243,211,.15) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1{padding-bottom:.25rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pl-3{padding-left:.75rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.pt-1{padding-top:.25rem}.pt-16{padding-top:4rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-28{padding-top:7rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-body{font-family:Inter}.font-headline{font-family:Noto Serif}.font-label{font-family:Plus Jakarta Sans}.font-serif{font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.85rem\]{font-size:.85rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.1rem\]{font-size:1.1rem}.text-\[1\.2rem\]{font-size:1.2rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.text-\[20px\]{font-size:20px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-tighter{letter-spacing:-.05em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-700\/80{color:rgba(180,83,9,.8)}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-on-primary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-on-primary-container{--tw-text-opacity:1;color:rgb(143 223 193/var(--tw-text-opacity,1))}.text-on-primary-container\/60{color:rgba(143,223,193,.6)}.text-on-surface{--tw-text-opacity:1;color:rgb(28 27 27/var(--tw-text-opacity,1))}.text-on-surface-variant{--tw-text-opacity:1;color:rgb(63 73 68/var(--tw-text-opacity,1))}.text-on-surface-variant\/60{color:rgba(63,73,68,.6)}.text-on-surface-variant\/70{color:rgba(63,73,68,.7)}.text-outline{--tw-text-opacity:1;color:rgb(111 122 116/var(--tw-text-opacity,1))}.text-outline\/70{color:hsla(147,5%,46%,.7)}.text-primary{--tw-text-opacity:1;color:rgb(0 75 56/var(--tw-text-opacity,1))}.text-primary-container{--tw-text-opacity:1;color:rgb(0 101 77/var(--tw-text-opacity,1))}.text-primary\/80{color:rgba(0,75,56,.8)}.text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-red-900{--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.text-secondary{--tw-text-opacity:1;color:rgb(157 66 40/var(--tw-text-opacity,1))}.text-stone-500{--tw-text-opacity:1;color:rgb(120 113 108/var(--tw-text-opacity,1))}.text-stone-600{--tw-text-opacity:1;color:rgb(87 83 78/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/65{color:hsla(0,0%,100%,.65)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-yellow-500{--tw-text-opacity:1;color:rgb(234 179 8/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-1{text-decoration-thickness:1px}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-5{opacity:.05}.opacity-60{opacity:.6}.opacity-90{opacity:.9}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-\[0_24px_70px_-28px_rgba\(28\2c 27\2c 27\2c 0\.28\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_24px_70px_-28px_rgba\(28\2c 27\2c 27\2c 0\.28\)\]{--tw-shadow:0 24px 70px -28px rgba(28,27,27,.28);--tw-shadow-colored:0 24px 70px -28px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-blur-xl{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.selection\:bg-primary-fixed ::-moz-selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:bg-primary-fixed ::selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:text-on-primary-fixed ::-moz-selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.selection\:text-on-primary-fixed ::selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.selection\:bg-primary-fixed::-moz-selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:bg-primary-fixed::selection{--tw-bg-opacity:1;background-color:rgb(161 243 211/var(--tw-bg-opacity,1))}.selection\:text-on-primary-fixed::-moz-selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.selection\:text-on-primary-fixed::selection{--tw-text-opacity:1;color:rgb(0 33 23/var(--tw-text-opacity,1))}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1\.5:hover{--tw-translate-y:-0.375rem}.hover\:-translate-y-1\.5:hover,.hover\:scale-105:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-95:hover{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-primary\/40:hover{border-color:rgba(0,75,56,.4)}.hover\:border-secondary:hover{--tw-border-opacity:1;border-color:rgb(157 66 40/var(--tw-border-opacity,1))}.hover\:bg-primary-container:hover{--tw-bg-opacity:1;background-color:rgb(0 101 77/var(--tw-bg-opacity,1))}.hover\:bg-primary\/10:hover{background-color:rgba(0,75,56,.1)}.hover\:bg-stone-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 249/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-high:hover{--tw-bg-opacity:1;background-color:rgb(234 231 231/var(--tw-bg-opacity,1))}.hover\:bg-surface-container-highest:hover{--tw-bg-opacity:1;background-color:rgb(229 226 225/var(--tw-bg-opacity,1))}.hover\:bg-surface-container\/50:hover{background-color:hsla(0,9%,94%,.5)}.hover\:bg-white\/20:hover{background-color:hsla(0,0%,100%,.2)}.hover\:text-primary:hover{--tw-text-opacity:1;color:rgb(0 75 56/var(--tw-text-opacity,1))}.hover\:text-secondary:hover{--tw-text-opacity:1;color:rgb(157 66 40/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-primary:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(0 75 56/var(--tw-ring-opacity,1))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95}.active\:scale-95:active,.disabled\:scale-100:disabled{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:scale-100:disabled{--tw-scale-x:1;--tw-scale-y:1}.disabled\:opacity-50:disabled{opacity:.5}.group[open] .group-open\:rotate-180{--tw-rotate:180deg}.group:hover .group-hover\:translate-x-0\.5,.group[open] .group-open\:rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-primary{--tw-text-opacity:1;color:rgb(0 75 56/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width:768px){.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-4{grid-column:span 4/span 4}.md\:col-span-8{grid-column:span 8/span 8}.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:mb-14{margin-bottom:3.5rem}.md\:mb-16{margin-bottom:4rem}.md\:mb-20{margin-bottom:5rem}.md\:mb-24{margin-bottom:6rem}.md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}.md\:mt-20{margin-top:5rem}.md\:mt-3{margin-top:.75rem}.md\:mt-5{margin-top:1.25rem}.md\:block{display:block}.md\:flex{display:flex}.md\:columns-2{-moz-columns:2;column-count:2}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-12{gap:3rem}.md\:gap-16{gap:4rem}.md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:rounded-\[3rem\]{border-radius:3rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-4{padding:1rem}.md\:p-6{padding:1.5rem}.md\:p-7{padding:1.75rem}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:pb-12{padding-bottom:3rem}.md\:pb-20{padding-bottom:5rem}.md\:pb-24{padding-bottom:6rem}.md\:pb-6{padding-bottom:1.5rem}.md\:pt-20{padding-top:5rem}.md\:pt-36{padding-top:9rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-6xl{font-size:3.75rem;line-height:1}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:aspect-\[5\/4\]{aspect-ratio:5/4}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:gap-12{gap:3rem}.lg\:gap-14{gap:3.5rem}.lg\:gap-16{gap:4rem}.lg\:gap-20{gap:5rem}.lg\:gap-24{gap:6rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}.lg\:text-8xl{font-size:6rem;line-height:1}}@media (min-width:1536px){.\32xl\:inline{display:inline}}.rtl\:-left-10:where([dir=rtl],[dir=rtl] *){left:-2.5rem}.rtl\:right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\:bg-gradient-to-l:where([dir=rtl],[dir=rtl] *){background-image:linear-gradient(to left,var(--tw-gradient-stops))}.rtl\:\[transform\:scaleX\(-1\)\]:where([dir=rtl],[dir=rtl] *){transform:scaleX(-1)}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}
/* ===== static/css/redesign.css ===== */
/* ===================================================================
AUDIALA — Website redesign (aligned with mobile app)
===================================================================
Palette is straight from the mobile app's brand system:
- Cream is paper (the field everything sits on)
- Deep teal is ink (text only)
- Coral is the joy — used for italic display words, play buttons,
active states
- Sun yellow for the hand-drawn underline highlight
- Mint teal for soft secondary details
=================================================================== */
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Fraunces-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-italic-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic-ext.woff2") format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-cyrillic.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-greek.woff2") format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-vietnamese.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin-ext.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/SourceSerif4-normal-latin.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* ---- Brand palette (from the mobile app) ---- */
--cream: #FAF2E2; /* paper */
--cream-2: #F4E6C2; /* warm cream, second surface */
--cream-3: #ECE0B8;
--ink: #1D3935; /* deep teal — primary text */
--ink-2: #465C58; /* secondary text, icon strokes */
--ink-3: #7C928E; /* tertiary, muted */
--ink-4: #BBC9C5; /* hairlines, soft details */
--coral: #E85F33; /* warm orange — the brand accent */
--coral-deep: #C8451F;
--coral-soft: #F8D8C8; /* coral wash */
--sun: #F3C43D; /* golden highlight */
--sun-soft: #FBE89A;
--mint: #7FC0B6; /* soft teal accent */
--paper-deep: #131C1F; /* dark-theme paper */
/* ---- Hairlines ---- */
--line: rgba(29, 57, 53, 0.14);
--line-soft: rgba(29, 57, 53, 0.07);
/* ---- Type ---- */
--serif: "Fraunces", "Source Serif 4", Georgia, serif;
--serif-body: "Source Serif 4", "Fraunces", Georgia, serif;
--sans: "Inter", -apple-system, "Helvetica Neue", system-ui, sans-serif;
}
/* ---------- Page scoping ---------- */
.audiala-page * { box-sizing: border-box; margin: 0; padding: 0; }
.audiala-page {
font-family: var(--sans);
font-size: 15px; line-height: 1.55;
color: var(--ink);
background: var(--cream);
width: 100%;
max-width: 1280px;
/* Float the cream page as a card on the dark surround, mirroring the
design mock's `.review-page` (1280px cream card, radius 24, big soft
shadow, sitting on the dark stage). */
margin: 40px auto 80px;
border-radius: 24px;
box-shadow:
0 30px 80px -30px rgba(29, 57, 53, 0.25),
0 1px 0 rgba(29, 57, 53, 0.08);
position: relative;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
/* Surround behind the floating page — cream-3 (#ECE0B8), the deeper cream
band from the mock. `:has()` scopes it to redesign pages so unported
Tailwind pages keep their own body background. */
html:has(> body > .audiala-page),
body:has(> .audiala-page) {
background: var(--cream-3) !important;
margin: 0;
}
/* Mock was fixed-width 1280px; basic responsive scaffolding for
tablet + mobile. Per-section breakpoints added as pages are ported. */
@media (max-width: 1024px) {
.audiala-page { font-size: 14.5px; }
}
@media (max-width: 768px) {
.audiala-page { font-size: 14px; }
}
/* Edge-to-edge on phones — a floating card with margins wastes space and the
radius/shadow read as a bug at small widths. */
@media (max-width: 700px) {
.audiala-page { margin: 0 auto; border-radius: 0; box-shadow: none; }
}
.audiala-page img { display: block; max-width: 100%; }
.audiala-page a { color: inherit; text-decoration: none; }
.audiala-page button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.audiala-page p { text-wrap: pretty; }
/* ---------- Type primitives ---------- */
.f-display {
font-family: var(--serif);
font-weight: 700;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144, "SOFT" 30;
line-height: 0.95;
color: var(--ink);
}
.f-display-it {
font-family: var(--serif);
font-style: italic;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--coral);
}
.f-serif {
font-family: var(--serif-body);
font-weight: 400;
color: var(--ink);
}
.f-serif-it {
font-family: var(--serif-body);
font-style: italic;
font-weight: 400;
color: var(--ink-2);
}
.f-eyebrow {
font-family: var(--sans);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-2);
}
.f-eyebrow .sep { color: var(--ink-3); margin: 0 8px; }
.f-eyebrow .dot {
display: inline-block; width: 4px; height: 4px;
background: var(--ink-3); border-radius: 50%;
vertical-align: middle; margin: 0 10px;
transform: translateY(-2px);
}
/* Numbered section prefix "01 The set" */
.section-no {
font-family: var(--sans);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--ink-3);
vertical-align: super;
margin-right: 14px;
}
/* Coral italic display word — signature joy element */
.joy { font-family: var(--serif); font-style: italic; color: var(--coral); font-weight: 700; }
/* Hand-drawn underline highlight (sun yellow) */
.hl-under {
position: relative;
display: inline-block;
white-space: nowrap;
}
.hl-under::after {
content: "";
position: absolute;
left: -2px; right: -2px;
bottom: 0.06em;
height: 0.18em;
background: var(--sun);
border-radius: 100px;
z-index: -1;
transform: skewY(-1deg);
opacity: 0.85;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 100px;
font-family: var(--sans); font-size: 14px; font-weight: 500;
letter-spacing: -0.005em;
transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Use .audiala-page prefix to outrank `.audiala-page a { color: inherit }`
(specificity 0,1,1) and Tailwind utility classes on body. Without this,
ink/coral buttons inherit the page text color and the cream label becomes
invisible (most painfully on `.btn-ink` where bg matches the ink text). */
.audiala-page .btn-coral, .btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: var(--coral-deep); }
.audiala-page .btn-ink, .btn-ink { background: var(--ink); color: var(--cream); }
.audiala-page .btn-cream, .btn-cream { background: var(--cream); color: var(--ink); }
.btn-ghost {
background: transparent; color: var(--ink);
border: 1px solid var(--line);
}
.btn-lg { padding: 16px 26px; font-size: 14.5px; }
/* Play button — round coral disc */
.play-btn {
width: 56px; height: 56px; border-radius: 50%;
background: var(--coral); color: #fff;
display: grid; place-items: center;
font-size: 18px;
flex-shrink: 0;
transition: transform .15s ease, background .15s ease;
}
.play-btn:hover { transform: scale(1.04); background: var(--coral-deep); }
.play-btn.sm { width: 44px; height: 44px; font-size: 14px; }
.play-btn.lg { width: 72px; height: 72px; font-size: 22px; }
.audio-toggle-icon {
display: inline-grid;
place-items: center;
line-height: 0;
}
.audio-toggle-icon-pause { display: none; }
.is-audio-playing .audio-toggle-icon-play { display: none; }
.is-audio-playing .audio-toggle-icon-pause { display: inline-grid; }
.audio-preview-strip {
margin-top: 20px;
max-width: 520px;
display: grid;
gap: 10px;
}
.audio-preview-copy {
display: grid;
gap: 6px;
}
.audio-preview-copy p {
font-size: 18px;
line-height: 1.35;
color: var(--ink-2);
}
.audio-preview-progress {
width: 100%;
height: 5px;
border-radius: 999px;
overflow: hidden;
background: rgba(29, 57, 53, 0.11);
}
.audio-preview-progress span {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: var(--coral);
transition: width .12s linear;
}
.audio-preview-status {
min-height: 18px;
font-family: var(--sans);
font-size: 12px;
color: var(--ink-3);
}
.is-audio-playing .audio-preview-status { color: var(--coral); }
/* ---------- Cards ---------- */
.card {
background: var(--cream);
border-radius: 24px;
/* Strong shadow + soft outline so cards floating over hero photos
(.card.position:absolute over .ph) stay visually lifted instead of
blending into the cream-toned imagery behind. */
box-shadow:
0 1px 0 rgba(29, 57, 53, 0.08),
0 2px 6px rgba(29, 57, 53, 0.08),
0 18px 40px -16px rgba(29, 57, 53, 0.28);
}
.card-2 {
background: var(--cream-2);
border-radius: 24px;
}
.card-ink {
background: var(--ink);
color: var(--cream);
border-radius: 24px;
}
.card-tight { border-radius: 16px; }
/* ---------- Pill / chip ---------- */
.pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-radius: 100px;
background: var(--cream-2);
font-family: var(--sans);
font-size: 12.5px;
color: var(--ink-2);
border: 1px solid transparent;
}
.pill.is-on { background: var(--ink); color: var(--cream); }
.pill.is-coral { background: var(--coral); color: #fff; }
.pill .avatar {
width: 20px; height: 20px; border-radius: 50%;
background: var(--coral); color: #fff;
display: grid; place-items: center;
font-size: 10px; font-weight: 600;
}
/* ---------- Nav ---------- */
.nav {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 48px;
position: relative; z-index: 5;
background: var(--cream);
}
.nav.sticky-top { border-bottom: 1px solid var(--line); }
.logo {
display: inline-flex; align-items: center; gap: 10px;
color: var(--ink);
}
.logo-mark {
width: 34px; height: 30px;
background-color: var(--coral);
-webkit-mask: url("/assets/audiala-logo-mark.svg") no-repeat center / contain;
mask: url("/assets/audiala-logo-mark.svg") no-repeat center / contain;
flex-shrink: 0;
}
.logo-word {
font-family: var(--serif);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144;
}
.nav-links {
display: flex; gap: 32px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
}
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a.is-active::after {
content: "";
position: absolute;
left: -2px; right: -2px; bottom: 0;
height: 7px;
background: var(--sun);
border-radius: 100px;
z-index: -1;
opacity: 0.9;
}
.nav-tools {
display: flex; gap: 12px; align-items: center;
}
.nav-search {
display: inline-flex; gap: 10px; align-items: center;
padding: 10px 18px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--cream);
font-size: 13px;
color: var(--ink-3);
}
/* Language switcher — compact pill trigger + dropdown listbox. Logical
(inset-inline) positioning so it mirrors correctly under dir="rtl" (ar). */
.nav-lang { position: relative; }
.nav-lang-btn {
display: inline-flex; gap: 6px; align-items: center;
padding: 10px 14px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--cream);
font-size: 13px;
color: var(--ink-2);
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.nav-lang-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.nav-lang-code { font-family: var(--sans); font-weight: 600; letter-spacing: .02em; }
.nav-lang-btn svg { width: 12px; height: 12px; transition: transform .15s ease; }
.nav-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-lang-menu {
position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 18px 40px -16px rgba(29, 57, 53, 0.28);
padding: 6px;
min-width: 180px; max-height: 360px; overflow-y: auto;
z-index: 60;
}
.nav-lang-menu[hidden] { display: none; }
.nav-lang-menu a {
display: flex; gap: 10px; align-items: center;
padding: 9px 12px;
border-radius: 9px;
font-family: var(--sans); font-size: 13.5px;
color: var(--ink-2);
text-decoration: none;
}
.nav-lang-menu a:hover { background: var(--cream-2); color: var(--ink); }
.nav-lang-menu a.is-current { color: var(--coral); font-weight: 600; background: rgba(232, 95, 51, 0.06); }
/* ---------- Photography placeholder ----------
A warm sky-gradient placeholder (not the harsh striped one).
Variants: dawn, midday, dusk, night, terracotta, ocean
*/
.ph {
background: linear-gradient(180deg, #C5A782 0%, #E5B998 35%, #F0CBA8 65%, #D89868 100%);
position: relative;
/* Isolate so the ::after legibility scrim (z-index:1) stays contained
within the photo and can't paint above sibling overlay cards (e.g. the
"Continue listening" resume card), which have no z-index and would
otherwise be darkened/bled-through by the escaping scrim. */
isolation: isolate;
overflow: hidden;
border-radius: 20px;
display: grid;
place-items: end start;
}
.ph::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 75% 30%, rgba(255, 235, 200, 0.4), transparent 50%),
radial-gradient(circle at 20% 80%, rgba(29, 57, 53, 0.18), transparent 60%);
pointer-events: none;
}
.ph::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 60%;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0.65) 100%);
pointer-events: none;
}
/* When a real ![]()
is wired (`.has-img` added by the partial) we keep the
variant gradient as the background: the opaque photo covers it once
loaded, and it serves as a warm on-brand placeholder while a lazy image
below the fold is still loading (instead of a flat dark-teal flash). Just
drop the sky-highlight ::before so it doesn't tint the photo. The bottom
darken scrim (::after) stays for label/overlay legibility. */
.ph.has-img::before { display: none; }
.ph > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
z-index: 0;
}
.ph::before, .ph::after { z-index: 1; }
.ph .ph-label, .ph .ph-sun { position: relative; z-index: 2; }
.ph .ph-label {
position: relative;
margin: 16px;
padding: 5px 10px;
background: rgba(29, 57, 53, 0.55);
color: rgba(250, 242, 226, 0.9);
font-family: var(--sans);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 100px;
backdrop-filter: blur(4px);
}
/* Placeholder variants */
.ph.dawn { background: linear-gradient(180deg, #E8C5A0 0%, #F3D8AE 40%, #DBA76F 100%); }
.ph.dusk { background: linear-gradient(180deg, #5A4E5C 0%, #C28570 50%, #E69862 100%); }
.ph.night { background: linear-gradient(180deg, #1D3935 0%, #2C5A52 50%, #6B8378 100%); }
.ph.ocean { background: linear-gradient(180deg, #7AAEB0 0%, #B8D4C8 50%, #F4E6C2 100%); }
.ph.stone { background: linear-gradient(180deg, #C9B894 0%, #D6C3A0 50%, #B89D70 100%); }
.ph.forest { background: linear-gradient(180deg, #6B8E78 0%, #95B49A 50%, #D5C9A8 100%); }
.ph.terracotta { background: linear-gradient(180deg, #A85638 0%, #C77554 50%, #E8A875 100%); }
/* A small inset frame for an icon overlay on placeholder */
.ph-sun {
position: absolute;
top: 32px; right: 32px;
width: 60px; height: 60px;
border-radius: 50%;
background: rgba(250, 242, 226, 0.5);
filter: blur(10px);
}
/* ---------- Day-icon strokes (line, 1.5pt, no fill) ---------- */
.line-icon {
display: inline-block;
color: var(--ink-2);
width: 36px; height: 36px;
}
.line-icon.coral { color: var(--coral); }
.line-icon.sm { width: 22px; height: 22px; }
.line-icon.lg { width: 56px; height: 56px; }
/* Vault rule (ios-design-system.md §Buttons): coral surfaces carry WHITE ink,
never the teal/green ink-2. The .line-icon default `color: var(--ink-2)` is a
direct rule that beats inheritance, so an icon inside a coral pill/button
rendered green-on-coral (e.g. the "Editor's pick" sparkle). Force inherit so
icons take the white text color of their coral/ink parent. */
.btn-coral .line-icon,
.pill.is-coral .line-icon,
.pill.is-on .line-icon,
.play-btn .line-icon,
.btn-ink .line-icon { color: inherit; }
/* ---------- Generic layout helpers ---------- */
.section { padding: 88px 48px; position: relative; }
.section.tight { padding: 56px 48px; }
.section.big { padding: 120px 48px; }
.section-head {
display: flex; align-items: end; justify-content: space-between;
gap: 40px; margin-bottom: 48px;
}
.section-head h2 {
font-family: var(--serif); font-weight: 700;
font-size: 64px; line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ink);
max-width: 800px;
}
.section-head .lead {
font-family: var(--serif-body);
font-size: 18px; line-height: 1.45;
color: var(--ink-2);
max-width: 380px;
}
/* ---------- Hairline ---------- */
.hr {
border: 0; height: 1px; background: var(--line); margin: 0;
}
/* ---------- "Continue listening" mini-card pattern ---------- */
.resume-card {
display: flex; align-items: center; gap: 16px;
padding: 14px 18px 14px 14px;
background: var(--cream-2);
border-radius: 20px;
box-shadow: 0 1px 0 rgba(29, 57, 53, 0.05);
}
.resume-card .art {
width: 60px; height: 60px; border-radius: 12px;
flex-shrink: 0;
}
.resume-card .label-row {
font-family: var(--sans); font-size: 10.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 4px;
}
.resume-card .title {
font-family: var(--serif); font-weight: 600;
font-size: 18px; color: var(--ink);
letter-spacing: -0.01em;
}
.resume-card .meta {
font-family: var(--sans); font-size: 12px;
color: var(--ink-3); margin-top: 2px;
}
/* ---------- Footer ---------- */
.footer {
background: var(--paper-deep);
color: var(--cream);
padding: 96px 48px 36px;
position: relative;
}
.footer .lead {
font-family: var(--serif);
font-weight: 700;
font-size: 56px;
line-height: 0.98;
letter-spacing: -0.025em;
max-width: 540px;
}
.footer .lead .joy { color: var(--coral); }
.footer .logo { color: var(--cream); }
.footer .logo-mark { background-color: var(--cream); }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-top: 64px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(250, 242, 226, 0.12);
}
.footer h4 {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: rgba(250, 242, 226, 0.5);
margin-bottom: 16px; font-weight: 500;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer ul.footer-social { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
/* Touch: the 12px row gap becomes 6px of padding on each link, so every
link is a 34px target (was 17px); a five-link list grows by about 12px. */
@media (pointer: coarse) {
.footer ul:not(.footer-social) { gap: 0; }
.footer ul:not(.footer-social) a { display: inline-block; padding-block: 6px; }
}
.footer-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 10px;
color: rgba(250, 242, 226, 0.7);
background: rgba(250, 242, 226, 0.08);
transition: color .15s, background .15s;
}
.footer-social a:hover, .footer-social a:focus-visible { color: var(--cream); background: var(--coral); }
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px;
font-family: var(--sans); font-size: 12px;
color: rgba(250, 242, 226, 0.4);
}
/* ---------- Stats / numbers ---------- */
.stat {
display: flex; flex-direction: column; gap: 6px;
}
.stat-n {
font-family: var(--serif); font-weight: 700;
font-size: 56px; line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ink);
}
.stat-l {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
}
/* ===================================================================
LOUVRE PAGE COMPONENTS (lv-* + .disc family)
------------------------------------------------------------------
Ported from design/louvre-v1.html (style block 1). Used by the
place-page redesign for hero headline, facts strip, ticket pill,
verified chip, audio-guide CTA, prose, gallery, logistics, tips,
pair, faq, related, sources. Tokens (var(--ink), var(--coral),
var(--cream)…) come from earlier in this file.
=================================================================== */
/* ===================================================================
AUDIALA — Louvre place page · polish layer over styles.css
Page-specific patterns: hero, tickets, gallery, logistics,
tips, history, callouts, FAQ accordion, related grid.
=================================================================== */
/* ---------- Image with graceful fallback ---------- */.lv-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---------- Hero ---------- */
.lv-hero-title {
font-family: var(--serif);
font-weight: 800;
/* Design uses a fixed 150px for short single-word names ("Louvre."). Real
place names vary wildly in length, so scale with the viewport: ~150px at
the 1280px design width, shrinking on narrow screens to avoid overflow. */
font-size: clamp(52px, 11.7vw, 150px);
line-height: 0.84;
letter-spacing: -0.04em;
font-variation-settings: "opsz" 144, "SOFT" 50;
color: var(--ink);
}
.lv-hero-title .it { font-style: italic; color: var(--coral); font-weight: 700; }
/* Place-page narration preview. The compact card sits in the hero beside the
page summary so listening is a first-class action, not a download promise. */
.lv-audio-preview {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(29, 57, 53, 0.12);
border-radius: 20px;
background:
radial-gradient(circle at 100% 0, rgba(224, 122, 95, 0.14), transparent 38%),
var(--cream-2);
box-shadow: 0 12px 28px -22px rgba(29, 57, 53, 0.4);
}
.lv-audio-preview audio { display: none; }
.lv-audio-preview-main {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
}
.lv-audio-preview-toggle {
border: 0;
cursor: pointer;
box-shadow: 0 9px 22px -8px rgba(224, 122, 95, 0.8);
}
.lv-audio-preview-toggle:focus-visible,
.lv-audio-preview a:focus-visible {
outline: 3px solid rgba(224, 122, 95, 0.42);
outline-offset: 3px;
}
.lv-audio-preview .audio-preview-copy { min-width: 0; }
.lv-audio-preview .audio-preview-copy h2 {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
}
.lv-audio-preview .audio-preview-copy .f-eyebrow {
color: var(--coral-deep);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lv-audio-preview-duration {
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: 100px;
background: rgba(255, 255, 255, 0.45);
font: 600 12px/1 var(--sans);
font-variant-numeric: tabular-nums;
color: var(--ink-3);
}
.lv-audio-preview .audio-preview-progress { margin-top: 10px; }
.lv-audio-preview-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 11px;
}
.lv-audio-preview .audio-preview-status {
min-width: 78px;
font-variant-numeric: tabular-nums;
}
.lv-audio-preview-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.lv-audio-preview-actions .btn {
min-height: 32px;
padding: 7px 12px;
font-size: 11.5px;
text-align: center;
}
.lv-audio-preview-open { opacity: 0.88; }
.lv-audio-preview.is-audio-complete .lv-audio-preview-open {
opacity: 1;
box-shadow: 0 8px 22px -10px rgba(224, 122, 95, 0.8);
}
.lv-audio-preview.has-audio-error .lv-audio-preview-toggle {
opacity: 0.45;
pointer-events: none;
}
/* Primary app-conversion CTA — make it unmistakably a button */
.lv-cta-listen {
font-weight: 600;
padding-left: 8px;
box-shadow: 0 8px 22px -6px rgba(224,122,95,0.55), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.lv-cta-listen .disc {
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
background: rgba(255,255,255,0.22);
color: var(--cream);
}
.lv-cta-listen:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(224,122,95,0.62), inset 0 0 0 1px rgba(255,255,255,0.16); }
.lv-cta-listen:active { transform: translateY(0); box-shadow: 0 4px 12px -4px rgba(224,122,95,0.5); }
/* Quiet ticket line in hero */
.lv-ticket-quiet {
display: inline-flex; align-items: center; gap: 12px;
padding: 9px 9px 9px 16px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--cream);
font-family: var(--sans); font-size: 13px; color: var(--ink-2);
transition: border-color .15s ease, transform .15s ease;
}
.lv-ticket-quiet:hover { border-color: var(--ink-4); transform: translateY(-1px); }
.lv-ticket-quiet .price { color: var(--coral); font-weight: 600; }
.lv-ticket-quiet .rate { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }
.lv-ticket-quiet .go {
width: 30px; height: 30px; border-radius: 50%;
background: var(--coral); color: var(--cream);
display: grid; place-items: center;
}
.lv-verified {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.04em;
color: var(--ink-3);
}
.lv-verified .dot { width: 14px; height: 14px; color: var(--mint); }
/* Hero quick-facts overlay strip */
.lv-facts {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.lv-facts .fact {
display: flex; gap: 14px; align-items: flex-start;
padding: 0 28px;
}
.lv-facts .fact + .fact { border-left: 1px solid var(--line); }
.lv-facts .fact .k {
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.lv-facts .fact .v {
font-family: var(--serif); font-weight: 600; font-size: 17px;
line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
}
/* ---------- Editorial body type ---------- */
/* Base props live on the container too: markdownify emits bare inline text
(no ) for single-line fields, which otherwise fell back to Inter. */
.lv-prose {
font-family: var(--serif-body);
font-size: 17px; line-height: 1.62; color: var(--ink-2);
}
.lv-prose p {
font-family: var(--serif-body);
font-size: 17px; line-height: 1.62; color: var(--ink-2);
}
.lv-prose p + p { margin-top: 20px; }
.lv-prose em { font-style: italic; color: var(--ink); }
.lv-dropcap::first-letter {
font-family: var(--serif); font-weight: 700;
font-size: 92px; line-height: 0.72;
float: left; color: var(--coral);
margin: 10px 14px 0 0;
}
/* ---------- "What to see" numbered items ---------- */
.lv-see-item {
display: grid; grid-template-columns: 64px 1fr;
gap: 28px;
padding: 36px 0;
border-top: 1px solid var(--line);
}
.lv-see-item .idx {
font-family: var(--serif); font-weight: 700; font-size: 30px;
color: var(--coral); letter-spacing: -0.02em;
font-style: italic;
}
.lv-see-item h3 {
font-family: var(--serif); font-weight: 700; font-size: 30px;
letter-spacing: -0.02em; color: var(--ink); line-height: 1.05;
margin-bottom: 14px;
}
/* Keep what-to-see prose at a reading measure (~75 characters) instead of
the full 1100px row. */
.lv-see-item .lv-prose { max-width: 760px; }
/* ---------- Callouts (Look for this / The Secret) ---------- */
.lv-callout {
display: grid; grid-template-columns: auto 1fr; gap: 22px;
align-items: start;
padding: 30px 34px;
border-radius: 24px;
background: var(--cream-2);
border: 1px solid var(--line);
}
.lv-callout .badge {
width: 52px; height: 52px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
background: var(--sun-soft); color: var(--ink);
}
.lv-callout.dark { background: var(--ink); border-color: transparent; color: var(--cream); }
.lv-callout.dark .badge { background: rgba(243,196,61,0.18); color: var(--sun); }
.lv-callout .eyebrow {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px;
}
.lv-callout.dark .eyebrow { color: var(--sun); }
.lv-callout h4 {
font-family: var(--serif); font-weight: 700; font-size: 22px;
letter-spacing: -0.01em; margin-bottom: 8px;
}
.lv-callout p { font-family: var(--serif-body); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.lv-callout.dark p { color: rgba(250,242,226,0.82); }
/* ---------- Gallery ---------- */
.lv-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 14px;
}
.lv-gallery figure {
position: relative; overflow: hidden; border-radius: 18px;
background: var(--cream-2);
}
.lv-gallery figure.wide { grid-column: span 2; }
.lv-gallery figure.tall { grid-row: span 2; }
.lv-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lv-gallery figure:hover img { transform: scale(1.04); }
.lv-gallery figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 22px 16px 12px;
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.06em;
color: rgba(250,242,226,0.92);
background: linear-gradient(180deg, transparent, rgba(19,28,31,0.72));
opacity: 0; transition: opacity .25s ease;
}
.lv-gallery figure:hover figcaption { opacity: 1; }
/* ---------- Phone mockup screen (redesign/phone-card.html) ----------
Stylized rendition of the app's dark player, sized to the 286x620 bezel
opening. Data comes from the page; imagery rides the resize pipeline. */
.lv-phone {
position: relative;
aspect-ratio: 286 / 620;
border-radius: 35px;
overflow: hidden;
background: #141d20;
display: flex;
flex-direction: column;
font-family: var(--sans);
}
.lv-phone .shot {
position: relative;
height: 42%;
flex: none;
background: linear-gradient(160deg, #2b3f44, #141d20);
}
.lv-phone .shot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lv-phone .shot::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,29,32,0.18), transparent 30%, transparent 55%, #141d20 100%);
}
.lv-phone .statusbar {
position: absolute;
top: 10px; left: 16px; right: 16px;
display: flex; align-items: center; justify-content: space-between;
z-index: 1;
color: #fff;
font-size: 11px; font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.lv-phone .statusbar .notch {
width: 74px; height: 20px;
border-radius: 12px;
background: rgba(10,14,15,0.9);
}
.lv-phone .statusbar .sys { display: inline-flex; gap: 3px; }
.lv-phone .statusbar .sys i {
width: 10px; height: 5px;
border-radius: 2px;
background: rgba(255,255,255,0.85);
}
.lv-phone .screen-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 10px 14px 12px;
color: var(--cream);
}
.lv-phone .chapters { display: flex; gap: 4px; margin-bottom: 8px; }
.lv-phone .chapters i {
flex: 1; height: 3px; border-radius: 2px;
background: rgba(250,242,226,0.18);
}
.lv-phone .chapters i.on { background: var(--coral); }
.lv-phone .chapter-eyebrow {
font-size: 8.5px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(250,242,226,0.55);
}
.lv-phone .place {
margin-top: 4px;
font-family: var(--serif);
font-weight: 700;
font-size: 21px;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--cream);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-phone .quote {
margin: 7px 0 0;
font-family: var(--serif-body);
font-style: italic;
font-size: 11px;
line-height: 1.5;
color: rgba(250,242,226,0.82);
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-phone .quote::before { content: "\201C\2009"; color: var(--coral); font-weight: 700; }
.lv-phone .sources-line {
margin-top: 7px;
font-size: 8px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(250,242,226,0.45);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-phone .track {
margin-top: auto;
height: 4px; border-radius: 3px;
background: rgba(250,242,226,0.18);
overflow: hidden;
}
.lv-phone .track span { display: block; width: 7%; height: 100%; border-radius: 3px; background: var(--coral); }
.lv-phone .times {
display: flex; justify-content: space-between;
margin-top: 4px;
font-size: 8.5px; font-variant-numeric: tabular-nums;
color: rgba(250,242,226,0.55);
}
.lv-phone .controls {
display: flex; align-items: center; justify-content: center;
gap: 26px;
margin-top: 8px;
}
.lv-phone .controls .skip {
width: 26px; height: 26px;
border: 1.5px solid rgba(250,242,226,0.7);
border-radius: 50%;
display: grid; place-items: center;
font-size: 9px; font-weight: 700;
color: rgba(250,242,226,0.85);
}
.lv-phone .controls .disc {
width: 46px; height: 46px;
border-radius: 50%;
background: var(--coral);
color: #fff;
display: grid; place-items: center;
box-shadow: 0 8px 20px -8px rgba(224,122,95,0.7);
}
.lv-phone .tabs {
display: flex; justify-content: space-between;
margin-top: 10px;
padding: 7px 9px;
border-radius: 100px;
background: rgba(250,242,226,0.08);
}
.lv-phone .tabs span {
display: inline-flex; flex-direction: column; align-items: center;
gap: 2px;
font-size: 7.5px; font-weight: 600;
color: rgba(250,242,226,0.6);
}
.lv-phone .tabs span .line-icon { width: 12px; height: 12px; }
.lv-phone .tabs span.on { color: var(--coral); }
/* Render-on-demand for heavy below-fold sections (all visitors): the
browser skips layout/paint until each section nears the viewport. contain-intrinsic-size keeps the scrollbar honest;
anchor navigation (e.g. #all-tickets) forces render on jump. */
#photo-gallery,
#video-gallery,
#all-tickets,
#gyg-extras,
#visitor-information,
#tips-for-visitors,
#history-and-significance,
#frequently-asked-questions,
#sources {
content-visibility: auto;
contain-intrinsic-size: auto 900px;
}
/* ---------- Video gallery ---------- */
.lv-videos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 24px;
margin-top: 40px;
}
.lv-video {
background: var(--cream-2);
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
}
.lv-video:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px -20px rgba(29, 57, 53, 0.4);
}
.lv-video .frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); }
.lv-video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lv-video .frame .pill.tag {
position: absolute; top: 12px; left: 12px;
background: rgba(250, 242, 226, 0.92);
color: var(--ink-2);
pointer-events: none;
}
.lv-video .meta { padding: 16px 18px 18px; }
.lv-video .meta h3 {
margin: 0;
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lv-video .meta .sub {
margin-top: 9px;
color: var(--ink-3);
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 4px;
}
.lv-video .meta .sub > span { display: inline-flex; align-items: center; gap: 4px; }
/* ---------- Tickets — quiet, editorial ---------- */
.lv-tickets {
display: flex; flex-direction: column;
border-top: 1px solid var(--line);
}
.lv-ticket-row {
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
gap: 28px;
padding: 22px 4px;
border-bottom: 1px solid var(--line);
transition: background .15s ease;
}
.lv-ticket-row:hover { background: rgba(29,57,53,0.025); }
.lv-ticket-row .prov {
font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.lv-ticket-row .prov .inst {
display: inline-flex; align-items: center; gap: 4px;
color: var(--mint); letter-spacing: 0.06em;
}
.lv-ticket-row .name {
font-family: var(--serif); font-weight: 600; font-size: 18px;
letter-spacing: -0.01em; color: var(--ink); line-height: 1.2;
}
.lv-ticket-row .rate {
display: flex; align-items: center; gap: 6px;
font-family: var(--sans); font-size: 13px; color: var(--ink-2);
white-space: nowrap;
}
.lv-ticket-row .rate .star { color: var(--sun); width: 15px; height: 15px; }
.lv-ticket-row .rate .ct { color: var(--ink-3); font-size: 12px; }
.lv-ticket-row .from {
text-align: right; white-space: nowrap;
}
.lv-ticket-row .from .lbl { font-family: var(--sans); font-size: 11px; color: var(--ink-3); }
.lv-ticket-row .from .amt { font-family: var(--serif); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.lv-ticket-row .book {
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 18px; border-radius: 100px;
border: 1px solid var(--line); background: var(--cream);
font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink);
transition: background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.lv-ticket-row:hover .book { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.lv-disclosure {
font-family: var(--serif-body); font-style: italic;
font-size: 12.5px; color: var(--ink-3); margin-top: 18px;
max-width: 620px;
}
/* ---------- Logistics cards ---------- */
.lv-logi {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px; background: var(--line);
border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
}
.lv-logi .cell {
background: var(--cream); padding: 30px 30px 34px;
}
.lv-logi .cell .ic { color: var(--coral); margin-bottom: 16px; }
.lv-logi .cell h4 {
font-family: var(--serif); font-weight: 700; font-size: 21px;
letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px;
}
.lv-logi .cell p { font-family: var(--serif-body); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lv-logi .cell a { color: var(--coral); text-decoration: underline; text-decoration-color: var(--coral-soft); text-underline-offset: 2px; }
/* The hairline background shows through empty tracks: let the last cell
fill its row on the 3-column layout (≤640px collapses to one column). */
@media (min-width: 641px) {
.lv-logi .cell:last-child:nth-child(3n+2) { grid-column: span 2; }
.lv-logi .cell:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
/* ---------- Tips ---------- */
.lv-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lv-tip {
padding: 26px 26px 28px; border-radius: 20px;
background: var(--cream-2);
display: flex; flex-direction: column; gap: 12px;
}
.lv-tip .ic { color: var(--ink-2); }
.lv-tip h4 { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.lv-tip p { font-family: var(--serif-body); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.lv-tip a { color: var(--coral); }
/* ---------- History ---------- */
.lv-theft {
display: grid; grid-template-columns: 150px 1fr;
gap: 28px;
padding: 28px 0;
border-top: 1px solid rgba(250,242,226,0.16);
}
.lv-theft .step {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--sun);
padding-top: 4px;
}
.lv-theft p { font-family: var(--serif-body); font-size: 16px; line-height: 1.6; color: rgba(250,242,226,0.84); }
.lv-theft em { font-style: italic; color: var(--cream); }
.lv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lv-pair .col h4 {
font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--coral); margin-bottom: 14px;
}
.lv-pair .col p { font-family: var(--serif-body); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
/* ---------- FAQ accordion ---------- */
.lv-faq { border-top: 1px solid var(--line); }
.lv-faq-item { border-bottom: 1px solid var(--line); }
.lv-faq-q {
width: 100%; text-align: left;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; padding: 18px 4px;
font-family: var(--sans); font-weight: 500; font-size: 14px;
letter-spacing: 0; color: var(--ink); cursor: pointer;
}
.lv-faq-q .toggle {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
border: 1px solid var(--line);
display: grid; place-items: center; color: var(--ink-2);
font-size: 16px; line-height: 1;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lv-faq-q .toggle::before { content: "+"; }
.lv-faq-item.open .lv-faq-q .toggle { background: var(--coral); color: var(--cream); border-color: var(--coral); }
.lv-faq-item.open .lv-faq-q .toggle::before { content: "\2212"; }
.lv-faq-a {
overflow: hidden; max-height: 0;
transition: max-height .35s ease, opacity .3s ease, padding .35s ease;
opacity: 0;
}
.lv-faq-item.open .lv-faq-a { max-height: 320px; opacity: 1; padding: 0 60px 30px 4px; }
.lv-faq-a p { font-family: var(--serif-body); font-size: 16px; line-height: 1.62; color: var(--ink-2); }
/* ---------- Sources ---------- */
.lv-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.lv-source {
display: grid; grid-template-columns: auto 1fr; gap: 12px;
padding: 16px 0; border-top: 1px solid var(--line);
}
.lv-source .v { color: var(--mint); margin-top: 2px; }
.lv-source .ttl { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); }
.lv-source .ttl a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.lv-source .desc { font-family: var(--serif-body); font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: 3px; }
/* ---------- Explore the area (clean map CTA) ---------- */
.lv-map {
display: flex; align-items: center; justify-content: space-between;
gap: 32px; padding: 28px 34px;
border-radius: 24px; border: 1px solid var(--line);
background: var(--cream-2);
}
.lv-map .ttl { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--ink); }
.lv-map .sub { font-family: var(--serif-body); font-size: 14.5px; color: var(--ink-3); margin-top: 4px; }
/* ---------- Related places ---------- */
.lv-related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lv-related .card-place { position: relative; }
.lv-related figure {
width: 100%; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden;
background: var(--cream-2); position: relative;
}
.lv-related img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lv-related .card-place:hover img { transform: scale(1.05); }
.lv-related figure::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(19,28,31,0.6));
}
.lv-related .meta {
position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
color: var(--cream);
}
.lv-related .meta .typ {
font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(250,242,226,0.78); margin-bottom: 5px;
}
.lv-related .meta :is(h3, h4) { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; line-height: 1.05; margin: 0; }
/* Pixel-fit overrides — suppress the JS-injected currency-hint span inside
the editorial ticket list (design has a single EUR amount), and force
the related-card title onto its cream gradient overlay (the global
editorial-content rules were specificity-winning over .lv-related .meta). */
.lv-ticket-row [data-ccy-hint] { display: none; }
.lv-related .meta :is(h3, h4) { color: var(--cream); }
/* The global `article a:not(...)` editorial link rule (animated coral underline)
was specificity-winning over `.lv-source .ttl a`, turning source titles coral.
The #sources ID lifts these back to the design's ink title + static hairline
underline. Also kills the gradient-underline background-image. */
#sources .lv-source .ttl a {
color: var(--ink);
text-decoration: underline; text-decoration-color: var(--line);
text-underline-offset: 2px; background-image: none;
}
#sources .lv-source .ttl a:hover { color: var(--coral); text-decoration-color: var(--coral); background-image: none; }
/* Verified/valid check glyph (class "v") — design renders it at ~18px (sm),
not the 36px .line-icon base. */
.line-icon.v { width: 18px; height: 18px; }
/* Ghost button on dark (card-ink) surfaces — cream text + icon, no fill. The
design's "Plan and listen" band uses these understated buttons so the only
loud CTA on the page stays the coral "Download the app" in the app section. */
/* Place page (louvre-original-text design) uses borderless ghost buttons — the
coral glow / soft fill on the hero "Listen" is the only button emphasis; all
secondary buttons (View map, Join, All-N places) are plain text + icon, no
outline. Scoped to .place-redesign so other page types keep their borders. */
.place-redesign .btn-ghost { border-color: transparent; }
/* ---------- Partner / DMC pages (e.g. Beyond the Plains Safaris) ----------
Free-form legacy markdown, but lighten the flow vs the default legacy idiom:
clean single-column lists (not a white card per bullet) and framed, rounded
inline photos. Scoped to .partner-page so other legacy pages are untouched. */
.partner-page .editorial-content ul { display: block; margin: 1.1rem 0; }
.partner-page .editorial-content ul li {
display: flex; gap: 11px; align-items: flex-start;
background: transparent; border: 0; box-shadow: none;
padding: 5px 0; border-radius: 0;
font-family: var(--serif-body); color: var(--ink-2); line-height: 1.55;
}
.partner-page .editorial-content ul li::before {
content: "✓"; font-family: var(--sans); font-weight: 600;
color: var(--coral); font-size: 0.9rem; line-height: 1.5;
margin-top: 1px; flex-shrink: 0;
}
.partner-page .editorial-content img {
display: block; border-radius: 20px; margin: 1.75rem 0;
box-shadow: 0 18px 44px -22px rgba(29,57,53,0.4);
}
.partner-page .editorial-content img[src$="logo.png"] {
max-width: 200px; margin: 0.5rem 0 1.5rem; box-shadow: none; border-radius: 0;
}
.partner-page .editorial-content h2 { margin-top: 3.25rem; }
.btn-ghost-cream { background: transparent; color: var(--cream); padding-left: 0; }
.btn-ghost-cream .line-icon { color: inherit; }
.btn-ghost-cream:hover { color: #fff; opacity: 0.82; }
/* Hero facts strip — coral icon sits beside the label/value block (design v1). */
.lv-facts .fact .line-icon { color: var(--coral); margin-top: 2px; }
/* FAQ question — match the design's rendered 15px / 400 sans. */
.audiala-page .lv-faq-q { font-size: 15px; font-weight: 400; }
/* ---------- Full-bleed section bands ----------
The design alternates cream / cream-2 (#F4E6C2) bands — "In pictures",
"Visitor logistics" and "Frequently asked" sit on cream-2. The article body
lives in a 1184px wrapper centred in the 1280px sheet (48px gutters), so a
band breaks out -48px each side to reach the sheet edges, then re-insets its
content by 48px. !important overrides the Tailwind `.space-y-24` margin that
would otherwise win on specificity. */
.lv-band {
margin: 0 -48px !important;
padding: 88px 48px;
background: var(--cream-2);
}
.space-y-24 > .lv-band + * { margin-top: 0 !important; }
/* Full-bleed ink band (history "theft" story) — same breakout, dark ground. */
.lv-band.ink { background: var(--ink); color: var(--cream); }
.lv-band.ink .lv-prose p { color: rgba(250,242,226,0.85); }
.lv-band.ink .f-eyebrow { color: var(--sun); }
/* Section vertical rhythm — the design gives every section 88px internal
padding (flush boxes); the local article relies on space-y-24 (96px) and the
bare sections had no padding, so transparent→transparent transitions were
~65px too tight. Add internal block padding so content-to-content lands near
the design's ~160px. */
.lv-sec { padding-block: 34px; }
/* A bare section that immediately follows a band sits flush to it (band's
margin-top was zeroed); give it a little more top room. */
.space-y-24 > .lv-band + .lv-sec { padding-top: 64px; }
/* App-CTA two-column grid — design is 1.4fr / 1fr (text wider than the phone),
not the equal auto-fit columns local had. Collapses on narrow viewports. */
.lv-appcta-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,4vw,3.75rem); align-items: center; }
@media (max-width: 820px) { .lv-appcta-grid { grid-template-columns: 1fr; } }
/* details-based FAQ — mirrors the .open-class selectors above so native
elements get the same open-state styling without JS. */
details.lv-faq-item[open] .lv-faq-q .toggle {
background: var(--coral); color: var(--cream); border-color: var(--coral);
}
details.lv-faq-item[open] .lv-faq-q .toggle::before { content: "\2212"; }
details.lv-faq-item[open] .lv-faq-a {
max-height: 320px; opacity: 1; padding: 0 60px 30px 4px;
}
details.lv-faq-item summary::-webkit-details-marker { display: none; }
details.lv-faq-item summary { list-style: none; }
/* ===================================================================
MOBILE RESPONSIVE LAYER (added 2026-06-16)
------------------------------------------------------------------
redesign.css was authored desktop-first against the fixed 1280px
mock and shipped with almost no phone breakpoints, so on a 390px
viewport the nav links clipped off-screen, the hero titles
(inline 140px / 220px) spanned multiple screens and overflowed,
and every multi-column .lv-* / inline-grid stayed side-by-side and
got squeezed/clipped. This block adds the missing phone rules:
a hamburger nav, fluid hero/heading type, single-column grids and
tightened gutters. Verified at 390px across home/city/country/
place pages. `!important` is used deliberately where the target is
an inline style (inline wins over classes otherwise).
=================================================================== */
/* Hamburger button + mobile menu panel (base appearance; toggled in the
640px query). Markup lives in partials/redesign/nav.html. */
.nav-burger {
display: none; /* desktop: hidden */
place-items: center; gap: 5px;
width: 44px; height: 44px;
border-radius: 12px;
border: 1px solid var(--line);
background: var(--cream);
flex-direction: column;
}
.nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
.nav-mobile-panel {
display: none; /* hidden by default; shown on mobile when .nav.nav-open */
position: absolute; top: 100%; inset-inline: 0;
flex-direction: column;
background: var(--cream);
border-bottom: 1px solid var(--line);
box-shadow: 0 18px 40px -16px rgba(29, 57, 53, 0.28);
padding: 8px 18px 18px;
z-index: 40;
}
.nav-mobile-panel a { padding: 14px 2px; font-family: var(--sans); font-size: 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
.nav-mobile-panel a:last-child { border-bottom: 0; }
.nav-mobile-panel .btn-ink { margin-top: 12px; justify-content: center; padding: 14px; border-bottom: 0; }
.nav-mobile-panel .panel-lang { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 4px; border-bottom: 1px solid var(--line); }
.nav-mobile-panel .panel-lang a { border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; font-size: 13px; }
/* Mobile sticky "Get the app" CTA (markup in redesign/nav.html). Hidden on
desktop and until the hero scrolls off (.is-visible added by JS). */
.mobile-cta-bar { display: none; }
@media (max-width: 640px) {
/* clip, not hidden: hidden on both html and body turns body into a scroll
container that never scrolls, which silently disables every
position:sticky element (nav, chip bars, rails) on phones. Browsers
without clip keep the hidden fallback. */
html, body { overflow-x: hidden; overflow-x: clip; }
/* Desktop mock relied on fixed 1280px + content-box math; on full-width
phones that overflows. Force border-box so padding stays inside width. */
.audiala-page, .audiala-page *, .audiala-page *::before, .audiala-page *::after { box-sizing: border-box; }
/* Desktop-gutter sections (hero etc.) tighten on phones. */
.audiala-page section.responsive-section-gutters { padding-left: 20px !important; padding-right: 20px !important; }
/* ---- Nav → hamburger ---- */
.nav { padding: 14px 18px; }
.nav-links,
.nav-lang,
.nav-tools > .btn-ink { display: none !important; } /* collapse into panel */
.nav-search { padding: 11px; gap: 0; } /* 44px touch target */
.nav-search > span { display: none; } /* icon-only; drop label + ⌘K */
.nav-burger { display: inline-grid !important; }
.nav-mobile-panel { display: none; }
.nav.nav-open .nav-mobile-panel { display: flex; }
/* ---- Hero + display type: fluid, never wider than the viewport ---- */
.audiala-page h1.f-display { font-size: clamp(42px, 13vw, 92px) !important; line-height: 0.95; overflow-wrap: anywhere; hyphens: auto; }
.lv-hero-title { font-size: clamp(40px, 12vw, 150px); overflow-wrap: anywhere; }
/* Sub-headings carry big inline px sizes (24–88px) that overflow long words.
Cap every non-hero display heading to a phone scale (h1 heroes excluded). */
.audiala-page h2.f-display, .audiala-page h3.f-display, .audiala-page h4.f-display,
.audiala-page div.f-display { font-size: clamp(24px, 7vw, 46px) !important; line-height: 1.02; }
.audiala-page .f-display, .audiala-page .lv-prose h2, .audiala-page .lv-prose h3 { overflow-wrap: anywhere; }
/* Numbered section titles (redesign/section-title.html). */
.audiala-page h2 span.responsive-section-number { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.02; overflow-wrap: anywhere; }
/* ---- Section heads / stats ---- */
.section { padding: 48px 20px; }
.section.tight { padding: 36px 20px; }
.section.big { padding: 60px 20px; }
.section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(30px, 8vw, 44px); }
/* Stat values are inline 36px display figures; long TEXTUAL values
("Spring (April–May) or Autumn…", currencies) exploded to 4–5 ragged
lines. Cap so numbers stay readable and text stops wrapping wildly. */
.stat-n { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.1; }
/* ---- Footer ---- */
.footer { padding: 56px 20px 28px; }
.footer .lead { font-size: clamp(30px, 8.5vw, 56px); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 36px; padding-bottom: 36px; }
.footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
/* ---- Collapse multi-column grids (class-based, lv-*) ---- */
.lv-facts, .lv-logi, .lv-tips, .lv-pair, .lv-sources, .lv-see-item, .lv-theft { grid-template-columns: 1fr !important; }
/* Intro body runs as CSS columns on desktop — single column on mobile. */
.u-ab5e6084be { column-count: 1 !important; }
/* Facts strip stacks: vertical rules become row separators, tighter pads. */
.lv-facts .fact { padding: 12px 4px; }
.lv-facts .fact + .fact { border-left: 0; border-top: 1px solid var(--line); }
/* "Explore the Area" map card: stack copy above the button. */
.lv-map { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
.lv-gallery .wide { grid-column: auto !important; }
.lv-gallery .tall { grid-row: auto !important; }
.lv-ticket-row { grid-template-columns: 1fr !important; gap: 10px; }
.lv-band { margin: 0 -20px !important; padding: 48px 20px; }
details.lv-faq-item[open] .lv-faq-a { padding: 0 4px 24px 4px !important; }
/* Responsive template grids (incl. sections that ARE grids, e.g. .lv-sec)
collapse to 1 column. Re-widen photo grids to 2-col after. */
.audiala-page .responsive-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
.audiala-page .lv-gallery, .audiala-page .lv-related { grid-template-columns: repeat(2, 1fr) !important; }
.lv-audio-preview {
box-sizing: border-box;
width: 100%;
max-width: calc(100vw - 40px);
min-width: 0;
padding: 16px;
border-radius: 20px;
overflow: hidden;
}
.lv-audio-preview-main { grid-template-columns: auto minmax(0, 1fr); }
.lv-audio-preview-duration { display: none; }
.lv-audio-preview-footer { align-items: stretch; flex-direction: column; }
.lv-audio-preview-actions { align-items: stretch; flex-direction: column; }
.lv-audio-preview-actions .btn { width: 100%; justify-content: center; }
/* City hero stat strip is position:absolute over the photo on desktop; on
mobile un-absolute it so it can't overlap the (now larger-relative) title. */
.audiala-page section .card.responsive-overlay-card {
position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
margin-top: 16px;
}
/* Pricing comparison table → scroll horizontally instead of overflowing page. */
.audiala-page table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Guides search+filter bar → stack the search over wrapped, centered pills
(the [search | pills] flex row is too wide for a phone). */
.audiala-page .card-2:has(.guides-pills) { flex-direction: column; align-items: stretch; border-radius: 24px; }
.guides-pills { flex-wrap: wrap; justify-content: center; }
/* ---- Review pass 2 (2026-06-16) ---- */
/* Editor's-pick / featured "big" cards are `grid-row:span 2; display:flex`
with a height:100% photo. When the grid collapses to 1 col, the span-2
loses meaning and the card height collapses to ~0, so the absolute
overlays (pill + title + meta) pile up on top of each other. Give the
card a real aspect box so the photo fills and overlays sit correctly —
this also caps the card height so 1 fits cleanly per phone screen. */
.audiala-page article.responsive-tall-card {
aspect-ratio: 4 / 5 !important; min-height: 360px;
}
/* Guides region titles are an inline 88px → "Americas" etc. clip off
the right edge with the coral period off-screen. */
.audiala-page .guides-region h2 a { font-size: clamp(36px, 12vw, 88px) !important; overflow-wrap: anywhere; }
/* Drop-caps (place article + about manifesto) are 90px+ and force ragged
orphan wraps on a 390px column — shrink on phones. */
.audiala-page .lv-dropcap::first-letter,
.audiala-page .dropcap::first-letter { font-size: 52px !important; line-height: 0.8 !important; }
/* Pricing comparison table: keep the horizontal-scroll container (set
earlier) but tighten cells so more columns fit before scrolling and
headers stop wrapping mid-word. */
.audiala-page table th, .audiala-page table td { padding: 12px 10px !important; font-size: 12.5px !important; }
/* Cookie consent banner covered ~40% of the hero on first load. Compact it
on phones (smaller heading/copy/padding) so the hero stays visible. */
#audiala-consent-banner { padding: 14px 16px !important; gap: 8px !important; border-radius: 18px !important; }
#audiala-consent-banner .consent-h { font-size: 17px !important; }
#audiala-consent-banner .consent-copy { font-size: 12.5px; line-height: 1.45; }
/* Sticky "Get the app" CTA: floating pill, revealed on scroll. Sits above
the cookie banner is avoided by lower z-index than the banner (z 90). */
.mobile-cta-bar {
position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60;
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 15px 18px; border-radius: 100px;
background: var(--coral); color: #fff;
font-family: var(--sans); font-weight: 700; font-size: 15px;
box-shadow: 0 14px 32px -8px rgba(224, 122, 95, 0.6);
opacity: 0; transform: translateY(120%); pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
}
.mobile-cta-bar .line-icon { color: #fff; }
.mobile-cta-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Featured "big" cards (home + guides) carry BOTH the photo's own caption
(.ph-label) and the card's name overlay — redundant, and they collide
once the card is shortened to a mobile aspect box. Drop the photo caption
on these cards (the card overlay already names the destination). */
.audiala-page article.responsive-tall-card .ph-label { display: none; }
/* ---- Home refinements (2026-06-16) ---- */
/* Circular cream backdrop behind the app-section phone mockup bleeds out as
a stray ellipse on a phone (inset:-40px on a now-full-width container) —
hide on mobile; the desktop halo is kept. */
.phone-halo { display: none !important; }
/* Inline section-head titles (e.g. "Where we're listening" at 72px) are too
big on a phone — cap them. */
.audiala-page .section-head h2 span { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.0; }
/* Hero action buttons: stack full-width so each label fits on one line
instead of wrapping in a cramped 2-up row. */
.hero-actions { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
.hero-actions .btn { width: 100%; justify-content: center; }
.audio-preview-strip { max-width: none; }
.audio-preview-copy p { font-size: 16px; }
/* Metric/stat cards more compact: 2-up the home stat strip, tighten padding,
drop the desktop divider rules that look wrong once stacked. */
.audiala-page .card-2:has(.stat) {
grid-template-columns: 1fr 1fr !important;
padding: 20px !important; gap: 16px 14px !important;
}
.audiala-page .card-2:has(.stat) > .f-serif-it { grid-column: 1 / -1; }
.audiala-page .card-2:has(.stat) .stat,
.audiala-page .card-2:has(.stat) > .f-serif-it { border-left: 0 !important; padding-left: 0 !important; }
/* City/country hero stat strip: tighten padding/gap, drop stacked dividers. */
.audiala-page section .card.responsive-overlay-card { padding: 18px 20px !important; gap: 14px !important; }
.audiala-page section .card.responsive-overlay-card .stat { border-left: 0 !important; padding-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
.lv-audio-preview *,
.lv-audio-preview *::before,
.lv-audio-preview *::after { transition: none !important; }
}
@media (max-width: 380px) {
.section, .footer, .nav { padding-left: 16px; padding-right: 16px; }
.lv-band { margin: 0 -16px !important; padding-left: 16px; padding-right: 16px; }
.footer-grid { grid-template-columns: 1fr; }
}
/* The fourth navigation destination switches to the existing menu before
tablet widths become cramped. Only applies when a tour hub exists. */
@media (min-width: 641px) and (max-width: 1100px) {
.nav.has-tour-nav .nav-links { display: none; }
.nav.has-tour-nav .nav-burger { display: inline-grid; }
.nav.has-tour-nav.nav-open .nav-mobile-panel { display: flex; }
}
/* ===== static/css/modules/components/consent-media.css ===== */
/* Click-to-load YouTube facade + consent-gated thumbnails
(partials/youtube-facade.html, static/js/consent-media.js). */
.yt-facade { position: absolute; inset: 0; background: linear-gradient(135deg, var(--ink, #1D3935), #2c4f49); overflow: hidden; }
.yt-facade-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-facade-btn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; padding: 16px; background: transparent; color: #FAF2E2; cursor: pointer; font: inherit; }
.yt-facade-btn:focus-visible { outline: 3px solid #E07A5F; outline-offset: -3px; }
.yt-facade .yt-facade-btn .yt-facade-play { display: block; width: 64px; height: 64px; border-radius: 50%; background: rgba(250, 242, 226, 0.94); color: #1D3935; font: 26px/64px sans-serif; text-align: center; text-indent: 5px; box-shadow: 0 12px 30px rgba(19, 28, 31, 0.4); }
.yt-facade-btn:hover .yt-facade-play { color: #E07A5F; }
.yt-facade .yt-facade-btn .yt-facade-note { color: #FAF2E2; max-width: 90%; font-size: 12px; line-height: 1.3; padding: 4px 10px; border-radius: 999px; background: rgba(19, 28, 31, 0.55); }
.yt-facade-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v3 .v3-film-img .v3-film-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--v3-radius-sm); }
/* ===== static/css/modules/components/dynamic-variants.css ===== */
/* Data-driven presentation variants. Templates choose semantic state classes;
every tunable declaration remains in this module. */
.display-title { font-variation-settings: "opsz" 144, "SOFT" 60; }
.audiala-page h1.display-title--country { font-size: 200px; line-height: 0.86; letter-spacing: -0.04em; margin: 0; }
.audiala-page h1.display-title--city { font-size: 220px; line-height: 0.86; letter-spacing: -0.04em; margin: 0; }
/* Fit long names to their hero column instead of pushing the right column off
screen ("Queenstown.", "Herzegovina."). --title-chars = longest word in Latin
glyph units (partials/redesign/title-fit-chars.html); ~0.5em per glyph at
-0.04em tracking. Short names keep the full 220/200px. Phones keep their own
clamp() in redesign.css (it is !important). */
.audiala-page .display-title-fit { container-type: inline-size; min-width: 0; }
.audiala-page .display-title-fit h1.display-title--city { font-size: min(220px, calc(100cqi / (var(--title-chars, 6) * 0.5))); }
.audiala-page .display-title-fit h1.display-title--country { font-size: min(200px, calc(100cqi / (var(--title-chars, 6) * 0.5))); }
.audiala-page h1.display-title--city-legacy { font-size: 104px; line-height: 0.9; letter-spacing: -0.035em; margin: 0; }
.audiala-page h1.display-title--download { font-size: clamp(46px, 11vw, 148px); line-height: 0.92; letter-spacing: -0.04em; }
.audiala-page h2.display-title--download-cta {
font-size: clamp(40px, 10vw, 120px);
line-height: 0.98;
margin: 24px auto 0;
max-width: 1080px;
}
.audiala-page h1.display-title--audience { font-size: 92px; line-height: 0.92; margin-top: 22px; font-variation-settings: "opsz" 144, "SOFT" 50; }
.audiala-page h1.display-title--listing { font-size: 120px; line-height: 0.9; }
.audiala-page h1.display-title--guides { font-size: 132px; line-height: 0.9; }
.audiala-page h1.display-title--pricing { font-size: 124px; line-height: 0.92; }
.audiala-page h1.display-title--region { font-size: 140px; line-height: 0.88; }
.audiala-page h1.display-title--home { font-size: 140px; margin-top: 28px; font-variation-settings: "opsz" 144, "SOFT" 50; }
.stats-overlay {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
padding: 20px 28px;
display: grid;
gap: 32px;
align-items: center;
}
.stats-cols-1 { grid-template-columns: repeat(1, 1fr); }
.stats-cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats-cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats-cols-4 { grid-template-columns: repeat(4, 1fr); }
.stats-cols-5 { grid-template-columns: repeat(5, 1fr); }
.stats-cols-6 { grid-template-columns: repeat(6, 1fr); }
.stats-overlay--action.stats-cols-1 { grid-template-columns: repeat(1, 1fr) auto; }
.stats-overlay--action.stats-cols-2 { grid-template-columns: repeat(2, 1fr) auto; }
.stats-overlay--action.stats-cols-3 { grid-template-columns: repeat(3, 1fr) auto; }
.stats-overlay--action.stats-cols-4 { grid-template-columns: repeat(4, 1fr) auto; }
.stats-overlay--action.stats-cols-5 { grid-template-columns: repeat(5, 1fr) auto; }
.stats-overlay--action.stats-cols-6 { grid-template-columns: repeat(6, 1fr) auto; }
.stat--separated { border-left: 1px solid var(--line); padding-left: 24px; }
.stat--wide-separated { padding-left: 32px; }
.history-chapter {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 48px;
align-items: start;
}
.history-chapter.is-separated { border-top: 1px solid #ece0b8; padding-top: 64px; }
.faq-source-grid { display: grid; grid-template-columns: 1fr; gap: 60px; }
.faq-source-grid.has-sources { grid-template-columns: 1.4fr 1fr; }
.ranked-app { padding: 28px 32px; }
.ranked-app.is-audiala { border: 2px solid var(--coral); }
.ranked-app-number { font-size: 40px; color: var(--ink-3); }
.ranked-app.is-audiala .ranked-app-number { color: var(--coral); }
.support-method-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: #ece0b8;
display: grid;
place-items: center;
}
.support-method-icon.is-coral { background: var(--coral); }
.pricing-plan {
padding: 32px;
border: 1px solid rgba(29, 57, 53, 0.14);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
min-height: 580px;
}
.pricing-plan.is-featured { border: 0; }
.pricing-plan-tag { color: var(--coral); }
.pricing-plan-name { font-size: 48px; color: var(--ink); }
.pricing-plan-pitch { font-size: 16px; color: var(--ink-2); margin-top: 6px; }
.pricing-plan-price-block {
padding: 20px 0;
border-top: 1px solid rgba(29, 57, 53, 0.14);
border-bottom: 1px solid rgba(29, 57, 53, 0.14);
}
.pricing-plan-price {
font-size: 72px;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--ink);
}
.pricing-plan-cadence { color: var(--ink-3); margin-top: 6px; }
.pricing-plan-item {
display: flex;
gap: 12px;
align-items: start;
font-family: Inter, sans-serif;
font-size: 14px;
color: var(--ink);
}
.pricing-plan-item-icon {
color: var(--coral);
flex-shrink: 0;
margin-top: 2px;
display: inline-flex;
}
.pricing-plan.is-featured .pricing-plan-tag,
.pricing-plan.is-featured .pricing-plan-item-icon { color: var(--sun); }
.pricing-plan.is-featured .pricing-plan-name,
.pricing-plan.is-featured .pricing-plan-price { color: var(--cream); }
.pricing-plan.is-featured .pricing-plan-pitch { color: rgba(250, 242, 226, 0.7); }
.pricing-plan.is-featured .pricing-plan-price-block {
border-color: rgba(250, 242, 226, 0.18);
}
.pricing-plan.is-featured .pricing-plan-cadence { color: rgba(250, 242, 226, 0.6); }
.pricing-plan.is-featured .pricing-plan-item { color: rgba(250, 242, 226, 0.9); }
.pricing-compare-value {
padding: 16px;
color: #465c58;
font: 14px Inter, -apple-system, "Helvetica Neue", system-ui, sans-serif;
}
.pricing-compare-value.is-mark {
font: 22px Fraunces, "Source Serif 4", Georgia, serif;
}
.feature-section.is-alt { background: #f4e6c2; }
.feature-copy.is-reversed { order: 2; }
.feature-media.is-reversed { order: 1; }
.hours-row { display: flex; gap: 12px; padding: 10px 0; }
.hours-row--plain { display: block; }
.hours-row.is-separated { border-top: 1px solid var(--line-soft); }
.timeline-dot {
position: absolute;
left: 0;
top: 2px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--coral);
box-shadow: 0 0 0 4px #1d3935;
}
.timeline-dot.is-figure { background: var(--sun); }
.timeline-year { color: var(--coral); }
.timeline-year.is-figure { color: var(--sun); }
.itinerary-day-header {
padding: 32px 28px;
border-right: 1px solid var(--line);
background: var(--cream);
}
.itinerary-day-header.is-alt { background: var(--cream-2); }
.itinerary-stop { display: flex; gap: 14px; align-items: center; padding: 8px 0; }
.itinerary-stop.has-divider { border-bottom: 1px solid var(--line-soft); }
.device-mockup--w-280 { --device-max-width: 280px; }
.device-mockup--w-300 { --device-max-width: 300px; }
.device-mockup--w-320 { --device-max-width: 320px; }
.qf-fact { display: inline-flex; align-items: center; gap: 11px; }
.qf-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(232, 95, 51, 0.1);
color: var(--coral);
flex-shrink: 0;
}
.qf-icon { width: 1.05rem; height: 1.05rem; }
.qf-value { font-size: 0.92rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.faq-quick-answer { padding: 12px 0; }
.faq-quick-answer.is-separated { border-top: 1px solid var(--line); }
.ticket-freshness--dark { color: rgba(250, 242, 226, 0.75); }
.ticket-freshness--light { color: var(--ink-3); }
.hero-gradient-bg { background: #004b38; }
.hero-gradient-bg.is-hidden,
#hero-img.is-hidden { display: none; }
/* Named photo shapes replace the old free-form `style` parameter. */
.ph--hero-wide { width: 100%; aspect-ratio: 21 / 9; border-radius: 32px; }
.ph--landscape-card { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }
.ph--landscape-compact { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; }
.ph--phone-screen { width: 100%; aspect-ratio: 9 / 19.5; border-radius: 22px; }
.ph--portrait { width: 100%; aspect-ratio: 4 / 5; border-radius: 28px; }
.ph--portrait-large { width: 100%; aspect-ratio: 4 / 5; border-radius: 32px; }
.ph--wide-card { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; }
.ph--fill-large { width: 100%; height: 100%; border-radius: 24px; }
.ph--fill-rounded { width: 100%; height: 100%; border-radius: 28px; }
.ph--landscape-5x4 { width: 100%; aspect-ratio: 5 / 4; border-radius: 14px; }
.ph--landscape-16x10 { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; }
.ph--wide-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: 28px; }
.ph--square-card { width: 100%; aspect-ratio: 1; border-radius: 18px; }
.ph--landscape-5x3 { width: 100%; aspect-ratio: 5 / 3; border-radius: 16px; }
.ph--wide-feature { width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; }
.ph--wide-compact { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; }
.ph--landscape-3x2 { width: 100%; aspect-ratio: 3 / 2; border-radius: 14px; }
.ph--square-large { width: 100%; aspect-ratio: 1; border-radius: 24px; }
.ph--landscape { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
.ph--landscape-hero { width: 100%; aspect-ratio: 5 / 4; border-radius: 28px; }
.ph--square-ticket { width: 100%; aspect-ratio: 1; border-radius: 18px 18px 0 0; }
/* ===== static/css/modules/components/legacy-article.css ===== */
/* Legacy long-read (partials/redesign/legacy-article.html).
Every rule is scoped to .lv-article; selectors carry
`.editorial-content.legacy-content` so they outrank the older legacy rules
in templates/layouts--place--single.css (loaded after this module) without
!important. Logical properties keep RTL correct. */
.lv-article {
display: grid;
grid-template-columns: minmax(0, 250px) minmax(0, 720px);
column-gap: clamp(40px, 6vw, 104px);
align-items: start;
counter-reset: lv-part;
}
.lv-article--no-rail { grid-template-columns: minmax(0, 740px); justify-content: center; }
/* ---------- Rail ---------- */
.lv-article-rail {
position: sticky; top: 40px;
max-height: calc(100vh - 72px);
overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent;
padding-inline-end: 6px;
}
.lv-toc > summary {
list-style: none; cursor: pointer;
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.lv-toc > summary::-webkit-details-marker { display: none; }
.lv-toc > summary .f-eyebrow { color: var(--coral-deep); }
.lv-toc-meta { font-family: var(--sans); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lv-toc-list { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: lv-toc; }
.lv-toc-list li { margin: 0; padding: 0; }
.lv-toc-list li::before { content: none; }
/* (0,5,2): outranks the house `article a:not(...)` link style. */
.lv-article .lv-toc .lv-toc-list li[class] a[href] {
display: block; text-decoration: none; color: inherit; background: none;
transition: color .15s ease, border-color .15s ease;
}
.lv-toc-l2 {
counter-increment: lv-toc;
margin-top: 18px !important;
font-family: var(--serif); font-weight: 600; font-size: 15px;
line-height: 1.28; letter-spacing: -0.005em; color: var(--ink);
}
.lv-article .lv-toc .lv-toc-list li.lv-toc-l2 a[href] { display: grid; grid-template-columns: 26px 1fr; }
.lv-toc-l2 a::before {
content: counter(lv-toc, decimal-leading-zero);
font-style: italic; font-size: 13px; color: var(--coral); padding-top: 1px;
}
.lv-toc-l3 {
font-family: var(--sans); font-size: 13px; line-height: 1.38; color: var(--ink-3);
}
.lv-article .lv-toc .lv-toc-list li.lv-toc-l3 a[href] {
margin-inline-start: 26px; padding: 5px 0 5px 12px;
border-inline-start: 1px solid var(--line);
}
.lv-article .lv-toc .lv-toc-list li.lv-toc-l3 + .lv-toc-l3 a[href] { padding-top: 3px; }
.lv-article .lv-toc .lv-toc-list li[class] a[href]:hover,
.lv-article .lv-toc .lv-toc-list li[class] a[href][aria-current] { color: var(--coral-deep); }
.lv-article .lv-toc .lv-toc-list li.lv-toc-l3 a[href][aria-current] { border-inline-start: 2px solid var(--coral); padding-inline-start: 11px; }
/* ---------- Reading column ---------- */
.lv-article-main { min-width: 0; }
.lv-article .editorial-content.legacy-content {
font-family: var(--serif-body); font-size: 19px; line-height: 1.72; color: var(--ink-2);
}
.lv-article .editorial-content.legacy-content > * { max-width: 720px; }
.lv-article .editorial-content.legacy-content p {
font-family: var(--serif-body); font-size: 19px; line-height: 1.72;
color: var(--ink-2); margin: 0 0 1.1em;
}
.lv-article .editorial-content.legacy-content strong { font-weight: 600; color: var(--ink); }
.lv-article .editorial-content.legacy-content em { font-style: italic; color: var(--ink); }
/* Intro: the first heading becomes an eyebrow, the first paragraph a lead. */
.lv-article .editorial-content.lv-article-intro > h2:first-child,
.lv-article .editorial-content.lv-article-intro > h3:first-child {
display: flex; align-items: center; gap: 14px;
margin: 0 0 22px; padding: 0; border: 0;
font-family: var(--sans); font-size: 12px; font-weight: 600; font-style: normal;
letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3;
color: var(--coral-deep);
}
.lv-article .editorial-content.lv-article-intro > h2:first-child::before,
.lv-article .editorial-content.lv-article-intro > h3:first-child::before {
content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--coral); flex: none;
}
.lv-article .editorial-content.lv-article-intro > p:first-of-type {
font-size: 23px; line-height: 1.55; color: var(--ink); margin-bottom: 1em;
}
.lv-article .editorial-content.lv-article-intro > p:first-of-type::first-letter {
font-family: var(--serif); font-weight: 700; font-style: normal;
font-size: 88px; line-height: 0.74;
float: inline-start; color: var(--coral);
margin-block-start: 8px; margin-inline-end: 14px;
}
/* Body headings */
.lv-article .editorial-content.legacy-content h2 {
counter-increment: lv-part;
margin: 92px 0 22px; padding: 34px 0 0;
border: 0; border-top: 1px solid var(--line);
font-family: var(--serif); font-weight: 700; font-style: normal;
font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06;
letter-spacing: -0.022em; text-transform: none; color: var(--ink);
scroll-margin-top: 32px;
}
.lv-article .editorial-content.legacy-content h2::before {
content: counter(lv-part, decimal-leading-zero);
display: block; margin-bottom: 14px;
font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
color: var(--coral);
}
.lv-article .editorial-content.lv-article-intro h2 { counter-increment: none; }
.lv-article .editorial-content.lv-article-intro h2::before { content: none; }
.lv-article .editorial-content.lv-article-body > h2:first-child { margin-top: 64px; }
.lv-article .editorial-content.legacy-content h2 + p {
font-size: 21px; line-height: 1.6; color: var(--ink);
}
.lv-article .editorial-content.legacy-content h3 {
margin: 58px 0 14px; padding: 0; border: 0;
font-family: var(--serif); font-weight: 600; font-style: normal;
font-size: 27px; line-height: 1.16; letter-spacing: -0.015em;
text-transform: none; color: var(--ink);
scroll-margin-top: 32px;
}
.lv-article .editorial-content.legacy-content h4 {
margin: 38px 0 10px; padding: 0; border: 0;
font-family: var(--serif); font-weight: 600; font-style: italic;
font-size: 21px; line-height: 1.25; letter-spacing: -0.005em;
text-transform: none; color: var(--ink);
}
.lv-article .editorial-content.legacy-content h5,
.lv-article .editorial-content.legacy-content h6 {
margin: 30px 0 8px; padding: 0; border: 0;
font-family: var(--sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3);
}
.lv-article .editorial-content.legacy-content h2 + h3,
.lv-article .editorial-content.legacy-content h3 + h4 { margin-top: 24px; }
/* Lists — quiet coral markers instead of per-item cards. */
.lv-article .editorial-content.legacy-content ul,
.lv-article .editorial-content.legacy-content ol {
display: block; list-style: none; margin: 0 0 1.4em; padding: 0;
}
.lv-article .editorial-content.legacy-content ol { counter-reset: lv-ol; }
.lv-article .editorial-content.legacy-content li {
display: block; position: relative; margin: 0.5em 0; padding: 0; padding-inline-start: 28px;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-family: var(--serif-body); font-size: 18.5px; line-height: 1.65; color: var(--ink-2);
}
.lv-article .editorial-content.legacy-content li > p { margin: 0; font-size: inherit; }
.lv-article .editorial-content.legacy-content ul > li::before {
content: ""; position: absolute; inset-inline-start: 6px; top: 0.72em;
width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
transform: none; color: transparent;
}
.lv-article .editorial-content.legacy-content ol > li { counter-increment: lv-ol; }
.lv-article .editorial-content.legacy-content ol > li::before {
content: counter(lv-ol) "."; position: absolute; inset-inline-start: 0; top: 0;
font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--coral);
}
.lv-article .editorial-content.legacy-content li ul,
.lv-article .editorial-content.legacy-content li ol { margin: 0.3em 0 0.4em; }
/* "**Term:** definition" lists → hairline-ruled definition rows. */
.lv-article .editorial-content.legacy-content li.lv-term {
margin: 0; padding: 18px 0; padding-inline-start: 0;
border-top: 1px solid var(--line);
}
.lv-article .editorial-content.legacy-content li.lv-term:last-child { border-bottom: 1px solid var(--line); }
.lv-article .editorial-content.legacy-content ul > li.lv-term::before { content: none; }
.lv-article .editorial-content.legacy-content li.lv-term strong:first-child {
display: block; margin-bottom: 4px;
font-family: var(--serif); font-weight: 600; font-size: 19.5px;
line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}
.lv-article .editorial-content.legacy-content ul:has(> li.lv-term) { margin: 22px 0 1.8em; }
/* Quotes, tables, media, rules */
.lv-article .editorial-content.legacy-content blockquote {
margin: 34px 0; padding: 22px 28px;
border: 0; border-inline-start: 3px solid var(--coral);
border-start-end-radius: 18px; border-end-end-radius: 18px;
background: var(--cream-2);
font-family: var(--serif-body); font-style: italic; font-size: 20px; line-height: 1.6; color: var(--ink);
}
.lv-article .editorial-content.legacy-content blockquote p { font-size: inherit; color: inherit; margin: 0; }
.lv-article .editorial-content.legacy-content blockquote p + p { margin-top: 0.8em; }
.lv-article .editorial-content.legacy-content table {
display: block; overflow-x: auto; width: 100%;
border-collapse: collapse; margin: 30px 0;
font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.lv-article .editorial-content.legacy-content th {
text-align: start; padding: 10px 14px; border-bottom: 1.5px solid var(--ink);
font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.lv-article .editorial-content.legacy-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lv-article .editorial-content.legacy-content img { max-width: 100%; height: auto; border-radius: 18px; margin: 28px 0; }
.lv-article .editorial-content.legacy-content hr { border: 0; height: 1px; background: var(--line); margin: 56px 0; }
/* Gallery inside the reading column: shape follows the image count. */
.lv-article .gallery-root { margin: 52px 0 12px; }
.lv-article .lv-gallery {
grid-template-columns: repeat(3, 1fr); grid-auto-rows: 172px; gap: 12px;
}
.lv-article .lv-gallery figure { border-radius: 16px; cursor: zoom-in; }
.lv-article .lv-gallery figure:nth-child(3n+6):last-child { grid-column: span 3; }
.lv-article .lv-gallery figure:nth-child(3n+7):last-child { grid-column: span 2; }
.lv-article .lv-gallery[data-count="1"] { grid-template-columns: 1fr; grid-auto-rows: auto; }
.lv-article .lv-gallery[data-count="1"] figure { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 2; max-height: 520px; }
.lv-article .lv-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; grid-auto-rows: 300px; }
.lv-article .lv-gallery[data-count="2"] figure { grid-column: auto; grid-row: auto; }
.lv-article .lv-gallery[data-count="4"] figure.wide:not(.tall) { grid-column: span 3; }
/* ---------- Narrow screens: rail folds into a card above the article ---------- */
@media (max-width: 1023px) {
.lv-article, .lv-article--no-rail { grid-template-columns: minmax(0, 1fr); }
.lv-article-rail {
position: static; max-height: none; overflow: visible; padding: 0;
margin-bottom: 40px;
}
.lv-toc {
background: var(--cream-2); border: 1px solid var(--line);
border-radius: 18px; padding: 16px 20px;
}
.lv-toc > summary { border-bottom: 0; padding-bottom: 0; }
.lv-toc > summary::after {
content: ""; width: 8px; height: 8px; flex: none; margin-inline-start: 4px;
border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.lv-toc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.lv-toc[open] > summary { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.lv-toc-list { max-height: 60vh; overflow-y: auto; padding-bottom: 6px; }
}
@media (max-width: 640px) {
.lv-article .editorial-content.legacy-content,
.lv-article .editorial-content.legacy-content p { font-size: 17.5px; line-height: 1.68; }
.lv-article .editorial-content.lv-article-intro > p:first-of-type { font-size: 20px; }
.lv-article .editorial-content.lv-article-intro > p:first-of-type::first-letter { font-size: 64px; margin-inline-end: 10px; }
.lv-article .editorial-content.legacy-content h2 { margin-top: 64px; padding-top: 26px; }
.lv-article .editorial-content.legacy-content h3 { font-size: 23px; margin-top: 44px; }
.lv-article .editorial-content.legacy-content h4 { font-size: 19px; }
.lv-article .editorial-content.legacy-content li { font-size: 17px; }
.lv-article .editorial-content.legacy-content h2 + p { font-size: 19px; }
}
/* The page shell clips with overflow:hidden, which makes it the scroll
container and disables position:sticky for the rail. `clip` clips the same
way without creating a scroll container. Browsers without :has()/clip keep
`hidden` and simply get a non-sticky rail. */
.audiala-page:has(.lv-article-rail) { overflow: clip; }
/* ===== static/css/modules/components/photo-credits.css ===== */
/* Photo credits (image licence policy, 2026-09-27).
Plain text only, never links. Hero credit: a quiet line at the photo's
bottom-right corner, below the floating facts card, on the existing
legibility scrim. Page credits: a collapsed above the footer. */
.ph .ph-credit {
position: absolute;
right: 14px;
bottom: 8px;
z-index: 2;
max-width: min(62%, 460px);
font-family: var(--sans);
font-size: 10.5px;
line-height: 1.3;
letter-spacing: 0.01em;
color: rgba(250, 242, 226, 0.78);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* The image failed and the gradient shows: no photo, no credit. */
.ph:not(.has-img) .ph-credit { display: none; }
.photo-credits {
padding: 0 48px 32px;
font-family: var(--sans);
font-size: 12px;
line-height: 1.5;
color: var(--ink-3);
}
.photo-credits summary {
cursor: pointer;
width: fit-content;
color: var(--ink-3);
}
.photo-credits summary:hover,
.photo-credits details[open] summary { color: var(--ink-2); }
.photo-credits__list {
margin: 10px 0 0 18px;
display: grid;
gap: 4px;
overflow-wrap: anywhere;
}
.photo-credits__note { margin-top: 8px; font-style: italic; }
@media (max-width: 640px) {
.ph .ph-credit { right: 10px; bottom: 6px; font-size: 10px; max-width: 72%; }
}
/* ===== static/css/modules/templates/layouts--_default--single.css ===== */
/* Extracted from layouts/_default/single.html; edit this module directly. */
.legal-content > p { color: #3f4944; line-height: 1.75; margin-bottom: 1.25rem; }
.legal-content > h2 { font-family: 'Noto Serif', serif; font-size: 1.5rem; font-weight: 700; color: #1c1b1b; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.legal-content > h3 { font-family: 'Noto Serif', serif; font-size: 1.125rem; font-weight: 600; color: #1c1b1b; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.legal-content > ul, .legal-content > ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.legal-content > ul > li, .legal-content > ol > li { color: #3f4944; line-height: 1.75; margin-bottom: 0.375rem; }
.legal-content > ul { list-style: disc; }
.legal-content > ol { list-style: decimal; }
.legal-content a { color: #004b38; text-decoration: underline; }
.legal-content a:hover { text-decoration: none; }
.legal-content strong { color: #1c1b1b; }
.legal-content > table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.875rem; }
.legal-content > table th { text-align: left; font-weight: 600; color: #1c1b1b; padding: 0.625rem 0.75rem; border-bottom: 2px solid #c5ccc7; }
.legal-content > table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid #e0e3df; color: #3f4944; }
.legal-content > blockquote { border-left: 4px solid #004b38; padding-left: 1.5rem; font-style: italic; color: #3f4944; margin: 1.5rem 0; }
.legal-content > .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.25rem; }
.legal-toc a { color: #3f4944; text-decoration: none; transition: color 0.15s; }
.legal-toc a:hover { color: #004b38; }
.legal-toc li { padding: 0.25rem 0; }
@media (min-width: 768px) {
.legal-content > h2 { font-size: 1.75rem; }
.legal-content > h3 { font-size: 1.25rem; }
}
/* ===== static/css/modules/templates/layouts--about--list.css ===== */
/* Extracted from layouts/about/list.html; edit this module directly. */
.prose-redesign p { font-family: var(--serif-body); font-size: 18px; line-height: 1.65; color: var(--ink-2); margin-bottom: 20px; }
.prose-redesign h2 { font-family: var(--serif); font-weight: 700; font-size: 36px; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 18px; line-height: 1.05; }
.prose-redesign h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); margin: 32px 0 12px; }
.prose-redesign a { color: var(--coral); border-bottom: 1px solid var(--coral); }
.prose-redesign ul { margin: 0 0 20px 0; padding-left: 22px; list-style: disc; }
.prose-redesign li { font-family: var(--serif-body); font-size: 17px; line-height: 1.6; color: var(--ink-2); margin-bottom: 8px; }
/* About "Key facts" definition list (moved from an inline