:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
/* Layout: a gallery visit, one page per room. Full-bleed entrance, plaster-wall collection, dark story room, programme, reserve desk with visitor information, dark gifts room. One committed look (no theme switch). */
:root{
  --wall:#E9E6DF; --wall-deep:#DAD5CA; --card:#F1EEE7; --rule:#B8B3A6;
  --ink:#16150F; --ink-soft:#4A4740; --ink-mid:#3A382F;
  --room:#16150F; --room-2:#26241F; --room-rule:#4A463C; --paper:#F4F1EA; --paper-soft:#D6D2C8;
  --accent:#7A520C; --gold:#E0B866;
  --serif:'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter:clamp(16px, 4.5vw, 64px);
  --nav-h:64px;
  color-scheme:light;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--wall);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--room)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.band{padding-left:max(var(--gutter), env(safe-area-inset-left,0px));padding-right:max(var(--gutter), env(safe-area-inset-right,0px))}
/* Pages other than the entrance start below the fixed nav */
.inner-page main{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
body.dark{background:var(--room)}
section[id], [id].anchor{scroll-margin-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(52px, 8vw, 96px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(44px, 6vw, 76px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
em, .it{font-style:italic}
.lede{max-width:440px;color:var(--ink-soft);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 32px;border:1px solid currentColor;background:transparent;color:inherit;text-decoration:none;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--wall)}
.btn.solid{background:var(--ink);color:var(--wall);border-color:var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.textlink:hover{color:var(--accent)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--paper);transition:background .3s,color .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:var(--wall);color:var(--ink);border-bottom-color:var(--rule)}
.dark .nav.solid{background:var(--room);color:var(--paper);border-bottom-color:var(--room-rule)}
.overlay nav a[aria-current="page"]{font-style:italic}
.brand{display:flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.brand-mark{display:block;height:40px;aspect-ratio:175 / 192;background:currentColor;-webkit-mask:url(images/brand/ls-mark.png) center / contain no-repeat;mask:url(images/brand/ls-mark.png) center / contain no-repeat}
@media (max-width:560px){.brand-mark{height:36px}}
.nav .links{display:flex;gap:32px}
.nav .links a{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;min-height:44px;display:flex;align-items:center;position:relative}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{transform:scaleX(1)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;color:inherit;cursor:pointer;align-items:center;justify-content:center}
.overlay{position:fixed;inset:0;z-index:70;background:var(--room);color:var(--paper);display:flex;flex-direction:column;padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 32px)}
.overlay .top{display:flex;justify-content:space-between;align-items:center;height:56px}
.overlay nav{display:flex;flex-direction:column;gap:4px;margin-top:40px}
.overlay nav a{font-family:var(--serif);font-size:52px;line-height:1.15;text-decoration:none;min-height:44px}
.overlay nav a span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;vertical-align:middle;margin-right:16px;color:var(--paper-soft)}
.overlay .foot{margin-top:auto;color:var(--paper-soft)}
@media (max-width:760px){.nav .links{display:none}.menu-btn{display:inline-flex}}

/* ---------- Music: mute and volume in the nav (sound.js) ---------- */
.nav .links{margin-left:auto}
.music{display:flex;align-items:center;gap:6px;margin-left:12px}
.music-btn{width:44px;height:44px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.music-btn:focus-visible{outline:1px solid currentColor;outline-offset:-6px}
.eq{display:flex;align-items:flex-end;gap:3px;height:14px}
.eq i{display:block;width:2px;height:100%;background:currentColor;transform-origin:50% 100%;transform:scaleY(.15);transition:transform .45s var(--ease-out)}
.music[data-state="on"] .eq i{animation:eq .9s ease-in-out infinite alternate}
.music[data-state="on"] .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.35s}
.music[data-state="on"] .eq i:nth-child(3){animation-duration:1.15s;animation-delay:-.6s}
.music[data-state="on"] .eq i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
/* waiting for a first tap: the bars stand at rest and breathe, asking to be pressed */
.music[data-state="off"] .eq i:nth-child(1){transform:scaleY(.45)}
.music[data-state="off"] .eq i:nth-child(2){transform:scaleY(.85)}
.music[data-state="off"] .eq i:nth-child(3){transform:scaleY(.6)}
.music[data-state="off"] .eq i:nth-child(4){transform:scaleY(.35)}
.music[data-state="off"] .eq{animation:eqWait 1.8s ease-in-out infinite}
@keyframes eqWait{50%{opacity:.35}}
.music[data-state="muted"] .eq{opacity:.6}
.music-vol{-webkit-appearance:none;appearance:none;width:64px;height:24px;margin:0;padding:0;background:transparent;color:inherit;cursor:pointer;--v:50%}
.music-vol::-webkit-slider-runnable-track{height:1px;background:currentColor;background:linear-gradient(currentColor,currentColor) 0 0/var(--v) 100% no-repeat,color-mix(in srgb,currentColor 35%,transparent)}
.music-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;margin-top:-5px;border:0;border-radius:50%;background:currentColor}
.music-vol::-moz-range-track{height:1px;background:currentColor;background:color-mix(in srgb,currentColor 35%,transparent)}
.music-vol::-moz-range-progress{height:1px;background:currentColor}
.music-vol::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:currentColor}
.music-vol:focus{outline:none}
.music-vol:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.home .nav .music{animation:fadeDown 1s var(--ease-out) 1.66s both}
.inner-page .nav .music{animation:fadeDown 1s var(--ease-out) .59s both}
@media (max-width:760px){.music{margin-left:auto}.music-vol{display:none}}
@media (prefers-reduced-motion:reduce){.music .eq,.music .eq i{animation:none!important}.music[data-state="on"] .eq i{transform:scaleY(.7)}}

/* ---------- Entrance ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--room-2);color:var(--paper)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;transform-origin:50% 30%}
/* WebGL hover tilt: drawn exactly over the photo, under the veil and text (see initHeroTilt in site.js) */
.hero .tilt-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero .veil{position:absolute;inset:0;background:linear-gradient(rgba(22,21,15,.38),rgba(22,21,15,.12) 40%,rgba(22,21,15,.18) 65%,rgba(22,21,15,.55))}
.hero .inner{position:relative;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px);padding-bottom:48px}
.hero h1{margin:0;text-align:center;font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(56px, 9vw, 120px);line-height:1;letter-spacing:-.02em}
.hero .sub{padding-top:16px;text-align:center;letter-spacing:.18em}
.hero .names{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 9%;font-family:var(--mono);font-size:clamp(12px,1.2vw,15px);letter-spacing:.2em;text-transform:uppercase}
/* Countdown between the two names */
.hero-cd{display:flex;align-items:flex-start;text-shadow:0 1px 18px rgba(22,21,15,.6)}
.hero-cd > div{display:flex;flex-direction:column;align-items:center;padding:0 clamp(12px,1.8vw,24px)}
.hero-cd > div + div{position:relative}
.hero-cd > div + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(244,241,234,.4);transform-origin:50% 0}
.hero-cd b{display:block;min-width:1.4em;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,56px);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.hero-cd span{padding-top:8px;font-size:10px;letter-spacing:.18em;color:var(--paper-soft)}
.hero-cd .cd-msg{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.01em;text-align:center;text-wrap:balance;animation:fadeUp 1.1s var(--ease-out) 1.35s both}
@media (max-width:640px){.hero .names{flex-wrap:wrap;row-gap:20px}.hero-cd{order:3;flex-basis:100%;justify-content:center}}
.hero .foot{display:flex;flex-direction:column;align-items:center;gap:24px}
.hero .date{font-family:var(--mono);font-size:clamp(15px,1.6vw,22px);letter-spacing:.32em;font-variant-numeric:tabular-nums}
.hero .btn{border-color:var(--paper);color:var(--paper)}
.hero .btn:hover{background:var(--paper);color:var(--ink)}
.hero .btn svg{transition:transform .3s}
.hero .btn:hover svg{transform:translateX(3px)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.hero .btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero .btn.solid:hover{background:transparent;color:var(--paper)}
@media (max-width:560px){.hero .names{padding:0}.hero-actions{width:100%;flex-direction:column}.hero .btn{width:100%;box-sizing:border-box}}

/* ---------- Entrance: opening animation ----------
   Plays once on load, about 3 seconds, like a gallery opening its doors:
   curtains part on the photo and the lights come up -> the names rise -> "The Exhibition" draws in ->
   Lionel and Sasha step in from either side -> countdown -> date -> button, nav.
   html.intro holds everything on its first frame until site.js sees the fonts and photo are ready
   (html.intro-go). Visitors who ask for reduced motion get the finished page straight away. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.76,0,.24,1)}
.intro:not(.intro-go) .hero, .intro:not(.intro-go) .hero *, .intro:not(.intro-go) .hero *::before,
.intro:not(.intro-go) .nav, .intro:not(.intro-go) .nav *{animation-play-state:paused!important}

.home .hero img{animation:curtain 1.8s var(--ease-inout) both, settle 3s var(--ease-out) both}
.home .hero .veil{animation:lightsUp 2.4s var(--ease-out) .3s both}

.hero h1 .w{display:inline-block;vertical-align:top;overflow:hidden;padding:.12em .14em .2em;margin:-.12em -.14em -.2em}
.hero h1 .w > span{display:inline-block;transform-origin:0 100%;animation:rise 1.4s var(--ease-out) both}
.hero h1 .w:nth-child(1) > span{animation-delay:.6s}
.hero h1 .w:nth-child(2) > span{animation-delay:.74s}
.hero h1 .w:nth-child(3) > span{animation-delay:.88s}
.hero .sub{animation:trackIn 1.8s var(--ease-out) 1.05s both}

.hero .names .name:first-child{animation:fromLeft 1.6s var(--ease-out) 1.2s both}
.hero .names .name:last-child{animation:fromRight 1.6s var(--ease-out) 1.2s both}
.hero-cd > div{animation:fadeUp 1.1s var(--ease-out) both}
.hero-cd > div:nth-child(1){animation-delay:1.35s}
.hero-cd > div:nth-child(2){animation-delay:1.43s}
.hero-cd > div:nth-child(3){animation-delay:1.51s}
.hero-cd > div:nth-child(4){animation-delay:1.59s}
.hero-cd > div + div::before{animation:drawY 1.2s var(--ease-out) both}
.hero-cd > div:nth-child(2)::before{animation-delay:1.5s}
.hero-cd > div:nth-child(3)::before{animation-delay:1.58s}
.hero-cd > div:nth-child(4)::before{animation-delay:1.66s}

.hero .date{animation:trackIn 1.8s var(--ease-out) 1.6s both}
.hero .btn{animation:fadeUp 1.1s var(--ease-out) 2s both}.hero .btn + .btn{animation-delay:2.12s}

.home .nav .brand, .home .nav .menu-btn{animation:fadeDown 1s var(--ease-out) 1.3s both}
.home .nav .links a{animation:fadeDown 1s var(--ease-out) both}
.home .nav .links a:nth-child(1){animation-delay:1.36s}
.home .nav .links a:nth-child(2){animation-delay:1.42s}
.home .nav .links a:nth-child(3){animation-delay:1.48s}
.home .nav .links a:nth-child(4){animation-delay:1.54s}
.home .nav .links a:nth-child(5){animation-delay:1.6s}

@keyframes curtain{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes lightsUp{from{background-color:rgba(22,21,15,.6)}}
@keyframes rise{from{transform:translateY(112%) rotate(5deg)}}
@keyframes trackIn{from{opacity:0;letter-spacing:.8em}}
@keyframes fromLeft{from{opacity:0;transform:translateX(-56px)}}
@keyframes fromRight{from{opacity:0;transform:translateX(56px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-14px)}}
@keyframes drawY{from{transform:scaleY(0)}}

/* Ring preloader (preloader.js): two interlocked gold bands over the closed curtains, which part
   left and right with them. Transparent, so the page's first frame shows through. The warm glow is
   there from the first paint, so the wait for three.js never looks like an empty screen. */
.preloader{position:fixed;inset:0;z-index:60;pointer-events:none;transition:opacity .7s var(--ease-out)}
.preloader.leave{opacity:0}
.preloader canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s var(--ease-out)}
.preloader.show canvas{opacity:1}
.preloader::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,rgba(224,184,102,.14),rgba(224,184,102,.05) 55%,transparent);animation:glowIn 1.2s var(--ease-out);transition:opacity 1s var(--ease-out)}
.intro-go .preloader::before{opacity:0}
@keyframes glowIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.preloader{display:none}}

/* ============ Page transitions: the gallery doors ============
   Leaving a page (html.pt-leave), two charcoal doors close from the sides, meet on a fine gold seam,
   and the name of the room you are going to appears between them. The next page paints with the doors
   already closed (html.pt-arrive, set by the script in its <head>) and opens them (html.pt-open) as its
   own entrance plays. On the homepage the doors open with the photo's curtain, at the same pace. */
.pt{position:fixed;inset:0;z-index:90;pointer-events:none;visibility:hidden;overflow:hidden;--pt-open:1.15s;--pt-delay:.12s}
.home .pt{--pt-open:1.8s;--pt-delay:0s}
.pt-leave .pt, .pt-arrive .pt{visibility:visible;pointer-events:auto}
.pt-open .pt{pointer-events:none}
.pt b{position:absolute;top:0;bottom:0;width:calc(50% + 1px);background:var(--room);box-shadow:0 0 70px rgba(22,21,15,.4)}
.pt b:nth-child(1){left:0;transform:translateX(calc(-100% - 90px))}
.pt b:nth-child(2){right:0;transform:translateX(calc(100% + 90px))}
.pt::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;margin-left:-.5px;opacity:0;
  background:linear-gradient(transparent 4%,rgba(224,184,102,.55) 22%,rgba(224,184,102,.55) 39%,transparent 43%,transparent 57%,rgba(224,184,102,.55) 61%,rgba(224,184,102,.55) 78%,transparent 96%)}
.pt-label{position:absolute;left:0;right:0;top:50%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 var(--gutter);text-align:center;color:var(--paper);opacity:0;transform:translateY(calc(-50% + 16px))}
.pt-b{font-family:var(--serif);font-style:italic;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.01em}
.pt-b::before{content:var(--pt-b,'')}
/* closing */
.pt-leave .pt b{transform:none;transition:transform .8s var(--ease-inout)}
.pt-leave .pt::after{opacity:1;transition:opacity .5s var(--ease-out) .55s}
.pt-leave .pt-label{opacity:1;transform:translateY(-50%);transition:opacity .55s var(--ease-out) .42s,transform .9s var(--ease-out) .42s}
/* closed, as the next page first paints */
.pt-arrive .pt b{transform:none}
.pt-arrive .pt::after{opacity:1}
.pt-arrive .pt-label{opacity:1;transform:translateY(-50%)}
/* opening */
.pt-open .pt b:nth-child(1){transform:translateX(calc(-100% - 90px));transition:transform var(--pt-open) var(--ease-inout) var(--pt-delay)}
.pt-open .pt b:nth-child(2){transform:translateX(calc(100% + 90px));transition:transform var(--pt-open) var(--ease-inout) var(--pt-delay)}
.pt-open .pt::after{opacity:0;transition:opacity .3s}
.pt-open .pt-label{opacity:0;transform:translateY(calc(-50% - 14px));transition:opacity .35s var(--ease-out),transform .6s var(--ease-out)}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* ============ Entrances on the inner pages ============
   The nav drops in, headings rise word by word out of a mask, text lifts in, and photos are unveiled
   from the bottom up as they settle. What is on screen plays as the doors open; the rest plays as you
   scroll to it (site.js adds .rv to each piece and .in when it is time). */
.inner-page .nav .brand, .inner-page .nav .menu-btn{animation:fadeDown 1s var(--ease-out) .3s both}
.inner-page .nav .links a{animation:fadeDown 1s var(--ease-out) both}
.inner-page .nav .links a:nth-child(1){animation-delay:.34s}
.inner-page .nav .links a:nth-child(2){animation-delay:.39s}
.inner-page .nav .links a:nth-child(3){animation-delay:.44s}
.inner-page .nav .links a:nth-child(4){animation-delay:.49s}
.inner-page .nav .links a:nth-child(5){animation-delay:.54s}
/* nothing shows until site.js has set the pieces up, so nothing flashes in and back out */
.intro:not(.rv-ready):not(.intro-go) .inner-page main, .intro:not(.rv-ready):not(.intro-go) .inner-page footer{visibility:hidden}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1.3s var(--ease-out) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.split .w{display:inline-block;vertical-align:top;overflow:hidden;padding:.12em .14em .2em;margin:-.12em -.14em -.2em}
.split .w > span{display:inline-block;transform-origin:0 100%}
.rv.split{opacity:1;transform:none}
.rv.split .w > span{transform:translateY(112%) rotate(4deg);transition:transform 1.3s var(--ease-out) calc(var(--d,0s) + var(--i,0) * 70ms)}
.rv.split.in .w > span{transform:none}
.rv-img{opacity:1;transform:translateY(40px);clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-out) var(--d,0s),transform 1.2s var(--ease-out) var(--d,0s)}
.rv-img.in{clip-path:inset(0 0 0 0);transform:none}
.rv-img.rv-done{clip-path:none}
.rv-img .frame{overflow:hidden}
.rv-img img{transform:scale(1.14);transition:transform 1.6s var(--ease-out) var(--d,0s)}
.rv-img.in img{transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-img,.rv img,.rv.split .w > span{opacity:1!important;transform:none!important;clip-path:none!important}}

/* ============ Smooth scrolling (Lenis, loaded by site.js on mouse and trackpad devices) ============ */
html.lenis, html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ---------- Collection ---------- */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
#collection{padding-top:96px}
.look{padding-top:32px;padding-bottom:96px}
.look-head{display:flex;flex-wrap:wrap;gap:32px 48px;justify-content:space-between;align-items:flex-end;padding-top:32px;padding-bottom:48px;border-top:1px solid var(--ink)}
.look-head > *{min-width:0}
.look-head .title{flex:1 1 480px}
.look-head .statement{flex:1 1 340px;max-width:580px;color:var(--ink-soft)}
.look-head .statement p{margin:0}
.curator{padding-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.look.two{background:var(--wall-deep);padding-top:80px}
.look.two .look-head{border-top:0;flex-wrap:wrap-reverse}
.look.two .title{text-align:right}
.look.two .statement{color:var(--ink-mid)}
.eyebrow{color:var(--accent);font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase}

.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.wall .col{display:flex;flex-direction:column;gap:40px}
.wall .col:nth-child(2){padding-top:96px}
.wall .col:nth-child(3){padding-top:40px}
.wall.pair{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
.wall.pair .col:nth-child(2){padding-top:72px}
@media (max-width:900px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}.wall .col:nth-child(3){padding-top:0;grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media (max-width:600px){
  .wall,.wall.pair{grid-template-columns:minmax(0,1fr)}
  .wall .col,.wall .col:nth-child(3){display:flex;padding-top:0!important;gap:40px}
  .wall .col:nth-child(3){grid-column:auto}
  .wall .frame-wrap:nth-of-type(even){width:78%;align-self:flex-end}
  .look.two .title{text-align:left}
}
.frame-wrap{display:block}
.frame{display:block;width:100%;padding:0;border:10px solid var(--ink);background:var(--ink);cursor:zoom-in;position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.frame img{display:block;width:100%;object-fit:cover}
.frame .tag{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:rgba(22,21,15,.86);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.frame:hover,.frame:focus-visible{transform:translateY(-6px);box-shadow:0 22px 40px -18px rgba(22,21,15,.55)}
.frame:hover .tag,.frame:focus-visible .tag{opacity:1;transform:none}
.placard{padding-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.07em;line-height:1.8;text-transform:uppercase}
.placard span{color:var(--ink-soft)}
.r45{aspect-ratio:4 / 5}.r11{aspect-ratio:1 / 1}.r23{aspect-ratio:2 / 3}
.wall-cta{padding-top:80px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.wall-cta p{margin:0;max-width:520px;color:var(--ink-mid)}

/* ---------- Story ---------- */
#story{background:var(--room);color:var(--paper)}
#story .head{padding-top:96px;padding-bottom:48px;border-bottom:1px solid var(--room-rule)}
#story .head .lede{color:var(--paper-soft);max-width:460px}
.works{display:flex;flex-direction:column;gap:96px;padding-top:96px;padding-bottom:120px}
.legend{display:flex;align-items:center;padding-top:28px}
.legend .badge + .badge{margin-left:-8px;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.legend .mono{margin-left:16px;font-size:12px;color:var(--paper-soft)}
.chapter h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(52px, 7.5vw, 104px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.turns{display:flex;flex-direction:column;gap:72px;padding-top:56px}
.turn{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start;width:min(88%, 1040px);min-width:0}
.turn.s{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-self:flex-end}
.turn.s .inline-photo{order:2}
.turn-body{min-width:0}
.turn .who{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--room-rule);margin-bottom:18px}
.badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--paper);font-family:var(--mono);font-size:13px}
.turn.s .badge{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.badge.duo{gap:1px;letter-spacing:0}
.badge.duo span + span{color:var(--gold)}
.turn .who .mono{font-size:12px}
.turn.s .who .mono{color:var(--gold)}
.turn p{margin:0 0 14px;font-size:18px;line-height:1.75;color:var(--paper-soft)}
.turn .more{position:relative;overflow:hidden;transition:max-height .5s ease}
.turn .more.clamped{max-height:300px}
.turn .more.clamped::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(22,21,15,0),var(--room))}
.readmore{margin-top:8px;min-height:44px;padding:0 20px;border:1px solid var(--room-rule);background:transparent;color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.readmore:hover{border-color:var(--paper)}
/* "View the full proposal": between the proposal and Our POV */
.story-cta{align-self:center;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:8px 0}
.story-cta p{margin:0;max-width:440px;font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.8vw,34px);line-height:1.15;color:var(--paper);text-wrap:balance}
.story-cta .btn:hover{background:var(--paper);color:var(--ink)}
.inline-photo{min-width:0}
.inline-photo .frame{border:8px solid #3A362E;background:#3A362E}
.inline-photo .placard{color:var(--paper-soft);font-size:11px}
@media (max-width:760px){
  .turn,.turn.s{grid-template-columns:minmax(0,1fr);width:100%;gap:20px}
  .turn .inline-photo{width:62%}
  .turn.s .inline-photo{order:0;justify-self:end}
  .turns{gap:56px;padding-top:40px}
  .works{gap:72px;padding-top:56px}
}

/* ---------- Programme ---------- */
#programme{padding-top:96px;padding-bottom:96px}
#programme .wall-cta{padding-top:96px}
#programme .h2{color:var(--accent)}
.prog{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;padding-top:48px}
.prog .photo{flex:1 1 300px;max-width:440px;min-width:0}
.prog .photo .frame{cursor:default}
.prog .photo .frame:hover{transform:none;box-shadow:none}
.event{min-width:0;border:1px solid var(--rule);background:var(--card);padding:clamp(24px,3.5vw,40px);display:flex;flex-direction:column;gap:16px}
.event .name{font-family:var(--serif);font-size:clamp(40px,4.5vw,56px);line-height:1.05;color:var(--accent);letter-spacing:-.02em}
.event.trad{background:transparent;border-style:dashed}
.event .intro{color:var(--ink-soft);max-width:520px;margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px 40px;padding-top:8px;margin:0;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;line-height:1.7}
.facts dt{color:var(--ink-soft)}
.facts dd{margin:0;font-weight:500}
.facts .wide{grid-column:1 / -1}
.event .actions{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:4px}
.countdown{display:flex;gap:28px;padding-top:16px;border-top:1px solid var(--rule);margin-top:8px}
.countdown div{display:flex;flex-direction:column}
.countdown b{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.countdown span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- RSVP ---------- */
#rsvp{padding-top:96px;padding-bottom:96px}
#rsvp .lede{max-width:560px;margin:16px 0 40px}
.rsvp-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.form{flex:1 1 480px;min-width:0;max-width:680px;display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.legend{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.field input,.field textarea,.field select{box-sizing:border-box;width:100%;border:1px solid var(--ink);background:var(--card);padding:0 16px;font-family:var(--sans);font-size:16px;color:var(--ink);border-radius:0}
.field input,.field select{height:52px}
.field textarea{padding:14px 16px;resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:0}
.field .err,#rsvp-send-err{color:#8A2414;font-size:14px;min-height:0}
#rsvp-send-err:empty{display:none}
.field.invalid input{border-color:#8A2414}
.choice{display:flex;flex-wrap:wrap;gap:12px}
.choice label{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 20px;border:1px solid var(--ink);background:var(--card);cursor:pointer;font-size:16px}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label:has(input:checked){background:var(--ink);color:var(--wall)}
.choice label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.aside{flex:1 1 260px;min-width:0;max-width:360px;font-size:15px;line-height:1.8;color:var(--ink-soft)}
.aside .mono{font-size:12px;color:var(--ink);padding-bottom:8px}
.phone{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.phone b{font-family:var(--mono);font-weight:400;font-size:16px;letter-spacing:.06em;color:var(--ink);user-select:all}
.mini{min-height:36px;padding:0 12px;border:1px solid var(--ink);background:transparent;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.mini:hover{background:var(--ink);color:var(--wall)}
.verse{padding-top:16px;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--ink)}
.verse span{display:block;padding-top:6px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.done{border:1px solid var(--ink);background:var(--card);padding:clamp(24px,3.5vw,40px);display:flex;flex-direction:column;gap:16px}
.done .name{font-family:var(--serif);font-size:clamp(36px,4vw,48px);line-height:1.05}
.done pre{margin:0;white-space:pre-wrap;font-family:var(--mono);font-size:13px;line-height:1.7;background:var(--wall);padding:16px;border:1px solid var(--rule);overflow-x:auto}
.done .row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Visitor ---------- */
#visitor{padding-top:96px;padding-bottom:96px}
/* On the reserve page, visitor information follows the RSVP as another part of it */
#rsvp + #visitor{padding-top:16px}
#rsvp + #visitor .sec-head{border-top:1px solid var(--rule);padding-top:72px}
#rsvp + #visitor .h2{font-size:clamp(48px,6vw,77px)}
.visit{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start;padding-top:56px}
.faq{flex:2 1 540px;min-width:0;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule);padding:24px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--serif);font-size:clamp(26px,3vw,32px);line-height:1.15}
.faq summary .plus{font-family:var(--mono);font-size:28px;line-height:1;transition:transform .25s;flex:none}
.faq details[open] .plus{transform:rotate(45deg)}
.faq summary:hover .q{color:var(--accent)}
.faq .a{padding-top:14px;color:var(--ink-soft);max-width:560px}
.faq .a p{margin:0}
.help{flex:1 1 300px;min-width:0;border:1px solid var(--ink);padding:32px;display:flex;flex-direction:column;gap:16px}
.help .eyebrow{font-size:12px}

/* ---------- Gifts ---------- */
#gifts{background:var(--room);color:var(--paper);padding-top:96px;padding-bottom:104px}
.gifts{display:flex;flex-wrap:wrap;gap:64px;align-items:flex-start}
.gifts .note{flex:1 1 480px;min-width:0}
.gifts .note p{margin:0 0 20px;font-size:18px;line-height:1.75;color:var(--paper-soft);max-width:560px}
.pay{flex:1 1 360px;min-width:0;max-width:520px;border:1px solid var(--room-rule);padding:clamp(24px,3.5vw,40px)}
.pay .eyebrow{color:var(--gold);font-size:12px;padding-bottom:24px}
.pay dl{margin:0;display:flex;flex-direction:column;gap:20px;font-size:17px;line-height:1.5}
.pay dt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-soft)}
.pay dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.pay .acct{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pay .acct b{font-family:var(--mono);font-weight:400;font-size:20px;letter-spacing:.1em;user-select:all}
.pay .mini{border-color:var(--paper);color:var(--paper)}
.pay .mini:hover{background:var(--paper);color:var(--ink)}
.pay-kind{margin:0 0 20px;font-family:var(--serif);font-weight:400;font-style:italic;font-size:26px;line-height:1.15;color:var(--paper)}
.pay-opt + .pay-opt{margin-top:32px;padding-top:32px;border-top:1px solid var(--room-rule)}

/* ---------- Next room: the way on, at the foot of every inner page ---------- */
.next-room{border-top:1px solid var(--rule)}
.dark .next-room{border-top-color:var(--room-rule);color:var(--paper)}
.next-link{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eye eye" "title go" "line line";align-items:end;gap:20px 40px;padding:88px 0 96px;color:inherit;text-decoration:none}
.next-link .eyebrow{grid-area:eye}
.dark .next-link .eyebrow{color:var(--gold)}
.next-title{grid-area:title;justify-self:start;font-family:var(--serif);font-size:clamp(56px,10vw,144px);line-height:.95;letter-spacing:-.02em;text-wrap:balance;padding-bottom:.06em;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .9s var(--ease-out)}
.next-title em{font-style:italic}
.next-line{grid-area:line;max-width:460px;text-wrap:pretty;color:var(--ink-mid)}
.dark .next-line{color:var(--paper-soft)}
.next-go{grid-area:go;display:grid;place-items:center;width:clamp(64px,8vw,112px);aspect-ratio:1;margin-bottom:.4em;border:1px solid currentColor;border-radius:50%;transition:background .4s,color .4s,transform .7s var(--ease-out)}
.next-go svg{width:36%;height:auto}
.next-link:focus-visible{outline-offset:-2px}
@media (hover:hover){
  .next-link:hover .next-title{background-size:100% 1px}
  .next-link:hover .next-go{background:var(--ink);color:var(--wall);transform:translateX(10px)}
  .dark .next-link:hover .next-go{background:var(--paper);color:var(--ink)}
}
.next-link:active .next-go{background:var(--ink);color:var(--wall)}
.dark .next-link:active .next-go{background:var(--paper);color:var(--ink)}
.next-room.has-rsvp .next-link{padding-bottom:56px}
.next-rsvp{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:28px 0 64px;border-top:1px solid var(--rule)}
.dark .next-rsvp{border-top-color:var(--room-rule)}
.next-rsvp p{margin:0;color:var(--ink-mid)}
.dark .next-rsvp p{color:var(--paper-soft)}
.dark .next-rsvp .btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.dark .next-rsvp .btn.solid:hover{background:var(--gold);border-color:var(--gold)}
@media (max-width:560px){
  .next-link{gap:16px 20px;padding:64px 0 72px}
  .next-room.has-rsvp .next-link{padding-bottom:48px}
  .next-rsvp{padding:24px 0 56px}
  .next-rsvp .btn{width:100%}
  .next-go{width:56px;margin-bottom:.2em}
}

/* ---------- Footer ---------- */
footer{background:var(--room);color:var(--paper-soft);border-top:1px solid var(--room-rule);padding-top:40px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer .word{font-family:var(--serif);font-style:italic;font-size:clamp(40px,6vw,72px);line-height:1;color:var(--paper)}
footer .credit{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--room-rule);font-size:11px}
footer .credit a{color:var(--paper-soft);text-decoration:underline;text-decoration-color:var(--room-rule);text-underline-offset:5px;transition:color .3s,text-decoration-color .3s}
footer .credit a:hover,footer .credit a:focus-visible{color:var(--paper);text-decoration-color:var(--gold)}

/* ---------- Lightbox ---------- */
dialog.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(15,14,10,.96);color:var(--paper)}
dialog.lb::backdrop{background:rgba(15,14,10,.9)}
.lb-inner{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(env(safe-area-inset-top,0px) + 8px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 16px) max(16px,env(safe-area-inset-left,0px))}
.lb-top{display:flex;justify-content:space-between;align-items:center;height:56px}
.lb-stage{display:flex;align-items:center;justify-content:center;gap:16px;min-height:0}
.lb-stage figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;flex:1}
.lb-stage img{max-height:calc(100% - 64px);max-width:100%;object-fit:contain;border:10px solid #000;background:#000;transition:opacity .25s}
.lb-stage figcaption{padding-top:14px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;line-height:1.8;text-transform:uppercase}
.lb-stage figcaption span{color:var(--paper-soft)}
.icon-btn{width:48px;height:48px;flex:none;border:1px solid var(--room-rule);border-radius:50%;background:transparent;color:var(--paper);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--paper)}
.lb-head{display:flex;align-items:baseline;gap:16px}
.lb-title{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--paper)}
.lb-count{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--paper-soft);font-variant-numeric:tabular-nums}
@media (max-width:600px){.lb-stage .icon-btn{display:none}.lb-bottom-nav{display:flex!important}}
.lb-bottom-nav{display:none;justify-content:center;gap:24px;padding-top:8px}

/* ---------- The full series: every photograph from the shoot as a masonry wall (series.js) ---------- */
dialog.series{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--room);color:var(--paper);overflow:hidden}
dialog.series::backdrop{background:var(--room)}
dialog.series[open]{animation:seriesIn .55s var(--ease-out) both}
dialog.series.closing{animation:seriesOut .32s var(--ease-inout) both}
@keyframes seriesIn{from{opacity:0}}
@keyframes seriesOut{to{opacity:0}}
.series-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.series-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding-top:env(safe-area-inset-top,0px);background:rgba(22,21,15,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--room-rule)}
.series-bar-title{margin:0;color:var(--paper-soft);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:8px;min-width:0}
.chip{min-height:40px;padding:0 16px;border:1px solid var(--room-rule);border-radius:999px;background:transparent;color:var(--paper-soft);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.series-head{padding-top:clamp(48px,8vw,104px);padding-bottom:clamp(32px,4vw,56px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.series-head .h2{color:var(--paper)}
.series-sub{margin:0;color:var(--paper-soft);font-size:12px}
dialog.series[open] .series-head > *{animation:fadeUp 1s var(--ease-out) .08s both}
dialog.series[open] .series-sub{animation-delay:.2s}
.series-grid{--g:clamp(8px,1.1vw,16px);display:flex;align-items:flex-start;gap:var(--g)}
.series-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--g)}
.tile{position:relative;display:block;width:100%;margin:0;padding:0;border:0;overflow:hidden;background:var(--c,var(--room-2));color:inherit;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.tile img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease-out),transform 1.5s var(--ease-out)}
.tile.in img{opacity:1;transform:none}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,14,10,0) 55%,rgba(15,14,10,.6));opacity:0;transition:opacity .4s;pointer-events:none}
.tile-no{position:absolute;left:14px;bottom:12px;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--paper);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease-out);pointer-events:none}
@media (hover:hover){
  .tile.in:hover img{transform:scale(1.035);transition-duration:.9s,1.1s}
  .tile:hover::after,.tile:hover .tile-no{opacity:1}
  .tile:hover .tile-no{transform:none}
}
.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tile:focus-visible::after,.tile:focus-visible .tile-no{opacity:1;transform:none}
dialog.series.entering .tile{animation:tileIn 1s var(--ease-out) var(--d,0ms) both}
@keyframes tileIn{from{opacity:0;transform:translateY(36px)}}
.series-end{display:flex;flex-direction:column;align-items:center;gap:24px;padding-top:72px;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));text-align:center}
.series-end p{margin:0;color:var(--paper-soft);font-size:12px}
.series-end .btn:hover{background:var(--paper);color:var(--ink)}
@media (max-width:560px){
  .series-bar{gap:10px}
  .chips{gap:6px}
  .chip{min-height:38px;padding:0 12px;font-size:11px;letter-spacing:.1em}
  .series-bar .icon-btn{width:42px;height:42px}
  .series-head{padding-top:40px}
}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--wall);padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* After a room change, focus moves to the new room's <main> for screen readers (site.js); no outline for it. */
main:focus{outline:none}