/* =========================================================
   MAISON LUMIÈRE — vol. III
   Contemporary art-gallery / fashion-editorial direction.
   Cream · Deep ink · Plum/mauve · big bold type.
   ========================================================= */

:root{
  --cream:    #f3eee5;            /* warm cream */
  --cream-2:  #ebe4d6;            /* deeper cream */
  --bone:     #e2d9c7;            /* sand */
  --ink:      #18120e;            /* deep warm ink */
  --ink-2:    #2a221c;
  --ink-soft: #44382f;
  --mute:     #837465;

  --plum:     #6b3a4c;            /* deep mauve / plum — main accent */
  --plum-2:   #8a4f60;
  --plum-soft:#b88a98;
  --plum-bg:  #ead8de;            /* whisper plum tint */

  --line:     rgba(24,18,14,.10);
  --line-2:   rgba(24,18,14,.06);

  --display:  'Fraunces', 'Times New Roman', serif;
  --serif:    'Fraunces', 'Times New Roman', serif;
  --sans:     'Inter', -apple-system, sans-serif;

  --max:  1480px;
  --pad:  clamp(20px, 5vw, 80px);
  --pad-y: clamp(80px, 12vw, 180px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ============== Helpers ============== */
.num{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--plum);
  font-weight:500;
  display:inline-block;
}
.num--light{color:var(--plum-soft)}

.big{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(48px, 7.4vw, 132px);
  line-height:.95;
  letter-spacing:-.025em;
  color:var(--ink);
}
.big em{font-style:italic;font-weight:300;color:var(--plum)}
.big--light{color:var(--cream)}
.big--light em{color:var(--plum-soft)}

/* ============== NAV ============== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:30px;
  padding:22px var(--pad);
  transition:all .35s ease;
  background:transparent;
  color:var(--cream);
}
.nav--solid{
  background:rgba(243,238,229,.94);
  backdrop-filter:blur(14px);
  color:var(--ink);
  padding:14px var(--pad);
  border-bottom:1px solid var(--line-2);
}
.nav__brand{
  display:flex;flex-direction:column;
  font-family:var(--display);
  font-size:20px;
  line-height:1;
  letter-spacing:-.005em;
  color:inherit;
}
.nav__brand span{font-size:18px;font-weight:400}
.nav__brand em{font-style:italic;font-weight:300;color:var(--plum-soft);font-size:22px}
.nav--solid .nav__brand em{color:var(--plum)}

.nav__menu{
  display:flex;gap:34px;justify-content:center;
  font-size:13px;
  letter-spacing:.04em;
  color:inherit;
}
.nav__menu a{padding:6px 0;position:relative;opacity:.85;transition:opacity .25s, color .25s}
.nav__menu a:hover{opacity:1;color:var(--plum-soft)}
.nav--solid .nav__menu a:hover{color:var(--plum)}

.nav__cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:11px 22px;
  border:1px solid currentColor;
  border-radius:999px;
  transition:all .35s;
  color:inherit;
}
.nav__cta-dot{
  width:7px;height:7px;
  background:var(--plum-soft);
  border-radius:50%;
  display:inline-block;
  animation:pulse 2s ease-in-out infinite;
}
.nav--solid .nav__cta-dot{background:var(--plum)}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.8)}
}
.nav__cta:hover{
  background:var(--plum);
  color:var(--cream);
  border-color:var(--plum);
}
.nav__cta:hover .nav__cta-dot{background:var(--cream)}

.nav__toggle{display:none}

@media(max-width:920px){
  .nav{
    grid-template-columns:auto 1fr auto;
  }
  .nav__cta-dot{display:none}
  .nav__brand,
  .nav__cta,
  .nav__toggle{
    position:relative;
    z-index:3;
  }
  .nav__toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    width:34px;height:34px;
    justify-content:center;align-items:center;
    margin-left:auto;
  }
  .nav__toggle span{
    display:block;width:22px;height:1px;background:currentColor;transition:transform .3s, opacity .3s;
  }
  body.menu-open .nav__toggle span:first-child{transform:translateY(3px) rotate(45deg)}
  body.menu-open .nav__toggle span:last-child{transform:translateY(-3px) rotate(-45deg)}

  /* Mobile fullscreen menu — overlay below navbar */
  .nav__menu{
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:var(--ink);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:14px;
    padding:120px var(--pad) 60px;
    font-family:var(--display);
    font-size:42px;
    line-height:1;
    color:var(--cream);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease, visibility 0s linear .35s;
    z-index:2;
    overflow-y:auto;
  }
  body.menu-open .nav__menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .35s ease, visibility 0s;
  }
  .nav__menu a{
    color:var(--cream);
    padding:8px 0;
    width:100%;
    border-bottom:1px solid rgba(243,238,229,.12);
    font-style:italic;
    font-weight:300;
    transition:color .25s, padding-left .25s;
  }
  .nav__menu a:hover{
    color:var(--plum-soft);
    padding-left:14px;
  }
  /* Force solid navbar bg when menu is open so brand/CTA stay readable */
  body.menu-open .nav{
    background:var(--ink);
    color:var(--cream);
    border-bottom-color:rgba(243,238,229,.12);
  }
  body.menu-open .nav__brand{color:var(--cream)}
  body.menu-open .nav__brand em{color:var(--plum-soft)}
  body.menu-open .nav__cta{color:var(--cream);border-color:rgba(243,238,229,.5)}
  body.menu-open .nav__cta-dot{background:var(--plum-soft)}
  body.menu-open{overflow:hidden}
  .nav__cta{
    padding:7px 14px;
    font-size:10px;
    letter-spacing:.14em;
    gap:6px;
  }
}

/* ============== Mobile typography & overflow guard ============== */
@media(max-width:600px){
  html, body{overflow-x:hidden;max-width:100vw}

  .big{font-size:clamp(34px, 9vw, 56px);letter-spacing:-.02em}
  .hero__display{font-size:clamp(48px, 14vw, 80px);letter-spacing:-.03em}
  .hero__lede,
  .casa__sticky > p,
  .book__sticky > p,
  .manifesto__cols p,
  .room__content p,
  .rooms__head .rooms__intro,
  .people__intro,
  .casa__intro,
  .big-lede{font-size:15px;line-height:1.55}

  .hero__title,
  .room__name{font-size:clamp(34px, 8vw, 52px) !important}

  .manifesto__head{font-size:clamp(36px, 10vw, 56px) !important}
  .manifesto__head-strike{font-size:.7em}

  .testimony blockquote{font-size:clamp(22px, 6.4vw, 34px);padding:0 4px}
  .testimony__mark{font-size:clamp(60px, 16vw, 100px)}

  .band__overlay span{font-size:clamp(40px, 12vw, 70px)}
  .band__overlay p{font-size:15px;line-height:1.4}

  .num-big{font-size:clamp(40px, 11vw, 64px)}
  .folio__big{font-size:clamp(44px, 13vw, 80px)}
  .folio__cell{padding:36px 22px}

  .foot__big{font-size:clamp(56px, 18vw, 100px);letter-spacing:-.04em}

  .hero__counters{gap:18px}
  .hero__counters strong{font-size:18px}

  /* prevent any rogue child from overflowing */
  .hero, .manifesto, .rooms, .casa, .testimony,
  .people, .folio, .book, .foot, .band{
    max-width:100vw;
    overflow-x:hidden;
  }

  .hero__caption{
    bottom:60px;left:14px;right:14px;
    font-size:11px;padding:8px 14px;
    justify-content:space-between;
  }

  .nav{padding-left:14px;padding-right:14px;gap:10px}
  .topbar__brand, .nav__brand{font-size:16px}
  .nav__brand span{font-size:14px}
  .nav__brand em{font-size:17px}
  .nav__cta{padding:6px 11px;font-size:9.5px;letter-spacing:.12em}
  .nav__toggle{width:30px;height:30px}
}

/* ============== HERO ============== */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  background:var(--ink);
  color:var(--cream);
  padding-top:110px;
}
.hero__type{
  display:flex;flex-direction:column;
  justify-content:space-between;
  gap:48px;
  padding:30px var(--pad) 90px var(--pad); /* extra clearance for marquee */
  position:relative;
  opacity:0;transform:translateY(20px);
  transition:all 1s ease .1s;
}
.hero__type.in{opacity:1;transform:none}
.hero__meta{
  display:flex;gap:14px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--plum-soft);
  margin-bottom:60px;
}
.hero__display{
  font-family:var(--display);
  font-weight:300;
  line-height:.85;
  letter-spacing:-.04em;
  font-size:clamp(72px, 13vw, 220px);
  color:var(--cream);
  display:flex;flex-direction:column;
}
.hero__word{display:block}
.hero__word--1{}
.hero__word--2{
  font-size:.55em;
  font-style:italic;
  font-weight:300;
  color:var(--plum-soft);
  padding-left:.4em;
  line-height:1.1;
}
.hero__word--3 em{
  font-style:italic;
  font-weight:300;
  color:var(--plum-soft);
}
.hero__lede{
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:rgba(243,238,229,.78);
  max-width:520px;
  margin:48px 0;
  font-weight:300;
}
.hero__bottom{
  display:flex;align-items:center;
  gap:60px;
  flex-wrap:wrap;
}

.cta-pill{
  display:inline-flex;align-items:center;
  gap:14px;
  padding:6px 24px 6px 6px;
  background:var(--cream);
  color:var(--ink);
  border-radius:999px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  transition:all .35s ease;
}
.cta-pill__circle{
  width:50px;height:50px;
  background:var(--plum);
  color:var(--cream);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:18px;
  transition:transform .4s ease;
}
.cta-pill:hover{transform:translateY(-2px)}
.cta-pill:hover .cta-pill__circle{transform:rotate(-45deg)}

.hero__counters{
  display:flex;gap:42px;
}
.hero__counters > div{
  display:flex;flex-direction:column;
}
.hero__counters strong{
  font-family:var(--display);
  font-weight:400;
  font-size:24px;
  letter-spacing:-.005em;
  color:var(--cream);
  margin-bottom:2px;
}
.hero__counters span{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--plum-soft);
}

.hero__visual{
  position:relative;
  overflow:hidden;
  opacity:0;transform:translateX(20px);
  transition:all 1.2s ease .3s;
}
.hero__visual.in{opacity:1;transform:none}
.hero__photo{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=2200&q=92') center 25%/cover no-repeat;
  filter:saturate(.95) contrast(1.04);
  animation:zoomSlow 26s ease-out forwards;
}
@keyframes zoomSlow{
  from{transform:scale(1.08)}
  to{transform:scale(1)}
}
.hero__caption{
  position:absolute;
  bottom:80px;left:30px;
  display:inline-flex;align-items:center;gap:18px;
  font-family:var(--display);
  font-style:italic;
  font-size:13px;
  color:var(--cream);
  z-index:2;
  padding:10px 18px;
  background:rgba(24,18,14,.55);
  backdrop-filter:blur(8px);
  border:1px solid rgba(243,238,229,.18);
  border-radius:999px;
  letter-spacing:.02em;
}
.hero__caption span:last-child{color:var(--plum-soft);font-style:normal}

.hero__marquee{
  position:absolute;
  bottom:0;left:0;right:0;
  border-top:1px solid rgba(243,238,229,.16);
  border-bottom:1px solid rgba(243,238,229,.16);
  padding:14px 0;
  overflow:hidden;
  white-space:nowrap;
  background:rgba(24,18,14,.4);
  backdrop-filter:blur(6px);
  z-index:3;
}
.hero__marquee-track{
  display:inline-flex;
  gap:32px;
  align-items:center;
  font-family:var(--display);
  font-style:italic;
  font-size:18px;
  color:var(--cream);
  animation:slide 36s linear infinite;
  padding-left:32px;
}
.hero__marquee .dot{color:var(--plum-soft);font-size:8px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(max-width:980px){
  .hero{grid-template-columns:1fr;padding-top:90px}
  .hero__visual{height:54vh}
  .hero__counters{gap:24px;width:100%}
  .hero__counters strong{font-size:20px}
}

/* ============== MANIFESTO — sticky ============== */
.manifesto{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:60px;
  padding:var(--pad-y) var(--pad);
  background:var(--cream);
  align-items:start;
}
.manifesto__sticky{
  position:sticky;
  top:120px;
  display:flex;flex-direction:column;
  gap:14px;
  padding-top:8px;
}
.manifesto__sticky .num{
  font-family:var(--display);
  font-size:48px;
  font-style:italic;
  font-weight:300;
  color:var(--plum);
  letter-spacing:0;
  text-transform:none;
  line-height:1;
}
.manifesto__sticky .lab{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:14px;
}

.manifesto__body{
  max-width:1000px;
  opacity:0;transform:translateY(20px);
  transition:all 1s ease;
}
.manifesto__body.in{opacity:1;transform:none}
.manifesto__body .big{margin-bottom:60px}
.big-lede{
  font-family:var(--display);
  font-size:clamp(22px, 2.2vw, 30px);
  font-weight:300;
  line-height:1.45;
  color:var(--ink-soft);
  margin-bottom:60px;
  max-width:880px;
}
.big-lede em{color:var(--plum);font-style:italic}

.manifesto__split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-bottom:60px;
}
.manifesto__split p{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-soft);
}
.manifesto__split em{color:var(--plum);font-style:italic}

.manifesto__sign{
  display:flex;flex-direction:column;
  gap:6px;
  padding-top:32px;
  border-top:1px solid var(--line);
  max-width:380px;
}
.manifesto__sign span:first-child{
  font-family:var(--display);
  font-style:italic;
  font-size:22px;
  color:var(--plum);
}
.manifesto__sign span:last-child{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mute);
}

@media(max-width:980px){
  .manifesto{grid-template-columns:1fr;gap:30px}
  .manifesto__sticky{position:static;flex-direction:row;align-items:center}
  .manifesto__sticky .lab{writing-mode:horizontal-tb;transform:none;margin:0}
  .manifesto__split{grid-template-columns:1fr;gap:24px}
}

/* ============== BANDS ============== */
.band{
  height:60vh;
  min-height:380px;
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  align-items:flex-end;
}
.band::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(24,18,14,.85) 0%, rgba(24,18,14,.35) 35%, rgba(24,18,14,.15) 60%, rgba(24,18,14,.4) 100%);
  pointer-events:none;
}
.band--1{background-image:url('https://images.unsplash.com/photo-1611042553365-9b101441c135?w=2400&q=92')}
.band--2{background-image:url('https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=2400&q=92')}

.band__overlay{
  position:relative;
  display:flex;align-items:flex-end;
  gap:40px;
  padding:60px var(--pad);
  width:100%;
  color:var(--cream);
  z-index:1;
}
.band__overlay span{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(56px, 8vw, 110px);
  font-weight:300;
  line-height:1;
  color:var(--plum-soft);
  letter-spacing:-.02em;
}
.band__overlay p{
  font-family:var(--display);
  font-size:clamp(18px, 2vw, 26px);
  line-height:1.4;
  font-weight:300;
  max-width:620px;
  padding-bottom:14px;
}
.band__overlay--right{
  justify-content:flex-end;
  text-align:right;
}
.band__overlay--right p{margin-left:auto}

@media(max-width:780px){
  .band{height:50vh}
}

/* ============== ROOMS / Tratamentos ============== */
.rooms{
  padding:var(--pad-y) 0;
  background:var(--cream);
}
.rooms__head{
  max-width:1100px;
  margin:0 auto clamp(60px, 9vw, 120px);
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px 60px;
  align-items:end;
}
.rooms__head .num{grid-column:1;align-self:start}
.rooms__head .big{grid-column:2}
.rooms__head .rooms__intro{
  grid-column:2;
  max-width:560px;
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
}

.room{
  display:grid;
  grid-template-columns:160px 1.1fr 1fr;
  gap:clamp(24px, 4vw, 64px);
  align-items:center;
  padding:0 var(--pad);
  margin-bottom:clamp(80px, 10vw, 160px);
  max-width:var(--max);
  margin-left:auto;margin-right:auto;
  opacity:0;transform:translateY(30px);
  transition:all .9s ease;
}
.room.in{opacity:1;transform:none}
.room--reverse{
  grid-template-columns:160px 1fr 1.1fr;
}
.room--reverse .room__photo{order:3}
.room--reverse .room__content{order:2}

.room__num{
  position:relative;
  width:auto;
  align-self:start;
  padding-top:36px;
  z-index:2;
}
.num-big{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(48px, 5.4vw, 88px);
  color:var(--plum);
  line-height:.9;
  letter-spacing:-.04em;
  display:block;
  white-space:nowrap;
}
.room__photo{
  aspect-ratio:5/6;
  background-size:cover;
  background-position:center;
  filter:saturate(.94) contrast(1.04);
  transition:transform .8s ease;
}
.room:hover .room__photo{transform:scale(1.015)}
.room__photo[data-img="lift"]{background-image:url('https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1400&q=92')}
.room__photo[data-img="luz"]{background-image:url('https://images.unsplash.com/photo-1573461160327-b450ce3d8e7f?w=1400&q=92')}
.room__photo[data-img="harm"]{background-image:url('https://images.unsplash.com/photo-1487412947147-5cebf100ffc2?w=1400&q=92')}
.room__photo[data-img="corpo"]{background-image:url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=1400&q=92')}
.room__photo[data-img="long"]{background-image:url('https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=1400&q=92')}

.room__cat{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--plum);
  margin-bottom:20px;
  display:block;
}
.room__name{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(40px, 5.4vw, 84px);
  line-height:.95;
  letter-spacing:-.025em;
  color:var(--ink);
  margin-bottom:24px;
}
.room__name em{font-style:italic;color:var(--plum)}
.room__content p{
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  margin-bottom:30px;
  max-width:480px;
}
.room__meta{
  display:flex;align-items:center;gap:14px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  flex-wrap:wrap;
}
.room__meta .rule{
  width:24px;height:1px;
  background:var(--plum);
}
.room__meta span:last-child{
  font-family:var(--display);
  font-style:italic;
  font-size:20px;
  color:var(--plum);
  letter-spacing:0;
  text-transform:none;
}

.room--feature{
  background:var(--ink);
  color:var(--cream);
  padding:80px var(--pad);
  border-radius:0;
  max-width:none;
  margin:0;
}
.room--feature .room__name{color:var(--cream)}
.room--feature .room__name em{color:var(--plum-soft)}
.room--feature .room__content p{color:rgba(243,238,229,.78)}
.room--feature .num-big{color:var(--plum-soft)}
.room--feature .room__meta{color:var(--cream)}
.room--feature .room__cat{color:var(--plum-soft)}
.room--feature .room__meta span:last-child{color:var(--plum-soft)}
.room--feature .room__meta .rule{background:var(--plum-soft)}

@media(max-width:980px){
  .rooms__head{grid-template-columns:1fr}
  .rooms__head .big,.rooms__head .rooms__intro{grid-column:1}
  .room,.room--reverse{
    grid-template-columns:1fr;
    gap:24px;
  }
  .room__num{width:auto}
  .room--reverse .room__photo{order:1}
  .room--reverse .room__content{order:2}
}

/* ============== CASA — sticky split ============== */
.casa{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:0;
  background:var(--cream-2);
}
.casa__sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:var(--pad-y) var(--pad);
  opacity:0;transform:translateX(-20px);
  transition:all 1s ease;
}
.casa__sticky.in{opacity:1;transform:none}
.casa__sticky .num{margin-bottom:24px}
.casa__sticky .big{margin-bottom:32px}
.casa__sticky > p{
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:440px;
  margin-bottom:36px;
}
.casa__list{
  list-style:none;
}
.casa__list li{
  display:flex;align-items:center;
  gap:14px;
  font-family:var(--display);
  font-size:18px;
  font-style:italic;
  color:var(--ink);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.casa__list li:first-child{border-top:1px solid var(--line)}
.casa__list span{color:var(--plum);font-style:normal;flex-shrink:0}

.casa__scroll{
  display:flex;flex-direction:column;
  gap:60px;
  padding:var(--pad-y) var(--pad);
  opacity:0;transform:translateX(20px);
  transition:all 1s ease .15s;
}
.casa__scroll.in{opacity:1;transform:none}
.plate{
  display:flex;flex-direction:column;
  gap:14px;
}
.plate__img{
  aspect-ratio:4/5;
  background-size:cover;
  background-position:center;
  filter:saturate(.94) contrast(1.04);
  transition:transform .8s ease;
}
.plate:hover .plate__img{transform:scale(1.015)}
.plate__img--a{background-image:url('https://images.unsplash.com/photo-1556760544-74068565f05c?w=1400&q=92')}
.plate__img--b{background-image:url('https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1400&q=92')}
.plate__img--c{background-image:url('https://images.unsplash.com/photo-1573461160327-b450ce3d8e7f?w=1400&q=92')}
.plate figcaption{
  font-family:var(--display);
  font-style:italic;
  font-size:14px;
  color:var(--mute);
}

@media(max-width:980px){
  .casa{grid-template-columns:1fr}
  .casa__sticky{position:static;height:auto;padding-bottom:40px}
  .casa__scroll{padding-top:0}
}

/* ============== TESTIMONY ============== */
.testimony{
  padding:clamp(80px, 10vw, 140px) var(--pad);
  background:var(--plum-bg);
  text-align:center;
  position:relative;
}
.testimony__mark{
  font-family:var(--display);
  font-size:clamp(80px, 12vw, 180px);
  font-style:italic;
  font-weight:300;
  line-height:.5;
  color:var(--plum);
  display:block;
  margin-bottom:30px;
}
.testimony.in blockquote,
.testimony.in .testimony__sign{opacity:1;transform:none}
.testimony blockquote{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(28px, 4vw, 56px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:1080px;
  margin:0 auto 40px;
  opacity:0;transform:translateY(20px);
  transition:all 1s ease;
}
.testimony blockquote em{color:var(--plum);font-style:italic}
.testimony__sign{
  display:flex;flex-direction:column;
  gap:6px;
  opacity:0;transform:translateY(20px);
  transition:all 1s ease .15s;
}
.testimony__sign span:first-child{
  font-family:var(--display);
  font-style:italic;
  font-size:18px;
  color:var(--plum);
}
.testimony__sign span:last-child{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mute);
}

/* ============== PEOPLE — horizontal scroll ============== */
.people{
  padding:var(--pad-y) 0;
  background:var(--cream);
  overflow:hidden;
}
.people__head{
  max-width:1100px;
  margin:0 auto clamp(50px, 7vw, 80px);
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px 60px;
  align-items:end;
  opacity:0;transform:translateY(20px);
  transition:all 1s ease;
}
.people__head.in{opacity:1;transform:none}
.people__head .num{align-self:start}
.people__intro{
  grid-column:2;
  max-width:540px;
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:var(--ink-soft);
}

.people__strip{
  display:flex;
  gap:32px;
  padding:0 var(--pad) 30px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  cursor:grab;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.people__strip::-webkit-scrollbar{display:none}
.people__strip.drag{cursor:grabbing}
.people__strip.drag *{user-select:none;pointer-events:none}

.dossie{
  flex:0 0 320px;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(20px);
  transition:all .8s ease;
}
.dossie.in{opacity:1;transform:none}
.dossie__photo{
  aspect-ratio:3/4;
  background-size:cover;
  background-position:center 20%;
  filter:saturate(.94) contrast(1.04);
  margin-bottom:22px;
  transition:transform .6s ease;
}
.dossie:hover .dossie__photo{transform:scale(1.015)}
.dossie__photo--1{background-image:url('https://images.unsplash.com/photo-1573497019418-b400bb3ab074?w=900&q=92')}
.dossie__photo--2{background-image:url('https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=900&q=92')}
.dossie__photo--3{background-image:url('https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=900&q=92')}
.dossie__photo--4{background-image:url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=900&q=92')}

.dossie__info h3{
  font-family:var(--display);
  font-weight:400;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.005em;
  color:var(--ink);
  margin-bottom:8px;
}
.dossie__info h3 em{font-style:italic;color:var(--plum)}
.dossie__info > p{
  font-size:13px;
  letter-spacing:.04em;
  color:var(--plum);
  margin-bottom:14px;
  font-weight:500;
}
.dossie__creds{
  display:flex;flex-direction:column;
  gap:4px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.dossie__creds span{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mute);
}

@media(max-width:780px){
  .people__head{grid-template-columns:1fr}
  .people__intro{grid-column:1}
  .dossie{flex-basis:260px}
}

/* ============== FOLIO — big numbers ============== */
.folio{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  background:var(--ink);
  color:var(--cream);
}
.folio__cell{
  padding:60px 40px;
  border-right:1px solid rgba(243,238,229,.12);
  display:flex;flex-direction:column;
  gap:14px;
  opacity:0;transform:translateY(20px);
  transition:all .8s ease;
}
.folio__cell.in{opacity:1;transform:none}
.folio__cell:last-child{border-right:0}
.folio__big{
  font-family:var(--display);
  font-weight:300;
  font-style:italic;
  font-size:clamp(56px, 7vw, 110px);
  letter-spacing:-.04em;
  line-height:.85;
  color:var(--cream);
}
.folio__big sup{
  font-size:.4em;
  color:var(--plum-soft);
  font-style:normal;
  margin-left:2px;
  vertical-align:super;
}
.folio__lab{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--plum-soft);
  line-height:1.5;
}

@media(max-width:780px){
  .folio{grid-template-columns:1fr 1fr}
  .folio__cell:nth-child(2){border-right:0}
  .folio__cell:nth-child(odd){border-right:1px solid rgba(243,238,229,.12)}
  .folio__cell:nth-child(-n+2){border-bottom:1px solid rgba(243,238,229,.12)}
}

/* ============== BOOK ============== */
.book{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  background:var(--ink);
  color:var(--cream);
}
.book__sticky{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:var(--pad-y) var(--pad);
  opacity:0;transform:translateY(20px);
  transition:all 1s ease;
}
.book__sticky.in{opacity:1;transform:none}
.book__sticky .num{margin-bottom:24px}
.book__sticky .big{margin-bottom:32px}
.book__sticky > p{
  font-family:var(--display);
  font-size:18px;
  line-height:1.55;
  color:rgba(243,238,229,.75);
  max-width:440px;
  margin-bottom:48px;
}
.book__contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  padding-top:32px;
  border-top:1px solid rgba(243,238,229,.16);
  max-width:520px;
}
.book__contact strong{
  display:block;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--plum-soft);
  margin-bottom:10px;
  font-weight:500;
}
.book__contact p{
  font-family:var(--display);
  font-size:14px;
  line-height:1.55;
  color:var(--cream);
}

.book__form{
  background:var(--cream);
  color:var(--ink);
  padding:var(--pad-y) var(--pad);
  display:flex;flex-direction:column;
  gap:26px;
  opacity:0;transform:translateY(20px);
  transition:all 1s ease .2s;
  justify-content:center;
}
.book__form.in{opacity:1;transform:none}

.rfield{display:flex;flex-direction:column;gap:8px}
.rfield label{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
}
.rfield label em{
  text-transform:none;
  letter-spacing:0;
  font-family:var(--display);
  font-style:italic;
  font-size:13px;
  opacity:.7;
}
.rfield input,
.rfield select,
.rfield textarea{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  color:var(--ink);
  font-family:var(--display);
  font-size:20px;
  outline:none;
  transition:border-color .3s;
}
.rfield input::placeholder,
.rfield textarea::placeholder{
  color:var(--mute);
  opacity:.5;
  font-style:italic;
}
.rfield input:focus,
.rfield select:focus,
.rfield textarea:focus{border-color:var(--plum)}
.rfield select{cursor:pointer}
.rfield textarea{resize:vertical}
.rfield-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.big-cta{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  margin-top:14px;
  font-family:var(--display);
  font-size:28px;
  font-style:italic;
  color:var(--ink);
  font-weight:400;
  cursor:pointer;
  transition:all .35s ease;
}
.big-cta__arr{
  font-style:normal;
  display:inline-block;
  transition:transform .35s ease;
}
.big-cta:hover{
  color:var(--plum);
  border-color:var(--plum);
  padding-left:14px;
}
.big-cta:hover .big-cta__arr{transform:translateX(8px)}

.book__success{
  text-align:center;
  font-family:var(--display);
  font-style:italic;
  font-size:16px;
  color:var(--plum);
  padding:14px;
  border:1px solid var(--plum);
}

@media(max-width:980px){
  .book{grid-template-columns:1fr}
  .book__sticky{position:static;height:auto;padding-bottom:50px}
  .book__contact{grid-template-columns:1fr;max-width:none}
}
@media(max-width:560px){
  .rfield-row{grid-template-columns:1fr}
}

/* ============== FOOTER ============== */
.foot{
  background:var(--ink);
  color:var(--cream);
  padding:60px var(--pad) 30px;
  position:relative;
  overflow:hidden;
  border-top:1px solid rgba(243,238,229,.08);
}
.foot__big{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(80px, 16vw, 240px);
  line-height:.85;
  letter-spacing:-.05em;
  color:var(--cream);
  text-align:center;
  margin-bottom:60px;
}
.foot__big em{font-style:italic;font-weight:300;color:var(--plum-soft)}

.foot__cols{
  max-width:var(--max);
  margin:0 auto 60px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(243,238,229,.12);
}
.foot__cols h4{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--plum-soft);
  margin-bottom:18px;
  font-weight:500;
}
.foot__cols a{
  display:block;
  font-family:var(--display);
  font-size:16px;
  color:rgba(243,238,229,.7);
  padding:5px 0;
  transition:all .3s;
}
.foot__cols a:hover{color:var(--plum-soft);transform:translateX(3px)}

.foot__base{
  max-width:var(--max);
  margin:0 auto;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  font-size:11px;
  letter-spacing:.14em;
  color:rgba(243,238,229,.45);
  text-transform:uppercase;
}

@media(max-width:780px){
  .foot__cols{grid-template-columns:1fr}
}