/* ==========================================================================
   Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   The jaali — the signature.
   A perforated stone screen over a photograph, whose apertures widen until
   the view is fully open.

   Fallback contract: the veil is only ever visible when JS has confirmed it
   can drive it (html.js) and the visitor has not asked for reduced motion.
   In every other case the photograph is simply, fully visible.
   -------------------------------------------------------------------------- */

.jaali {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;                      /* default: no veil */
  transition: opacity 1.4s var(--ease-out) 0.5s;
}

.jaali g {
  stroke: var(--ink-deep);
  stroke-width: 0;                 /* default: apertures fully open */
  transition: stroke-width 1.9s var(--ease-out);
}

/* Only once JS is present do we close the screen, so it can open.
   17 on a 48px module leaves the octagons open enough to read the photograph
   through the stone — the reveal is a thinning, not a curtain. */
.js .jaali { opacity: 1; }
.js .jaali g { stroke-width: 17; }

.js .jaali.is-open { opacity: 0; }
.js .jaali.is-open g { stroke-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .jaali { opacity: 0; }
  .js .jaali g { stroke-width: 0; }
}

/* --------------------------------------------------------------------------
   Photo frame — unifies mixed photography into one material story:
   slightly desaturated, warmed, and seated on the ink ground.
   -------------------------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--ink-deep);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.05) brightness(0.95);
  transition: transform 1.2s var(--ease-out), filter 0.8s var(--ease);
}

/* warm cast, so a mixed stock set reads as one house at one hour */
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(224, 164, 92, 0.08), rgba(16, 19, 18, 0.22));
}

.frame--tall { aspect-ratio: 3 / 4; }
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--pano { aspect-ratio: 21 / 9; }

a.frame:hover img,
.card:hover .frame img {
  transform: scale(1.045);
  filter: saturate(0.95) contrast(1.05) brightness(1);
}

.frame__cap {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  width: 100%;
  padding: var(--s-3);
  background: linear-gradient(to top, rgba(10, 12, 11, 0.85), transparent);
  color: var(--limewash);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-2);
}

/* --------------------------------------------------------------------------
   Buttons — the whole page points here
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.75rem;
  background: var(--amber);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.btn:hover {
  background: var(--amber-warm);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(224, 164, 92, 0.55);
}

.btn:active { transform: translateY(0); }

.btn__arrow {
  transition: transform 0.4s var(--ease);
  flex: none;
}

.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--rule);
  box-shadow: none;
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: none;
}

.btn--lg { padding: 1.2rem 2.25rem; font-size: 1rem; }

/* quiet text link with a drawn underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fg);
  font-size: var(--t-sm);
  font-weight: 500;
  padding-bottom: 0.3rem;
  position: relative;
}

.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: right;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}

.link:hover { color: var(--amber); }
.link:hover::after { opacity: 1; transform: scaleX(0.35); transform-origin: left; }

/* --------------------------------------------------------------------------
   Persistent booking bar — appears once the hero is past
   -------------------------------------------------------------------------- */

.bookbar {
  position: fixed;
  z-index: 90;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.85rem var(--gutter);
  background: rgba(10, 12, 11, 0.9);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--stone-line);
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out);
}

.bookbar.is-shown { transform: translateY(0); }

.bookbar__text { min-width: 0; }

.bookbar__name {
  font-family: var(--display);
  font-size: 1.0625rem;
  color: var(--limewash);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookbar__meta {
  font-size: var(--t-util);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 0.3rem;
}

.bookbar .btn { padding: 0.85rem 1.35rem; flex: none; }

@media (max-width: 560px) {
  .bookbar { padding-inline: 1rem; }
  .bookbar__text { display: none; }
  .bookbar .btn { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Cards — the spaces
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards--three { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; gap: var(--s-2); }

.card__body { display: flex; flex-direction: column; gap: 0.5rem; }

.card__title {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 350;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.card__note {
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 40ch;
}

/* --------------------------------------------------------------------------
   Facts / trust row
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

@media (min-width: 780px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact {
  background: var(--bg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fact__value {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 350;
  color: var(--fg);
  line-height: 1;
}

.fact__value .fact__unit { font-size: 0.5em; color: var(--muted); margin-left: 0.35em; }

/* --------------------------------------------------------------------------
   Included list
   -------------------------------------------------------------------------- */

.incl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 700px) { .incl { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-5); } }

.incl li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}

.incl li::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--stone);
  border: 1px solid var(--stone-line);
}

.on-light .quote {
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--rule);
}

.quote__stars { color: var(--amber); letter-spacing: 0.22em; font-size: 0.8rem; }

.quote__text {
  font-family: var(--display);
  font-size: 1.1875rem;
  font-weight: 350;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.quote__who {
  margin-top: auto;
  font-size: var(--t-util);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.acc { border-top: 1px solid var(--rule); }

.acc__item { border-bottom: 1px solid var(--rule); }

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: clamp(1.15rem, 2vw, 1.6rem) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 350;
  letter-spacing: -0.015em;
  color: var(--fg);
  transition: color 0.3s var(--ease);
}

.acc__btn:hover { color: var(--amber); }

.acc__sign {
  flex: none;
  position: relative;
  width: 14px; height: 14px;
}

.acc__sign::before,
.acc__sign::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--amber);
  transition: transform 0.45s var(--ease);
}

.acc__sign::before { width: 14px; height: 1px; }
.acc__sign::after { width: 1px; height: 14px; }

.acc__btn[aria-expanded='true'] .acc__sign::after { transform: scaleY(0); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}

.acc__panel[data-open='true'] { grid-template-rows: 1fr; }

.acc__panel > div { overflow: hidden; }

.acc__panel p {
  max-width: 60ch;
  padding-bottom: var(--s-3);
  color: var(--muted);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gal {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) { .gal { grid-template-columns: repeat(6, 1fr); } }

.gal__item { position: relative; grid-column: span 2; }
.gal__item button { display: block; width: 100%; cursor: zoom-in; padding: 0; }

@media (min-width: 900px) {
  .gal__item--wide { grid-column: span 4; }
  .gal__item--full { grid-column: span 6; }
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 8, 7, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  object-fit: contain;
}

.lightbox__cap {
  margin-top: var(--s-2);
  text-align: center;
  color: var(--ash);
}

.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--limewash);
  border: 1px solid var(--stone-line);
  border-radius: 50%;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.lightbox__close:hover { border-color: var(--amber); color: var(--amber); }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   .reveal--focus — the rare one.

   Reserved for the two pull-quotes that carry the emotional turn of the day
   arc (16:30 and the 21:30 close). Everything else on the site fades up in
   1s; these come into focus over --dur-slow, blur to sharp, with a shorter
   rise so the weight is in the settling rather than the travel. Applying it
   to a third element would spend the only thing that makes it read as a
   moment.

   Same specificity as .js .reveal, so it has to stay below it to win.
   -------------------------------------------------------------------------- */

.js .reveal--focus {
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal--focus.is-in { opacity: 1; transform: none; filter: blur(0); }

/* The .reveal reset above restores opacity and transform but knows nothing
   about filter, which would leave these two permanently soft. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal--focus { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   Grain — a very quiet film texture over dark grounds
   -------------------------------------------------------------------------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Notice — flags placeholder content that must be replaced before launch
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-top: var(--s-3);
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--rule);
  border-radius: 2px;
  font-size: var(--t-util);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}