/* =============================================================================
   yep-join.css — YEP §9 to §10: the board.

   Who can join, the fees, the scholarship and YEP-16 are one board with one
   piece of chalk on it, which comes in to make its marks and goes out. The
   board is pinned (.yp-bhold) and everything on it is laid out, in order, on
   one world (.yp-world), in scenes a screen or so tall: the line; the five
   criteria with Chinmaya Gardens beside them; YOU; the conversation about
   the fees; the scholarship; YEP-16. js/yep-join.js moves the world under the
   frame (--tx, --ty; --z pulls back where a thing would not fit, and closes
   in by 6% only while YEP-16 is written), draws the
   strokes by their dash offsets, and puts the chalk where the stroke has got
   to; this sheet says what it all looks like.

   It used to be three sections, each with its own pinned frame, and the
   chalk dropped out of the bottom of one and was next seen coming down on to
   another, with a conversation between them it took no part in.
   ========================================================================== */

/* ── the slate ─────────────────────────────────────────────────────────────────
   The wall behind the board is assets/site/scratch-board.webp, black board
   scuffed and scratched (the user's picture, 2026-09-30; it was the Leaders
   blackboard), at 80% over the black -- it was fully opaque, and the user
   found it too strong. It is fixed to the screen, so it does not scroll or
   repeat, and the wrapper clips it to itself, so it is seen only here: a
   fixed layer inside a box with clip-path is clipped by the box, which is
   background-attachment: fixed without that property's repaint on every
   scroll. Over it, a warm pool of light where the chalk works and dark at
   the edges. */
.yp-slate { position: relative; clip-path: inset(0); }
.yp-slate-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #050505;
}
.yp-slate-bg::before, .yp-slate-bg::after { content: ""; position: absolute; inset: 0; }
.yp-slate-bg::before { background: url("../assets/site/scratch-board.webp") center / cover no-repeat; opacity: .8; }
/* the same wall as AVIF, 141 KB for 207, where image-set() and AVIF are both known */
.yp-slate-bg::before { background-image: image-set(url("../assets/site/scratch-board.avif") type("image/avif"), url("../assets/site/scratch-board.webp") type("image/webp")); }
.yp-slate-bg::after {
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(232, 190, 110, .07), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0, 0, 0, .62));
}
.yp-slate > section { position: relative; z-index: 1; }
.yp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── the board ─────────────────────────────────────────────────────────────── */
.yp-board { padding: 0; }
.yp-brun { position: relative; height: 1200vh; }     /* set by js from the length of the chalk's round */
.yp-bhold {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
/* the world: laid out at the width of the frame, in normal flow, and moved
   under the frame as one picture. transform-origin is its top left, so the
   script's --tx and --ty are simply where that corner is on the screen. */
.yp-world {
  position: absolute; left: 0; top: 0; width: 100%;
  transform-origin: 0 0;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(var(--z, 1));
  will-change: transform;
}
.yp-sc {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--yp-gutter);
}

/* the line: justified as a block, three lines each set at the size that
   makes it exactly as wide as the others (js/yep-join.js sets --jl on each);
   with no script they are three centred lines */
.yp-sc--line { min-height: 100vh; min-height: 100svh; }
.yp-board .yp-jtitle {
  margin: 0 auto; text-align: center;
  font-size: clamp(2rem, 4.4vw, 4.4rem); line-height: 1.08;
}
.yp-jl { display: block; white-space: nowrap; }
.yp-jtitle.is-fit .yp-jl { font-size: var(--jl, 1em); line-height: 1.04; }
/* "empower themselves" is no longer underlined: the chalk's first mark is
   the first tick (the user, 2026-09-30) */
.yp-ul { white-space: nowrap; }

/* ── the chalk's two marks ─────────────────────────────────────────────────────
   Both are the user's brush references in gold (assets/yep/brush-tick.webp
   and brush-line.webp, lossless, made by assets/yep/source/brush-build.py), seen
   through a mask of one fat stroke along the middle of the brush, which the
   script draws by its dash offset as the chalk moves along it -- the way the
   16 is written. So what appears behind the chalk is the brush exactly,
   broken edges and dry streaks and all. They were a stroke of 5 or 6 px,
   which the user found too thin. The glow is a filter on the whole mark,
   outside the mask, so nothing cuts it. */
.yp-tick-pen, .yp-you-pen {
  fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round;
}
.yp-tick-pen { stroke-width: 150; }
.yp-you-pen { stroke-width: 120; }

/* who can join: the five in one column, on one left edge and one measure,
   evenly spaced, each with its tick in front of it; Chinmaya Gardens beside
   them. They were set about the frame as the reference had them and read as
   scattered. */
.yp-sc--crit {
  min-height: 100vh; min-height: 100svh;
  flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: 1500px; margin: 0 auto;
}
.yp-crit-col { flex: 0 1 auto; min-width: 0; }
.yp-crit-k {
  display: flex; align-items: center; gap: .8em;
  margin: 0 0 clamp(1.6rem, 4vh, 2.6rem);
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 700;
  font-size: clamp(.66rem, .9vw, .8rem); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(232, 190, 90, .8);
}
.yp-crit { list-style: none; margin: 0; padding: 0; }
.yp-crit li {
  position: relative; padding-left: 3.6em;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.1rem, 1.85vw, 2rem); line-height: 1.3;
  color: rgba(244, 234, 208, .6);
  transition: color .6s ease, text-shadow .6s ease;
}
.yp-crit li + li { margin-top: clamp(1rem, 3.2vh, 2.1rem); }
/* one line each where there is room, so the five read as one column */
@media (min-width: 901px) { .yp-crit li { white-space: nowrap; } }
.yp-crit li.is-ticked { color: #fbf3de; text-shadow: 0 0 .9em rgba(246, 217, 138, .22); }
/* the tick: the brush tick, rising a little above its line as a hand's
   tick does */
.yp-tick {
  position: absolute; left: 0; top: -.62em; width: 2.6em; height: 2.6em;
  overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 .12em rgba(246, 205, 95, .55));
}
/* Chinmaya Gardens, with "Where" in the setting of "Who can join", its dot
   before it, at the top left of the picture over the empty board above the
   plate (where the user marked it) */
.yp-map-col { flex: 0 0 auto; width: clamp(260px, 30vw, 470px); display: flex; flex-direction: column; align-items: center; }
.yp-crit-k.yp-map-k { position: absolute; left: .9rem; top: 4%; z-index: 1; margin: 0; }
.yp-sc--crit .yp-map { width: 100%; margin: 0; }

/* then this is for YOU */
.yp-sc--you { min-height: 90vh; min-height: 90svh; text-align: center; }
.yp-you {
  margin: 0; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(2.3rem, 6.6vw, 6.4rem); line-height: 1.02; letter-spacing: -.02em;
  color: #f7efdc;
}
.yp-you-w {
  position: relative; display: inline-block; white-space: nowrap;
  color: #fff1c2;
  text-shadow: 0 0 .04em #fff6d8, 0 0 .18em rgba(250, 205, 95, .75), 0 0 .5em rgba(250, 190, 70, .35);
}
/* the brush swept under it, in gold */
.yp-you-mark {
  position: absolute; left: -4%; width: 108%; bottom: -.3em; height: .46em;
  overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 .08em rgba(246, 205, 95, .6));
}

/* ── the conversation ─────────────────────────────────────────────────────────
   A messaging app's thread, in white, gold and black: a header with who it
   is, the questions on the left in white bubbles, the answer on the right in
   a black one with a gold rim, and a read receipt under it. Each message is
   typed first -- three dots in a bubble -- and then there: it comes up a few
   pixels and fades in, eased out, with no overshoot (--m, from the script;
   the first version popped out of its tail past its size and back, and read
   as jumping). One face, the page's body face, and a measure short enough
   that no message runs to more than two lines. */
.yp-sc--chat { min-height: 110vh; min-height: 110svh; }
.yp-chat {
  width: min(640px, 100%);
  border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 12, 9, .92), rgba(6, 5, 4, .92));
  border: 1px solid rgba(232, 190, 90, .28);
  box-shadow: 0 2.4rem 5rem rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.yp-chat-head {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem 1.3rem; border-bottom: 1px solid rgba(232, 190, 90, .16);
  font-style: normal;
}
.yp-chat-av {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-style: normal;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800; font-size: 1rem;
  color: #0b0906; background: linear-gradient(140deg, #f6d98a, #c99a44);
}
.yp-chat-av { font-size: .82rem; letter-spacing: -.02em; }
.yp-chat-head span { display: flex; flex-direction: column; line-height: 1.15; }
.yp-chat-head b { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: #fbf3de; }
.yp-chat-head small { font-family: 'Inter', system-ui, sans-serif; font-size: .74rem; color: rgba(232, 190, 90, .8); }
.yp-chat-body {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.5rem 1.3rem 1.3rem;
}
.yp-msg {
  position: relative; display: grid; max-width: 80%;
  /* until the script has run, simply there */
  opacity: var(--o, 1);
  transform: translate3d(0, calc((1 - var(--m, 1)) * 16px), 0);
}
.yp-msg > i, .yp-msg > p { grid-area: 1 / 1; }
.yp-msg--in { align-self: flex-start; justify-items: start; }
.yp-msg--out { align-self: flex-end; justify-items: end; }
.yp-msg p {
  margin: 0; padding: .72em 1.05em;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(1rem, 1.45vw, 1.3rem); line-height: 1.38; letter-spacing: -.005em;
  opacity: var(--m, 1);
}
.yp-msg--in p { background: #fbf8f1; color: #0b0906; border-radius: 22px 22px 22px 6px; }
.yp-msg--out p {
  background: #000; color: #f6d98a;
  border: 1.5px solid rgba(232, 190, 90, .85); border-radius: 22px 22px 6px 22px;
}
/* the typing bubble: the shape of a message, three dots going */
.yp-typing {
  display: inline-flex; gap: .3rem; align-items: center; align-self: start;
  padding: .95em 1.05em; border-radius: 22px 22px 22px 6px;
  background: #fbf8f1; font-style: normal;
  opacity: var(--t, 0);
}
.yp-msg--out .yp-typing { border-radius: 22px 22px 6px 22px; background: #000; border: 1.5px solid rgba(232, 190, 90, .85); }
.yp-typing b {
  width: .5rem; height: .5rem; border-radius: 50%; background: #8d877b;
  animation: ypType 1.1s ease-in-out infinite;
}
.yp-msg--out .yp-typing b { background: #e8be5a; }
.yp-typing b:nth-child(2) { animation-delay: .16s; }
.yp-typing b:nth-child(3) { animation-delay: .32s; }
@keyframes ypType {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-.28rem); opacity: 1; }
}
/* the answer: "zero.", large, in the display face, made of embers. Until the
   fire is drawing (and if it never does) it is plain gold. */
/* (its fire is cut to the bubble: the message is its own stacking context,
   so the fire's screen blend has nothing but the bubble to drop its black
   against, and outside the bubble the black showed as a box) */
.yp-msg--zero p { padding: .1em .42em .2em; line-height: 1; overflow: hidden; }
.yp-zero {
  position: relative; display: inline-block;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(3.2rem, 7.4vw, 7rem); letter-spacing: -.02em;
  color: #f6d98a;
  text-shadow: 0 0 .06em rgba(255, 236, 170, .6), 0 0 .3em rgba(232, 180, 60, .3);
  transition: color .8s ease, text-shadow .8s ease;
}
.yp-zero-fire {
  position: absolute; pointer-events: none; mix-blend-mode: screen;
}
.yp-zero-fire canvas { display: block; max-width: none; }
.yp-msg--zero.is-fire .yp-zero { color: rgba(246, 217, 138, .12); text-shadow: none; }
.yp-msg-read {
  grid-area: auto; justify-self: end; margin-top: .35rem;
  font-family: 'Inter', system-ui, sans-serif; font-size: .7rem; letter-spacing: .04em;
  color: rgba(232, 190, 90, .7);
  opacity: var(--r, 1);
}

/* ── the scholarship ──────────────────────────────────────────────────────────
   "100% scholarship*" on an arc: js/yep-join.js puts each letter (.yp-fl) on
   a circle, turned to it, from where it would stand on a straight line
   (--fx, --fy, --fr); with no script the line is straight. It is embossed:
   gold, lit from above -- a bright edge over the letters, two steps of dark
   gold under them and a shadow, then the glow. The asterisk is the same
   metal. It jumps from the far end of the arc to the start of the next line
   and becomes the gold bar of the Centers page's slide (.yp-free-bar): the
   bar is born the asterisk's size in its place as the asterisk goes, runs
   its leading edge out to the end of the line, and its trailing edge
   follows, uncovering THERE IS NO ASTERISK. behind it. The line is cut by a
   clip only while the bar stands over the edge of the cut, and the clip is
   taken off the moment the bar has gone, so its glow is never cut
   (HANDOFF §8.1). The sentence under it is simply there. */
.yp-sc--free { min-height: 100vh; min-height: 100svh; text-align: center; gap: clamp(1rem, 3vh, 2rem); }
/* At the size it had before it was made as wide as the frame (the user,
   2026-09-30: "revert to the previous size but keep this heavier
   embossing"). The emboss
   is cast metal: a bright lip along the top of each letter, then its depth
   in eight steps of gold going to bronze, then the shadow it throws on the
   board, then its glow. */
.yp-free-a {
  position: relative; margin: 0 0 .1em;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 6rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  color: #f9dd92;
  text-shadow:
    0 -.016em 0 #fffcea,
    0 -.03em .01em rgba(255, 250, 225, .55),
    0 .012em 0 #e8bd62,
    0 .024em 0 #d6a647,
    0 .036em 0 #c3923a,
    0 .048em 0 #ad7d2e,
    0 .06em 0 #966a24,
    0 .072em 0 #7e571b,
    0 .084em 0 #664513,
    0 .096em 0 #4f340d,
    0 .12em .02em rgba(0, 0, 0, .75),
    0 .19em .14em rgba(0, 0, 0, .6),
    0 0 .32em rgba(250, 200, 90, .42),
    0 0 .9em rgba(250, 186, 66, .24);
}
.yp-fl {
  display: inline-block; transform-origin: 50% 60%;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) rotate(var(--fr, 0deg));
}
.yp-ast {
  display: inline-block; margin-left: .04em;
  color: #f9dd92;
  transform-origin: 50% 50%;
  transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) rotate(var(--ar, 0deg)) scale(var(--as, 1));
  opacity: var(--ao, 1);
  will-change: transform;
}
.yp-free-b {
  position: relative; margin: 0;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(1.2rem, 3.2vw, 3.4rem); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
  color: #fbf8f1;
}
.yp-free-bt {
  display: inline-block; padding: 0 .1em;
  text-shadow: 0 0 .3em rgba(255, 255, 255, .25);
}
.yp-free-bar {
  position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  background: #f2c75c;
  box-shadow: 0 0 .5em rgba(242, 199, 92, .55), 0 0 .12em rgba(255, 240, 190, .8);
  opacity: 0;
}
.yp-free-c {
  margin: .4rem 0 0; max-width: 40rem;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: rgba(244, 234, 208, .78);
}

/* ── YEP-16 ───────────────────────────────────────────────────────────────────
   The picture is laid out in the reference's own frame, 1920 by 660, scaled
   to the width of the board: every size and place below is a share of that
   width, so it keeps its composition at any size. It no longer closes in on
   the 16 while it is written: the camera holds the whole picture. */
.yp-sc--16 { min-height: 100vh; min-height: 100svh; padding: 0; }
.yp-yr {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1920 / 660;
  /* Syne at 740, between its Bold and ExtraBold: measured against the
     reference, '26 there is 3.04 times as wide as its 2 is tall and YEP
     4.26 times as wide as its capitals; Syne 800 gives 4.08 and 5.2, 700
     gives 2.47 and 3.45, and 740 gives 3.13 and 4.12. yep.html loads Syne as
     the variable font so the weight between is there to be had. */
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 740; line-height: 1;
  --u: calc(100vw / 1920);
}
.yp-yr > * { position: absolute; }
.yp-yr-y {
  font-size: calc(var(--u) * 460); letter-spacing: -.02em; color: #474747;
  white-space: nowrap;
}
.yp-yr-26 {
  left: calc(var(--u) * -64); top: calc(var(--u) * -17);
  transform: translate3d(calc(var(--u) * var(--a26, 0)), calc(var(--u) * var(--b26, 0)), 0);
}
.yp-yr-27 {
  left: calc(var(--u) * 1211); top: calc(var(--u) * 230);
  transform: translate3d(calc(var(--u) * var(--a27, 0)), calc(var(--u) * var(--b27, 0)), 0);
}
/* The trail from '26 to '27 is no longer drawn here: it is the second half
   of one dashed line from the full stop of THERE IS NO ASTERISK. (.yp-lead,
   below). This one is kept, unseen, to say where that half runs. */
.yp-yr-trail {
  left: 0; top: 0; width: 100%; height: 100%; overflow: visible; visibility: hidden;
}
.yp-yr-dash {
  fill: none; stroke: #bdbdbd; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 26 30;
}
.yp-yr-draw { fill: none; stroke: #fff; stroke-width: 18; stroke-linecap: round; }
/* the trail, all of it, from the full stop to '27: in the world's own
   pixels, in the trail's dash and colour (widths are set by the script, to
   the board) */
.yp-lead { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.yp-lead-dash { fill: none; stroke: #bdbdbd; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 20 23; }
.yp-lead-draw { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; }
/* YEP, in glowing yellow: the page's display face, and the glow is
   text-shadow, never a filter under a clip (HANDOFF §8.1) */
.yp-yr-yep {
  left: calc(var(--u) * 377); top: calc(var(--u) * 293);
  font-size: calc(var(--u) * 270); letter-spacing: 0;
  color: #ffe45c;
  text-shadow: 0 0 .02em #fff7c0, 0 0 .1em rgba(255, 222, 70, .75),
               0 0 .3em rgba(255, 200, 40, .42), 0 0 .75em rgba(255, 180, 30, .22);
  transform: translate3d(0, calc(var(--u) * var(--byep, 0)), 0);
  opacity: var(--oyep, 1);
}
/* 16, in a brush hand across the end of YEP: an SVG over the whole picture,
   in its 1920 by 660 units, so the brush face and the pen that reveals it
   share one set of coordinates with the chalk that holds the pen */
.yp-yr-16 { left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.yp-16-t {
  font-family: 'Mr Dafoe', 'Segoe Script', cursive; font-weight: 400;
  font-size: 380px; letter-spacing: -.02em; fill: #fff;
}
.yp-16-pen {
  fill: none; stroke: #fff; stroke-width: 64; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 900px) {
  .yp-yr-dash { stroke-width: 9; }
}

/* the chalk: the Leaders page's sprite sheet, one frame at a time. It is on
   the world, so the camera's zoom is its zoom too. */
.yp-chalk {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  width: var(--c-w, 130px); height: var(--c-w, 130px);
  transform-origin: 22.61% 69.39%;              /* the tip */
  transform: translate3d(var(--c-x, -300px), var(--c-y, -300px), 0) rotate(var(--c-r, 0deg)) scale(var(--c-s, 1));
  filter: drop-shadow(0 .4rem 1rem rgba(0, 0, 0, .6));
  opacity: var(--c-o, 0);
  will-change: transform;
}
/* The stick itself, on a layer of its own so it can be coloured: the white
   chalk multiplied by --c-tint and cut to its own shape. White at the 16;
   gold (the ticks' and the stroke's #f2c75c) while it writes gold -- the
   colour of what it writes (the user, 2026-09-30). The shadow is on the
   element, round the coloured stick. */
.yp-chalk::before {
  content: ""; position: absolute; inset: 0;
  /* The sprite's stick runs up and to the right from its tip, 36 degrees
     above level. For a round it was turned on to its tip (the stick running
     down to the fingers); the user asked for it back the way it was, "up is
     better than down", and tilted a little more (2026-10-01): it stands 14
     degrees steeper, 50 degrees above level, as a hand holds it to the
     board. Turned here, about the tip, so the tip stays where the script
     puts it, and so the drop shadow on the element below still falls down
     the board. */
  transform-origin: 22.61% 69.39%;
  transform: rotate(-14deg);
  background-image: url("../assets/leaders/chalk.webp");
  background-repeat: no-repeat; background-size: 600% 400%;
  background-position: var(--c-f, 0% 0%);
  background-color: var(--c-tint, #fff);
  background-blend-mode: multiply;
  -webkit-mask: url("../assets/leaders/chalk.webp") no-repeat;
  mask: url("../assets/leaders/chalk.webp") no-repeat;
  -webkit-mask-size: 600% 400%; mask-size: 600% 400%;
  -webkit-mask-position: var(--c-f, 0% 0%); mask-position: var(--c-f, 0% 0%);
  /* the sprite as AVIF (45 KB for 85) where image-set() knows it; a browser
     that does not keeps the WebP lines above */
  background-image: image-set(url("../assets/leaders/chalk.avif") type("image/avif"), url("../assets/leaders/chalk.webp") type("image/webp"));
  -webkit-mask-image: image-set(url("../assets/leaders/chalk.avif") type("image/avif"), url("../assets/leaders/chalk.webp") type("image/webp"));
  mask-image: image-set(url("../assets/leaders/chalk.avif") type("image/avif"), url("../assets/leaders/chalk.webp") type("image/webp"));
}
.yp-chalk.is-gold { --c-tint: #f7cf66; }

/* ── the dates, under the picture ───────────────────────────────────────────── */
.yp-dates { padding: 0 0 clamp(5rem, 12vh, 8rem); }
.yp-yr-panel {
  position: relative;
  background: rgba(0, 0, 0, .46); padding: clamp(2.2rem, 5vh, 3.4rem) 0 clamp(3rem, 8vh, 5rem);
}

/* phones and tablets: the criteria over the place rather than beside it */
@media (max-width: 900px) {
  .yp-sc--crit { flex-direction: column; justify-content: center; gap: 2.4rem; padding-top: 8vh; padding-bottom: 8vh; }
  .yp-crit li { font-size: clamp(1.1rem, 4.6vw, 1.45rem); }
  .yp-map-col { width: min(100%, 360px); }
  .yp-chat { border-radius: 24px; }
  .yp-chat-body { padding: 1.2rem 1rem 1rem; }
  .yp-msg { max-width: 86%; }
}

/* no pinning, no chalk, no camera: the page, finished */
.yp-board.is-still .yp-brun { height: auto; }
.yp-board.is-still .yp-bhold { position: relative; height: auto; overflow: visible; }
.yp-board.is-still .yp-world { position: relative; transform: none; }
.yp-board.is-still .yp-chalk { display: none; }
.yp-board.is-still .yp-crit li { color: #fbf3de; }
.yp-board.is-still .yp-msg { --o: 1; --m: 1; --r: 1; }
.yp-board.is-still .yp-ast { --ao: 0; }
.yp-board.is-still .yp-free-bar { display: none; }
.yp-board.is-still .yp-sc { min-height: 0; padding-top: 12vh; padding-bottom: 12vh; }