/* css/stage-page.css - the redesign's long pages: the Landing (R2), Home
   (R3), the aspect pages and Goals (R4), built from views/stage-page.js. Ported from
   the approved prototype (docs/prototype/redesign/proto.css).

   Geometry keeps the prototype's reference scale: --px is one prototype
   pixel, 1/2545 of the page's width on a laptop and 1/820 on a phone, so
   every measurement below is the prototype's own number. It is measured with
   container units against #main-view, so it is the same width the script's
   pointer maths uses (no scrollbar difference). */

.stage-page {
  --px: calc(100cqw / 2545);
  --panel-r: calc(40 * var(--px));
  --photo-r: calc(55 * var(--px));
  --card-r: calc(35.5 * var(--px));
  --gutter: calc(136 * var(--px));
  /* Each section is a rounded sheet with a real gap between sheets (v126,
     "real cards"), on a night sky (v128, the owner: the pledges' night band
     as the background "everywhere that are the space between the box").
     The specks are fixed to the window, so the cards slide over a still sky;
     views/night-sky.js adds the twinkle and the shooting stars. */
  --sheet-gap: max(8px, calc(20 * var(--px)));
  --night: #1b1b1b;
  --night-specks:
    radial-gradient(1.5px 1.5px at 8% 30%, #6d6552 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 72%, #57503f 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 29% 46%, #6d6552 50%, transparent 51%),
    radial-gradient(1px 1px at 43% 20%, #57503f 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 66%, #6d6552 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 36%, #57503f 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 78%, #6d6552 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 24%, #57503f 50%, transparent 51%);
  position: relative;
  isolation: isolate;
  background-color: var(--night);
  background-image: var(--night-specks);
  background-size: 720px 460px;
  background-attachment: fixed;
  color: var(--frame-ink);
  font-family: var(--font-sans);
  overflow-x: clip;
}

/* The sky's life (views/night-sky.js): specks that twinkle and a shooting
   star, behind every card (z-index -1 in the page's own stacking context),
   so they show only in the gaps. They move only while .sky-awake is on,
   which scrolling sets and a short rest clears. */
.sky-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.twinkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #cbb88f;
  opacity: 0.25;
  animation: twinkle 2.4s ease-in-out infinite;
  animation-play-state: paused;
}
.twinkle.is-big { width: 3px; height: 3px; box-shadow: 0 0 6px 1px rgba(240, 216, 168, 0.35); }
.sky-awake .twinkle { animation-play-state: running; }
@keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.meteor {
  position: absolute;
  width: 140px;
  height: 1.5px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(240, 216, 168, 0), #f0d8a8);
  border-radius: 2px;
  --tilt: -24deg;
  transform: translateY(-50%) rotate(var(--tilt));
  transform-origin: 100% 50%;
}
/* Along a thin seam between two cards it runs flat, so it stays in view. */
.meteor.seam { --tilt: 0deg; }
.meteor.fly { animation: meteor 900ms cubic-bezier(.3, 0, .6, 1) forwards; }
@keyframes meteor {
  0% { opacity: 0; transform: translateY(-50%) rotate(var(--tilt)) translateX(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50%) rotate(var(--tilt)) translateX(-360px); }
}
@media (prefers-reduced-motion: reduce) { .sky-fx { display: none; } }
html[data-reduce-motion] .sky-fx { display: none; }

.stage-page .panel {
  background: var(--frame-page);
  border-radius: var(--panel-r);
  position: relative;
  margin-top: var(--sheet-gap);
}
/* The ends of the stack (v129, the owner: the first and last boxes' outer
   corners "feel off"). The first card meets the header, the last the footer,
   both the same paper: square those outer corners and close the gap, so the
   header runs into the first card and the last card into the footer, and
   the night shows only between cards. The sky layer (.sky-fx) is put first
   by views/night-sky.js, hence the two forms of "first". The pledge sky on
   Home is night itself and keeps running under the footer. */
.stage-page > :first-child:not(.sky-fx),
.stage-page > .sky-fx:first-child + * {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.stage-page > :last-child:not(.wall) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.stage-page.textpage { padding-bottom: 0; }

.stage-page .wrap {
  width: calc(2273 * var(--px));
  margin-inline: auto;
}
.stage-page .split {
  display: grid;
  grid-template-columns: calc(var(--col) * var(--px)) minmax(0, 1fr);
  align-items: start;
}
.stage-page .label {
  margin: 0;
  font-size: max(11px, calc(17 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  height: calc(1311 * var(--px));
  overflow: hidden;
  margin-top: var(--sheet-gap);
  background: var(--frame-page);
  border-radius: var(--panel-r);
}
.hero-stage { position: absolute; inset: 0; }
.hero .lockup,
.hero .part {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.hero .lockup { transform-origin: 0 0; }
.hero .part-mark { transform-origin: calc(1272.5 * var(--px)) calc(470 * var(--px)); }
.hero .mark,
.hero .mark-hit {
  position: absolute;
  left: calc(1092 * var(--px));
  top: calc(290 * var(--px));
  width: calc(361 * var(--px));
  aspect-ratio: 1;
}
.hero .mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The star can be tapped: on a phone there is no pointer for it to follow. */
.hero .mark-hit {
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.hero .mark-hit:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 6px; }
.hero .word,
.hero .inc {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  font-family: var(--frame-word);
  font-weight: 400;
  line-height: 1;
  white-space: pre;
  color: var(--frame-ink);
}
.hero .word { top: calc(740 * var(--px)); font-size: calc(170 * var(--px)); }
.hero .inc { top: calc(910 * var(--px)); font-size: calc(124 * var(--px)); }
/* On the Landing the second line is only a descriptor: small, spaced and
   quiet under ASTERISM, so the name is what the eye lands on (v134). */
.landing .hero .inc { top: calc(925 * var(--px)); font-size: calc(58 * var(--px)); letter-spacing: 0.14em; color: #736e66; }
/* The Landing's call to begin, under the lockup on the first screen. Above
   the star's tap target, which covers only the star. */
.hero-cta {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1110 * var(--px));
  z-index: 3;
  display: flex;
  justify-content: center;
  margin: 0;
}

/* ------------------------------------------------ the compact page top
   A weekly page's head (views/stage-page.js topMarkup): the mark beside the
   page's name, one short band. The weekly pages' own sections are tighter
   than the Landing's statements too. */
.page-top {
  position: relative;
  overflow: hidden;
  padding: calc(100 * var(--px)) 0 calc(90 * var(--px));
}
.page-top-grid {
  display: grid;
  grid-template-columns: calc(250 * var(--px)) minmax(0, 1fr);
  gap: calc(90 * var(--px));
  align-items: center;
}
.page-top-mark { position: relative; aspect-ratio: 1; }
.page-top .mark { width: 100%; height: 100%; }
.page-top .mark svg,
.page-top .mark img { display: block; width: 100%; height: 100%; overflow: visible; }
.page-top .mark-hit {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.page-top .mark-hit:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 6px; }
.page-top-word {
  margin: 0 0 calc(24 * var(--px));
  font-family: var(--frame-word);
  font-weight: 400;
  font-size: max(40px, calc(130 * var(--px)));
  line-height: 1;
  text-transform: uppercase;
}
.page-top-word small { display: block; margin-top: calc(10 * var(--px)); font-size: 0.55em; }
.page-top-text p {
  max-width: calc(1400 * var(--px));
  margin: 0 0 calc(16 * var(--px));
  font-weight: 500;
  font-size: max(15px, calc(24 * var(--px)));
  line-height: 1.7;
}
.page-top-text .page-top-lead,
.page-top-body .page-top-lead { font-weight: 700; font-size: max(16px, calc(30 * var(--px))); }
/* With a plate: the mark and the name on the region's photograph, darkened at
   the foot so white type reads, and the body under it on the wash. */
.page-top.has-plate { padding: 0 0 calc(60 * var(--px)); }
.page-top-plate {
  position: relative;
  padding: calc(260 * var(--px)) 0 calc(50 * var(--px));
  background-size: cover;
  background-position: center;
}
.page-top-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}
.page-top-plate .page-top-grid { position: relative; grid-template-columns: calc(200 * var(--px)) minmax(0, 1fr); gap: calc(50 * var(--px)); align-items: end; }
.page-top-plate .page-top-word { margin: 0; color: #ffffff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); }
.page-top-plate .mark-hit:focus-visible { outline-color: #ffffff; }
.page-top-body { padding-top: calc(50 * var(--px)); }
.page-top-body p { margin: 0; font-weight: 500; font-size: max(15px, calc(24 * var(--px))); line-height: 1.6; }
.page-top-text .page-top-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(30 * var(--px)); }
.goals .statement,
.compare .statement,
.aspect-page .statement { padding: calc(100 * var(--px)) 0 calc(90 * var(--px)); }

/* ------------------------------------------------ why and how it works */
.mission {
  padding: calc(300 * var(--px)) 0 calc(320 * var(--px));
  overflow-x: clip;
}
.mission .split { --col: 771; }
.stage-page .headline {
  margin: 0;
  font-weight: 700;
  font-size: calc(40 * var(--px));
  line-height: 1.8;
  white-space: nowrap;
}
.statement { padding: calc(170 * var(--px)) 0 calc(150 * var(--px)); }
.statement .split { --col: 704; }
.statement .label { margin-top: calc(16 * var(--px)); }
.statement p {
  max-width: calc(1300 * var(--px));
  margin: 0 0 calc(104 * var(--px));
  font-weight: 500;
  font-size: calc(32 * var(--px));
  line-height: 2.05;
  letter-spacing: 0.02em;
}
.statement p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- the eight regions */
.projects {
  position: relative;
  margin-top: var(--sheet-gap);
  background: var(--frame-page);
  border-radius: var(--panel-r);
}
.projects .inner { padding: calc(300 * var(--px)) 0 calc(651 * var(--px)); }
.projects .label { margin: 0 0 calc(19 * var(--px)) calc(136 * var(--px)); }
.cardblock {
  width: calc(2112 * var(--px));
  margin-left: calc(135 * var(--px));
}
.lcard {
  position: relative;
  background: var(--frame-card);
  border-radius: var(--card-r);
  will-change: transform;
}
.region-card + .region-card { margin-top: calc(40 * var(--px)); }
.brand-visual {
  height: calc(768 * var(--px));
  overflow: hidden;
}
.brand-logo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(938 * var(--px));
  display: grid;
  place-items: center;
}
.brand-logo img {
  display: block;
  width: calc(300 * var(--px));
  height: auto;
  border-radius: 18%;
  box-shadow: 0 calc(10 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, 0.08);
}
.brand-photo {
  position: absolute;
  left: calc(938 * var(--px));
  right: calc(72 * var(--px));
  top: calc(74 * var(--px));
  bottom: calc(74 * var(--px));
  border-radius: calc(20 * var(--px));
  background-color: #dddddd;
  background-size: cover;
  background-position: center;
}
.info {
  display: grid;
  grid-template-columns: calc(634 * var(--px)) minmax(0, 1fr) auto;
  align-items: start;
  min-height: calc(236 * var(--px));
  padding: calc(70 * var(--px)) calc(71 * var(--px));
}
.card-title {
  margin: 0;
  font-size: max(16px, calc(30 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-desc {
  max-width: calc(900 * var(--px));
  margin: 0;
  font-weight: 600;
  font-size: max(14px, calc(19 * var(--px)));
  line-height: 1.8;
  color: #111111;
}
.info-links { display: flex; align-items: center; align-self: center; margin: 0; }
/* The aspect's name in ink, ringed in its hue: several hues are too light to
   carry small text on white themselves. */
.tag {
  display: inline-flex;
  align-items: center;
  height: calc(52 * var(--px));
  min-height: 32px;
  padding: 0 max(12px, calc(26 * var(--px)));
  border: 1.5px solid;
  border-radius: 999px;
  font-size: max(11px, calc(14 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.allprojects { margin: calc(183 * var(--px)) 0 0; }

.stage-page .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(8px, calc(14 * var(--px)));
  min-height: 48px;
  height: calc(88 * var(--px));
  padding: 0 max(22px, calc(46 * var(--px)));
  border-radius: 999px;
  background: var(--frame-dark);
  color: #ffffff;
  font-size: max(13px, calc(18 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.stage-page .pill::after {
  content: "";
  flex: none;
  width: max(6px, calc(10 * var(--px)));
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}
.stage-page .pill-xl {
  min-width: calc(372 * var(--px));
  height: calc(118 * var(--px));
  background: var(--frame-card);
  color: var(--frame-ink);
  font-size: max(14px, calc(24 * var(--px)));
}
.stage-page .pill:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 4px; }
/* The label's wrapper, added on the first hover so it can lag inside the
   leaning pill (views/magnet.js); it lays out exactly as the bare label did. */
.pill__in { display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
/* Once wrapped, the dot travels with the label, as in the prototype. */
.stage-page .pill:has(> .pill__in)::after { content: none; }
.stage-page .pill__in::after {
  content: "";
  flex: none;
  width: max(6px, calc(10 * var(--px)));
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}
/* The hero sits on the light page, where the card-coloured large pill all but
   vanishes: the hero's call to begin keeps the large size in the dark pill. */
.stage-page .hero-cta .pill-xl { background: var(--frame-dark); color: #ffffff; }

/* ------------------------------------------------------------ photo band
   Three photographs stacked; the upper two wipe in as the band scrolls
   (views/stage-page.js). Each window <i> moves up while its picture <b> moves
   down by the same amount, so the edge sweeps and the picture holds still. */
.photoband {
  position: relative;
  z-index: 2;
  height: calc(1742 * var(--px));
  margin-top: calc(-487 * var(--px));
  overflow: hidden;
  border-radius: var(--photo-r);
}
.photoband i,
.photoband b {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  will-change: transform;
}
.photoband b {
  background-size: cover;
  background-position: center;
}
/* The photographs are lazy <img>s, not backgrounds, so they load only near
   the screen (tests/load-speed.test.mjs); they fill their frame the same way. */
.brand-photo img,
.photoband b img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photoband b img { position: absolute; inset: 0; }
.brand-photo { overflow: hidden; }
.photoband span {
  position: absolute;
  left: var(--gutter);
  bottom: calc(120 * var(--px));
  font-family: var(--frame-word);
  font-weight: 400;
  font-size: calc(150 * var(--px));
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------- begin */
.careers { padding: calc(198 * var(--px)) 0 calc(160 * var(--px)); }
.careers .split { --col: 470; }
.careers-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(60 * var(--px));
}
.careers-head {
  margin: calc(-13 * var(--px)) 0 0;
  font-weight: 700;
  font-size: calc(38 * var(--px));
  line-height: 1.8;
  letter-spacing: 0.02em;
}
/* The call to begin, and under it the way back in for someone with a backup. */
.careers-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* ------------------------------------------------ the care notice, still, on top (Home and the Mental page)
   A slim strip since v121 (the owner: "smaller, like temporary banner that
   can be close"): a soft band under the header, text and numbers in a few
   short lines, and on Home a close button at its right. */
.stage-page .notice-panel {
  z-index: 1;
  padding: 14px 0;
  background: #f3f1ed;
  border-bottom: 1px solid #e2ded7;
}
.stage-page .care-banner {
  position: relative;
  margin: 0;
  padding: 0 44px 0 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.stage-page .care-banner-title {
  margin: 0 0 2px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}
.stage-page .care-banner-text {
  margin: 0 0 6px;
  max-width: 900px;
  font-size: 13px;
  line-height: 1.5;
}
.stage-page .care-resources {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stage-page .care-resources li { display: flex; justify-content: flex-start; align-items: baseline; gap: 6px; font-size: 13px; color: var(--frame-muted); }
.stage-page .care-resource-label { order: 2; font-weight: 500; }
.stage-page .care-resource-tel {
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: var(--frame-ink);
  text-decoration: none;
  white-space: nowrap;
}
.stage-page .care-resource-tel:hover { text-decoration: underline; text-underline-offset: 0.12em; }
.stage-page .care-resource-tel:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 4px; }
.stage-page .care-banner-close {
  position: absolute;
  top: -6px;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--frame-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.stage-page .care-banner-close:hover { background: rgba(0, 0, 0, 0.06); }
.stage-page .care-banner-close:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 2px; }

/* --------------------------------------------- shared by the long pages
   The secondary pill, a score with its meter, the dated news list and the
   die-cut sticker: Home (R3), the aspect pages and Goals (R4). */
/* A light pill beside a dark one: the secondary action. */
.stage-page .pill-light {
  border: 1.5px solid var(--frame-ink);
  background: transparent;
  color: var(--frame-ink);
}
.stage-page button.pill { cursor: pointer; font-family: inherit; }
.stage-page button.pill:not(.pill-light) { border: 0; }

.brand-score {
  position: absolute;
  left: calc(938 * var(--px));
  right: calc(72 * var(--px));
  top: calc(74 * var(--px));
  bottom: calc(74 * var(--px));
  display: grid;
  align-content: center;
  justify-items: start;
  padding-left: calc(90 * var(--px));
  border-radius: calc(20 * var(--px));
  background: #ffffff;
}
.score-figure { display: grid; margin: 0; }
.score-figure b { font-family: var(--frame-word); font-weight: 400; font-size: calc(300 * var(--px)); line-height: 0.9; }
.score-figure small,
.score-average {
  margin: calc(20 * var(--px)) 0 0;
  font-size: max(11px, calc(17 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.meter {
  display: block;
  width: calc(700 * var(--px));
  max-width: 90%;
  height: calc(10 * var(--px));
  min-height: 6px;
  margin-top: calc(34 * var(--px));
  overflow: hidden;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.12);
}
.meter i { display: block; height: 100%; border-radius: inherit; }

/* --------------------------------------------------------------- news */
.news {
  position: relative;
  z-index: 2;
  padding: calc(262 * var(--px)) 0 calc(150 * var(--px));
}
.news .split { --col: 704; }
.news-block + .news-block { margin-top: calc(200 * var(--px)); }
.news-note { margin: calc(24 * var(--px)) calc(80 * var(--px)) 0 0; font-size: max(12px, calc(16 * var(--px))); line-height: 1.7; }
.newslist { margin: 0; padding: 0; list-style: none; }
.newsrow {
  display: grid;
  grid-template-columns: calc(333 * var(--px)) calc(371 * var(--px)) minmax(0, 1fr);
  align-items: start;
  min-height: calc(388 * var(--px));
  padding-top: calc(72 * var(--px));
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
  color: var(--frame-ink);
  text-decoration: none;
}
.newslist > li:first-child > .newsrow,
.newslist > .newsrow:first-child { min-height: calc(359 * var(--px)); padding-top: calc(52 * var(--px)); }
a.newsrow:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 4px; }
a.newsrow:hover .newsrow-title { text-decoration: underline; text-underline-offset: 0.15em; }
.newsrow-empty { display: block; min-height: 0; font-weight: 600; }
.newsrow-meta { display: grid; gap: calc(14 * var(--px)); }
.newsrow-date { font-size: max(11px, calc(15 * var(--px))); font-weight: 700; letter-spacing: 0.06em; }
.newsrow-kind { font-size: max(12px, calc(18 * var(--px))); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.newsrow-thumb {
  display: grid;
  place-items: center;
  width: calc(234 * var(--px));
  aspect-ratio: 1;
  border-radius: calc(18 * var(--px));
  background: #ffffff;
}
.newsrow-thumb svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: var(--hue, var(--frame-ink));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.newsrow-star svg { width: 62%; height: 62%; }
.newsrow-title { font-weight: 700; font-size: max(15px, calc(22 * var(--px))); line-height: 1.7; }
.newsrow-title small { display: block; font-weight: 500; font-size: 0.8em; color: #444444; }

/* Die-cut: the hue disc with a white edge, the motif in white on it. */
.sticker svg,
.diecut svg {
  box-sizing: border-box;
  width: calc(230 * var(--px));
  height: calc(230 * var(--px));
  padding: calc(55 * var(--px));
  border: calc(12 * var(--px)) solid #ffffff;
  border-radius: 50%;
  background: var(--hue);
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 calc(8 * var(--px)) calc(12 * var(--px)) rgba(0, 0, 0, 0.22));
}
.sticker-star svg { padding: 0; border: 0; background: none; overflow: visible; }

/* ------------------------------------------------------------- phones */
@container (max-width: 900px) {
  .stage-page {
    --px: calc(100cqw / 820);
    --gutter: calc(40 * var(--px));
  }
  .stage-page .wrap { width: calc(740 * var(--px)); }
  /* No rounded sheets on a phone (v125, the owner: the corners "look very
     weird" with nothing behind them). The sections sit flat on the page and
     a hairline marks where one ends. The white cards inside keep theirs. */
  .stage-page { background: var(--frame-page); }
  .stage-page.textpage { padding-bottom: calc(80 * var(--px)); }
  .sky-fx { display: none; }
  .stage-page .panel,
  .hero,
  .projects { border-radius: 0; margin-top: 0; }
  .stage-page .panel + .panel,
  .hero + .panel { border-top: 1px solid #e6e3de; }
  .stage-page .notice-panel + .panel { border-top: 0; }
  .stage-page .split { grid-template-columns: minmax(0, 1fr); gap: calc(40 * var(--px)); }
  .stage-page .label { font-size: max(11px, calc(22 * var(--px))); }
  .stage-page .headline { white-space: normal; font-size: calc(46 * var(--px)); }
  .mission { padding: calc(160 * var(--px)) 0; }
  .statement .label { margin-top: 0; }
  .statement p { font-size: max(15px, calc(34 * var(--px))); }
  .hero { height: calc(1000 * var(--px)); }
  .landing .hero { height: calc(1080 * var(--px)); }
  .hero-cta { top: calc(860 * var(--px)); }
  .hero .mark,
  .hero .mark-hit { left: calc(270 * var(--px)); top: calc(230 * var(--px)); width: calc(280 * var(--px)); }
  .hero .part-mark { transform-origin: calc(410 * var(--px)) calc(370 * var(--px)); }
  .hero .word { top: calc(580 * var(--px)); font-size: calc(118 * var(--px)); }
  .hero .inc { top: calc(716 * var(--px)); font-size: calc(84 * var(--px)); }
  .landing .hero .inc { top: calc(716 * var(--px)); font-size: calc(46 * var(--px)); }
  .page-top { padding: calc(80 * var(--px)) 0; }
  .page-top-grid { grid-template-columns: calc(170 * var(--px)) minmax(0, 1fr); gap: calc(30 * var(--px)) calc(40 * var(--px)); }
  .page-top-word { font-size: max(30px, calc(84 * var(--px))); margin: 0; }
  /* Under the mark and the name, the rest runs the full width. */
  .page-top-text { display: contents; }
  .page-top-text > :not(.page-top-word) { grid-column: 1 / -1; }
  .page-top-text p { font-size: max(15px, calc(30 * var(--px))); }
  .page-top.has-plate { padding: 0 0 calc(50 * var(--px)); }
  .page-top-plate { padding: calc(230 * var(--px)) 0 calc(36 * var(--px)); }
  .page-top-plate .page-top-grid { grid-template-columns: calc(150 * var(--px)) minmax(0, 1fr); gap: calc(30 * var(--px)); }
  .page-top-body { padding-top: calc(40 * var(--px)); }
  .page-top-body p { font-size: max(15px, calc(28 * var(--px))); }
  .goals .statement,
  .compare .statement,
  .aspect-page .statement { padding: calc(90 * var(--px)) 0 calc(80 * var(--px)); }
  .cardblock { width: auto; margin: 0 calc(20 * var(--px)); }
  .projects .inner { padding-top: calc(200 * var(--px)); }
  .projects .label { margin-left: calc(20 * var(--px)); }
  .brand-visual { height: auto; display: grid; }
  .brand-logo,
  .brand-photo { position: static; width: auto; }
  .brand-logo { height: calc(360 * var(--px)); }
  .brand-logo img { width: calc(240 * var(--px)); }
  .brand-photo { height: calc(420 * var(--px)); margin: 0 calc(30 * var(--px)) calc(30 * var(--px)); }
  .card-title { font-size: max(16px, calc(40 * var(--px))); }
  .card-desc { font-size: max(14px, calc(28 * var(--px))); }
  .info { grid-template-columns: minmax(0, 1fr); gap: calc(24 * var(--px)); padding: calc(50 * var(--px)); }
  .info-links { align-self: start; }
  .careers { padding: calc(120 * var(--px)) 0; }
  .careers-row { flex-direction: column; gap: calc(40 * var(--px)); }
  .careers-head { font-size: calc(44 * var(--px)); }
  .brand-score { position: static; padding: calc(40 * var(--px)) calc(50 * var(--px)); }
  .score-figure b { font-size: calc(220 * var(--px)); }
  .score-figure small,
  .score-average { font-size: max(11px, calc(22 * var(--px))); }
  .meter { width: 100%; }
  .news { padding: calc(160 * var(--px)) 0 calc(120 * var(--px)); }
  .news-note { margin-right: 0; font-size: max(13px, calc(26 * var(--px))); }
  .newsrow,
  .newslist > li:first-child > .newsrow,
  .newslist > .newsrow:first-child {
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(24 * var(--px));
    min-height: 0;
    padding: calc(34 * var(--px)) 0;
  }
  .newsrow-meta { grid-column: 1 / -1; display: flex; gap: calc(24 * var(--px)); }
  .newsrow-date,
  .newsrow-kind { font-size: max(11px, calc(22 * var(--px))); }
  .newsrow-thumb { width: calc(150 * var(--px)); }
  .newsrow-title { font-size: max(15px, calc(30 * var(--px))); }
}

/* ------------------------------------------------------------- Thai
   No tracking and no uppercase for Thai (the Thai block in index.css), and
   the wordmark face has no Thai, so the band's names fall back to Sarabun. */
html[lang="th"] .stage-page .label,
html[lang="th"] .statement p,
html[lang="th"] .card-title,
html[lang="th"] .tag,
html[lang="th"] .stage-page .pill,
html[lang="th"] .careers-head {
  letter-spacing: normal;
}
html[lang="th"] .photoband span,
html[lang="th"] .page-top-word { font-weight: 700; }
html[lang="th"] .newsrow-kind,
html[lang="th"] .newsrow-date,
html[lang="th"] .score-figure small,
html[lang="th"] .score-average { letter-spacing: normal; }