/* Alchemize · homepage · implements Wireframe v2 with Brand Book Edition One
 * Stratev Solutions · 2026
 */

@import url("tokens.css");

/* ============ base ============ */

*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must win over any display rule set further down this file,
 * otherwise elements the countdown script hides stay on screen. */
[hidden] { display: none !important; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--albedo);
  color: var(--cinder);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

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

::selection { background: var(--vellum); color: var(--nigredo); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============ shared voices ============ */

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--leading-display);
  color: var(--nigredo);
  overflow-wrap: anywhere;
  min-width: 0;
}

.display--xl { font-size: var(--text-display); }
.display--lg { font-size: var(--text-display-s); }
.display--md { font-size: var(--text-title); }
.display--it { font-style: italic; }

.label {
  font-family: var(--font-sacred);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}

.copy {
  max-width: var(--measure);
  color: var(--cinder);
}

.copy + .copy { margin-top: var(--space-sm); }

.aside-copy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--alembic);
}

.gold-rule {
  width: 3.5rem;
  height: var(--rule-hair);
  background: var(--citrinitas);
  border: 0;
  margin: var(--space-md) 0;
}

.gold-rule--center { margin-inline: auto; }

.gold-line {
  height: var(--rule-hair);
  background: var(--citrinitas);
  opacity: 0.85;
}

/* Buttons · one voice, three fills */

.btn {
  display: inline-block;
  font-family: var(--font-sacred);
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.9rem 1.9rem;
  border: 1px solid var(--gold-ink);
  color: var(--gold-ink);
  background: transparent;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}

.btn:hover { background: var(--vellum); }

.btn--fill {
  background: var(--rubedo);
  border-color: var(--rubedo);
  color: var(--albedo);
}

.btn--fill:hover { background: var(--porphyry); border-color: var(--porphyry); }

.btn--gold {
  background: var(--citrinitas);
  border-color: var(--citrinitas);
  color: #2B1D06;
}

.btn--gold:hover { background: var(--gold-pale); border-color: var(--gold-pale); }

.btn--sm { padding: 0.55rem 1.15rem; }

.text-link {
  font-family: var(--font-sacred);
  font-size: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--citrinitas);
  padding-bottom: 0.2rem;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}

.text-link:hover { color: var(--rubedo); border-color: var(--rubedo); }

/* ============ media placeholders ============ */
/* Graded stand-ins for the photography shoot. Swap each block for its
   labelled image. One light source, real texture, negative space. */

.media {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 16rem;
  padding: var(--space-md);
  border: 1px solid var(--ash-line);
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(227, 206, 149, 0.32), transparent 55%),
    linear-gradient(160deg, var(--umber), var(--nigredo) 82%);
}

.media::after {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px solid rgba(198, 163, 86, 0.35);
  pointer-events: none;
}

.media__note {
  position: relative;
  z-index: 1;
  max-width: 26ch;
}

.media__tag {
  display: block;
  font-family: var(--font-sacred);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: 0.35rem;
}

.media__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(247, 243, 234, 0.72);
}

/* Real imagery inside the frame · interim shots until the brand shoot */

.media--img { padding: 0; overflow: clip; }

.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--img::after { z-index: 2; }

/* Maroon tint · lets an image sit inside the Rubedo field rather than on top of it */
.media--tint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(107, 31, 42, 0.4), rgba(74, 18, 28, 0.2));
  pointer-events: none;
}

.media--water {
  background:
    radial-gradient(110% 85% at 78% 12%, rgba(227, 206, 149, 0.28), transparent 52%),
    linear-gradient(200deg, #24444d, var(--aqua-vitae) 60%, #0d2026);
}

.media--earth {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(227, 206, 149, 0.3), transparent 55%),
    linear-gradient(165deg, var(--terra), var(--umber) 75%);
}

.media--light {
  border-color: var(--ash-line);
  background:
    radial-gradient(115% 95% at 25% 0%, rgba(247, 243, 234, 0.85), transparent 60%),
    linear-gradient(170deg, var(--sol), #b39a63 85%);
}

.media--light .media__tag { color: var(--rubedo); }
.media--light .media__desc { color: rgba(58, 55, 51, 0.75); }
.media--light::after { border-color: rgba(107, 31, 42, 0.25); }

.media--velvet {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(227, 206, 149, 0.32), transparent 55%),
    linear-gradient(160deg, var(--umber), var(--nigredo) 82%);
}

.media--maroon {
  border-color: rgba(228, 211, 168, 0.3);
  background:
    radial-gradient(110% 85% at 22% 10%, rgba(228, 211, 168, 0.22), transparent 55%),
    linear-gradient(165deg, #7e2f3c, var(--porphyry) 80%);
}

/* ============ header ============ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 243, 234, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--citrinitas);
}

.site-head .wrap {
  max-width: none;
  padding-inline: clamp(1.75rem, 4.5vw, 4.5rem);
}

.site-head__row {
  --nav-gap: clamp(1.5rem, 3vw, 2.75rem);
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  padding-block: 1rem;
}

.wordmark__tagline {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.6rem, 2.5vw, 1.05rem);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.05em;
  color: var(--gold-ink);
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 46rem) {
  .wordmark__tagline { font-size: 0.85rem; white-space: normal; max-width: 17rem; }
}

.site-head__row .wordmark {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.6vw, 0.7rem);
  flex: 1 1 auto;
  min-width: 0;          /* lets the brand shrink instead of overflowing */
}

.site-head__row .wordmark__text { min-width: 0; }

.site-head__begin,
.nav-toggle { flex: none; }

.wordmark__logo {
  flex: none;
  width: auto;
  height: clamp(2.1rem, 9vw, 5rem);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 4.4vw, 2rem);
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nigredo);
}

.wordmark--tagged { display: inline-block; line-height: 1.2; }

.wordmark__tagline {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--gold-ink);
  margin-top: 0.15rem;
  white-space: nowrap;
}

@media (max-width: 46rem) {
  .wordmark__tagline { font-size: 0.68rem; white-space: normal; }
}

.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: var(--nav-gap);
}

.site-nav__link {
  font-family: var(--font-sacred);
  font-size: 1.0625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--cinder);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}

.site-nav__link:hover { color: var(--rubedo); border-color: var(--rubedo); }

.site-head__begin {
  padding: 0.7rem 1.55rem;
  font-size: 1.0625rem;
}

/* Launch offer bar · gold, attached beneath the header hairline */

.offer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 1.5rem;
  background: var(--citrinitas);
  color: #2B1D06;
  font-family: var(--font-sacred);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.6rem var(--gutter);
  transition: background-color var(--dur-ui) var(--ease-out);
}

.offer-bar:hover { background: var(--gold-pale); }

.offer-bar s,
.price-offer s {
  text-decoration: none;
  position: relative;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  opacity: 0.7;
}

.offer-bar s::after,
.price-offer s::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 52%;
  height: 1px;
  background: currentColor;
}

.offer-bar__count {
  font-variant-numeric: tabular-nums;
  color: var(--rubedo);
}

.price-offer strong { color: var(--rubedo); font-weight: 700; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.4rem;
  height: 1.5px;
  background: var(--cinder);
}

/* ============ sections ============ */

section { position: relative; scroll-margin-top: 7.5rem; }

/* 01 · Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100svh - 4.6rem);
}

.hero__copy {
  padding: var(--space-2xl) var(--gutter) var(--space-2xl) clamp(1.5rem, 4vw, 3rem);
  align-self: center;
  justify-self: start;
  width: min(100%, 40rem);
}

.hero__copy .label { font-size: 0.9375rem; }

.hero__copy .display--xl {
  font-size: clamp(3.5rem, 7.2vw, 6rem);
  margin-block: 1.2rem 0;
}

.hero__copy .gold-rule { margin: var(--space-md) 0; }

.hero__support {
  font-size: 1.3125rem;
  margin-bottom: var(--space-lg);
}

.hero__copy .btn {
  margin-left: 2.25rem;
  padding: 1.15rem 2.6rem;
  font-size: 0.875rem;
}

.hero .media { min-height: 34rem; border-block: 0; border-right: 0; }

/* 02 · Recognition */

.recognition {
  background: var(--warm);
  padding-block: var(--space-2xl);
  text-align: center;
}

.recognition__inner { max-width: 42rem; margin-inline: auto; }

.recognition .display--lg { margin-top: var(--space-md); }

.recognition .copy { margin-inline: auto; }

/* 03 · What Is Alchemize */

.what {
  padding-block: var(--space-2xl);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-xl);
  align-items: center;
}

.what .display--lg { margin-block: var(--space-sm) var(--space-md); }

.what__cta { margin-top: var(--space-lg); }

.what__stack { display: grid; gap: var(--space-sm); }

.what__stack .media:first-child { min-height: 13rem; }
.what__stack .media:last-child { min-height: 10rem; }

/* 04 · Mission */

.mission {
  position: relative;
  overflow: clip;
  background: var(--rubedo);
  padding-block: var(--space-xl);
}

.mission__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.mission__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(107, 31, 42, 0.55), rgba(74, 18, 28, 0.72));
}

.mission__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--space-3xl);
  display: grid;
  justify-items: center;
}

.mission__text {
  max-width: 46rem;
  text-align: center;
}

.mission .label { color: var(--gold-pale); }

.mission .display--lg { color: var(--rose-soft); margin-block: var(--space-sm); }

.mission .copy { color: var(--rose-copy); }

/* 05 · Vision */

.vision {
  position: relative;
  overflow: clip;
  padding-block: calc(var(--space-3xl) + var(--space-md));
  background: var(--nigredo) url("../images/vision-bg.jpg") center / cover no-repeat;
}

.vision__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 17, 16, 0.42), rgba(74, 18, 28, 0.58));
}

.vision__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.vision .label { color: var(--gold-pale); }

.vision .display--lg {
  margin-block: var(--space-sm);
  color: var(--albedo);
  text-shadow: 0 1px 22px rgba(18, 17, 16, 0.55);
}

@media (max-width: 46rem) {
  .vision { background-position: 62% center; padding-block: var(--space-2xl); }
}

/* 06 · Philosophy */

.philosophy { padding-block: var(--space-2xl); }

.philosophy__intro { max-width: 42rem; margin-bottom: var(--space-xl); }

.philosophy__intro .display--lg { margin-block: var(--space-sm) var(--space-md); }

.principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  perspective: 1200px;
}

.principle {
  position: relative;
  transform-style: preserve-3d;
  background-color: var(--warm);
  border: 1px solid var(--ash-line);
  border-top: 2px solid var(--citrinitas);
  padding: 4.4rem var(--space-md) 4rem;
  box-shadow: rgba(43, 29, 6, 0.14) 0 18px 26px -18px;
  transition:
    transform 0.6s var(--ease-in-out),
    box-shadow 0.6s var(--ease-in-out),
    background-color 0.6s var(--ease-in-out);
}

/* sun · top left */
.principle::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  width: 3rem;
  height: 3rem;
  background: url("../images/card-sun.png") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
  transition: transform 0.6s var(--ease-in-out);
}

/* moon · bottom right */
.principle::after {
  content: "";
  position: absolute;
  bottom: 0.9rem;
  right: 0.9rem;
  width: 2.6rem;
  height: 2.6rem;
  background: url("../images/card-moon.png") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
  transition: transform 0.6s var(--ease-in-out);
}

.principle .display--md {
  transition: transform 0.6s var(--ease-in-out), color 0.6s var(--ease-in-out);
}

.principle .aside-copy {
  margin-top: var(--space-2xs);
  display: block;
  transition: transform 0.6s var(--ease-in-out), color 0.6s var(--ease-in-out);
}

@media (hover: hover) {
  .principle:hover {
    transform: rotate3d(0.4, 1, 0, 9deg);
    background-color: var(--rubedo);
    border-color: var(--porphyry);
    border-top-color: var(--citrinitas);
    box-shadow: rgba(43, 29, 6, 0.3) -14px 26px 34px -16px;
  }

  .principle:hover .display--md { color: var(--rose-soft); }

  .principle:hover .aside-copy { color: var(--gold-pale); }

  .principle:hover::before,
  .principle:hover::after { transform: translate3d(0, 0, 30px); }

  .principle:hover .display--md { transform: translate3d(0, 0, 40px); }

  .principle:hover .aside-copy { transform: translate3d(0, 0, 22px); }
}

.principle:active { transform: scale(0.985); }

/* tapped state on touch devices · one card at a time, toggled by script */
.principle.is-active {
  background-color: var(--rubedo);
  border-color: var(--porphyry);
  border-top-color: var(--citrinitas);
}

.principle.is-active .display--md { color: var(--rose-soft); }

.principle.is-active .aside-copy { color: var(--gold-pale); }

@media (prefers-reduced-motion: reduce) {
  .principle, .principle:hover { transform: none; }
}

.philosophy .media { min-height: 32rem; margin-top: var(--space-xl); }

/* Show the full artwork, floated on a parchment ground, no cropping */
.philosophy .media--img { background: #EFE6CB; }
.philosophy .media--img .media__img { object-fit: contain; }

.philosophy__cta { margin-top: var(--space-lg); }

/* 07 · Founder */

.founder {
  background: var(--warm);
  padding-block: var(--space-2xl);
}

.founder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}

.founder__images {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

.founder__images .media--tall { grid-row: span 2; min-height: 24rem; }
.founder__images .media--small { min-height: 11rem; }
.founder__images .media::after { display: none; }

.founder__images--single { grid-template-columns: minmax(0, 1fr); }
.founder__images--single .media--tall { grid-row: auto; height: 100%; min-height: 30rem; }

.founder__text .display--lg { margin-block: var(--space-sm) var(--space-md); }

.founder__quote {
  border-top: 1px solid var(--ash-line);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}

.founder__cta { margin-top: var(--space-lg); }

/* 08 · Ways to Work */

.ways { padding-block: var(--space-2xl); }

.ways__head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-xl);
}

.ways__head .display--lg { margin-block: var(--space-sm) var(--space-xs); }

.ways__head .copy { margin-inline: auto; }

.offer-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) 1.25rem;
  margin-inline: -1.25rem;
  border-bottom: 1px solid var(--ash-line);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-ui) var(--ease-out);
}

.offer-row:hover { background: rgba(232, 224, 209, 0.45); }

.offer-row--flagship {
  background: #FAF5EA;
  border-left: 2px solid var(--citrinitas);
}

.offer-row .media { min-height: 4.5rem; padding: 0.4rem; }
.offer-row .media::after { display: none; }
.offer-row .media .media__tag { font-size: 0.5rem; margin: 0; letter-spacing: 0.14em; }

.offer-row__detail { font-size: var(--text-small); }

.offer-row__meta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--alembic);
}

.offer-row__meta .price-offer strong { font-size: 1.25rem; }

.offer-row__meta strong {
  font-style: normal;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--nigredo);
}

.offer-row__meta small {
  display: block;
  font-size: 0.9375rem;
  color: var(--alembic);
  margin-top: 0.15rem;
}

.offer-row__cta { justify-self: end; }

/* FAQ · quiet expandable rows */

.faq { padding-block: var(--space-2xl); }

.faq__head { max-width: 40rem; margin-bottom: var(--space-lg); }

.faq__head .display--lg { margin-top: var(--space-sm); }

.faq details { border-top: 1px solid var(--ash-line); }

.faq details:last-of-type { border-bottom: 1px solid var(--ash-line); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.3rem;
  color: var(--nigredo);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold-ink);
  line-height: 1;
  transition: transform var(--dur-ui) var(--ease-out);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq__a { padding: 0 0 1.3rem; max-width: 60ch; }

.faq__a p + p { margin-top: 0.6rem; }

/* 09 · Editorial break */

.break .media {
  min-height: 20rem;
  border-inline: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.break .media__note { max-width: 40ch; }

/* 10 · Journal */

.journal {
  background: var(--warm);
  padding-block: var(--space-2xl);
}

.journal__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.journal__head .aside-copy { flex: 1; }

.journal__head .btn { margin-left: auto; }

.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.journal__grid--reels { align-items: start; }

.journal-reel blockquote.instagram-media {
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border: 1px solid var(--ash-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.journal-reel a {
  font-family: var(--font-sacred);
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.journal-card { text-decoration: none; color: inherit; display: block; }

.journal-card .media { min-height: 12rem; margin-bottom: var(--space-sm); }

.journal-card .display--md {
  margin-block: var(--space-2xs);
  transition: color var(--dur-ui) var(--ease-out);
}

.journal-card:hover .display--md { color: var(--rubedo); }

/* 11 · Final invitation */

.invitation {
  position: relative;
  overflow: clip;
  background: var(--porphyry);
  padding-block: var(--space-3xl);
  text-align: center;
}

.invitation__loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invitation__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(74, 18, 28, 0.62), rgba(18, 17, 16, 0.72));
}

.invitation__inner { position: relative; z-index: 1; }

/* the phrase that carries the brand · gold reads on the dark film,
   maroon would disappear into the ground behind it */
.invitation .accent {
  font-style: italic;
  font-weight: 400;
  color: var(--citrinitas);
}

/* closing CTA · beneath the film */
.invitation-cta {
  background: var(--porphyry);
  padding: var(--space-xl) 0 var(--space-2xl);
  text-align: center;
}

.invitation__emblem { margin: 0 auto var(--space-lg); width: auto; height: 7rem; opacity: 0.9; display: block; }

.invitation .display--xl {
  color: var(--rose-soft);
  max-width: 22ch;
  margin-inline: auto;
}

.invitation__body {
  max-width: var(--measure);
  margin: 0 auto var(--space-lg);
}

.invitation .copy {
  color: var(--rose-copy);
  margin-inline: auto;
}

.invitation__secondary {
  display: block;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold-pale);
}

.invitation__secondary a { color: inherit; }

/* ============ footer ============ */

.site-foot {
  background: var(--nigredo);
  color: var(--alembic);
  padding-block: var(--space-xl);
  font-size: var(--text-caption);
}

.site-foot__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.site-foot .wordmark { color: var(--albedo); font-size: 1.05rem; }

.site-foot__tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--alembic);
  margin-top: var(--space-2xs);
}

.site-foot__heading {
  font-family: var(--font-sacred);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: var(--space-xs);
}

.site-foot__links { list-style: none; margin: 0; padding: 0; }

.site-foot__links li { margin-bottom: 0.4rem; }

.site-foot__links a {
  text-decoration: none;
  color: var(--alembic);
  transition: color var(--dur-ui) var(--ease-out);
}

.site-foot__links a:hover { color: var(--albedo); }

.newsletter { display: flex; gap: 0.5rem; margin-top: var(--space-xs); }

.newsletter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #3d3a35;
  color: var(--albedo);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  padding: 0.55rem 0.75rem;
}

.newsletter input::placeholder { color: var(--alembic); }

.newsletter input:focus-visible { outline-color: var(--citrinitas); }

.site-foot__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid #26231f;
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.site-foot__legal a {
  color: var(--alembic);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-out);
}

.site-foot__legal a:hover { color: var(--albedo); }

/* ============ reveal ============ */

.reveal { opacity: 0; transform: translateY(14px); }

.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-quiet) var(--ease-out), transform var(--dur-quiet) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .reveal.in { transition: opacity 150ms var(--ease-out); }
  * { transition-duration: 1ms !important; }
}

/* ============ responsive ============ */

@media (max-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .media { order: -1; min-height: 22rem; border-right: 1px solid var(--ash-line); }
  .hero__copy { padding-block: var(--space-xl); justify-self: start; }

  .what, .mission__inner, .founder__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

  .principles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .journal__grid { grid-template-columns: minmax(0, 1fr); }

  .offer-row {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb detail"
      "thumb meta"
      "thumb cta";
    row-gap: 0.5rem;
  }
  .offer-row .media { grid-area: thumb; align-self: start; }
  .offer-row__name { grid-area: name; }
  .offer-row__detail { grid-area: detail; }
  .offer-row__meta { grid-area: meta; }
  .offer-row__cta { grid-area: cta; justify-self: start; }

  .site-foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 46rem) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    background: var(--albedo);
    border-bottom: 1px solid var(--citrinitas);
    padding: var(--space-md) var(--gutter);
  }

  .site-nav.open { display: flex; }

  .nav-toggle { display: flex; }

  /* compact brand + begin so all three fit on one row */
  .site-head__row { gap: clamp(0.4rem, 2vw, 0.9rem); padding-block: 0.6rem; }

  .site-head .wrap { padding-inline: clamp(0.85rem, 4vw, 1.75rem); }

  .site-head__begin {
    padding: 0.5rem clamp(0.6rem, 3vw, 1rem);
    font-size: clamp(0.6875rem, 3vw, 0.8125rem);
    white-space: nowrap;
  }

  .wordmark__tagline { max-width: none; }

  /* very small handsets · the tagline steps aside so nothing collides */
  @media (max-width: 23.5rem) {
    .wordmark__tagline { display: none; }
  }

  /* Begin stays visible beside the toggle on mobile */
  .site-head__begin { order: 2; margin-left: auto; }
  .nav-toggle { order: 3; margin-left: 0; }

  .hero__copy .btn { margin-left: 0; }

  .hero__copy { padding-block: var(--space-lg) var(--space-xl); }
  .hero__copy .label { font-size: 0.8125rem; letter-spacing: 0.22em; }
  .hero__copy .display--xl { font-size: clamp(2.5rem, 11vw, 3.4rem); margin-block: 0.8rem 0; }
  .hero__copy .gold-rule { margin: 1rem 0; }
  .hero__support { font-size: 1.0625rem; margin-bottom: var(--space-md); }
  .hero__copy .btn { padding: 1rem 2rem; font-size: 0.8125rem; }

  /* principles become swipeable cards */
  .principles {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-sm);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .principles::-webkit-scrollbar { display: none; }

  .principle {
    flex: 0 0 80%;
    scroll-snap-align: center;
  }

  .founder__images { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .founder__images--single { grid-template-columns: minmax(0, 1fr); }

  .founder__images--single .media--tall { min-height: 26rem; }

  .founder__images--single .media__img { object-position: 50% 100%; }

  /* journal head stacks and shares the reels' centered column, edges aligned */
  .journal__head,
  .journal-reel {
    width: min(100%, 326px);
    margin-inline: auto;
  }

  .journal__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  .journal__head .aside-copy { flex: none; }

  .journal__head .btn { margin-left: 0; margin-top: var(--space-xs); }

  .journal-reel { display: flex; justify-content: center; }

  .journal-reel blockquote.instagram-media { margin-inline: auto !important; }

  .site-foot__grid { grid-template-columns: minmax(0, 1fr); }

  .invitation { padding-block: var(--space-2xl); }
}