*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--ml-ink);color:var(--ml-text);font:16px/1.65 var(--body)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,summary,select,textarea{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2,h3,.btn,.text-link,nav,.label{font-family:var(--display);font-weight:400}h1,h2,h3{line-height:1.08;letter-spacing:-.025em}em{color:var(--ml-pink);font-style:normal}h2{font-size:clamp(42px,5.1vw,76px)}h3{font-size:30px}.eyebrow{font:400 clamp(26px,3vw,39px)/1.3 var(--script);color:var(--ml-pink);display:block;margin-bottom:18px}p{color:#e9e9ee}p+p{margin-top:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--ml-pink);border-radius:100px;padding:16px 28px;background:var(--ml-pink);color:#080808;font-size:18px;letter-spacing:1.5px;line-height:1.3;white-space:nowrap;transition:transform .2s,background .2s}.btn:hover{background:#ffafea;transform:translateY(-3px)}.btn.outline{background:transparent;border-color:#777;color:white}.text-link{display:inline-flex;align-items:center;gap:14px;letter-spacing:1px;border-bottom:1px solid #ffffff45;padding:10px 0;font-size:14px}.text-link:hover{color:var(--ml-pink)}:focus-visible{outline:3px solid var(--ml-blue);outline-offset:5px}.skip{position:fixed;top:-100px;z-index:100;background:white;color:black;padding:15px}.skip:focus{top:0}.site-header{height:98px;background:#050505f5;display:flex;align-items:center;padding:0 3%;gap:48px;position:sticky;top:0;z-index:30;border-bottom:1px solid var(--ml-border);backdrop-filter:blur(14px)}.logo{flex-shrink:0}.logo img{object-fit:contain}.desktop-nav{display:flex;gap:28px;align-items:center;font-size:14px;letter-spacing:1px}.desktop-nav details{position:relative}.desktop-nav summary{list-style:none}.desktop-nav summary:after{content:'⌄';margin-left:7px;color:var(--ml-text-dim)}summary::-webkit-details-marker{display:none}.dropdown{position:absolute;top:40px;left:-20px;background:#080808;border:1px solid var(--ml-border);border-radius:18px;width:200px;padding:12px;box-shadow:0 16px 50px #0008}.dropdown a{display:flex;justify-content:space-between;padding:10px;text-transform:uppercase;border-radius:8px}.dropdown a:hover,.dropdown [aria-current]{background:#ff8ce012;color:var(--ml-pink)}.header-actions{display:flex;gap:12px;margin-left:auto}.header-actions .btn{font-size:13px;padding:14px 20px}.menu-toggle{display:none;background:transparent;color:white;border:0;font-size:28px}.hero{position:relative;min-height:730px;overflow:hidden;background:#050505}.hero-picture{position:absolute;right:0;top:0;width:72%;height:100%}.hero-picture>img{width:100%;height:100%;object-fit:cover;object-position:57% 50%;filter:brightness(.74)}.hero-picture:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,#050505c0 17%,transparent 57%),linear-gradient(0deg,#050505 0%,transparent 35%)}.photo-tag{position:absolute;right:5%;bottom:125px;font:12px Anton;letter-spacing:2px;z-index:2;writing-mode:horizontal-tb}.photo-tag span{display:block;color:var(--ml-blue);margin-top:8px;text-align:right}.hero-copy{position:relative;z-index:3;padding:65px 4% 110px;width:60%}.hero-copy .eyebrow{font-size:35px}h1{font-size:clamp(74px,8.5vw,132px);line-height:.99;letter-spacing:-.035em}.hero-copy h1 em{text-shadow:5px 6px 0 #ff8ce025}.hero-copy p{margin-top:28px;max-width:460px;font-size:18px}.actions{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:30px}.actions .text-link{font-size:12px;margin-top:6px}.hero-bottom{position:absolute;bottom:0;width:92%;left:4%;padding:20px 0;border-top:1px solid #ffffff30;display:flex;align-items:center;justify-content:space-between;font:11px Anton;letter-spacing:1.7px;z-index:4}.eq{height:22px;display:flex;align-items:center;gap:4px}.eq i{display:block;width:3px;background:var(--ml-blue);height:100%;animation:eq .9s infinite alternate}.eq i:nth-child(2n){animation-delay:.5s;height:50%}.eq i:nth-child(3n){animation-delay:.2s;height:75%}@keyframes eq{to{transform:scaleY(.3)}}.ticker{overflow:hidden;background:var(--ml-pink);color:#090909;padding:16px 0;font:24px Anton;letter-spacing:2px;transform:rotate(-1deg);width:100%;margin:0 0 10px}.ticker div{width:max-content;animation:marquee 35s linear infinite}.ticker b{margin:0 34px;font-weight:400}@keyframes marquee{to{transform:translateX(-50%)}}.section{padding:120px max(4%,calc((100% - 1320px)/2));}.intro{display:grid;grid-template-columns:1fr 1fr;gap:55px 75px}.intro-copy{padding-top:12px}.lead{font-size:23px;line-height:1.45;color:white}.intro-copy .text-link{margin-top:26px}.wide-photo{grid-column:1/-1;position:relative;height:540px;overflow:hidden;border-radius:24px;border:1px solid var(--ml-border)}.wide-photo>img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}.wide-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000d,transparent 70%)}.photo-caption{position:absolute;bottom:35px;left:35px;right:35px;z-index:2;display:flex;justify-content:space-between;align-items:end}.photo-caption>span{font:44px/1.12 Anton}.photo-caption small{font-size:10px;letter-spacing:2px}.pillars{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.pillars article{padding-top:25px;border-top:1px solid var(--ml-border)}.pillars article>span,.event-card>span{font-size:11px;letter-spacing:2px;color:var(--ml-blue)}.pillars h3{margin:18px 0}.pillars p{font-size:15px;max-width:320px}.events{background:#080809;border-top:1px solid var(--ml-border);border-bottom:1px solid var(--ml-border)}.events .section-heading{max-width:780px}.events .section-heading>p{margin-top:24px;max-width:580px}.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:45px}.event-card{border:1px solid #ffffff25;border-radius:22px;background:#161618;color:white;text-align:left;padding:32px;position:relative;min-height:310px;transition:transform .2s,border-color .2s}.event-card:nth-child(2){background:linear-gradient(135deg,#252027,#161618)}.event-card:nth-child(3){background:linear-gradient(135deg,#182428,#161618)}.event-card:hover{transform:translateY(-6px);border-color:var(--ml-pink)}.event-card h3{font-size:31px;margin:24px 0 18px}.event-card p{font-size:14px;max-width:250px;padding-bottom:25px}.event-card b{position:absolute;bottom:20px;right:26px;font-size:28px;font-weight:400;color:var(--ml-pink)}.partnership{margin-top:40px;padding-top:28px;border-top:1px solid var(--ml-border)}.partnership>span{font:12px Anton;letter-spacing:2px;color:var(--ml-pink)}.partnership p{margin-top:14px;font-size:14px}.partnership i{color:var(--ml-blue);margin:0 18px}.concept{position:relative;min-height:700px;display:flex;align-items:center;background:#050505;overflow:hidden}.concept>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:65% center;opacity:.68}.concept:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050505f5 0%,#050505b5 35%,transparent 80%)}.concept-copy{position:relative;z-index:1;margin:70px 4%;max-width:490px}.concept-copy .eyebrow{margin-top:35px}.concept-copy p{margin-top:25px;max-width:430px}.concept-copy small{display:block;color:#bbb;font-size:11px;margin-top:25px;max-width:380px}.label{font-size:10px;letter-spacing:2px;padding:9px 14px;border:1px solid #ffffff45;border-radius:100px}.gallery{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:24px;align-items:center}.gallery-title{padding-right:20px}.gallery h2{font-size:48px}.gallery p{margin-top:22px;font-size:14px}.gallery-photo{padding:0;background:#161618;border:1px solid var(--ml-border);border-radius:18px;overflow:hidden;color:white;text-align:left}.gallery-photo img{width:100%;height:360px;object-fit:cover;transition:transform .4s}.gallery-photo:hover img{transform:scale(1.03)}.gallery-photo span{display:flex;justify-content:space-between;padding:17px 20px;font:13px Anton;letter-spacing:1px}.gallery-photo b{font-size:20px;color:var(--ml-pink)}.booking{background:radial-gradient(ellipse at 0% 40%,#ff8ce011,transparent 65%),#080809;display:grid;grid-template-columns:1fr 1fr;gap:85px;border-block:1px solid var(--ml-border)}.booking>div>p{max-width:440px;margin-top:28px}.contact{margin:35px 0;display:flex;flex-direction:column;gap:8px}.contact>span{font-size:10px;letter-spacing:2px;color:var(--ml-blue)}.contact>strong{font:24px Anton;margin:5px 0}.contact a{width:fit-content}.contact a:hover{color:var(--ml-pink)}form{padding:32px;background:#151517;border:1px solid #ffffff20;border-radius:24px}.form-top{display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--ml-border);padding-bottom:22px;margin-bottom:25px}.form-top>span{font:21px Anton}.form-top small{font-size:10px;letter-spacing:2px;color:var(--ml-blue)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-grid label{font-size:12px;color:#e9e9ee;display:block}.form-grid small{color:var(--ml-text-dim)}input,select,textarea{background:#09090a;color:white;border:1px solid #ffffff30;border-radius:9px;width:100%;padding:13px 12px;margin-top:7px;min-width:0;min-height:48px;font-size:13px;color-scheme:dark}input::placeholder,textarea::placeholder{color:#85858c}.full{grid-column:1/-1}textarea{resize:vertical}form>.btn{width:100%;margin-top:24px}.form-note{font-size:11px;color:var(--ml-text-dim);margin-top:14px;line-height:1.5}#form-result{border-top:1px solid var(--ml-border);margin-top:20px;padding-top:20px;font-size:13px}.faq{display:grid;grid-template-columns:1fr 1.3fr;gap:70px}.faq details{border-bottom:1px solid var(--ml-border);padding:23px 0}.faq summary{font-size:17px;list-style:none;padding-right:28px;position:relative}.faq summary:after{content:'+';position:absolute;right:0;color:var(--ml-pink);font-size:24px;top:-5px}.faq details[open] summary:after{content:'−'}.faq p{padding-top:18px;color:var(--ml-text-dim);font-size:14px}.closing{text-align:center;font:clamp(45px,7vw,110px)/1.1 Anton;padding:75px 20px 95px;background:#050505;border-block:1px solid var(--ml-border)}footer{padding:65px 4% 30px;background:#030303}.footer-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}.footer-main h3{font-size:15px;letter-spacing:1px;color:var(--ml-pink);margin-bottom:20px}.footer-main a{display:block;font-size:13px;margin-bottom:9px;color:var(--ml-text-dim)}.footer-main p{font-size:13px;margin-top:16px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--ml-border);margin-top:55px;padding-top:25px;font-size:10px;color:var(--ml-text-dim)}.mobile-cta{display:none}dialog{padding:0;border:1px solid #ffffff40;background:#080808;border-radius:18px;max-width:90vw;max-height:90vh}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}dialog img{max-height:85vh;object-fit:contain}.close{position:absolute;right:15px;top:15px;border:1px solid #fff8;border-radius:50%;width:44px;height:44px;background:#000;color:white;font-size:28px;z-index:2}#mobile-nav[hidden]{display:none}
@media(min-width:1600px){.hero{min-height:850px}.hero-copy{padding-top:90px}}@media(max-width:1150px){.site-header{gap:30px}.desktop-nav{gap:18px}.store{display:none!important}.hero-copy{width:70%}.booking{gap:40px}.gallery h2{font-size:40px}}@media(max-width:880px){.desktop-nav{display:none}.menu-toggle{display:block}.site-header{height:78px;padding:0 22px;gap:15px}.logo img{width:48px;height:48px}.header-actions .btn{font-size:11px;padding:13px 18px}.header-actions{margin-left:auto}#mobile-nav{position:absolute;top:78px;left:0;right:0;background:#080808;padding:20px 24px 30px;border-bottom:1px solid var(--ml-pink);max-height:75vh;overflow:auto}#mobile-nav>a,#mobile-nav summary,#mobile-nav details a{display:block;padding:10px 0;font-size:21px}#mobile-nav details a{padding-left:18px;font-size:17px}#mobile-nav [aria-current]{color:var(--ml-pink)}.hero-copy{width:100%;padding-top:45px}.hero-picture{width:85%;opacity:.65}.hero-copy h1{font-size:100px}.hero-bottom>span:last-child{display:none}.intro{gap:35px;grid-template-columns:1fr 1fr}.pillars{gap:25px}.event-card{padding:24px}.event-card h3{font-size:26px}.gallery{grid-template-columns:1fr 1fr}.gallery-title{grid-column:1/-1}.booking{grid-template-columns:1fr;gap:40px}.booking h2{font-size:65px}.booking>div>p{max-width:600px}.faq{gap:35px}.section{padding:75px 5%}.wide-photo{height:440px}.photo-caption>span{font-size:36px}.photo-caption small{display:none}}
@media(max-width:600px){body{font-size:15px}.site-header{padding:0 18px}.hero{min-height:850px;display:flex;flex-direction:column}.hero-picture{position:relative;order:2;width:100%;height:270px;opacity:1;margin-top:-5px}.hero-picture>img{object-fit:cover;object-position:center;filter:brightness(.95)}.hero-picture:after{background:linear-gradient(0deg,#050505,transparent 35%),linear-gradient(180deg,#050505,transparent 18%)}.photo-tag{bottom:34px;right:22px;font-size:8px;letter-spacing:1.5px}.hero-copy{padding:35px 24px 15px;order:1}.hero-copy .eyebrow{font-size:28px;margin-bottom:20px}.hero-copy h1{font-size:clamp(65px,18vw,106px);line-height:1.02}.hero-copy p{font-size:15px;margin-top:22px}.actions{margin-top:24px;gap:10px}.actions .btn{font-size:12px;padding:17px 22px}.actions .text-link{font-size:11px}.hero-bottom{position:relative;order:3;padding:18px 0;width:88%;left:6%;font-size:9px}.eq{height:17px}.ticker{font-size:20px;padding:13px 0}.ticker b{margin:0 22px}.section{padding:65px 24px}.intro{grid-template-columns:1fr;gap:30px}.intro-copy{padding:0}.lead{font-size:21px}h2{font-size:46px}.wide-photo{height:410px;border-radius:18px}.wide-photo>img{object-position:46% 50%}.photo-caption{bottom:24px;left:24px;right:24px}.photo-caption>span{font-size:29px}.pillars{grid-template-columns:1fr;gap:27px}.pillars article{display:grid;grid-template-columns:1fr 1fr;gap:15px}.pillars article>span{grid-column:1/-1}.pillars h3{font-size:27px;margin:0}.pillars p{font-size:13px}.event-grid{grid-template-columns:1fr;margin-top:30px}.event-card{min-height:245px}.event-card h3{font-size:32px;margin:18px 0 14px}.event-card p{max-width:90%;padding-bottom:10px}.partnership p{line-height:2}.partnership i{margin:0 6px}.concept{min-height:760px;align-items:flex-start}.concept>img{object-position:64% bottom;height:380px;bottom:0;opacity:1}.concept:after{background:linear-gradient(180deg,#050505 50%,transparent 78%)}.concept-copy{margin:45px 24px;max-width:none}.concept-copy .eyebrow{font-size:26px;margin-top:30px}.concept-copy h2{font-size:47px}.concept-copy p{font-size:14px;max-width:330px}.concept-copy small{font-size:10px;max-width:300px}.label{font-size:8px}.gallery{gap:14px}.gallery-title{padding:0;margin-bottom:12px}.gallery h2{font-size:44px}.gallery-photo img{height:240px}.gallery-photo span{padding:12px;font-size:10px;letter-spacing:.5px}.booking h2{font-size:55px}.booking{gap:35px}form{padding:22px;border-radius:18px}.form-grid{grid-template-columns:1fr;gap:16px}.full{grid-column:auto}.form-top>span{font-size:18px}.faq{grid-template-columns:1fr;gap:15px}.faq h2{font-size:44px}.faq summary{font-size:15px}.closing{font-size:46px;padding:55px 20px}footer{padding:45px 24px 100px}.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-main>div:first-child{grid-column:1/-1;display:flex;align-items:center;gap:20px}.footer-logo{width:65px;height:65px}.footer-main h3{font-size:13px}.footer-bottom{flex-direction:column;gap:12px;margin-top:35px}.mobile-cta{display:flex;position:fixed;bottom:14px;left:20px;right:20px;z-index:20;padding:16px;font-size:12px;box-shadow:0 5px 35px #0009}.mobile-cta.is-hidden{display:none}.footer-bottom span:nth-child(2){font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Retro campaign art direction · v2 */
.cinematic{isolation:isolate}.cinematic>img{animation:camera-drift 18s ease-in-out infinite alternate;transform-origin:center center;will-change:transform}.hero-picture>img{object-position:62% center;filter:brightness(.85)}.wide-photo.cinematic{height:auto;aspect-ratio:auto;background:#050505;border-color:#ff8ce030;box-shadow:0 25px 85px #0007}.wide-photo.cinematic>img{height:auto;width:100%;object-fit:contain}.wide-photo.cinematic:after{background:linear-gradient(0deg,#050505f0 0%,#05050530 28%,transparent 60%);pointer-events:none}.wide-photo.cinematic:before{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 13% 60%,#ff8ce026,transparent 50%),radial-gradient(ellipse at 90% 55%,#5bd0e620,transparent 50%);mix-blend-mode:screen;pointer-events:none;animation:light-bloom 8s ease-in-out infinite alternate}.photo-caption small{font-size:9px;letter-spacing:1px;max-width:170px;text-align:right}.motion-toggle{position:absolute;top:20px;right:20px;z-index:5;color:white;background:#050505b8;border:1px solid #ffffff50;border-radius:30px;padding:10px 15px;font:10px Inter,sans-serif;letter-spacing:1px;backdrop-filter:blur(10px)}.gallery{grid-template-columns:repeat(3,1fr)}.gallery-title{grid-column:1/-1}.gallery-title h2{font-size:clamp(44px,5vw,66px)}.gallery-title p{max-width:500px}.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}@keyframes camera-drift{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes light-bloom{from{opacity:.25}to{opacity:.65}}@media(max-width:600px){.hero-picture{height:auto;min-height:250px}.hero-picture>img{height:auto;object-fit:contain}.hero-picture .photo-tag{bottom:8px;font-size:7px}.wide-photo.cinematic{border-radius:18px}.wide-photo.cinematic>img{aspect-ratio:3/2;height:auto}.wide-photo.cinematic:after{background:linear-gradient(0deg,#050505 0%,transparent 45%)}.wide-photo.cinematic .photo-caption{position:relative;left:auto;right:auto;bottom:auto;padding:16px 22px 23px;background:#050505;display:block}.wide-photo.cinematic .photo-caption>span{font-size:28px}.wide-photo.cinematic .photo-caption small{display:block;max-width:none;text-align:left;margin-top:13px;color:#aaa;font-size:8px;letter-spacing:.7px}.motion-toggle{top:12px;right:12px;font-size:8px;padding:9px 12px}.gallery{grid-template-columns:1fr 1fr}.gallery-photo:last-child{grid-column:1/-1}.gallery-photo:last-child img{height:340px}}@media(prefers-reduced-motion:reduce){.cinematic>img,.wide-photo.cinematic:before{animation:none!important;will-change:auto}.motion-toggle{display:none}}
.gallery{grid-template-columns:repeat(2,1fr)}@media(max-width:600px){.gallery-photo:last-child{grid-column:auto}.gallery-photo:last-child img{height:240px}}
/* Shared brand furniture */
h1,h2,h3,nav,.btn,.text-link{text-transform:uppercase}h1,h2,h3{color:var(--ml-white)}.footer-main{grid-template-columns:1.5fr 1fr 1fr 1fr;max-width:var(--max);margin:auto}.footer-main>div:first-child p{max-width:300px}.newsletter{max-width:var(--max);margin:0 auto 48px;padding:30px 0;border-bottom:1px solid var(--ml-border);display:flex;align-items:center;justify-content:space-between;gap:25px}.newsletter h3{margin-bottom:12px}.newsletter p{max-width:600px;font-size:14px}.legal{display:flex;flex-wrap:wrap;gap:22px;margin-top:28px;font-size:12px;color:var(--ml-text-dim)}.social-links{display:flex;gap:16px}.social-links a{color:var(--ml-text);display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--ml-border);border-radius:50%}.social-links svg{width:20px;height:20px;fill:currentColor}.privacy-notice{position:fixed;left:20px;bottom:20px;z-index:40;max-width:370px;padding:20px;background:var(--ml-charcoal);border:1px solid var(--ml-border);border-radius:var(--radius);box-shadow:var(--shadow-pink);font-size:12px}.privacy-notice p{margin:8px 0 16px}.privacy-notice button{background:var(--ml-pink);border:0;border-radius:999px;padding:10px 18px;color:var(--ml-black)}.privacy-notice[hidden]{display:none}.privacy-settings{border:0;padding:0;background:none;color:inherit;font:inherit;text-decoration:underline}.header-actions .order{font-size:12px}.site-header{gap:25px}.desktop-nav{gap:20px}.header-actions .btn{padding:14px 16px}
@media(max-width:1250px){.store{display:none!important}.desktop-nav{gap:16px}.site-header{gap:20px}}
@media(max-width:1000px){.header-actions .order{display:none}}
@media(max-width:600px){.newsletter{align-items:flex-start;flex-direction:column}.footer-main{grid-template-columns:1fr 1fr}.footer-main>div:first-child{display:block}.footer-main>div:first-child p{max-width:none}.privacy-notice{bottom:85px;left:16px;right:16px;max-width:none}.header-actions .btn{padding:13px 16px}.btn{max-width:100%;white-space:normal}.gallery-photo{min-width:0}}
/* ============================================================
CASE · uppercase lives in CSS, never in the markup
------------------------------------------------------------
Matches the main Milky Lane build: headings and labels are
authored in title case and uppercased here. Keeps the markup
readable for screen readers and search, keeps copy liftable,
and makes a sentence-case variant a CSS change instead of a
content edit.
h1, h2, h3, nav, .btn and .text-link are already covered
above. These are the remaining label, tag and caption marks.
============================================================ */
.photo-tag,
.photo-caption small,
.pillars article span,
.event-card span,
.hero-bottom span,
.ticker,
.closing,
.form-top span,
.form-top small,
.partnership span,
.motion-toggle,
.contact span,
.gallery-photo span,
.footer-bottom span,
.label {
text-transform: uppercase;
}
/* Pill radius, matching --radius tokens and the main site's .btn */
.btn { border-radius: 999px; }
/* ============================================================
DRIFT CONTAINMENT
------------------------------------------------------------
.cinematic>img runs camera-drift, scaling to 1.035. The
containers were overflow:visible, so at the top of the zoom
the photo spilled roughly 10 to 17px past its own box,
depending on viewport width.
That matters because the gradient that fades each photo into
the black page is an :after pinned to inset:0, so it only
covers the box. Anything that escapes the box escapes the
fade, and what escaped at the hero's left edge was a column
of the truck's pink neon. It read as a stray pink highlight
line running the full height of the hero, and it came and
went on an 18s cycle, which is why it looked intermittent.
Clipping each drift container to its own bounds fixes it at
the source. The animation is unchanged.
============================================================ */
.hero-picture,
.wide-photo.cinematic,
.concept.cinematic,
.cinematic {
overflow: hidden;
}
/* ============================================================
SECTION IMAGERY
------------------------------------------------------------
Two devices borrowed from the main Milky Lane build, using
its own assets rather than anything invented here:
1. Transparent food cutouts ("flying food") floated into the
section margins to break up long runs of dark panel.
2. Full-bleed mural strips between the big blocks, captioned
with the venue, exactly as the main site captions them.
The cutouts are decorative only. They carry empty alt text
and aria-hidden, so a screen reader skips them instead of
reading out a burger in the middle of an enquiry form, and
pointer-events:none keeps them from stealing clicks from the
content sitting over them.
============================================================ */
.section { position: relative; overflow: hidden; }
/* Content sits above the accents */
.section > .section-heading,
.section > .intro-copy,
.section > .wide-photo,
.section > .pillars,
.section > .event-grid,
.section > .partnership,
.section > .gallery-title,
.section > .gallery-photo,
.section > form,
.section > div { position: relative; z-index: 1; }
.food-accent {
position: absolute;
z-index: 0;
pointer-events: none;
user-select: none;
filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .7));
}
/* Each one is placed to sit in the gutter the layout already
leaves, so nothing has to move to make room. */
/* The intro copy column runs to the right edge, so this one is
pushed mostly off-canvas and dropped back in opacity. It reads
as texture behind the paragraph rather than a collision. */
.fa-intro { top: -80px; right: -110px; width: clamp(200px, 21vw, 340px); transform: rotate(-8deg); opacity: .5; }
/* The events section has no left gutter: the cards span the full
width and the partnership strip sits under them. A second
cutout there landed on top of "Let's find your format", so the
section keeps one, top right, where the deck copy leaves room. */
.fa-events-b { top: -30px; right: -60px; width: clamp(200px, 21vw, 340px); transform: rotate(-12deg); }
.fa-gallery { top: 20px; right: -70px; width: clamp(190px, 19vw, 300px); transform: rotate(9deg); opacity: .9; }
.fa-booking { bottom: -50px; left: -70px; width: clamp(190px, 19vw, 310px); transform: rotate(-7deg); opacity: .92; }
/* Clears the first FAQ row */
.fa-faq { top: -60px; right: -75px; width: clamp(180px, 18vw, 300px); transform: rotate(11deg); opacity: .85; }
/* Below the desktop layout the gutters disappear, so the
cutouts would sit on top of the copy. Pull them back to a
faint corner flourish, and drop the busiest ones entirely. */
@media (max-width: 900px) {
.food-accent { width: clamp(130px, 34vw, 200px); opacity: .5; filter: drop-shadow(0 16px 26px rgba(0,0,0,.8)); }
.fa-intro { top: -24px; right: -46px; }
.fa-gallery { display: none; }
.fa-events-b { top: -20px; right: -44px; }
.fa-booking { bottom: -30px; left: -46px; }
.fa-faq { top: -8px; right: -44px; }
}
@media (max-width: 560px) {
.fa-events-b, .fa-faq { display: none; }
.food-accent { opacity: .4; }
}
/* Anyone who asked for less motion gets the flat version */
@media (prefers-reduced-motion: reduce) {
.food-accent { filter: none; }
}
/* ---------- Mural dividers ---------- */
.mural-divider {
position: relative;
height: clamp(200px, 26vw, 400px);
overflow: hidden;
background: var(--ml-black);
}
.mural-divider > img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
filter: brightness(.82);
}
/* Fades the strip into the black page top and bottom so it
reads as part of the scroll rather than a pasted-in band. */
.mural-divider::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(0deg, #050505 0%, transparent 38%),
linear-gradient(180deg, #050505 0%, transparent 24%);
pointer-events: none;
}
.mural-divider > span {
position: absolute; right: 24px; bottom: 18px; z-index: 2;
font-family: var(--display);
text-transform: uppercase;
font-size: 11px; letter-spacing: 2px;
color: var(--ml-text-dim);
}
@media (max-width: 700px) {
.mural-divider { height: clamp(160px, 42vw, 240px); }
.mural-divider > span { right: 16px; bottom: 12px; font-size: 9px; }
}
/* ------------------------------------------------------------
Intrinsic width/height attributes are now on every image so
the browser can reserve space and the page stops shifting as
things load. Where CSS drives the width, height must go back
to auto or the attribute would squash the aspect ratio.
------------------------------------------------------------ */
.food-accent { height: auto; }
/* Footer and inline links were under the 24px minimum tap
target. Padding only, nothing moves visually. */
.legal a,
.legal button,
.contact a { display: inline-block; padding: 4px 2px; }
/* ============================================================
CTA BANDS
------------------------------------------------------------
Slim full-width prompts between the big blocks. The enquiry
form is the first section now, so once someone scrolls past
it these are what carry them back to it.
Deliberately low-key: one line of copy and a button, on the
page background rather than a panel, so they read as a nudge
between sections instead of an advert interrupting them.
============================================================ */
.cta-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding: 54px max(4%, calc((100% - 1320px) / 2));
border-top: 1px solid var(--ml-border);
border-bottom: 1px solid var(--ml-border);
background: linear-gradient(180deg, #0f0f12, var(--ml-ink));
}
.cta-band .eyebrow { margin-bottom: 6px; }
.cta-band p {
margin: 0;
max-width: 54ch;
color: var(--ml-text);
font-size: 15px;
}
/* The FAQ answer list and the closing line both end in a button
that needs breathing room above it. */
/* Left-aligned to sit under the answers, not centred in the column */
.faq-cta { display: inline-flex; margin-top: 34px; }
/* The closing line is a text block, so an inline-flex button
runs up alongside "the quiet ones." instead of sitting under
it. width:fit-content with auto margins forces its own line
and centres it under the statement. */
.closing-cta {
display: flex;
width: fit-content;
margin: 40px auto 0;
font-size: 16px;
}
.concept-copy .text-link { display: inline-block; margin-bottom: 20px; }
@media (max-width: 760px) {
.cta-band {
padding: 40px 5%;
gap: 22px;
flex-direction: column;
align-items: flex-start;
}
.cta-band .btn { width: 100%; }
.cta-band .eyebrow { font-size: 28px; }
.closing-cta { margin-top: 28px; }
.faq-cta { width: 100%; }
}