/* NextRooms landing page, direction 01 redo, version C: alternating.
   One idea: photo-and-text pairs on cream, each photo bleeding to the opposite page edge from
   the one before. Text stays inside the container at every width. Everything else is quiet.
   Tokens come from ../shared/tokens.css, photo treatment from ../shared/photos.css. */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  padding: .75rem 1rem; background: var(--green); color: var(--cream);
  font-weight: 600; text-decoration: none; z-index: 20; border-radius: 3px;
}
.skip:focus { top: .5rem; }

:root {
  --pad: clamp(2.5rem, 5vw, 4.5rem);
}

.wide {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- type */
.title {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--green);
}
.title--cream { color: var(--cream); }
.body { max-width: var(--measure); }
.title + .body, .title + .body + .body { margin-top: 1.25rem; }

.h1 {
  font-size: var(--h1, 1.875rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.h1 em { font-style: normal; color: var(--gold-display); }

.tagline { font-weight: 500; font-size: 1.0625rem; color: var(--ink-muted); margin-bottom: 1.25rem; }

.close {
  margin-top: 1.5rem;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--gold-display);
  max-width: 18ch;
}

/* ---------------------------------------------------------------- bar */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-deep);
}
.bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.bar__logo { display: inline-flex; align-items: center; min-height: 44px; }
.bar__logo img { display: block; width: 87px; height: 40px; }
.bar__right { display: flex; align-items: center; gap: 1.25rem; }

.lang {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: 0 .5rem;
  border: 0; background: none; font: inherit; font-size: .9375rem; font-weight: 500;
  color: var(--ink-muted); cursor: pointer; letter-spacing: .02em;
}
.lang [data-lang].is-active { color: var(--green); font-weight: 600; }
.lang:hover { color: var(--green); }

/* .bar .btn--bar outranks .btn below, which would otherwise turn display back on at phone widths. */
.bar .btn--bar {
  display: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}
@media (min-width: 900px) { .bar .btn--bar { display: inline-flex; } }
.bar.is-cta .btn--bar { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------------------------------------------------------------- controls */
/* 3px, tighter than the shared --radius on purpose: this direction's buttons are squarer */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem 1.5rem;
  border-radius: 3px; border: 0;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.3;
  text-decoration: none; text-align: center;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn--gold { background: var(--gold); color: var(--green-deep); }
.btn--gold:hover { background: var(--gold-on-green); }

.textlink {
  display: inline-flex; align-items: center;
  min-height: 48px;
  font-weight: 600; font-size: 1rem;
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
  transition: text-decoration-color var(--dur) var(--ease-out), text-decoration-thickness var(--dur) var(--ease-out);
}
.textlink:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.textlink--cream { color: var(--cream); }

.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; margin-top: 2rem; }

/* ---------------------------------------------------------------- pairs */
.pair { display: block; }
.pair__text { padding: var(--pad) var(--gutter); }

.photo { width: 100%; aspect-ratio: 4 / 3; }
.photo img { width: 100%; height: 100%; }
.photo--hero img { object-position: 50% 55%; filter: saturate(.9) contrast(.97); }
.photo--lounge img { object-position: 50% 45%; }
.photo--corridor img { object-position: 50% 50%; }
.photo--lake img { object-position: 62% 50%; filter: saturate(.72) contrast(.97); }

/* Scroll-driven parallax, CSS only. The figure clips (photos.css .ph); only the img pans, scaled so the
   6% drift never shows an edge. heroIntro (main.js) fades the figure, not the img, so the two never fight.
   Browsers without scroll-driven animations show the still crop, which is invisible as a fallback. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* overflow: hidden (photos.css .ph) makes the figure a scroll container, and view() would then
       measure the img against its own figure, which never scrolls. clip clips without becoming one. */
    .photo { overflow: clip; }
    .photo img { animation: nrParallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes nrParallax { from { transform: scale(1.12) translateY(-6%); } to { transform: scale(1.12) translateY(6%); } }

:is(.pair, .wide) + :is(.pair, .wide) { margin-top: var(--section); }

@media (min-width: 900px) {
  .pair {
    display: grid;
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      repeat(12, minmax(0, calc(var(--container) / 12)))
      minmax(var(--gutter), 1fr);
    align-items: stretch;
  }
  .pair__text { padding: var(--pad) 0; align-self: center; }
  .photo { aspect-ratio: auto; height: 100%; }

  /* hero: photo from the left edge to line 9, 56 percent at 1440; text in the last five tracks */
  .pair--hero { min-height: 80svh; }
  .pair--hero .photo { grid-column: 1 / 9; grid-row: 1; }
  .pair--hero .pair__text { grid-column: 9 / 14; grid-row: 1; padding-left: clamp(2rem, 4vw, 3.5rem); }

  /* the others: photo to the centre line, text in the other six tracks */
  .pair--right .photo { grid-column: 8 / 15; grid-row: 1; }
  .pair--right .pair__text { grid-column: 2 / 8; grid-row: 1; padding-right: clamp(2.5rem, 5vw, 4.5rem); }
  .pair--left .photo { grid-column: 1 / 8; grid-row: 1; }
  .pair--left .pair__text { grid-column: 8 / 14; grid-row: 1; padding-left: clamp(2.5rem, 5vw, 4.5rem); }

  .pair--left, .pair--right { min-height: clamp(26rem, 55vh, 38rem); }
}

/* hero */
.hero__text { --h1: clamp(2.125rem, 1.6rem + 2.2vw, 2.5rem); }
@media (min-width: 900px) { .hero__text { --h1: clamp(1.75rem, .6rem + 1.85vw, 2.25rem); } }

/* problem + solution */
.solution { margin-top: 3rem; }

/* closed space */
.closed .ico { display: block; width: 28px; height: 28px; color: var(--gold-text); margin-bottom: 1rem; }
.closed__title { font-size: var(--step-3); font-weight: 600; line-height: 1.25; max-width: 20ch; }
.closed__title + .body { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- wide text sections */

/* 3 R's */
.slogan {
  margin-top: 2.5rem;
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.3;
}
/* the joins before each dot are non-breaking, so a line can only break after a dot */
@media (max-width: 639px) { .slogan { font-size: 1.5rem; } }
.rs { display: grid; gap: 2rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--cream-deep); }
@media (min-width: 640px) { .rs { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.r__n { display: block; font-size: .9375rem; font-weight: 600; color: var(--gold-text); }
.r__title { font-size: var(--step-2); font-weight: 600; line-height: 1.3; margin-top: .25rem; }
.r__body { margin-top: .5rem; color: var(--ink-muted); }

/* how it works */
.steps { display: grid; gap: 1.5rem; margin-top: 2rem; }
.step { padding-top: 1.25rem; border-top: 1px solid var(--cream-deep); }
.step__n { display: block; font-size: .9375rem; font-weight: 600; color: var(--gold-text); }
.step__title { font-size: var(--step-2); font-weight: 600; line-height: 1.3; margin-top: .25rem; }
.step__body { margin-top: .5rem; color: var(--ink-muted); }
@media (min-width: 640px) and (max-width: 1199px) {
  .step { display: grid; grid-template-columns: 4rem 1fr; column-gap: 1rem; }
  .step__n { grid-row: 1 / 3; padding-top: .3rem; }
  .step__title { margin-top: 0; }
}
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(5, 1fr); gap: 2rem; } }

/* benefits */
.bens { margin-top: 1.5rem; }
.ben { display: grid; grid-template-columns: 28px 1fr; column-gap: 1.25rem; padding-block: 1.5rem; border-top: 1px solid var(--cream-deep); }
.ben .ico { width: 28px; height: 28px; color: var(--gold-text); margin-top: .1rem; }
.ben__title { font-size: var(--step-2); font-weight: 600; line-height: 1.3; }
.ben__body { margin-top: .4rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- join band */
.join { background: var(--green); color: var(--cream); margin-top: var(--section); padding-block: var(--section); }
/* every survey button links here; land the band below the sticky bar, whose height main.js measures */
.join { scroll-margin-top: var(--bar-h, 65px); }
.join__q { margin-top: 1.25rem; font-size: var(--step-3); font-weight: 600; line-height: 1.25; max-width: 24ch; }
.join__body { margin-top: 1rem; max-width: var(--measure); color: var(--cream-muted); }
.join .btn--gold:hover { background: var(--gold-on-green); }

/* ---------------------------------------------------------------- contact */
.contact { padding-top: var(--section); }
.contact__site {
  display: inline-block; margin-top: 1rem;
  font-weight: 600; color: var(--green);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .35em;
}
.contact__site:hover { text-decoration-color: currentColor; }
.founders { display: grid; gap: 1.5rem; margin-top: 2rem; }
/* two columns only from 900px: at 768 a 32-character email breaks mid-word in a half column */
@media (min-width: 900px) { .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.founder { display: flex; gap: 1rem; align-items: flex-start; }
.founder__name { font-weight: 600; }
.founder__role { color: var(--ink-muted); font-size: .9375rem; }
.founder__mail {
  display: inline-block; margin-top: .35rem; padding-block: .25rem;
  color: var(--green); font-size: .9375rem; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .35em;
}
.founder__mail:hover { text-decoration-color: currentColor; }
.contact__bio { margin-top: 2.5rem; color: var(--ink-muted); }
@media (max-width: 639px) {
  .founder__mail { font-size: .875rem; }
}
/* ---------------------------------------------------------------- footer */
.foot { margin-top: var(--section); border-top: 1px solid var(--cream-deep); padding-block: 1.5rem; }
.foot__line { font-size: .9375rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------- phone dock */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: var(--cream); border-top: 1px solid var(--cream-deep);
  transform: translateY(110%);
  transition: transform 300ms var(--ease-out);
}
.dock.is-on { transform: translateY(0); }
.dock__btn { width: 100%; }
@media (max-width: 899px) {
  body.has-dock { padding-bottom: var(--dock-h, 72px); }
  /* folded, every photo sits above its own text, so the page reads photo, text, photo, text */
  .pair--right { display: flex; flex-direction: column; }
  .pair--right .photo { order: -1; }
}
@media (min-width: 900px) { .dock { display: none; } }

/* ---------------------------------------------------------------- motion gates */
/* The hero is hidden only when JS will fade it in, and shown again after 2.5 s if it never does. */
.js-anim [data-hero], .js-anim .photo--hero { opacity: 0; }
.js-anim.js-late [data-hero], .js-anim.js-late .photo--hero { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-hero], .photo--hero { opacity: 1 !important; }
}

/* ---------------------------------------------------------------- preloader */
/* Once per browser session (the inline script in the head sets js-no-preloader on repeat loads).
   Pure CSS with forwards fill, so the curtain lifts even if every script fails. */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--green);
  animation: nrCurtainLift 500ms var(--ease-out) 900ms forwards;
}
.preloader__mark { width: min(220px, 44vw); height: auto; opacity: 0; transform: translateY(12px); animation: nrMarkIn 500ms var(--ease-out) forwards; }
.preloader__rule { display: block; width: 0; height: 1px; margin-top: 1.25rem; background: var(--gold); animation: nrRuleGrow 500ms var(--ease-out) 300ms forwards; }
@keyframes nrMarkIn { to { opacity: 1; transform: translateY(0); } }
@keyframes nrRuleGrow { to { width: 64px; } }
@keyframes nrCurtainLift { to { transform: translateY(-100%); visibility: hidden; } }
.js-no-preloader .preloader { display: none; }
/* after the .preloader rule on purpose: the earlier reduced-motion block would lose to it on order */
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }