/* ═══════════════════════════════════════════════════════════════
   PUTIH DCARIK UBUD
   Design system — modern minimal, tropical editorial
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root{
  /* colour */
  --paper:      #F6F3EC;
  --paper-2:    #EEE9DE;
  --sand:       #DFD7C7;
  --ink:        #1A1B17;
  --ink-70:     rgba(26,27,23,.70);
  --ink-61:     rgba(26,27,23,.61);   /* was --ink-45 at .45 — 2.82:1 on --paper failed WCAG AA */
  --ink-18:     rgba(26,27,23,.18);
  --ink-08:     rgba(26,27,23,.08);
  --frond:      #33463A;
  --frond-soft: #5B7263;
  --clay:       #A85F3C;
  --night:      #12140F;
  --night-2:    #1B1E17;
  --light-70:   rgba(246,243,236,.70);
  --light-48:   rgba(246,243,236,.48);  /* was --light-45 at .45 — 4.20:1 on --night failed WCAG AA */
  --light-18:   rgba(246,243,236,.18);

  /* type */
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --fs-micro:  clamp(.66rem, .60rem + .18vw, .74rem);
  --fs-body:   clamp(1rem, .95rem + .22vw, 1.125rem);
  --fs-lede:   clamp(1.125rem, 1.02rem + .5vw, 1.4rem);
  --fs-stmt:   clamp(1.6rem, 1.1rem + 2.3vw, 3.25rem);
  --fs-h2:     clamp(2.4rem, 1.4rem + 4.2vw, 5.5rem);
  --fs-h1:     clamp(3rem, 1.1rem + 8.2vw, 10.5rem);
  --fs-mega:   clamp(4rem, 1rem + 13vw, 16rem);

  /* space */
  --gut: clamp(1.25rem, .6rem + 2.6vw, 4rem);
  --sec: clamp(6rem, 3rem + 10vw, 14rem);
  --shell: clamp(1560px, 88vw, 2560px);

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);
}

/* ── Large displays ─────────────────────────────────────────────
   Below 1600px nothing here applies and the design is untouched. Above it the
   root scales with the viewport, which lifts every rem-based clamp ceiling at
   once — type, gutters, section rhythm — so a big monitor gets a proportionally
   larger page rather than a fixed column adrift in dead space.

   The floor is 1rem, i.e. the user's own browser font-size, which this
   multiplies rather than overrides. Measure stays controlled because the
   paragraph widths are set in ch. */
@media (min-width: 1600px){
  html{ font-size:clamp(1rem, .68rem + .32vw, 1.2rem); }
}

/* ── Reset ──────────────────────────────────────────────────────
   Every rule below uses a bare element selector, which is what a reset
   is. In a standalone page that is fine; dropped into WordPress it would
   restyle the admin bar, editor content and plugin markup.

   The cascade layer is the guard: unlayered author CSS — WordPress core,
   Elementor, every plugin — outranks anything in a layer regardless of
   specificity or source order. So this reset becomes a floor that any
   other stylesheet can stand on without an !important fight, while still
   applying normally to this page (the rest of main.css is unlayered and
   therefore still wins over it).

   If this file ever has to load site-wide, see AGENTS.md §4 for the next
   step: scoping these selectors to `.pd-page` with :where().            */
@layer pd.reset {
  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  html.pd-preload{ overflow:hidden; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:var(--fs-body);
    line-height:1.6;
    font-weight:300;
    letter-spacing:-.005em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
  }
  img{ display:block; max-width:100%; height:auto; }
  h1,h2,h3,h4,p,figure,dl,dd{ margin:0; }
  ul,ol{ margin:0; padding:0; list-style:none; }
  a{ color:inherit; text-decoration:none; }
  button,input,select{ font:inherit; color:inherit; }
  button{ background:none; border:0; cursor:pointer; }
  ::selection{ background:var(--frond); color:var(--paper); }
  :focus-visible{ outline:2px solid var(--clay); outline-offset:3px; border-radius:2px; }

  /* Anchor targets clear the fixed header (native-scroll fallback path) */
  section[id]{ scroll-margin-top:clamp(5rem,9vh,7rem); }
}

.pd-shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

.pd-skip{
  position:fixed; top:0; left:0; z-index:9999;
  padding:.85rem 1.4rem; background:var(--ink); color:var(--paper);
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  transform:translateY(-110%); transition:transform .3s var(--e-out);
}
.pd-skip:focus-visible{ transform:translateY(0); }

/* ── Type primitives ────────────────────────────────────────── */
.pd-eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-size:var(--fs-micro); font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-61);
}
.pd-eyebrow--light{ color:var(--light-48); }
.pd-eyebrow__dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--clay); flex:none;
}
@media (prefers-reduced-motion: no-preference){
  .pd-eyebrow__dot{ animation:pdPulse 3.2s var(--e-io) infinite; }
  @keyframes pdPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.6); opacity:.5 } }
}

.pd-h2{
  font-family:var(--serif);
  font-size:var(--fs-h2);
  font-weight:300;
  font-variation-settings:"opsz" 144, "SOFT" 0, "WONK" 0;
  line-height:.94;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.pd-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,5rem);
  align-items:end;
  margin-bottom:clamp(3rem,6vw,6rem);
}
.pd-head .pd-eyebrow{ grid-column:1 / -1; margin-bottom:.4rem; }
.pd-head .pd-h2{ max-width:14ch; }
.pd-head__note{
  max-width:46ch; padding-bottom:.65rem;
  color:var(--ink-70); font-size:var(--fs-body);
}

.pd-link{
  position:relative; display:inline-block; margin-top:2rem;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.45rem;
}
.pd-link::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:currentColor; transform-origin:right;
  transition:transform .55s var(--e-out);
}
.pd-link:hover::after{ transform:scaleX(0); transform-origin:left; }

/* ── Buttons ────────────────────────────────────────────────── */
.pd-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.15em 2.3em; border-radius:100px;
  border:1px solid var(--ink);
  font-size:var(--fs-micro); font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
  will-change:transform;
  transition:color .4s var(--e-out), border-color .4s var(--e-out);
}
.pd-btn__label{ position:relative; z-index:2; }
.pd-btn__fill{
  position:absolute; inset:0; z-index:1; background:var(--ink);
  transform:translate3d(0,101%,0); border-radius:50% 50% 0 0;
  transition:transform .62s var(--e-out), border-radius .62s var(--e-out);
}
.pd-btn:hover{ color:var(--paper); }
.pd-btn:hover .pd-btn__fill{ transform:translate3d(0,0,0); border-radius:0; }
.pd-btn--sm{ padding:.95em 1.7em; }
.pd-btn--ghost{ border-color:var(--ink-18); }
.pd-btn--ghost:hover{ border-color:var(--ink); }
.pd-btn--light{ border-color:var(--light-18); color:var(--paper); }
.pd-btn--light .pd-btn__fill{ background:var(--paper); }
.pd-btn--light:hover{ color:var(--ink); border-color:var(--paper); }

/* ═══════════════ ENTRY SEQUENCE ═══════════════ */
.pd-loader{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  pointer-events:none;
}
.pd-loader__panel{
  position:absolute; top:0; bottom:0; width:calc(100% / 3 + 1px);
  background:var(--night);
  will-change:transform;
}
.pd-loader__panel:nth-child(1){ left:0; }
.pd-loader__panel:nth-child(2){ left:calc(100% / 3); }
.pd-loader__panel:nth-child(3){ left:calc(200% / 3); }
.pd-loader__inner{
  position:relative; z-index:2; width:min(90vw, 40rem);
  text-align:center; color:var(--paper);
}
.pd-loader__mark{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,7vw,4.5rem); line-height:1;
  letter-spacing:-.03em;
  display:flex; gap:.3em; justify-content:center; overflow:hidden;
}
.pd-loader__mark span{ display:block; transform:translateY(110%); will-change:transform; }
.pd-loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:2.2rem; opacity:0;
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-48);
}
.pd-loader__count{ font-variant-numeric:tabular-nums; color:var(--paper); }
.pd-loader__bar{
  margin-top:.9rem; height:1px; background:var(--light-18); overflow:hidden;
}
.pd-loader__bar i{
  display:block; height:100%; width:100%; background:var(--paper);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

/* ═══════════════ ATMOSPHERE ═══════════════ */
.pd-grain{
  position:fixed; inset:-50%; z-index:900; pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference){
  .pd-grain{ animation:pdGrain 7s steps(6) infinite; }
  @keyframes pdGrain{
    0%,100%{ transform:translate3d(0,0,0) }
    20%{ transform:translate3d(-3%,2%,0) }
    40%{ transform:translate3d(2%,-3%,0) }
    60%{ transform:translate3d(-2%,-2%,0) }
    80%{ transform:translate3d(3%,1%,0) }
  }
}

.pd-cursor{ display:none; }
@media (hover: hover) and (pointer: fine){
  .pd-cursor{
    display:block; position:fixed; top:0; left:0; z-index:950;
    pointer-events:none; mix-blend-mode:difference;
  }
  .pd-cursor__dot,.pd-cursor__ring{
    position:absolute; top:0; left:0; border-radius:50%;
    transform:translate3d(-50%,-50%,0); will-change:transform;
  }
  .pd-cursor__dot{ width:6px; height:6px; background:var(--paper); }
  .pd-cursor__ring{
    width:44px; height:44px; border:1px solid rgba(246,243,236,.55);
    transition:width .4s var(--e-out), height .4s var(--e-out), border-color .4s var(--e-out);
  }
  .pd-cursor__label{
    position:absolute; top:0; left:0;
    transform:translate3d(-50%,-50%,0);
    font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--paper); opacity:0; white-space:nowrap;
    transition:opacity .3s var(--e-out);
  }
  body.is-hovering .pd-cursor__ring{ width:82px; height:82px; border-color:rgba(246,243,236,.9); }
  body.is-hovering .pd-cursor__dot{ opacity:0; }
  body.is-hovering .pd-cursor__label{ opacity:1; }
}

/* ═══════════════ NAV ═══════════════ */
.pd-nav{
  position:fixed; inset:0 0 auto 0; z-index:800;
  padding:clamp(1rem,2vw,1.7rem) 0;
  color:var(--paper);
  transform:translate3d(0,0,0); will-change:transform;
  transition:transform .55s var(--e-out), background-color .45s ease, color .45s ease, padding .45s ease, border-color .45s ease;
  border-bottom:1px solid transparent;
}
.pd-nav.is-hidden{ transform:translate3d(0,-105%,0); }
.pd-nav.is-solid{
  background:rgba(246,243,236,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--ink-08);
  color:var(--ink);
  padding:clamp(.7rem,1.2vw,1rem) 0;
}
.pd-nav__inner{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:2rem;
}
.pd-nav__brand{ display:grid; line-height:1.1; }
.pd-nav__brand-name{
  font-family:var(--serif); font-size:clamp(1.05rem,1.6vw,1.35rem);
  font-weight:400; letter-spacing:-.02em;
}
.pd-nav__brand-sub{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  opacity:.6; margin-top:.15rem;
}
.pd-nav__links{ display:flex; gap:clamp(1.2rem,2.4vw,2.6rem); margin-left:auto; }
.pd-nav__links a{
  font-size:var(--fs-micro); letter-spacing:.13em; text-transform:uppercase;
  display:block; height:1.3em; overflow:hidden;
}
.pd-nav__links a span{
  display:block; line-height:1.3em; will-change:transform;
  transition:transform .55s var(--e-out);
}
.pd-nav__links a span::after{
  content:attr(data-label); display:block; line-height:1.3em;
  color:var(--clay);
}
@media (hover: hover) and (pointer: fine){
  .pd-nav__links a:hover span{ transform:translate3d(0,-1.3em,0); }
}
.pd-nav__cta{ border-color:currentColor; }
.pd-nav .pd-btn__fill{ background:currentColor; }
.pd-nav.is-solid .pd-btn:hover{ color:var(--paper); }
.pd-nav:not(.is-solid) .pd-btn:hover{ color:var(--night); }

.pd-burger{ display:none; width:34px; height:34px; position:relative; margin-left:1rem; }
.pd-burger i{
  position:absolute; left:6px; right:6px; height:1px; background:currentColor;
  transition:transform .45s var(--e-out), opacity .3s ease;
}
.pd-burger i:nth-child(1){ top:13px; }
.pd-burger i:nth-child(2){ top:20px; }
body.menu-open .pd-burger i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .pd-burger i:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.pd-menu{
  position:fixed; inset:0; z-index:790;
  background:var(--night); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gut) 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--e-out), visibility .5s;
}
.pd-menu[hidden]{ display:flex; }
body.menu-open .pd-menu{ opacity:1; visibility:visible; }
.pd-menu__list{ display:grid; gap:.2rem; }
.pd-menu__list a{
  font-family:var(--serif); font-size:clamp(2rem,9vw,3.4rem);
  font-weight:300; line-height:1.15; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:1rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out);
}
body.menu-open .pd-menu__list a{ opacity:1; transform:none; }
.pd-menu__list em{
  font-family:var(--sans); font-style:normal; font-size:.62rem;
  letter-spacing:.2em; color:var(--light-48);
}
.pd-menu__addr{
  margin-top:3rem; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--light-48);
}

/* ═══════════════ HERO ═══════════════ */
.pd-hero{
  position:relative; min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(7rem,14vh,11rem) 0 clamp(1.5rem,3vh,2.5rem);
  color:var(--paper); overflow:hidden;
  isolation:isolate;
}
.pd-hero__media{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
  clip-path:inset(0 0 0 0);
}
.pd-hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  transform:scale(1.18); will-change:transform;
}
.pd-hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(12,14,10,.66) 0%, rgba(12,14,10,.46) 38%, rgba(12,14,10,.16) 62%, rgba(12,14,10,0) 82%),
    linear-gradient(to top, rgba(12,14,10,.86) 0%, rgba(12,14,10,.28) 42%, rgba(12,14,10,.12) 68%, rgba(12,14,10,.42) 100%);
}
.pd-hero__content{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
  flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(2.5rem,6vh,4.5rem);
}
.pd-hero__eyebrow{ color:var(--light-70); margin-bottom:clamp(1.2rem,3vh,2.2rem); }
.pd-hero__title{
  font-family:var(--serif);
  font-size:var(--fs-h1);
  font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  line-height:.9; letter-spacing:-.042em;
  max-width:15ch; text-wrap:balance;
}
.pd-hero__lede{
  margin-top:clamp(1.6rem,3.4vh,2.6rem);
  max-width:46ch; font-size:var(--fs-lede);
  color:var(--light-70); line-height:1.5;
}
.pd-hero__actions{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:clamp(2rem,4vh,3rem);
}
.pd-hero__actions .pd-btn{ border-color:rgba(246,243,236,.4); }
.pd-hero__actions .pd-btn__fill{ background:var(--paper); }
.pd-hero__actions .pd-btn:hover{ color:var(--night); border-color:var(--paper); }

.pd-hero__bar{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding-top:clamp(1.2rem,2.4vh,2rem);
  border-top:1px solid rgba(246,243,236,.18);
}
.pd-hero__stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,3vw,3.5rem); flex:1;
}
.pd-hero__stats dt{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-48); margin-bottom:.4rem;
}
.pd-hero__stats dd{
  font-family:var(--serif); font-size:clamp(.95rem,1.5vw,1.3rem);
  font-weight:400; letter-spacing:-.01em; line-height:1.2;
}
.pd-hero__stats dd span{
  font-family:var(--sans); font-size:.68rem; font-weight:300;
  color:var(--light-48); letter-spacing:.02em;
  display:block;
}
.pd-scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-48); flex:none;
}
.pd-scrollcue i{
  display:block; width:1px; height:44px; background:rgba(246,243,236,.3);
  position:relative; overflow:hidden;
}
.pd-scrollcue i::after{
  content:""; position:absolute; inset:0; background:var(--paper);
  transform:translateY(-100%);
}
@media (prefers-reduced-motion: no-preference){
  .pd-scrollcue i::after{ animation:pdCue 2.4s var(--e-io) infinite; }
  @keyframes pdCue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }
}

/* ═══════════════ MARQUEE ═══════════════ */
.pd-marquee{
  overflow:hidden; padding:clamp(1.6rem,3vw,2.6rem) 0;
  border-bottom:1px solid var(--ink-08);
  background:var(--paper);
}
.pd-marquee__track{
  display:flex; align-items:center; gap:clamp(1.5rem,3vw,3rem);
  width:max-content; will-change:transform;
}
.pd-marquee__track span{
  font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,2rem);
  font-weight:300; letter-spacing:-.02em; white-space:nowrap;
}
.pd-marquee__track i{ color:var(--clay); font-size:.75rem; font-style:normal; }

/* ═══════════════ STAY ═══════════════ */
.pd-stay{ padding:var(--sec) 0; }
.pd-stay .pd-eyebrow{ margin-bottom:clamp(2rem,4vw,3.5rem); }
.pd-statement{
  font-family:var(--serif);
  font-size:var(--fs-stmt); font-weight:300;
  font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0;
  line-height:1.18; letter-spacing:-.028em;
  max-width:27ch; text-wrap:pretty;
  margin-bottom:clamp(3.5rem,7vw,7rem);
}
.pd-statement .w{ display:inline-block; opacity:.14; will-change:opacity; }

.pd-stay__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,5rem); align-items:start;
}
.pd-stay__figure{
  grid-column:1 / span 6; overflow:hidden; border-radius:2px;
  aspect-ratio:4/5;
}
.pd-stay__figure img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); will-change:transform;
}
.pd-stay__text{ grid-column:8 / span 5; padding-top:clamp(1rem,5vw,5rem); }
.pd-stay__text p{
  color:var(--ink-70); margin-bottom:1.6rem; max-width:40ch;
}
.pd-stay__facts{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--ink-08);
}
.pd-stay__facts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--ink-08);
}
.pd-stay__facts em{
  font-style:normal; font-size:var(--fs-micro);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-61);
}
.pd-stay__facts span{ font-family:var(--serif); font-size:1.05rem; }

/* ═══════════════ STORY ═══════════════ */
.pd-story{
  position:relative; background:var(--night); color:var(--paper);
  display:grid; grid-template-columns:1fr 1fr;
}
.pd-story__media{
  position:sticky; top:0; height:100svh; height:100dvh;
  overflow:hidden;
}
.pd-story__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity .9s var(--e-io);
  will-change:opacity;
}
.pd-story__slide.is-active{ opacity:1; }
.pd-story__slide img{ width:100%; height:100%; object-fit:cover; }
.pd-story__slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(12,14,10,.1), rgba(12,14,10,.45));
}
.pd-story__index{
  position:absolute; left:var(--gut); bottom:var(--gut); z-index:2;
  font-size:var(--fs-micro); letter-spacing:.2em; color:var(--light-48);
  font-variant-numeric:tabular-nums;
}
.pd-story__index b{ color:var(--paper); font-weight:400; }
.pd-story__rail{ padding:0 var(--gut); }
.pd-story__chapter{
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem 0; max-width:34ch;
}
.pd-story__chapter .pd-eyebrow{ margin-bottom:2rem; }
.pd-story__chapter h2{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4.5vw,4rem); font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  line-height:1; letter-spacing:-.035em; margin-bottom:1.8rem;
}
.pd-story__chapter p{ color:var(--light-70); }

/* ═══════════════ ROOMS ═══════════════ */
.pd-rooms{ padding:var(--sec) 0; }
.pd-rooms__grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(2rem,4vw,4.5rem);
}
.pd-room{ display:block; }
.pd-room--feature{ margin-top:clamp(0rem,8vw,7rem); }
.pd-room__media{
  position:relative; overflow:hidden; border-radius:2px;
  aspect-ratio:4/3; background:var(--paper-2);
}
.pd-room__img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--e-out), opacity .8s var(--e-out);
  will-change:transform;
}
.pd-room__img--alt{ position:absolute; inset:0; opacity:0; }
@media (hover: hover) and (pointer: fine){
  .pd-room:hover .pd-room__img{ transform:scale(1.06); }
  .pd-room:hover .pd-room__img--alt{ opacity:1; }
}
.pd-room__body{ padding-top:1.8rem; }
.pd-room__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; padding-bottom:1.4rem; border-bottom:1px solid var(--ink-08);
}
.pd-room__top h3{
  font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.3rem);
  font-weight:300; letter-spacing:-.03em; line-height:1.05;
}
.pd-room__price{
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-61); white-space:nowrap; text-align:right;
}
.pd-room__price b{
  display:inline-block; font-family:var(--serif); font-size:1.5rem;
  font-weight:400; letter-spacing:-.02em; color:var(--ink); text-transform:none;
}
.pd-room__price span{ text-transform:none; }
.pd-room__spec{ padding-top:1.4rem; display:grid; gap:.6rem; }
.pd-room__spec li{
  position:relative; padding-left:1.3rem;
  font-size:.95rem; color:var(--ink-70);
}
.pd-room__spec li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:1px; background:var(--clay);
}
.pd-room__go{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.8rem;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-61); transition:color .4s ease;
}
.pd-room__go i{
  display:block; width:22px; height:1px; background:currentColor;
  transition:width .5s var(--e-out);
}
.pd-room:hover .pd-room__go{ color:var(--ink); }
.pd-room:hover .pd-room__go i{ width:40px; }

/* ═══════════════ AMENITIES ═══════════════ */
.pd-amen{ padding:0 0 var(--sec); }
.pd-amen__wrap{ position:relative; }
.pd-amen__preview{
  display:none;
  position:absolute; top:0; left:50%; z-index:5;
  width:clamp(15rem,22vw,21.25rem); aspect-ratio:16/10;
  overflow:hidden; border-radius:2px; pointer-events:none;
  opacity:0; will-change:transform,opacity;
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px){
  .pd-amen__preview{ display:block; }
}
.pd-amen__preview img{ width:100%; height:100%; object-fit:cover; }
.pd-amen__list{ border-top:1px solid var(--ink-08); }
.pd-amen__list li{
  position:relative;
  display:grid; grid-template-columns:4rem minmax(0,1fr) minmax(0,1fr);
  align-items:baseline; gap:1.5rem;
  padding:clamp(1.3rem,2.4vw,2rem) 0;
  border-bottom:1px solid var(--ink-08);
  transition:color .5s var(--e-out);
}
.pd-amen__list li::before{
  content:""; position:absolute; inset:auto 0 -1px 0; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--e-out);
}
@media (hover: hover) and (pointer: fine){
  .pd-amen__list li:hover::before{ transform:scaleX(1); }
  .pd-amen__wrap:hover .pd-amen__list li{ color:var(--ink-61); }
  .pd-amen__wrap:hover .pd-amen__list li:hover{ color:var(--ink); }
}
.pd-amen__list em{
  font-style:normal; font-size:var(--fs-micro);
  letter-spacing:.14em; color:var(--ink-61); font-variant-numeric:tabular-nums;
}
.pd-amen__list h3{
  font-family:var(--serif); font-size:clamp(1.35rem,2.6vw,2.15rem);
  font-weight:300; letter-spacing:-.03em; line-height:1.05;
}
.pd-amen__list p{ font-size:.95rem; color:var(--ink-61); }

.pd-chips{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:clamp(3rem,5vw,4.5rem);
}
.pd-chips li{
  padding:.6em 1.15em; border:1px solid var(--ink-18); border-radius:100px;
  font-size:var(--fs-micro); letter-spacing:.08em; color:var(--ink-70);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.pd-chips li:hover{ background:var(--frond); border-color:var(--frond); color:var(--paper); }

/* ═══════════════ GALLERY ═══════════════ */
/* Base = static grid: reachable with no JS, no GSAP, or on touch.
   .is-horizontal is added by JS when the pinned scroll journey is live. */
.pd-gal{ background:var(--night); color:var(--paper); }
.pd-gal__sticky{
  position:relative;
  padding:clamp(5rem,12vw,8rem) var(--gut) clamp(4rem,10vw,6rem);
}
.pd-gal__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 0 clamp(2rem,4vw,3rem);
}
.pd-gal__hint{
  display:none;
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-48);
}
.pd-gal__track{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(.8rem,1.6vw,1.4rem);
}
.pd-gal__title{
  font-family:var(--serif); font-size:clamp(3rem,11vw,7rem); font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  line-height:.82; letter-spacing:-.05em;
  grid-column:1 / -1; margin:0 0 .6rem;
}
.pd-gal__item{
  position:relative; overflow:hidden; border-radius:2px; aspect-ratio:3/4;
}
.pd-gal__item--wide{ grid-column:1 / -1; aspect-ratio:16/10; }
.pd-gal__item img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.2s var(--e-out);
}
.pd-gal__item:hover img{ transform:scale(1); }
.pd-gal__item figcaption{
  position:absolute; left:1rem; bottom:.9rem;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.pd-gal__end{
  grid-column:1 / -1; padding:clamp(2rem,4vw,3rem) 0 0;
  display:grid; gap:1.8rem; justify-items:start;
}
.pd-gal__end p{
  font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.8rem);
  font-weight:300; letter-spacing:-.03em; line-height:1.05; max-width:12ch;
}
.pd-gal__progress{ display:none; }

/* ── Horizontal journey (JS-driven, desktop only) ── */
.pd-gal.is-horizontal .pd-gal__sticky{
  height:100svh; height:100dvh; padding:0;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.pd-gal.is-horizontal .pd-gal__head{
  position:absolute; top:0; left:0; right:0; z-index:3;
  padding:clamp(5.5rem,10vh,8rem) var(--gut) 0;
}
.pd-gal.is-horizontal .pd-gal__hint{ display:block; }
.pd-gal.is-horizontal .pd-gal__track{
  display:flex; align-items:center; gap:clamp(1.5rem,3vw,3.5rem);
  padding-inline:var(--gut); width:max-content; will-change:transform;
}
.pd-gal.is-horizontal .pd-gal__title{
  font-size:var(--fs-mega); flex:none;
  margin:0 clamp(2rem,5vw,6rem) 0 0;
}
.pd-gal.is-horizontal .pd-gal__item{
  flex:none; aspect-ratio:auto;
  width:clamp(16.25rem,32vw,32.5rem); height:min(62vh,33.75rem);
}
.pd-gal.is-horizontal .pd-gal__item--tall{ height:min(78vh,42.5rem); width:clamp(14.375rem,26vw,26.875rem); }
.pd-gal.is-horizontal .pd-gal__item--wide{ width:clamp(20rem,44vw,45rem); height:min(54vh,28.125rem); }
.pd-gal.is-horizontal .pd-gal__end{ flex:none; padding:0 clamp(2rem,5vw,6rem); }
.pd-gal.is-horizontal .pd-gal__progress{
  display:block;
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(2rem,5vh,3.5rem);
  height:1px; background:rgba(246,243,236,.16);
}
.pd-gal.is-horizontal .pd-gal__progress i{
  display:block; height:100%; background:var(--paper);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}

/* ═══════════════ LOCATION ═══════════════ */
.pd-loc{ padding:var(--sec) 0; }
.pd-loc__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,5rem); align-items:center;
}
.pd-loc__text{ grid-column:1 / span 5; }
.pd-loc__text .pd-eyebrow{ margin-bottom:1.6rem; }
.pd-loc__addr{
  margin-top:2.2rem; font-family:var(--serif);
  font-size:1.15rem; line-height:1.6; color:var(--ink-70);
}
.pd-loc__list{ margin-top:clamp(2.5rem,4vw,3.5rem); border-top:1px solid var(--ink-08); }
.pd-loc__list li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.95rem 0; border-bottom:1px solid var(--ink-08);
  font-size:.95rem;
}
.pd-loc__list span{ color:var(--ink-70); }
.pd-loc__list i{
  flex:1; height:1px; background:var(--ink-08); align-self:center;
}
.pd-loc__list b{
  font-family:var(--serif); font-weight:400; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pd-loc__figure{
  grid-column:7 / span 6; overflow:hidden; border-radius:2px; aspect-ratio:3/4;
}
.pd-loc__figure img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); will-change:transform;
}

/* ═══════════════ REVIEWS ═══════════════ */
.pd-rev{
  background:var(--frond); color:var(--paper);
  padding:clamp(5rem,10vw,9rem) 0;
}
.pd-rev__inner{ text-align:center; display:grid; justify-items:center; gap:1.6rem; }
.pd-rev__score{
  font-family:var(--serif); font-size:var(--fs-mega); font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  line-height:.85; letter-spacing:-.05em;
}
.pd-rev__score .c{ display:inline-block; will-change:transform,opacity; }
.pd-rev__meta{ font-size:var(--fs-lede); color:var(--light-70); }
.pd-rev__meta b{ font-weight:400; color:var(--paper); font-variant-numeric:tabular-nums; }
.pd-rev__note{
  font-size:var(--fs-micro); letter-spacing:.08em;
  color:var(--light-48); max-width:52ch;
}

/* ═══════════════ BOOK ═══════════════ */
.pd-book{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(6rem,12vw,11rem) 0;
  color:var(--paper);
}
.pd-book__media{ position:absolute; inset:-12% 0; z-index:-2; }
.pd-book__media img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
}
.pd-book::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(12,14,10,.42), rgba(12,14,10,.78));
}
.pd-book__inner{ display:grid; justify-items:start; }
.pd-book__title{
  font-family:var(--serif); font-size:var(--fs-h2); font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  line-height:.94; letter-spacing:-.04em;
  max-width:14ch; margin:1.8rem 0 clamp(2.5rem,5vw,4rem);
}
.pd-form{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:1px; width:100%;
  background:rgba(246,243,236,.16);
  border:1px solid rgba(246,243,236,.16);
  border-radius:4px; overflow:hidden;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.pd-field{
  display:grid; gap:.35rem; padding:1.1rem 1.4rem;
  background:rgba(18,20,15,.5);
  transition:background-color .4s ease;
}
.pd-field:focus-within{ background:rgba(18,20,15,.78); }
.pd-field label{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--light-48);
}
.pd-field input,.pd-field select{
  background:none; border:0; padding:0; width:100%;
  font-family:var(--serif); font-size:1.05rem; font-weight:400;
  color:var(--paper); color-scheme:dark;
}
.pd-field input:focus,.pd-field select:focus{ outline:none; }
.pd-field select{ appearance:none; cursor:pointer; }
.pd-form__submit{
  border:0; border-radius:0; padding-inline:clamp(1.6rem,3vw,2.6rem);
  background:rgba(18,20,15,.5);
}
.pd-form__msg{
  margin-top:1.1rem; min-height:1.3em;
  font-size:var(--fs-micro); letter-spacing:.1em; color:var(--paper);
}
.pd-book__fine{
  margin-top:clamp(1.5rem,3vw,2.2rem);
  font-size:var(--fs-micro); letter-spacing:.1em; color:var(--light-48);
}

/* ═══════════════ FOOTER ═══════════════ */
.pd-foot{ background:var(--night); color:var(--paper); padding:clamp(4rem,8vw,7rem) 0 2rem; }
.pd-foot__top{
  display:grid; grid-template-columns:1fr 2fr; gap:clamp(2.5rem,5vw,5rem);
  padding-bottom:clamp(3rem,6vw,5rem); border-bottom:1px solid var(--light-18);
}
.pd-foot__mark{
  font-family:var(--serif); font-size:clamp(2.4rem,5.5vw,4.5rem);
  font-weight:300; line-height:.9; letter-spacing:-.04em;
}
.pd-foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.pd-foot__cols h4{
  font-size:.6rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase;
  color:var(--light-48); margin-bottom:1.2rem;
}
.pd-foot__cols p{ font-size:.92rem; color:var(--light-70); line-height:1.9; }
.pd-foot__cols nav{ display:grid; gap:.5rem; }
.pd-foot__cols nav a{
  font-size:.92rem; color:var(--light-70); width:max-content;
  transition:color .35s ease, transform .45s var(--e-out);
}
.pd-foot__cols nav a:hover{ color:var(--paper); transform:translateX(6px); }
.pd-foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:2rem;
  font-size:var(--fs-micro); letter-spacing:.1em; color:var(--light-48);
}

/* ═══════════════ REVEAL BASE ═══════════════ */
[data-fade]{ opacity:0; transform:translate3d(0,22px,0); }
[data-split] .l{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.14em; margin-bottom:-.14em;
}
[data-split] .w,[data-split] .c{ display:inline-block; will-change:transform; }
.pd-hero__title .w,.pd-h2 .w,.pd-story__chapter h2 .w,.pd-book__title .w{ transform:translate3d(0,110%,0); }
html.pd-preload [data-fade]{ opacity:0; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1100px){
  .pd-stay__grid{ grid-template-columns:1fr; }
  .pd-stay__figure{ grid-column:1/-1; aspect-ratio:3/2; }
  .pd-stay__text{ grid-column:1/-1; padding-top:0; }
  .pd-loc__grid{ grid-template-columns:1fr; }
  .pd-loc__text,.pd-loc__figure{ grid-column:1/-1; }
  .pd-loc__figure{ aspect-ratio:3/2; order:-1; }
  .pd-foot__top{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .pd-nav__links{ display:none; }
  .pd-nav__cta{ margin-left:auto; }
  .pd-burger{ display:block; }
  .pd-hero__stats{ grid-template-columns:repeat(2,1fr); gap:1rem 1.5rem; }
  .pd-scrollcue{ display:none; }
  .pd-story{ grid-template-columns:1fr; }
  .pd-story__media{ height:64svh; }
  /* The sticky image stays behind the first chapter on narrow screens, so
     every chapter carries its own scrim: full-bleed, and readable whether it
     lands on the photograph or on the section's near-black ground (where it
     is effectively invisible). Keeps all three chapters looking identical. */
  .pd-story__rail{ position:relative; z-index:2; }
  .pd-story__chapter{
    min-height:auto; max-width:none;
    margin-inline:calc(var(--gut) * -1);
    padding:clamp(2.75rem,9vw,4.5rem) var(--gut);
    background:rgba(12,14,10,.74);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
  /* Would otherwise sit half-occluded behind the scrim above it */
  .pd-story__index{ display:none; }
  .pd-rooms__grid{ grid-template-columns:1fr; gap:4rem; }
  .pd-room--feature{ margin-top:0; }
  .pd-head{ grid-template-columns:1fr; align-items:start; }
  .pd-head .pd-h2{ max-width:none; }
  .pd-head__note{ padding-bottom:0; }
  .pd-amen__list li{ grid-template-columns:2.5rem 1fr; gap:.6rem 1rem; }
  .pd-amen__list p{ grid-column:2; }
  .pd-form{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-form__submit{ grid-column:1/-1; padding-block:1.3rem; }
  .pd-foot__cols{ grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width: 560px){
  .pd-nav__cta{ display:none; }
  .pd-burger{ margin-left:auto; }
  .pd-hero__bar{ flex-direction:column; align-items:stretch; }
  .pd-form{ grid-template-columns:1fr; }
  .pd-gal__track{ grid-template-columns:1fr; }
  .pd-gal__item{ aspect-ratio:4/5; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-fade]{ opacity:1 !important; transform:none !important; }
  .pd-hero__title .w,.pd-h2 .w,.pd-story__chapter h2 .w,.pd-book__title .w{ transform:none !important; }
  .pd-statement .w{ opacity:1 !important; }
  .pd-hero__media img,.pd-stay__figure img,.pd-loc__figure img{ transform:none !important; }
  .pd-loader{ display:none !important; }
}