/* ============================================================================
   19.09.26 — YEP · Youth Empowerment Program (yep.html)
   Black and gold like the rest of the site. Driven by js/yep.js; every effect
   degrades to "already visible" if the script never runs.
   ========================================================================== */
body.yp {
  --yp-gold: #e2c47e;
  --yp-bright: #fff0c2;
  --yp-ink: #050505;
  --yp-line: rgba(255, 255, 255, .08);
  --yp-lift: cubic-bezier(.16, 1, .3, 1);
  --yp-gutter: clamp(1.25rem, 5vw, 5rem);
  --yp-learn: #f0a24e;
  --yp-serve: #6fb4d8;
  --yp-grow: #8fcf8a;
  background: var(--yp-ink) !important; color: #f4ead0;
}
.yp-main { overflow-x: clip; }
.yp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yp .site-header { background: transparent; }

/* shared furniture ----------------------------------------------------------- */
.yp-shell { max-width: 1320px; margin: 0 auto; padding: 0 var(--yp-gutter); position: relative; z-index: 2; }
.yp-head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); max-width: 60rem; }
.yp-head--c { margin-left: auto; margin-right: auto; text-align: center; }
.yp-eyebrow {
  display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.2rem;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700;
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(226, 196, 126, .75);
}
.yp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yp-gold); box-shadow: 0 0 10px rgba(244, 210, 113, .9); }
.yp-h2 {
  margin: 0; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.02em; color: #f7efdc;
}
.yp-h2 em, .yp-nb-title em, .yp-end-title em {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0;
  background: linear-gradient(100deg, #c99a44 0%, #f6d98a 25%, #fff6d8 38%, #e6bd60 52%, #fff1c2 72%, #d4a64e 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ypSheen 8s ease-in-out infinite; padding: 0 .06em;
}
@keyframes ypSheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.yp-join .yp-h2, .yp-support .yp-h2 { font-size: clamp(1.8rem, 3.1vw, 3.1rem); line-height: 1.08; }
/* the two lines that land on their own get their gold a little louder */
#yp-nums-title em, #yp-lsg-title em { font-size: 1.14em; }
.yp-support .yp-p { margin-top: 1.6rem; }
.yp-p { color: rgba(244, 234, 208, .72); font-size: 1.02rem; line-height: 1.75; max-width: 38rem; }
.yp-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--yp-lift), transform .9s var(--yp-lift); }
.yp-reveal.is-in { opacity: 1; transform: none; }

/* -- 1 · hero ------------------------------------------------------------------ */
.yp-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; }
/* The wall: five columns of moments, drifting up and down.
   They used to sit at three tenths, which was right when the mark wrote
   itself in thin air — but the ink has to land on something. At a hundredth
   over a half the photographs are present enough for the black to read as ink
   thrown across them rather than as a hole in the page. */
.yp-wall {
  position: absolute; inset: -10vh -4vw; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(.6rem, 1.4vw, 1.4rem);
  opacity: .56; transform: rotate(-4deg) scale(1.08);
  filter: saturate(.62) sepia(.22) contrast(1.04);
}
.yp-wall-col { display: flex; flex-direction: column; gap: clamp(.6rem, 1.4vw, 1.4rem); will-change: transform; }
.yp-wall-col img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; display: block; }
.yp-wall-col img.is-round { aspect-ratio: 1; border-radius: 50%; }
/* The veil holds the middle of the frame open for the ink and closes the
   edges down to the page. It used to take three quarters of the light out of
   the centre as well, which with the brighter wall behind would leave the
   splatter with nothing to be black against. */
.yp-hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 58% at 50% 48%, rgba(5, 5, 5, .04) 0%, rgba(5, 5, 5, .46) 58%, #050505 100%),
    linear-gradient(to bottom, rgba(5, 5, 5, .58) 0%, rgba(5, 5, 5, 0) 26%, rgba(5, 5, 5, 0) 70%, #050505 100%);
}
.yp-hero-in { position: relative; z-index: 2; text-align: center; padding: 0 1rem; }
.yp-hero-title { margin: 0; line-height: 0; }
.yp-logo {
  width: min(62vw, 76vh, 820px); height: auto; overflow: visible;
  filter: drop-shadow(0 0 .08rem rgba(255, 236, 180, .9)) drop-shadow(0 0 1.6rem rgba(232, 180, 70, .45)) drop-shadow(0 1.4rem 2.2rem rgba(0, 0, 0, .7));
  animation: ypHover 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes ypHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* ── the ink ─────────────────────────────────────────────────────────────────
   Fifteen throws, each one used twice — once in black behind the mark and
   once inside the mask that uncovers it — so a blot lays ink down and lifts
   the gold out of it in the same movement.

   Each blot is drawn about its own origin, so scaling it from nothing is the
   splat: it arrives at full size in a fifth of a second with a little
   overshoot, which is ink hitting a wall, and it does not fade in, because
   ink does not. The droplets follow their core by fifty milliseconds, so the
   mass lands and then spatters rather than arriving whole.

   .085s apart, so the last of them is down at about 1.45 seconds — near
   enough the pen's old three and a half, spent on fifteen events instead of
   sixty-two, which is the difference between a reveal you watch and one you
   wait out.

   Two of the fifteen are about the small y rather than about covering the
   mark: the blot that makes the top edge over it is thrown half again as big
   and higher up, and one more closes the channel that used to run down to the
   end of the bar. The ink there now stands about 160 units clear of the
   letters where it stood 20. */
.yp-blot {
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: scale(.34); opacity: 0;
}
.yp-logo.is-thrown .yp-blot { animation: ypSplat .21s cubic-bezier(.17, .96, .32, 1) var(--d, 0s) both; }
.yp-logo.is-thrown .yp-blot--fine { animation-duration: .16s; }
@keyframes ypSplat {
  0% { transform: scale(.34); opacity: 0; }
  6% { opacity: 1; }
  62% { transform: scale(1.055); }
  100% { transform: scale(1); opacity: 1; }
}
/* nothing to watch, so it is simply there (and see the reduced-motion block
   at the foot of this file, which says the same for anyone who asked) */
.yp-hero-sub {
  margin: clamp(1rem, 3vh, 2rem) 0 .6rem;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.8rem, 1.3vw, 1.05rem); letter-spacing: .5em; text-indent: .5em; color: var(--yp-bright);
  opacity: 0; transform: translateY(10px); transition: opacity 1.2s ease .2s, transform 1.2s var(--yp-lift) .2s;
  /* the wall behind is twice as present as it was, and these two lines sit
     below the ink with nothing between them and it */
  text-shadow: 0 .04em .12em rgba(0, 0, 0, .95), 0 0 .5em rgba(0, 0, 0, .9), 0 0 1.5em rgba(0, 0, 0, .8);
}
.yp-hero-tag {
  display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(1rem, 1.6vw, 1.35rem); color: rgba(244, 234, 208, .82);
  opacity: 0; transition: opacity 1.2s ease .6s;
  text-shadow: 0 .04em .14em rgba(0, 0, 0, .95), 0 0 .5em rgba(0, 0, 0, .9), 0 0 1.4em rgba(0, 0, 0, .78);
}
.yp-hero-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--yp-gold); }
.yp-hero.is-on .yp-hero-sub { opacity: 1; transform: none; }
.yp-hero.is-on .yp-hero-tag { opacity: 1; }
.yp-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .56rem; letter-spacing: .45em; text-transform: uppercase; color: rgba(244, 210, 113, .45);
}
/* the gold hint bar. Slow on purpose: it has to be legible as a filling bar,
   so it takes 5.2s to draw, holds full for a beat, then fades. */
.yp-cue i { display: block; width: 2px; height: 46px; border-radius: 1px; background: linear-gradient(to bottom, rgba(244, 210, 113, 0), rgba(244, 210, 113, .85)); animation: ypCue 5.2s cubic-bezier(.45, 0, .3, 1) infinite; transform-origin: top; }
@keyframes ypCue {
  0%   { transform: scaleY(0); opacity: 0; }
  12%  { opacity: 1; }
  72%  { transform: scaleY(1); opacity: 1; }
  88%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* -- 2 · namaste ---------------------------------------------------------------- */
.yp-namaste { position: relative; height: 340vh; }
.yp-namaste-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.yp-hands {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
  /* No drop-shadow. It was a second halo — a ring of light sitting on the
     silhouette — and the brief was to take the halo off the hand and let a
     moving shader do the lighting instead.

     The gold is in the picture itself: assets/yep/source/yep-hands-photo.py
     maps the photograph's brightness onto a gold ramp. A touch of saturation
     and contrast on top of that is all this is for. */
  filter: saturate(1.18) contrast(1.06) brightness(1.04);
  opacity: var(--yp-stage-o, 1);
  /* The forearm fade is baked into assets/yep/namaste.webp — it belongs to the
     picture, which moves and turns, rather than to the canvas, which does not.
     A mask here would have stayed put while the hands swung through it. */
}

/* ── the shader ──────────────────────────────────────────────────────────────
   Replaces the radial burst that used to bloom out of the palms. Three wide,
   heavily blurred pools of gold drift across the stage on three different
   periods, so they slide past one another and the field never quite repeats —
   light moving through the dark rather than a lamp switched on behind the
   hands. It screens over black, so the black stays black and only the gold
   accumulates. The opacity is driven by scroll (--yp-shade-o), which is what
   makes it fade in and back out across the section.
   A second, faster copy runs over the top at lower opacity for the drift you
   notice without being able to time. */
.yp-shader, .yp-shader::after {
  position: absolute; inset: -25%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 40% at 24% 28%, rgba(255, 232, 168, .34), transparent 64%),
    radial-gradient(50% 36% at 76% 60%, rgba(226, 176, 72, .30), transparent 66%),
    radial-gradient(42% 32% at 50% 88%, rgba(255, 246, 214, .22), transparent 70%);
}
.yp-shader {
  opacity: var(--yp-shade-o, 0);
  filter: blur(70px); mix-blend-mode: screen;
  animation: ypShade 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.yp-shader::after {
  content: ""; inset: -10%; opacity: .55;
  animation: ypShade2 17s ease-in-out infinite alternate;
}
@keyframes ypShade {
  0%   { transform: translate3d(-6%, 4%, 0) scale(1.05) rotate(-4deg); }
  50%  { transform: translate3d(5%, -5%, 0) scale(1.18) rotate(3deg); }
  100% { transform: translate3d(-3%, 6%, 0) scale(1.08) rotate(6deg); }
}
@keyframes ypShade2 {
  0%   { transform: translate3d(7%, -3%, 0) scale(1.12) rotate(5deg); }
  100% { transform: translate3d(-8%, 5%, 0) scale(1.02) rotate(-6deg); }
}

/* Top and bottom feather. The section used to start and stop dead against the
   hero above it and the words below; now the stage dissolves into the page's
   own black at both ends, so there is no seam to see. */
.yp-namaste-stage::before, .yp-namaste-stage::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26%; z-index: 4; pointer-events: none;
}
.yp-namaste-stage::before { top: 0; background: linear-gradient(to bottom, #050505 0%, rgba(5, 5, 5, .72) 38%, transparent 100%); }
.yp-namaste-stage::after { bottom: 0; background: linear-gradient(to top, #050505 0%, rgba(5, 5, 5, .78) 42%, transparent 100%); }
.yp-nb {
  position: absolute; left: 50%; top: 46%; z-index: 3; width: min(62vw, 900px);
  transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  opacity: var(--yp-stage-o, 1);
}
.yp-nb > * { opacity: 0; }
.yp-nb-title {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 900; line-height: .95;
  font-size: clamp(3rem, 9vw, 9.5rem); letter-spacing: -.02em; color: #fff3d6;
  text-shadow: 0 0 .5em rgba(232, 180, 70, .35);
}
.yp-nb-title span { display: inline-block; }
.yp-nb-title em { font-size: .72em; vertical-align: .18em; padding: 0 .1em; }
.yp-nb-foot { margin: 1.6rem auto 0; max-width: 30rem; font-size: .9rem; letter-spacing: .04em; color: rgba(244, 234, 208, .6); }

/* -- 3 · why --------------------------------------------------------------------- */
.yp-why { padding: clamp(6rem, 16vh, 11rem) 0 clamp(4rem, 10vh, 7rem); }
.yp-why-grid { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.yp-why-who { position: sticky; top: 18vh; margin: 0; text-align: center; }
.yp-ring {
  position: relative; border-radius: 50%; padding: 5px; aspect-ratio: 1;
  background: conic-gradient(from 0deg, #b8903c, #fff1c2, #c9a24a, #f6d98a, #b8903c);
  box-shadow: 0 0 40px rgba(232, 180, 70, .22);
}
.yp-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #050505; }
.yp-why-who figcaption, .yp-ach figcaption { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.yp-why-who b, .yp-ach b { font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: var(--yp-bright); }
.yp-why-who span, .yp-ach span { font-size: .78rem; line-height: 1.5; color: rgba(244, 234, 208, .55); }
.yp-why-words { display: flex; flex-direction: column; gap: clamp(3rem, 12vh, 7rem); padding-bottom: 8vh; }
.yp-say {
  margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
  font-size: clamp(1.45rem, 2.7vw, 2.6rem); line-height: 1.3; color: #f4ead0;
}
.yp-say::before { content: "\201C"; display: block; font-size: 2.4em; line-height: .6; color: var(--yp-gold); opacity: .5; }
/* word by word: dim until the scroll reaches it */
.yp-say .w { opacity: .16; transition: opacity .35s ease, color .35s ease, text-shadow .35s ease; }
.yp-say .w.on { opacity: 1; }
.yp-say mark .w.on { color: #f7dc98; text-shadow: 0 0 .5em rgba(244, 196, 90, .45); font-style: italic; }

/* ── the rule under a highlighted phrase ──────────────────────────────────
   One rule for the whole phrase, not one per word. It used to be an ::after
   on each .w, stretched a little past the word at each end so that the rules
   would butt up and pass for a single line — which they never quite did:
   every space showed a seam, and a two-word phrase read as two underlines.

   It is a background on the <mark> itself now, grown from nothing to full
   width. A background belongs to the element, so a phrase gets exactly one of
   them however many words are in it, and js/yep.js drives the width from how
   far the reader has got through that phrase — so it still draws left to
   right, in step with the words lighting, instead of appearing whole.

   box-decoration-break: clone is what makes it survive a line break: a phrase
   that wraps gets a rule under each of its two fragments rather than one rule
   stretched across the gap between them.

   background-color has to be said out loud. <mark> is the one element with a
   painted background in the browser's own stylesheet — highlighter yellow —
   and background-size governs the image only, so setting a background-image
   and a width for it leaves that yellow covering the whole phrase underneath.
   That is what turned these lines into blocks of highlighter. */
.yp-say mark {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(201, 154, 68, .6), #f6d98a 32%, #fff1c2 64%, rgba(214, 166, 78, .7));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: var(--u, 0%) .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .16em;
  color: inherit;
  /* No transition on background-size. js/yep.js sets the width from the
     scroll position every frame, so the growth is already continuous, and a
     transition on top of it would only add lag that a fast scroll then has to
     unwind. */
}

/* -- 4 · learn serve grow ------------------------------------------------------------ */
.yp-lsg {
  padding: clamp(4rem, 10vh, 7rem) 0 clamp(4rem, 10vh, 6rem);
  /* the cards are swung out past the left edge. `clip` rather than `hidden`
     on purpose: `hidden` on one axis turns `visible` on the other into
     `auto`, which would make this the scroll container for the sticky cards
     inside it and stop them sticking to the screen at all. `clip` leaves the
     other axis alone. */
  overflow-x: clip;
}
/* the depth the cards turn in as they are taken off the pile */
.yp-stack {
  position: relative; padding: 0 var(--yp-gutter); max-width: 1320px; margin: 0 auto;
  perspective: 1500px;
}
.yp-card {
  --c: var(--yp-gold);
  position: sticky; top: 12vh; min-height: 70vh; margin-bottom: 8vh;
  /* the photograph's column takes more of the card than it did: 58% rather
     than 52%, which with the bleed either side is most of what makes the
     cut-outs read big rather than incidental */
  display: grid; grid-template-columns: 1fr minmax(280px, 58%); gap: clamp(.8rem, 2vw, 2rem); align-items: center;
  padding: clamp(1.8rem, 4vw, 3.6rem);
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, #141210 0%, #0a0908 100%);
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, .55);
  transform-origin: 50% 0;
  /* visible, so the photograph can leave the card. The background and border
     still stop at the rounded corner — a background always clips to its own
     border box — so only the cut-out crosses the line, which is the point. */
  overflow: visible;
}
.yp-card--learn { --c: var(--yp-learn); }
.yp-card--serve { --c: var(--yp-serve); top: 15vh; }
.yp-card--grow  { --c: var(--yp-grow); top: 18vh; margin-bottom: 0; }
/* the number stays in its corner, but big and barely there — a watermark the
   text can run straight over */
.yp-card-num {
  /* the card no longer clips, so the watermark can no longer be tucked under
     its top edge — it sits on it instead, with a line box tall enough to hold
     its own glyphs */
  position: absolute; left: clamp(.4rem, 1.6vw, 1.4rem); top: 0; z-index: 0;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(6rem, 15vw, 15rem); line-height: 1; letter-spacing: -.05em;
  color: color-mix(in srgb, var(--c) 15%, transparent); pointer-events: none; user-select: none;
}
.yp-card-body { position: relative; z-index: 1; }
.yp-card-when { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 234, 208, .55); }
.yp-card-word {
  margin: 0 0 1.4rem; font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-style: italic;
  font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: .9; color: var(--c);
  text-shadow: 0 0 .35em color-mix(in srgb, var(--c) 45%, transparent);
}
.yp-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; max-width: 34rem; }
.yp-card li { position: relative; padding-left: 1.4rem; color: rgba(244, 234, 208, .8); line-height: 1.6; font-size: 1rem; }
.yp-card li::before { content: ""; position: absolute; left: 0; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* The photograph is no longer kept inside the card. It is a cut-out — a
   quarter to a third of every one of these files is transparent — so there is
   no frame to respect, and holding it behind the card's rounded corner only
   made it look like a thumbnail pasted beside the list. It now runs past the
   card's padding on three sides and over the border itself, which is what
   makes it read as standing in front of the card rather than inside it.

   The soft edge is a radial mask: the cut-out's outline is a hard traced edge
   and at this size you can see the tracing, so the outer fifth is feathered
   away. Anything near the middle — which is every face — is untouched. */
.yp-card-cut {
  /* base.css sets img { max-width: 100% } for the whole site, and a grid item
     cannot grow past that however wide you declare it — which is why the old
     "width: 100% + padding" produced a photograph exactly the width of its
     column and no bleed at all. It only looked like it bled because
     object-position pushed the contained image to the right of its box. */
  max-width: none;
  width: calc(100% + clamp(2.5rem, 6vw, 6rem));
  margin: calc(-1 * clamp(1rem, 2.4vw, 2.2rem)) calc(-1 * clamp(2.5rem, 6vw, 6rem)) calc(-1 * clamp(3rem, 7vw, 6rem)) 0;
  /* Sit on the foot of the card, not in the middle of it. The grid centres
     its items, and a wide photograph in a tall column is short, so the Learn
     card's picture floated with a band of card above and below it. End-aligned
     and bled past the bottom padding it stands on the card instead. */
  align-self: end;
  max-height: 86vh; object-fit: contain; object-position: right bottom;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, .66));
  -webkit-mask-image: radial-gradient(128% 118% at 56% 46%, #000 60%, rgba(0, 0, 0, .78) 82%, transparent 100%);
  mask-image: radial-gradient(128% 118% at 56% 46%, #000 60%, rgba(0, 0, 0, .78) 82%, transparent 100%);
}

/* -- 5 · bands of words ---------------------------------------------------------------- */
.yp-words { padding: clamp(3rem, 8vh, 5rem) 0; overflow: hidden; border-top: 1px solid var(--yp-line); border-bottom: 1px solid var(--yp-line); }
.yp-band { overflow: hidden; white-space: nowrap; }
.yp-band + .yp-band { margin-top: .4rem; }
.yp-band-in { display: inline-flex; animation: ypMarquee 40s linear infinite; }
.yp-band.is-rev .yp-band-in { animation-direction: reverse; animation-duration: 46s; }
.yp-band-in span {
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 5.4rem); letter-spacing: -.01em; line-height: 1.15; padding: 0 .45em;
  color: transparent; -webkit-text-stroke: 1px rgba(226, 196, 126, .45);
  transition: color .4s ease, -webkit-text-stroke-color .4s ease, text-shadow .4s ease;
}
/* Only the letters light. A third, wide shadow (0 0 .6em) used to be here; at
   this size its blur is ~50px, and inside the marquee's own moving layer the
   browser rasterised it as a pale rectangle around the word. The word now
   lights exactly the same whether the cursor finds it or its turn comes. */
.yp-band-in span.is-lit, .yp-band-in span:hover {
  color: #fff0c2; -webkit-text-stroke-color: transparent;
  text-shadow: 0 0 .06em rgba(255, 244, 214, .9), 0 0 .25em rgba(250, 205, 95, .8);
}
.yp-band-in i { align-self: center; width: .4rem; height: .4rem; border-radius: 50%; background: var(--yp-gold); flex: none; }
@keyframes ypMarquee { to { transform: translateX(-50%); } }

/* -- 6 · numbers (the Amrit Yatra neon) ----------------------------------------------------- */
.yp-nums { padding: clamp(6rem, 14vh, 10rem) 0; }
.yp-num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 3rem); }
.yp-num { text-align: center; }
.yp-num b {
  display: block; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem); line-height: 1; color: rgba(226, 196, 126, .9); white-space: nowrap;
  transition: color .4s ease, text-shadow .45s ease; font-variant-numeric: tabular-nums;
}
.yp-num:hover b, .yp-num.is-lit b {
  color: #fff3c4;
  text-shadow: 0 0 .04em #fff, 0 0 .1em rgba(255, 228, 140, .95), 0 0 .22em rgba(250, 205, 95, .85), 0 0 .45em rgba(232, 180, 70, .6), 0 0 .9em rgba(201, 150, 40, .38);
}
.yp-num span { display: block; margin-top: .9rem; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 234, 208, .55); }

/* -- 7 · acharyas ------------------------------------------------------------------------------ */
.yp-acharyas { padding: clamp(4rem, 10vh, 7rem) 0; }
.yp-ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 3rem); }
.yp-ach { margin: 0; text-align: center; }
.yp-ach .yp-ring { transition: transform .6s var(--yp-lift), box-shadow .6s ease; }
.yp-ach:hover .yp-ring { transform: translateY(-8px) rotate(-2deg); box-shadow: 0 0 60px rgba(244, 196, 90, .45); }
/* the lecturers run the full width of the frame, edge to edge */
.yp-guests { margin: clamp(3rem, 8vh, 5rem) 0 0; text-align: center; }
/* The montage is cropped at both ends in the file itself — a figure runs off
   the left edge of the canvas and another off the right, at columns 0 and 914
   of 915 — so there is no CSS that can show more of them than exists. What
   there is to fix is the hard vertical cut: against a full-bleed layout the
   right-hand figure ended on a straight line at the edge of the screen, which
   is what makes a crop look like a mistake rather than a vignette. Both ends
   now feather into the black, and so does the bottom, as before. */
.yp-guests img {
  display: block; width: 100%; height: auto; filter: saturate(.85);
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent),
                      linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent),
              linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.yp-guests figcaption {
  margin: -.6rem auto 0; padding: 0 var(--yp-gutter); max-width: 44rem;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 2.3rem); line-height: 1.25; color: rgba(244, 234, 208, .78);
}
.yp-guests figcaption em {
  font-style: italic;
  background: linear-gradient(100deg, #c99a44 0%, #f6d98a 25%, #fff6d8 38%, #e6bd60 52%, #fff1c2 72%, #d4a64e 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: ypSheen 8s ease-in-out infinite;
}

/* -- 8 · the line ---------------------------------------------------------------------------------
   An ordinary section now. It used to be pinned inside the track and held
   back until the frame was empty, which meant the reader had to wait for a
   sentence to be allowed to arrive; there was nothing it gained by that.
   Cormorant rather than Playfair: the same class of face, cut much finer, so
   at this size it reads as an inscription rather than as a pull quote. */
.yp-line-sec { padding: clamp(5rem, 15vh, 10rem) var(--yp-gutter) clamp(4rem, 12vh, 8rem); }
.yp-line-q {
  margin: 0 auto; width: min(94vw, 1560px); text-align: center; text-wrap: balance;
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-weight: 300; font-size: clamp(2.1rem, 5.4vw, 5.6rem); line-height: 1.2;
  letter-spacing: -.005em; color: #f7efdc;
}
.yp-line-q em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(100deg, #c99a44 0%, #f6d98a 25%, #fff6d8 38%, #e6bd60 52%, #fff1c2 72%, #d4a64e 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ypSheen 8s ease-in-out infinite; padding: 0 .04em;
}
.yp-qm { color: rgba(226, 196, 126, .5); }
/* the drawings, sized in em so they sit in the line with the words */
.yp-qa { display: inline-block; line-height: 0; margin: 0 .16em; vertical-align: -.24em; }
.yp-qa svg { width: 100%; height: 100%; overflow: visible; display: block; }
.yp-qa--root { width: 1.4em; height: 1em; }
.yp-qa--leaf { width: 1.45em; height: .8em; vertical-align: -.08em; }
.yp-qa--dawn { width: 1.45em; height: .96em; vertical-align: -.2em; }
.yq-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: ypQSway 4.6s ease-in-out infinite alternate; }
.yq-rise { transform-box: fill-box; animation: ypQRise 5.2s ease-in-out infinite alternate; }
.yq-bead { transform-box: fill-box; transform-origin: center; animation: ypQBead 2.6s ease-in-out infinite alternate; }
.yq-flow { stroke-dasharray: 5 4; animation: ypQFlow 3.2s linear infinite; }
.yq-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: ypQFlame 2.2s ease-in-out infinite alternate; }
.yq-wave { transform-box: fill-box; transform-origin: 0 50%; animation: ypQWave 5s ease-in-out infinite alternate; }
@keyframes ypQSway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes ypQRise { from { transform: translateY(1.6px); } to { transform: translateY(-1.8px); } }
@keyframes ypQBead { from { transform: scale(.82); opacity: .7; } to { transform: scale(1.12); opacity: 1; } }
@keyframes ypQFlow { to { stroke-dashoffset: -18; } }
@keyframes ypQFlame { from { transform: scaleY(.88) skewX(-4deg); } to { transform: scaleY(1.1) skewX(4deg); } }
@keyframes ypQWave { from { transform: skewY(-1.6deg); } to { transform: skewY(1.6deg); } }

/* -- 8b · the track --------------------------------------------------------------------------------
   One canvas, much larger than the screen, with the whole journey pinned to
   it; a camera travels through it as you scroll. Everything below is where
   things look — js/yep.js decides where they are.

   Three layers at three parallax rates. The transform on each is written from
   JS every frame and is the only thing that moves: the photographs, the words
   and the drawings never animate individually, which is what makes a change
   of picture a cut rather than a transition. There is nothing here to fade. */
/* Three turns instead of seven means each leg has to carry a quarter of the
   journey on its own, and thirty photographs instead of twenty need somewhere
   to stand. Twelve screens: the corners are cut half again as hard now, so
   the camera covers more ground per turn of the scroll, and the two extra
   screens are what buys the reading time back. */
.yp-path { position: relative; height: 1200vh; }
.yp-path-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, rgba(226, 196, 126, .05), transparent 70%);
}
/* the room the journey happens in is inserted here by js/bg-field.js — see
   css/bg-field.css — and it carries its own opacity, ramped in by js/yep.js */
/* a holder for the one gold ramp the drawings share; it draws nothing itself */
.yp-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* A layer is a point, not a box: it has no size of its own and everything in
   it is placed absolutely in world coordinates. transform-origin at the top
   left is what lets the scale be a camera zoom rather than a zoom about the
   middle of some box whose size we would then have to care about. */
.yp-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
#yp-far { z-index: 1; }
#yp-mid { z-index: 3; }
#yp-near { z-index: 4; }
/* the words and the closing line: the back layer's rate, the front layer's
   place in the stack */
#yp-fore { z-index: 5; }

/* a photograph, standing in the world */
.yp-ph {
  position: absolute; left: 0; top: 0; margin: 0;
  width: var(--w, 420px); aspect-ratio: var(--a, .78);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) rotate(var(--r, 0deg));
  border-radius: 10px; overflow: hidden; background: #0b0a08;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .72), 0 0 0 1px rgba(226, 196, 126, .2), 0 0 40px rgba(232, 180, 70, .12);
}
.yp-ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--o, center); display: block; }
/* a viewfinder on some of them, so the wall reads as a set of frames rather
   than a contact sheet */
.yp-ph--mark::before, .yp-ph--mark::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 1.5px solid rgba(255, 241, 205, .8);
}
.yp-ph--mark::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.yp-ph--mark::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
/* and a caption strip on a few, set like a contact-sheet edge */
.yp-ph-tag {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem .45rem;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700;
  font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 241, 205, .85);
  background: linear-gradient(to top, rgba(6, 5, 4, .82), transparent);
}

/* the three words, set far back so they drift past slowly */
.yp-pw {
  position: absolute; left: 0; top: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%);
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; text-transform: uppercase;
  font-size: var(--s, 18rem); line-height: .84; letter-spacing: -.045em; white-space: nowrap;
  color: rgba(247, 239, 220, .085);
  transition: color .9s var(--yp-lift), text-shadow .9s var(--yp-lift);
}
/* Lit, and standing off whatever is behind it. The two dark shadows are what
   let a word this size sit over a photograph and still be read: they darken
   the picture in the few pixels around each letter and nowhere else, which is
   what a title over footage has always done. */
.yp-pw.is-lit {
  color: #fff3d6;
  text-shadow:
    0 0 .05em rgba(255, 246, 214, .55), 0 0 .5em rgba(232, 180, 70, .4),
    0 .02em .1em rgba(0, 0, 0, .75), 0 0 .38em rgba(0, 0, 0, .6);
}

/* The drawings, scattered through the world at the back. They were drawn in
   outline, which at four tenths of an opacity read as a wire tracing; filled
   they are gold objects lying about the place, so they can sit up a little
   brighter and still stay behind the photographs.

   A flat fill still read as a sticker, though — gold is not a colour, it is a
   colour plus a highlight. Every shape is filled from one of two ramps (see
   #yq-lit and #yq-dim in yep.html) that run dark to near-white to dark across
   it, which is what a curved metal surface does to a light, and the whole
   thing carries a small warm glow so it looks lit rather than printed. */
.yp-dd {
  position: absolute; left: 0; top: 0; line-height: 0; width: var(--w, 150px);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) rotate(var(--r, 0deg));
  opacity: .62;
  filter: drop-shadow(0 .06em .18em rgba(0, 0, 0, .55))
          drop-shadow(0 0 .10em rgba(255, 236, 178, .4));
}
.yp-dd svg { width: 100%; height: auto; overflow: visible; display: block; }

/* The closing line, in four pieces.

   It used to be one block of text wiped in by a clip on a timer. It is four
   pieces now and each one belongs to a photograph: js/yep.js gives a piece
   its --u as that photograph crosses the middle of the frame, so the line is
   handed over rather than drawn on. Each piece fades up and rises the last
   few pixels into place as it lands — never a width, which would reflow the
   text and shuffle the letters, and no longer a clip, for the reason under
   .yp-tw below.

   The pieces sit in front of every photograph on the stage, so nothing ever
   crosses in front of the words. There used to be a soft dark plate behind
   the line as well, to keep it readable over whatever was passing; nothing
   passes there any more (see the closing run in js/yep.js), so the plate was
   a smudge on the background and is gone. */
.yp-this {
  position: absolute; left: 0; top: 0; margin: 0; white-space: nowrap;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%);
  font-size: var(--s, 11rem); line-height: 1;
  text-shadow: 0 .03em .14em rgba(0, 0, 0, .8), 0 0 .5em rgba(0, 0, 0, .55);
}
/* Each piece comes up rather than being wiped across.

   It was a clip, and a clip cuts everything the element draws — including
   the glow, which is the one part of it that has to reach past the letters.
   So the lit rectangle you could see round YEP was its own clip: the glow
   filled the clip's box, stopped dead at its edges, and there was no size of
   glow that would have fixed it. Fading a piece up and letting it rise the
   last few pixels does the same job and has no box in it. */
.yp-tw {
  display: inline-block;
  opacity: var(--u, 0);
  transform: translateY(calc((1 - var(--u, 0)) * .07em));
  will-change: opacity, transform;
}
.yp-this-a { color: #fbf6e8; }
/* YEP and the full stop after it: the page's own display face, bold, with the
   page's own glow on it — the same setting as every other heading on the site
   (compare .yp-nb-title). It was Playfair italic with a gradient clipped to
   the letters, which is a different bird from everything round it, and a
   gradient clipped to text takes no text-shadow, which is what drove the glow
   into a filter and the filter into the clip in the first place. */
.yp-this-a, .yp-this-b, .yp-this-dot {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800; font-style: normal; letter-spacing: -.03em;
}
.yp-this-b, .yp-this-dot {
  color: #fff3d6;
  text-shadow: 0 .03em .14em rgba(0, 0, 0, .82),
               0 0 .26em rgba(232, 180, 70, .6),
               0 0 .72em rgba(232, 180, 70, .32);
}
.yp-this-dot { margin-left: -.02em; }

/* ── the place ──────────────────────────────────────────────────────────────
   Chinmaya Gardens, a line drawing in gold on a turning plate, drawn on the
   canvas by js/yep.js every frame at the angle the plate has reached. (It
   was a sheet of twenty-four drawings stepped by the scroll, which could
   only ever jump fifteen degrees at a time, then a solid model in gold
   boxes, which the user did not like.) No box round it: it stands on the
   slate like an object on a table, with a warm pool of light under it. */
.yp-map {
  position: relative; margin: 1.2rem 0 0; aspect-ratio: 6 / 5;
  width: 100%; max-width: 460px;
  background: radial-gradient(60% 46% at 50% 56%, rgba(232, 180, 70, .12), transparent 72%);
}
.yp-map-gold {
  position: absolute; left: 0; top: 0; width: 100%; height: 86%;
  display: block; max-width: none;
}
.yp-map-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem .9rem .8rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.yp-map-cap b {
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(.9rem, 1.5vw, 1.15rem); color: #f7efdc; letter-spacing: -.01em;
}
.yp-map-cap span {
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(226, 196, 126, .72);
}

/* four corner marks on the frame itself, so the stage reads as a viewfinder */
.yp-reticle { position: absolute; inset: clamp(1.1rem, 3vh, 2.2rem); z-index: 6; pointer-events: none; opacity: var(--h-o, 0); }
.yp-reticle i { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(226, 196, 126, .28); }
.yp-reticle i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.yp-reticle i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.yp-reticle i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.yp-reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.yp-path-fallback { display: flex; gap: 1rem; justify-content: center; padding: 6rem 1.5rem; }
.yp-path-fallback img { width: min(28vw, 260px); height: auto; border-radius: 8px; }

/* -- 9 · join ---------------------------------------------------------------------------------- */
.yp-join { padding: clamp(5rem, 12vh, 8rem) 0; border-top: 1px solid var(--yp-line); }
.yp-join-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.yp-venue {
  padding: 1.6rem 1.8rem; border-radius: 18px; border: 1px solid var(--yp-line);
  background: linear-gradient(160deg, #141210, #0a0908);
  display: flex; flex-direction: column; gap: .3rem; transition: border-color .4s ease, transform .5s var(--yp-lift);
}
.yp-venue:hover { border-color: rgba(226, 196, 126, .5); transform: translateY(-4px); }
.yp-venue b { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; color: #f7efdc; }
.yp-venue span { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--yp-gold); }

/* -- 10 · dates --------------------------------------------------------------------------------- */
.yp-dates { padding: clamp(5rem, 12vh, 8rem) 0; }
.yp-line { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.yp-line::before, .yp-line::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(255, 255, 255, .1); }
.yp-line::after { right: auto; width: var(--yp-done, 0%); background: linear-gradient(90deg, #b8903c, #fff1c2); box-shadow: 0 0 12px rgba(244, 210, 113, .6); transition: width 2.4s var(--yp-lift); }
/* A head of light rides the tip while the rail draws, so the line reads as
   travelling rather than simply growing. --yp-done is handed to us in pixels
   by js/yep.js — the exact centre of the dot for the milestone we have
   reached — so both the rail and this head stop beside that date. */
.yp-line-tip {
  content: ""; position: absolute; top: 12px; left: var(--yp-done, 0%); z-index: 2;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: var(--yp-bright); opacity: 0;
  box-shadow: 0 0 10px 2px rgba(244, 210, 113, .9), 0 0 26px 8px rgba(244, 210, 113, .32);
  transition: left 2.4s var(--yp-lift), opacity .6s ease .15s;
}
.yp-line.is-drawn .yp-line-tip { opacity: 1; }
.yp-line.is-instant::after, .yp-line.is-instant .yp-line-tip { transition: none; }
.yp-line li { position: relative; padding-top: 2.4rem; display: flex; flex-direction: column; gap: .35rem; }
.yp-line li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; z-index: 1;
  background: #050505; border: 2px solid rgba(255, 255, 255, .25); transition: all .5s ease;
}
.yp-line li.is-done::before { background: var(--yp-gold); border-color: var(--yp-gold); box-shadow: 0 0 12px rgba(244, 210, 113, .8); }
.yp-line li.is-next::before { border-color: var(--yp-bright); animation: ypPulse 1.6s ease-in-out infinite; }
@keyframes ypPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 210, 113, .6); } 50% { box-shadow: 0 0 0 8px rgba(244, 210, 113, 0); } }
.yp-line time { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--yp-gold); }
.yp-line b { font-family: var(--font-display, 'Syne', sans-serif); font-size: 1.05rem; color: #f7efdc; }
.yp-line span { font-size: .85rem; color: rgba(244, 234, 208, .55); }
/* "Now" sits on the milestone we have actually reached, which is where the
   rail stops — not on the one still ahead of us. */
.yp-line li.is-now b::after { content: "Now"; margin-left: .6rem; padding: .15rem .5rem; border-radius: 99px; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; background: var(--yp-gold); color: #050505; vertical-align: .2em; }

/* -- 11 · support --------------------------------------------------------------------------------- */
.yp-support { padding: clamp(5rem, 12vh, 8rem) 0; border-top: 1px solid var(--yp-line); }
.yp-support-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.yp-costs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--yp-line); }
.yp-costs div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--yp-line); transition: padding .4s var(--yp-lift), background .4s ease; }
.yp-costs div:hover { padding-left: .8rem; padding-right: .8rem; background: rgba(226, 196, 126, .05); }
.yp-costs dt { color: rgba(244, 234, 208, .75); font-size: .95rem; }
.yp-costs dd { margin: 0; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700; color: var(--yp-bright); white-space: nowrap; }
.yp-costs div:first-child dd { color: #fff3c4; text-shadow: 0 0 .3em rgba(250, 205, 95, .7); }

.yp-cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.yp-cta-row--c { justify-content: center; }
.yp-btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 1rem 1.7rem; border-radius: 999px;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-decoration: none;
  color: #050505; background: linear-gradient(100deg, #c99a44, #f6d98a 40%, #fff1c2 60%, #d4a64e); background-size: 200% 100%;
  transition: background-position .6s ease, transform .4s var(--yp-lift), box-shadow .4s ease;
}
.yp-btn:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232, 180, 70, .35); }
.yp-btn--ghost { background: transparent; color: var(--yp-bright); border: 1px solid rgba(226, 196, 126, .45); }
.yp-btn--ghost:hover { background: rgba(226, 196, 126, .08); }

/* -- 12 · close ---------------------------------------------------------------------------------- */
.yp-end { padding: clamp(7rem, 18vh, 12rem) 1.5rem clamp(6rem, 14vh, 9rem); text-align: center; }
.yp-end-kicker { margin: 0 auto; max-width: 30em; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.6rem); color: rgba(244, 234, 208, .75); }
.yp-end-by { margin: .6rem 0 3rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--yp-gold); }
.yp-end-title { margin: 0; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; font-size: clamp(3rem, 10vw, 9rem); line-height: .95; letter-spacing: -.03em; color: #f7efdc; }
/* "Grow" carries the line, so it is set a little above the other two */
.yp-end-title em { font-size: 1.16em; line-height: .88; }

/* -- phones and tablets ------------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .yp-wall { grid-template-columns: repeat(3, 1fr); }
  .yp-wall-col:nth-child(n+4) { display: none; }
  .yp-logo { width: 86vw; }
  .yp-hero-sub { letter-spacing: .3em; text-indent: .3em; }
  .yp-nb { width: 70vw; }
  .yp-nb-foot { font-size: .8rem; }
  .yp-why-grid { grid-template-columns: 1fr; }
  .yp-why-who { position: relative; top: auto; width: min(220px, 60vw); margin: 0 auto; }
  .yp-card { grid-template-columns: 1fr; min-height: 0; top: 9vh; }
  .yp-card--serve { top: 11vh; } .yp-card--grow { top: 13vh; }
  .yp-card-cut { max-height: 38vh; width: calc(100% + 2 * clamp(1.8rem, 4vw, 3.6rem)); margin: 0 calc(-1 * clamp(1.8rem, 4vw, 3.6rem)); object-position: center; }
  .yp-card-num { font-size: clamp(4.5rem, 24vw, 8rem); left: .2rem; top: -.4rem; }
  .yp-num-grid, .yp-ach-grid { grid-template-columns: repeat(2, 1fr); }
  .yp-join-grid, .yp-support-grid { grid-template-columns: 1fr; }
  .yp-line { grid-template-columns: 1fr; gap: 1.6rem; padding-left: 2.2rem; }
  .yp-line::before, .yp-line::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .yp-line::after { width: 2px; height: var(--yp-done, 0%); transition: height 2.4s var(--yp-lift); }
  /* stacked, the rail runs down the left edge, so the head travels in Y */
  .yp-line-tip { left: 8px; top: var(--yp-done, 0%); transition: top 2.4s var(--yp-lift), opacity .6s ease .15s; }
  .yp-line li { padding-top: 0; }
  .yp-line li::before { left: -2.2rem; top: .1rem; }
  /* The same world, travelled a little slower: there is less width to swing
     across, so the journey needs the extra length. The photographs and the
     type are sized from the frame in js/yep.js, so there is nothing to
     re-scale here beyond the frame's own furniture. */
  .yp-path { height: 1050vh; }
  .yp-line-q { font-size: clamp(1.5rem, 7vw, 2.6rem); width: 92vw; }
  .yp-reticle { display: none; }
  .yp-ph--mark::before, .yp-ph--mark::after { width: 12px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .yp-logo, .yp-band-in, .yp-h2 em, .yp-cue i { animation: none !important; }
  .yp-blot { transform: none !important; opacity: 1 !important; animation: none !important; }
  .yp-say .w { opacity: 1; }
  .yp-say mark { background-size: 100% .06em; transition: none; }
}