/* ==========================================================================
   ESCAPE — the house of ruvori
   A red/white/black community page, distinct from the main black/white/gray site.
   Shares fonts, focus states, buttons and grain texture with css/styles.css
   (loaded first); this file only adds the escape-specific palette and layout.
   ========================================================================== */

:root {
  --e-red: #c72a09;
  --e-red-deep: #9c2108;   /* raised surface on red, and hover state */
  --e-ivory: #e7e3dd;      /* the logo's off-white, used instead of pure white */
  --e-ink: #000000;
  --e-line: rgba(231, 227, 221, 0.28);
  --e-muted: rgba(231, 227, 221, 0.72);
}

body.escape {
  background: var(--e-red) var(--grain-dark);
  color: var(--e-ivory);
}

.e-wrap {
  width: 100%;
  max-width: calc(920px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- top bar ---------- */
.e-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  background: var(--e-ink);
  border-bottom: 1px solid var(--e-line);
}
.e-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--e-ivory);
}
.e-back svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.e-back:hover svg { transform: translateX(-3px); }
.e-bar img { width: 46px; height: auto; }

/* ---------- hero ---------- */
.e-hero {
  padding-block: clamp(56px, 10vw, 120px) clamp(48px, 8vw, 88px);
  text-align: center;
}
.e-hero__mark {
  width: clamp(96px, 16vw, 160px);
  height: auto;
  margin-inline: auto;
}

/* hero layout: stacked and centred on phones; text left + photo right on desktop */
.e-hero__grid { display: grid; gap: clamp(36px, 7vw, 56px); align-items: center; }
.e-hero__photo {
  margin: 0 auto;
  width: min(100%, 420px);
  overflow: hidden;
  border-radius: 10px;
  background: var(--e-ink);
}
.e-hero__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) {
  .e-hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: clamp(48px, 7vw, 96px); }
  .e-hero__text { text-align: left; }
  .e-hero__mark { margin-inline: 0; }
  .e-hero p.e-hero__lede { margin-inline: 0; }
  .e-hero__photo { width: 100%; max-width: 460px; margin-inline: auto 0; }
}
.e-hero__label {
  margin-top: 28px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-muted);
}
.e-hero h1 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1rem + 6vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.e-hero p {
  max-width: 46ch;
  margin: 22px auto 0;
  color: var(--e-muted);
  font-size: 1.0625rem;
}

/* one orchestrated entrance, held behind the preloader: mark, then label, then the
   word letter by letter as its tracking tightens, then the lede. The hidden starting
   state applies as soon as the page paints; the animations themselves only start once
   js/escape.js adds body.is-ready (right as the preloader begins clearing), so the
   sequence is never already finished by the time it's visible. Off entirely under
   reduced motion, and undone completely with no JS (see the <noscript> rule below). */
.e-hero__word { display: inline-block; }
.e-hero__word span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.is-ready) .e-hero__mark,
  body.is-ready .e-hero__mark {
    opacity: 0;
    transform: scale(0.55) rotate(-16deg);
  }
  body:not(.is-ready) .e-hero__label,
  body.is-ready .e-hero__label {
    opacity: 0;
  }
  body:not(.is-ready) .e-hero__word,
  body.is-ready .e-hero__word {
    letter-spacing: 0.4em;
  }
  body:not(.is-ready) .e-hero__word span,
  body.is-ready .e-hero__word span {
    opacity: 0;
    transform: translateY(0.5em);
  }
  body:not(.is-ready) .e-hero__lede,
  body.is-ready .e-hero__lede {
    opacity: 0;
  }
  body:not(.is-ready) .e-hero__photo,
  body.is-ready .e-hero__photo {
    clip-path: inset(100% 0 0 0);
  }
  body:not(.is-ready) .e-hero__photo img,
  body.is-ready .e-hero__photo img {
    transform: scale(1.12);
  }

  body.is-ready .e-hero__mark { animation: e-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards; }
  body.is-ready .e-hero__label { animation: e-fade 0.6s ease 0.68s forwards; }
  body.is-ready .e-hero__word { animation: e-tracking 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.85s forwards; }
  body.is-ready .e-hero__word span { animation: e-letter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
  body.is-ready .e-hero__word span:nth-child(1) { animation-delay: 0.85s; }
  body.is-ready .e-hero__word span:nth-child(2) { animation-delay: 0.91s; }
  body.is-ready .e-hero__word span:nth-child(3) { animation-delay: 0.97s; }
  body.is-ready .e-hero__word span:nth-child(4) { animation-delay: 1.03s; }
  body.is-ready .e-hero__word span:nth-child(5) { animation-delay: 1.09s; }
  body.is-ready .e-hero__word span:nth-child(6) { animation-delay: 1.15s; }
  body.is-ready .e-hero__lede { animation: e-fade 0.6s ease 1.5s forwards; }
  body.is-ready .e-hero__photo { animation: e-wipe 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s forwards; }
  body.is-ready .e-hero__photo img { animation: e-settle 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s forwards; }
}
@keyframes e-pop { to { opacity: 1; transform: none; } }
@keyframes e-fade { to { opacity: 1; } }
@keyframes e-letter { to { opacity: 1; transform: none; } }
@keyframes e-tracking { to { letter-spacing: normal; } }
@keyframes e-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes e-settle { to { transform: none; } }

/* ---------- manifesto ---------- */
.e-about {
  padding-block: clamp(40px, 7vw, 80px);
  border-top: 1px solid var(--e-line);
  text-align: center;
}
.e-about h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 0.9rem + 2.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.e-about h2 b { font-weight: 700; }
.e-about p {
  max-width: 56ch;
  margin: 20px auto 0;
  color: var(--e-muted);
}

/* ---------- photo gallery ----------
   Phones: 2 columns, the feature shot full width on top, the last shot full width at the end.
   Desktop: 3 columns, the feature shot takes a 2x2 block (which works out to the photo's own 4:5). */
.e-wrap--wide { max-width: calc(1200px + var(--gutter) * 2); }
.e-grid { padding-block: clamp(24px, 5vw, 48px); }
.e-grid ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.e-grid li { display: grid; min-width: 0; }
.e-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--e-ink);
}
.e-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 0;   /* keep the mark at the top of each photo in frame */
  transition: transform 0.8s var(--ease);
}
.e-feature { grid-column: span 2; }
.e-feature img { aspect-ratio: 1 / 1; }
.e-last { grid-column: span 2; }
.e-last img { aspect-ratio: 4 / 3; object-position: 50% 45%; }
@media (min-width: 900px) {
  .e-grid ul { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .e-feature { grid-column: span 2; grid-row: span 2; }
  .e-feature figure { min-height: 0; }
  .e-feature img { position: absolute; inset: 0; aspect-ratio: auto; }   /* size from the neighbours, not the photo */
  .e-last { grid-column: auto; }
  .e-last img { aspect-ratio: 4 / 5; object-position: 50% 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .e-grid li:hover img { transform: scale(1.03); }
}

/* ---------- behind the scenes pair ---------- */
.e-pair { padding-block: 4px clamp(40px, 6vw, 72px); }
.e-pair .e-wrap { max-width: calc(820px + var(--gutter) * 2); }
.e-pair ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .e-pair ul { gap: 14px; } }
.e-pair figure { margin: 0; overflow: hidden; border-radius: 10px; background: var(--e-ink); }
.e-pair img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; transition: transform 0.8s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .e-pair li:hover img { transform: scale(1.03); }
}

/* ---------- community / CTA ---------- */
.e-join {
  padding-block: clamp(56px, 9vw, 100px);
  text-align: center;
  border-top: 1px solid var(--e-line);
}
.e-join h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem);
  letter-spacing: -0.02em;
}
.e-join p {
  max-width: 44ch;
  margin: 18px auto 0;
  color: var(--e-muted);
}
.e-join .btn {
  margin-top: 32px;
}
.e-join .btn--solid {
  background: var(--e-ivory);
  color: var(--e-ink);
  border-color: var(--e-ivory);
}
.e-join .btn--solid:hover {
  background: var(--e-ink);
  color: var(--e-ivory);
  border-color: var(--e-ivory);
}
:root { --focus-escape: var(--e-ivory); }
.escape :focus-visible { outline-color: var(--e-ivory); }

.e-socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.e-social {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--e-line);
  border-radius: 50%;
  color: var(--e-ivory);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.e-social svg { width: 20px; height: 20px; }
.e-social:hover { background: var(--e-ivory); color: var(--e-red); border-color: var(--e-ivory); }

/* ---------- footer ---------- */
.e-footer {
  padding-block: 28px;
  background: var(--e-ink);
  color: var(--e-muted);
  text-align: center;
  font-size: 0.875rem;
}
.e-footer a { color: var(--e-ivory); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .e-back svg { transition: none; }
}