/* ==========================================================================
   HIMALAYAN OBSERVATORY KAUSANI
   responsive.css — mobile-first. Loaded after base/site/home/pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE FIRST — below 720px, every 12-column composition collapses
   -------------------------------------------------------------------------- */

/* --- hero --- */
.hero__foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
.hero__cue { display: none; }
/* the telescope is a two-column composition -- below desktop it would sit
   straight across the headline */
.hero__object { display: none; }
.hero__title { letter-spacing: -0.02em; }

/* The mega headline's hard minimum (3.5rem) overflowed narrow phones --
   "OBSERVATORY" clipped off the right edge. Scale it to the viewport here so
   the whole word always fits, with a modest ceiling for small tablets. */
@media (max-width: 720px) {
  .hero__title {
    font-size: clamp(1.9rem, 11.4vw, 3.4rem);
    line-height: 0.96;
    letter-spacing: -0.015em;
  }
}

/* A `white-space: nowrap` button has a min-content width, and as a grid
   item with the default `min-width:auto` it forces its whole track to that
   width -- which pushed this grid to 419px at 360, 390 and 430 alike. Let
   long CTA labels wrap on narrow screens and stop tracks inheriting it. */
.btn { white-space: normal; }
.hero__foot > *,
.hero__actions,
.book__actions,
.closer__in > * { min-width: 0; }

/* --- experience --- */
.exp__copy, .exp__art,
.moment__art, .moment__copy,
.pillar__art, .pillar__copy,
.walk__copy, .walk__stage,
.scope__copy, .scope__stage,
.book__copy, .book__card { grid-column: 1 / -1; }

.moment:nth-child(even) .moment__art,
.pillar:nth-child(even) .pillar__art { order: 0; grid-column: 1 / -1; }
.moment:nth-child(even) .moment__copy,
.pillar:nth-child(even) .pillar__copy { order: 0; grid-column: 1 / -1; }

/* layer stack flattens — no 3D on small screens */
.exp__main { transform: none; }
.exp__art:hover .exp__main { transform: none; }
.exp__inset { display: none; }
.exp__art::before { inset: 4% -2% -2% 4%; }
.exp__art { perspective: none; }

.pillar__frame { transform: none; }
.pillar__art:hover .pillar__frame { transform: none; }

.scope__frame { transform: none; }
.scope__stage:hover .scope__frame { transform: none; }
.scope__stage { perspective: none; }

/* --- moments --- */
.moments__intro .display,
.moments__intro .lede { grid-column: 1 / -1; }
.moment { padding-block: clamp(2.5rem, 12vw, 4.5rem); }

/* --- timeline --- */
.tl__stage { grid-template-columns: 1fr; gap: var(--s-md); }
.tl__body, .tl__plate { grid-column: 1 / -1; }
.tl__plate {
  aspect-ratio: 16 / 10;
  order: -1;                 /* image first on small screens */
  max-height: 40vh;
}
.tl__rail { gap: 0.4rem; }
.tl__pin { min-height: auto; }
.tl__in { padding-block: clamp(3rem, 14vw, 5rem); }

/* --- walk --- */
.walk__stage { aspect-ratio: 1 / 1; min-height: 260px; }

/* --- gallery --- */
.shots__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.shot, .shot--wide, .shot--tall { grid-column: span 6; }

/* --- seasons --- */
.seasons { grid-template-columns: 1fr; }

/* --- footer --- */
.foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
.foot__brand { grid-column: 1 / -1; }
.foot__name { font-size: var(--fs-2xl); }

/* --- nav --- */
.nav__links { display: none; }
.nav__cta { display: none; }
.nav__burger { display: grid; }
.nav__in {
  grid-template-columns: auto 1fr auto;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
}
.nav__name b { font-size: 0.72rem; letter-spacing: 0.1em; }
.nav__name span { font-size: 0.5rem; }
.nav__mark { width: 48px; height: 34px; }

/* --- page hero --- */
.phero { padding-block: clamp(7rem, 22vh, 11rem) clamp(2rem, 6vw, 4rem); }
.phero__title { font-size: var(--fs-3xl); }

/* --- faq --- */
/* no serial-number column any more: question fills the row, toggle sits at
   the end, and the answer aligns flush with the question instead of being
   indented to clear a number that is no longer there. */
.faq__q { grid-template-columns: 1fr auto; gap: var(--s-sm); }
.faq__a p { margin-left: 0; }

/* --- lightbox --- */
.lightbox__nav { gap: var(--s-sm); }

/* --------------------------------------------------------------------------
   480px — large phone
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .shots__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .shot { grid-column: span 3; }
  .shot--wide { grid-column: span 6; }
  .shot--tall { grid-column: span 3; }
  .hero__actions .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   720px — large phone landscape / small tablet
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* restore the layered image composition, but gently */
  .exp__art { perspective: 1400px; }
  .exp__main { transform: rotateY(-6deg); }
  .exp__inset--a { display: block; width: 40%; }
  .exp__inset--b { display: block; width: 34%; }

  .pillar__frame { transform: rotateY(6deg); }
  .scope__frame { transform: rotateY(-7deg); }
}

/* --------------------------------------------------------------------------
   1000px — desktop: floating nav returns, grids open to full compositions
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .nav__cta { display: block; }
  .nav__burger { display: none; }
  .nav__sheet { display: none; }

  /* single column on desktop too: the CTA label is long and `white-space:
     nowrap`, so an `auto` track claimed ~650px and collapsed the intro to
     122px, which in turn stretched the hero to double viewport height */
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
  .hero__cue { display: grid; }
  /* telescope flies in on desktop (hidden on mobile so it does not cover the type) */
  .hero__object { display: block; }

  .exp__copy { grid-column: 1 / span 5; }
  .exp__art { grid-column: 6 / span 7; }
  .exp__main { transform: rotateY(-7deg); }
  .exp__inset--a { display: block; width: 46%; }
  .exp__inset--b { display: block; width: 40%; }

  .moments__intro .display { grid-column: 1 / span 7; }
  .moments__intro .lede { grid-column: 9 / span 4; }

  .moment__art { grid-column: 1 / span 7; }
  .moment__copy { grid-column: 9 / span 4; }
  .moment:nth-child(even) .moment__art { order: 2; grid-column: 6 / span 7; }
  .moment:nth-child(even) .moment__copy { order: 1; grid-column: 1 / span 4; }

  .pillar__art { grid-column: 1 / span 7; }
  .pillar__copy { grid-column: 9 / span 4; }
  .pillar:nth-child(even) .pillar__art { order: 2; grid-column: 6 / span 7; }
  .pillar:nth-child(even) .pillar__copy { order: 1; grid-column: 1 / span 4; }
  .pillar__frame { transform: rotateY(7deg) scale(0.98); }
  .pillar__art:hover .pillar__frame { transform: rotateY(0deg) scale(1); }

  .tl__stage { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tl__body { grid-column: 1 / span 8; }
  .tl__plate { grid-column: 10 / span 3; order: 0; aspect-ratio: 3 / 4; max-height: none; }
  .tl__pin { min-height: 100svh; }

  .walk__copy { grid-column: 1 / span 5; }
  .walk__stage { grid-column: 6 / span 7; aspect-ratio: 4 / 3; min-height: 340px; }

  .scope__copy { grid-column: 1 / span 4; }
  .scope__stage { grid-column: 5 / span 8; perspective: 1600px; }
  .scope__frame { transform: rotateY(-9deg) rotateX(3deg); }

  .book__copy { grid-column: 1 / span 6; }
  .book__card { grid-column: 8 / span 5; }

  .shots__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .shot { grid-column: span 4; }
  .shot--wide { grid-column: span 6; }
  .shot--tall { grid-column: span 3; }

  .foot__grid { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   1280px — desktop large
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .moment__art { grid-column: 1 / span 7; }
  .moment__copy { grid-column: 9 / span 4; }

  .book__copy { grid-column: 1 / span 6; }
  .book__card { grid-column: 8 / span 5; }
}

/* --------------------------------------------------------------------------
   1600px — large desktop: widen the runway, keep the measure
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --wide: 1680px; }
  .wrap { padding-inline: clamp(3rem, 5vw, 6rem); }
  .foot__name { font-size: var(--fs-4xl); }
  .lede { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   LANDSCAPE PHONES — reclaim height
   -------------------------------------------------------------------------- */
@media (max-width: 999px) and (orientation: landscape) {
  .hero { min-height: 100svh; }
  .hero__in { padding-bottom: 2rem; }
  .tl__pin { min-height: 100svh; }
  .foot__name { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
   HOVER GUARD — never leave sticky hover states on touch
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .shot:hover { transform: none; }
  .season:hover { transform: none; }
  .exp__art:hover .exp__main,
  .pillar__art:hover .pillar__frame,
  .scope__stage:hover .scope__frame { transform: none; }
  .lightbox__close:hover { transform: none; }
  .foot__social a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .nav, .cursor, [data-loader], .to-top, .nav__sheet { display: none !important; }
  body { background: #fff; color: #000; }
  .frame, .plate { break-inside: avoid; }
}