/* Villa Rosavelle preview. One night sky, gold lettering, the film on top. */ :root{ --navy:#0B1230; --navy-2:#111A3F; --navy-3:#182352; --plum:#2A1630; --plum-2:#1C0F22; --emerald:#0F3D33; --emerald-2:#0A2B24; --cream:#F6EEDF; --cream-2:#EBDFC8; --ink:#2B1E2A; --ink-2:#4A3A45; --burgundy:#6E1B30; --burgundy-2:#8A2340; --gold:#C9A24A; --gold-light:#F3DD98; --gold-deep:#826220; --gold-pale:#E8D5A0; --rose:#E7A2B4; --text:#F3EADB; --text-2:#C9C3D6; --line-gold:rgba(201,162,74,.38); --line-gold-strong:rgba(201,162,74,.7); --shadow-card:0 26px 60px rgba(0,0,0,.42); --display:"Cinzel",Georgia,"Times New Roman",serif; --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --script:"Great Vibes","Brush Script MT",cursive; --sans:Montserrat,"Helvetica Neue",Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8); --gold-grad:linear-gradient(180deg,#FBEBB4 0%,#EDCF7C 28%,#D2AC55 52%,#A9822F 74%,#EBD08A 100%); --header-h:100px; } /* ===== Header + hero finishing (PROMPT-HERO-FINAL.md). This block wins over anything below. ===== */ :root{ --font-display:"Cinzel",Georgia,serif; --font-deco:"Cinzel Decorative","Cinzel",Georgia,serif; --font-script:"Pinyon Script",cursive; --font-body:"Cormorant Garamond",Georgia,serif; --gold-1:#FBF0C4; --gold-2:#E7C56B; --gold-3:#C9982F; --gold-4:#8A6412; --gold-ui:#D9B76A; --navy-900:#060B1E; --navy-800:#0B1230; --cream:#F3E9D2; --cream-dim:rgba(243,233,210,.82); --wa:url("whatsapp.svg"); } /* METALLIC GOLD TEXT. CRITICAL: text-shadow does NOT render on transparent text. The glow MUST come from filter: drop-shadow(). Do not change this to text-shadow. */ .gold{ background-image:linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 62%, var(--gold-4) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter: drop-shadow(0 0 26px rgba(255,198,88,.40)) drop-shadow(0 0 8px rgba(255,214,130,.30)) drop-shadow(0 2px 3px rgba(0,0,0,.60)); } /* The gradient paints only inside the box: give script swashes and tall capitals room (net zero layout). */ .gold{padding:.42em .45em .18em;margin:-.42em -.45em -.18em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .headline{ font-family:var(--font-display); font-weight:600; font-size:clamp(2rem,8.2vw,5.2rem); line-height:.98; /* tight. do not raise this value. */ letter-spacing:.005em; margin:0; } @media(min-width:769px){ .headline{ font-size:clamp(2.6rem,5.6vw,5.2rem); } } .headline>span{ display:block; white-space:nowrap; } @media(max-width:640px){ .headline>span{ white-space:normal; } } .subtitle{ font-family:var(--font-body); font-weight:500; text-transform:uppercase; font-size:clamp(.82rem,1.45vw,1.2rem); letter-spacing:.20em; line-height:1.5; color:var(--cream); text-shadow:0 1px 2px rgba(0,0,0,.55); text-wrap:balance; max-width:26ch; margin:0 auto; } /* One text column. This gap replaces all paragraph margins. */ .stanza{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.34em; max-width:34ch; margin:0 auto; } .stanza>*{ margin:0; } .orn{ display:block; height:auto; opacity:.95; margin:.45em auto; } .orn--divider{ width:clamp(180px,22vw,340px); } .btn-gold{ display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#F0DCA0 0%,#D9B76A 45%,#B8912F 100%); color:#2A1E05; text-decoration:none; font-family:var(--font-body); font-weight:600; letter-spacing:.16em; text-transform:uppercase; border:0; border-radius:999px; padding:.9rem 1.8rem; box-shadow:0 6px 18px rgba(184,145,47,.35); } /* The phone hero (the film is scroll-driven and keeps its own track; these rules dress the static hero) */ .hero-static{ position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; } .hero-media, .hero-media img, video.hero-media{ position:absolute; inset:0; width:100%; height:100%; } .hero-media img, video.hero-media{ object-fit:cover; object-position:50% 45%; } @media(max-width:768px){ .hero-media img, video.hero-media{ object-position:50% 40%; } } .hero-static::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(70% 60% at 50% 45%, rgba(6,11,30,.55), transparent 72%), linear-gradient(0deg, rgba(6,11,30,.85) 0%, transparent 45%); } .hero-static .stanza, .band-1 .stanza{ position:relative; z-index:2; padding:0 6vw; } /* the stanza spans the hero so the two nowrap headline lines have room (34ch of body text is narrower than one line) */ .hero-static .stanza, .band-1 .stanza{ max-width:none; width:100%; } .wa-mark{ display:inline-block; width:1.25em; height:1.25em; vertical-align:-.22em; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); -webkit-mask:var(--wa) center / contain no-repeat; mask:var(--wa) center / contain no-repeat; } .btn-gold .wa-mark{ background:#2A1E05; margin-right:.6em; } .wa-fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(120% 120% at 30% 25%,#17224A 0%,#0B1230 70%); border:1px solid rgba(217,183,106,.55); box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 0 6px rgba(217,183,106,.08); z-index:60; } .wa-fab .wa-mark{ width:30px; height:30px; background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); } .wa-tip{ font-family:var(--font-body); font-size:.9rem; letter-spacing:.05em; color:var(--cream); background:rgba(11,18,48,.94); border:1px solid rgba(217,183,106,.35); border-radius:999px; padding:.55rem .95rem; box-shadow:0 6px 20px rgba(0,0,0,.4); } @media(max-width:768px){ .wa-tip{ display:none; } } .wa-float{position:fixed;right:calc(16px + 60px + 12px);bottom:calc(16px + env(safe-area-inset-bottom) + 12px);z-index:60} .wa-tip{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap} .wa-tip.gone{display:none} @media(max-width:768px){ .wa-tip{ display:none; } } .wa-tip button{border:0;background:rgba(217,183,106,.18);color:var(--cream);width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:grid;place-items:center} .site-header{ position:absolute; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:.9rem; padding:1rem clamp(1rem,4vw,2.5rem); } .site-header::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(6,11,30,.72),transparent); } /* the booking bar must stay with the visitor through the whole film, so the header is fixed, not absolute */ .site-header{position:fixed;pointer-events:none} .site-header>*{position:relative;pointer-events:auto} .brand{ position:relative; display:flex; align-items:center; gap:.8rem; } .brand-name{ font-family:var(--font-display); font-weight:600; letter-spacing:.14em; font-size:clamp(1rem,2.6vw,1.6rem); color:var(--gold-ui); line-height:1; } .brand-tagline{ font-family:var(--font-body); font-size:clamp(.55rem,2.1vw,.72rem); letter-spacing:.28em; text-transform:uppercase; color:var(--cream-dim); line-height:1.4; white-space:nowrap; } /* WhatsApp mark: the sprite glyph itself, dark ink on the gold button, gold on the navy floating button */ .wa-ico{width:1.25em;height:1.25em;flex:none;fill:currentColor;display:inline-block;vertical-align:-.22em} .btn-gold .wa-ico{color:#2A1E05;margin-right:.6em} .wa-fab{background:radial-gradient(120% 120% at 30% 25%,#1B2A5E 0%,#0B1230 70%);border:1.5px solid rgba(233,204,120,.85);box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 0 6px rgba(217,183,106,.10),0 0 22px rgba(233,204,120,.35)} .wa-fab .wa-ico{width:34px;height:34px;color:#EBD08A;display:block;vertical-align:0} .wa-fab:hover{background:radial-gradient(120% 120% at 30% 25%,#25D366 0%,#128C7E 70%);border-color:transparent} .wa-fab:hover .wa-ico{color:#fff} @media(max-width:480px){ .btn-gold{white-space:nowrap;font-size:.92rem;padding:.9rem 1.4rem} } .bb-icon{ display:inline-flex; width:1.15em; height:1.15em; color:var(--gold-ui); } .bb-icon svg{ width:100%; height:100%; } /* Mobile-only hero typography (brief 2026-09-05). Same breakpoint the hero already uses; scoped to the phone hero, so the film hero on desktop is untouched. */ @media(max-width:768px){ .hero-static .stanza::before,html.rv-frames .band-1 .stanza::before{content:"";position:absolute;inset:-16% -10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 56% at 50% 50%,rgba(8,6,16,.62) 0%,rgba(8,6,16,0) 70%)} .hero-static .headline,html.rv-frames .band-1 .headline{font-weight:700;font-size:clamp(2.16rem,8.86vw,5.6rem);line-height:.94} .hero-static .headline .gold,html.rv-frames .band-1 .headline .gold{font-weight:700;background-image:linear-gradient(178deg,#FFF6D8 0%,#F7D785 42%,#D9A23C 78%,#B9812A 100%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.9)) drop-shadow(0 0 16px rgba(255,198,92,.45)) drop-shadow(0 0 40px rgba(255,168,48,.22))} .hero-static .subtitle,html.rv-frames .band-1 .subtitle{color:#F7EBD2;font-weight:500;letter-spacing:.13em;text-shadow:0 2px 4px rgba(0,0,0,.85)} .hero-static .btn-gold,html.rv-frames .band-1 .btn-gold{color:#2A1A08;font-weight:700;box-shadow:0 0 0 1px rgba(255,240,200,.5) inset,0 6px 24px rgba(255,180,60,.35)} .hero-static .btn-gold .wa-ico,html.rv-frames .band-1 .btn-gold .wa-ico{color:#2A1A08} } /* Hero title between the phone and desktop sizes (641 to 768 wide, fix 2026-09-22). From 641px the two headline lines no longer wrap, but neither hero had a size for nowrap lines here: the static hero kept the phone size (8.86vw) and the film hero, shown in landscape windows 721 to 768 wide, kept the base 8.2vw, so the title was cut off and the static column slid off centre. Here the size follows the width alone: - static hero (portrait tablets, sideways phones, narrow windows): 5.4vw, longer line 83.6% of the width, 2.2vw inside the 6vw padding; - film hero: 5.6vw, the approved desktop formula without its 2.6rem floor (the floor would push the line past the padding below 743px), 85.8% of the width like the desktop hero, continuous with 769px. The .02px edges close the sub-pixel slivers (640,641) and (768,769) that fractional zoom and display scaling create; they never match at 640px or 769px, so phones up to 640px and the desktop film page from 769px are untouched. Only the size changes. */ @media (min-width:640.02px) and (max-width:768.98px){ .hero-static .headline{font-size:5.4vw} .band-1 .headline{font-size:5.6vw} } /* The narrowest phones (below 376 wide, fix 2026-10-11, audit PHONE-01): the gold pill does not wrap and is 330.6px wide, wider than the static hero's column (88vw inside the 6vw padding) below 376px, so the column grew past the screen (at 320: 24.5px off centre, the pill 29.8px past the right edge). Here the pill tracks like the subtitle above it (.13em), its side padding steps from 1.4rem to 1.1rem and its size follows the column (88vw less the 2.2rem padding and 2px, over the label's 18.8em: icon, gap and 23 tracked capitals), never above the approved .92rem. Same colours, weight, pill and icon. The .98 edge also covers the fractional widths (375,376); from 376px nothing here matches. The headline already fits once the column fits (it wraps at its 2.16rem floor). */ @media (max-width:375.98px){ .hero-static .btn-gold,html.rv-frames .band-1 .btn-gold{font-size:min(.92rem,calc((88vw - 2.2rem - 2px) / 18.8));letter-spacing:.13em;padding:.9rem 1.1rem} } /* Journey text blocks: one spacing system, quick soft fades. Desktop breakpoint only; the film never shows on phones. */ @media (min-width:769px){ .band{--jt-line:clamp(1px,.15vw,3px);--jt-phrase:clamp(9px,1vw,16px);--jt-orn:clamp(6px,.75vw,12px);transition:opacity .35s ease-out} .band:not(.live){transition-duration:.3s} .band .cap-block{display:flex;flex-direction:column;gap:var(--jt-phrase)} .band .phrase{display:flex;flex-direction:column;gap:var(--jt-line);align-items:inherit} .pos-left .cap-block,.pos-bl .cap-block{align-items:flex-start} .pos-right .cap-block{align-items:flex-end} .pos-top .cap-block{align-items:center} .band .ln,.band .sub-film,.band .mix-film,.band .h-film,.band .h-film-lg,.band .h-film-sm,.band .script-film{margin:0} .band .h-film{line-height:1.02} .band .h-film-lg{line-height:.95} .band .h-film-sm{line-height:1.05} .band .sub-film{line-height:1.2} .band .script-film{line-height:.85} .band .mix-film{line-height:1} .band .b-orn{width:0;min-width:min(56%,300px);height:30px;margin:calc(var(--jt-orn) - var(--jt-phrase)) 0} .band .b-orn.sm{width:0;min-width:min(40%,180px);height:22px} .band .b-orn.tiny{width:30px;min-width:0;height:28px} /* the block shrinks to its longest line, and every ornament centres on that axis with the same breathing room above and below */ .pos-left .cap-block,.pos-bl .cap-block,.pos-right .cap-block{width:fit-content;max-width:100%} .pos-right .cap-block{margin-left:auto} .band .b-orn{align-self:center} /* a script swash climbs above its line box: a mixed line reserves that room so the ornament above it keeps its breathing space */ .band .mix-film{padding-top:.8em} /* the lotus drawing sits low in its symbol box; centre the ink */ .band .b-orn use[href="#o-lotus"]{transform:translateY(-3.5px)} /* the bathroom and bedroom blocks were eating half the frame */ .band-7 .h-film-lg,.band-8 .h-film-lg{font-size:clamp(1.8rem,.9rem + 2.6vw,3.6rem)} .band-7 .h-film,.band-8 .h-film{font-size:clamp(1.3rem,.8rem + 1.9vw,2.7rem)} .band-7 .h-film-sm,.band-8 .h-film-sm{font-size:clamp(1rem,.7rem + 1.1vw,1.8rem)} .band-7 .sub-film,.band-8 .sub-film{font-size:clamp(.85rem,.7rem + .5vw,1.15rem)} .band-7 .swash,.band-8 .swash{font-size:1.3em} /* the scrim: soft shading just behind the words, feathered, never a panel */ .band::before{inset:-14% -16%;opacity:calc(.25 + .55*var(--k,1));background:radial-gradient(ellipse 58% 54% at 50% 50%,rgba(4,5,12,var(--sa,.55)) 0%,rgba(4,5,12,calc(var(--sa,.55)*.45)) 42%,rgba(4,5,12,0) 72%)} .band-1::before{inset:-40% -20%} .band-2{--sa:.5}.band-3{--sa:.5}.band-4{--sa:.55}.band-5{--sa:.5}.band-6{--sa:.55}.band-7{--sa:.5}.band-8{--sa:.5} } /* Butterflies: one page-wide layer, five at most, transform and opacity only (desktop breakpoint only) */ .bfly-layer{display:none} @media (min-width:769px){ .bfly-layer{display:block;position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden} .bfly{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity} .bfly svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--gold-light);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(201,162,74,.55))} .bfly .rosefill{fill:rgba(231,162,180,.35);stroke:none} .bfly .wl,.bfly .wr{transform-box:fill-box;transform-origin:100% 50%;animation:flapL var(--wing,.9s) ease-in-out var(--wdelay,0s) infinite alternate} .bfly .wr{transform-origin:0 50%;animation-name:flapR} .bfly.rest .wl,.bfly.rest .wr{animation-duration:calc(var(--wing,.9s)*2.6)} .fx .butterfly{display:none} } @media (prefers-reduced-motion:reduce){.bfly-layer{display:none!important}} /* ===== end header + hero finishing ===== */ *{box-sizing:border-box} html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--navy);color:var(--text);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;animation:pagein .9s var(--ease) backwards} @keyframes pagein{from{opacity:0}} img{max-width:100%;height:auto} a{color:inherit} .wa-go{cursor:pointer} /* WhatsApp buttons whose address is built at the click (site.js waButton) */ p{margin:0 0 1em} h1,h2,h3,h4{margin:0;font-weight:400} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:8px;font:600 .9rem var(--sans);text-decoration:none;transition:top .3s var(--ease)} .skip:focus{top:16px} .sprite{position:absolute;width:0;height:0;overflow:hidden} /* The sky: one fixed night, drifting slowly, with faint grain */ .sky{position:fixed;inset:-10%;z-index:0;pointer-events:none; background: radial-gradient(ellipse 60% 36% at 50% 104%,rgba(96,52,110,.30),rgba(96,52,110,0) 70%), radial-gradient(ellipse 70% 55% at 18% 0%,rgba(40,52,120,.5),rgba(40,52,120,0) 70%), radial-gradient(ellipse 50% 40% at 88% 30%,rgba(28,36,92,.6),rgba(28,36,92,0) 70%), linear-gradient(180deg,#121B44 0%,var(--navy) 55%,#080D24 100%)} .sky::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px} .live-sky .sky{animation:skydrift 90s ease-in-out infinite alternate} @keyframes skydrift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2.5%,1.8%,0)}100%{transform:translate3d(2%,-2.2%,0)}} .stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55; background-image:radial-gradient(1px 1px at 12% 18%,rgba(255,240,200,.9),transparent 60%),radial-gradient(1px 1px at 72% 8%,rgba(255,240,200,.8),transparent 60%),radial-gradient(1.5px 1.5px at 88% 32%,rgba(255,240,200,.7),transparent 60%),radial-gradient(1px 1px at 40% 6%,rgba(255,240,200,.7),transparent 60%),radial-gradient(1px 1px at 58% 26%,rgba(255,240,200,.6),transparent 60%),radial-gradient(1.2px 1.2px at 22% 42%,rgba(255,240,200,.5),transparent 60%),radial-gradient(1px 1px at 92% 64%,rgba(255,240,200,.6),transparent 60%),radial-gradient(1px 1px at 6% 76%,rgba(255,240,200,.5),transparent 60%)} .live-sky .stars{animation:twinkle 9s ease-in-out infinite alternate} @keyframes twinkle{from{opacity:.35}to{opacity:.7}} /* ---------- Type ---------- */ .h-film.gold,.h-film-lg.gold,.h-xl.gold,.h-lg.gold,.script-film.gold{-webkit-text-stroke:.35px rgba(70,44,8,.42)} .gold-flat{color:var(--gold)} .gold-light{color:var(--gold-light)} .cream-caps{font-family:var(--serif);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--text)} .small-caps{font-family:var(--serif);font-variant:small-caps;letter-spacing:.06em;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem)} .h-xl{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,1.4rem + 3vw,4.4rem);line-height:1.08;letter-spacing:.02em;text-transform:uppercase} .h-lg{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,1.2rem + 2.2vw,3.2rem);line-height:1.1;letter-spacing:.02em;text-transform:uppercase} .h-md{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,1rem + 1.2vw,2.2rem);line-height:1.15;letter-spacing:.02em;text-transform:uppercase} .h-serif{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem);line-height:1.15;letter-spacing:.03em} .eyebrow{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--text)} .lede{font-family:var(--sans);font-size:clamp(1rem,.95rem + .3vw,1.18rem);line-height:1.65;color:var(--cream-2);max-width:62ch} .center{text-align:center} .center .lede{margin-left:auto;margin-right:auto} .script{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0} .swash{font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;font-size:1.55em;line-height:.6;vertical-align:-.08em;margin-right:.04em} em{font-style:italic} /* ---------- Buttons, panels, cards ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 26px;border-radius:999px;font:600 .82rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease)} .btn .ico{width:18px;height:18px;flex:none} .btn.btn-gold{background:linear-gradient(180deg,#EFD58A,#C9A24A 55%,#B08A34);color:#1B1428;box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35)} .btn.btn-gold:hover{background:linear-gradient(180deg,#F6E0A0,#D9B25A 55%,#B99039);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.4)} .btn-gold-outline{background:rgba(11,18,48,.35);color:var(--gold-light);border-color:var(--line-gold-strong);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .btn-gold-outline:hover{background:rgba(201,162,74,.14);transform:translateY(-2px)} .btn-burgundy{background:linear-gradient(180deg,#7E2038,#5E1629);color:var(--gold-light);box-shadow:0 10px 24px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12)} .btn-burgundy:hover{background:linear-gradient(180deg,#92273F,#6E1B30);transform:translateY(-2px)} .btn-lg{min-height:58px;padding:0 40px;font-size:.92rem} .btn-sm{min-height:40px;padding:0 18px;font-size:.72rem} .panel-cream{position:relative;background:linear-gradient(180deg,#FAF3E6,#F1E6D1);color:var(--ink);border-radius:14px;box-shadow:var(--shadow-card);border:1px solid rgba(201,162,74,.55)} .panel-cream::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,162,74,.5);border-radius:9px;pointer-events:none} .card-navy{position:relative;background:linear-gradient(180deg,rgba(24,35,82,.92),rgba(17,26,63,.92));border:1px solid var(--line-gold);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.35)} .hairline{border:0;border-top:1px solid var(--line-gold);margin:0} /* Ornaments */ .orn{display:block;overflow:visible;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .orn.fill{fill:currentColor;stroke:none} .hr-heart{width:min(100% - 40px,900px);height:40px;margin:0 auto 34px;color:var(--gold)} .hr-heart svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .draw,.draw path,.draw line,.draw circle,.draw ellipse,.draw polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease) var(--dd,0s)} .in .draw,.in .draw path,.in .draw line,.in .draw circle,.in .draw ellipse,.in .draw polyline{stroke-dashoffset:0} .draw .fill-in{fill:currentColor;stroke:none;opacity:0;transition:opacity .8s var(--ease) calc(var(--dd,0s) + 1.6s)} .in .draw .fill-in{opacity:1} /* ---------- Header: brand left, the booking bar right ---------- */ .brand{text-decoration:none;color:var(--text);min-height:44px} .roundel{position:relative;display:inline-block;width:68px;height:68px;border-radius:50%;background:#F8F0E4;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,74,.5);flex:none} .roundel img{position:absolute;width:104px;height:104px;left:-18px;top:-7px;max-width:none} .brand-text{display:flex;flex-direction:column;gap:.35rem} .bar{display:flex;align-items:stretch;gap:0;background:linear-gradient(180deg,rgba(14,20,50,.86),rgba(9,13,36,.9));border:1px solid var(--line-gold);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px} .bar-f{position:relative;display:flex;flex-direction:column;justify-content:center;padding:6px 18px;min-width:150px;border-right:1px solid rgba(201,162,74,.22)} .bar-f label{font:500 .62rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:6px} .bar-f .val{display:flex;align-items:center;gap:8px;font:500 .95rem/1.2 var(--sans);color:var(--text);white-space:nowrap} .bar-f .val .bb-chev{margin-left:auto;width:.9em;height:.9em} .bar-f input,.bar-f select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;color-scheme:dark;font:inherit} .bar-f input:focus-visible ~ .val,.bar-f select:focus-visible ~ .val{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px} .bar-f .val.empty .txt{color:var(--text-2)} .bar-go{display:flex;align-items:center;padding:0 0 0 12px} .bar-go .btn{min-height:46px} .bar-toggle{display:none} .bar-sheet{display:none} /* ============ THE FILM ============ */ .hero{position:relative;height:1800vh;z-index:1} .stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--navy)} .poster{position:absolute;inset:0;background:var(--navy) center/cover no-repeat} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);will-change:transform;transform:translateZ(0)} .stage.video-ready .hero-video{opacity:1} .stage.video-failed .hero-video{display:none} /* The dining cut in the film (33.7 s): the last frame before it is held on this canvas and dissolved into the next clip (site.js). */ .hero-hold{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;will-change:opacity} .stage.video-failed .hero-hold{display:none} .scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(6,8,20,0) 35%,rgba(6,8,20,.55) 100%)} .ring{position:absolute;left:50%;bottom:9vh;width:44px;height:44px;margin-left:-22px;color:var(--gold);transform:rotate(-90deg);opacity:.9;transition:opacity .6s var(--ease)} .stage.video-ready .ring,.stage.video-failed .ring{opacity:0} .ring-label{position:absolute;left:50%;bottom:calc(9vh + 54px);transform:translateX(-50%);font:500 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:var(--text);opacity:.85;text-shadow:0 1px 3px rgba(5,5,10,.85);transition:opacity .6s var(--ease)} .stage.video-ready .ring-label,.stage.video-failed .ring-label{opacity:0} .cue{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 .7rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--text);text-shadow:var(--tshadow);opacity:0;transition:opacity .8s var(--ease) .4s} .stage.video-ready .cue,.stage.video-failed .cue{opacity:.9} .hero.scrolled .cue{opacity:0;transition-delay:0s} .cue svg{width:16px;height:16px;color:var(--gold);animation:cuebob 2.4s ease-in-out infinite} @keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @media (max-height:560px){.cue,.ring,.ring-label{display:none}} /* Bands: the caption blocks, each a composition of lines and ornaments, all driven by --k */ .band{position:absolute;z-index:3;opacity:0;--k:0;pointer-events:none;will-change:opacity} .band.live{pointer-events:auto} .band::before{content:"";position:absolute;inset:-40% -30%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7*var(--k,1)); background:radial-gradient(ellipse 60% 56% at 50% 50%,rgba(4,5,12,var(--sa,.7)) 0%,rgba(4,5,12,calc(var(--sa,.7)*.6)) 46%,rgba(4,5,12,0) 74%)} .band-1{--sa:.72}.band-2{--sa:.74}.band-3{--sa:.7}.band-4{--sa:.78}.band-5{--sa:.74}.band-6{--sa:.8}.band-7{--sa:.82}.band-8{--sa:.8} .pos-top{top:calc(var(--header-h) + 3vh);left:50%;transform:translateX(-50%);width:min(92vw,960px);text-align:center} .pos-top::before{inset:-50% -20%} .band-1{left:0;right:0;width:auto;transform:none} .band-1 .ln{will-change:auto} .pos-right{top:50%;right:5vw;transform:translateY(-50%);width:min(42vw,640px);text-align:right} .pos-left{top:50%;left:5vw;transform:translateY(-50%);width:min(40vw,600px);text-align:left} .pos-bl{left:4vw;bottom:7vh;width:min(46vw,680px);text-align:left} .cap-block{position:relative} .cap{margin:0} .ln{display:block;--kc:clamp(0,(var(--k,0) - var(--th,0)) / min(.4,calc(1 - var(--th,0))),1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px));will-change:opacity,transform} .ln.gold{filter:blur(calc((1 - var(--kc))*5px)) drop-shadow(0 0 26px rgba(255,198,88,.40)) drop-shadow(0 0 8px rgba(255,214,130,.30)) drop-shadow(0 2px 3px rgba(0,0,0,.60))} .ln:not(.gold){text-shadow:var(--tshadow)} .h-film{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,.9rem + 2.3vw,3.3rem);line-height:1.12;letter-spacing:.03em;text-transform:uppercase;margin:.06em 0} .h-film-lg{font-family:var(--display);font-weight:700;font-size:clamp(2rem,1rem + 3.1vw,4.4rem);line-height:1;letter-spacing:.03em;text-transform:uppercase;margin:.04em 0;white-space:nowrap} .h-film-lg .swash{font-size:1.35em;margin-right:.08em} .h-film-sm{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,.8rem + 1.4vw,2.2rem);line-height:1.2;letter-spacing:.04em;text-transform:uppercase;margin:.1em 0} .sub-film{font-family:var(--serif);font-weight:500;font-size:clamp(.95rem,.78rem + .6vw,1.35rem);line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--text);margin:.35em 0} .sub-film .gold-flat{color:var(--gold-light)} .script-film{font-family:var(--script);font-size:clamp(2.4rem,1.3rem + 3.8vw,5.2rem);line-height:.95;text-transform:none;letter-spacing:0;margin:.05em 0} .mix-film{font-family:var(--serif);font-weight:500;font-size:clamp(1rem,.8rem + .7vw,1.45rem);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:.4em;margin:.2em 0} .pos-right .mix-film{justify-content:flex-end} .pos-top .mix-film{justify-content:center} .mix-film .script{font-size:2.8em;line-height:.8;color:var(--gold-light);text-shadow:0 2px 3px rgba(0,0,0,.6),0 0 22px rgba(201,162,74,.35)} .rule{display:inline-flex;align-items:center;gap:14px} .rule::before,.rule::after{content:"";height:1px;width:clamp(24px,4vw,64px);background:linear-gradient(90deg,transparent,var(--gold-light));opacity:.9} .rule::after{background:linear-gradient(90deg,var(--gold-light),transparent)} .pos-left .rule::before,.pos-bl .rule::before{display:none} .pos-right .rule::after{display:none} .b-orn{display:block;width:min(56%,300px);height:32px;margin:.35em auto;color:var(--gold-light);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;--kc:clamp(0,(var(--k,0) - var(--th,0)) / min(.42,calc(1 - var(--th,0))),1);opacity:calc(.15 + .85*var(--kc));filter:drop-shadow(0 0 6px rgba(201,162,74,.35))} .b-orn *{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--kc))} .b-orn .fill-in{fill:currentColor;stroke:none;opacity:var(--kc)} .pos-left .b-orn,.pos-bl .b-orn{margin-left:0} .pos-right .b-orn{margin-right:0} .b-orn.sm{width:min(36%,160px);height:22px} .b-orn.tiny{width:34px;height:30px} /* ============ THE STATIC HERO (phones and the other gates) ============ */ .hero-static{display:none} /* The five static-hero gates. These five strings match the JavaScript exactly. */ @media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){ .hero{display:none} .hero-static{display:grid} } /* ============ BELOW THE FILM ============ */ main{position:relative;z-index:1;display:block} main:focus{outline:none} .sec{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) clamp(20px,5vw,72px)} .wrap{position:relative;max-width:1180px;margin:0 auto} .wrap-narrow{position:relative;max-width:900px;margin:0 auto} /* Entrances */ .rv .part{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)} .rv.in .part{opacity:1;transform:none} .rv.in.done .part{transition-delay:0s} .no-js .rv .part{opacity:1;transform:none} .no-js .draw,.no-js .draw *{stroke-dashoffset:0!important} /* Living layers: petals, fireflies, butterflies, sparkles (built by site.js from data- attributes) */ .fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .fx>*{position:absolute;opacity:0;will-change:transform,opacity} .petal{top:-6%;width:16px;height:22px;background:radial-gradient(ellipse at 35% 30%,#F3B7C6,#B8385A 70%,#7A1E37);border-radius:60% 60% 60% 60%/70% 70% 30% 30%;box-shadow:inset -2px -3px 6px rgba(80,10,30,.5);filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))} .live .petal{animation:petalfall var(--dur,20s) linear var(--delay,0s) infinite} @keyframes petalfall{0%{transform:translate3d(0,0,0) rotate(0) rotateY(0);opacity:0}6%{opacity:.85}50%{transform:translate3d(var(--sway,40px),52vh,0) rotate(160deg) rotateY(180deg)}94%{opacity:.7}100%{transform:translate3d(calc(var(--sway,40px)*-.6),110vh,0) rotate(340deg) rotateY(360deg);opacity:0}} .firefly{width:5px;height:5px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 8px 3px rgba(255,214,120,.65),0 0 20px 8px rgba(255,190,80,.25)} .live .firefly{animation:fly var(--dur,14s) ease-in-out var(--delay,0s) infinite alternate,glow 3.2s ease-in-out var(--delay,0s) infinite alternate} @keyframes fly{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(var(--dx,60px),var(--dy,-40px),0)}66%{transform:translate3d(calc(var(--dx,60px)*-.5),var(--dy2,30px),0)}100%{transform:translate3d(calc(var(--dx,60px)*.8),calc(var(--dy,-40px)*-.7),0)}} @keyframes glow{0%{opacity:.15}100%{opacity:.95}} .sparkle{width:14px;height:14px;color:var(--gold-light)} .sparkle svg{display:block;width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 4px rgba(255,225,150,.8))} .live .sparkle{animation:spark var(--dur,4s) ease-in-out var(--delay,0s) infinite} @keyframes spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}} .butterfly{width:46px;height:40px;offset-rotate:auto;offset-path:var(--path);offset-distance:0} .live .butterfly{animation:flight var(--dur,26s) linear var(--delay,0s) infinite} @keyframes flight{0%{offset-distance:0;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}} .butterfly svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--gold-light);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(201,162,74,.5))} .butterfly .wl,.butterfly .wr{transform-box:fill-box;transform-origin:100% 50%;transform:perspective(120px) rotateY(0)} .butterfly .wr{transform-origin:0 50%} .live .butterfly .wl{animation:flapL .9s ease-in-out infinite alternate} .live .butterfly .wr{animation:flapR .9s ease-in-out infinite alternate} @keyframes flapL{to{transform:perspective(120px) rotateY(58deg)}} @keyframes flapR{to{transform:perspective(120px) rotateY(-58deg)}} .butterfly .rosefill{fill:rgba(231,162,180,.35);stroke:none} /* Hidden tab: pause every loop */ body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important} /* Touch targets */ @media (pointer:coarse){.btn,.link-gold{min-height:44px}} /* ---------- Responsive: header and film ---------- */ @media (max-width:1200px){ .bar-f{min-width:130px;padding:6px 12px} .pos-right,.pos-left{width:min(46vw,600px)} .pos-bl{width:min(52vw,680px)} } /* Header booking bar (fix 2026-10-11, audit DESK-04): from 1025 to 1079 wide the inline bar did not fit (its gold button was cut by the right edge, 49px at 1025), so up to 1079 the bar gives way to the "Check dates" pill and its dates sheet, exactly as at 1024. The sheet rules travel with the pill: without them the sheet stays display:none and the pill opens nothing. The 1024 sizes stay in their block. */ @media (max-width:1079px){ .bar{display:none} .bar-toggle{display:inline-flex} .bar-sheet{display:block;position:fixed;left:12px;right:12px;top:calc(var(--header-h) + 6px);z-index:55;background:linear-gradient(180deg,rgba(14,20,50,.97),rgba(9,13,36,.98));border:1px solid var(--line-gold);border-radius:14px;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)} .bar-sheet.open{opacity:1;transform:none;pointer-events:auto} .bar-sheet .bar-f{border:1px solid rgba(201,162,74,.22);border-radius:10px;margin-bottom:10px;min-height:58px} .bar-sheet .bar-go{padding:4px 0 0} .bar-sheet .btn{width:100%} } @media (max-width:1024px){ :root{--header-h:82px} .roundel{width:56px;height:56px}.roundel img{width:86px;height:86px;left:-15px;top:-6px} } @media (max-width:480px){ :root{--header-h:72px} .roundel{width:48px;height:48px}.roundel img{width:74px;height:74px;left:-13px;top:-5px} .bar-toggle{padding:0 14px;font-size:.66rem;min-height:40px} } /* Reduced motion: every drive stopped, every final state shown, no video ever loaded (it is one of the five gates) */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important} .rv .part{opacity:1;transform:none} .draw,.draw *{stroke-dashoffset:0!important} .draw .fill-in{opacity:1} .fx{display:none} .band{--k:1} .cue{display:none} } /* Desktop pass (2026-09-06): hero button legibility, chat pill, journey fades. Desktop breakpoint only; phones untouched. */ @media (min-width:769px){ /* 1. The film hero button: a dark, heavy, crisp label. The button keeps its outer glow; nothing soft sits on the text. */ .band-1 .btn-gold{color:#2A1A08;font-weight:700;text-shadow:none;filter:none} .band-1 .btn-gold .wa-ico{color:#2A1A08;filter:none} /* 2. The chat pill and the round WhatsApp button are one pair: centred on the same axis, 12px apart, dressed like the booking bar. */ .wa-float{right:calc(16px + 60px + 12px);bottom:calc(16px + env(safe-area-inset-bottom) + 30px);transform:translateY(50%)} .wa-tip{height:40px;padding:0 8px 0 18px;gap:12px;font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);background:linear-gradient(180deg,rgba(14,20,50,.88),rgba(9,13,36,.92));border:1px solid var(--line-gold-strong);border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .wa-tip button{position:relative;width:24px;height:24px;flex:none;border:1px solid rgba(217,183,106,.55);background:rgba(201,162,74,.12);color:transparent;font-size:0;line-height:0;transition:background .2s ease,border-color .2s ease} .wa-tip button::before,.wa-tip button::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;border-radius:1px;background:var(--gold-light);transform:translate(-50%,-50%) rotate(45deg)} .wa-tip button::after{transform:translate(-50%,-50%) rotate(-45deg)} .wa-tip button:hover{background:rgba(201,162,74,.28);border-color:var(--gold-light)} /* 3. Gold lines keep the .gold padding (it protects the swashes from the gradient clip) and get its cancelling margin back, so their ink sits flush with the other lines and the breathing room around ornaments is measured from the ink. The hero is left as signed off. */ .band:not(.band-1) .ln.gold{margin:-.42em -.45em -.18em} /* 4. Journey lines: the scroll position triggers each line, the fade itself runs in time, so a fade always completes. The hero keeps its signed-off entrance. */ .band:not(.band-1) .ln{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 1000,1);transition:opacity .38s ease-out,transform .38s ease-out,filter .38s ease-out} .band:not(.band-1) .b-orn{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 1000,1);transition:opacity .5s ease-out,transform .5s ease-out} .band:not(.band-1) .b-orn *{transition:stroke-dashoffset .9s ease-out} .band:not(.band-1) .b-orn .fill-in{transition:opacity .5s ease-out .3s} } /* Phone pass (2026-09-08): ornament ink and divider symmetry. Phone breakpoint only (max-width:768px); desktop untouched. */ @media (max-width:768px){ /* 1. Sprite ornaments: the stroke is pinned to CSS pixels (vector-effect), so it no longer thins with the box. The flag rides down into every instance through the inherited custom property; the film and the phone hero sit outside main and keep their own ink. Inline drawings (the FAQ frangipani) keep their authored, scaled stroke. */ main .orn:has(> use), main .hr-heart svg:has(> use){--orn-ve:non-scaling-stroke} path,circle,ellipse,line,polyline,polygon{vector-effect:var(--orn-ve,none)} /* Their entrance becomes a centre-out iris. With pinned strokes Chrome keeps dash lengths in symbol units, so the traced draw would stop short on glyphs shown above 1:1 and finish early below it; the iris is scale-free and mirrored in every frame. */ main .orn.draw:has(> use), main .orn:has(> use.draw), main .hr-heart svg.draw:has(> use){stroke-dasharray:none;stroke-dashoffset:0;clip-path:circle(0 at 50% 50%);transition:clip-path 2.2s var(--ease) var(--dd,0s)} main .orn > use.draw{stroke-dasharray:none;stroke-dashoffset:0} main .in .orn.draw:has(> use), main .in .orn:has(> use.draw), main .in .hr-heart svg.draw:has(> use){clip-path:circle(80% at 50% 50%)} .no-js main .orn, .no-js main .hr-heart svg{clip-path:none} /* 2. The heart in the shared divider symbols (#o-heart-line, #o-heart-swirl) is drawn 3 units left of the symbol axis: centre it. */ .orn-heart{transform:translate(3px,0)} } @media (max-width:768px) and (prefers-reduced-motion:reduce){ main .orn, main .hr-heart svg{clip-path:none} } /* Phone components (2026-09-08 night). Phone breakpoint only (max-width:768px); desktop untouched. 1. THE PERSISTENT HEADER: one shared component on every section. The markup is the single
in index.template.html (logo mark + name and tagline, gold "Check dates" pill); the round WhatsApp button (.wa-fab) stays fixed bottom-right. Behaviour lives in site.js and is chosen by the attribute on the header: data-header="reveal" (chosen): slides away while the guest scrolls down, returns on the first scroll up, always shown near the top of the page and while the dates sheet is open. data-header="pin": always shown. Over the very top of the page it keeps the approved gradient scrim; once scrolled it carries a navy band with a gold hairline (.is-solid) so no section ever bleeds through the lettering. Nothing here changes the logo, button or spacing. */ @media (max-width:768px){ .site-header{transform:translate3d(0,0,0);transition:transform .38s var(--ease);will-change:transform;backface-visibility:hidden} .site-header.is-hidden{transform:translate3d(0,-110%,0)} .site-header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(6,11,30,.97),rgba(8,13,36,.94));border-bottom:1px solid rgba(201,162,74,.32);box-shadow:0 10px 28px rgba(0,0,0,.35);opacity:0;transition:opacity .3s var(--ease)} .site-header.is-solid::after{opacity:1} /* tap targets: the pill grows to 44px tall (its label and padding are unchanged) */ .site-header .bar-toggle{min-height:44px} /* the dates sheet hangs just under the 80px header instead of overlapping its last 2px */ .bar-sheet{top:calc(var(--header-h) + 14px)} /* 2. THE LIVING LAYER (assets/living.css + assets/living.js) replaces the per-section petals, fireflies and butterflies on phones with one page-wide layer; the sparkles stay, they belong to each section's décor. */ .fx .petal,.fx .firefly,.fx .butterfly{display:none} /* speed-only (2026-10-10 profile): .fx>*{will-change} kept all 60 sparkles composited, 40 of them off screen at opacity 0. Chrome composites a sparkle anyway while .live .sparkle animates, so the pixels are the same; 50 to 60 fewer layers on a phone. */ main .fx>*{will-change:auto} } /* Narrow phones (360 to 414 wide): the brand line and the pill tighten a little so the pill is never cut off by the right edge (the approved sizes overflowed the viewport by 4px at 390 and by 34px at 360). Same component, same parts; only tracking and padding move. */ @media (max-width:420px){ .site-header{gap:.6rem;padding-left:12px;padding-right:12px} .site-header .brand{gap:.6rem} .site-header .brand-tagline{font-size:.5rem;letter-spacing:.2em} .site-header .bar-toggle{padding:0 12px;letter-spacing:.1em} } @media (max-width:420px){ .site-header .brand-name{white-space:nowrap} } /* the narrowest phones (360 to 375 wide): the mark and both lines step down one notch so the whole header still sits on one line */ @media (max-width:380px){ .site-header{gap:.5rem} .site-header .brand{gap:.5rem} .site-header .roundel{width:44px;height:44px} .site-header .roundel img{width:68px;height:68px;left:-12px;top:-4.6px} .site-header .brand-name{font-size:.9rem;letter-spacing:.1em} .site-header .brand-tagline{font-size:.47rem;letter-spacing:.18em} .site-header .bar-toggle{padding:0 11px;letter-spacing:.08em} } /* Section seams (2026-09-08 night). Phone breakpoint only; desktop untouched. Desktop reads as one surface because every section is transparent over the ONE fixed night sky, and whatever a section paints (the breakfast emerald, the footer plum, the aerial's navy fades) reaches transparency before its edge. On phones the narrower frame pushes glows and image edges into the section boundary, where overflow:hidden cuts them. The same rule is applied to every section at once: the first and last 44px of a section's own paint dissolve into the sky (a static mask, nothing repaints on scroll; every section keeps at least 44px of padding at its edges, so no text or ornament is touched). The footer keeps its bottom; the phone hero dissolves its last 140px into the sky so the gate meets the valley without a line. */ @media (max-width:768px){ main > .sec{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 6px,#000 44px,#000 calc(100% - 44px),rgba(0,0,0,0) calc(100% - 6px),rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 6px,#000 44px,#000 calc(100% - 44px),rgba(0,0,0,0) calc(100% - 6px),rgba(0,0,0,0) 100%)} main > .sec:last-child{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 6px,#000 44px);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 6px,#000 44px)} .hero-static{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 140px),rgba(0,0,0,0) calc(100% - 8px),rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - 140px),rgba(0,0,0,0) calc(100% - 8px),rgba(0,0,0,0) 100%)} } /* ============ THE PHONE FILM (2026-10-09) ============ The same film as desktop (same scenes, same order, same writings), drawn on portrait phone-class screens from a 9:16 WebP frame sequence on a canvas (assets/film.js) instead of the scrubbed