/* Kaya Homepage — editorial site styles
   Loaded after /assets/colors_and_type.css. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--kaya-ivory);
  color: var(--kaya-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ---------- reusable atoms ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kaya-stone);
}
.eyebrow--rust { color: var(--kaya-rust); }
.eyebrow--gold { color: var(--kaya-gold); }
.eyebrow--ivory { color: rgba(245, 238, 230, 0.7); }
.eyebrow--burgundy { color: var(--kaya-burgundy); }

/* burgundy highlight block — white type on a burgundy box (07.06.26 revisions) */
.hl {
  background: var(--kaya-burgundy);
  color: #FFFFFF;
  padding: 0.12em 0.14em 0.04em; /* extra top padding so the box clears the cap height */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--kaya-ink);
  margin: 0;
}

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 0 0 6px 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  color: var(--kaya-ink);
  transition: opacity var(--dur-base) var(--ease-cine), color var(--dur-base) var(--ease-cine);
  text-decoration: none;
}
.btn-quiet:hover { opacity: 0.55; }
.btn-quiet svg { transition: transform var(--dur-slow) var(--ease-cine); }
.btn-quiet:hover svg { transform: translateX(6px); }
.btn-quiet--ivory { color: var(--kaya-ivory); }
.btn-quiet--burgundy { color: var(--kaya-burgundy); }

/* kaya wordmark logo — colorable via background-color, masked by the
   no-tagline logo PNG (9326×4582) so it can render ivory, burgundy, or ink */
.kaya-logo {
  display: block;
  aspect-ratio: 9326 / 4582;
  background-color: var(--kaya-ink);
  -webkit-mask: url("assets/logos/Kaya - WHITE No Tagline Logo REC.png") center / contain no-repeat;
          mask: url("assets/logos/Kaya - WHITE No Tagline Logo REC.png") center / contain no-repeat;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 26px clamp(20px, 4vw, 64px);
  transition: background var(--dur-slow) var(--ease-cine),
              backdrop-filter var(--dur-slow) var(--ease-cine),
              border-color var(--dur-slow) var(--ease-cine),
              padding var(--dur-slow) var(--ease-cine);
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(245, 238, 230, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--hairline);
  padding-top: 18px; padding-bottom: 18px;
}
.nav--ivory { color: var(--kaya-ivory); }
.nav__brand {
  display: inline-flex; align-items: center;
}
.nav__brand img { height: 18px; display: block; }
.nav__links { display: flex; gap: 40px; justify-self: center; }
.nav__links a {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: currentColor;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-fade);
  position: relative;
}
.nav__links a:hover { opacity: 0.55; }
.nav__links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: -10px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--kaya-burgundy);
  transform: translateX(-50%);
}
.nav--ivory .nav__links a.active::after { background: #FFFFFF; }
.nav__right {
  justify-self: end;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  cursor: pointer; color: currentColor;
  transition: opacity var(--dur-base) var(--ease-fade);
}
.nav__right:hover { opacity: 0.55; }

/* ---------- mobile menu ---------- */
/* hamburger — only shown ≤980px where .nav__links is hidden */
.nav__toggle { display: none; }

/* full-screen overlay; rendered as a sibling of .nav (the nav's
   backdrop-filter would otherwise trap this fixed element inside it) */
.nav__menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--kaya-ivory);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 8vw, 64px);
}
.nav__menu-links { display: flex; flex-direction: column; gap: clamp(14px, 3vh, 24px); }
.nav__menu-links a {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 8.5vw, 60px);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--kaya-ink); text-decoration: none;
}
.nav__menu-links a.active { color: var(--kaya-burgundy); }
.nav__menu-sub {
  margin-top: clamp(32px, 6vh, 56px);
  align-self: flex-start;
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kaya-burgundy); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 6px;
}
.nav__menu-close {
  position: absolute; top: 16px; right: 14px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--kaya-ink); cursor: pointer;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 720px;
  color: var(--kaya-ivory);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  transform: scale(1.08);
  transition: transform 12s var(--ease-cine);
}
.hero__bg.is-in { transform: scale(1.0); }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  display: block;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,11,10,0.55) 0%, rgba(15,11,10,0.15) 25%, rgba(15,11,10,0.20) 55%, rgba(15,11,10,0.85) 100%);
}
.hero__overlay--soft {
  background:
    linear-gradient(180deg, rgba(15,11,10,0.35) 0%, rgba(15,11,10,0.05) 30%, rgba(15,11,10,0.10) 60%, rgba(15,11,10,0.70) 100%);
}
.hero__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: clamp(110px, 14vh, 180px) clamp(24px, 5vw, 80px) clamp(40px, 6vh, 64px);
}
/* The hero logo replaces the previously typed "kaya" wordmark.
   Left-justified, oversized per the 07.04.26 revision; +85% per 07.06.26. */
.hero__logo {
  width: clamp(453px, 83vw, 1489px);
  margin: 0;
  /* Fade-rise on load */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1600ms var(--ease-cine), transform 1600ms var(--ease-cine);
}
.hero__logo.is-in { opacity: 1; transform: translateY(0); }
.hero__center {
  margin: auto 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  /* the +85% logo fills the row, so the caption wraps beneath it */
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(32px, 6vh, 64px);
}
.hero__left {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(18px, 3vh, 32px);
}
.hero__vol {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245,238,230,0.65);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1600ms 200ms var(--ease-cine), transform 1600ms 200ms var(--ease-cine);
}
.hero__vol.is-in { opacity: 1; transform: translateY(0); }
.hero__caption {
  flex: 0 0 auto;
  max-width: 34ch;
  text-align: right;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245,238,230,0.80);
  margin: 0 0 0 auto; /* right-aligned when it wraps under the oversized logo */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1800ms 400ms var(--ease-cine), transform 1800ms 400ms var(--ease-cine);
}
.hero__caption.is-in { opacity: 1; transform: translateY(0); }
.hero__caption em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  color: #FFFFFF;
  font-size: 16px;
}
/* scroll-pulse stays: the ethos-page hero scroll cue animates with it */
@keyframes scroll-pulse {
  0%   { transform: scaleY(0.2); opacity: 0.2; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2); opacity: 0.2; transform-origin: bottom; }
}

/* ----- framed hero variants (Tweaks → Hero layout) -----
   Image centered with breathing room around it; the solid frame is
   ivory or burgundy, with the logo either above the image or overlaid. */
.hero--framed {
  height: auto;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(110px, 16vh, 200px) clamp(24px, 8vw, 128px) clamp(48px, 9vh, 112px);
}
.hero--frame-ivory    { background: var(--kaya-ivory);    color: var(--kaya-ink); }
.hero--frame-burgundy { background: var(--kaya-burgundy); color: var(--kaya-ivory); }
.hero__frame {
  width: min(1040px, 100%);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(32px, 5vh, 56px);
}
.hero__frame .hero__logo {
  width: clamp(120px, 17vw, 280px);
  margin: 0;
}
.hero__frame-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--kaya-sand);
}
.hero__frame-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  display: block;
}
.hero__logo--overlay {
  position: absolute;
  top: 50%; left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  width: clamp(140px, 22vw, 340px);
  z-index: 2;
}
/* soft protection so the burgundy logo reads over photography */
.hero--frame-ivory.hero--overlay .hero__frame-media::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 42% 32% at 50% 50%, rgba(245, 238, 230, 0.55), rgba(245, 238, 230, 0) 72%);
}
.hero__logo--overlay.is-in { transform: translate(-50%, -50%); }
.hero--framed .hero__caption {
  color: inherit;
  opacity: 0;
  text-align: center;
  max-width: 40ch;
}
.hero--framed .hero__caption.is-in { opacity: 0.8; }
.hero--frame-ivory .hero__caption em { color: var(--kaya-burgundy); }

/* ---------- section frame ---------- */
.section {
  padding: clamp(96px, 16vh, 192px) clamp(24px, 5vw, 80px);
  position: relative;
}
.section--white { background: #FFFFFF; }
.section--bone { background: var(--kaya-bone); }
.section--sand { background: var(--kaya-sand); }
.section--ivory { background: var(--kaya-ivory); }
.section--ink { background: var(--kaya-ink); color: var(--kaya-ivory); }
.section--burgundy { background: var(--kaya-burgundy); color: var(--kaya-ivory); }
.section__inner { max-width: var(--max-w); margin: 0 auto; }

/* fade-in-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1200ms var(--ease-cine), transform 1200ms var(--ease-cine); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- stories / refined ---------- */
.stories-header {
  display: grid; grid-template-columns: 1fr 4fr 1fr; gap: 32px;
  align-items: end; margin-bottom: clamp(56px, 10vh, 120px);
}
.stories-header h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5vw, 84px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0; max-width: 14ch; text-wrap: balance;
}
.stories-header__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: 32px; color: var(--kaya-rust);
}
.stories-header__link { justify-self: end; align-self: end; }

.story-feature {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  margin-bottom: clamp(64px, 10vh, 120px);
}
.story-feature__media {
  position: relative; aspect-ratio: 16/8;
  overflow: hidden; background: var(--kaya-sand);
  cursor: pointer;
}
.story-feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-cine);
}
.story-feature:hover .story-feature__media img { transform: scale(1.04); }
.story-feature__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,11,10,0) 50%, rgba(15,11,10,0.55) 100%);
}
.story-feature__caption {
  position: absolute; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vh, 48px);
  z-index: 2; color: var(--kaya-ivory);
  display: flex; flex-direction: column; gap: 14px;
  max-width: 28ch;
}
.story-feature__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0; color: var(--kaya-ivory);
  text-wrap: balance;
}
.story-feature__meta {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245,238,230,0.78);
}

.story-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
}
.story {
  display: flex; flex-direction: column; gap: 24px;
  cursor: pointer;
  transition: opacity var(--dur-slow) var(--ease-cine);
}
.story--alt { margin-top: clamp(48px, 8vh, 96px); }
.story:hover { opacity: 0.92; }
.story__media {
  position: relative; aspect-ratio: 4/5;
  overflow: hidden; background: var(--kaya-sand);
}
.story__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-cine);
}
.story:hover .story__media img { transform: scale(1.03); }
.story__index {
  position: absolute; top: 20px; left: 20px;
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  color: var(--kaya-ivory); letter-spacing: -0.01em;
  text-shadow: 0 1px 30px rgba(0,0,0,0.4);
}
.story__meta {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 38ch;
}
.story__eyebrow {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kaya-rust);
}
.story__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 2.4vw, 36px); line-height: 1.08;
  letter-spacing: -0.02em; color: var(--kaya-ink); margin: 0;
  text-wrap: balance;
}
.story__dek {
  font-family: var(--font-body); font-size: 15px; line-height: 1.65;
  color: var(--kaya-stone); margin: 0; max-width: 42ch;
}

/* ---------- ethos preview ---------- */
/* Pure black by request; Tweaks offers a Kaya Burgundy alternate. */
.ethos { position: relative; background: #000000; }
[data-ethos-bg="burgundy"] .ethos { background: var(--kaya-burgundy); }
[data-ethos-bg="burgundy"] .ethos__chapter::before { background: var(--kaya-ivory); }
[data-ethos-bg="burgundy"] .ethos__title em,
[data-ethos-bg="burgundy"] .ethos__cta { color: var(--kaya-ivory); border-color: var(--kaya-ivory); }
.ethos__inner {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(48px, 8vw, 128px);
  align-items: center;
  max-width: var(--max-w); margin: 0 auto;
}
.ethos__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--kaya-ink);
}
.ethos__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.ethos__body { display: flex; flex-direction: column; gap: 36px; }
.ethos__chapter {
  display: flex; align-items: center; gap: 18px;
  color: rgba(245, 238, 230, 0.65);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
}
.ethos__chapter::before {
  content: ""; width: 36px; height: 1px;
  background: var(--kaya-burgundy);
}
.ethos__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5vw, 84px); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--kaya-ivory); margin: 0;
  text-wrap: balance;
}
.ethos__title em { font-style: italic; color: var(--kaya-ivory); }
.ethos__body p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.85;
  color: rgba(245, 238, 230, 0.78); margin: 0;
  max-width: 46ch;
}
.ethos__cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: #FFFFFF;
  border-bottom: 1px solid currentColor;
  padding-bottom: 6px;
  align-self: flex-start;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-cine);
}
.ethos__cta:hover { opacity: 0.7; }
.ethos__cta svg { transition: transform var(--dur-slow) var(--ease-cine); }
.ethos__cta:hover svg { transform: translateX(6px); }

/* ---------- journal ---------- */
.journal-header {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: end;
  margin-bottom: clamp(56px, 8vh, 96px);
}
.journal-header h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5vw, 84px); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.journal-header em { font-style: italic; color: var(--kaya-burgundy); }

.journal-grid {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.journal-feature { display: flex; flex-direction: column; gap: 28px; }
.journal-feature__media {
  aspect-ratio: 16/10; overflow: hidden; background: var(--kaya-sand);
  position: relative;
}
.journal-feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2400ms var(--ease-cine);
}
.journal-feature:hover .journal-feature__media img { transform: scale(1.03); }
.journal-feature__meta {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 56ch;
}
.journal-feature__byline {
  display: flex; gap: 24px;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kaya-stone);
}
.journal-feature__byline span:not(:first-child)::before {
  content: "·"; margin-right: 22px; color: var(--kaya-mist);
}
.journal-feature__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 3.2vw, 52px); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--kaya-ink); margin: 0; max-width: 22ch;
  text-wrap: balance;
}
.journal-feature__dek {
  font-family: var(--font-body); font-size: 16px; line-height: 1.75;
  color: var(--kaya-stone); margin: 0; max-width: 50ch;
}

.journal-list { display: flex; flex-direction: column; }
.journal-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 28px; padding: 28px 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-cine);
}
.journal-row:last-child { border-bottom: 1px solid var(--hairline); }
.journal-row:hover { opacity: 0.65; }
.journal-row__n {
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  color: var(--kaya-rust); letter-spacing: 0.02em;
  min-width: 28px;
}
.journal-row__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1;
  letter-spacing: -0.01em; color: var(--kaya-ink);
}
.journal-row__date {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--kaya-stone); white-space: nowrap;
}
.journal-newsletter {
  margin-top: clamp(64px, 10vh, 120px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding-top: clamp(48px, 8vh, 80px);
  border-top: 1px solid var(--hairline);
  align-items: center;
}
.journal-newsletter__lede {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--kaya-ink); margin: 0;
  max-width: 20ch; text-wrap: balance;
}
.journal-newsletter__lede em {
  font-style: italic; color: var(--kaya-burgundy);
}
.journal-form {
  display: flex; flex-direction: column; gap: 16px;
}
.journal-form__row {
  display: flex; gap: 0; align-items: center;
  border-bottom: 1px solid var(--kaya-ink);
}
.journal-form__row input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: var(--font-body); font-size: 16px; color: var(--kaya-ink);
  padding: 16px 0;
  letter-spacing: 0;
}
.journal-form__row input::placeholder { color: var(--kaya-mist); }
.journal-form__row button {
  background: transparent; border: 0;
  font-family: var(--font-body); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kaya-ink); cursor: pointer;
  padding: 16px 0 16px 24px;
  display: inline-flex; align-items: center; gap: 12px;
  transition: color var(--dur-base) var(--ease-cine);
}
.journal-form__row button:hover { color: var(--kaya-burgundy); }
.journal-form__note {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--kaya-stone);
}
.journal-form__done {
  padding: 16px 0; font-family: var(--font-display); font-weight: 300;
  font-size: 24px; color: var(--kaya-burgundy);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--kaya-burgundy);
}

/* ---------- closing ---------- */
.closing {
  padding: clamp(120px, 22vh, 240px) clamp(24px, 5vw, 80px);
  text-align: center;
  background: var(--kaya-ivory);
  position: relative;
}
.closing__rule {
  width: 1px; height: clamp(60px, 8vh, 96px);
  background: var(--kaya-burgundy);
  margin: 0 auto 48px;
}
.closing__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--kaya-rust); margin-bottom: 32px; display: block;
}
.closing__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(48px, 7vw, 124px); line-height: 0.98; letter-spacing: -0.025em;
  color: var(--kaya-ink); margin: 0 auto;
  max-width: 16ch; text-wrap: balance;
}
/* same line weight as "Step inside." per 07.06.26 */
.closing__title em { font-style: normal; font-weight: 300; color: var(--kaya-burgundy); }
/* inline burgundy wordmark inside the invitation title */
.closing__logo {
  display: inline-block;
  height: 1.44em; width: auto;
  /* the PNG includes the "y" descender, so pull it below the baseline */
  vertical-align: -0.38em;
}
.closing__sub {
  margin: 40px auto 0;
  font-family: var(--font-body); font-size: 17px; line-height: 1.75;
  color: var(--kaya-stone);
  max-width: 38ch;
}
.closing__contact {
  margin: 56px auto 0;
  display: inline-flex; flex-direction: column; gap: 8px;
  align-items: center;
}
.closing__email {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.01em; color: var(--kaya-burgundy);
  border-bottom: 1px solid var(--kaya-burgundy);
  padding-bottom: 4px;
  transition: opacity var(--dur-base) var(--ease-cine);
}
.closing__email:hover { opacity: 0.55; }

/* ---------- footer ---------- */
.foot {
  background: #000000; color: var(--kaya-ivory);
  padding: clamp(80px, 10vh, 120px) clamp(24px, 5vw, 80px) 36px;
}
.foot__inner { max-width: var(--max-w); margin: 0 auto; }
.foot__top {
  display: grid;
  grid-template-columns: 2.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(48px, 8vh, 80px);
  border-bottom: 1px solid rgba(245,238,230,0.18);
}
.foot__tagline {
  margin-top: 0;
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.foot__about {
  margin-top: 18px; font-family: var(--font-body); font-size: 14px;
  line-height: 1.75; max-width: 36ch;
  color: rgba(245,238,230,0.72);
}
.foot__col { display: flex; flex-direction: column; gap: 16px; }
.foot__col h4 {
  margin: 0 0 8px;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(245,238,230,0.5); font-weight: 500;
}
.foot__col a {
  color: var(--kaya-ivory); border: 0; text-decoration: none;
  font-family: var(--font-body); font-size: 14px;
  transition: opacity var(--dur-base) var(--ease-fade);
  cursor: pointer;
}
.foot__col a:hover { opacity: 0.6; }
.foot__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; gap: 24px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245,238,230,0.55);
}
.foot__bottom a { color: inherit; border: 0; text-decoration: none; }
.foot__bottom a:hover { opacity: 0.7; }

/* ---------- responsive ---------- */
/* tablet */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; margin-left: -10px; padding: 0 10px;
    background: none; border: 0; cursor: pointer; color: currentColor;
  }
  .nav__toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; }
  .stories-header, .story-pair, .ethos__inner, .journal-grid, .journal-newsletter { grid-template-columns: 1fr; gap: 32px; }
  .story--alt { margin-top: 0; }
  .stories-header__num { display: none; }
  .stories-header__link { justify-self: start; }
  .foot__top { grid-template-columns: 1fr 1fr; }

  .hero { min-height: 640px; }
  .hero__content { padding: 96px clamp(20px, 4vw, 48px) 36px; }
  .hero__center { flex-direction: column; align-items: flex-start; }
  .hero__caption { align-self: flex-end; }
  .hero__logo { width: clamp(481px, 92vw, 971px); }
  .hero--framed { padding: 110px clamp(20px, 6vw, 64px) 56px; }
  .hero__frame .hero__logo { width: clamp(120px, 24vw, 220px); }
  .hero__logo--overlay { width: clamp(130px, 30vw, 260px); }
}

/* phone */
@media (max-width: 600px) {
  .hero { min-height: 560px; }
  .hero__content { padding: 88px 20px 28px; }
  .hero__logo { width: 92vw; }
  .hero__caption { font-size: 13px; max-width: 30ch; }
  .hero--framed { padding: 96px 20px 44px; }
  .hero__frame { gap: 28px; }
  .hero__frame-media { aspect-ratio: 4 / 5; }
  .hero__frame .hero__logo { width: clamp(110px, 36vw, 180px); }
  .hero__logo--overlay { width: clamp(120px, 42vw, 200px); }

  .section { padding-left: 20px; padding-right: 20px; }
  /* 16:8 leaves ~170px of image under a large overlaid caption on phones */
  .story-feature__media { aspect-ratio: 4 / 5; }
  .journal-header { grid-template-columns: 1fr; }
  .journal-row { gap: 16px; padding: 22px 0; }
  .closing { padding-left: 20px; padding-right: 20px; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* respect OS-level reduced-motion: content still appears, just without travel */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- tweaks overrides (applied via attribute) ---------- */
[data-density="airy"] .section { padding-top: clamp(140px, 22vh, 256px); padding-bottom: clamp(140px, 22vh, 256px); }
[data-density="compact"] .section { padding-top: clamp(72px, 10vh, 128px); padding-bottom: clamp(72px, 10vh, 128px); }

/* accent recolouring */
[data-accent="rust"]    { --accent: var(--kaya-rust); }
[data-accent="green"]   { --accent: var(--kaya-green); }
[data-accent="gold"]    { --accent: var(--kaya-gold); }
[data-accent="burgundy"]{ --accent: var(--kaya-burgundy); }