/* ============================================================
   Unfiltered — the face you wake with

   One idea runs the whole page: there is a sun.
   Its position (--sun, 0 → 1) lights the type, shortens the
   shadows and raises the room. Nothing here fades in for the
   sake of fading in — light is the only thing that moves.
   ============================================================ */

:root{
  /* Only six. Shadows are warm brown, because a morning room has
     no grey in it. */
  --night:  #14110D;
  --umber:  #4A3C2C;
  --taupe:  #8A7E6F;   /* rules, dividers, decoration only */
  --label:  #6B6153;   /* small text — #8A7E6F only reaches 3.1:1 at 11px */
  --sand:   #D9CFC1;
  --paper:  #FAF6F0;
  --flare:  #FFD9A0;

  /* JS writes exactly two of these per scroll, and only when the
     value actually changes. Everything else is derived here, because
     a write to :root restyles the whole document. */
  --sun: 0;              /* 0 = 05:12, 1 = 09:47 */
  --room: #E8DDCD;       /* the page colour right now */

  /* Low sun casts long; high sun casts short and close. */
  --shadow-x:     calc(30px - var(--sun) * 25px);
  --shadow-y:     calc(18px - var(--sun) * 9px);
  --shadow-blur:  calc(62px - var(--sun) * 36px);
  --shadow-alpha: calc(.3 - var(--sun) * .17);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text:    "Source Serif 4", Georgia, serif;
  --data:    "DM Mono", ui-monospace, Menlo, monospace;

  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --hair: 1px solid color-mix(in srgb, var(--taupe) 26%, transparent);

  --cast: var(--shadow-x) var(--shadow-y) var(--shadow-blur)
          rgba(74,60,44,var(--shadow-alpha));
}

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

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

body{
  margin:0;
  /* One colour for the whole document, moved by the sun. Every
     section is transparent on top of it, so scrolling never
     crosses a seam between two different backgrounds. */
  background:var(--room);
  color:var(--night);
  font-family:var(--text);
  font-weight:300;
  font-size:clamp(1rem,.94rem + .32vw,1.15rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
picture{ display:block; }
a{ color:inherit; }

::selection{ background:var(--flare); color:var(--night); }
:focus-visible{ outline:2px solid var(--night); outline-offset:4px; }

.skip{
  position:fixed; top:-100px; left:1rem; z-index:99;
  background:var(--night); color:var(--paper);
  padding:.6rem 1rem; font-family:var(--data); font-size:.75rem;
  text-decoration:none;
}
.skip:focus{ top:1rem; }

/* ── The window ──────────────────────────────────────────────
   05:12, and the window is shut. Two leaves swing open on their
   outer hinges — slowly, because a window you throw open in half a
   second is a wipe, not a window — and the morning comes through
   the opening as it widens. */

.pane{
  display:none;
  position:fixed; inset:0; z-index:90;
  pointer-events:none;
  overflow:hidden;
  perspective:1500px;
  perspective-origin:50% 45%;
}
.js .pane{ display:block; }

/* Nothing behind the leaves but the page itself. As they swing you
   see the actual room widening between them — a painted-on glow is
   what made the last version feel fake. */

/* ── The two leaves ─────────────────────────────────────────*/

.pane__leaf{
  position:absolute; z-index:2; top:0; bottom:0; width:50.4%;
  /* Glass. The room is behind it the whole time — dim, cold and
     slightly reflected — rather than a board that hides the page
     until it swings. No backdrop-filter: two full-screen blurred
     surfaces animating for two seconds is exactly how you buy lag. */
  background:
    linear-gradient(126deg,
      rgba(255,244,222,.16) 0%, rgba(255,240,214,.05) 26%,
      transparent 46%, rgba(255,244,222,.07) 72%, transparent 100%),
    linear-gradient(180deg,
      rgba(14,11,7,.80) 0%, rgba(20,15,9,.86) 48%, rgba(12,9,6,.90) 100%);
  box-shadow:
    inset 0 0 0 clamp(7px,.85vw,12px) #17110A,
    inset 0 0 70px rgba(0,0,0,.55);
  backface-visibility:hidden;
  will-change:transform;
}

/* The edge of the sash, catching light as the leaf turns. */
.pane__leaf::after{
  content:""; position:absolute; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#6B573A,#2A2015 60%,#4A3B27);
}
.pane__leaf--l::after{ right:0; }
.pane__leaf--r::after{ left:0; }
.pane__leaf--l{ left:0;  transform-origin:left center;  }
.pane__leaf--r{ right:0; transform-origin:right center; }

/* Glazing bars, so each leaf reads as a sash and not a panel. */
.pane__bar{ position:absolute; background:#17110A; }
.pane__bar--v{ top:0; bottom:0; left:50%; width:clamp(6px,.7vw,10px); margin-left:-4px; }
.pane__bar--h{ left:0; right:0; top:46%; height:clamp(6px,.7vw,10px); }

.opened .pane__leaf--l{
  animation:leaf-open-l 2.1s cubic-bezier(.62,.01,.28,1) .35s forwards;
}
.opened .pane__leaf--r{
  animation:leaf-open-r 2.1s cubic-bezier(.62,.01,.28,1) .35s forwards;
}
/* The window stays where it is — it swings back into the room and
   holds its place in space. The only thing that travels toward you
   is what is behind it. */
@keyframes leaf-open-l{
  0%  { transform:rotateY(0deg); }
  100%{ transform:rotateY(-86deg); }
}
@keyframes leaf-open-r{
  0%  { transform:rotateY(0deg); }
  100%{ transform:rotateY(86deg); }
}

/* ── What comes through the opening ─────────────────────────*/

.pane__burst{
  position:absolute; z-index:0; left:50%; top:30%;
  width:1px; height:1px;
  opacity:0;
}
.opened .pane__burst{ animation:burst-in 1.9s ease-out .55s forwards; }
@keyframes burst-in{
  0%  { opacity:0; }
  28% { opacity:1; }
  70% { opacity:.75; }
  100%{ opacity:0; }
}

.pane__burst span{
  position:absolute; left:0; top:0;
  width:clamp(16px,2.1vw,34px); height:180vh;
  margin-left:calc(clamp(16px,2.1vw,34px) / -2);
  transform-origin:50% 0%;
  transform:rotate(var(--r)) scaleY(.2);
  /* Starts soft rather than at a hot point — light through an
     opening, not a torch. */
  background:linear-gradient(180deg,
    rgba(255,238,204,.16) 0%, rgba(255,236,198,.46) 14%,
    rgba(255,228,180,.17) 44%, transparent 84%);
  filter:blur(7px);
  animation:ray-throw 1.7s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(.6s + var(--d));
}
@keyframes ray-throw{
  0%  { transform:rotate(var(--r)) scaleY(.2); }
  100%{ transform:rotate(var(--r)) scaleY(1); }
}

/* The frame does not move — a window frame never does. */
.pane__frame{
  position:absolute; z-index:3; inset:0;
  box-shadow:inset 0 0 0 clamp(11px,1.7vw,24px) #17110A;
}
/* The frame goes with everything else, once the leaves are open. */

/* A shut window left covering the page is the one failure that must
   not be possible — belt and braces with the JS that removes it. */
.opened .pane{
  opacity:0;
  /* Starts only after the leaves have finished at 2.3s, so the
     window never fades out mid-swing. Doubles as the fail-safe if
     the swing itself never runs. */
  transition:opacity .55s ease 2.3s;
}

/* ── The sun ─────────────────────────────────────────────────
   A single warm source in the upper right. It does not fade in;
   it climbs. */

/* In front of everything, because the sun is in front of the room.
   Anything less and the hero's fade lands on a different cream
   from the page below it, which shows as a line. */
/* Upper left, because that is where the window is in the photograph.
   The shadows already fall to the right, so this is the side the
   whole page was lit from anyway. */
.sun{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(66vw 62vh at 12% calc(1% - var(--sun) * 13%),
    rgba(255,222,175,.5) 0%, rgba(255,214,160,.17) 44%, transparent 76%);
  opacity:calc(.2 + .8 * var(--sun));
}

/* ── The morning crosses the room ────────────────────────────
   One shaft of window light, fixed to the screen, moved by how far
   down the page you are. It travels left to right and flattens as
   the sun climbs, the way real light does on a wall between five
   and ten. Everything it passes over warms.

   One element, one transform, quantised — nothing else on the page
   moves per frame. */

.daylight{
  position:fixed; z-index:4; inset:-30% -45%;
  pointer-events:none;
  /* Plain blending, warm and saturated. soft-light over a cream page
     does almost nothing — the beam has to be a colour, not a mode. */
  background:linear-gradient(101deg,
    transparent 26%,
    rgba(255,203,128,.10) 35%,
    rgba(255,214,150,.26) 43%,
    rgba(255,238,205,.42) 50%,
    rgba(255,214,150,.24) 57%,
    rgba(255,203,128,.09) 65%,
    transparent 74%);
  will-change:transform;
}

.cursor-light{
  position:fixed; top:0; left:0; z-index:7; pointer-events:none;
  width:30rem; height:30rem; margin:-15rem 0 0 -15rem;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,226,182,.26) 0%, rgba(255,220,170,.1) 36%, transparent 68%);
  mix-blend-mode:soft-light;
  opacity:0; transition:opacity .6s ease;
  will-change:transform;
}
.cursor-light.on{ opacity:1; }

/* ── Light on type ───────────────────────────────────────────
   Headlines are pale until the light reaches them, then they
   resolve left to right. The sweep runs once, on arrival. */


/* Quiet arrival for everything that is not a headline. The
   boldness is spent on the light; this just gets out of its way. */
.js .reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .85s cubic-bezier(.2,.8,.25,1),
             transform .85s cubic-bezier(.2,.8,.25,1);
  transition-delay:var(--d,0ms);
}
/* Treatment rows come in from the side, one after another, so the
   list assembles itself while you read down it. */
.js .trow.reveal{ transform:translateX(-38px); }
.js .reveal.on{ opacity:1; transform:none; }

/* ── Clock ───────────────────────────────────────────────────
   The rail is the horizon; the dot is the sun on it. */

.clock{
  position:fixed; z-index:20;
  left:clamp(.7rem,1.6vw,1.7rem); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--data); font-size:.66rem; font-weight:300;
  letter-spacing:.08em; color:var(--umber);
  mix-blend-mode:multiply;
  opacity:0; visibility:hidden;
  transition:opacity .8s ease, visibility .8s;
}
.clock.shown{ opacity:1; visibility:visible; }
.clock__time{ font-variant-numeric:tabular-nums; font-size:.76rem; }
.clock__end{ opacity:.38; font-size:.6rem; }
.clock__rail{
  position:relative; width:1px; height:clamp(5rem,16vh,9rem);
  background:color-mix(in srgb, var(--taupe) 38%, transparent);
}
.clock__fill{
  position:absolute; inset:0 auto auto 0; width:1px;
  height:calc(var(--sun) * 100%);
  background:var(--umber);
}
.clock__fill::after{
  content:""; position:absolute; left:50%; bottom:-3px;
  width:6px; height:6px; margin-left:-3px;
  border-radius:50%; background:var(--flare);
  box-shadow:0 0 calc(6px + var(--sun) * 10px) rgba(255,200,130,.9);
}

/* ── Masthead ────────────────────────────────────────────────*/

.masthead{
  position:fixed; z-index:30; top:0; left:0; right:0;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:2rem;
  padding:clamp(1rem,2.4vw,1.8rem) var(--gut);
  color:var(--paper);
  transition:color .7s ease, opacity .5s ease;
}
.masthead::before{
  content:""; position:absolute; inset:0 0 -3.5rem 0; z-index:-1;
  background:linear-gradient(180deg,
    var(--room) 0%,
    color-mix(in srgb, var(--room) 70%, transparent) 52%,
    transparent 100%);
  opacity:0; transition:opacity .7s ease;
}
.masthead.lit{ color:var(--night); }
.masthead.lit::before{ opacity:1; }
.masthead.gone{ opacity:0; pointer-events:none; }

.wordmark{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.95rem,1.4vw,1.1rem);
  letter-spacing:-.03em; text-transform:lowercase;
  text-decoration:none;
}
.masthead__nav{
  display:flex; gap:clamp(1rem,2.4vw,2.2rem);
  font-family:var(--data); font-size:.71rem; font-weight:300;
  letter-spacing:.08em;
}
.masthead__nav a{
  text-decoration:none; opacity:.75;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:opacity .3s ease, border-color .3s ease;
}
.masthead__nav a:hover{ opacity:1; border-bottom-color:currentColor; }

/* ── Shared ──────────────────────────────────────────────────*/

main{ position:relative; z-index:5; }

.stamp{
  font-family:var(--data); font-size:.68rem; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--label);
  margin:0 0 1.5rem;
}
.stamp--light{ color:rgba(250,246,240,.86); }

.section-head{ max-width:46rem; margin:0 0 clamp(2.6rem,6vw,4.6rem); }

/* Sections are not all equally important, so they are not all the
   same size. The treatments are the product; the refusals are an
   aside; booking is the point of the page. */
.section-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,5.4vw,4rem);
  line-height:.98; letter-spacing:-.045em;
  text-transform:lowercase;
  margin:0;
  text-wrap:balance;
}
.treatments .section-title{ font-size:clamp(2.5rem,7vw,5.4rem); letter-spacing:-.05em; }
.declines  .section-title{ font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:500; letter-spacing:-.03em; }

.section-note{ margin:1.5rem 0 0; max-width:34rem; color:var(--umber); text-wrap:pretty; }

/* ── Hero ────────────────────────────────────────────────────*/

.hero{
  position:relative; min-height:100svh;
  background:#0D0A06;
  display:flex; align-items:flex-end;
  /* Room underneath for the photograph to dissolve into the page. */
  padding:0 var(--gut) clamp(9rem,25vh,14rem);
  overflow:hidden; isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
  /* Far off at first — you are looking at the room from across it —
     then it comes forward as the leaves open toward you. */
  transform:scale(.62);
  will-change:transform;
}
.opened .hero__media{
  animation:come-close 2.5s cubic-bezier(.34,0,.14,1) .3s forwards;
}
@keyframes come-close{
  to{ transform:scale(1); }
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:52% 42%;
  transform:scale(1.18);
  /* Dim while the window is shut; comes up as the leaves let the
     light in. You watch the room brighten through the opening. */
  filter:brightness(.52) saturate(.82);
  will-change:transform, filter;
}
.opened .hero__media img{
  animation:room-wakes 1.9s cubic-bezier(.3,.5,.2,1) .45s forwards;
}
@keyframes room-wakes{
  to{ filter:brightness(1) saturate(1); }
}

.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg,
      var(--room) 0%,
      color-mix(in srgb, var(--room) 90%, transparent) 6%,
      color-mix(in srgb, var(--room) 68%, transparent) 11%,
      color-mix(in srgb, var(--room) 42%, transparent) 16%,
      color-mix(in srgb, var(--room) 18%, transparent) 21%,
      color-mix(in srgb, var(--room) 0%, transparent) 27%),
    linear-gradient(180deg, rgba(12,9,6,.4) 0%, rgba(12,9,6,0) 30%),
    linear-gradient(0deg,   rgba(12,9,6,.58) 25%, rgba(12,9,6,0) 64%);
}

.hero__body{
  position:relative; max-width:40rem; color:var(--paper);
  /* The pillow is bright exactly where this sits. */
  text-shadow:0 1px 22px rgba(14,10,6,.55);
}

.hero__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.15rem,5.4vw,4.3rem);
  line-height:.96; letter-spacing:-.05em;
  text-transform:lowercase;
  margin:0;
  /* The photograph is the point. The words sit beside it. */
  max-width:14ch;
}
.hero__lede{
  margin:1.6rem 0 0; max-width:27rem;
  font-size:clamp(1.05rem,2vw,1.35rem);
  color:rgba(250,246,240,.8);
}

.hero__cue{
  position:absolute; right:var(--gut); bottom:clamp(3rem,9vh,6rem);
  display:flex; flex-direction:column; align-items:flex-end; gap:.9rem;
  font-family:var(--data); font-size:.63rem; font-weight:300;
  letter-spacing:.14em; text-transform:lowercase;
  color:rgba(250,246,240,.5);
}
.hero__line{
  display:block; width:1px; height:3.4rem;
  background:linear-gradient(180deg, rgba(250,246,240,.5), transparent);
}

/* ── Lede ────────────────────────────────────────────────────*/

.lede{ padding:clamp(5rem,15vh,10rem) var(--gut) clamp(4rem,11vh,7rem); max-width:62rem; }
.lede__text{
  margin:0;
  font-size:clamp(1.3rem,3.2vw,2.05rem);
  line-height:1.42; font-weight:300; letter-spacing:-.008em;
  text-wrap:pretty;
}
.lede__text em{ font-style:italic; color:var(--taupe); }

/* ── Treatments ──────────────────────────────────────────────*/

.treatments{ padding:clamp(3rem,8vh,6rem) var(--gut) clamp(5rem,13vh,9rem); }

.tlist{ list-style:none; margin:0; padding:0; border-top:var(--hair); }
.trow{ border-bottom:var(--hair); }

.trow__head{
  width:100%;
  display:grid; grid-template-columns:1fr auto 1.6rem;
  align-items:baseline; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.3rem,3vw,2rem) 0;
  background:none; border:0; margin:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
}

.trow__name{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,3.2vw,2.15rem);
  letter-spacing:-.04em; line-height:1.08;
  text-transform:lowercase;
  transition:color .45s ease;
}
.trow__head:hover .trow__name,
.trow.open .trow__name{ color:var(--umber); }

/* Every treatment starts with the audit. Saying so is information,
   not decoration — it answers the first question a visitor has. */
.trow__first{
  display:inline-block; vertical-align:middle;
  margin-left:.85rem; padding:.28rem .55rem .3rem;
  font-family:var(--data); font-size:.58rem; font-weight:300;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--umber);
  border:1px solid color-mix(in srgb, var(--taupe) 45%, transparent);
  border-radius:2px;
  transform:translateY(-.1em);
}

.trow__meta{
  display:flex; align-items:baseline; gap:clamp(1.2rem,3vw,2.4rem);
  font-family:var(--data); font-size:.76rem; font-weight:300;
  color:var(--umber); font-variant-numeric:tabular-nums;
}
.trow__dur{ color:var(--label); min-width:4.4rem; text-align:right; }
.trow__price{ min-width:3.6rem; text-align:right; }

.trow__mark{
  position:relative; width:1rem; height:1rem;
  justify-self:end; align-self:center;
}
.trow__mark::before,.trow__mark::after{
  content:""; position:absolute; top:50%; left:0;
  width:100%; height:1px; background:var(--night);
  transition:transform .5s cubic-bezier(.32,.72,.2,1);
}
.trow__mark::after{ transform:rotate(90deg); }
.trow__head[aria-expanded="true"] .trow__mark::after{ transform:rotate(0deg); }

.trow__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .65s cubic-bezier(.32,.72,.2,1);
}
.trow.open .trow__panel{ grid-template-rows:1fr; }

.trow__inner{
  overflow:hidden;
  display:grid; gap:clamp(1.4rem,3.5vw,3rem);
  grid-template-columns:minmax(0,17rem) minmax(0,1fr);
  align-items:start;
}

/* The panel is lit rather than faded: the light crosses it. */
.trow__img{
  overflow:hidden;
  box-shadow:var(--cast);
  clip-path:inset(0 100% 0 0);
  transition:clip-path .8s cubic-bezier(.32,.72,.2,1) .06s;
}
.trow.open .trow__img{ clip-path:inset(0 0 0 0); }
.trow__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; }

.trow__text{
  padding-bottom:clamp(1.6rem,4vw,2.8rem); max-width:46rem;
  opacity:0; transition:opacity .6s ease .22s;
}
.trow.open .trow__text{ opacity:1; }
.trow__text > p{ margin:0 0 1.6rem; font-size:clamp(1rem,1.8vw,1.16rem); }

.spec{ margin:0; display:grid; gap:.55rem; border-top:var(--hair); padding-top:1.1rem; }
.spec > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:1rem; align-items:baseline; }

/* Wide screens had a third of the open panel sitting empty. The
   photograph takes the room, not the prose — a 100-character line
   is harder to read, not more generous. */
@media (min-width:1180px){
  .trow__inner{ grid-template-columns:minmax(0,23rem) minmax(0,1fr); }
}
.spec dt{
  font-family:var(--data); font-size:.66rem; font-weight:300;
  letter-spacing:.12em; text-transform:uppercase; color:var(--label);
}
.spec dd{ margin:0; font-size:.94rem; color:var(--umber); }

/* ── Mornings ────────────────────────────────────────────────*/

.mornings{ padding:clamp(4rem,11vh,8rem) var(--gut); }

.frames{ display:grid; gap:clamp(1rem,2.5vw,1.9rem); grid-template-columns:repeat(3,1fr); }
.frame{ margin:0; }

.frame__shot{
  position:relative; overflow:hidden; display:block;
  width:100%; padding:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer;
  box-shadow:var(--cast);
  aspect-ratio:4/5;
}
/* Taller than the frame, so it can drift on scroll without ever
   showing an edge. */
.frame__shot picture{
  position:absolute; left:0; right:0; top:-15%; height:130%;
  will-change:transform;
}
.frame__shot:focus-visible{ outline:2px solid var(--night); outline-offset:4px; }

/* Names the action for screen readers without putting a second
   label on the photograph. */
.frame__sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.frame__shot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(20,17,13,.34));
}

.frame img{
  width:100%; height:100%; object-fit:cover;
  /* Corrected until you ask it not to be. */
  filter:saturate(1.42) contrast(1.05) brightness(1.1) blur(1.5px);
  transform:scale(1.045);
  transition:filter .8s cubic-bezier(.32,.72,.2,1),
             transform 1s cubic-bezier(.32,.72,.2,1);
}
.frame__shot.bare img{ filter:none; transform:none; }

.frame__tag{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-family:var(--data); font-size:.6rem; font-weight:300;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); text-shadow:0 1px 10px rgba(18,12,6,.7);
  display:grid; pointer-events:none;
}
.frame__tag b,.frame__tag i{
  grid-area:1/1; font-weight:300; font-style:normal;
  transition:opacity .5s ease;
}
.frame__tag i{ opacity:0; }
.frame__shot.bare .frame__tag b{ opacity:0; }
.frame__shot.bare .frame__tag i{ opacity:1; }

.frame figcaption{
  margin-top:.9rem;
  font-family:var(--data); font-size:.66rem; font-weight:300;
  color:var(--label); line-height:1.55;
}

/* ── What we don't do ────────────────────────────────────────*/

.declines{ padding:clamp(4rem,11vh,8rem) var(--gut); }
.declines__list{ list-style:none; margin:0; padding:0; max-width:52rem; border-top:var(--hair); }
.declines__list li{
  border-bottom:var(--hair); position:relative;
  padding:clamp(1.1rem,2.6vw,1.7rem) 0 clamp(1.1rem,2.6vw,1.7rem) 2.3rem;
  font-size:clamp(1rem,2vw,1.22rem);
}
.declines__list li::before{
  content:""; position:absolute; left:0; top:calc(50% - .5px);
  width:1.2rem; height:1px; background:var(--taupe);
}

/* ── Booking ─────────────────────────────────────────────────*/

.book{
  position:relative; min-height:min(78svh,44rem);
  display:flex; align-items:center;
  padding:clamp(4rem,12vh,8rem) var(--gut);
  overflow:hidden; isolation:isolate;
}
.book__media{
  position:absolute; inset:-15% 0; z-index:-2;
  will-change:transform;
}
.book__media img{ width:100%; height:100%; object-fit:cover; object-position:58% 50%; }
/* The photograph is not a block dropped onto the page — it comes
   out of the room colour and goes back into it. */
.book::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      var(--room) 0%,
      color-mix(in srgb, var(--room) 0%, transparent) 16%,
      color-mix(in srgb, var(--room) 0%, transparent) 84%,
      var(--room) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--room) 94%, transparent) 0%,
      color-mix(in srgb, var(--room) 74%, transparent) 34%,
      color-mix(in srgb, var(--room) 6%, transparent) 70%);
}
.book__body{ position:relative; max-width:32rem; }
.book__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.4rem,6.6vw,4.8rem);
  line-height:.96; letter-spacing:-.05em; text-transform:lowercase;
  margin:0;
}
.book__note{ margin:1.4rem 0 2.5rem; color:var(--umber); max-width:24rem; }

.btn{
  display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.8rem;
  background:var(--night); color:var(--paper);
  font-family:var(--data); font-size:.75rem; font-weight:300;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  box-shadow:var(--cast);
  transition:gap .45s cubic-bezier(.32,.72,.2,1), background .4s ease;
}
.btn svg{ width:1.1rem; height:1.1rem; flex:none; }
.btn:hover{ background:var(--umber); gap:1.4rem; }

/* ── Footer ──────────────────────────────────────────────────*/

.foot{
  position:relative; z-index:2;
  background:var(--room);
  padding:clamp(3.5rem,9vh,7rem) var(--gut) clamp(1.6rem,4vh,2.6rem);
}
.foot__top{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem;
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.foot__mark{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.3rem,7.4vw,6rem);
  line-height:.84; letter-spacing:-.055em; text-transform:lowercase;
}
.foot__line{ margin:0; max-width:22rem; color:var(--umber); }

.foot__grid{
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(4,1fr);
  padding:clamp(2.5rem,6vw,4rem) 0;
  border-top:var(--hair); border-bottom:var(--hair);
}
.foot__col h3{
  margin:0 0 1.1rem;
  font-family:var(--data); font-size:.66rem; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase; color:var(--label);
}
.foot__col p{ margin:0 0 1rem; }
.foot__col a{
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--taupe) 42%,transparent);
}
.foot__col a:hover{ border-bottom-color:var(--night); }
.foot__small{ font-size:.9rem; color:var(--umber); }
.foot__col--wide{ grid-column:span 4; border-top:var(--hair); padding-top:clamp(2rem,4vw,2.6rem); }
.foot__col--wide .foot__small{ max-width:44rem; }

.foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; font-size:.94rem; }

.hours{ margin:0 0 1rem; display:grid; gap:.4rem; }
.hours > div{ display:flex; justify-content:space-between; gap:1rem; max-width:15rem; }
.hours dt{ color:var(--umber); }
.hours dd{ margin:0; font-family:var(--data); font-size:.8rem; font-variant-numeric:tabular-nums; }

.foot__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:clamp(1.5rem,3vw,2.2rem);
  font-family:var(--data); font-size:.64rem; font-weight:300;
  letter-spacing:.1em; color:var(--label);
}

/* ── Responsive ──────────────────────────────────────────────*/

@media (max-width:900px){
  .foot__grid{ grid-template-columns:repeat(2,1fr); }
  .foot__col--wide{ grid-column:span 2; }
  .frames{ grid-template-columns:1fr 1fr; }
  .frame:last-child{ grid-column:span 2; }
  .frame:last-child .frame__shot{ aspect-ratio:16/10; }
}

@media (max-width:700px){
  .clock, .hero__cue{ display:none; }

  /* Navigation stays. It moves to its own row and every link gets a
     44px target, rather than disappearing on the devices most people
     will open this on. */
  .masthead{
    flex-direction:column; align-items:flex-start;
    gap:.15rem; padding:.9rem var(--gut) .35rem;
  }
  .masthead::before{ inset:0 0 -2.5rem 0; }
  .masthead__nav{
    gap:1.5rem; font-size:.68rem;
    margin-left:-.1rem;
  }
  .masthead__nav a{
    display:flex; align-items:center;
    min-height:44px; padding-bottom:0;
  }
  .wordmark{ display:flex; align-items:center; min-height:44px; }
  .skip{ padding:.85rem 1.1rem; }

  /* Footer links are the other place a thumb has to land. */
  .foot__list a, .foot__col p a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .foot__list{ gap:0; }

  .hero{ min-height:92svh; }
  .hero__media img{ object-position:42% 38%; }

  .trow__head{ grid-template-columns:1fr 1rem; row-gap:.5rem; }
  .trow__meta{ grid-column:1; }
  .trow__mark{ grid-row:1; grid-column:2; }
  .trow__inner{ grid-template-columns:1fr; }
  .trow__img{ max-width:14rem; }
  .spec > div{ grid-template-columns:1fr; gap:.15rem; }

  .frames{ grid-template-columns:1fr; }
  .frame:last-child{ grid-column:auto; }
  .frame:last-child .frame__shot{ aspect-ratio:4/5; }

  .book::after{
    background:linear-gradient(180deg,
      rgba(250,246,240,.82) 0%, rgba(250,246,240,.95) 46%, rgba(250,246,240,.98) 100%);
  }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__col--wide{ grid-column:auto; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  /* ── The morning crosses the room ────────────────────────────
   One shaft of window light, fixed to the screen, moved by how far
   down the page you are. It travels left to right and flattens as
   the sun climbs, the way real light does on a wall between five
   and ten. Everything it passes over warms.

   One element, one transform, quantised — nothing else on the page
   moves per frame. */

.daylight{
  position:fixed; z-index:4; inset:-30% -45%;
  pointer-events:none;
  /* Plain blending, warm and saturated. soft-light over a cream page
     does almost nothing — the beam has to be a colour, not a mode. */
  background:linear-gradient(101deg,
    transparent 26%,
    rgba(255,203,128,.10) 35%,
    rgba(255,214,150,.26) 43%,
    rgba(255,238,205,.42) 50%,
    rgba(255,214,150,.24) 57%,
    rgba(255,203,128,.09) 65%,
    transparent 74%);
  will-change:transform;
}

.cursor-light{ display:none; }
  .frame img{ filter:none; transform:none; }
  .frame__shot picture, .book__media{ transform:none !important; }
  .trow__img{ clip-path:none; }
  .pane{ display:none !important; }
  .trow__text{ opacity:1; }
}


/* ── Light on the words ──────────────────────────────────────
   The one thing that happens as you scroll. Each word goes from
   the pale colour of a room before dawn to full ink as the light
   reaches it. A class per word with a CSS delay — nothing is
   computed while you scroll, so it cannot stutter. */

.js .word{
  color:color-mix(in srgb, var(--taupe) 52%, var(--room));
  transition:color .5s ease;
  transition-delay:var(--w,0ms);
}
.js .word.lit{ color:inherit; }

.js .light-up{
  color:color-mix(in srgb, var(--taupe) 52%, var(--room));
  transition:color .7s cubic-bezier(.3,.8,.3,1);
  transition-delay:var(--d,0ms);
}
.js .light-up.lit{ color:var(--night); }

@media (prefers-reduced-motion:reduce){
  .js .word, .js .light-up{ color:inherit; transition:none; }
}