/* Twofold: the folded letter.
 *
 * The look since the worldwide rebrand (October 2026), loaded last so it
 * wins over app.css, phone.css and views.css without rewriting them.
 *
 * The idea: an introduction here is a letter. Two photos and one short line,
 * sent to one person, opened only if they answer. So the pages are warm
 * paper with one soft fold down the middle (something folded in two), the
 * cards are notes with a turned-down corner, photos are keepsakes lifted off
 * the page, and the mark is a heart folded in two. Deep wine is the serious
 * anchor, rose is anything you can tap, blush and ivory are the paper, a
 * little gold is for seals. Headings are set in Fraunces, like a printed
 * invitation; everything you read stays in Figtree.
 *
 * Nothing here is Kenyan or African, and nothing is beads: the bands, bead
 * frames and bead rows of the old look are switched off below.
 *
 * Rules of the house still apply: animate only opacity and transform, no
 * infinite animations, no backdrop blur on large or scrolling surfaces.
 */

:root {
  /* The palette. */
  --wine: #6d1436;
  --wine-deep: #4a0b25;
  --rose: #e0336f;
  --rose-deep: #c81f5e;          /* rose as text: 5.5 to 1 on white */
  --rose-soft: #fde6ee;
  --blush: #f7d7e1;
  --paper: #fbf4ef;
  --paper-deep: #f3e6df;
  --note: #fffdfb;
  --ink: #2b1720;
  --gold: #c9973f;
  --plum: #5b2a6e;

  /* The old token names the other sheets use, pointed at the new palette. */
  --bg: var(--paper);
  --surface: var(--note);
  --surface-2: #f8eee9;
  --line: #ecd9df;
  --line-soft: #f3e6ea;
  --text: var(--ink);
  --muted: #7b6470;
  --earth: var(--wine);
  --sand: var(--paper-deep);
  --shuka: var(--rose);
  --shuka-deep: var(--rose-deep);
  --bead-blue: var(--plum);
  --bead-yellow: var(--gold);
  --bead-orange: var(--rose-deep);
  --bead-white: var(--note);
  --blush-bead: var(--blush);
  --violet: var(--plum);
  --accent: var(--rose);
  --accent-soft: var(--rose-soft);
  --accent-ink: #fff;
  --accent-rgb: 224, 51, 111;
  --accent-grad: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
  --ochre: #a8771f;
  --dusk-1: #fbe3ea;
  --dusk-2: #f6c9d6;
  --dusk-3: #e9a7bd;
  --night: var(--ink);
  --tone-2: var(--plum);
  --tone-4: var(--wine);
  --mark-ground: var(--wine);
  --mark-bead: var(--blush);

  /* Depth: paper lifted off paper. Three layers, warm, never grey. */
  --lift-1: 0 1px 2px rgba(74, 11, 37, .05), 0 4px 10px rgba(74, 11, 37, .05);
  --lift-2: 0 1px 2px rgba(74, 11, 37, .05), 0 8px 20px rgba(74, 11, 37, .07),
            0 22px 44px rgba(74, 11, 37, .08);
  --lift-3: 0 2px 4px rgba(74, 11, 37, .08), 0 14px 30px rgba(74, 11, 37, .14);

  /* The fold down the middle of every page: shade on one side of the
     crease, light on the other, fading out within a hand's width. */
  --fold: linear-gradient(90deg,
            transparent calc(50% - 90px),
            rgba(109, 20, 54, .035) calc(50% - 1px),
            rgba(255, 255, 255, .45) 50%,
            transparent calc(50% + 70px));
  /* Candlelight: a warm rose glow top right, a little gold bottom left. */
  --glow: radial-gradient(120% 55% at 100% 0%, rgba(224, 51, 111, .10), transparent 62%),
          radial-gradient(90% 45% at 0% 100%, rgba(201, 151, 63, .09), transparent 60%);
  --wash: var(--glow);
  --weave: linear-gradient(transparent, transparent);

  /* A heart, for masks: bursts, the divider, small markers. */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28.5C8.6 23.4 3.5 18.4 3.5 12.2 3.5 8.3 6.5 5.5 10 5.5c2.5 0 4.6 1.3 6 3.4 1.4-2.1 3.5-3.4 6-3.4 3.5 0 6.5 2.8 6.5 6.7 0 6.2-5.1 11.2-12.5 16.3z'/%3E%3C/svg%3E");

  /* No bands: a 2px edge under the header instead of band and bead strip,
     and no footer unless FOOTER_NOTE puts one there. */
  --band-h: 2px;
  --footer-h: 0px;

  --r-card: 18px;
  --r-ctl: 12px;
}
html.footer-note { --footer-h: 32px; }   /* a class, not :has(): views change in place */

/* Three backgrounds (the owner, October 2026). Before anyone signs in, one
   shared look: blush paper by candlelight (the :root values above; also
   non-binary members). Signed in, women get rose paper with a lavender
   glow, men a warm ivory linen with a caramel glow, and every scene behind
   the pages is drawn again on that paper (tools/make_scenes.py). Cards,
   buttons and type stay the same for everybody. */
html[data-gender="woman"] {
  --bg: #fdf0f5;
  --paper: #fdf0f5;
  --paper-deep: #f6dbe7;
  --glow: radial-gradient(120% 55% at 100% 0%, rgba(224, 51, 111, .16), transparent 62%),
          radial-gradient(95% 50% at 0% 100%, rgba(172, 120, 222, .16), transparent 60%);
  --wash: var(--glow);
}
html[data-gender="man"] {
  --bg: #f8f3ec;
  --paper: #f8f3ec;
  --paper-deep: #efe2d2;
  --glow: radial-gradient(120% 55% at 100% 0%, rgba(196, 150, 100, .20), transparent 62%),
          radial-gradient(95% 50% at 0% 100%, rgba(109, 20, 54, .06), transparent 60%);
  --wash: var(--glow);
  /* A faint linen weave, so his paper reads as cloth-bound rather than pink. */
  --weave: repeating-linear-gradient(0deg, rgba(120, 90, 60, .028) 0 1px, transparent 1px 4px),
           repeating-linear-gradient(90deg, rgba(120, 90, 60, .022) 0 1px, transparent 1px 4px);
}
html[data-gender="woman"] .scene-hero { --scene-img: url("/static/img/scenes/woman/hero.webp?v=4"); }
html[data-gender="woman"] .scene-chai { --scene-img: url("/static/img/scenes/woman/chai.webp?v=4"); }
html[data-gender="woman"] .scene-elders { --scene-img: url("/static/img/scenes/woman/elders.webp?v=4"); }
html[data-gender="woman"] .scene-heritage { --scene-img: url("/static/img/scenes/woman/heritage.webp?v=4"); }
html[data-gender="woman"] .scene-table { --scene-img: url("/static/img/scenes/woman/table.webp?v=4"); }
html[data-gender="woman"] .scene-market { --scene-img: url("/static/img/scenes/woman/market.webp?v=4"); }
html[data-gender="woman"] .scene-empty { --scene-img: url("/static/img/scenes/woman/empty.webp?v=4"); }
html[data-gender="woman"] .scene-words { --scene-img: url("/static/img/scenes/woman/words.webp?v=4"); }
html[data-gender="woman"] .scene-exchange { --scene-img: url("/static/img/scenes/woman/exchange.webp?v=4"); }
html[data-gender="woman"] .scene-reveal { --scene-img: url("/static/img/scenes/woman/reveal.webp?v=4"); }
html[data-gender="man"] .scene-hero { --scene-img: url("/static/img/scenes/man/hero.webp?v=4"); }
html[data-gender="man"] .scene-chai { --scene-img: url("/static/img/scenes/man/chai.webp?v=4"); }
html[data-gender="man"] .scene-elders { --scene-img: url("/static/img/scenes/man/elders.webp?v=4"); }
html[data-gender="man"] .scene-heritage { --scene-img: url("/static/img/scenes/man/heritage.webp?v=4"); }
html[data-gender="man"] .scene-table { --scene-img: url("/static/img/scenes/man/table.webp?v=4"); }
html[data-gender="man"] .scene-market { --scene-img: url("/static/img/scenes/man/market.webp?v=4"); }
html[data-gender="man"] .scene-empty { --scene-img: url("/static/img/scenes/man/empty.webp?v=4"); }
html[data-gender="man"] .scene-words { --scene-img: url("/static/img/scenes/man/words.webp?v=4"); }
html[data-gender="man"] .scene-exchange { --scene-img: url("/static/img/scenes/man/exchange.webp?v=4"); }
html[data-gender="man"] .scene-reveal { --scene-img: url("/static/img/scenes/man/reveal.webp?v=4"); }
html[data-gender="woman"] .desk-art { background-image: url("/static/img/scenes/woman/hero.webp?v=4"); }
html[data-gender="man"] .desk-art { background-image: url("/static/img/scenes/man/hero.webp?v=4"); }

html { background: var(--bg); }

/* The page: paper, candlelight, and the fold. (Replaces the savannah that
   used to sit at the foot of every page.) */
html[data-gender] .viewport,
html body .viewport {
  background-color: var(--bg);
  background-image: var(--fold), var(--weave), var(--wash);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}


/* --- type -------------------------------------------------------------------
 * Headings in Fraunces, like a printed invitation; reading text in Figtree. */
h1, h2,
.q-group-head, .price-card h2, .serious-card h2 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--wine);
}
h3 { color: var(--ink); }
.brand-name { color: var(--wine); font-weight: 700; }
.hero h1 { color: var(--wine); }
.kicker, .step-n { color: var(--rose-deep); }
a { color: var(--rose-deep); }
.price-card h2 { color: var(--wine); }

.serious-strap {
  background: transparent; color: var(--wine);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 6px 2px;
}


/* --- no beads ------------------------------------------------------------- */
.wristband-top, .site-footer.wristband, .shuka-band { display: none; }

/* The edge under the header: a hairline, rose fading to gold and back. */
html body .bead-strip {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rose) 25%, var(--gold) 50%,
                              var(--rose) 75%, transparent);
  opacity: .55;
}

.site-header { background: var(--note); border-bottom: 0; }
.site-footer {
  background: var(--note); border-top: 1px solid var(--line);
  color: var(--muted); font-size: .72rem;
  display: flex; align-items: center; justify-content: center;
}

/* A divider: a hairline with a small wax-seal heart in the middle. */
html body .bead-rule {
  position: relative; height: 1px; margin: 30px 24px;
  background: linear-gradient(90deg, transparent, var(--blush) 20%, var(--blush) 80%, transparent);
  border: 0;
}
html body .bead-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px; transform: translate(-50%, -50%);
  background: var(--rose);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}

/* Cards are notes: plain paper, no bead frame, lifted off the page. */
html body .card {
  border: 1px solid rgba(109, 20, 54, .07);
  border-image: none;
  border-radius: var(--r-card);
  background-clip: border-box;
  box-shadow: var(--lift-2);
}
.card.ages, .card.communities, .card.price-card {
  border-top: 1px solid rgba(109, 20, 54, .07);
}
html body .scene-block > .card { box-shadow: var(--lift-3); }

/* The landing's notes have one corner turned down: the bottom right, where
   the page shows behind it. */
body.scene-stack .shell > section .card,
body.scene-stack .shell > section.card { position: relative; border-bottom-right-radius: 4px; }
body.scene-stack .shell > section .card::before,
body.scene-stack .shell > section.card::before {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(315deg, var(--bg) 0 50%, #f2dde5 50% 100%);
  border-top-left-radius: 8px;
  box-shadow: -3px -3px 6px rgba(74, 11, 37, .07);
}

/* Pictures are keepsakes: a white edge, round corners, a soft shadow. */
html body .art-frame,
html body img.shot, html body img.art.photo, html body .photo-grid img,
html body .photos img, html body .intro-photos img, html body .photo-drop-preview img {
  border: 5px solid #fff;
  border-image: none;
  border-radius: 14px;
  background: #fff;
  background-clip: border-box;
  box-shadow: var(--lift-3);
}


/* --- scenes: the drawings behind the pages -------------------------------
 * New stationery drawings (tools/make_scenes.py): no people, nothing from
 * any one country. They fade into the paper, not into red earth. */
.scene-hero     { --scene-img: url("/static/img/scenes/hero.webp?v=4"); }
.scene-chai     { --scene-img: url("/static/img/scenes/chai.webp?v=4"); }
.scene-elders   { --scene-img: url("/static/img/scenes/elders.webp?v=4"); }
.scene-heritage { --scene-img: url("/static/img/scenes/heritage.webp?v=4"); }
.scene-table    { --scene-img: url("/static/img/scenes/table.webp?v=4"); }
.scene-market   { --scene-img: url("/static/img/scenes/market.webp?v=4"); }
.scene-empty    { --scene-img: url("/static/img/scenes/empty.webp?v=4"); }
.scene-words    { --scene-img: url("/static/img/scenes/words.webp?v=4"); }
.scene-exchange { --scene-img: url("/static/img/scenes/exchange.webp?v=4"); }
.scene-reveal   { --scene-img: url("/static/img/scenes/reveal.webp?v=4"); }

.scene-art {
  background: linear-gradient(180deg, rgba(251, 244, 239, 0) 72%, var(--bg) 100%),
              var(--scene-img) center / 100% 100% no-repeat,
              var(--paper-deep);
}
html body.scene-page .viewport {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(251, 244, 239, 0) 0,
                    rgba(251, 244, 239, 0) calc(var(--scene-h) - 80px),
                    var(--bg) calc(var(--scene-h) + 10px)),
    var(--scene-img),
    var(--fold), var(--weave), var(--wash);
  background-repeat: no-repeat;
  background-position: top center, top center, center, center, center;
  background-size: 100% 100%, 100% var(--scene-h), 100% 100%, 100% 100%, 100% 100%;
}
/* The sheet a page sits on: one note, no bead edge. */
html body.scene-page .shell {
  border: 1px solid rgba(109, 20, 54, .07);
  border-image: none;
  border-radius: 22px;
  background: rgba(255, 253, 251, .97);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 -6px 24px rgba(74, 11, 37, .10), var(--lift-2);
}
html body.scene-page .shell .card {
  border: 1px solid var(--line-soft);
  box-shadow: var(--lift-1);
}
/* The homepage: the scenes fade into paper, and the headings between the
   notes are wine on paper, not cream on earth. */
html body.scene-stack .viewport {
  background-color: var(--bg);
  background-image: var(--fold), var(--weave), var(--wash);
  background-size: 100% 100%;
}
body.scene-stack .shell > section.center:not(.card) h2 { color: var(--wine); }


/* --- buttons -------------------------------------------------------------- */
html body .btn.primary {
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .26), 0 1px 2px rgba(74, 11, 37, .14);
}
html body .btn:not(.primary) {
  background: var(--note);
  border: 1.5px solid rgba(109, 20, 54, .18);
  color: var(--wine);
  box-shadow: var(--lift-1);
}
html body .btn:not(.primary):hover { background: #fff; color: var(--wine); }
html body .btn:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .45); }


/* --- fields: no bead strip, a rose glow while you type --------------------- */
html input[type="text"], html input[type="email"], html input[type="password"],
html input[type="number"], html input[type="tel"], html input[type="date"],
html input[type="search"], html select, html textarea {
  border: 1.5px solid #e8d3db;
  border-left-width: 1.5px;
  border-radius: var(--r-ctl);
  background-color: #fffdfb;
  background-image: none;
  padding-left: 14px;
  box-shadow: inset 0 1px 2px rgba(74, 11, 37, .04);
}
html select {
  /* the arrow, drawn in wine, since the bead strip that shared the slot is gone */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d1436' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px 18px;
  background-position: right 14px center;
  padding-right: 42px;
  -webkit-appearance: none; appearance: none;
}
html input[type="email"], html input[type="password"], html input[type="tel"],
html input[type="search"], html input[name="display_name"], html input#city {
  background-image: var(--ico);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 14px center;
  padding-left: 44px;
}
html input:focus, html select:focus, html textarea:focus {
  border-color: var(--rose);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
  animation: none;
}
html input[type="checkbox"], html input[type="radio"] {
  background-image: none; box-shadow: none;
}
html input::placeholder, html textarea::placeholder { color: #b39aa6; }

/* No bead in front of every label. */
.field > label::before,
.field:nth-of-type(n) > label::before { display: none; }
.field:focus-within > label { color: var(--rose-deep); }

/* Chip choices: a quiet round marker that fills rose when picked. */
.choices label:nth-of-type(n) { --dot: #e7c4d0; }
.choices input:checked + label::before {
  background: radial-gradient(circle, #fff 0 34%, var(--rose) 36%);
}
.q-opt:nth-of-type(n) { --dot: #e7c4d0; }


/* --- question cards and the character picker ------------------------------ */
html body .q-card { background: var(--note); box-shadow: var(--lift-2); border-radius: var(--r-card); }
html body .q-ico {
  background: radial-gradient(circle, #fff 0 58%, transparent 60%), var(--q, var(--rose));
}
html body .q-card:has(input:checked) .q-ico {
  background: radial-gradient(circle, #fff 0 58%, transparent 60%), var(--bead-green);
}
html body .q-card.needed:not(:has(input:checked)) .q-ico {
  background: radial-gradient(circle, #fff 0 58%, transparent 60%), var(--rose);
}
html body .q-card.needed:not(:has(input:checked)) {
  background: #fff8fa;
  box-shadow: 0 0 0 2px #f6c6d6, var(--lift-2);
}
html body .persona-group .group-head::before {
  clip-path: none; background: var(--q, var(--rose));
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}
html body .date-ideas-ico {
  background: radial-gradient(circle, #fff 0 58%, transparent 60%), var(--bead-green);
}

/* The drop zone for a photo: a dashed rose edge on paper, not a bead stripe. */
html body .photo-drop-zone {
  background: #fffafb;
  border: 2px dashed #f0a9c2;
  border-radius: var(--r-card);
}


/* --- profile strength, the match ring, celebrations ------------------------ */
.strength-bead.on:nth-child(n) { background: var(--accent-grad); }
.strength-bead { background: #efdde3; }

/* Bursts are hearts now. */
html body .bead-burst span, html body .swipe-burst span {
  clip-path: none;
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}
.bead-burst span:nth-child(n) { background: var(--rose); }
.bead-burst span:nth-child(3n+2) { background: var(--blush); }
.bead-burst span:nth-child(3n) { background: var(--gold); }
.swipe-burst span:nth-child(n) { background: var(--rose); }
.swipe-burst span:nth-child(3n+2) { background: var(--blush); }
.swipe-burst.super span:nth-child(n) { background: var(--gold); }


/* --- messages: letters back and forth ------------------------------------- */
html body .msg {
  background: var(--note);
  border: 1px solid var(--line);
  box-shadow: var(--lift-1);
  padding-left: 14px;
}
html body .msg.mine {
  background: var(--accent-grad);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), .22);
}
html body .msg.mine::after { display: none; }
html body .msg.photo.mine { background: #fde3ec; }


/* --- small things --------------------------------------------------------- */
.pill.accent { background: var(--rose-soft); border-color: #f4b8cb; color: var(--rose-deep); }
.money-warning { border-left-color: var(--gold); background: #fff7e8; }
.gift-banner { background: #fbf1f7; border-color: var(--plum); }
html body .serious-list li { background: var(--note); }
.date-kind { background: var(--wine); color: #fff; }
.date-partner { background: var(--gold); color: var(--wine-deep); }

/* The match ring is hearts (beads.ring). */
.bead-ring .ring-heart { transform-box: fill-box; transform-origin: center; }


/* --- a laptop or desktop: a wider column, and the desk around it -----------
 * The owner (October 2026): on a laptop the view should be a little wider.
 * The app stays one column, 520px on a tablet, 600px from 900px and 640px
 * from 1280px, and from 1200px it is a sheet of paper on a desk: who we are
 * on the left, what we promise on the right, each shrinking to the room
 * left. Phones and the installed app never see any of this. */
@media (min-width: 900px) { :root { --app-w: 600px; } }
@media (min-width: 1280px) { :root { --app-w: 640px; } }
.desk { display: none; }
@media (min-width: 1200px) {
  html {
    background: var(--glow), var(--bg);
  }
  body {
    border-inline: 0;
    box-shadow: 0 0 0 1px rgba(109, 20, 54, .06), 0 30px 80px rgba(74, 11, 37, .16);
  }
  .desk {
    display: flex; flex-direction: column; justify-content: center; gap: 18px;
    position: fixed; top: 0; bottom: 0; z-index: 0;
    width: calc((100vw - var(--app-w)) / 2);
    padding: 40px clamp(22px, 3vw, 72px);
  }
  .desk-left { left: 0; align-items: flex-end; text-align: right; }
  .desk-right { right: 0; align-items: flex-start; }
  .desk > * { max-width: min(360px, 100%); margin: 0; }
  .desk-brand {
    display: flex; align-items: center; gap: 12px;
    font: 700 clamp(1.6rem, 2.2vw, 2.1rem)/1 "Fraunces", Georgia, serif; color: var(--wine);
  }
  .desk-brand svg { width: 46px; height: 46px; flex: none; }
  .desk-tagline {
    font: 650 clamp(1.3rem, 1.8vw, 1.75rem)/1.2 "Fraunces", Georgia, serif; color: var(--wine);
    letter-spacing: -.01em;
  }
  .desk-lede { color: var(--muted); font-size: .98rem; line-height: 1.55; }
  .desk-art {
    width: min(340px, 100%); aspect-ratio: 4 / 3;
    background: url("/static/img/scenes/hero.webp?v=4") center / cover no-repeat;
    border: 6px solid #fff; border-radius: 18px;
    box-shadow: var(--lift-3);
    transform: rotate(-2deg);
  }
  .desk-note {
    display: grid; gap: 2px; width: min(300px, 100%);
    padding: 16px 18px 16px 46px; position: relative;
    background: var(--note); border-radius: 16px;
    border: 1px solid rgba(109, 20, 54, .07);
    box-shadow: var(--lift-2);
  }
  .desk-note:nth-child(2) { transform: rotate(1.2deg) translateX(10px); }
  .desk-note:nth-child(3) { transform: rotate(-1deg); }
  .desk-note::before {
    content: ""; position: absolute; left: 16px; top: 19px; width: 18px; height: 18px;
    background: var(--rose);
    -webkit-mask: var(--heart) center / contain no-repeat;
    mask: var(--heart) center / contain no-repeat;
  }
  .desk-note strong { color: var(--wine); font: 650 1.05rem/1.3 "Fraunces", Georgia, serif; }
  .desk-note span { color: var(--muted); font-size: .9rem; }
}


/* --- the join page and the old dusk frames ------------------------------- */
/* The join slides fade the scene into the paper, not into red earth. */
html body.join-stepped.scene-page .viewport {
  background-image:
    linear-gradient(180deg, rgba(251, 244, 239, 0) 0, rgba(251, 244, 239, 0) 24px,
                    var(--bg) 92px),
    var(--scene-img), var(--fold), var(--weave), var(--wash);
  background-size: 100% 100%, var(--scene-w) calc(var(--scene-w) * .75),
                   100% 100%, 100% 100%, 100% 100%;
  background-position: top center, center calc(var(--scene-w) * -.36),
                       center, center, center;
}
/* Picture frames that used to hold a dusk sky behind the drawing. */
html body .hero .art-frame, html body .ages .art-frame,
html body .communities .art-frame, html body .price-card .art-frame,
html body .heritage .art-frame, html body .table-card .art-frame {
  background: #fff;
}


/* --- the join form's progress: dots, not glossy beads ---------------------- */
/* Each step stays a thumb-sized button (views.css); only the mark drawn in
   its middle changes: a small dot, rose once done, a rose pill for here. */
html body .join-bead::before {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 999px;
  background: #ecd3dc;
  box-shadow: none;
  transform: none;
  transition: width .2s var(--ease-decel, ease-out), margin .2s var(--ease-decel, ease-out);
}
html body .join-bead.done::before { background: var(--rose); opacity: .55; }
html body .join-bead.on::before {
  width: 22px; margin-left: -11px;
  background: var(--accent-grad);
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), .3);
  transform: none;
}


/* --- a dropdown inside a card ---------------------------------------------
 * Cards clip what overflows them (app.css), which also clipped the town
 * search's list of results to the card's edge, under the next card. While
 * somebody is typing in a card, it lets its list out and sits above its
 * neighbours. :focus-within, not :has(), so nothing is re-checked unless
 * focus moves. */
html body .card:focus-within { overflow: visible; z-index: 3; }
html body .place-list {
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--lift-3); background: var(--note);
}

/* --- the Where chooser (Filters page, regions.py) -------------------------
 * Places I choose: each continent folds open (a details element), each
 * region is a small heading, and every region and country is a real
 * checkbox drawn as a chip. The checkbox stays in the page (only hidden from
 * sight), so the keyboard and screen readers still reach it. */
html body .where-group { border-top: 1px solid var(--line-soft); padding: 10px 0 6px; }
html body .where-group > summary {
  cursor: pointer; font-weight: 600; color: var(--wine); padding: 4px 0;
}
html body .where-region {
  margin: 10px 0 6px; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
html body .place-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; }
/* The box itself is out of sight; its chip is what is pressed. */
html body .place-chips input { position: absolute; opacity: 0; pointer-events: none; }
html body .place-chips .chip { cursor: pointer; user-select: none; }
/* "All of East Africa" reads as the whole region, ahead of its countries. */
html body .place-chips .chip.whole { font-weight: 600; }
html body .place-chips input:checked + .chip {
  background: var(--rose); border-color: var(--rose); color: var(--note);
}
html body .place-chips input:focus-visible + .chip { outline: 2px solid var(--plum); outline-offset: 2px; }

/* --- the store apps and Account (October 2026) ------------------------------ */
/* The Account tile spans the whole You grid at its foot, so it reads as the
 * account row under the six tiles rather than a seventh one left alone. */
html body .you-nav .you-account { grid-column: 1 / -1; }
/* Inside the Android or iOS store app (html[data-shell="app"], set from the
 * app's User-Agent in base.html): the PWA install bar and the web push panel
 * do not apply there, so they never show, even for a moment before the
 * scripts that decide would hide them. */
html[data-shell="app"] .install-bar,
html[data-shell="app"] [data-push-panel] { display: none !important; }