:root{--white:#f4f1eb;--black:#050606;--line:#30302f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:"Libre Caslon Text",Georgia,serif}a{color:inherit;text-decoration:none}.site-header{height:150px;position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;border-bottom:1px solid transparent;transition:background .45s,border .45s,backdrop-filter .45s}.site-header.scrolled{background:rgba(37,29,24,.68);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.13)}.wordmark{display:flex;flex-direction:column;align-items:center;text-align:center}.wordmark strong{font-family:"Italiana","Libre Caslon Display",serif;font-size:60px;font-weight:400;line-height:.9;letter-spacing:-.025em}.wordmark span{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.42em;margin-top:14px}.site-header .wordmark{opacity:0;transition:opacity .3s}.site-header.scrolled .wordmark{opacity:1}.menu-trigger{position:absolute;right:6.5vw;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--white);font:italic 25px "Libre Caslon Text",Georgia,serif;cursor:pointer;padding:10px}.hero{height:100vh;min-height:680px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-media,.hero-media:after,.hero-media video{position:absolute;inset:0;width:100%;height:100%}.hero-media{background:url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2400&q=88") center/cover}.hero-media video{object-fit:cover}.hero-media:after{content:"";background:linear-gradient(rgba(20,12,7,.2),rgba(8,5,3,.48))}.hero:before{content:"STRICTONS\A SIGNATURE HOTEL GUIDES";white-space:pre;position:absolute;z-index:2;top:32px;text-align:center;font-family:"Italiana",serif;font-size:61px;line-height:.72;letter-spacing:-.02em}.hero:after{content:"";position:absolute;z-index:2;top:98px;width:0}.hero-copy{position:relative;z-index:3;text-align:center;margin-top:180px;width:94%}.hero-copy p{font-style:italic;font-size:42px;margin:0 0 10px}.hero-copy h1{font-family:"Libre Caslon Display",Georgia,serif;font-weight:400;font-size:clamp(70px,8.5vw,146px);line-height:.88;letter-spacing:-.055em;margin:0}.hero-copy h2{font-style:italic;font-weight:400;font-size:36px;margin:34px 0 0}.black-stage{min-height:calc(100vh + 460px);background:var(--black);padding:34px 0 28px;position:relative}.reel-wrap{width:100%;overflow:hidden}.reel{display:flex;gap:24px;width:max-content;will-change:transform}.reel figure{width:338px;height:338px;margin:0;flex:none}.reel figure:nth-child(2){width:340px}.reel figure:nth-child(3){width:340px}.reel img{width:100%;height:100%;object-fit:cover;display:block}.rule{height:1px;background:var(--line);margin:23px 3.8vw 0}.footer-nav{display:flex;align-items:center;justify-content:center;gap:65px;padding:83px 4vw 70px;white-space:nowrap}.footer-nav a{font-family:"Libre Caslon Display",Georgia,serif;font-size:49px;letter-spacing:-.03em}.bottom-brand{margin:45px auto 120px}.bottom-brand strong{font-size:49px}.bottom-brand span{font-size:10px}.bottom-rule{margin-top:0}footer{text-align:center;font-family:Arial,sans-serif;color:#b7b4b0;font-size:16px;padding:28px 20px 10px}footer div{margin-top:18px;display:flex;justify-content:center;gap:44px}footer a{text-decoration:underline;text-underline-offset:5px}.menu-overlay{position:fixed;z-index:100;inset:0;background:#070808;color:var(--white);visibility:hidden;opacity:0;transition:opacity .32s,visibility .32s}.menu-overlay.open{visibility:visible;opacity:1}.overlay-logo{position:absolute;top:35px;left:50%;transform:translateX(-50%)}.overlay-logo strong{font-size:60px}.overlay-links{position:absolute;left:14vw;top:30%;display:flex;flex-direction:column}.overlay-links a{font-family:"Libre Caslon Display",Georgia,serif;font-size:75px;line-height:1.28;letter-spacing:-.035em;transition:opacity .2s}.overlay-links:hover a{opacity:.35}.overlay-links a:hover{opacity:1}.menu-overlay .close{top:68px}body.menu-open{overflow:hidden}.black-stage>i{position:absolute;bottom:0}@media(max-width:900px){.site-header{height:105px}.wordmark strong,.overlay-logo strong{font-size:40px}.wordmark span{font-size:8px;margin-top:9px}.menu-trigger{font-size:19px;right:4vw}.hero:before{font-size:41px;top:28px}.hero-copy{margin-top:100px}.hero-copy p{font-size:27px}.hero-copy h1{font-size:clamp(58px,14vw,100px)}.hero-copy h2{font-size:23px}.reel figure{width:260px;height:300px}.footer-nav{overflow-x:auto;justify-content:flex-start;gap:35px;padding:65px 7vw}.footer-nav a{font-size:35px}.overlay-links{left:8vw;top:24%}.overlay-links a{font-size:clamp(48px,10vw,72px)}.bottom-brand{margin-bottom:90px}}@media(max-width:560px){.hero{min-height:720px}.hero-copy h1{line-height:.95}.hero-copy h2{font-size:19px;line-height:1.3}.reel{gap:14px}.reel figure{width:225px;height:270px}.footer-nav a{font-size:31px}.black-stage{padding-top:18px}.overlay-logo{left:6vw;transform:none;align-items:flex-start}.overlay-logo strong{font-size:34px}.menu-overlay .close{top:51px}.overlay-links{top:26%}}

/* Responsive fit pass */
.site-header{position:fixed;top:0;max-width:100vw}
.wordmark strong{font-size:clamp(34px,3.25vw,60px)}
.wordmark span{font-size:clamp(7px,.7vw,13px);letter-spacing:clamp(.25em,.42em,.42em)}
.hero-copy p{font-size:clamp(25px,2.25vw,42px)}
.hero-copy h1{font-size:clamp(54px,8.1vw,146px);white-space:nowrap}
.hero-copy h2{font-size:clamp(20px,1.95vw,36px)}
.footer-nav{gap:clamp(24px,3.4vw,65px)}
.footer-nav a{font-size:clamp(28px,2.65vw,49px)}
.overlay-links a{font-size:clamp(48px,4vw,75px)}
.bottom-brand strong{font-size:clamp(34px,2.7vw,49px)}
.reel figure,.reel figure:nth-child(2),.reel figure:nth-child(3){width:clamp(230px,17.6vw,338px);height:clamp(260px,17.6vw,338px)}
@media(max-width:1200px){.footer-nav{padding-left:3vw;padding-right:3vw}.hero-copy{width:96%}.menu-trigger{right:4vw}}
@media(max-width:760px){.hero-copy h1{white-space:normal;max-width:94vw;margin-left:auto;margin-right:auto}.hero-copy h2{max-width:88vw;margin-left:auto;margin-right:auto}.footer-nav{flex-wrap:wrap;justify-content:center;white-space:normal;row-gap:22px}.footer-nav a{font-size:clamp(27px,7vw,36px)}}
@media(max-height:760px) and (min-width:761px){.hero{min-height:620px}.hero-copy{margin-top:105px}.hero-copy p{font-size:clamp(24px,2vw,34px)}.hero-copy h1{font-size:clamp(58px,7vw,110px)}.hero-copy h2{margin-top:20px;font-size:clamp(20px,1.7vw,29px)}.site-header{height:112px}.site-header.scrolled{height:105px}.reel figure,.reel figure:nth-child(2),.reel figure:nth-child(3){height:280px;width:280px}}

/* Masthead refinement - compact at rest and on scroll */
.wordmark strong{font-family:"Grandeur Display","Libre Caslon Display",Didot,"Bodoni 72",serif;font-weight:700;font-size:clamp(32px,2.55vw,48px);line-height:.88;letter-spacing:-.025em}
.wordmark span{font-family:"Red Hat Display",Arial,sans-serif;font-weight:500;font-size:clamp(7px,.58vw,11px);line-height:1;letter-spacing:.48em;margin-top:12px;padding-left:.48em}
.site-header .wordmark{opacity:1}
.site-header,.site-header.scrolled{height:150px}
.overlay-logo strong{font-size:clamp(32px,2.55vw,48px)}
.bottom-brand strong{font-size:clamp(32px,2.55vw,48px)}
@media(max-width:900px){.site-header,.site-header.scrolled{height:105px}.wordmark strong,.overlay-logo strong{font-size:clamp(30px,6vw,40px)}.wordmark span{font-size:clamp(6px,1.35vw,8px);letter-spacing:.42em;padding-left:.42em;margin-top:9px}}

/* Fix duplicate hero masthead: header wordmark is now the sole logo */
.hero:before,.hero:after{content:none!important;display:none!important}

/* Match reference masthead scale and prevent subtitle collisions */
.site-header .wordmark{width:max-content;max-width:62vw}
.site-header .wordmark strong{display:block;white-space:nowrap}
.site-header .wordmark span{display:block;white-space:nowrap}

/* Tighten footer bottom spacing */
footer{padding-bottom:0}
.black-stage{padding-bottom:14px}
footer div{margin-bottom:0}
@media(max-width:560px){.black-stage{padding-bottom:10px}footer{padding-bottom:0}}

/* Let the footer define the natural end of the page */
.black-stage{min-height:0!important;height:auto!important;padding-bottom:24px!important}
footer{padding:28px 20px 0!important;margin:0!important}
footer div{margin-bottom:0!important}

/* Slimmer sticky navigation */
.site-header,.site-header.scrolled{height:112px}
.site-header .wordmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.site-header .menu-trigger{top:50%;transform:translateY(-50%)}
@media(max-width:900px){.site-header,.site-header.scrolled{height:88px}}
@media(max-width:560px){.site-header,.site-header.scrolled{height:82px}}

/* Luxury menu arrival */
.menu-overlay{
  visibility:hidden;
  opacity:1;
  transform:translate3d(0,-102%,0);
  transition:
    transform .78s cubic-bezier(.12,.78,.18,1),
    visibility 0s linear .78s;
  will-change:transform;
  overflow:hidden;
}
.menu-overlay.open{
  visibility:visible;
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    transform .78s cubic-bezier(.12,.78,.18,1),
    visibility 0s;
}
.menu-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:110;
  opacity:0;
  box-shadow:
    inset 0 0 1px rgba(255,248,232,.95),
    inset 0 0 18px rgba(255,240,210,.16),
    inset 0 0 44px rgba(255,226,180,.07);
}
.menu-overlay.open::after{
  animation:menuArrivalGlow 1.35s .48s cubic-bezier(.16,1,.3,1) both;
}
@keyframes menuArrivalGlow{
  0%{opacity:0}
  22%{opacity:.95}
  100%{opacity:.22}
}
/* Exit is deliberately brisker than the entrance. */
.menu-overlay:not(.open){
  transition:
    transform .42s cubic-bezier(.55,.05,.8,.3),
    visibility 0s linear .42s;
}
@media(prefers-reduced-motion:reduce){
  .menu-overlay,.menu-overlay.open,.menu-overlay:not(.open){transition:none}
  .menu-overlay.open::after{animation:none;opacity:.18}
}

/* Menu panel moves behind a stationary header */
.site-header{z-index:120}
.menu-overlay{z-index:100}

/* Slow release, then accelerates into the final position */
.menu-overlay{
  transform:translate3d(0,-102%,0);
  transition:
    transform .95s cubic-bezier(.62,.02,.92,.58),
    visibility 0s linear .95s;
}
.menu-overlay.open{
  transform:translate3d(0,0,0);
  transition:
    transform .95s cubic-bezier(.62,.02,.92,.58),
    visibility 0s;
}
.menu-overlay:not(.open){
  transition:
    transform .42s cubic-bezier(.4,0,1,1),
    visibility 0s linear .42s;
}

/* Header remains visually fixed while menu is open */
body.menu-open .site-header{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-color:transparent;
}
body.menu-open .site-header .menu-trigger{font-size:0}
body.menu-open .site-header .menu-trigger::after{
  content:"Close.";
  font:italic 25px "Libre Caslon Text",Georgia,serif;
}
@media(max-width:900px){
  body.menu-open .site-header .menu-trigger::after{font-size:19px}
}

/* Arrival light begins only as the falling panel reaches its destination */
.menu-overlay.open::after{
  animation:menuArrivalGlow 1.25s .82s cubic-bezier(.16,1,.3,1) both;
}

/* Sequence overlay content only after the panel has landed */
.menu-overlay .overlay-links{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .12s linear,transform .12s linear;
}
.menu-overlay.open .overlay-links{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition:
    opacity .58s ease .96s,
    transform .7s cubic-bezier(.16,1,.3,1) .96s;
}

/* Closing: content vanishes first; panel reverses upward quickly */
.menu-overlay.closing .overlay-links{
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .1s linear,transform .1s linear;
}
.menu-overlay.closing{
  visibility:visible;
  transform:translate3d(0,-102%,0);
  transition:transform .30s cubic-bezier(.55,.06,.95,.42);
}
.menu-overlay.closing::after{animation:none!important;opacity:0!important}

/* Hero media loading */
.hero-media{background:#171717}
.hero-media .hero-poster{position:absolute;inset:0;display:block}
.hero-media .hero-poster img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media video{position:absolute;inset:0;z-index:1}

/* Homepage media clarity and contrast */
.hero-media{background:#171717}
.hero-media:after{z-index:2;background:linear-gradient(to bottom,rgba(5,5,5,.34) 0%,rgba(5,5,5,.16) 42%,rgba(5,5,5,.38) 100%);pointer-events:none}
.hero-media .hero-poster{z-index:0}
.hero-media video{z-index:1;filter:none;transform:translateZ(0);backface-visibility:hidden}
.hero:before,.hero-copy{z-index:3}

/* Consistent editorial heading rhythm site-wide. */
body h1,body h2,body h3{line-height:.98!important}

/* Keep the Menu. trigger light and editorial. */
.menu-trigger{font-weight:400!important}