/* ————————————————————————————————————————————————————————————
   HOTEL REVERIE · a hotel at the edge of sleep
   palette: dawn lilac #b9a7d6 · peach #f2c9a8 · deep dusk #2a2440 · ivory #f6f1e9
   type: Cormorant Garamond (italic display) · Outfit (body/UI, variable)
   ———————————————————————————————————————————————————————————— */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Outfit';
  src:url('../fonts/outfit-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --dusk:#2a2440;
  --dusk-deep:#16132a;
  --lilac:#b9a7d6;
  --peach:#f2c9a8;
  --ivory:#f6f1e9;
  --plum:#4b3f68;

  /* JS drives this triplet between dusk and dawn so the veils sample the sky */
  --veil:30 26 52;
  --ink:var(--ivory);
  --focus:var(--peach);

  --serif:'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:'Outfit', 'Avenir Next', system-ui, sans-serif;

  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-soft:cubic-bezier(.6,.05,.28,.91);
  --ease-drift:cubic-bezier(.33,.01,.3,1);

  --col-inset:clamp(1.25rem, 8.5vw, 11rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:340;
  font-size:1.04rem;
  line-height:1.7;
  color:var(--ink);
  /* fallback sky (no JS / no WebGL / while the shader warms) */
  background:linear-gradient(180deg,
    #16132a 0%, #2a2440 26%, #4b3f68 52%, #8f7cb2 72%, #d3b3a9 88%, #f2c9a8 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
@supports (background-attachment:fixed){}

::selection{ background:var(--peach); color:var(--dusk-deep); }

.sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:-1;
  display:block;
}
html.no-webgl .sky{ display:none; }

/* ——— a11y chrome ——— */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:1rem; left:1rem; z-index:40;
  transform:translateY(-300%);
  background:var(--dusk-deep); color:var(--ivory);
  padding:.55em 1em; font-size:.82rem; letter-spacing:.08em;
  text-decoration:none;
  transition:transform .3s var(--ease-out-quart);
}
.skip:focus-visible{ transform:none; }

:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:1px;
}

/* ——— masthead ——— */
.masthead{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:1.35rem clamp(1.25rem, 3.5vw, 2.6rem);
  pointer-events:none;
}
.masthead > *{ pointer-events:auto; }
.wordmark{
  margin:0;
  font-weight:500; font-size:.78rem;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--ivory);
  text-shadow:0 0 18px rgb(22 19 42 / .55);
}
.wordmark-est{
  font-family:var(--serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:.04em;
  font-size:.92rem; margin-left:.7em;
  color:rgb(246 241 233 / .78);
}
.masthead-link{
  font-size:.78rem; font-weight:440;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory); text-decoration:none;
  padding-bottom:.3em;
  border-bottom:1px solid rgb(246 241 233 / .38);
  text-shadow:0 0 18px rgb(22 19 42 / .55);
  transition:border-color .35s var(--ease-out-quart), color .35s var(--ease-out-quart);
}
.masthead-link:hover{ color:var(--peach); border-color:var(--peach); }

/* turndown service: the night porter's switch */
.turndown{
  display:inline-flex; align-items:center; gap:.55em;
  background:none; border:0; cursor:pointer;
  font:inherit; font-size:.78rem; font-weight:440;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgb(246 241 233 / .72);
  text-shadow:0 0 18px rgb(22 19 42 / .55);
  padding:.2em .1em .3em;
  transition:color .35s var(--ease-out-quart);
}
.turndown:hover{ color:var(--peach); }
.turndown-moon{
  width:.62em; height:.62em; border-radius:50%;
  border:1px solid currentColor;
  box-shadow:inset 0 0 0 0 currentColor;
  transition:box-shadow .5s var(--ease-soft);
}
.turndown[aria-pressed="true"] .turndown-moon{ box-shadow:inset 0 0 0 .4em currentColor; }
.turndown[aria-pressed="true"]{ color:var(--lilac); }

/* at the dawn terrace the chrome wakes up: ivory → dusk ink */
html.daylight .wordmark,
html.daylight .masthead-link{
  color:var(--dusk-deep);
  text-shadow:0 1px 8px rgb(246 241 233 / .3);
}
html.daylight .wordmark-est{ color:rgb(42 36 64 / .8); }
html.daylight .turndown{ color:rgb(22 19 42 / .85); text-shadow:0 1px 8px rgb(246 241 233 / .3); }
html.daylight .turndown:hover{ color:#8a5a34; }
html.daylight .masthead-link{ border-color:rgb(42 36 64 / .45); }
html.daylight .masthead-link:hover{ color:#8a5a34; border-color:#8a5a34; }
.wordmark, .wordmark-est, .masthead-link{
  transition:color .6s var(--ease-drift), border-color .6s var(--ease-drift),
             text-shadow .6s var(--ease-drift);
}

/* ——— the lift panel: floor indicator + quiet nav, right rail ——— */
.lift{
  position:fixed; right:clamp(1.1rem, 2.6vw, 2.4rem); top:50%;
  transform:translateY(-50%);
  z-index:18;
}
.lift ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:flex-end; gap:.35rem;
}
.lift a{
  display:flex; align-items:baseline; justify-content:flex-end; gap:.75em;
  padding:.28em .1em;
  text-decoration:none;
}
.lift-name{
  font-size:.68rem; font-weight:460;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgb(246 241 233 / .85);
  text-shadow:0 0 12px rgb(22 19 42 / .7);
  opacity:0; transform:translateX(.5em);
  transition:opacity .45s var(--ease-out-quart), transform .45s var(--ease-out-quart);
}
.lift a:hover .lift-name,
.lift a:focus-visible .lift-name,
.lift a[aria-current] .lift-name{ opacity:1; transform:none; }
.lift-no{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.18rem; line-height:1;
  min-width:1.3em; text-align:center;
  color:rgb(246 241 233 / .58);
  text-shadow:0 0 3px rgb(22 19 42 / .5), 0 0 12px rgb(22 19 42 / .7);
  transition:color .45s var(--ease-out-quart), text-shadow .45s var(--ease-out-quart);
}
.lift a:hover .lift-no{ color:rgb(246 241 233 / .9); }
.lift a[aria-current] .lift-no{
  color:var(--peach);
  text-shadow:0 0 14px rgb(242 201 168 / .8), 0 0 4px rgb(22 19 42 / .5);
}
html.daylight .lift-no{ color:rgb(42 36 64 / .48); text-shadow:none; }
html.daylight .lift a:hover .lift-no{ color:var(--dusk); }
html.daylight .lift a[aria-current] .lift-no{
  color:#8a5a34; text-shadow:0 0 12px rgb(246 241 233 / .8);
}
html.daylight .lift-name{ color:rgb(42 36 64 / .85); text-shadow:none; }

/* near full dawn the whole sky brightens: quiet chrome flips to ink */
html.brightsky .cue-text{
  color:rgb(42 36 64 / .82);
  text-shadow:0 0 4px rgb(246 241 233 / .5), 0 0 14px rgb(246 241 233 / .6);
}
html.brightsky .cue-line{
  background:linear-gradient(rgb(42 36 64 / .8), transparent);
  filter:none;
}
html.brightsky .lift-no{
  color:rgb(42 36 64 / .5);
  text-shadow:0 0 10px rgb(246 241 233 / .55);
}
html.brightsky .lift a:hover .lift-no{ color:var(--dusk); }
html.brightsky .lift a[aria-current] .lift-no{
  color:#8a5a34; text-shadow:0 0 12px rgb(246 241 233 / .8);
}
html.brightsky .lift-name{ color:rgb(42 36 64 / .85); text-shadow:none; }
html.brightsky .hero-meta{ color:rgb(246 241 233 / .88); text-shadow:0 0 10px rgb(22 19 42 / .5); }
.cue-text, .cue-line, .hero-meta{
  transition:color .8s var(--ease-drift), text-shadow .8s var(--ease-drift);
}

/* ——— floors ——— */
main{ display:block; }

.floor{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(5rem, 12vh, 9rem) 0;
  position:relative;
}

.copy{
  position:relative;
  max-width:37rem;
  margin-left:var(--col-inset);
  margin-right:clamp(1.25rem, 6vw, 4rem);
  padding:clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 3.4vw, 3rem);
}
/* the veil: a feathered pane of dusk that samples the sky behind it.
   The mask dies well before the box edge so the blur never shows a seam —
   it must read as thickened air, never a glass card. */
.copy::before{
  content:"";
  position:absolute; inset:-4.5rem -6rem -5rem;
  z-index:-1;
  background:
    radial-gradient(120% 95% at 28% 18%, rgb(var(--veil) / calc(.32 * var(--veil-boost,1))), transparent 66%),
    radial-gradient(150% 125% at 52% 54%, rgb(var(--veil) / calc(.62 * var(--veil-boost,1))), transparent 72%);
  -webkit-backdrop-filter:blur(14px) saturate(1.06);
  backdrop-filter:blur(14px) saturate(1.06);
  /* closest-side: the transparent stop lands INSIDE every box edge,
     so mask alpha is zero along the whole perimeter — no seams, ever */
  -webkit-mask-image:radial-gradient(closest-side at 50% 48%, #000 36%, rgb(0 0 0 / .5) 62%, transparent 94%);
  mask-image:radial-gradient(closest-side at 50% 48%, #000 36%, rgb(0 0 0 / .5) 62%, transparent 94%);
}

.floor-label{
  margin:0 0 1.1rem;
  font-size:.72rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--peach);
}

h2{
  margin:0 0 1.4rem;
  font-family:var(--serif);
  font-style:italic; font-weight:400;
  font-size:clamp(2.7rem, 5.2vw, 4.3rem);
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--ivory);
  text-wrap:balance;
}

p{ margin:0 0 1.1rem; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

.house-rule{
  margin-top:2.1rem;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.12rem;
  color:rgb(242 201 168 / .92);
}

.fine-print{
  margin-top:1.9rem;
  font-size:.86rem; font-weight:380;
  letter-spacing:.02em;
  color:rgb(246 241 233 / .72);
}

/* ——— hero ——— */
.floor--hero{ min-height:106svh; justify-content:center; }

.copy--hero{ max-width:44rem; }
.copy--hero::before{
  background:
    radial-gradient(130% 100% at 34% 34%, rgb(var(--veil) / calc(.36 * var(--veil-boost,1))), transparent 68%);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  -webkit-mask-image:radial-gradient(closest-side at 50% 46%, #000 30%, rgb(0 0 0 / .45) 60%, transparent 92%);
  mask-image:radial-gradient(closest-side at 50% 46%, #000 30%, rgb(0 0 0 / .45) 60%, transparent 92%);
}

.lockup{ margin:0 0 1.8rem; line-height:1; }
.lockup-hotel{
  display:block;
  font-family:var(--sans);
  font-weight:420; font-size:clamp(.95rem, 1.7vw, 1.15rem);
  letter-spacing:.55em; text-transform:uppercase;
  color:var(--peach);
  margin:0 0 1.1rem .28em;
}
.lockup-reverie{
  display:block;
  font-family:var(--serif);
  font-style:italic; font-weight:300;
  font-size:clamp(4.6rem, 13.5vw, 10.5rem);
  line-height:.92;
  letter-spacing:-.015em;
  color:var(--ivory);
  margin-left:-.05em;
}

.tagline{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 2.1vw, 1.65rem);
  line-height:1.42;
  color:rgb(246 241 233 / .95);
  margin-bottom:1.4rem;
}
.hero-meta{
  font-size:.78rem; font-weight:420;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgb(246 241 233 / .7);
}
.hero-meta span{ white-space:nowrap; }

/* scroll cue */
.cue{
  position:absolute; bottom:4.5rem; left:var(--col-inset);
  display:flex; align-items:flex-start; gap:1.1rem;
}
.cue-text{
  font-size:.72rem; font-weight:460;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgb(246 241 233 / .88);
  text-shadow:0 0 4px rgb(22 19 42 / .5), 0 0 16px rgb(22 19 42 / .65);
}
.cue-line{
  width:1px; height:64px; margin-top:.2rem;
  background:linear-gradient(rgb(246 241 233 / .9), transparent);
  filter:drop-shadow(0 0 5px rgb(22 19 42 / .55));
  transform-origin:top;
  animation:cue-drop 3.2s var(--ease-soft) infinite;
}
@keyframes cue-drop{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  75%{ transform:scaleY(1); opacity:0; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ——— rooms ——— */
.room{
  margin-top:2rem;
  padding-top:1.7rem;
  border-top:1px solid rgb(246 241 233 / .22);
}
.room-name{
  margin:0 0 .5rem;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.72rem; line-height:1.15;
  color:var(--ivory);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em 1.2em;
}
.room-rate{
  font-family:var(--sans); font-style:normal;
  font-size:.8rem; font-weight:460;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--peach);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.room-desc{ color:rgb(246 241 233 / .9); }

/* ——— directory (floor five) ——— */
.directory{
  list-style:none; margin:2rem 0 0; padding:0;
  font-size:.98rem;
}
.directory li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.62rem 0;
}
.dir-name{ font-weight:400; }
.dir-dots{
  flex:1; min-width:2rem;
  border-bottom:1px dotted rgb(246 241 233 / .4);
  transform:translateY(-.32em);
}
.dir-hours{
  font-variant-numeric:tabular-nums;
  font-size:.88rem; font-weight:420;
  letter-spacing:.06em;
  color:var(--peach);
  white-space:nowrap;
}

/* ——— the light floor: waking up ——— */
.floor--light{ --ink:var(--dusk); --focus:var(--dusk); }
.floor--light .copy{ color:var(--dusk); }
.floor--light .copy::before{
  background:
    radial-gradient(120% 95% at 28% 18%, rgb(246 241 233 / .40), transparent 66%),
    radial-gradient(150% 125% at 52% 54%, rgb(246 241 233 / .74), transparent 72%);
  -webkit-backdrop-filter:blur(14px) saturate(1.02);
  backdrop-filter:blur(14px) saturate(1.02);
}
.floor--light .floor-label{ color:#8a5a34; }
.floor--light h2{ color:var(--dusk); }
.floor--light .fine-print{ color:rgb(42 36 64 / .72); }
.floor--light .house-rule{ color:#8a5a34; }

.reservations{
  margin-top:2.6rem;
  padding-top:1.9rem;
  border-top:1px solid rgb(42 36 64 / .28);
}
.reservations h3{
  margin:0 0 .9rem;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.72rem;
  color:var(--dusk);
}

/* ——— colophon ——— */
.colophon{
  /* a breath of open sky first, so the resting page-end view starts clean */
  padding:clamp(9rem, 32svh, 20rem) 0 clamp(4rem, 9vh, 7rem);
  color:var(--dusk);
}
.colophon .copy{ padding-top:2.4rem; padding-bottom:2.4rem; }
.colophon p{ margin-bottom:.55rem; }
.colophon-address{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.28rem; line-height:1.4;
  color:var(--dusk);
}
.colophon-desk{
  font-size:.86rem; font-weight:400;
  letter-spacing:.04em;
  color:rgb(42 36 64 / .82);
}
.house-rule--light{ margin-top:1.5rem; font-size:1.05rem; }
.colophon-credit{
  margin-top:2.2rem;
  font-size:.82rem; font-weight:400;
  color:rgb(42 36 64 / .82);
}
.colophon-credit a, .colophon-back a{
  color:var(--dusk); text-decoration:none;
  border-bottom:1px solid rgb(42 36 64 / .4);
  transition:border-color .35s var(--ease-out-quart);
}
.colophon-credit a:hover, .colophon-back a:hover{ border-color:var(--dusk); }
.colophon-back{
  font-size:.74rem; font-weight:460;
  letter-spacing:.24em; text-transform:uppercase;
}

/* ——— reduced motion ——— */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cue-line{ animation:none; transform:none; opacity:.7; }
  *, *::before, *::after{ transition-duration:.01ms !important; }
}

/* ——— small screens ——— */
@media (max-width:680px){
  body{ font-size:1rem; }
  :root{ --col-inset:1.25rem; }
  .copy{ margin-right:1.25rem; padding:1.9rem 1.5rem; }
  .copy::before{ inset:-1.4rem -1.25rem -1.6rem; }
  .masthead{ padding:1.1rem 1.25rem; }
  .wordmark{ letter-spacing:.22em; }
  .wordmark-est{ display:none; }
  .masthead-link{ letter-spacing:.14em; }
  .turndown{ gap:0; }
  .turndown-label{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .turndown-moon{ width:.8em; height:.8em; }
  .cue{ bottom:3.2rem; }
  .room-name{ font-size:1.5rem; }
  .directory li{ flex-wrap:wrap; }
  .lift{ display:none; }
  /* the designed two-line break belongs to wide skies; let mobile balance itself */
  .tagline br{ display:none; }
  .tagline{ text-wrap:balance; }
  .hero-meta{ font-size:.7rem; letter-spacing:.13em; text-wrap:balance; }
}