/* ── the chrome every page shares: tokens, the bar and its plaque, the menu, glass and the green button ──
   copied from the homepage's own styles so a new page wears the same header; the Astro build will hold one copy */
:root{
  --night:#0a0c0f; --stone:#f5f0e7; --stone-dim:rgba(245,240,231,.74); --hair:rgba(245,240,231,.36);
  --ink:#10222e; --paper:#eeebe3; --gold:#f0d9a8;
  --serif:'Libre Caslon Display',Georgia,serif; --serif-text:'Libre Caslon Text',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif; --display:'Montserrat','DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden;background:var(--night);color:var(--stone);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--stone);outline-offset:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── the bar ──────────────────────────────────────────────── */
/* the head of the frame is deepened like the top of a cinema print: a long, even fall from shade to clear,
   so the mark and everything the header will carry read against any sky */
.bar::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:clamp(170px,27vh,270px);pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,11,.8) 0%,rgba(6,8,11,.64) 20%,rgba(6,8,11,.42) 42%,rgba(6,8,11,.2) 66%,rgba(6,8,11,.06) 86%,rgba(6,8,11,0) 100%)}
.bar{isolation:isolate}
.bar{position:absolute;top:0;left:0;right:0;z-index:6;text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.55);display:flex;justify-content:space-between;align-items:center;
  padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
/* the bar stays with you: clear over the hero's sky at the very top, then, as soon as the page moves beneath it,
   a solid band of night with a hairline beneath, so the mark and the menu never fade into what scrolls under them.
   the solid layer is its own pseudo element, so the menu's glass panels still blur the page behind them */
.bar{position:fixed;--bar-pad:13px;transition:padding .35s ease}
.bar::before{transition:opacity .35s ease}
.bar::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(180deg,rgba(13,15,19,.97),rgba(9,11,14,.97));
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 1px 0 rgba(245,240,231,.09),0 16px 36px -20px rgba(0,0,0,.65)}
.bar.solid::before{opacity:0}
.bar.solid::after{opacity:1}
.bar.solid{padding-top:max(var(--bar-pad),env(safe-area-inset-top));padding-bottom:var(--bar-pad)}
@media (max-width:759px){.bar{--bar-pad:9px}}
@media (prefers-reduced-motion:reduce){.bar,.bar::before,.bar::after{transition:none}}
/* a jump to the booking stops clear of the bar */
/* on the solid bar the menu's panels open just below its edge, not across it */
@media (min-width:1280px){.bar.solid .drop{padding-top:calc(13px + var(--drop-drop,0px))}.bar.solid .drop::before{top:calc(7px + var(--drop-drop,0px))}}
#book{scroll-margin-top:96px}
@media (max-width:759px){#book{scroll-margin-top:80px}}
.mark{display:flex;align-items:center;gap:11px}
.mark svg{width:21px;height:27px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}

/* ── the mark, engraved on a plate ──
   the logo itself is untouched: same drawing, same letters. only the surface changes.
   brass (default): a brushed plate, the mark cut in and filled with black wax, then polished back,
   so the letters sit flush and dark with a hairline of light along the lower lip of each cut.
   two dome-headed screws, a chamfered edge catching the sky. */
.mark{position:relative;isolation:isolate;padding:10px 24px 10px 24px;border-radius:4px;color:#24190a;
  text-shadow:0 1px 0 rgba(255,243,206,.7),0 -.5px 0 rgba(60,40,10,.35);
  background:
    radial-gradient(circle at 40% 35%,#fff6d0 0 .7px,#d8b867 1.1px,#8a6626 2.3px,#4d370f 2.9px,transparent 3.2px) left 9px center/7px 7px no-repeat,
    radial-gradient(circle at 40% 35%,#fff6d0 0 .7px,#d8b867 1.1px,#8a6626 2.3px,#4d370f 2.9px,transparent 3.2px) right 9px center/7px 7px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(60,40,10,.05) 1px 2px,rgba(255,255,255,0) 2px 3px),
    linear-gradient(162deg,#7a5c24 0%,#cfb168 14%,#f2df9f 30%,#c49c4a 50%,#e8cf88 68%,#a88238 86%,#80611f 100%);
  box-shadow:inset 0 1px 0 rgba(255,247,214,.9),inset 0 -1px 0 rgba(66,44,10,.75),inset 1px 0 0 rgba(255,240,200,.45),inset -1px 0 0 rgba(80,55,15,.55),
    0 1px 1px rgba(0,0,0,.35),0 10px 22px -10px rgba(0,0,0,.75)}
/* the chamfer: a second, finer edge set just inside the first */
.mark::before{content:"";position:absolute;inset:3px;border-radius:2px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(92,64,20,.42),0 0 0 1px rgba(255,242,205,.32)}
/* a slow, single glint across the polish, as a passer-by would catch it */
.mark::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,252,235,.55) 48%,transparent 60%) -200% 0/250% 100% no-repeat;
  mix-blend-mode:soft-light;animation:glint 9s ease-in-out 1.5s infinite}
@keyframes glint{0%,70%{background-position:-200% 0}100%{background-position:220% 0}}
.mark svg{filter:drop-shadow(0 1px 0 rgba(255,243,206,.7)) drop-shadow(0 -.5px 0 rgba(60,40,10,.4))}
.mark span{text-shadow:0 1px 0 rgba(255,243,206,.7),0 -.5px 0 rgba(60,40,10,.35)!important}
.mark b{color:#1d1407}

/* Portland stone (?plaque=stone): a pale tablet, the mark V-cut with a chisel.
   light falls on the upper face of each cut and the lower face drops into shade */
.stone .mark{color:#6a6356;border-radius:2px;padding:10px 20px;
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(40,34,24,.45);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .36 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg,#f3eee3 0%,#e6dfd0 55%,#d8cfbd 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(120,108,88,.55),0 1px 1px rgba(0,0,0,.25),0 10px 22px -10px rgba(0,0,0,.7)}
.stone .mark::before{inset:4px;box-shadow:inset 0 0 0 1px rgba(120,108,88,.35),0 0 0 1px rgba(255,255,255,.55)}
.stone .mark::after{display:none}
.stone .mark svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 -1px 0 rgba(40,34,24,.45))}
.stone .mark span{text-shadow:0 1px 0 rgba(255,255,255,.85),0 -1px 0 rgba(40,34,24,.45)!important}
.stone .mark b{color:#5b5448}
/* a London street nameplate (?plaque=street): a white enamelled plate in a black frame,
   the mark in plain black, a fine red rule under it, as on the corner of a Westminster terrace */
.street .mark{color:#111;border-radius:3px;padding:9px 20px 13px;
  text-shadow:none;
  background:linear-gradient(#c8102e,#c8102e) center bottom 7px/calc(100% - 40px) 1.5px no-repeat,
    linear-gradient(175deg,#ffffff 0%,#f4f3ef 60%,#e9e7e1 100%);
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px #111,inset 0 1px 0 4px rgba(255,255,255,.6),0 1px 1px rgba(0,0,0,.3),0 10px 22px -10px rgba(0,0,0,.7)}
.street .mark::before{display:none}
.street .mark::after{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.7) 48%,transparent 60%) -200% 0/250% 100% no-repeat;mix-blend-mode:normal;opacity:.5}
.street .mark svg{filter:none}
.street .mark span{text-shadow:none!important}
.street .mark b{color:#111}
@media (prefers-reduced-motion:reduce){.mark::after{animation:none}}
.mark span{font:600 8.5px/1.4 var(--sans);letter-spacing:.26em;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.45)}
.mark b{display:block;font-weight:600;font-size:13px;letter-spacing:.36em}
.bar nav.r{display:flex;align-items:center;gap:10px;font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.bar nav.r a,.bar nav.r button{padding:11px 16px;border-radius:999px;color:#fff;text-shadow:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;gap:9px;letter-spacing:.2em;text-transform:uppercase}
.bar nav.r a:hover,.bar nav.r button:hover{transform:scale(1.04)}
.bar nav.r svg{width:17px;height:17px}
.bar nav.r .tel{display:none;font-feature-settings:"tnum";letter-spacing:.16em}

/* ── liquid glass: every call to action, and the booking itself ──
   clear and slightly lifted, a bright rim that catches the light from the upper left,
   a milky glow just inside the edge, and a highlight that follows the pointer */
.glass{position:relative;isolation:isolate;border:0;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 60%,rgba(255,255,255,.06)),rgba(20,22,26,.12);
  backdrop-filter:blur(14px) saturate(1.7) brightness(1.03);-webkit-backdrop-filter:blur(14px) saturate(1.7) brightness(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 0 16px rgba(255,255,255,.06),0 10px 28px -16px rgba(0,0,0,.32)}
.refract .widget.glass,.refract .panel.glass{backdrop-filter:url(#liquid) blur(12px) saturate(1.7) brightness(1.03)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.75),rgba(255,255,255,.22) 22%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.3) 84%,rgba(255,255,255,.65));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(140% 90% at var(--mx,22%) var(--my,-10%),rgba(255,255,255,.16),rgba(255,255,255,.03) 38%,transparent 62%);
  transition:background .25s ease}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;
  font:500 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.3);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .4s ease}
.cta.glass{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.07) 55%,rgba(255,255,255,.12)),rgba(20,22,26,.1)}
.cta:hover,.cta:focus-visible{transform:scale(1.03);background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.16) 55%,rgba(255,255,255,.26)),rgba(20,22,26,.08)}
.cta:active{transform:scale(.96)}

/* the one green light on the page: the glass of the button catches it from below,
   and a fine line of it travels the rim */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.cta.go{font-weight:600;font-size:10.5px;letter-spacing:.15em}
.go,.cta.go.glass,.bar nav.r a.go{text-shadow:0 0 10px rgba(170,255,205,.55),0 1px 2px rgba(0,0,0,.35);
  background:radial-gradient(120% 220% at 50% 50%,rgba(120,235,170,.1) 30%,rgba(120,235,170,.3) 66%,rgba(140,250,190,.58) 100%),
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.06) 50%,rgba(255,255,255,.12)),rgba(40,120,80,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 18px rgba(160,255,200,.5),0 0 34px -4px rgba(120,235,170,.7),0 10px 28px -14px rgba(0,0,0,.45);
  animation:breathe 3.6s ease-in-out infinite}
.go::before{padding:1.5px;animation:orbit 4s linear infinite;
  background:conic-gradient(from var(--a),transparent 0 60%,rgba(210,255,228,.45) 70%,#fff 76%,rgba(210,255,228,.45) 81%,transparent 88%),
    linear-gradient(140deg,rgba(255,255,255,.9),rgba(190,255,220,.45) 28%,rgba(170,255,210,.3) 55%,rgba(210,255,230,.75))}
.bar nav.r a.go:hover,.go:hover,.go:focus-visible{animation:none;background:radial-gradient(120% 220% at 50% 50%,rgba(130,245,180,.2) 30%,rgba(130,245,180,.42) 66%,rgba(150,255,200,.72) 100%),
    linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.1) 50%,rgba(255,255,255,.16)),rgba(40,130,85,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 22px rgba(170,255,205,.65),0 0 46px -2px rgba(130,245,180,.85),0 10px 28px -14px rgba(0,0,0,.45)}
@keyframes breathe{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 22px rgba(170,255,205,.6),0 0 44px -2px rgba(130,245,180,.85),0 10px 28px -14px rgba(0,0,0,.45)}}
@keyframes orbit{to{--a:360deg}}
@media (prefers-reduced-motion:reduce){.go,.go::before{animation:none}}

@media (min-width:760px){
  .bar{padding:clamp(22px,4vh,40px) clamp(28px,4vw,64px) 0}
  .mark svg{width:24px;height:31px}.mark span{font-size:9.5px}.mark b{font-size:15px}
  .bar nav.r .tel{display:flex}
  .kicker{max-width:none}
  .call{display:none}
}

/* ── the main menu: six plain doors, in the order a visitor thinks ──
   problem, fix, how to start, who it is for, who we are, how to reach us.
   plain white words parted by hairlines; each opens a quiet glass panel listing its rooms */
.menu{display:none}
@media (min-width:1280px){
  /* centred in the space between the plaque and the pills, so the air either side is equal */
  .menu{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;margin:0 24px}
  .mi{position:relative;display:flex;align-items:center}
  .mi+.mi::before{content:"";width:1px;height:13px;margin:0 clamp(9px,1vw,18px);background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.6),rgba(255,255,255,.15))}
  .mt{position:relative;padding:12px 0;font:500 clamp(11px,.85vw,12.5px)/1 var(--display);letter-spacing:.04em;color:#fff;white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.5)}
  .mt::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:#fff;transform:scaleX(0);transform-origin:center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .mi:hover .mt::after,.mi:focus-within .mt::after{transform:scaleX(1)}
  /* the panel opens as one of the booking widgets laid on its side: the same glass, the same rim and radius,
     its rooms in a single row, centred under the menu and resting above the headline */
  /* each panel opens under its own title, held inside the screen by --shift, with a small glass point
     rising to the title so it is plain which category it belongs to */
  .drop{position:absolute;top:100%;left:50%;padding-top:13px;width:max-content;max-width:96vw;
    visibility:hidden;transform:translateX(calc(-50% + var(--shift,0px)))}
  /* no entrance: the panel is simply there, as a page of a book is when it is turned */
  .mi:hover .drop,.mi:focus-within .drop{visibility:visible}
  /* inside, the rooms stand in columns like the booking widgets: a bold heading over a hairline,
     the rooms listed beneath to one rhythm, columns parted by fine upright rules */
  .panel{display:flex;align-items:stretch;border-radius:22px;padding:15px 8px 14px}
  .panel.glass{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 60%,rgba(255,255,255,.06)),rgba(14,16,20,.8);
    backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3)}
  .drop::before{content:"";position:absolute;z-index:-1;top:7px;left:calc(50% - var(--shift,0px));width:13px;height:13px;margin-left:-6.5px;transform:rotate(45deg);border-radius:3px 0 0 0;
    background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),rgba(14,16,20,.82);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.7)}
  .col{position:relative;display:flex;flex-direction:column;gap:2px;min-width:140px;padding:0 clamp(13px,1.3vw,24px)}
  .col+.col::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.32) 30%,rgba(255,255,255,.32) 70%,rgba(255,255,255,.04))}
  .col-h{position:relative;margin-bottom:7px;padding-bottom:9px;font:600 10px/1.2 var(--display);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.35)}
  .col-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.12))}
  .col a{display:block;margin:0 -9px;padding:5px 9px;border-radius:9px;font:500 13px/1.3 var(--display);letter-spacing:.01em;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);transition:background .25s ease}
  .col a:hover,.col a:focus-visible{background:rgba(255,255,255,.14);outline:none}
  /* on a short screen the panel draws in its rhythm so it still clears the headline */
  @media (max-height:800px){
    .drop{padding-top:10px}.drop::before{top:4px}
    .panel{padding:11px 8px 10px}.col{gap:0}
    .col-h{margin-bottom:4px;padding-bottom:6px}.col a{padding:3px 9px}
  }
}