/* Project HeartPack: one stylesheet for the four pages. Paper, ink, one red. */

:root {
  --paper: #f6f3ee;
  --surface: #fbfaf7;
  --ink: #14213a;
  --ink-soft: #4f5a70;
  --accent: #c8313f;
  --hairline: rgba(20, 33, 58, 0.14);
  --hairline-strong: rgba(20, 33, 58, 0.32);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-text: "Newsreader", Georgia, serif;

  --t-xs: clamp(0.78rem, 0.74rem + 0.15vw, 0.85rem);
  --t-sm: clamp(0.9rem, 0.86rem + 0.18vw, 0.98rem);
  --t-base: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  --t-lg: clamp(1.25rem, 1.12rem + 0.6vw, 1.6rem);
  --t-xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --t-2xl: clamp(2.4rem, 1.7rem + 3vw, 4rem);
  --t-3xl: clamp(3rem, 1.8rem + 5.5vw, 6rem);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 72rem;
  --measure: 62ch;
  --section: clamp(4rem, 8vw, 8rem);
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0; }
p + p { margin-top: 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 0.18em; transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.01em; }
/* section-level headings inside a half-width column */
.split h2, .entry h2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.soft { color: var(--ink-soft); }
.lede { font-size: var(--t-lg); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }
.small { font-size: var(--t-sm); }
.fine { font-size: var(--t-xs); color: var(--ink-soft); }

.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  padding: var(--s-2) var(--s-3);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-size: var(--t-sm);
  text-decoration: none; z-index: 10;
}
.skip:focus { top: var(--s-3); }

/* ----------------------------------------------------------------- header -- */
.site-header { border-bottom: 1px solid var(--hairline); background: var(--paper); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 4.5rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-3);
  /* same treatment as the avatar: Newsreader italic under the mark */
  font-family: var(--font-text); font-style: italic; font-weight: 500; font-size: var(--t-lg);
  text-decoration: none;
}
.wordmark img { width: auto; height: 34px; }
.wordmark__text {
  /* the nav links' line box, so the two underlines sit on one line */
  line-height: calc(var(--t-sm) * 1.6);
  padding: var(--s-2) 0; border-bottom: 2px solid transparent;
  transition: border-color 160ms var(--ease);
}
.wordmark:hover .wordmark__text { border-bottom-color: var(--hairline-strong); }
.wordmark.is-home .wordmark__text { border-bottom-color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: var(--s-6); }
.site-nav a {
  font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm);
  text-decoration: none; color: var(--ink-soft);
  padding: var(--s-2) 0; border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.site-nav a.nav-give { color: var(--accent); font-weight: 700; }
.site-nav a.nav-give[aria-current="page"] { border-bottom-color: var(--accent); }
.nav-new { display: inline-block; width: 0.45rem; height: 0.45rem; margin-left: 0.3rem; vertical-align: super; border-radius: 50%; background: var(--accent); }

@media (max-width: 560px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; padding-block: var(--s-3) var(--s-2); }
  .site-nav { width: 100%; gap: var(--s-5); }
  .wordmark__text { padding-block: var(--s-1); }
}

/* ------------------------------------------------------------------- hero -- */
/* short enough that the group photograph under it shows on the first screen */
.hero { padding-block: clamp(2rem, 4vw, 3.5rem) var(--s-6); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-8); align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: var(--s-5); }
.hero h1 { max-width: 9ch; }
.hero__note { font-style: italic; color: var(--ink-soft); font-size: var(--t-sm); }
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }

@media (max-width: 860px) {
  .hero { padding-block: var(--s-5) var(--s-5); }
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero__note { display: none; } /* repeated in the footer; on a phone it only pushes the photograph down */
  .hero__photo { order: -1; }
  .hero__photo img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------- envelope --
   The real fold: a body with two lobes, the heart's V lying on the front, and
   the bottom third folded up and tucked under that V. It opens in the order
   the paper allows: the heart's V folds up and out of the way first, and only
   then does the pocket it was holding swing down. Nothing passes through
   anything: the flap is above the pocket while it is closed and has left the
   pocket's path before the pocket moves; the pocket sits over the hems.
   Units come from a 400 x 586 drawing: 186 for the opened flap above the body,
   200 of body (lobes rise 50 into the flap's space), 200 of pocket below. The
   pocket is as tall as the body, so closed it covers the whole front. Hinge
   overlaps live on the panels that sit on top (flap inner face, pocket), never
   on the body, so nothing pokes out past the envelope's outline.
   Base styles are the OPEN state, so no animation support still shows it open. */
.hero__envelope { display: flex; justify-content: center; }
.envelope {
  --env-back: #a92532;
  --env-pocket: #c8313f;
  --env-front: #d84a58;
  --env-inner: #cf3c4a;
  --env-hem: #b92b38;
  position: relative;
  width: min(100%, 19rem);
  aspect-ratio: 400 / 586;
  cursor: pointer;
}
.envelope svg { display: block; width: 100%; height: 100%; overflow: visible; }
.envelope__body, .envelope__hems, .envelope__flap {
  position: absolute; left: 0; top: 23.208%; width: 100%; height: 42.662%;
}
.envelope__body { z-index: 1; }
.envelope__hems { z-index: 2; }
.env-back { fill: var(--env-back); shape-rendering: crispEdges; }
.env-flap { fill: var(--env-front); }
.env-flap-inner { fill: #b62a37; }
.env-hem { fill: var(--env-hem); }
.env-crease { fill: none; stroke: rgba(20, 33, 58, 0.22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.envelope__body .env-crease { stroke: rgba(20, 33, 58, 0.10); }

/* both moving panels are two-faced sheets hinged on one edge */
.envelope__flap {
  z-index: 4;
  transform-origin: 50% 20%;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(180deg);
}
.envelope__flapface {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.envelope__flapface--outer { filter: drop-shadow(0 3px 4px rgba(20, 33, 58, 0.22)); }
/* the V is symmetric left to right, so a Y flip gives a back face in the same place */
.envelope__flapface--inner { transform: rotateY(180deg); }

/* the pocket starts 1px inside the body so the hinge never shows a hairline of page */
.envelope__pocket {
  position: absolute; left: 0; top: calc(65.870% - 1px); width: 100%; height: calc(34.130% + 1px);
  z-index: 3;
  transform-origin: 50% 1px;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(0deg);
}
.envelope__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
}
.envelope__face--inner { background: linear-gradient(180deg, #c23543 0%, var(--env-inner) 22%); }
.envelope__face--outer {
  transform: rotateX(180deg);
  background: linear-gradient(0deg, #bd2e3b 0%, var(--env-pocket) 30%);
  box-shadow: inset 0 0 0 1px rgba(20, 33, 58, 0.08);
}
/* the letter is written on the big inner panel, which the pocket covers until it opens:
   from 20 below the top edge to the body's bottom in the 586 drawing */
.envelope__msg {
  position: absolute; z-index: 1;
  left: 8%; right: 8%; top: 35.154%; height: 30.717%;
  margin: 0;
  display: grid; place-items: center;
  font-family: var(--font-text); font-style: italic;
  font-size: clamp(1.1rem, 0.7rem + 1.7vw, 1.6rem);
  line-height: 1.3; text-align: center; color: #fbfaf7;
}
.envelope__shadow {
  position: absolute; left: 5%; right: 5%; bottom: -3.5%; height: 6.5%;
  background: radial-gradient(closest-side, rgba(20, 33, 58, 0.28), rgba(20, 33, 58, 0));
  filter: blur(6px);
  z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .envelope.is-playing .envelope__flap { animation: env-flap 3200ms cubic-bezier(0.5, 0.05, 0.2, 1) 600ms both; }
  .envelope.is-playing .envelope__pocket { animation: env-pocket 3200ms cubic-bezier(0.5, 0.05, 0.2, 1) 600ms both; }
  .envelope.is-playing .envelope__msg { animation: env-msg 3200ms linear 600ms both; }
  .envelope.is-playing .envelope__shadow { animation: env-shadow 3200ms var(--ease) 600ms both; }
}
/* 1. the heart's V folds up and over, tip toward the reader */
@keyframes env-flap {
  0%, 8% { transform: perspective(1200px) rotateX(0deg); }
  50%, 100% { transform: perspective(1200px) rotateX(180deg); }
}
/* 2. only once the V is past vertical does the pocket it held come down */
@keyframes env-pocket {
  0%, 40% { transform: perspective(1200px) rotateX(180deg); }
  90%, 100% { transform: perspective(1200px) rotateX(0deg); }
}
@keyframes env-msg { 0%, 60% { opacity: 0; } 88%, 100% { opacity: 1; } }
/* the shadow stays under the body until the pocket passes vertical, then follows it down */
@keyframes env-shadow { 0%, 62% { transform: translateY(-525%) scaleX(0.96); } 92%, 100% { transform: translateY(0) scaleX(1); } }

@media (max-width: 860px) {
  .hero__envelope { order: -1; }
  .envelope { width: min(52%, 13rem); }
}

/* the group photograph, full width under the hero */
.band { padding-bottom: var(--section); }
.band img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 45%; }
.band figcaption { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 700px) { .band img { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------- sections -- */
.section { padding-block: var(--section); border-top: 1px solid var(--hairline); }
.section--tight { padding-block: var(--s-8); }
.section__head { display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 40rem; }
.section__head p { color: var(--ink-soft); text-wrap: pretty; }

.page-head { padding-block: var(--s-8) var(--s-7); }
.page-head h1 { font-size: var(--t-2xl); max-width: 14ch; }
.page-head p { margin-top: var(--s-4); }

/* long-form prose: privacy and terms */
.legal { max-width: 65ch; }
.legal h2 { font-size: var(--t-xl); margin-top: var(--s-8); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin-top: var(--s-6); }
.legal h2 + p, .legal h3 + p, .legal h2 + ul, .legal h3 + ul { margin-top: var(--s-4); }
.legal p, .legal li { text-wrap: pretty; }
.legal ul { list-style: disc; padding-left: 1.25em; margin-top: var(--s-4); }
.legal li + li { margin-top: var(--s-2); }
.legal li::marker { color: var(--ink-soft); }
.legal .dated { color: var(--ink-soft); font-size: var(--t-sm); margin-bottom: var(--s-7); }

/* two columns of prose + photo */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8); align-items: center;
}
.split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split--flip > :first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .split--flip > :first-child { order: 0; }
}

/* photo grid */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.photos figcaption { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 700px) {
  .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photos > :nth-child(3) { display: none; }
}

/* the numbers */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-6) var(--s-7); }
.ledger div { border-top: 1px solid var(--hairline-strong); padding-top: var(--s-4); }
.is-pending { visibility: hidden; }
.ledger dt {
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-2xl);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.ledger--words dt { font-size: var(--t-lg); font-weight: 700; }
.ledger dd { margin: var(--s-3) 0 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; max-width: 26ch; }

/* work entries */
.entries { display: flex; flex-direction: column; gap: var(--s-9); }
.entry { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.entry:nth-child(even) .entry__media { order: 2; }
.entry__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.entry__media figcaption { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-soft); }
.entry__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.entry__media--pair img { aspect-ratio: 4 / 5; }
.entry__text { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: var(--s-6); }
.entry__when { font-family: var(--font-display); font-weight: 500; font-size: var(--t-sm); color: var(--ink-soft); }
.entry__text p { color: var(--ink-soft); text-wrap: pretty; max-width: 40ch; }
@media (max-width: 860px) {
  .entries { gap: var(--s-8); }
  .entry, .entry:nth-child(even) { grid-template-columns: 1fr; gap: var(--s-4); }
  .entry:nth-child(even) .entry__media { order: 0; }
  .entry__text { position: static; }
}

/* team */
.team-group { padding-block: var(--s-6); }
.team-group + .team-group { border-top: 1px solid var(--hairline); }
.team-group h2 { font-size: var(--t-lg); color: var(--ink-soft); font-weight: 500; letter-spacing: 0; margin-bottom: var(--s-6); }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s-7) var(--s-5); }
.member { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); }
.member img,
.member__placeholder {
  width: 7.5rem; height: 7.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--hairline-strong);
  margin-bottom: var(--s-2);
}
.member__placeholder {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--ink-soft);
}
.member h3 { font-size: var(--t-base); }
.member p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.35; max-width: 14rem; }
.member a { font-family: var(--font-display); font-size: var(--t-xs); color: var(--ink-soft); text-decoration: none; }
.member a:hover { color: var(--ink); text-decoration: underline; }
.team--founders { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.team--founders .member img,
.team--founders .member__placeholder { width: 9rem; height: 9rem; }

/* give */
.give { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.routes { display: flex; flex-direction: column; gap: var(--s-5); margin-block: var(--s-6); }
.route {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-5); align-items: baseline;
  padding-block: var(--s-4); border-top: 1px solid var(--hairline-strong);
}
.route__name { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: var(--t-sm); }
.route__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.route__value a { text-decoration: none; }
.route__value a:hover { text-decoration: underline; }
.route__qr { grid-column: 1 / -1; width: min(100%, 240px); border: 1px solid var(--hairline); background: #fff; }
.zeffy { margin-block: var(--s-5); padding: var(--s-4); background: var(--surface); border: 1px solid var(--hairline); }
.caveat { color: var(--ink-soft); text-wrap: pretty; }
.give__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) {
  .give { grid-template-columns: 1fr; }
  .give__photo { order: -1; }
}

/* call to give, on the home page */
.cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-6); }
.cta h2 { font-size: var(--t-xl); }
.button {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  color: var(--paper); background: var(--accent);
  padding: 0.8em 1.4em; text-decoration: none;
  transition: background-color 160ms var(--ease), transform 160ms var(--ease);
}
.button:hover { background: #a9222f; }
.button:active { transform: translateY(1px); }
.button--quiet { background: transparent; color: var(--ink); border: 1px solid var(--hairline-strong); }
.button--quiet:hover { background: var(--surface); }

/* ----------------------------------------------------------------- footer -- */
.site-footer { border-top: 1px solid var(--hairline); padding-block: var(--s-7) var(--s-6); font-size: var(--t-sm); color: var(--ink-soft); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4) var(--s-7); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer a { text-decoration: none; color: var(--ink); }
.site-footer a:hover { text-decoration: underline; }
.site-footer .fine { flex-basis: 100%; }

/* -------------------------------------------------------------------- 404 -- */
/* The envelope opens as it does on the home page, a fly gets out of the letter and leaves
   the screen trailing dots, the dots fade, and then the letter reads "Wrong address."
   Base styles are the end state: open, message showing, no fly. The fly is an SVG over the
   envelope in the same 400 x 586 units, so it starts on the letter in any layout. Its route
   is written three times and must stay identical: twice in 404.html (the dots, and the mask
   that uncovers them) and once here as the offset-path. The mask's pathLength is 1000.
   After load: fly 2400-4600ms, dots fade 4600-5100ms, message 5100-5700ms. The fly waits for
   the pocket's edge to pass the letter's centre (about 2410ms with env-pocket as it stands). */
.page-404 { overflow-x: clip; } /* the fly leaves the viewport; it must not widen the page */
.page-404 .envelope { cursor: default; }
.envelope .envelope__fly { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; }
/* stroke colour is inherited so the <use> copy can differ: ink-soft has the same luminance as
   the red paper, so over the envelope the dots are redrawn in the letter's own light ink */
.fly__trail { stroke: var(--ink-soft); }
.fly__dots { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0.1 9.9; }
.fly__dots-light { stroke: var(--surface); stroke-opacity: 0.8; }
.fly__reveal { fill: none; stroke: #fff; stroke-width: 12; stroke-dasharray: 1000; }
.fly__body { fill: var(--ink); }
.fly__wing {
  fill: var(--surface); fill-opacity: 0.6; stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 0.7;
  transform-box: fill-box; transform-origin: 100% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .page-404 .envelope.is-playing .envelope__msg { animation: fly-msg 600ms var(--ease) 5100ms both; }
  @supports (offset-path: path("M0 0H1")) {
    .envelope.is-playing .envelope__fly { display: block; }
    .envelope.is-playing .fly__bug {
      offset-path: path("M200 286C192 256 132 252 118 204S150 96 216 112S300 196 252 232S150 214 178 146S240 40 300 20S420 60 400 120S306 150 310 92S380 -60 470 -90S600 -20 680 -100S940 -220 1080 -360S1440 -600 1780 -900");
      offset-rotate: auto;
      animation: fly-route 2200ms cubic-bezier(0.5, 0, 0.8, 0.3) 2400ms both;
    }
    .envelope.is-playing .fly__figure { animation: fly-show 2200ms linear 2400ms both; }
    .envelope.is-playing .fly__reveal { animation: fly-reveal 2200ms cubic-bezier(0.5, 0, 0.8, 0.3) 2400ms both; }
    .envelope.is-playing .fly__trail { animation: fly-trail-out 500ms linear 4600ms both; }
    .envelope.is-playing .fly__wing { animation: fly-wing 80ms linear 2400ms 28 alternate both; }
    .envelope.is-playing .fly__wing--r { animation-direction: alternate-reverse; }
  }
}
/* a phone's envelope is two thirds the size; keep the fly and its dots legible */
@media (max-width: 860px) {
  .envelope__fly { --fly-scale: 1.4; }
  .fly__dots { stroke-width: 4.2; }
}
@keyframes fly-route { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fly-reveal { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
/* it grows out of the letter rather than popping onto it, and is gone once it has left */
@keyframes fly-show {
  0% { opacity: 0; scale: 0.4; }
  5%, 99% { opacity: 1; scale: var(--fly-scale, 1); }
  100% { opacity: 0; scale: var(--fly-scale, 1); }
}
@keyframes fly-wing { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
@keyframes fly-trail-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes fly-msg { from { opacity: 0; } to { opacity: 1; } }

/* kits campaign progress bar */
.progress { margin-bottom: var(--s-6); }
.progress__figure { font-family: var(--font-text); font-size: var(--t-xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.progress__raised { font-weight: 500; }
.progress__of { color: var(--ink-soft); font-size: var(--t-lg); }
.progress__track { margin-top: var(--s-3); height: 0.6rem; background: var(--hairline); }
.progress__fill { height: 100%; width: 0; background: var(--accent); transition: width 1200ms var(--ease); }
.progress__kits { margin-top: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .progress__fill { transition: none; } }
.progress__marks { list-style: none; margin: 0 0 var(--s-6); padding: 0; position: relative; height: 2.6rem; font-size: var(--t-xs); color: var(--ink-soft); }
.progress__marks li { white-space: nowrap; position: absolute; top: 0; left: var(--at); transform: translateX(-100%); padding: var(--s-2) 0 0 0; text-align: right; line-height: 1.25; border-right: 1px solid var(--hairline-strong); padding-right: var(--s-2); }
.progress__marks strong { display: block; font-family: var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.progress__marks li.is-reached strong { color: var(--accent); }

.kitsband { padding-block: var(--s-6); border-bottom: 1px solid var(--hairline-strong); }
.kitsband__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.kitsband__eyebrow { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.kitsband__eyebrow .nav-new { margin: 0; vertical-align: 0; }
.kitsband__copy { display: flex; flex-direction: column; gap: var(--s-4); }
.kitsband__visual.progress { margin-bottom: 0; }
.kitsband__copy h2 { font-size: var(--t-xl); }

/* kits page: what goes in a kit */
.kitlist { list-style: none; counter-reset: kit; margin: var(--s-4) 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
.kitlist li { counter-increment: kit; display: flex; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-text); font-size: var(--t-lg); }
.kitlist li::before { content: counter(kit); min-width: 1.5rem; font-family: var(--font-display); font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .kitsband__in { grid-template-columns: 1fr; gap: var(--s-6); }
}