/* Mahadev Foundation: the page CSS on top of the design kit (public/assets).

   1. The faces, self-hosted (nothing from anyone else's servers).
   2. The brand: leaf green carries the inverse ground (heroes, the bar, the
      footer, the tab bar), turmeric is its one action colour, paper the page.
   3. The parts the kit has no class for: the lockup, wing cards, the
      before/after frame, the cafe wall, the reading pages.
   4. The phone: an app's bars, the tab bar at the foot.
   5. The page transitions (cross-document view transitions). */

/* 1. Faces ---------------------------------------------------------------- */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("/fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-display: swap;
  font-weight: 400 800;
  src: url("/fonts/eb-garamond-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
}

/* 2. Brand ---------------------------------------------------------------- */
:root {
  --leaf: #0f3d2e;
  --leaf-2: #164d3a;
  --leaf-3: #1f5e47;
  --turmeric: #f2a900;
  --turmeric-2: #ffbf2e;
  --paper: #f7f1e3;
  /* the inverse ground is the leaf, not the kit's near-black: turmeric acts on it */
  --p-inv-bg: var(--leaf); --p-inv-surface: var(--leaf-2); --p-inv-ink: var(--paper); --p-inv-muted: #bfcdbb;
  --p-inv-accent: var(--turmeric); --p-inv-accent-ink: #10140f; --p-inv-action: var(--turmeric); --p-inv-action-ink: #10140f;
  --lockup-leaf: clamp(72px, 7.2vw, 112px);
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--turmeric); color: #10140f; }

/* The turmeric band: one section on the home page, the figures. */
.ground-turmeric {
  --bg: var(--turmeric); --surface: #f7c445; --ink: #10140f; --muted: #3d3a26;
  --accent: var(--leaf); --accent-ink: var(--paper); --card: #f7c445;
  --action: var(--leaf); --action-ink: var(--paper);
  --line: color-mix(in oklab, #10140f 18%, transparent);
  background: var(--bg); color: var(--ink);
}

/* The bar: leaf green, the leaf in turmeric. */
header.nav {
  --bg: var(--leaf); --ink: var(--paper); --muted: #bfcdbb;
  --action: var(--turmeric); --action-ink: #10140f;
  --line: color-mix(in oklab, var(--paper) 14%, transparent); --line-strong: color-mix(in oklab, var(--paper) 26%, transparent);
  background: var(--leaf); color: var(--paper); border-bottom-color: transparent;
}
header.nav .nav__menu { --bg: var(--paper); --ink: #10140f; --muted: #65655c; --action: var(--leaf); --line: color-mix(in oklab, #10140f 11%, transparent); color: #10140f; }
.nav__logo { display: inline-flex; align-items: center; gap: 12px; }
.nav__logo .leaf { color: var(--turmeric); flex: none; }
.nav__name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; }

/* The lockup: the big leaf beside the name, above the home page's h1. */
.lockup { display: flex; align-items: center; gap: clamp(16px, 2vw, 24px); margin: 0; }
.lockup__leaf { color: var(--turmeric); flex: none; }
.lockup__name { font-family: var(--font-display); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.05; letter-spacing: -0.01em; color: var(--paper); }
.lockup--small .lockup__name { font-family: var(--font-text); font-size: 15px; line-height: 1.35; letter-spacing: 0; color: var(--muted); }
.hero__text > .lockup + h1 { margin-top: clamp(24px, 3.4vh, 40px); }
.wingmark { margin: 0; line-height: 0; }
.wingmark img { height: clamp(56px, 5.6vw, 84px); width: auto; }
.hero__text > .wingmark + h1 { margin-top: clamp(20px, 3vh, 32px); }
.hero.ground-inverse h1 { color: var(--paper); }

/* 3. Parts ---------------------------------------------------------------- */

/* Wing cards: photograph, then the wing's own logo on leaf green. */
.wings { align-items: stretch; }
.card.wing { padding: 0; overflow: hidden; display: flex; flex-direction: column; border: 0; background: var(--leaf); color: var(--paper); }
.wing__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.wing__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wing__body { display: grid; gap: var(--s-4); padding: 28px; flex: 1; align-content: start; }
.wing__logo { height: var(--logo-h, 56px); width: auto; max-width: 70%; object-fit: contain; object-position: left center; }
.wing__body p { margin: 0; font-size: 16px; line-height: 24px; color: color-mix(in oklab, var(--paper) 88%, transparent); }
.wing__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 500; color: var(--turmeric); }
.wing__go .m-arrow { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Story cards on /samam: the photograph on top, the words in the card. */
.card.story { display: flex; flex-direction: column; }
.story__photo { position: relative; aspect-ratio: 16 / 9; margin: calc(-1 * var(--c-pad, 32px)) calc(-1 * var(--c-pad, 32px)) var(--s-5); overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.story__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card.story .card__link { margin-top: auto; padding-top: var(--s-4); color: var(--leaf); }
.card.story .m-arrow { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Photographs in splits and pairs: one ratio a row. */
.record__photo, .village__photo, .work__photo, .ways__photo { --ratio: 75%; }
@media (min-width: 1024px) { .record__photo, .village__photo, .work__photo, .ways__photo { --ratio: 0px; height: min(660px, calc(100svh - var(--padt) - var(--padb))); } }
.pair > .frame--photo { --ratio: 66.6%; }
.sheets > .sheet { --ratio: 141%; background: #fff; }
.sheets > .sheet > .frame__img { object-fit: contain; }
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(560px, var(--ly-fit, 560px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* The figures on turmeric: a big numeral, the name, one line. */
.rows--figures > li { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; }
.rows--figures .rows__name { font-size: var(--t-lead); }
.rows--figures .rows__fig { grid-row: 1 / span 2; font-family: var(--font-display); font-size: var(--t-stat, 38px); line-height: 1; color: var(--leaf); min-width: 1.2ch; }
.rows--figures .rows__name { grid-column: 2; }
.rows--figures > li > p { grid-column: 2; margin: 0; }
.record__note { margin-top: var(--s-6); max-width: 46ch; font-weight: 500; }

/* Before and after, in one frame. */
.ba { position: relative; aspect-ratio: 900 / 553; overflow: hidden; border-radius: var(--r-lg); user-select: none; background: var(--surface); }
@media (min-width: 1024px) { .ba { aspect-ratio: auto; height: min(708px, calc(100svh - var(--padt) - var(--padb))); } }
.ba > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba > .ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag { position: absolute; top: var(--s-4); padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, #10140f 70%, transparent); color: var(--paper); font-size: 13px; font-weight: 500; pointer-events: none; }
.ba__tag--before { left: var(--s-4); }
.ba__tag--after { right: var(--s-4); background: var(--turmeric); color: #10140f; }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--paper); pointer-events: none; }
.ba__grip { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--turmeric); color: #10140f; display: grid; place-items: center; pointer-events: none; box-shadow: 0 2px 10px rgb(0 0 0 / .25); }
.ba__grip svg { width: 22px; height: 22px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba:has(.ba__range:focus-visible) .ba__grip { outline: 2px solid var(--paper); outline-offset: 3px; }

/* The cafe: eight small photographs, a wall of four by two. */
.wall--cafe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: var(--r-lg); overflow: hidden; }
.wall__tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.wall__tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .wall--cafe { height: min(460px, 50svh); } .wall__tile { aspect-ratio: auto; } }

/* The reading pages: a short head, one column. */
.hero.hero--doc { height: auto; min-height: 0; padding-bottom: var(--s-8); }
.hero--doc h1 { max-width: 20ch; }
.hero--404 { min-height: 100svh; }
.lost__leaf { color: var(--turmeric); }
main > .section.section--doc { height: auto; min-height: 0; }
.doc { max-width: 68ch; }
.doc > h2 { font-size: var(--t-h3); margin: var(--s-8) 0 var(--s-4); }
.doc > p, .doc li { font-size: 17px; line-height: 1.7; }
.doc > ul { padding-left: 1.2em; }
.doc li + li { margin-top: var(--s-2); }
.doc .updated { color: var(--muted); font-size: var(--t-small); }
.doc a:not(.link) { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }
.doc__lead { font-size: var(--t-lead); line-height: 1.5; margin-bottom: var(--s-7); }
.rows--contact .rows__name { color: var(--muted); font-weight: 500; }
.doc .note { margin-top: var(--s-7); padding: var(--s-5); border-radius: var(--r-md); background: var(--surface); font-size: 16px; }

/* The footer on leaf green. */
.footer--brand .nav__logo .leaf { color: var(--turmeric); }
.footer--brand .nav__logo span { font-family: var(--font-display); font-size: 22px; }
.footer__legal-links { display: inline-flex; gap: var(--s-5); }
.footer--brand a:not(.btn) { color: var(--paper); }
.footer--brand .close__media { background: var(--leaf-2); }

/* 4. The phone: an app ----------------------------------------------------- */
.tabbar { display: none; }
@media (max-width: 639px) {
  :root { --bar: calc(64px + env(safe-area-inset-bottom)); }
  html, body { overscroll-behavior-y: none; }
  /* the bar is the app's title bar: the leaf and the name, nothing to open */
  header.nav .nav__links, header.nav .nav__actions, header.nav .nav__toggle { display: none !important; }
  header.nav { padding-top: env(safe-area-inset-top); }
  .nav__name { font-size: 20px; }
  main > :is(.hero, .section--hero) { --bar: calc(64px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: var(--leaf); color: var(--paper);
    border-top: 1px solid color-mix(in oklab, var(--paper) 12%, transparent);
  }
  .tabbar__tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 44px; color: color-mix(in oklab, var(--paper) 72%, transparent);
    text-decoration: none; font-size: 13px; font-weight: 500; line-height: 1;
    transition: transform 90ms var(--ease), color 150ms var(--ease);
  }
  .tabbar__tab:active { transform: scale(.94); }
  .tabbar__icon { width: 24px; height: 24px; }
  .tabbar__tab[aria-current="page"] { color: var(--turmeric); }
  .tabbar__tab[aria-current="page"] .tabbar__label { font-weight: 600; }

  .lockup { --lockup-leaf: 64px; }
  .wing__photo { aspect-ratio: 16 / 10; }
  .wing__body { padding: 24px; }
  .wall--cafe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 5. Page transitions ---------------------------------------------------- */
@view-transition { navigation: auto; }

header.nav { view-transition-name: appbar; }
.tabbar { view-transition-name: tabbar; }
.leaf--morph { view-transition-name: brand; }

::view-transition-group(*) { animation-duration: 380ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root) { animation: 160ms cubic-bezier(.4, 0, 1, 1) both vt-fade-out; }
::view-transition-new(root) { animation: 240ms cubic-bezier(.2, .8, .2, 1) 60ms both vt-fade-in; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(28px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-28px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes vt-push-in { from { transform: translateX(100%); } }
@keyframes vt-push-out { to { transform: translateX(-30%); filter: brightness(.8); } }
@keyframes vt-pop-in { from { transform: translateX(-30%); filter: brightness(.8); } }
@keyframes vt-pop-out { to { transform: translateX(100%); } }

/* Desktop: tabs slide a little by their order; the rest crossfades. */
html:active-view-transition-type(tab-fwd)::view-transition-old(root) { animation: 180ms cubic-bezier(.4, 0, 1, 1) both vt-out-left; }
html:active-view-transition-type(tab-fwd)::view-transition-new(root) { animation: 280ms cubic-bezier(.2, .8, .2, 1) 40ms both vt-in-right; }
html:active-view-transition-type(tab-back)::view-transition-old(root) { animation: 180ms cubic-bezier(.4, 0, 1, 1) both vt-out-right; }
html:active-view-transition-type(tab-back)::view-transition-new(root) { animation: 280ms cubic-bezier(.2, .8, .2, 1) 40ms both vt-in-left; }

/* The phone: deeper pages push in from the right over the last one, and
   going back pops them off, as an app's screens do. */
@media (max-width: 639px) {
  html:active-view-transition-type(push)::view-transition-old(root) { animation: 340ms cubic-bezier(.2, .8, .2, 1) both vt-push-out; }
  html:active-view-transition-type(push)::view-transition-new(root) { animation: 340ms cubic-bezier(.2, .8, .2, 1) both vt-push-in; box-shadow: -12px 0 32px rgb(0 0 0 / .18); }
  html:active-view-transition-type(back)::view-transition-old(root) { animation: 300ms cubic-bezier(.2, .8, .2, 1) both vt-pop-out; z-index: 1; box-shadow: -12px 0 32px rgb(0 0 0 / .18); }
  html:active-view-transition-type(back)::view-transition-new(root) { animation: 300ms cubic-bezier(.2, .8, .2, 1) both vt-pop-in; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Fit fixes from the kit's layout check ----------------------------------- */
/* Lichen's three sheets stay three across at every width: they are drawings, read whole. */
.sheets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheets > .sheet { grid-column: auto / span 1; }
@media (min-width: 1024px) { .sheets > .sheet { --ratio: 0px; height: min(520px, calc(100svh - 360px)); } }
/* The cafe wall takes what the screen leaves under its heading. */
@media (min-width: 1024px) { .wall--cafe { height: min(600px, calc(100svh - 330px)); } }
/* Story cards: a taller photograph on a desktop. */
@media (min-width: 1024px) { .story__photo { aspect-ratio: 16 / 8; } }
/* The tablet: a wing card lies on its side, the photograph left. */
@media (min-width: 640px) and (max-width: 1023px) {
  .wings > .card.wing { grid-column: 1 / -1; flex-direction: row; }
  .wing__photo { aspect-ratio: auto; flex: 0 0 42%; }
}
/* The phone: wings swipe sideways like an app's cards; the hero fits one screen with the tab bar. */
@media (max-width: 639px) {
  :root { --hgap: 24px; }
  .lockup { --lockup-leaf: 44px; gap: 12px; }
  .lockup__name { font-size: 20px; }
  .wingmark img { height: 36px; }
  .hero__text > .lockup + h1, .hero__text > .wingmark + h1 { margin-top: 16px; }
  .wings > .card.wing { grid-column: 1 / -1; }
}
.hero--404 > .wrap { padding-top: var(--s-6); }
/* The tablet: taller frames so each section fills its screen. */
@media (min-width: 640px) and (max-width: 1023px) {
  .sheets > .sheet { --ratio: 220%; }
  .wall__tile { aspect-ratio: 3 / 4; }
  .story__photo { aspect-ratio: 1; }
}
/* The phone: Lichen's sheets swipe too. */
@media (max-width: 639px) {
  .grid.sheets {
    display: grid; grid-auto-flow: column; grid-auto-columns: 80%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scroll-padding-inline: var(--gut);
  }
  .grid.sheets::-webkit-scrollbar { display: none; }
  .sheets > .sheet { grid-column: auto; scroll-snap-align: start; --ratio: 141%; }
}
/* Fits from consistency.mjs */
@media (min-width: 1024px) { .wing__photo { aspect-ratio: 16 / 10; } }
@media (max-width: 639px) {
  /* one action in a phone's hero, like an app's first screen */
  .hero--brand .btn--secondary { display: none; }
}
@media (max-width: 639px) {
  #record .record__note { display: none; }
  #record .record__photo { --ratio: 50%; margin-top: var(--s-5); }
  .rows--figures > li { padding-block: var(--s-3); }
}
#taranya .t-lead > label { display: block; margin-top: var(--s-2); }
/* A guest's words on the cafe */
.quote { margin: var(--s-4) 0 0; max-width: 60ch; }
.quote p { font-family: var(--font-display); font-size: var(--t-lead); line-height: 1.4; color: var(--ink); margin: 0; }
.quote footer { margin-top: var(--s-2); font-size: var(--t-small); color: var(--muted); }

/* ---- The opening photograph, across the whole width ---------------------- */
.hero--brand, .hero--brand[data-tone] { background: var(--leaf); }
.hero--brand::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(15 61 46 / .94) 0%, rgb(15 61 46 / .62) 34%, rgb(15 61 46 / 0) 68%),
    linear-gradient(to right, rgb(15 61 46 / .6) 0%, rgb(15 61 46 / 0) 58%);
}
.hero--brand > .wrap { position: relative; z-index: 1; }
.hero--brand .hero__text { width: min(100%, 760px); }
.hero--brand h1 { color: var(--paper); max-width: 15ch; text-wrap: balance; }
.hero--brand .hero__lead { color: color-mix(in oklab, var(--paper) 92%, transparent); max-width: 50ch; }
.hero--brand .btn-row { --action: var(--turmeric); --action-ink: #10140f; --ink: var(--paper); --bg: var(--leaf); --line-strong: rgb(247 241 227 / .6); }
html[data-buttons="block"] .hero--brand .btn--secondary { color: var(--paper); text-decoration-color: rgb(247 241 227 / .6); }
/* a small photograph keeps to the right, fading into the green, never blown up */
.hero--half > .hero__bg { left: auto; width: 62%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
.hero--half::after { background: linear-gradient(to top, rgb(15 61 46 / .7) 0%, rgb(15 61 46 / 0) 40%); }
/* the phone and the tablet: the photograph fills the screen like an app's first screen, the words at its foot */
@media (max-width: 1023px) {
  .hero--brand, .hero--brand[data-tone] { --photo: 0px; color: var(--paper); --ink: var(--paper); --muted: #bfcdbb; }
  .hero--brand > .hero__bg { top: 0; height: 100%; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero--brand > .wrap > .hero-text { justify-content: flex-end; }
  .hero--brand::after, .hero--half::after { background: linear-gradient(to top, rgb(15 61 46 / .96) 0%, rgb(15 61 46 / .75) 42%, rgb(15 61 46 / .1) 72%, rgb(15 61 46 / .35) 100%); }
  html[data-buttons="block"] .hero--brand[data-tone="dark"] .btn--secondary { color: var(--paper); }
}

/* ---- Three steps, side by side, nothing pinned --------------------------- */
.steps { list-style: none; padding: 0; margin: 0; }
.step__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); margin-bottom: var(--s-5); background: var(--surface); }
.step__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.step h3 { display: flex; align-items: baseline; gap: 12px; font-size: var(--t-card); }
.step__n { font-family: var(--font-display); font-size: 36px; line-height: 1; color: var(--leaf); }
.step p { margin-top: var(--s-2); max-width: 40ch; }
@media (min-width: 640px) and (max-width: 1023px) { .steps > .step { grid-column: auto / span 4; } .step__photo { aspect-ratio: 3 / 5; } }
@media (max-width: 639px) { .steps > .step { grid-column: 1 / -1; } }

/* ---- Splits: the words centred against their picture --------------------- */
main > .section > .wrap.grid.grid--top { align-items: center; }
@media (min-width: 1024px) { .record__develop { height: min(620px, calc(100svh - var(--padt) - var(--padb))); } }
@media (max-width: 1023px) { .develop { grid-column: 1 / -1; } }
@media (max-width: 639px) { .record__develop { aspect-ratio: 16 / 9; margin-top: var(--s-5); } }

/* ---- The close: the page's photograph behind the whole footer ---------- */
footer.closing.footer--brand { position: relative; isolation: isolate; overflow: clip; }
footer.closing.footer--brand > .close__bg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
footer.closing.footer--brand > .wrap { position: relative; z-index: 1; }
footer.closing.footer--brand::after {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(15 61 46 / .25) 0%, rgb(15 61 46 / .55) 30%, var(--leaf) 72%),
    linear-gradient(to right, rgb(15 61 46 / .6) 0%, rgb(15 61 46 / 0) 65%);
}
.close--bleed { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s-7); --close-leaf: clamp(88px, 13.4vw, 193px); }
.close__words { display: grid; gap: var(--s-5); justify-items: start; }
.close__words h2 { font-size: clamp(52px, 7.6vw, 124px); line-height: .95; letter-spacing: -0.02em; color: var(--paper); max-width: 11ch; }
.close__words .t-lead { max-width: 52ch; color: var(--paper); }
.close__words .btn { --action: var(--turmeric); --action-ink: #10140f; }
.close__leaf { flex: none; color: var(--turmeric); }
@media (max-width: 639px) {
  .close--bleed { flex-direction: column-reverse; align-items: flex-start; --close-leaf: 64px; }
  .close__words .btn { width: 100%; }
  /* the photograph only behind the close, so it is never blown up; the links sit on the green */
  footer.closing.footer--brand > .close__bg { height: 56%; }
  footer.closing.footer--brand::after { background: linear-gradient(to bottom, rgb(15 61 46 / .35) 0%, rgb(15 61 46 / .9) 34%, var(--leaf) 56%); }
}

/* ---- Phone fixes from the gate ------------------------------------------ */
@media (max-width: 639px) {
  .hero--brand > .hero__bg { top: var(--nav); height: calc(100% - var(--nav)); }
  .hero--brand::after, .hero--half::after { background: linear-gradient(to top, rgb(15 61 46 / .97) 0%, rgb(15 61 46 / .94) 62%, rgb(15 61 46 / .3) 86%, rgb(15 61 46 / .3) 100%); }
  /* the steps as an app's list rows: a square photograph, the words beside it */
  .steps { row-gap: var(--s-5); }
  .steps > .step { display: grid; grid-template-columns: 136px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
  .step__photo { grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; border-radius: var(--r-md); }
  .step__n { font-size: 24px; }
  .step h3 { font-size: 18px; }
  .step p { margin-top: var(--s-1); font-size: 15px; line-height: 1.5; }
  .wing__photo { aspect-ratio: 16 / 9; }
}
/* the lockup stands stacked on a desktop: the leaf over the name, both on the left line */
@media (min-width: 1024px) {
  .lockup:not(.lockup--small) { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 639px) { body > main > .hero.hero--brand { padding-bottom: calc(var(--hpadb, 24px) + 64px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .step__photo { aspect-ratio: 1; } }