/* ============================================================
   Paradox Praxis - homepage, "gallery" design
   White ground, hairline grid, ink artworks set as plates.
   Black lives only inside the images. Motion: one slow fade.
   Loaded after app.css, homepage only.
   ============================================================ */

.home {
  --paper:  #f8f7f5;
  --rule:   rgba(22, 19, 14, 0.14);
  --pad:    clamp(22px, 4vw, 64px);
  background: var(--paper);
}
.home .arrow { color: inherit; }
.home a:focus-visible, .home button:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

/* artwork: paper tones dissolve into the page, ink stays */
.home figure { margin: 0; }
.home figure img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* the only animation on the page: a single slow fade */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.hero__text { animation: fade 1.2s ease both; }

/* never move on scroll */
.home .reveal-on .who, .home .reveal-on .rotator, .home .reveal-on .newsletter,
.home .who, .home .rotator, .home .newsletter {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

/* ---------- nav ---------- */
.home .site-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home .site-nav__inner { max-width: none; padding-left: var(--pad); padding-right: var(--pad); }
.home .site-nav__brand { font-size: 0.74rem; letter-spacing: 0.22em; }
.home .site-nav__mark canvas { width: 38px; }
.home .site-nav__menu { gap: clamp(12px, 1.8vw, 30px); }
.home .site-nav__menu a { white-space: nowrap; }
@media (max-width: 900px) {
  .home .site-nav.is-open { position: fixed; }
}

/* ---------- hero: one immersive field, the artwork bleeds off the edges ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  isolation: isolate;
}
.hero__text {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(36px, 6vh, 72px);
  padding: calc(64px + clamp(36px, 7vh, 88px)) var(--pad) clamp(32px, 6vh, 72px);
}
.hero__kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.hero__word {
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.1em;
  font-size: clamp(2.4rem, 7vw, 7.2rem);
  color: var(--ink);
  white-space: nowrap;
}
.hero__foot { max-width: 34rem; }
.hero__tags {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.hero__tags .sep { margin: 0 0.5em; color: var(--ink-38); }
.hero__tagline {
  margin-top: 18px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: balance;
}
.hero__links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: clamp(24px, 4vh, 40px); }
.hero__links a {
  display: inline-flex;
  gap: 0.6em;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-22);
  transition: border-color 0.3s ease;
}
.hero__links a:hover { border-color: var(--ink); }
.hero__foot, .hero__word { max-width: 46vw; }

@media (max-width: 900px) {
  .hero__text { justify-content: flex-end; }
  .hero__kicker { margin-bottom: auto; }
  .hero__foot, .hero__word { max-width: none; }
}

/* hero photograph */
.hero__photo { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 64vw; margin: 0; pointer-events: none; animation: fade 2.2s ease both; }
.hero__photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; mix-blend-mode: normal; }
@media (max-width: 900px) { .hero__photo { width: 100%; bottom: 58svh; -webkit-mask-image: none; mask-image: none; } }

/* ---------- rooms: three cells ---------- */
.rooms { border-top: 1px solid var(--rule); background: var(--paper); }
.rooms__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rooms__grid > li + li { border-left: 1px solid var(--rule); }
.room {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(44px, 8vh, 96px) clamp(22px, 3.4vw, 56px) clamp(40px, 7vh, 80px);
}
.room__text { display: flex; flex-direction: column; flex: 1; }
.room__no {
  display: block;
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--ink-52);
}
.room__title {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: min(7.4cqi, 1.9rem);
  line-height: 1.15;
  letter-spacing: 0.05em;
  color: var(--ink);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.room__body {
  margin-top: 16px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-72);
}
.room__go {
  display: inline-flex;
  align-self: flex-start;
  gap: 0.6em;
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.room__go .arrow, .rooms__method .arrow { transition: transform 0.3s ease; }
.room:hover .room__go .arrow, .rooms__method a:hover .arrow { transform: translateX(4px); }

.rooms__method {
  border-top: 1px solid var(--rule);
  text-align: center;
  padding: clamp(28px, 5vh, 52px) var(--pad);
}
.rooms__method a {
  display: inline-flex;
  gap: 0.6em;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--ink);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink-22);
  transition: border-color 0.3s ease;
}
.rooms__method a:hover { border-color: var(--ink); }

@media (max-width: 980px) {
  .rooms__grid { grid-template-columns: 1fr; }
  .rooms__grid > li + li { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- split sections: plate + text in two cells ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.split__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 7vh, 88px) var(--pad);
}
.split__art img { width: auto; height: auto; max-width: 100%; max-height: 78svh; object-fit: contain; }
.split__text {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vh, 110px) var(--pad);
}
.split--who .split__art, .split--voices .split__art { border-right: 1px solid var(--rule); }
.split--letter .split__art { border-left: 1px solid var(--rule); }

/* who */
.home .who { display: flex; flex-direction: column; gap: 0; background: none; border: 0; }
.home .who:hover { background: none; }
.home .who__kicker {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-52);
  padding: 0;
  margin-bottom: clamp(24px, 4vh, 40px);
}
.home .who__body { max-width: 34rem; }
.home .who__body p:first-of-type {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.home .who__body p {
  margin-top: clamp(18px, 3vh, 28px);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-72);
}
.home .who__close {
  display: inline-flex;
  gap: 0.6em;
  font-weight: 600 !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin-top: clamp(28px, 5vh, 44px) !important;
}
.home .who:hover .who__close .arrow { transform: translateX(4px); }
.home .who__close .arrow { transition: transform 0.3s ease; }

/* voices */
.split--voices .split__art img { max-height: 56svh; }
.home .rotator { background: none; padding: 0; max-width: 34rem; margin: 0; }
.home .quote { margin: 0; text-align: left; max-width: none; }
.home .quote__text {
  font-weight: 300;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.home .quote__cite { justify-content: flex-start; color: var(--ink-52); }

/* newsletter */
.home .newsletter { text-align: left; align-items: flex-start; }
.home .newsletter__title {
  font-size: min(9.5cqi, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}
.home .newsletter__body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-72);
  max-width: 30rem;
  margin: clamp(16px, 3vh, 26px) 0 clamp(26px, 4vh, 38px);
}
.home .newsletter .btn-row { justify-content: flex-start; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--who .split__art, .split--voices .split__art { border-right: 0; border-bottom: 1px solid var(--rule); }
  .split--letter .split__art { border-left: 0; border-top: 1px solid var(--rule); }
  .split__art img { max-height: 60svh; }
}

/* ---------- footer ---------- */
.home .site-footer { background: var(--paper); border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  .hero__text { animation: none; }
}

/* ---------- statements: centred text on open white ---------- */
.statement {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(72px, 14vh, 170px) var(--pad);
  text-align: center;
}
.statement__inner { max-width: 44rem; margin: 0 auto; container-type: inline-size; }
.statement .rotator { margin: 0 auto; max-width: none; }
.statement .quote { text-align: center; }
.statement .quote__text { font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.4; }
.statement .quote__cite { justify-content: center; }
.statement .newsletter { text-align: center; align-items: center; display: flex; flex-direction: column; }
.statement .newsletter .btn-row { justify-content: center; }
.statement .newsletter__body { margin-left: auto; margin-right: auto; }
.statement .newsletter__title { font-size: min(9cqi, 3.6rem); }

/* nav stays readable over the black: brand stays ink on paper, menu goes white on a soft shade at the top of the photograph */
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(12, 11, 10, 0.7), rgba(12, 11, 10, 0));
}
.home .site-nav__menu a, .home .site-nav__lang a { color: #fff; }
.home .site-nav__menu a[aria-current="page"] { border-bottom-color: #fff; }
.home .site-nav__menu a::after { background: #fff; }
.home .site-nav__lang { opacity: 0.8 !important; }

@media (max-width: 900px) {
  /* phones: nav stays ink on paper, the photograph starts beneath it */
  .hero__photo { top: 64px; }
  .hero__photo::after { display: none; }
  .hero__photo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 66%, transparent 100%) !important; mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 66%, transparent 100%) !important; }
  .home .site-nav__menu a, .home .site-nav__lang a { color: var(--ink-52); }
  .home .site-nav__menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
  .home .site-nav__menu a::after { background: var(--accent); }
  .home .site-nav__toggle span { background: var(--ink); }
  .hero__kicker { order: 1; margin: 18px 0 0 !important; }
  .hero__word { order: 0; }
  .hero__foot { order: 2; }
}

/* ---------- paths: a gentle entrance and a soft hover ---------- */
.reveal-on .rooms__grid > li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-on .rooms__grid.is-in > li { opacity: 1; transform: none; }
.reveal-on .rooms__grid.is-in > li:nth-child(2) { transition-delay: 0.18s; }
.reveal-on .rooms__grid.is-in > li:nth-child(3) { transition-delay: 0.36s; }

.room__title {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 8px;
  transition: background-size 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.room:hover .room__title, .room:focus-visible .room__title { background-size: 100% 1px; }
.room__no { transition: letter-spacing 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.room:hover .room__no { letter-spacing: 0.4em; }

/* ---------- testimonials: small and fine ---------- */
.statement .quote__text {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.75;
  letter-spacing: 0;
  max-width: 34rem;
  margin: 0 auto;
}
.statement .quote__cite { font-size: 0.58rem; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .room__title, .room__no { transition: none; }
}

/* ============================================================
   Dive: one full screen of hills, text set in white over it
   ============================================================ */
.dive {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #0d0c0a;
  color: #fff;
}
.dive__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.dive::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13, 12, 10, 0.1) 0%, rgba(13, 12, 10, 0.55) 55%, rgba(13, 12, 10, 0.88) 100%);
}
.dive .dive__text { padding: clamp(64px, 12vh, 140px) var(--pad); max-width: 1500px; margin: 0 auto; width: 100%; }
.dive .who__kicker { color: #fff; }
.dive .who__body { max-width: 46rem; }
.dive .who__body p:first-of-type { color: #fff; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.28; letter-spacing: -0.015em; }
.dive .who__body p { color: #fff; }
.dive .who__close { color: #fff !important; }



/* ============================================================
   Scenes: every section wakes softly as it comes into view.
   Colour of the block shifts, the image fades up and settles.
   ============================================================ */
.reveal-on .stage__img { opacity: 0; transform: scale(1.05); transition: opacity 2.2s ease, transform 4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal-on .stage.is-in .stage__img { opacity: 1; transform: none; }

/* rooms: paper settles into a warmer stone */
.rooms { transition: background-color 2s ease; }
.reveal-on .rooms.stage.is-in { background-color: #efede7; }
.rooms__method, .rooms__grid > li + li { transition: border-color 2s ease; }

/* voices: the split canvas, cream on the left where the quote sits */
.statement--voices { position: relative; overflow: hidden; isolation: isolate; min-height: 88svh; display: flex; align-items: center; text-align: left; background: #e9e5db; }
.statement--voices .statement__bg { position: absolute; inset: -3% -6%; z-index: -1; width: 112%; height: 106%; object-fit: cover; object-position: 50% 50%; }
.statement--voices .statement__inner { margin: 0; max-width: 34rem; padding-left: var(--pad); }
.statement--voices .quote { text-align: left; }
.statement--voices .quote__text { margin-left: 0; margin-right: 0; }
.statement--voices .quote__cite { justify-content: flex-start; }

/* newsletter: paper turns to ink, the cloud rises behind it */
.statement--letter { position: relative; overflow: hidden; isolation: isolate; min-height: 90svh; display: flex; align-items: center; justify-content: center; background: var(--paper); transition: background-color 2.2s ease, color 2.2s ease; }
.reveal-on .statement--letter.is-in { background-color: #0d0c0a; color: #f3f1ec; }
.statement--letter .statement__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.reveal-on .statement--letter.is-in .statement__bg { opacity: 0.5; }
.statement--letter .newsletter__title, .statement--letter .newsletter__body { transition: color 2.2s ease; }
.reveal-on .statement--letter.is-in .newsletter__title { color: #fff; }
.reveal-on .statement--letter.is-in .newsletter__body { color: rgba(255, 255, 255, 0.82); }
.reveal-on .statement--letter.is-in .btn--solid { background: #fff; color: #0d0c0a; border-color: #fff; }
.reveal-on .statement--letter.is-in .btn--solid:hover { background: transparent; color: #fff; }
.home .site-footer { transition: background-color 2s ease; }

@media (max-width: 900px) {
  .statement--voices .statement__inner { max-width: none; padding: 0 var(--pad); background: rgba(233, 229, 219, 0.78); padding-top: 28px; padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) { .reveal-on .stage__img { opacity: 1; transform: none; transition: none; } }

.statement--voices .statement__inner, .statement--letter .statement__inner { width: 100%; }
.statement--voices .statement__inner { max-width: 34rem; margin-left: 0; }
.statement--letter .statement__inner { max-width: 44rem; }
.reveal-on .statement--letter.is-in .statement__bg { opacity: 0.3; }
.statement--letter::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(13, 12, 10, 0.75), transparent 100%); }
@media (min-width: 901px) { .statement--voices .statement__inner { margin-left: max(0px, calc((100vw - 1500px) / 2)); } }


/* voices: the dot field (drawn, so always sharp) on the right, quote on the left */
.statement--voices { background: #ece9e2; }
.statement__dots { position: absolute; z-index: -1; top: 50%; right: -3vw; width: min(58vw, 880px); aspect-ratio: 360 / 210; transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(ellipse 60% 64% at 62% 50%, #000 26%, transparent 100%); mask-image: radial-gradient(ellipse 60% 64% at 62% 50%, #000 26%, transparent 100%); }
.statement__dots canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .statement__dots { width: 120vw; right: -10vw; opacity: 0.35; } .statement--voices .statement__inner { background: none; } }

/* newsletter: the hero photograph, mirrored, fogged behind the text */
.statement__flip { position: absolute; inset: 0; z-index: -1; transform: scaleX(-1); }
.statement__flip .statement__bg { position: absolute; inset: 0; object-position: 60% 30%; filter: grayscale(1); }


/* homepage keeps two images only (hero, hills): voices and newsletter are colour scenes */
.statement--voices { min-height: 0; display: block; text-align: center; background: var(--paper); transition: background-color 2s ease; }
.reveal-on .statement--voices.is-in { background-color: #ece9e2; }
.statement--voices .statement__inner { margin: 0 auto; max-width: 44rem; padding: 0; background: none; }
.statement--voices .quote { text-align: center; }
.statement--voices .quote__text { margin-left: auto; margin-right: auto; }
.statement--voices .quote__cite { justify-content: center; }
.statement--letter { min-height: 0; display: block; }
.statement--letter::before { display: none; }


/* newsletter heading: soft and elegant, not dramatic */
.statement--letter .newsletter__title { font-family: var(--sans); font-weight: 300; text-transform: none; letter-spacing: -0.005em; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.25; }

/* who this is for: always white, one reading size */
.dive .who, .dive .who:hover { color: #fff; }
.dive .who__kicker, .dive .who:hover .who__kicker { color: #fff !important; }
.dive .who__body { max-width: 40rem; }
.dive .who__body p, .dive .who__body p:first-of-type, .dive .who:hover .who__body p {
  color: #fff !important;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.6;
  letter-spacing: 0;
  margin-top: 1.1em;
}
.dive .who__body p:first-of-type { margin-top: 0; }
.dive .who__body .who__close, .dive .who:hover .who__body .who__close {
  display: inline-flex;
  gap: 0.6em;
  margin-top: 1.8em !important;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #fff !important;
}
.dive .who:hover .who__close { border-bottom-color: #fff; }