/*
Theme Name: One Nest
Author: One Nest
Description: A cinematic editorial block theme for a private stay in Dehradun.
Version: 1.1.1
Requires at least: 7.1
Requires PHP: 8.1
Text Domain: one-nest
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --onenest-paper: #f2efe8;
  --onenest-charcoal: #1e211d;
  --onenest-moss: #596050;
  --onenest-clay: #a26f55;
  --onenest-mist: #c9ccc5;
  --onenest-night: #161817;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--onenest-paper);
  color: var(--onenest-charcoal);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--onenest-clay);
  outline-offset: 4px;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--onenest-paper);
  color: var(--onenest-charcoal);
  clip: auto !important;
  clip-path: none;
  height: auto;
  left: 1rem;
  padding: 0.8rem 1rem;
  top: 1rem;
  width: auto;
  z-index: 10000;
}

.site-header-shell {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgb(242 239 232 / 88%);
  box-sizing: border-box;
  color: var(--onenest-charcoal);
  display: flex;
  height: 72px;
  inset: 0 0 auto;
  justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 4.5rem);
  position: fixed;
  z-index: 40;
}

.brand-lockup { align-items: center; color: inherit; display: inline-flex; text-decoration: none; }
.brand-lockup__wordmark { height: auto; width: clamp(160px, 14vw, 202px); }

.site-menu {
  align-items: center;
  display: flex;
  font-size: 0.82rem;
  gap: clamp(1rem, 2.2vw, 2.4rem);
  letter-spacing: 0.025em;
}

.site-menu a { color: inherit; position: relative; text-decoration: none; }
.site-menu a:not(.nav-book)::after {
  background: currentColor;
  bottom: -0.35rem;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms cubic-bezier(.16, 1, .3, 1);
  width: 100%;
}
.site-menu a:hover::after,
.site-menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-book { background: var(--onenest-moss); border-radius: 12px; color: var(--onenest-paper) !important; padding: 0.78rem 1.1rem; }
.menu-toggle { background: transparent; border: 0; color: inherit; display: none; font: inherit; padding: 0.7rem; }
.site-footer { padding: clamp(5rem, 10vw, 9rem) clamp(1rem, 5vw, 5rem) 2rem; }
.footer-brand { align-items: flex-end; margin-bottom: 3rem; }
.footer-contact { gap: 1.5rem; margin-top: 2rem; }

@media (max-width: 820px) {
  .brand-lockup__wordmark { width: 152px; }
  .menu-toggle { display: inline-flex; }
  .site-menu {
    align-items: flex-start;
    background: var(--onenest-paper);
    box-sizing: border-box;
    flex-direction: column;
    font-family: "One Nest Serif", Georgia, serif;
    font-size: clamp(2rem, 10vw, 4rem);
    gap: 0.5rem;
    inset: 72px 0 auto;
    min-height: calc(100dvh - 72px);
    padding: 3rem 1rem;
    position: fixed;
  }
  .site-menu[hidden] { display: none; }
  .nav-book { font-family: "One Nest Sans", Arial, sans-serif; font-size: 0.9rem; margin-top: 1.5rem; }
  .has-menu-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.inner-hero { color: var(--onenest-paper); min-height: 100dvh; position: relative; }
.inner-hero > img { height: 100dvh; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.inner-hero::after { background: linear-gradient(0deg, rgb(22 24 23 / 72%), rgb(22 24 23 / 5%) 70%); content: ""; inset: 0; position: absolute; }
.inner-hero > div { bottom: clamp(2rem, 7vw, 6rem); left: clamp(1rem, 7vw, 7rem); max-width: 900px; position: absolute; right: 1rem; z-index: 2; }
.inner-hero h1, .plain-hero h1 { font-size: clamp(4rem, 8vw, 9rem); letter-spacing: -0.04em; margin: 0; }
.inner-hero > div > p:last-child { font-size: 1.15rem; max-width: 42ch; }
.editorial-copy { min-height: 80dvh; }
.room-story { align-items: center; display: grid; gap: clamp(3rem, 9vw, 10rem); grid-template-columns: 1.1fr .9fr; }
.room-story > img { border-radius: 12px; width: 100%; }
.room-story h2 { font-size: clamp(3rem, 5vw, 6rem); }
.room-story h3 { font-size: 2rem; margin-top: 4rem; }
.image-pause { color: var(--onenest-paper); min-height: 100dvh; position: relative; }
.image-pause img { height: 100dvh; object-fit: cover; width: 100%; }
.image-pause::after { background: rgb(22 24 23 / 32%); content: ""; inset: 0; position: absolute; }
.image-pause p { bottom: 10%; font-family: "One Nest Serif", Georgia, serif; font-size: clamp(2.5rem, 5vw, 5rem); left: 8%; margin: 0; max-width: 14ch; position: absolute; z-index: 2; }

.plain-hero { box-sizing: border-box; min-height: 72dvh; padding: clamp(9rem, 18vw, 16rem) clamp(1rem, 8vw, 8rem) 5rem; }
.plain-hero > p:last-child { font-size: 1.2rem; max-width: 42ch; }
.stay-image { padding: 0 clamp(1rem, 4vw, 4rem); }
.stay-image img { aspect-ratio: 16/8; border-radius: 12px; object-fit: cover; width: 100%; }
.stay-details { display: grid; gap: clamp(4rem, 9vw, 10rem); grid-template-columns: .8fr 1.2fr; }
.stay-details h2 { font-size: clamp(3rem, 5vw, 5.5rem); }
.stay-details__groups { display: grid; gap: 3.5rem; grid-template-columns: repeat(2, 1fr); }
.stay-details__groups h3 { font-size: 2rem; margin-bottom: 1rem; }
.house-philosophy { align-items: center; background: #e6e7e1; display: flex; justify-content: center; min-height: 70dvh; padding: 4rem 1rem; }
.house-philosophy p { font-family: "One Nest Serif", Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 6rem); line-height: 1.05; max-width: 19ch; text-align: center; }

.place-intro { min-height: 80dvh; }
.place-rhythm { display: grid; gap: clamp(3rem, 7vw, 7rem); grid-template-columns: repeat(3, 1fr); }
.place-rhythm article:nth-child(2) { margin-top: 8rem; }
.place-rhythm h2 { font-size: clamp(2.5rem, 3.5vw, 4rem); }
.local-note { background: var(--onenest-moss); color: var(--onenest-paper); padding: clamp(6rem, 13vw, 12rem) clamp(1rem, 10vw, 10rem); }
.local-note h2 { font-size: clamp(4rem, 8vw, 8rem); margin: 0 0 2rem; }
.local-note p { max-width: 46ch; }

.journal-page { padding: clamp(10rem, 17vw, 15rem) clamp(1rem, 5vw, 5rem) 7rem; }
.journal-page > h1 { font-size: clamp(4rem, 7vw, 7.5rem); margin-bottom: 6rem; }
.journal-page .wp-block-post-template { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; }
.journal-page .wp-block-post-featured-image img { border-radius: 12px; }
.journal-page .wp-block-post-title { font-size: clamp(2rem, 3vw, 3.5rem); }
.journal-page a { color: inherit; }
.journal-empty { min-height: 40dvh; padding: 5rem 0; }
.single-note { padding: clamp(10rem, 16vw, 14rem) 1rem 8rem; }
.single-note .wp-block-post-title { font-size: clamp(3.5rem, 7vw, 7rem); }
.single-note .wp-block-post-featured-image { margin: 4rem auto; max-width: 1440px; }
.single-note .wp-block-post-featured-image img { border-radius: 12px; }
.not-found { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 80dvh; padding: 8rem 1rem; }
.not-found h1 { font-size: clamp(4rem, 8vw, 8rem); }

@media (max-width: 767px) {
  .room-story, .stay-details, .place-rhythm { grid-template-columns: 1fr; }
  .stay-details__groups { grid-template-columns: 1fr; }
  .place-rhythm article:nth-child(2) { margin-top: 0; }
  .journal-page .wp-block-post-template { grid-template-columns: 1fr; }
  .inner-hero h1, .plain-hero h1 { font-size: 3.8rem; }
  .stay-image img { aspect-ratio: 4/5; }
}

.book-hero { box-sizing: border-box; min-height: 70dvh; padding: clamp(10rem, 18vw, 16rem) clamp(1rem, 9vw, 9rem) 5rem; }
.book-hero h1 { font-size: clamp(4rem, 9vw, 9rem); margin: 0 0 2rem; }
.book-hero > p:last-child { font-size: 1.2rem; max-width: 42ch; }
.book-form-section { padding: 0 1rem clamp(7rem, 15vw, 14rem); }
.enquiry-wrap { margin: 0 auto; max-width: 900px; }
.enquiry-form { display: grid; gap: 1.5rem; }
.form-row { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: .55rem; }
.field label { font-size: .78rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.field label span { color: #656a62; font-weight: 400; text-transform: none; }
.field input, .field textarea {
  appearance: none;
  background: rgb(255 255 255 / 28%);
  border: 1px solid #7b8076;
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--onenest-charcoal);
  font: inherit;
  min-height: 54px;
  padding: .9rem 1rem;
  width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--onenest-moss); box-shadow: 0 0 0 3px rgb(89 96 80 / 24%); outline: 0; }
.field-error { color: #79432f; font-size: .85rem; margin: 0; }
.enquiry-status { border-radius: 12px; margin: 0 0 2rem; padding: 1.5rem; }
.enquiry-status h2 { font-size: 2rem; margin: 0 0 .5rem; }
.enquiry-status--success { background: #dfe5d9; }
.enquiry-status--error { background: #eee0d7; }
.enquiry-honeypot { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }
.enquiry-form button { border: 0; cursor: pointer; justify-self: start; }
.enquiry-form button:disabled { cursor: wait; opacity: .68; }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .book-hero h1 { font-size: 4rem; }
}

main { overflow: clip; }
img { display: block; height: auto; max-width: 100%; }
.section { box-sizing: border-box; padding: clamp(6rem, 12vw, 11rem) clamp(1rem, 6vw, 6rem); }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; margin: 0 0 1.5rem; text-transform: uppercase; }
.button { align-items: center; border-radius: 12px; display: inline-flex; font-size: 0.82rem; font-weight: 650; justify-content: center; letter-spacing: 0.05em; min-height: 48px; padding: 0 1.35rem; text-decoration: none; transition: transform 300ms cubic-bezier(.16, 1, .3, 1), background-color 300ms ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button--light { background: var(--onenest-paper); color: var(--onenest-charcoal); }
.button--dark { background: var(--onenest-charcoal); color: var(--onenest-paper); }
.text-link { color: var(--onenest-charcoal); display: inline-block; font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em; padding-bottom: 0.25rem; text-decoration: none; border-bottom: 1px solid currentColor; }
.text-link--light { color: var(--onenest-paper); }

.hero { color: var(--onenest-paper); min-height: 100dvh; overflow: hidden; position: relative; }
.hero__media { height: 100dvh; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.hero__shade { background: linear-gradient(90deg, rgb(22 24 23 / 70%) 0%, rgb(22 24 23 / 28%) 58%, rgb(22 24 23 / 12%) 100%); inset: 0; position: absolute; }
.hero__content { align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; min-height: 100dvh; padding: 7rem clamp(1rem, 6vw, 6rem) clamp(2rem, 7vw, 5rem); position: relative; z-index: 2; }
.hero__place { font-size: 0.72rem; letter-spacing: 0.18em; margin: 0 0 2rem; text-transform: uppercase; }
.hero__logo { height: auto; margin-bottom: 1rem; width: clamp(11rem, 20vw, 18rem); }
.hero h1 { font-size: clamp(3rem, 6.8vw, 6.8rem); letter-spacing: -0.035em; margin: 0; max-width: 850px; }
.hero__actions { align-items: center; display: flex; gap: 1.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.intro-curtain { align-items: center; background: var(--onenest-paper); display: flex; inset: 0; justify-content: center; opacity: 0; pointer-events: none; position: fixed; visibility: hidden; z-index: 100; }
.intro-curtain img { width: min(48vw, 320px); }
.is-intro-playing .intro-curtain { animation: curtain-exit 1.8s cubic-bezier(.76, 0, .24, 1) forwards; opacity: 1; visibility: visible; }
.is-intro-playing .hero__media { animation: hero-arrive 1.8s cubic-bezier(.16, 1, .3, 1) both; }
.is-intro-playing .hero__content { animation: content-arrive 1s 900ms cubic-bezier(.16, 1, .3, 1) both; }

@keyframes curtain-exit {
  0%, 38% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 100% 0); opacity: 1; visibility: hidden; }
}
@keyframes hero-arrive { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

.intro-section { min-height: 90dvh; padding-left: clamp(1rem, 13vw, 13rem); }
.intro-statement { font-family: "One Nest Serif", Georgia, serif; font-size: clamp(2.3rem, 5.2vw, 5.4rem); letter-spacing: -0.035em; line-height: 1.04; margin: 0; max-width: 1180px; }
.intro-aside { color: var(--onenest-moss); margin: 3rem 0 0 55%; }

.day-story { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .72fr); }
.day-story__stage { height: 100dvh; position: sticky; top: 0; }
.day-story__image { inset: 0; margin: 0; opacity: 0; position: absolute; transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 1200ms cubic-bezier(.16, 1, .3, 1); transform: scale(1.035); }
.day-story__image.is-active { opacity: 1; transform: scale(1); }
.day-story__image img { height: 100%; object-fit: cover; width: 100%; }
.day-story__moments { background: #e7e9e4; padding: 0 clamp(2rem, 5vw, 5.5rem); }
.day-story__heading { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 70dvh; }
.day-story__heading h2 { font-size: clamp(3rem, 5vw, 5.5rem); margin: 0; }
.day-moment { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; min-height: 82dvh; opacity: .45; transition: opacity 500ms ease; }
.day-moment.is-active { opacity: 1; }
.day-moment h3 { font-size: clamp(2.5rem, 4vw, 4.5rem); margin: 0 0 1rem; }
.day-moment p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); max-width: 30ch; }

.house-story__lead { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: clamp(3rem, 8vw, 7rem); }
.house-story__lead h2 { font-size: clamp(3rem, 6.4vw, 7rem); margin: 0; }
.house-story__wide img { aspect-ratio: 16/8.5; border-radius: 12px; object-fit: cover; width: 100%; }
.house-story__details { align-items: center; display: grid; gap: clamp(2rem, 7vw, 8rem); grid-template-columns: .85fr 1fr; margin-top: clamp(4rem, 10vw, 10rem); }
.house-story__details figure { margin: 0; }
.house-story__details img { aspect-ratio: 4/5; border-radius: 12px; object-fit: cover; }
.house-story__copy { max-width: 510px; }
.house-story__copy h3 { font-size: clamp(2.5rem, 4.4vw, 5rem); margin: 0 0 2rem; }

.amenities { background: #e6e7e1; display: grid; gap: clamp(4rem, 10vw, 11rem); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.amenities h2 { font-size: clamp(3rem, 5vw, 5.8rem); margin: 0 0 2rem; }
.amenities__list { display: grid; gap: 2.5rem; margin: 0; }
.amenities__list div { display: grid; gap: 1rem; grid-template-columns: .8fr 1.2fr; }
.amenities__list dt { font-family: "One Nest Serif", Georgia, serif; font-size: 1.5rem; }
.amenities__list dd { color: #4d514a; margin: 0; }

.location-story { color: var(--onenest-paper); min-height: 100dvh; overflow: hidden; position: relative; }
.location-story > img { height: 110dvh; inset: -5dvh 0; object-fit: cover; position: absolute; width: 100%; }
.location-story::after { background: linear-gradient(90deg, rgb(22 24 23 / 74%), rgb(22 24 23 / 10%)); content: ""; inset: 0; position: absolute; }
.location-story__copy { display: flex; flex-direction: column; justify-content: center; min-height: 100dvh; padding: 5rem clamp(1rem, 8vw, 8rem); position: relative; z-index: 2; }
.location-story h2 { font-size: clamp(3.2rem, 6vw, 6.8rem); margin: 0 0 2rem; }
.location-story__copy > p:not(.eyebrow) { font-size: 1.15rem; max-width: 38ch; }
.location-story .text-link { margin-top: 2rem; width: max-content; }

.notes-preview h2 { font-size: clamp(3.4rem, 6vw, 6rem); margin: 0 0 clamp(3rem, 7vw, 6rem); }
.notes-query .wp-block-post-template { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: 1.3fr .85fr .85fr; list-style: none; padding: 0; }
.notes-query .wp-block-post-featured-image img { border-radius: 12px; object-fit: cover; width: 100%; }
.notes-query .wp-block-post-title { font-size: clamp(1.8rem, 2.6vw, 3rem); margin-top: 1.5rem; }
.notes-query .wp-block-post-title a { color: inherit; text-decoration: none; }

.booking-invitation { align-items: center; display: flex; flex-direction: column; min-height: 85dvh; justify-content: center; padding: 6rem 1rem; text-align: center; }
.booking-invitation h2 { font-size: clamp(4rem, 9vw, 9rem); margin: .5rem 0 1.5rem; }
.booking-invitation > p { max-width: 45ch; }
.booking-invitation .button { margin-top: 2rem; }

[data-reveal] { opacity: 0; transform: translateY(2.5rem); transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 900ms cubic-bezier(.16, 1, .3, 1); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  [data-parallax-media] {
    animation: one-nest-parallax linear both;
    animation-range: entry 0% exit 100%;
    animation-timeline: view();
  }
  @keyframes one-nest-parallax { from { transform: translateY(-2.5%); } to { transform: translateY(2.5%); } }
}

@media (max-width: 767px) {
  .section { padding: 5rem 1rem; }
  .hero__content { padding-inline: 1rem; }
  .hero__shade { background: linear-gradient(0deg, rgb(22 24 23 / 74%), rgb(22 24 23 / 5%) 70%); }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .intro-section { min-height: auto; padding: 7rem 1rem; }
  .intro-aside { margin-left: 0; }
  .day-story { display: block; }
  .day-story__stage { display: none; }
  .day-story__moments { padding: 5rem 1rem; }
  .day-story__heading, .day-moment { min-height: auto; padding: 4rem 0; }
  .day-moment { opacity: 1; }
  .day-moment::before { background-position: center; background-size: cover; border-radius: 12px; content: ""; display: block; height: 62vw; margin-bottom: 2rem; width: 100%; }
  .day-moment[data-day-panel="0"]::before { background-image: url("assets/images/morning-tea.jpg"); }
  .day-moment[data-day-panel="1"]::before { background-image: url("assets/images/afternoon-reading.jpg"); }
  .day-moment[data-day-panel="2"]::before { background-image: url("assets/images/evening-table.jpg"); }
  .day-moment[data-day-panel="3"]::before { background-image: url("assets/images/night-bedroom.jpg"); }
  .house-story__lead { align-items: flex-start; flex-direction: column; gap: 2rem; }
  .house-story__wide img { aspect-ratio: 4/5; }
  .house-story__details, .amenities { grid-template-columns: 1fr; }
  .amenities__list div { grid-template-columns: 1fr; gap: .4rem; }
  .location-story h2 { font-size: 3.3rem; }
  .notes-query .wp-block-post-template { grid-template-columns: 1fr; }
  .booking-invitation { min-height: 70dvh; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  .day-story__image { transition: none; }
  .intro-curtain { display: none; }
  .hero__media, .hero__content, [data-parallax-media] { animation: none !important; transform: none !important; }
}