/* ═══════════════════════════════════════════════
   FIVE HOTEL — redesign
   Type: Fraunces (display serif) + Manrope (sans)
   ═══════════════════════════════════════════════ */

:root{
  --bg:        #EDE7DA;   /* warm bone / ivory */
  --bg-2:      #E4DCCB;   /* slightly deeper panel */
  --ink:       #1C1712;   /* espresso near-black */
  --ink-soft:  #4A4238;
  --muted:     #8A8074;
  --accent:    #A9713E;   /* single bronze accent */
  --accent-2:  #C89460;
  --dark:      #14110D;   /* dark section bg */
  --dark-bg:   #14110D;
  --line:      rgba(28,23,18,.16);
  --line-soft: rgba(28,23,18,.08);
  --ivory:     #EDE7DA;

  --f-serif: "Fraunces", Georgia, serif;
  --f-sans:  "Manrope", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --gutter: clamp(20px, 5vw, 84px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  font-family:var(--f-sans);
  background:var(--bg);
  color:var(--ink);
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  cursor:default;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:var(--ivory); }

.noise-svg{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9999; opacity:.5;
  mix-blend-mode:multiply;
}

/* ─── shared type ─── */
.kicker{
  font-family:var(--f-sans);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}
.kicker--bracket::before{ content:"[ "; opacity:.55; }
.kicker--bracket::after{ content:" ]"; opacity:.55; }

.section-title{
  font-family:var(--f-serif);
  font-weight:340;
  font-size:clamp(2.6rem, 6.5vw, 6rem);
  line-height:.98;
  letter-spacing:-.02em;
}
.section-title em{ color:var(--accent); }

/* ─── buttons ─── */
.btn-underline{
  font-family:var(--f-sans);
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; position:relative; padding-bottom:6px; white-space:nowrap;
}
.btn-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor; transform-origin:left;
  transition:transform .5s var(--ease);
}
.btn-underline:hover::after{ transform:scaleX(0); transform-origin:right; }
.btn-underline--lg{ font-size:1.05rem; letter-spacing:.04em; text-transform:none; font-family:var(--f-serif); }

.btn-solid{
  display:inline-block; background:var(--ink); color:var(--ivory);
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:1.15rem 2.2rem; border-radius:100px;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.btn-solid:hover{ background:var(--accent); transform:translateY(-3px); }

/* ═══════════ HEADER ═══════════ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:22px var(--gutter);
  mix-blend-mode:difference; color:#fff;
  transition:padding .4s var(--ease);
}
.site-head.scrolled{ padding:14px var(--gutter); }

.brand{ display:flex; align-items:baseline; gap:.5rem; }
.brand__mark{
  font-family:var(--f-serif); font-weight:600; font-size:1.5rem;
  font-style:italic; line-height:1;
}
.brand__word{ font-family:var(--f-serif); font-weight:500; font-size:1.15rem; letter-spacing:.28em; }
.brand__sub{ font-size:.6rem; letter-spacing:.24em; opacity:.7; align-self:center; }

.nav{ display:flex; align-items:center; gap:1rem; justify-self:center; }
.nav a{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  position:relative; opacity:.9; transition:opacity .3s;
}
.nav a:hover{ opacity:1; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); }
.nav__dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.5; }

.head-right{ display:flex; align-items:center; gap:1.2rem; justify-self:end; }
.lang{ display:flex; gap:.15rem; align-items:center; font-size:.72rem; letter-spacing:.1em; font-weight:600; }
.lang__btn{ background:none; border:none; color:inherit; cursor:pointer; opacity:.45; padding:2px 3px; font:inherit; transition:opacity .3s; }
.lang__btn.is-active{ opacity:1; }
.lang__btn:not(.is-active):hover{ opacity:.75; }

.pill-cta{
  border:1px solid currentColor; border-radius:100px;
  padding:.62rem 1.35rem; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.pill-cta:hover{ background:#fff; color:#000; }

.burger{ display:none; }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--gutter) clamp(40px,6vh,72px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:120%; object-fit:cover; will-change:transform; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,17,13,.42) 0%, rgba(20,17,13,.05) 32%, rgba(20,17,13,.15) 60%, rgba(20,17,13,.78) 100%);
}

.hero__watermark{
  position:absolute; z-index:1; right:-.06em; bottom:-.26em;
  font-family:var(--f-serif); font-weight:300; font-style:italic;
  font-size:clamp(20rem, 46vw, 62rem); line-height:.7;
  color:transparent; -webkit-text-stroke:1.2px rgba(255,255,255,.22);
  pointer-events:none; user-select:none;
}

.hero__grid{ position:relative; z-index:2; color:var(--ivory); max-width:1500px; width:100%; }
.hero__title{
  font-family:var(--f-serif); font-weight:300;
  font-size:clamp(3.3rem, 11.5vw, 12.5rem); line-height:.9; letter-spacing:-.03em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > *,
.hero__title .line{ }
.hero__title em{ font-weight:340; color:var(--accent-2); }
.hero__title .line--2{ padding-left:.14em; }
.hero__title .line--3{ font-size:.82em; padding-left:.02em; }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-top:clamp(1.6rem,4vh,3rem);
  border-top:1px solid rgba(255,255,255,.22); padding-top:1.5rem;
}
.hero__lede{ max-width:42ch; font-size:clamp(.95rem,1.15vw,1.1rem); color:rgba(255,255,255,.82); line-height:1.65; }
.hero__foot .btn-underline{ color:var(--ivory); }

.hero .kicker{ color:var(--accent-2); margin-bottom:1.4rem; }

.hero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(40px,6vh,72px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.7); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__scroll-line{ width:1px; height:54px; background:linear-gradient(rgba(255,255,255,.7),transparent); animation:drop 2.2s var(--ease) infinite; }
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  background:var(--ink); color:var(--ivory); overflow:hidden;
  padding:1.05rem 0; border-top:1px solid var(--ink);
}
.marquee__track{ display:flex; align-items:center; gap:2.4rem; width:max-content; animation:scroll-x 34s linear infinite; }
.marquee__track span{ font-family:var(--f-serif); font-size:1.5rem; font-weight:300; font-style:italic; white-space:nowrap; }
.marquee__track i{ color:var(--accent-2); font-size:.7rem; font-style:normal; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* ═══════════ INTRO ═══════════ */
.intro{
  position:relative;
  display:grid; grid-template-columns:1fr 3.2fr;
  gap:clamp(2rem,6vw,6rem);
  padding:clamp(5rem,12vh,9rem) var(--gutter);
  border-bottom:1px solid var(--line);
}
.section-index, .intro__index, .rooms__index, .dark__index, .gallery__index, .location__index{
  font-family:var(--f-serif); font-style:italic; font-weight:300;
  color:var(--accent); opacity:.32;
}
.intro__index{ position:absolute; top:clamp(2rem,5vh,3.4rem); right:var(--gutter); font-size:clamp(3rem,7vw,6rem); }
.intro__left .kicker{ position:sticky; top:120px; }
.intro__statement{
  font-family:var(--f-serif); font-weight:330;
  font-size:clamp(1.7rem,3.6vw,3.3rem); line-height:1.18; letter-spacing:-.015em;
  max-width:20ch;
}
.intro__statement em{ color:var(--accent); font-size:1.05em; }
.intro__stats{ display:flex; flex-wrap:wrap; gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.5rem,6vh,4rem); }
.stat{ display:flex; flex-direction:column; gap:.35rem; }
.stat__num{ font-family:var(--f-serif); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:340; line-height:1; }
.stat__label{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ═══════════ ROOMS ═══════════ */
.rooms{ position:relative; padding:clamp(4rem,9vh,7rem) var(--gutter) clamp(4rem,9vh,6rem); }
.rooms__head{ position:relative; margin-bottom:clamp(2rem,5vh,3.5rem); }
.rooms__index{ position:absolute; top:-.3em; right:0; font-size:clamp(3rem,7vw,6rem); }
.rooms__head .kicker{ display:block; margin-bottom:1.1rem; }

.room-list{ list-style:none; border-top:1px solid var(--line); }
.room{
  position:relative; display:grid;
  grid-template-columns:auto 1.1fr 2fr auto; align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.5rem,3.4vh,2.4rem) 0;
  border-bottom:1px solid var(--line);
  cursor:pointer; transition:padding-left .5s var(--ease), color .4s var(--ease);
}
.room:hover{ padding-left:clamp(.6rem,1.4vw,1.4rem); color:var(--accent); }
.room__no{ font-family:var(--f-sans); font-size:.8rem; letter-spacing:.1em; color:var(--muted); font-weight:600; }
.room:hover .room__no{ color:var(--accent); }
.room__name{ font-family:var(--f-serif); font-weight:340; font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:1; letter-spacing:-.02em; }
.room__desc{ font-size:.92rem; color:var(--ink-soft); max-width:36ch; }
.room:hover .room__desc{ color:var(--accent); }
.room__cta{
  justify-self:end; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--muted); opacity:0; transform:translateX(-8px); transition:.45s var(--ease);
}
.room:hover .room__cta{ opacity:1; transform:translateX(0); color:var(--accent); }

/* floating peek image */
.room-peek{
  position:fixed; top:0; left:0; z-index:60; width:min(30vw,360px); aspect-ratio:4/5;
  overflow:hidden; border-radius:4px; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.9) rotate(-3deg);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  box-shadow:0 30px 60px rgba(20,17,13,.35);
  will-change:transform, opacity;
}
.room-peek img{ width:100%; height:100%; object-fit:cover; }
.room-peek.is-visible{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg); }

.room-amenities{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:1.5rem 2rem;
  margin-top:clamp(2.5rem,5vh,3.5rem); padding-top:2rem; border-top:1px solid var(--line);
}
.room-amenities .kicker{ flex:0 0 auto; }
.amen{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
.amen li{
  font-family:var(--f-serif); font-size:clamp(1.1rem,2vw,1.5rem); font-weight:330;
  position:relative; padding-left:1.1rem;
}
.amen li::before{ content:"✦"; position:absolute; left:0; top:.15em; font-size:.5em; color:var(--accent); }

/* ═══════════ DARK STRIP ═══════════ */
.dark{
  position:relative; background:var(--dark); color:var(--ivory);
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
.dark__index{ position:absolute; top:clamp(2rem,5vh,3rem); left:var(--gutter); z-index:2; font-size:clamp(3rem,7vw,6rem); opacity:.5; }
.dark__col--text{ padding:clamp(4.5rem,11vh,8rem) clamp(2rem,5vw,5rem); display:flex; flex-direction:column; justify-content:center; gap:1.6rem; }
.dark .kicker{ color:var(--accent-2); }
.dark__title{ font-family:var(--f-serif); font-weight:300; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.02; letter-spacing:-.02em; }
.dark__title em{ color:var(--accent-2); }
.dark__lede{ max-width:46ch; color:rgba(237,231,218,.72); font-size:1.02rem; line-height:1.7; }
.dark__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
.dark__tags li{
  border:1px solid rgba(237,231,218,.28); border-radius:100px; padding:.5rem 1.1rem;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,231,218,.85);
}
.dark__col--media{ overflow:hidden; min-height:60vh; }
.dark__col--media img{ width:100%; height:110%; object-fit:cover; will-change:transform; }

/* ═══════════ GALLERY ═══════════ */
.gallery{ padding:clamp(5rem,12vh,9rem) var(--gutter); }
.gallery__head{ position:relative; margin-bottom:clamp(2.5rem,6vh,4rem); }
.gallery__index{ position:absolute; top:-.3em; right:0; font-size:clamp(3rem,7vw,6rem); }
.gallery__head .kicker{ display:block; margin-bottom:1.1rem; }

.collage{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:8vw;
  gap:clamp(12px,1.6vw,26px);
}
.collage__item{ overflow:hidden; border-radius:3px; }
.collage__item img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.collage__item:hover img{ transform:scale(1.06); }
.collage__item--a{ grid-column:1/6;  grid-row:1/5; }
.collage__item--b{ grid-column:6/9;  grid-row:1/4; transform:translateY(2.2vw); }
.collage__item--c{ grid-column:9/13; grid-row:1/6; }
.collage__item--d{ grid-column:1/5;  grid-row:5/9; }
.collage__item--e{ grid-column:5/9;  grid-row:4/9; transform:translateY(2.2vw); }

/* ═══════════ LOCATION ═══════════ */
.location{
  position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(2rem,5vw,5rem); padding:clamp(4rem,10vh,7rem) var(--gutter);
  border-top:1px solid var(--line);
}
.location__index{ position:absolute; top:clamp(2rem,5vh,3rem); right:var(--gutter); font-size:clamp(3rem,7vw,6rem); }
.location__title{ font-family:var(--f-serif); font-weight:300; font-size:clamp(2.2rem,5vw,4.4rem); line-height:1.02; letter-spacing:-.02em; margin:1.2rem 0 1.4rem; }
.location__title em{ color:var(--accent); }
.location__lede{ max-width:44ch; color:var(--ink-soft); font-size:1.02rem; line-height:1.7; }
.location__contacts{ display:flex; flex-direction:column; gap:.9rem; margin-top:2.4rem; }
.location__contacts a{ display:flex; align-items:baseline; gap:1rem; font-family:var(--f-serif); font-size:clamp(1.1rem,2vw,1.5rem); font-weight:330; border-bottom:1px solid var(--line); padding-bottom:.8rem; transition:color .3s; }
.location__contacts a:hover{ color:var(--accent); }
.lc__label{ font-family:var(--f-sans); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); flex:0 0 90px; }
.location__map{ position:relative; overflow:hidden; border-radius:4px; aspect-ratio:4/5; }
.location__map img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.location__map:hover img{ transform:scale(1.05); }
.location__pin{ position:absolute; left:1.4rem; bottom:1.4rem; background:var(--ivory); color:var(--ink); padding:.7rem 1.2rem; border-radius:100px; font-size:.74rem; letter-spacing:.08em; font-weight:600; text-transform:uppercase; }

/* ═══════════ CTA ═══════════ */
.cta{
  position:relative; overflow:hidden; text-align:center;
  background:var(--ink); color:var(--ivory);
  padding:clamp(5rem,14vh,10rem) var(--gutter);
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.cta .kicker{ color:var(--accent-2); }
.cta__title{ position:relative; z-index:2; font-family:var(--f-serif); font-weight:300; font-size:clamp(3rem,9vw,8rem); line-height:.94; letter-spacing:-.03em; }
.cta__title em{ color:var(--accent-2); }
.cta__lede{ position:relative; z-index:2; max-width:44ch; color:rgba(237,231,218,.72); font-size:1.05rem; line-height:1.65; }
.cta__actions{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2rem; margin-top:1rem; }
.cta__actions .btn-underline{ color:var(--ivory); }
.cta__watermark{
  position:absolute; left:50%; bottom:-.36em; transform:translateX(-50%);
  font-family:var(--f-serif); font-weight:300; font-style:italic;
  font-size:clamp(10rem,34vw,30rem); line-height:.7; color:transparent;
  -webkit-text-stroke:1px rgba(237,231,218,.08); pointer-events:none; z-index:1; white-space:nowrap;
}

/* ═══════════ FOOTER ═══════════ */
.foot{ background:var(--bg-2); padding:clamp(3rem,7vh,5rem) var(--gutter) 2rem; }
.foot__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line); }
.brand--foot{ color:var(--ink); }
.brand--foot .brand__mark{ color:var(--accent); }
.foot__social{ display:flex; gap:.7rem; }
.foot__social a{ width:44px; height:44px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; font-size:.78rem; letter-spacing:.05em; font-weight:600; transition:.4s var(--ease); }
.foot__social a:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); transform:translateY(-3px); }
.foot__grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; padding:2.5rem 0; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.6rem; }
.foot__nav a{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--ink-soft); transition:color .3s; }
.foot__nav a:hover{ color:var(--accent); }
.foot__addr{ font-family:var(--f-serif); font-style:italic; color:var(--muted); font-size:1rem; }
.foot__base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ═══════════ REVEAL ═══════════ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
.collage [data-reveal]{ transition-delay:calc(var(--i,0) * .08s); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1024px){
  .nav{ display:none; }
  .site-head{ grid-template-columns:1fr auto; }
  .room{ grid-template-columns:auto 1fr; grid-template-areas:"no name" "desc desc"; gap:.4rem 1.5rem; }
  .room__desc{ grid-area:desc; }
  .room__cta{ display:none; }
  .room-peek{ display:none; }
  .dark, .location{ grid-template-columns:1fr; }
  .dark__col--media{ min-height:52vh; order:-1; }
  .intro{ grid-template-columns:1fr; }
  .intro__left .kicker{ position:static; }
  .collage{ grid-auto-rows:14vw; }
}
@media (max-width:640px){
  .head-right .pill-cta{ display:none; }
  .burger{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px 0; }
  .burger span{ width:26px; height:1.5px; background:currentColor; display:block; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .collage{ grid-template-columns:repeat(6,1fr); grid-auto-rows:22vw; }
  .collage__item--a{ grid-column:1/7; grid-row:1/3; transform:none; }
  .collage__item--b{ grid-column:1/4; grid-row:3/5; transform:none; }
  .collage__item--c{ grid-column:4/7; grid-row:3/5; transform:none; }
  .collage__item--d{ grid-column:1/4; grid-row:5/7; transform:none; }
  .collage__item--e{ grid-column:4/7; grid-row:5/7; transform:none; }
  .room-amenities{ flex-direction:column; }
  .foot__grid{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}