/* Britannia Street - its own skin on the Black Book kit.
   Palette measured from the building and the chosen mark (pale gilt on taupe, v3-final); nothing pure black or white.
   Type: Cinzel (the mark's inscriptional capitals) + Hanken Grotesk. No italics. */
:root{
 --taupe:#3B332C; --taupe-2:#332C26; --night:#2A241F; --night-2:#231E1A;
 --stone:#E3D8C6; --ivory:#F1EBDF; --paper:#F6F1E7;
 --gilt:#C9B07A; --gilt-2:#A8894F; --gilt-3:#85703F; --walnut:#8D6644; --oak:#BA9667;
 --ink:#2B2621; --muted:#76695B; --line:rgba(43,38,33,.16);
 --on-dark:#E9DFCD; --on-dark-muted:#A89A86; --line-dark:rgba(233,223,205,.14);
 --serif:'Cinzel',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
 --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
 --gut:max(16px,4vw); --head:68px;
 /* names the shared pages (booking, owner's desk) already use */
 --iron:var(--night); --brass:var(--gilt); --stucco:var(--ivory); --brick:var(--walnut); --brick-deep:#6E4F35; --green:#7C7350;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lb-open,html.sheet-open{overflow:hidden}
body{margin:0;background:var(--ivory);color:var(--ink);font:300 17px/1.62 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:.06em;line-height:1.12;margin:0}
h2{font-size:clamp(30px,4.2vw,54px)}
p{margin:0}
.wrap{width:min(1240px,100% - var(--gut)*2);margin:0 auto}
.lede{font-size:clamp(18px,1.5vw,21px);color:var(--muted);max-width:40em}
.credit,.small,.demo{font-size:13px;color:var(--muted)}
.kicker{font-family:var(--serif);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--gilt-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px}

/* buttons: square-shouldered, tracked capitals - not the sibling site's round pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border:1px solid var(--gilt);border-radius:2px;
 background:var(--gilt);color:var(--night);font:500 12.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;
 transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn:hover{background:#D8C291;border-color:#D8C291}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:rgba(201,176,122,.12);border-color:var(--gilt)}
.btn.sm{min-height:36px;padding:0 16px;font-size:11.5px}
.btn:disabled{opacity:.55;cursor:default}

/* header + the nights bar */
.top{position:fixed;inset:0 0 auto;z-index:40;color:var(--on-dark);transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.top.solid{background:rgba(42,36,31,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-dark)}
.bar{height:var(--head);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--gut)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--gilt)}
.brand svg{width:54px;height:25px;flex:none}
.brand span{font-family:var(--serif);font-weight:500;font-size:14px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.when{display:flex;align-items:center;gap:14px;min-height:44px;padding:0 20px;border:1px solid rgba(201,176,122,.55);border-radius:2px;background:rgba(42,36,31,.35);
 color:var(--on-dark);font:400 14px/1 var(--sans);cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease)}
.when:hover,.when[aria-expanded="true"]{border-color:var(--gilt);background:rgba(42,36,31,.7)}
.when-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gilt)}
.when-g{color:var(--on-dark-muted);padding-left:14px;border-left:1px solid var(--line-dark)}
.nav{display:flex;justify-content:flex-end;align-items:center;gap:26px}
.nav a:not(.btn){font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--on-dark)}
.nav a:not(.btn):hover{color:var(--gilt)}

.nights{position:absolute;top:var(--head);left:50%;transform:translateX(-50%);width:min(900px,100% - 24px);background:var(--night);color:var(--on-dark);
 border:1px solid var(--line-dark);border-top:0;box-shadow:0 30px 60px rgba(20,16,13,.45);max-height:calc(100svh - var(--head) - 12px);overflow:auto;overscroll-behavior:contain}
.nights[hidden]{display:none}
.nights-in{padding:22px 26px 26px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal-hint{font-size:14px;color:var(--on-dark-muted)}
.cal-nav{width:44px;height:44px;border:1px solid var(--line-dark);border-radius:2px;background:none;color:var(--on-dark);font-size:22px;cursor:pointer}
.cal-nav:hover{border-color:var(--gilt);color:var(--gilt)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:14px}
.cal-m h4{font-size:15px;letter-spacing:.2em;text-align:center;margin-bottom:10px;color:var(--gilt)}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-g .dow{font-size:11px;letter-spacing:.12em;text-align:center;color:var(--on-dark-muted);padding-bottom:6px}
.cal-g button{height:40px;border:0;border-radius:2px;background:none;color:var(--on-dark);font:400 14px var(--sans);cursor:pointer;transition:background .2s}
.cal-g button:hover:not(:disabled){background:rgba(201,176,122,.16)}
.cal-g button:disabled{color:rgba(233,223,205,.22);cursor:default}
.cal-g button.range{background:rgba(201,176,122,.14);border-radius:0}
.cal-g button.in,.cal-g button.out{background:var(--gilt);color:var(--night);font-weight:500}
.cal-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-dark)}
.guests{display:flex;align-items:center;gap:14px;font-size:14px}
.guests span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gilt)}
.guests button{width:36px;height:36px;border:1px solid var(--line-dark);border-radius:2px;background:none;color:var(--on-dark);font-size:18px;cursor:pointer}
.guests button:hover{border-color:var(--gilt)}
.guests b{font-weight:400;min-width:1.2em;text-align:center}
.cal-homes{display:grid;gap:8px;margin-top:16px}
.cal-homes:empty{display:none}
.ch{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;padding:8px;border:1px solid var(--line-dark);border-radius:2px}
.ch img{width:96px;height:56px;object-fit:cover}
.ch h5{margin:0;font:400 15px var(--serif);letter-spacing:.12em}
.ch p{font-size:13px;color:var(--on-dark-muted)}
.ch .tot{text-align:right;display:flex;align-items:center;gap:14px}
.ch .tot b{font-weight:400;font-size:18px;color:var(--gilt)}
.ch.off{opacity:.45}
.cal-note{font-size:13px;color:var(--on-dark-muted)}

/* opening: the mark's own arch, holding the spiral stair seen from above; scrolling steps through it */
.opening{height:230vh;background:var(--night);position:relative;--p:0;--e:0}
.opening-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--on-dark)}
.opening{--hz:60svh;--aw:min(34vw,calc((var(--hz) - var(--head) - 40px) / 1.34));--ah:calc(var(--aw) * 1.34)}
/* tall screens (a 2000 x 1740 monitor): the horizon sits lower so the arch fills the height instead of floating in dead space */
@media (min-width:900px) and (max-aspect-ratio:4/3){.opening{--hz:72svh}}
.arch{position:absolute;left:50%;bottom:calc((100svh - var(--hz)) * (1 - var(--e)));translate:-50% 0;
 width:calc(var(--aw) + (100vw - var(--aw)) * var(--e));height:calc(var(--ah) + (100svh - var(--ah)) * var(--e));
 --r:calc(var(--aw) / 2 * (1 - var(--e)));border-radius:var(--r) var(--r) 0 0;overflow:hidden;isolation:isolate;background:var(--night-2);
 clip-path:inset(100% 0 0 0 round var(--r) var(--r) 0 0);animation:archRise 1.6s var(--ease-out) .25s forwards}
.arch-video{width:100%;height:100%;object-fit:cover;filter:saturate(.92);border-radius:inherit;clip-path:inset(0 round var(--r) var(--r) 0 0)}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(42,36,31,.55),transparent 45%);opacity:var(--e);pointer-events:none}
/* the mask carries the same round top as the arch: a plain rectangle clip let the video layer paint square black corners (2000 x 1740, 26 Sep) */
@keyframes archRise{to{clip-path:inset(0 0 0 0 round var(--r) var(--r) 0 0)}}
.horizon{position:absolute;left:var(--gut);right:var(--gut);top:var(--hz);height:1px;background:var(--gilt);transform-origin:50% 50%;transform:scaleX(0);
 animation:drawX 1.4s var(--ease-out) .9s forwards;opacity:calc(1 - var(--e) * 3)}
@keyframes drawX{to{transform:scaleX(1)}}
.opening-copy{position:absolute;left:0;right:0;top:calc(var(--hz) + 28px);text-align:center;padding:0 var(--gut);
 opacity:calc(1 - var(--e) * 2.6);transform:translateY(calc(var(--e) * -40px))}
.opening-name{font-size:clamp(22px,5.2vw,72px);font-weight:400;letter-spacing:.14em;color:var(--gilt);line-height:1}
.opening-name span{display:inline-block;opacity:0;transform:translateY(14px);animation:up 1.2s var(--ease-out) forwards}
.opening-name span:first-child{animation-delay:1.25s}.opening-name span:last-child{animation-delay:1.45s}
.opening-sub{margin-top:16px;font-family:var(--serif);font-size:clamp(12px,1.2vw,15px);letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--gilt);opacity:0;animation:fade 1.2s var(--ease) 1.8s forwards}
.opening-line{margin-top:18px;font-size:clamp(17px,1.5vw,20px);color:var(--on-dark-muted);opacity:0;animation:fade 1.2s var(--ease) 2.1s forwards}
.opening-cta{margin-top:34px;opacity:0;animation:fade 1.2s var(--ease) 2.4s forwards}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
.opening-down{position:absolute;left:50%;bottom:26px;translate:-50% 0;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;color:var(--on-dark);
 padding-bottom:10px;opacity:0;animation:fade 1s var(--ease) 2.6s forwards}
.opening-down::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:0;background:var(--gilt);animation:drop 2.4s var(--ease) 3s infinite}
@keyframes drop{0%{height:0;opacity:1}60%{height:26px;opacity:1}100%{height:26px;opacity:0}}
.opening.scrolled .opening-down{opacity:0!important;animation:none}

/* the story, lit word by word */
.story{padding:clamp(80px,12vw,160px) 0}
.story .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.story-arch{margin:0}
.window{border-radius:999px 999px 0 0;overflow:hidden;aspect-ratio:3/4;background:var(--stone)}
.window img{width:100%;height:100%;object-fit:cover}
.story-arch figcaption{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.story-copy{display:flex;flex-direction:column;gap:26px}
.lit{font-size:clamp(22px,2.4vw,32px);line-height:1.45;color:var(--ink);font-weight:300}
.lit .w{opacity:.16;transition:opacity .5s var(--ease)}
.lit .w.on{opacity:1}

/* facts */
.facts{background:var(--stone);padding:clamp(48px,6vw,80px) 0}
.facts ul{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.facts li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--line)}
.facts b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,46px);line-height:1;color:var(--walnut);letter-spacing:.04em}
.facts span{font-size:15px;color:var(--muted)}

/* the homes: each arrives empty, and is furnished as you scroll through it */
.homes{background:var(--night);color:var(--on-dark);padding-top:clamp(80px,10vw,140px)}
.homes-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding-bottom:clamp(40px,6vw,80px)}
.homes-head h2{color:var(--gilt)}
.homes-head .lede{color:var(--on-dark-muted)}
.home{position:relative;--f:0}
.home-spacer{height:88vh}
.home-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night-2) center/cover no-repeat;background-position:var(--pos,50% 50%)}
.home-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.home-stage .full{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--f) * 140% - 40%),transparent calc(var(--f) * 140%));
 mask-image:linear-gradient(to top,#000 calc(var(--f) * 140% - 40%),transparent calc(var(--f) * 140%));transform:scale(calc(1.04 - var(--f) * .04));transform-origin:50% 100%}
.home.solo .home-stage img{transform:scale(calc(1.07 - var(--f) * .07))}
/* a home with no empty twin has nothing to furnish: the move-in mask hid its full-size picture until you scrolled in, so the
   1000 px stage placeholder showed stretched on big screens (the "soft intro frame", misread as a load moment on 26 Sep) */
.home.solo .home-stage .full{-webkit-mask-image:none;mask-image:none}
.home-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(35,30,26,.82),rgba(35,30,26,0) 46%),linear-gradient(to bottom,rgba(35,30,26,.5),transparent 22%);pointer-events:none}
@media (max-width:720px){.home-stage::after{background:linear-gradient(to bottom,rgba(35,30,26,.86),rgba(35,30,26,.35) 34%,transparent 52%),linear-gradient(to top,rgba(35,30,26,.6),transparent 30%)}}
.home-title{position:absolute;left:var(--gut);bottom:clamp(40px,9svh,96px);z-index:2;max-width:min(640px,88vw)}
.home-num{font-family:var(--serif);font-size:14px;letter-spacing:.4em;color:var(--gilt)}
.home-name{font-size:clamp(38px,6vw,84px);color:var(--on-dark);margin-top:8px}
.home-line{margin-top:12px;font-size:clamp(16px,1.4vw,19px);color:var(--on-dark)}
.movein{position:absolute;right:var(--gut);top:calc(var(--head) + 24px);z-index:2;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark);padding:7px 12px;background:rgba(35,30,26,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.movein i{position:relative;display:block;width:90px;height:1px;background:var(--line-dark)}
.movein i::after{content:"";position:absolute;inset:0;background:var(--gilt);transform-origin:0 50%;transform:scaleX(var(--f))}
.home-card{position:relative;z-index:3;width:min(520px,100% - var(--gut)*2);margin:0 var(--gut) 0 auto;padding:30px 32px 32px;background:rgba(35,30,26,.93);
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line-dark);display:flex;flex-direction:column;gap:18px}
.home-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.home-card li{display:flex;gap:12px;align-items:baseline;font-size:15.5px}
.home-card li::before{content:"";flex:none;width:14px;height:1px;background:var(--gilt);transform:translateY(-4px)}
/* room by room: their per-type Living / Kitchen / Bedroom / Bathroom facts, label as the specs, rows as the distances list */
.rooms{margin:0}
.rooms div{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line-dark)}
.rooms div:last-child{border-bottom:1px solid var(--line-dark)}
.rooms dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);padding-top:2px}
.rooms dd{margin:0;font-size:15.5px;line-height:1.45}
@media (max-width:560px){.rooms div{grid-template-columns:1fr;gap:2px}}
.price{font-size:15px;color:var(--on-dark-muted)}
.price b{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--gilt);letter-spacing:.04em}
.thumbs{display:flex;gap:8px}
.thumbs button{flex:1;padding:0;border:1px solid var(--line-dark);background:none;cursor:pointer;aspect-ratio:21/9;overflow:hidden;border-radius:1px}
.thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.thumbs button:hover img{transform:scale(1.05)}
.card-acts{display:flex;gap:10px;flex-wrap:wrap}
.home-gap{height:45vh}

/* the details, in arched frames */
.details{padding:clamp(80px,10vw,140px) 0}
.details h2{margin-bottom:clamp(28px,4vw,48px)}
.inside-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.inside-grid figure{margin:0;cursor:default}
.inside-grid figure.still{cursor:zoom-in}
.inside-grid video,.inside-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 0 0;background:var(--stone)}
.inside-grid figcaption{margin-top:12px;font-size:14px;color:var(--muted)}

/* around: the map at night */
.around{background:var(--stone);padding:clamp(80px,10vw,140px) 0}
.around .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.around .lede{margin:18px 0 26px}
.dist{list-style:none;padding:0;margin:0}
.dist li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.dist li span:last-child{color:var(--walnut);font-variant-numeric:tabular-nums}
.map{background:var(--night);padding:10px;border-radius:2px}
.map img{width:100%}
.around .credit{margin-top:10px}

/* booking */
.book{background:var(--taupe);color:var(--on-dark);padding:clamp(80px,10vw,140px) 0}
.book h2{color:var(--gilt)}
.book .lede{color:var(--on-dark-muted);margin-top:14px}
.steps{list-style:none;padding:0;margin:34px 0 26px;display:flex;gap:0;counter-reset:s}
.steps li{flex:1;position:relative;padding-top:18px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-dark)}
.steps li::after{content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--taupe);border:1px solid var(--on-dark-muted)}
.steps li.on{color:var(--on-dark)}
.steps li.on::before{background:var(--gilt)}
.steps li.on::after{background:var(--gilt);border-color:var(--gilt)}
.steps li.now{color:var(--gilt)}
.back{margin-bottom:20px}
.book[data-step="0"] .back,.book[data-step="1"] .back{display:none}
.search,.details-form .row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end}
.search{grid-template-columns:1fr 1fr .7fr auto}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt)}
.field input,.field select{font:400 17px var(--sans);color:var(--on-dark);background:transparent;border:0;border-bottom:1px solid rgba(233,223,205,.35);border-radius:0;padding:10px 0;min-height:46px;color-scheme:dark}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--gilt)}
.field select option{background:var(--night);color:var(--on-dark)}
.msg{min-height:26px;margin-top:20px;font-size:16px;color:#E3B28A}
.results{display:grid;gap:10px;margin-top:10px}
.pick{display:grid;grid-template-columns:140px 1fr auto;gap:20px;align-items:center;padding:10px;border:1px solid var(--line-dark);border-radius:2px;background:rgba(42,36,31,.4);color:var(--on-dark);text-align:left;font:inherit;cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease)}
.pick:hover{border-color:rgba(201,176,122,.6)}
.pick.sel{border-color:var(--gilt);background:rgba(201,176,122,.1)}
.pick img{width:140px;height:64px;object-fit:cover}
.pick h4{font-size:18px;letter-spacing:.1em}
.pick p{font-size:14px;color:var(--on-dark-muted);margin-top:4px}
.tot{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tot b{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--gilt)}
.tot span{font-size:13px;color:var(--on-dark-muted)}
.details-form{display:none;margin-top:30px;padding-top:26px;border-top:1px solid var(--line-dark)}
.details-form.open{display:block}
.summary{font-size:17px;margin-bottom:20px}
.summary b{font-weight:500}
.go{margin-top:24px}
.book .small{color:var(--on-dark-muted);margin-top:12px}
.book[data-step="2"] .search,.book[data-step="3"] .search,.book[data-step="4"] .search,
.book[data-step="3"] #detailsForm,.book[data-step="4"] #detailsForm,.book[data-step="3"] .results,.book[data-step="4"] .results{display:none}

/* footer */
/* the building's own drawing under one editorial line (pattern: 111 West 57th's technical drawings; Aman's single statement) */
.drawn{background:var(--night);color:var(--on-dark);padding:clamp(72px,9vw,140px) 0}
.drawn .wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,5vw,72px)}
.statement{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,46px);line-height:1.2;letter-spacing:.04em;color:var(--gilt);text-align:center;max-width:22ch;margin:0}
.elevation{margin:0;width:min(920px,100%);display:flex;flex-direction:column;gap:14px}
.elevation img{width:100%;height:auto;display:block}
.elevation figcaption{font-size:13px;letter-spacing:.06em;color:var(--on-dark-muted);text-align:center}
.foot-k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:10px}
.foot{background:var(--night);color:var(--on-dark-muted);padding:64px 0 90px;font-size:15px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot .brand{margin-bottom:18px}
.foot a{color:var(--on-dark)}
.foot p+p{margin-top:12px}
.fine{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line-dark);font-size:13px}
.house{font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--gilt)}

/* concierge */
.cc{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:50;font-family:var(--sans)}
.cc-open{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border:1px solid rgba(201,176,122,.6);border-radius:2px;background:var(--night);color:var(--on-dark);
 font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 30px rgba(20,16,13,.35)}
.cc-open:hover{border-color:var(--gilt)}
.cc-dot{width:7px;height:7px;border-radius:50%;background:var(--gilt);box-shadow:0 0 0 0 rgba(201,176,122,.6);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,176,122,.5)}70%{box-shadow:0 0 0 10px rgba(201,176,122,0)}100%{box-shadow:0 0 0 0 rgba(201,176,122,0)}}
.cc-panel{position:absolute;right:0;bottom:58px;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100svh - 110px));display:flex;flex-direction:column;background:var(--ivory);color:var(--ink);
 border:1px solid var(--line);box-shadow:0 30px 60px rgba(20,16,13,.35);overflow:hidden}
.cc-panel[hidden]{display:none}
.cc-panel header{position:relative;padding:18px 48px 16px 20px;background:var(--taupe);color:var(--on-dark)}
.cc-panel header b{display:block;font:400 15px var(--serif);letter-spacing:.16em;color:var(--gilt)}
.cc-panel header span{font-size:13px;color:var(--on-dark-muted)}
.cc-x{position:absolute;right:10px;top:12px;width:34px;height:34px;border:0;background:none;color:var(--on-dark);font-size:22px;cursor:pointer}
.cc-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.cc-log p{margin:0;max-width:86%;padding:10px 14px;font-size:15px;line-height:1.5;border-radius:2px}
.cc-bot{background:var(--paper);border:1px solid var(--line);align-self:flex-start}
.cc-me{background:var(--taupe);color:var(--on-dark);align-self:flex-end}
.cc-note{align-self:center;font-size:12.5px!important;color:var(--muted);background:none!important;border:0!important}
.cc-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.cc-quick button{flex:none;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);font:400 13px var(--sans);padding:7px 11px;cursor:pointer}
.cc-quick button:hover{border-color:var(--gilt-2)}
.cc-form{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line)}
.cc-form input{flex:1;min-width:0;font:400 15px var(--sans);padding:10px 12px;border:1px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink)}
.cc-send,.cc-mic{border:0;border-radius:2px;background:var(--taupe);color:var(--gilt);font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:0 14px;cursor:pointer}
.cc-mic.on{background:var(--walnut);color:var(--ivory)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgb(27,23,20);display:grid;grid-template-columns:64px 1fr 64px;align-items:center;opacity:0;transition:opacity .35s var(--ease)}
.lb.on{opacity:1}
.lb[hidden]{display:none}
.lb-f{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;justify-content:center;padding:40px 0}
.lb-f img{max-height:calc(100svh - 120px);max-width:100%;object-fit:contain}
.lb-f figcaption{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-muted)}
.lb-a,.lb-x{border:0;background:none;color:var(--on-dark);font-size:40px;cursor:pointer;height:64px}
.lb-a:hover,.lb-x:hover{color:var(--gilt)}
.lb-x{position:absolute;top:10px;right:14px;font-size:34px}
.lb-a:focus-visible,.lb-x:focus-visible{outline-offset:-4px}

/* tablet */
@media (max-width:1024px){
 .bar{grid-template-columns:auto 1fr auto}
 .when{justify-self:center}
 .nav a:not(.btn){display:none}
 .facts ul{grid-template-columns:1fr 1fr}
 .inside-grid{grid-template-columns:1fr 1fr}
 .homes-head{grid-template-columns:1fr}
 .search{grid-template-columns:1fr 1fr}
 .details-form .row{grid-template-columns:1fr 1fr}
}
/* phone */
@media (max-width:720px){
 :root{--head:60px}
 .brand span{display:none}
 .brand svg{width:48px;height:22px}
 .when{padding:0 14px;gap:10px;font-size:13px;min-width:0}
 .when-k{display:none}
 .when-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nav-book{padding:0 14px}
 /* an explicit height: the solid header has a backdrop blur, which makes IT the box a fixed child measures from */
 .nights{position:fixed;left:0;right:0;top:var(--head);height:calc(100svh - var(--head));transform:none;width:auto;max-height:none;border:0}
 .nights-in{padding:18px 16px 40px}
 .cal-months{grid-template-columns:1fr}
 .cal-months .cal-m+.cal-m{display:none}
 .ch{grid-template-columns:72px 1fr;gap:12px}
 .ch img{width:72px;height:48px}
 .ch .tot{grid-column:1/-1;justify-content:space-between}
 .opening{--aw:min(62vw,300px);--hz:58svh}
 .story .wrap,.around .wrap{grid-template-columns:1fr}
 .story-arch{max-width:360px}
 .facts ul{grid-template-columns:1fr 1fr;gap:22px}
 .home-spacer{height:80vh}
 .home-title{bottom:auto;top:calc(var(--head) + 44px)}
 .movein{top:auto;bottom:28px;left:var(--gut);right:auto}
 .movein i{width:44px}
 .opening-down{left:var(--gut);translate:none;bottom:32px}
 .opening-down::after{left:0}
 .home-card{width:auto;margin:0 16px;padding:24px 22px}
 .inside-grid{grid-template-columns:1fr 1fr}
 .search,.details-form .row{grid-template-columns:1fr}
 .pick{grid-template-columns:96px 1fr;gap:14px}
 .pick img{width:96px;height:56px}
 .pick .tot{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline}
 .steps li{font-size:9.5px;letter-spacing:.1em}
 .foot .wrap{grid-template-columns:1fr}
 .lb{grid-template-columns:40px 1fr 40px}
 .cc-open{padding:0 14px;min-height:40px;font-size:11px;letter-spacing:.16em}
 .cc-open .cc-word{display:none}
 .foot{padding-bottom:110px}
 .movein{bottom:20px}
 .opening-down{bottom:24px}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .opening{height:100svh}
 .arch,.horizon,.opening-name span,.opening-sub,.opening-line,.opening-cta,.opening-down{animation:none!important;clip-path:none;opacity:1;transform:none}
 .horizon{transform:none}
 .opening-down::after,.cc-dot{animation:none}
 .home-stage .full{-webkit-mask-image:none;mask-image:none;transform:none}
}
/* the Ask pill steps aside over reading text (concierge.js), and the chat log fades in under its header */
.cc .cc-open{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cc.cc-aside .cc-open{opacity:0;transform:translateY(8px);pointer-events:none}
.cc-log{padding-top:20px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px);mask-image:linear-gradient(to bottom,transparent 0,#000 20px)}

/* Golden Britannia: guests / bedrooms / bathrooms, and what every apartment has */
.specs{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.specs b{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--gilt);margin-right:6px}
.price{font-size:14px;letter-spacing:.04em}
.every{list-style:none;padding:0;margin:-8px 0 clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;color:var(--muted)}
.every li{display:flex;align-items:center;gap:10px}
.every li::before{content:"";width:14px;height:1px;background:var(--gilt-2)}
.around-k{margin:34px 0 4px}
.tot b{font-size:18px;letter-spacing:.14em;text-transform:uppercase}
/* very tall screens (a 2000 x 1740 monitor): a full-height stage would blow the 21:9 stills up ~1.5-2x and soften them,
   so the stage becomes a centred ~21:9 letterbox that never draws a picture wider than its native 2688 px (tower 21:24) */
@media (min-width:900px) and (min-height:1300px){
 .home-stage{--sh:min(100svh, calc(100vw * .6));height:var(--sh);top:calc((100svh - var(--sh)) / 2)}
}
/* 27 Sep (James 23:52, "the front page on my desktop is underwhelming"): the opening IS the building. Its 2013 south
   elevation in gilt fills the first screen, the film plays inside the real centre arched first-floor window, and
   scrolling flies towards that window. The RESTING layout is pure CSS (tower 01:55: a load where the script had not run
   showed the old opening), so it is right even if motion.js is late or never runs; motion.js only drives the scroll.
   --b = screen px per drawing unit (the drawing is 1600 units wide; window glass x 732-870, top 744; sill base 969). */
.opening{--fk:.95;--b:max(calc(var(--fk) * 100vw / 1600), calc((var(--hz) - var(--head) - 30px) / 969))}
@media (max-width:899px){.opening{--fk:2.6}}
.opening .horizon{display:none}
.facade{position:absolute;left:calc(50% - 801 * var(--b));top:calc(var(--hz) - 969 * var(--b));width:calc(1600 * var(--b));
 transform-origin:calc(801 * var(--b)) calc(847 * var(--b));pointer-events:none;will-change:transform;opacity:calc(1 - var(--e) * 2.4);
 clip-path:inset(100% 0 0 0);animation:facadeIn 1.8s var(--ease-out) .1s forwards;
 --ft:calc(var(--head) - var(--hz) + 969 * var(--b))}
.facade img{display:block;width:100%;height:auto;
 -webkit-mask-image:linear-gradient(to bottom,transparent var(--ft),#000 calc(var(--ft) + 60px),#000 66.2%,transparent 68.6%);
 mask-image:linear-gradient(to bottom,transparent var(--ft),#000 calc(var(--ft) + 60px),#000 66.2%,transparent 68.6%)}
@keyframes facadeIn{to{clip-path:inset(0 0 0 0)}}
.opening .arch{left:var(--ax,calc(50% - 69 * var(--b)));top:var(--ay,calc(var(--hz) - 225 * var(--b)));bottom:auto;translate:none;
 width:var(--aw2,calc(138 * var(--b)));height:var(--ah2,calc(206 * var(--b)));--r:var(--ar,calc(69 * var(--b)));animation-delay:1.05s}
.opening .opening-name span:first-child{animation-delay:1.7s}.opening .opening-name span:last-child{animation-delay:1.9s}
.opening .opening-sub{animation-delay:2.2s}.opening .opening-line{animation-delay:2.4s}.opening .opening-cta{animation-delay:2.6s}.opening .opening-down{animation-delay:2.9s}
.facade-cap{position:absolute;left:var(--gut);bottom:26px;max-width:40ch;font-size:11px;line-height:1.5;letter-spacing:.06em;color:var(--on-dark-muted);
 opacity:0;animation:fade 1s var(--ease) 2.9s forwards}
.opening.scrolled .facade-cap{opacity:0!important;animation:none}
@media (max-width:899px){.facade-cap{left:auto;right:var(--gut);bottom:66px;max-width:60vw;text-align:right}}
@media (prefers-reduced-motion:reduce){.facade{animation:none;clip-path:none}.facade-cap{animation:none;opacity:1}}
/* the drawing moved up into the opening (27 Sep), so the band below it is the statement line alone */
.drawn{padding-bottom:0}
/* 27 Sep 02:25 (James: "add the latest generation of the ae opener on the homepage as a looping video - i hate this",
   then "make the video wide and put the logo with ample room beween the video and the logo under and make the logo
   smaller"). The opening is the After Effects film (letterbox bars cropped: 2.39:1) looping full width under the
   header, the lockup small beneath it. 03:21 fix ("several things are clearly wrong"): at his real window, 2000x1022,
   the film pushed the logo off the bottom and "Step inside" printed over "King's Cross". Now the film's height is
   whatever the window has left after the header, the gap and the logo, so the group always fits; the cue is gone. */
.reel{--g:clamp(36px,6.5svh,120px);--logo:118px;background:var(--night);color:var(--on-dark);height:100svh;min-height:520px;
 padding:var(--head) 0 clamp(24px,4svh,64px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.reel-film{width:100%;display:flex;justify-content:center}
.reel-film video{display:block;width:100%;aspect-ratio:1920/802;object-fit:cover;background:var(--night-2);
 max-height:calc(100svh - var(--head) - var(--g) - var(--logo) - clamp(24px,4svh,64px) - 24px)}
.reel-logo{margin-top:var(--g);height:var(--logo);flex:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;color:var(--gilt);text-align:center;padding:0 var(--gut)}
.reel-mark{width:clamp(60px,4.4vw,80px);height:auto;aspect-ratio:120/56}
.reel-name{margin-top:12px;font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.35vw,22px);letter-spacing:.2em;padding-left:.2em;text-transform:uppercase;line-height:1.2;color:var(--gilt)}
.reel-sub{margin-top:9px;font-family:var(--serif);font-size:clamp(9px,.65vw,11px);letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--gilt);opacity:.85}
@media (max-width:720px){.reel-film video{aspect-ratio:16/10}}  /* on a phone 2.39:1 was a thin sliver in empty dark */
@media (max-height:800px) and (min-width:900px){.home-card{padding:22px 26px 22px}}  /* 1366x768: the 1-bed card was 5 px taller than the room under the header */