/* For Daughter — restart cover, 2026-11-05.
   Her measure: 少一点，页面多一些 — one idea per screen, a few lines
   at most, and the page runs long. Twelve honest screens.
   One colour family only: the platform plum family of #830051
   (converted 2026-11-05; the earlier families are void).
   Letter spacing kept tight throughout (her standing rule). */

/* TYPE SCALE-UP, 2026-11-06 (her word, 16:17, 「字都要大一些」+
   「不能用小字了」): every text size steps up one grade —
   small text x1.18 with a 14px floor (captions, group labels,
   product meta, footers and fine print included; nothing reads
   tiny at phone scale), mid sizes x1.13, headings/display
   x1.10, hierarchy kept quiet. Copy, layout, colours and the
   tightax19 wordmark unchanged. */
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
}
@font-face {
  font-family: "Jost";
  src: url("assets/jost-var.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
}

:root {
  /* Platform colour converted 2026-11-05; FINAL the same evening
     (her settled word, 17:56, 「那用他家的吧，就这样定了」): the
     single main colour is AstraZeneca's own plum #830051 exactly
     — she ruled an identical colour is fine, the brand separates
     itself by name and typeface. #5D057D (plum-variants No. 3)
     and every earlier family are superseded and void. Accent
     tokens are the same plum-family values the homepage carries. */
  --main: #830051;
  /* Daughter pages' top band only, her FINAL colour list
     2026-11-06 17:48 (supersedes the 17:13 teal trial): the
     colour system is plum #830051 (mother pages and the
     wordmark), gold #EFAB00 (accents and the E), and pale
     plum-pink #F5DCE7 for the band on the daughter pages
     (cover + shop) — AstraZeneca's in-use tint, same plum
     family, mother deep plum / daughter pale plum. Deep teal
     #0E5561 is RESERVED for a future men's version and must
     NOT appear on daughter pages. Everything else on these
     pages stays plum family. The homepage band stays plum. */
  --band: #EFAB00; /* GOLD band — her ruling 2026-11-06 17:53 after seeing the pale-pink sample: 「条还是用黄色」; the 17:48 pale-pink #F5DCE7 ruling above is SUPERSEDED */
  --rose: #892371;
  --rose-panel: #EED9EA;
  --rose-wash: #F8F0F8;
  --rose-mid: #C9A3C2;
  --rose-deep: #3F062A;
  /* TEXT COLOUR — her ruling 2026-11-06 17:50 「文字就用深青」:
     text moves from the old ink family to the deep-teal family.
     Headings/titles/nav (--ink) = deep teal #0E5561 exactly; body
     text (--body) = the same hue deepened, #0A3D45, so long text
     stays legible; small labels/captions (--rose-stone token,
     legacy name) follow the body shade #0A3D45. Plum stays an
     accent only: bands, wordmark, eyebrows/entry words and link
     underlines (--rose / --rose-deep / --main unchanged). Token
     names are legacy; values are current. */
  --rose-stone: #0A3D45;
  --ink: #0E5561;
  --body: #0A3D45;
  --line: rgba(131, 0, 81, .26);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
  font-family: "Jost", sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.eyebrow {
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin: 0;
}

.arr { color: var(--rose); }

.sec-title {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 52px;
  margin: 22px 0 0;
}

/* full screens: one idea each, content resting in the middle */
.screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 96px;
}

.screen-inner { width: 100%; max-width: 1248px; margin: 0 auto; }

/* ---------- 1 · masthead ---------- */

/* Header grammar unified with the homepage, 2026-11-05: one
   empty strip in the single main colour across the very top
   (56px desktop / 40px mobile); below it a white row, the settled
   Axelle wordmark at the TOP-LEFT directly on the white ground
   (no pad, no field), navigation and bag to the right. */
.mast-strip { height: 56px; background: var(--band); }

.mast-row {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
}

.mast-right { display: flex; align-items: center; gap: 34px; }

.mast-nav { display: flex; gap: 34px; }

.mast-nav a, .mast-bag {
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.mast-mark img { height: 68px; width: auto; display: block; }
.mast-mark img.mark-e { height: 50px; }

.mast-bag { justify-self: end; }

/* ---------- 2 · the photograph ---------- */

.stage {
  display: grid;
  grid-template-columns: 1fr 46%;
  min-height: calc(100vh - 160px);
}

.stage-text {
  padding: 88px 48px 64px 96px;
  display: flex;
  flex-direction: column;
}

.stage-name {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 101px;
  line-height: 1.02;
  margin: 30px 0 32px;
}

.stage .eyebrow { font-size: 20px; letter-spacing: .08em; }

.stage-line {
  font-size: 24px;
  line-height: 1.75;
  color: var(--body);
  margin: 0;
}

.stage-enter .arr { color: #EFAB00; }

.stage-enter {
  margin-top: 44px;
  align-self: flex-start;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: #EFAB00; /* ENTER THE SHOP gold, her ruling 2026-11-06 17:54 */
  border-bottom: 1px solid #EFAB00;
  padding-bottom: 6px;
}

.stage-no {
  margin: auto 0 0;
  padding-top: 56px;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rose-stone);
}

.stage-photo { margin: 0; }

.stage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  display: block;
}

/* ---------- 3 · the poem ---------- */

.letter { padding-left: 24px; padding-right: 24px; }

.letter-col { max-width: 640px; margin: 0 auto; width: 100%; }

.verse {
  margin-top: 56px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30.5px;
  line-height: 1.55;
}

.verse .ln { display: block; }

.verse .open {
  font-style: normal;
  font-weight: 520;
  font-size: 42px;
  line-height: 1.45;
}

.verse .heart { color: var(--ink); }

.verse .stanza { margin: 0 0 58px; }

.verse .coda {
  padding-top: 46px;
  margin-bottom: 0;
  font-size: 33px;
}

/* ---------- 4 · the two doors ---------- */

.doors { background: var(--rose-wash); }

.doors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 64px;
}

.door {
  background: #fff;
  padding: 56px 52px 48px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.door-age {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 83.5px;
  line-height: 1;
}

.door-plus { color: var(--ink); }

.door-line {
  font-size: 22px;
  line-height: 1.7;
  color: var(--body);
  margin: 22px 0 0;
  max-width: 320px;
}

.door-enter {
  margin-top: auto;
  padding-top: 52px;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

/* ---------- 5 · how it works ---------- */

.steps {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.step { padding-top: 34px; }

.step-no {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 44px;
  color: var(--ink);
  margin-bottom: 26px;
}

.step-name {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 29px;
  line-height: 1.35;
  margin-bottom: 14px;
}

.step-line { display: block; font-size: 22px; line-height: 1.7; color: var(--body); }

/* ---------- 6–7 · the shelves ---------- */

.shelf-rx { background: #fff; }
.shelf-goods { background: var(--rose-wash); }

.shelf-rows { margin-top: 68px; }

.shelf-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  padding: 44px 0;
  align-items: baseline;
}

.shelf-name {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 37px;
}

.shelf-line { font-size: 22px; line-height: 1.7; color: var(--body); }

.shelf-note {
  margin: 52px 0 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22.5px;
  color: var(--body);
}

/* ---------- 8 · the mother's promise ---------- */

.promise { align-items: center; text-align: center; }

.promise-col { max-width: 760px; }

.promise .eyebrow { text-align: center; }

.promise-line {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 50.5px;
  line-height: 1.4;
  margin: 44px 0 40px;
}

.promise-sub { font-size: 22px; line-height: 1.8; color: var(--body); margin: 0; }

/* ---------- 9 · knowledge ---------- */

.know-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
}

.know-line {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 44px;
  margin: 22px 0 0;
}

.know-soon {
  margin: 0;
  font-size: 20px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rose-stone);
  white-space: nowrap;
}

/* ---------- 10 · questions ---------- */

.faq-list { margin-top: 68px; max-width: 820px; }

.faq-item { padding: 42px 0; }

.faq-q {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 27px;
  margin: 0 0 14px;
}

.faq-a { font-size: 22px; line-height: 1.75; color: var(--body); margin: 0; max-width: 640px; }

/* ---------- 11 · the trust strip ---------- */

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 84px 96px;
}

.trust-item {
  margin: 0;
  text-align: center;
  font-size: 22px;
  letter-spacing: .02em;
  color: var(--body);
}

/* ---------- 12 · footer ---------- */

.colophon {
  padding: 84px 96px 96px;
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

.colo-mark { height: 110px; width: auto; display: block; }
.colo-mark.mark-e { height: 50px; }

.colo-mothers { font-size: 22px; margin: 6px 0 18px; }

.colo-mothers a { color: var(--rose-deep); }

.colo-fine {
  font-size: 20px;
  line-height: 1.7;
  color: var(--rose-stone);
  margin: 0 0 8px;
  max-width: 560px;
}

/* ---------- mobile ---------- */

@media (max-width: 760px) {

  .mast-strip { height: 40px; }
  .mast-row { height: 72px; padding: 0 12px; }
  .mast-right { gap: 8px; }
  .mast-nav { gap: 8px; }
  .mast-nav a, .mast-bag { font-size: 20px; letter-spacing: .02em; }
  .mast-nav a:nth-child(2) { display: none; }
  .mast-nav a:nth-child(3) { display: none; }
  .mast-mark img { height: 34px; }
  .mast-mark img.mark-e { height: 25px; }

  .stage { grid-template-columns: 1fr; min-height: 0; }
  .stage-photo { order: -1; height: 56vh; }
  .stage-text { padding: 44px 24px 58px; }
  .stage-name { font-size: 62.5px; margin: 24px 0 24px; }
  .stage-line { font-size: 24px; }
  .stage-enter { margin-top: 32px; }
  .stage-no { padding-top: 42px; }

  .screen { min-height: 0; padding: 96px 20px; }
  .sec-title { font-size: 39px; }

  .letter { padding-left: 24px; padding-right: 24px; }
  .verse { font-size: 24.5px; line-height: 1.55; }
  .verse .open { font-size: 31.5px; }
  .verse .stanza { margin-bottom: 44px; }
  .verse .coda { font-size: 26px; padding-top: 36px; }

  .doors-grid { grid-template-columns: 1fr; margin-top: 44px; gap: 20px; }
  .door { min-height: 0; padding: 40px 30px 36px; }
  .door-age { font-size: 64px; }
  .door-enter { padding-top: 40px; }

  .steps { grid-template-columns: 1fr; gap: 44px; margin-top: 52px; }
  .step-no { font-size: 36px; margin-bottom: 18px; }

  .shelf-rows { margin-top: 48px; }
  .shelf-row { grid-template-columns: 1fr; gap: 10px; padding: 34px 0; }
  .shelf-name { font-size: 31px; }
  .shelf-note { font-size: 22px; margin-top: 40px; }

  .promise-line { font-size: 35px; margin: 36px 0 32px; }
  .promise-sub { font-size: 22px; }

  .know-inner { flex-direction: column; gap: 22px; }
  .know-line { font-size: 33px; }

  .faq-list { margin-top: 48px; }
  .faq-item { padding: 32px 0; }
  .faq-q { font-size: 24px; } /* final21 floor fix: 23.5 -> 24, nothing computes below 24 */

  .trust { grid-template-columns: 1fr; gap: 18px; padding: 64px 24px; }

  .colophon { flex-direction: column; gap: 36px; padding: 64px 24px 72px; }
  .colo-mark { height: 88px; }
  .colo-mark.mark-e { height: 40px; }
}

/* ================================================================
   THE SHOP, 2026-11-05 — same compass as the cover: clean,
   generous, understood at a glance; the order of a dispensary,
   the warmth of a letter. One rosewood family throughout.
   ================================================================ */

.shop-head { min-height: 0; padding-top: 150px; padding-bottom: 130px; }

.shop-title { font-size: 64px; }

.shop-lede {
  font-size: 22px;
  line-height: 1.8;
  color: var(--body);
  margin: 30px 0 0;
  max-width: 560px;
}

.door-name {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 48px;
  line-height: 1.15;
}

.shelf-page { justify-content: center; }

.shelf-adults { background: var(--rose-wash); }

.shelf-intro {
  font-size: 22px;
  line-height: 1.8;
  color: var(--body);
  margin: 26px 0 0;
  max-width: 600px;
}

/* quiet group labels: a word, a rule, and room to breathe */
.group-label {
  margin: 96px 0 0;
  padding-top: 30px;
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.pieces + .group-label { margin-top: 110px; }

.group-label:first-of-type { margin-top: 84px; }

/* the pieces: one product per tile, set out like instruments —
   image or number field, then brand, name, one line. Nothing else. */
.pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px 64px;
  margin-top: 72px;
}

.piece-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.piece-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 36px;
  display: block;
}

.piece-none {
  background: var(--rose-wash);
  flex-direction: column;
  gap: 20px;
}

.shelf-adults .piece-none { background: #fff; }

.piece-none-no {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 92.5px;
  line-height: 1;
  color: var(--ink);
}

.piece-none-cap {
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rose-stone);
}

.piece-meta {
  margin: 32px 0 0;
  font-size: 20px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--rose-deep);
}

.piece-name {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 33px;
  line-height: 1.3;
  margin: 14px 0 0;
}

.piece-line {
  font-size: 22px;
  line-height: 1.75;
  color: var(--body);
  margin: 14px 0 0;
  max-width: 440px;
}

/* the prescribed forms reuse the cover's three steps, unlabeled
   by number: the forms themselves are the order */
.rx-steps { margin-top: 56px; }

.rx-steps .step { padding-top: 30px; }

/* the framework screen: her settled sentence, given a room */
.framework { align-items: center; text-align: center; }

.framework .eyebrow { text-align: center; }

.framework-line {
  font-family: "Fraunces", serif;
  font-weight: 480;
  font-size: 44px;
  line-height: 1.45;
  margin: 44px 0 40px;
}

@media (max-width: 760px) {

  .shop-head { padding-top: 96px; padding-bottom: 88px; }
  .shop-title { font-size: 43px; }
  .shop-lede { font-size: 22px; }

  .door-name { font-size: 38px; }

  .group-label { margin-top: 72px; }
  .pieces + .group-label { margin-top: 84px; }
  .group-label:first-of-type { margin-top: 64px; }

  .pieces { grid-template-columns: 1fr; gap: 64px; margin-top: 56px; }
  .piece-media img { padding: 24px; }
  .piece-none-no { font-size: 70.5px; }
  .piece-meta { margin-top: 26px; }
  .piece-name { font-size: 28px; }

  .rx-steps { margin-top: 44px; }

  .framework-line { font-size: 33px; margin: 36px 0 32px; }
}

/* ---------- per-screen side mark, 2026-11-06 ----------
   Her marking system: below the first screen, every screen
   carries ONE standalone letter at its top-right corner,
   marking whose content it is — the A (plum, gold wave) on
   mother-side screens, the gold E on daughter-side screens.
   The locked icon artwork is used as-is, no circle, no pad.
   The full wordmark stays in the masthead and the footer. */
.screen, .stage, .trust, .colophon { position: relative; }

.screen-mark {
  position: absolute;
  top: 40px;
  right: 96px;
  height: 46px;
  width: auto;
  z-index: 3;
}

@media (max-width: 760px) {
  .screen-mark { top: 26px; right: 20px; height: 34px; }
}

/* ---------- FEWER LINES + CENTRED SPARSE SCREENS, final18,
   2026-11-06 ----------
   Her word, 23:21: 「不要有那么多线条」「内容不够，就往中间
   排，其它地方空着」. Out: the plum dash over the poem
   (.letter-rule, element removed), the rule inside the poem
   before the coda, the border boxes around the two age doors
   (the white tile fill stays), the rules over the steps, over
   and under the shelf rows, over/under the FAQ items, over
   the trust strip and the footer, the nav current-page
   underline in the shop, the rule over each shop group label,
   and the border frame around each product tile (its white
   or wash fill stays). Kept: the gold band at the top, the
   ENTER THE SHOP gold underline, and the one hairline under
   the header row. Shelf screens now centre like every other
   screen (.shelf-page justify-content: center) — on screens
   whose content is shorter than the screen it rests in the
   middle with the rest left empty; nothing stretched, no
   filler added. */

/* ---------- MORE PHOTOS + DECK COMPOSITION, final19, 2026-11-06 ----------
   Same round as the homepage: running body to 22px, secondary
   text floors at 20px. Commerce screens lead with the product
   photograph: the everyday-shelf screen gains a strip of the
   three real product photos on disk; the shop head gains the
   daughter photograph as a band. */
.photo-band { margin: 56px 0 0; }
.photo-band img { width: 100%; height: 330px; object-fit: cover; object-position: 50% 16%; display: block; }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 64px; }
.photo-strip figure { margin: 0; background: #fff; }
.photo-strip img { width: 100%; height: 290px; object-fit: contain; padding: 26px; display: block; }
.photo-solo { margin: 56px 0 0; background: #fff; }
.photo-solo img { width: 100%; height: 300px; object-fit: contain; padding: 26px; display: block; }
@media (max-width: 760px) {
  .photo-band img { height: 210px; }
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip img { height: 220px; }
  .photo-solo img { height: 220px; }
}

/* price position, framework stage: no prices exist yet (contracts
   unsigned, none invented). The framework line stands in the price
   slot beside the products, in a fixed micro-format, so the slot
   is structurally ready for "Starting at $\u2026" when prices land. */
.price-slot {
  font-family: "Fraunces", serif;
  font-size: 24px;
  color: var(--rose-deep);
  margin: 20px 0 0;
}

/* ---------- final20 SELF-AUDIT, 2026-11-07 （她 00:07–00:08） ----------
   Same phone-eye ruling as the homepage: secondary lines at 20px
   go to 22px — eyebrows, stage entry, stage number line, door
   entries, "Opening soon", footer fine print, shop piece meta,
   group labels, placeholder captions, nav. Force-tested at 390:
   no horizontal overflow. */
.eyebrow, .stage .eyebrow, .stage-enter, .stage-no, .door-enter,
.know-soon, .colo-fine, .piece-meta, .group-label, .piece-none-cap,
.mast-nav a, .mast-bag { font-size: 22px; }

/* ---------- final21 TYPE UP + BANDS + LEADING, 2026-11-07 ----------
   Same round as the homepage (her words, 07:00–07:01): every
   non-headline size 22 -> 24px; prose line-height gathers one
   step (~0.15) on body blocks only — the poem's leading is NOT
   touched, whitespace is the letter's form; the two shop shelf
   screens (pages 17/18) gain the gold band at their tops, same
   build as the masthead strip (56px / 40px mobile, var(--band)),
   and their E marks step down below the band. */
.eyebrow, .stage .eyebrow, .stage-enter, .stage-no, .door-enter,
.know-soon, .colo-fine, .piece-meta, .group-label, .piece-none-cap,
.mast-nav a, .mast-bag, .door-line, .step-line, .shelf-line,
.shelf-note, .promise-sub, .faq-a, .trust-item, .colo-mothers,
.shop-lede, .shelf-intro, .piece-line { font-size: 24px; }

.stage-line, .faq-a, .piece-line { line-height: 1.6; }
.door-line, .step-line, .shelf-line, .colo-fine { line-height: 1.55; }
.promise-sub, .shop-lede, .shelf-intro { line-height: 1.65; }

.sec-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--band);
  z-index: 2;
}
#shelf-teen .screen-mark, #shelf-adults .screen-mark { top: 76px; }
@media (max-width: 760px) {
  .sec-band { height: 40px; }
  #shelf-teen .screen-mark, #shelf-adults .screen-mark { top: 56px; }
}

/* ================================================================
   final22 — COMPOSITION PASS, 2026-11-07. Moves only, from the
   competitor design study + her rulings of 07:10–07:14. Copy
   unchanged throughout; no retail devices (07:14 guardrail).
   ================================================================ */

/* ---------- (a) PINK OUT, everywhere (her 07:12 + 07:13) -------
   「04妈妈也用粉色底么」「卖药尽量不用粉」: the pale-plum wash
   (--rose-wash #F8F0F8) was a leftover of the superseded pink
   trial and still grounded four sections. All grounds are now
   WHITE; the placeholder panel tint becomes PALE GOLD
   (--gold-wash #FCF3DC, a tint OF the gold, system colour);
   the accents that borrowed pink hues move to the system:
   eyebrows/labels/link-words plum-deep #3F062A becomes plum
   #830051 (--rose-deep token revalued), arrows and link
   underlines to plum #830051 (--rose token revalued), chips
   and hovers follow the same tokens. Text teal is untouched.
   Product PACKAGING keeps its own printed colours — that is
   the makers' artwork, not our tint. */
:root {
  --gold-wash: #FCF3DC;
  --rose: #0E5561;
  --rose-deep: #0E5561;
}
.doors, .shelf-goods, .shelf-adults { background: #fff; }
.piece-none { background: var(--gold-wash); }
.shelf-adults .piece-none { background: var(--gold-wash); }

/* ---------- (b) MOVE 5 — DAUGHTER HERO RECROP -----------------
   The stage becomes a stacked banner stage: a wide shallow
   photo banner directly under the masthead (the gold band
   sits over it in the masthead), then the name block below.
   Height 400px desktop (a 3.6:1 field at content width),
   object-position 62% 18% — the source face (grounded at
   x 0.394–0.696, head top ~7% height) lands with its centre
   at ~77% across the banner: the right third. Mobile keeps a
   shallower 30vh banner. */
.stage-banner {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stage-banner-photo { height: 400px; flex: none; }
.stage-banner-photo img {
  object-position: 62% 18%;
}
.stage-banner .stage-text {
  padding: 56px 96px 64px;
  max-width: 1248px;
  width: 100%;
  margin: 0 auto;
}
.stage-banner .stage-name { margin-top: 0; }
.stage-banner .stage-line { max-width: 720px; }
.stage-banner .stage-no { margin-top: 36px; padding-top: 0; }
@media (max-width: 760px) {
  .stage-banner-photo { height: 30vh; }
  .stage-banner .stage-text { padding: 40px 24px 52px; }
}

/* ---------- (c) MOVE 4 — UNEQUAL AGE DOORS, page 12 -----------
   The 18+ door is the main door: wider (7fr against 5fr), a
   gold band across its top (the settled gold, as furniture —
   not a line), its age at display size, its ENTER larger. The
   12–18 door is smaller and quieter: less padding, smaller
   age, muted entry. Mobile: main door first, stacked. */
.doors-unequal {
  grid-template-columns: 7fr 5fr;
  align-items: start;
}
.door-main {
  padding-top: 40px;
}
.door-main .door-age { font-size: 104px; }
.door-main .door-line { max-width: 420px; }
.door-main .door-enter { font-size: 28px; }
.door-quiet { min-height: 0; padding: 40px 36px 36px; }
.door-quiet .door-age { font-size: 59px; }
.door-quiet .door-enter { padding-top: 36px; }
@media (max-width: 760px) {
  .doors-unequal { grid-template-columns: 1fr; }
  .door-main .door-age { font-size: 84px; }
  .door-main .door-enter { font-size: 26px; }
  .door-quiet .door-age { font-size: 51px; }
}

/* shop category doors echo the same relationship (page 16):
   Contraception the one large door, the other three quieter */
.doors-unequal-shop { align-items: start; }
.doors-unequal-shop .door-main .door-name { font-size: 62px; }
.doors-unequal-shop .door-main .door-enter { font-size: 28px; }
.doors-unequal-shop .door-quiet { padding: 40px 36px 36px; }
.doors-unequal-shop .door-quiet .door-name { font-size: 41px; }
.doors-unequal-shop .door-quiet .door-enter { padding-top: 36px; }
@media (max-width: 760px) {
  .doors-unequal-shop .door-main .door-name { font-size: 48px; }
  .doors-unequal-shop .door-main .door-enter { font-size: 26px; }
  .doors-unequal-shop .door-quiet .door-name { font-size: 35px; }
}

/* ---------- (d) MOVE 1 — SHELF FEATURE BLOCKS -----------------
   One big + smalls: the first product of each shelf is a
   feature — photo panel at the left ~55%, name + one line +
   the framework line in the price slot beside it; the rest
   keep the current size below. The feature panel carries the
   PALE GOLD TINT (--gold-wash) as its backing field (07:13
   pink ban + 07:14 tint instruction; 13/17/18 are all
   daughter-side, so gold is the tint on all three). */
.shelf-feature {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 56px;
  align-items: center;
  margin-top: 56px;
  background: #fff;
  border: 1px solid #E7E0D2;
  padding: 48px;
}
.shelf-feature-photo {
  margin: 0;
  background: #fff;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shelf-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 36px;
  display: block;
}
.shelf-feature-text .shelf-name { display: block; }
.shelf-feature-text .shelf-line { display: block; margin-top: 16px; }
.shelf-feature-text .price-slot { margin-top: 24px; }

.piece-feature {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 56px;
  align-items: center;
  background: var(--gold-wash);
  padding: 48px;
  margin-top: 56px;
}
.piece-feature .piece-media { aspect-ratio: 4 / 3; }
.piece-feature .piece-none { background: #fff; }
.piece-feature-text .piece-meta { margin-top: 0; }
.piece-feature-text .price-slot { margin-top: 24px; }
#shelf-teen .pieces, #shelf-adults .pieces { margin-top: 64px; }
#shelf-adults .group-label + .piece-feature { margin-top: 48px; }
@media (max-width: 760px) {
  .shelf-feature, .piece-feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
    margin-top: 44px;
  }
  .piece-feature .piece-media { order: -1; }
}

/* ---------- (e) SPACING GATHERING (her 07:10 rulings) ---------
   Same audit as the homepage: dead air between groups comes
   down one step; within-group rhythm stays; sparse screens
   stay centred, gathered inside. */
.screen { padding-top: 84px; padding-bottom: 84px; }
.sec-title { margin-top: 16px; }
.doors-grid { margin-top: 48px; }
.steps { margin-top: 48px; }
.step-no { margin-bottom: 18px; }
.shelf-rows { margin-top: 48px; }
.shelf-row { padding: 32px 0; }
.shelf-note { margin-top: 40px; }
.photo-strip { margin-top: 48px; }
.photo-solo { margin-top: 48px; }
.faq-list { margin-top: 48px; }
.faq-item { padding: 32px 0; }
.pieces { margin-top: 56px; gap: 64px 56px; }
.group-label { margin-top: 72px; padding-top: 0; }
.pieces + .group-label { margin-top: 84px; }
.group-label:first-of-type { margin-top: 64px; }
.rx-steps { margin-top: 44px; }
.shop-head { padding-top: 110px; padding-bottom: 96px; }
.trust { padding-top: 64px; padding-bottom: 64px; gap: 32px; }
.colophon { padding-top: 64px; padding-bottom: 72px; gap: 44px; }
.letter .verse { margin-top: 48px; }
@media (max-width: 760px) {
  .screen { padding-top: 72px; padding-bottom: 72px; }
  .shop-head { padding-top: 80px; padding-bottom: 72px; }
  .trust { padding-top: 52px; padding-bottom: 52px; }
  .colophon { padding-top: 52px; padding-bottom: 60px; }
}

/* ================================================================
   final23 — SECOND SPACING SWEEP, 2026-11-07 (her 07:24,
   「有些还要收一点」). The correction itself lives on the
   homepage stylesheet; here only the sweep, one more modest
   notch on the loosest remaining knobs per the gap probe on
   final23 (gapprobe.py @1440). Cover offenders: p18's group
   rhythm (label leads 84/72/64 stacking with the pieces margin
   64 into 182–214px gaps); p13/p17 feature leads (56 margin +
   48 padding); p15's 64px faq rhythm (32 + 32); p12's door
   lead-ins. The letter is untouched — verse leading included —
   and sparse screens stay centred.
   ================================================================ */
.doors-grid { margin-top: 42px; }
.steps { margin-top: 42px; }
.step { padding-top: 27px; }
.rx-steps { margin-top: 38px; }
.rx-steps .step { padding-top: 26px; }
.shelf-rows { margin-top: 42px; }
.shelf-row { padding: 27px 0; }
.shelf-note { margin-top: 36px; }
.photo-strip { margin-top: 42px; }
.photo-solo { margin-top: 42px; }
.faq-list { margin-top: 42px; }
.faq-item { padding: 27px 0; }
.shelf-feature, .piece-feature { margin-top: 48px; padding: 42px; gap: 48px; }
#shelf-teen .pieces, #shelf-adults .pieces { margin-top: 56px; }
#shelf-adults .group-label + .piece-feature { margin-top: 42px; }
.pieces { margin-top: 48px; gap: 56px 48px; }
.group-label { margin-top: 64px; }
.pieces + .group-label { margin-top: 72px; }
.group-label:first-of-type { margin-top: 56px; }
.shop-head { padding-top: 96px; padding-bottom: 84px; }
.screen { padding-top: 78px; padding-bottom: 78px; }
.trust { padding-top: 58px; padding-bottom: 58px; }
.colophon { padding-top: 58px; padding-bottom: 64px; gap: 40px; }
@media (max-width: 760px) {
  .screen { padding-top: 66px; padding-bottom: 66px; }
  .shop-head { padding-top: 72px; padding-bottom: 64px; }
  .trust { padding-top: 48px; padding-bottom: 48px; }
  .colophon { padding-top: 48px; padding-bottom: 54px; }
  .shelf-feature, .piece-feature { margin-top: 40px; padding: 28px 22px; }
}

/* ================================================================
   final25 — page 18 feature block takes a real photo (her photo
   map, 2026-11-07 08:04): the contraceptive calendar pack fills
   the media frame edge to edge, no contain padding.
   ================================================================ */
.piece-media-photo img { object-fit: cover; padding: 0; }

/* ================================================================
   final26 — PAGE 10 SIDE PHOTO + MEDICINE PHOTOS, 2026-11-07.
   Page 10 (her correction, 08:31): the wide shallow banner is
   GONE — it cut the forehead (「脸切掉太多了」). The daughter
   photo is now a SMALL photo in the mother's register (page
   02): a side column of 30% beside the title text, the source
   shown at full height so forehead and chin both stay inside
   the crop; only the hair bleeds at the sides. The earlier
   steer to make the banner taller is superseded — the banner
   does not get taller, it leaves. Mobile: the photo stacks on
   top at 52vh, the face window starting near the top so the
   whole face stays in frame.
   Page 12 (her 08:30): candidate-03, the blister close-up,
   sits small under the three steps of the how-it-works half,
   gathered with its text.
   Page 16 (her 08:30): round2-04, the single amber vial, sits
   modestly under the shop-head lede — a medicine photograph,
   not a second hero.
   ================================================================ */
.stage-side { grid-template-columns: 1fr 30%; }
.stage-side-photo img { object-position: 55% 50%; }
.how .how-photo { margin: 44px auto 0; max-width: 520px; }
.how .how-photo img { width: 100%; height: 260px; object-fit: cover; display: block; }
.shop-photo { margin: 44px 0 0; max-width: 520px; }
.shop-photo img { width: 100%; height: 280px; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .stage-side { grid-template-columns: 1fr; }
  .stage-side-photo { height: 52vh; }
  .stage-side-photo img { object-position: 55% 18%; }
  .how .how-photo, .shop-photo { max-width: 100%; }
}

/* ================================================================
   final28 — HER PICKS PLACED, 2026-11-07 (08:53–08:57).
   Page 11 (08:53 「就用02」): letter2-02, the mother kissing her
   grown daughter's cheek, sits SMALL under the coda — a quiet
   accent only; the poem page stays clean, the verse and its
   1.95 leading are untouched, no band (settled).
   Page 12 (08:56 「第三张」): teen-03, the campus girl, attached
   inside the quieter 12–18 door, above its ENTER; the door
   stays the smaller door and the photo stays modest; the face
   is shown in full (landscape band, nothing structural cut).
   Page 16 (08:57 priority): the grandest medicine shot leads —
   round2-01's dispensary counter replaces round2-04 at the
   shop head, wider than the old vial frame; round2-04 retires
   to the reserve, unplaced.
   ================================================================ */
.letter-photo { margin: 56px auto 0; width: 280px; }
.letter-photo img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 20%; display: block; }
.door-photo { display: block; margin-top: 28px; }
.door-photo img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 18%; display: block; }
.shop-photo-grand { max-width: 640px; }
.shop-photo-grand img { height: 320px; }
@media (max-width: 760px) {
  .letter-photo { width: 240px; margin-top: 44px; }
  .letter-photo img { height: 300px; }
  .door-photo img { height: 300px; }
  .shop-photo-grand img { height: 240px; }
}

/* ================================================================
   final29 — SEARCH ENTRY (framework), 2026-11-07. The same
   quiet furniture as the homepage masthead: 🔍 Search, deep
   teal, 24px; one tap opens one simple field (soft teal wash,
   no border). Design mock only — search activates when real
   products land, matching by product name or by number
   (mother H/N/T/S group codes, daughter E + sequence).
   ================================================================ */
.mast-search {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 24px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.search-panel { padding: 26px 56px 30px; }
.search-input {
  width: 100%; max-width: 560px; display: block;
  font: inherit; font-size: 24px; color: var(--body);
  background: rgba(14, 85, 97, .07); border: 0; padding: 14px 18px;
}
.search-input::placeholder { color: var(--body); opacity: .65; }
.search-input:focus { outline: none; background: rgba(14, 85, 97, .13); }
@media (max-width: 760px) {
  .search-panel { padding: 20px 12px 24px; }
}

/* ================================================================
   final30 — 2026-11-07 (her 09:39–09:44 rulings):
   (a) 「不要线」: the gold strip across the main door's top
       (.door-main::before, both the age doors and the shop
       doors echo, desktop and mobile) is REMOVED entirely —
       no replacement band; headlines stand on whitespace.
       The masthead hairline is removed in the same sweep.
       Kept, as settled: the page-head series bands, the
       deep-teal trust field, entry-link underlines.
   (b) the 12–18 door photo leaves the shallow strip: the
       frame is now 300px tall at both widths, the girl's
       whole head and face inside it (she rejected the strip
       crop twice, 08:30 and 09:39).
   (c) the letter page's mother-daughter photo is removed
       (HTML); the .letter-photo rules above are unused and
       stay only as a record.
   (d) shop head (stamp 17): the masthead carries the full
       tightax19 wordmark; the standalone E is off that page.
   ================================================================ */

/* ================================================================
   final32 — PHOTO MOVES + VERSE TRIM, 2026-11-07 (her words
   10:13–10:16). (1) The cover's side photograph is now round2-05
   medicine bottles: the window centres the clear foreground
   bottle. (2) The ex-cover girl photograph sits in the 18+ door:
   her portrait needs a slightly taller window than the standard
   door frame so hair, forehead and chin all stay inside — the
   face-integrity rule outranks the standard 300px. (3) The
   letter page's photo accent reuses the standing .letter-photo
   slot (280x340) below the trimmed verse.
   ================================================================ */
.stage-side-photo img { object-position: 68% 50%; }
.door-main .door-photo img { height: 340px; object-position: 50% 6%; }
@media (max-width: 760px) {
  .stage-side-photo img { object-position: 68% 30%; }
  .door-main .door-photo img { height: 300px; object-position: 50% 10%; }
}
/* final32 (her word 2026-11-07 10:18, 「注明 非处方药」): the
   non-prescription grouping carries ONE plain label line at its
   head — the open shelf's head, the first shelf a visitor meets
   and wholly non-prescription. 24px deep teal, plain type: a
   heading, not a badge, sticker or box. */
.nonrx-label { font-size: 24px; color: #0E5561; margin: 28px 0 0; }
/* final32, classification correction (her word 10:19–10:20):
   inside the 18+ shelf the same plain label heads its
   non-prescription groups ONLY — the Rx group above it keeps
   its own "by prescription" head, and the shelf as a whole is
   never labelled non-prescription. */
#shelf-adults .nonrx-label { margin-top: 64px; }
#shelf-adults .nonrx-label + .group-label { margin-top: 40px; }

/* ================================================================
   final33 — LETTER PAGE, 2026-11-07 (her 10:30–10:31):
   (a) PHOTO SWAP: 「妈妈照片没选对 母女 选第二张」 — the
       final32 pick (letter2-03) comes out; letter-02 (round 1
       sheet, frame 2) goes into the same .letter-photo slot at
       the same size. Provisional pending her one-word confirm
       between the two sheets' frame 2 (see manifest-final33).
   (b) VERSE LEADING: 「诗句太长了 间距变小 放一页上面」 —
       the verse line-height goes 1.95 -> 1.55 (desktop) and
       1.9 -> 1.55 (phone). Words, the 12 lines and the font
       sizes are unchanged; the stanza margins (58px / 44px)
       stay, so stanza breaks now read MORE clearly against
       the tighter pitch, not less. This SUPERSEDES the
       standing "letter keeps its airy 1.95" note for this
       build — the change of rule is deliberate and recorded
       in manifest-final33.
   (c) The letter page's eyebrow ("A letter, before anything
       else") is deleted under her 10:30 sitewide rule
       (「标题大字上面的小字都删除」); the .eyebrow rules in
       this file are now unused and stand for the record only.
   ================================================================ */

/* ================================================================
   final34 — VOICE-CALL BATCH, 2026-11-07 (her words, 11:54–12:01
   EST). Four moves in this stylesheet:
   ITEM 4 — THE LETTER PAGE (stamp 11). (a) LAYOUT: the
   mother-daughter photograph moves to the LEFT of the verse,
   text on the RIGHT, side by side — on the phone too (her
   word: the two must not stack vertically; her phone showed
   the stack, the desktop centred column hid it). Desktop:
   300px photograph, 72px gap, the pair centred as one unit,
   vertically centred against each other. Phone: the pair
   holds proportionally (116px photograph, 20px gap, aligned
   to the top) — the verse runs long beside it rather than
   dropping below. The verse itself is word-for-word and
   size-for-size untouched, leading included.
   (b) THE MARK: the letter page's mark is now "A+E" — her
   ruling this call, settling the open A+e question: this
   page is the transition (above it the A side, below it the
   E side). The composite asset (axelle-mark-a-plus-e) is
   built ONLY from the locked standalone A artwork and the
   locked standalone E artwork at one height on one baseline,
   with a plum "+" between them; nothing is redrawn, the
   wordmark is untouched. It takes the screen-mark's post
   and height (46px / 34px); its width follows the artwork.
   ITEM 5 — THE AGE DOORS (stamp 12): the two door elements
   trade places (HTML); 12–18 now stands FIRST (left on
   desktop, top on the phone), 18+ second. Each door keeps
   its own size class and its own photograph; nothing else
   on the page moves.
   ITEM 6 — PHOTOS DIRECT, NO PANELS: the shop tiles and the
   cover photo strip stop seating photographs on a panel
   with contain padding (the product read small inside a
   slab — her 「只是一个灰的底，难看死了」). The panel
   background and the image padding come off (.piece-media,
   .photo-strip, .photo-solo): every photograph stands
   directly at its frame's full size. Packshots keep
   object-fit: contain and their whole frame (no cropping —
   her standing rule); the grey inside the COSRX shot is
   that maker's own studio ground, part of its artwork.
   The steps photograph under the three quiet steps
   (candidate-03, stamp 12) grows from 520x260 to a 760px
   frame at 340px tall so it reads as a photograph. The
   shelf FEATURE blocks keep their settled pale-gold field:
   that is a colour field of the daughter system, not a
   grey backing.
   ITEM 7 — BANDS ON COLOURLESS SCREENS (her 「没有颜色的地
   方就加个色条」): the mother's promise screen gains the
   daughter side's GOLD band (#EFAB00, the settled .sec-band
   build) at its head, and the same band goes onto the other
   fully colourless content screens of these two documents —
   knowledge and questions on the cover, the framework
   screen in the shop. Their E marks step down below the
   band, as the shelf pages' marks do. The letter page is
   excepted (poem stays clean; its A+E mark is this pass's
   colour there) and the footers and trust strips are
   furniture, excepted as the brief rules.
   ================================================================ */
.letter-col {
  max-width: 1120px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 72px;
  align-items: center;
}
.letter .verse { margin-top: 0; grid-column: 2; grid-row: 1; }
.letter-photo { margin: 0; width: 300px; grid-column: 1; grid-row: 1; }
.letter-photo img { height: 380px; }
.how .how-photo { max-width: 760px; }
.how .how-photo img { height: 340px; }
.piece-media { background: transparent; }
.piece-media img { padding: 0; }
.photo-strip figure { background: transparent; }
.photo-strip img { padding: 0; }
.photo-solo { background: transparent; }
.photo-solo img { padding: 0; }
@media (max-width: 760px) {
  .letter-col { grid-template-columns: 116px 1fr; gap: 20px; align-items: start; }
  .letter-photo { width: 116px; margin-top: 6px; }
  .letter-photo img { height: 148px; }
  .how .how-photo img { height: 260px; }
}

/* ================================================================
   final35 — HER CORRECTIONS, 2026-11-07 12:01–12:05 EST (voice
   call, after the final34 batch was built).
   (1) ITEM 7 REVERSED: "不是加色条" — the four gold bands
   final34 laid on the bare screens (promise / knowledge /
   questions / shop framework) are REMOVED, divs and the mark
   step-downs alike; those screens' E marks return to the one
   common anchor (top 40px, right 96px). The screens were not
   missing colour, they were missing CONTENT ("太白太素"):
   each now carries ONE real photograph from the library,
   paired with its existing text, text untouched and still
   minimal ("文字太多了没人看"):
   - promise: letter-01 — a mother and her grown daughter in
     white, embracing (unused letter frame; the letter page
     keeps letter-02; zero duplication), centred above the
     promise line in the letter page's own photo slot family.
   - knowledge: candidate-05 — a jar of care cream on white
     marble, under the screen's line in its left column.
   - questions (faq): reserve-05 — one blister of white
     tablets, quiet and single, as the screen's head photo in
     the steps photo's wide pattern.
   - shop framework: reserve-04 — ordered rows of blister
     packs, the coming collection's range, centred above the
     framework line.
   All four are referenced from the photo library for this
   review build; consolidating them into assets/ is a
   mechanical pre-deploy step (manifest, uncleared items).
   (2) BEIGE REFRESH ("米色改新一下"): the only beige in the
   set is the pale gold wash --gold-wash #FCF3DC (a tint OF
   the gold — settled palette, no new colour). Tidied two
   ways: the shelf FEATURE photographs lose their white inner
   panel and its 36px padding (final34 item 6's logic
   completed — photos stand directly on the wash field);
   and the numbered placeholder panels (.piece-none) get
   their wash BACK — final34's blanket panel removal had
   stripped it, and a placeholder is not a photo on a
   backing, it is a panel by design. The feature block's own
   placeholder stays white inside the field, as designed.
   (3) SHELF PAGER (her settled pattern, made visible): the
   18+ shelf is the one shelf whose roster outgrows a page —
   it now ends with the numbered pager at its foot: the
   current page plain, the next page and Next as link text
   in the daughter side's entry treatment (plum, underlined),
   24px, no boxes. Two pages is today's honest count; the
   row grows by numbers as the roster grows.
   ================================================================ */
.promise-photo { margin: 0 auto 48px; width: 300px; }
.promise-photo img { width: 100%; height: 380px; object-fit: cover; display: block; }
.know-photo { margin: 40px 0 0; width: 300px; }
.know-photo img { width: 100%; height: 360px; object-fit: cover; display: block; }
.faq-photo { margin: 48px 0 0; }
.faq-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }
.framework-photo { margin: 0 auto 48px; width: 640px; max-width: 100%; }
.framework-photo img { width: 100%; height: 300px; object-fit: cover; display: block; }
.shelf-feature-photo { background: transparent; }
.shelf-feature-photo img { padding: 0; }
.pieces .piece-media.piece-none { background: var(--gold-wash); }
.shelf-pager {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: baseline;
  margin-top: 64px;
  font-size: 24px;
  color: var(--ink);
}
.shelf-pager .pager-link {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (max-width: 760px) {
  .promise-photo { width: 240px; }
  .promise-photo img { height: 300px; }
  .know-photo { width: 240px; }
  .know-photo img { height: 290px; }
  .faq-photo img { height: 220px; }
  .framework-photo img { height: 220px; }
}

/* ================================================================
   final34 CONSOLIDATION, 2026-11-07 (closing pass on the call
   batch). FOOTER MARKS (her mark rule, footers included):
   both footers in these documents (cover colophon, stamp 15;
   shop colophon, stamp 20) carry only the letter E — it
   moves to the RIGHT of the footer text, the same side as
   every screen mark in the set. The flex order changes; the
   boxes themselves do not.
   ================================================================ */
.colophon .colo-mark { order: 2; margin-left: auto; }
.colophon .colo-text { order: 1; }

/* ================================================================
   final36 — COMPOSITION PASS + AMERICAN BIG, 2026-11-08 (her
   rulings 22:33–22:49, after the final35 bold-colour pass was
   rejected). The saturated gold and the plum may NEVER ground a
   screen again ("这种大的摆面的黄色肯定是不好看的"): they
   return to accents only — the settled thin head bands, the
   letter marks, entry links, step numerals, small labels. The
   designed feel now comes from COMPOSITION and SCALE, in the
   Meta register she named (few elements, each one big, nothing
   petite): bigger photographs carrying the visual weight, type
   pushed above the floor, rounded cards in white and the pale
   gold wash only, whitespace at a large scale. Deep teal keeps
   exactly ONE field moment per document — the trust strip —
   which she has never objected to and tonight confirmed
   （深青还好）. Copy untouched throughout.
   PHOTO GROUND RULE (hers, 22:47): medicine photographs sit
   only on clean white / bright professional surfaces — floor,
   dark cloth, wood table and home-snapshot grounds are out.
   Applied: candidate-03 (blue softgels on dark grey cloth,
   her named example) leaves the steps screen for reserve-06
   (red-white capsules, huge, on a clean off-white seamless
   ground); round2-01 (vintage vials, small and distant on a
   dark moody counter) leaves the shop head for reserve-07
   (large caplets pouring on clean white), given a tall side
   frame so the product stands whole. Medicine reads LARGE:
   every medicine frame below is sized for close-up scale.
   ================================================================ */

/* ---------- grounds: pale wash fields, white cards ---------- */
.doors, .how, .shelf-goods, .faq, #shelf-adults, .colophon { background: var(--gold-wash); }
.door { border-radius: 26px; overflow: hidden; }
.how .steps .step, .rx-steps .step {
  background: #fff;
  border-radius: 24px;
  padding: 38px 36px;
}
.faq-item {
  background: #fff;
  border-radius: 24px;
  padding: 42px 46px;
  margin: 0 0 28px;
}
.faq-list { max-width: 920px; }
.shelf-feature, .piece-feature { border-radius: 28px; }
.shelf-goods .shelf-feature { background: #fff; }
.pieces .piece { border-radius: 24px; padding: 34px; }
#shelf-teen .pieces .piece { background: var(--gold-wash); }
#shelf-adults .pieces .piece { background: #fff; }
#shelf-adults .piece-feature { background: #fff; }

/* ---------- the one teal field per document: trust ---------- */
.trust { background: var(--ink); }
.trust-item { color: #fff; font-size: 27px; }

/* ---------- type: confidently large (American register) ----- */
.stage-name { font-size: 124px; }
.sec-title { font-size: 64px; }
.shop-title { font-size: 84px; }
.stage-line { font-size: 27px; }
.door-line, .step-line, .shelf-line, .piece-line, .faq-a,
.shop-lede, .shelf-intro, .promise-sub, .colo-fine, .shelf-note { font-size: 26px; }
.step-no { font-size: 64px; color: #EFAB00; }
.step-name { font-size: 33px; }
.shelf-name { font-size: 42px; }
.piece-name { font-size: 37px; }
.faq-q { font-size: 30px; }
.door-main .door-age { font-size: 118px; }
.door-quiet .door-age { font-size: 68px; }
.doors-unequal-shop .door-main .door-name { font-size: 70px; }
.know-line { font-size: 56px; }
.promise-line { font-size: 60px; }
.framework-line { font-size: 54px; }
.verse { font-size: 32px; }
.verse .open { font-size: 46px; }

/* ---------- photographs: large, close, whole ---------------- */
.stage-side { grid-template-columns: 1fr 42%; }
.letter-col { grid-template-columns: 340px 1fr; }
.letter-photo { width: 340px; }
.letter-photo img { height: 430px; border-radius: 20px; }
.how .how-photo { max-width: 1080px; }
.how .how-photo img { height: 460px; object-position: 50% 55%; border-radius: 20px; }
.promise-photo { width: 380px; }
.promise-photo img { height: 470px; border-radius: 20px; }
.know-photo { width: 380px; }
.know-photo img { height: 440px; border-radius: 20px; }
.faq-photo img { height: 380px; border-radius: 20px; }
.framework-photo { width: 900px; }
.framework-photo img { height: 400px; border-radius: 20px; }
.door-photo img { border-radius: 18px; }
.door-main .door-photo img { height: 380px; }
.photo-strip img, .shelf-feature-photo img { border-radius: 16px; }

/* shop head: the medicine photograph stands tall beside the
   title — a side frame at full screen height, so the portrait
   reserve-07 frame keeps its product whole at large scale */
.shop-head .screen-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: center;
}
.shop-head .shop-title, .shop-head .shop-lede { grid-column: 1; }
.shop-head .shop-photo {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: 0;
  max-width: none;
  min-height: 560px;
}
.shop-head .shop-photo img {
  height: 100%;
  object-position: 50% 42%;
  border-radius: 24px;
}

@media (max-width: 760px) {
  .stage-name { font-size: 78px; }
  .sec-title { font-size: 46px; }
  .shop-title { font-size: 54px; }
  .stage-line { font-size: 26px; }
  .step-no { font-size: 52px; }
  .step-name { font-size: 28px; }
  .shelf-name { font-size: 34px; }
  .piece-name { font-size: 30px; }
  .faq-q { font-size: 26px; }
  .verse { font-size: 26px; }
  .verse .open { font-size: 34px; }
  .door-main .door-age { font-size: 92px; }
  .door-quiet .door-age { font-size: 58px; }
  .doors-unequal-shop .door-main .door-name { font-size: 46px; }
  .doors-unequal-shop .door-quiet .door-name { font-size: 36px; }
  .know-line { font-size: 40px; }
  .promise-line { font-size: 42px; }
  .framework-line { font-size: 40px; }
  .faq-item { padding: 32px 28px; }
  .pieces .piece { padding: 26px; }
  .how .steps .step, .rx-steps .step { padding: 30px 26px; }
  .how .how-photo img { height: 300px; }
  .faq-photo img { height: 260px; }
  .framework-photo img { height: 260px; }
  .letter-photo { width: 116px; }
  .letter-photo img { height: 148px; }
  .promise-photo { width: 300px; }
  .promise-photo img { height: 380px; }
  .know-photo { width: 300px; }
  .know-photo img { height: 360px; }
  .shop-head .screen-inner { grid-template-columns: 1fr; gap: 40px; }
  .shop-head .shop-photo {
    grid-column: 1;
    grid-row: auto;
    min-height: 0;
    height: 400px;
  }
}

/* ================================================================
   final36 ADDENDUM — THE 18+ DOOR IN DEEP TEAL, 2026-11-08
   22:52 (her approval, given on the final35 treatment): the
   age doors' main door stands as a FULL deep-teal panel —
   white type, its photograph inside, the ENTER word in gold.
   The colour line as she restated it tonight: large deep-teal
   fields are approved (the trust strips and this door); large
   saturated gold fields and large plum fields are banned; the
   gold stays accent-only. Scoped to the cover's age doors
   (stamp 12) — the shop's category doors keep their white
   cards. The quieter 12–18 door stays a white card beside it.
   ================================================================ */
#doors .door-main { background: var(--ink); }
#doors .door-main .door-age { color: #fff; }
#doors .door-main .door-plus { color: #EFAB00; }
#doors .door-main .door-line { color: #fff; }
#doors .door-main .door-enter { color: #EFAB00; }

/* ================================================================
   final36 ADDENDUM 2 — THE PROMISE SCREEN, 2026-11-08 22:52
   (her veto + her description): the mother-daughter photograph
   that headed this screen (letter-01, a final34 judgment call)
   is OUT — "那张我没要", never her pick — and NO people
   photograph replaces it. The promise screen stands as she
   describes it: the deep-teal field and the verse lines, the
   words alone at full scale, nothing else on the screen. The
   letter page's own photograph (letter-02) is a separate item
   and is not touched by this veto.
   Also: the ENTER arrow inside the teal door takes the same
   gold as its word (it rendered plum against the teal).
   ================================================================ */
.promise { background: var(--ink); }
.promise-line { color: #fff; }
.promise-sub { color: #fff; }
#doors .door-main .door-enter .arr { color: #EFAB00; }

/* ================================================================
   final38 — 2026-11-09. Daughter-cover masthead E (her ruling
   2026-11-09 08:20): the gold E moves right so its left edge
   aligns with the F of "For" below (stage text starts at 96px),
   and grows to 64px. Sanctioned exception to the mark rule.
   ================================================================ */
.masthead .mast-mark:has(img.mark-e) { margin-left: 40px; }
.mast-mark img.mark-e { height: 64px; }
@media (max-width: 760px) {
  .masthead .mast-mark:has(img.mark-e) { margin-left: 12px; }
  .mast-mark img.mark-e { height: 34px; }
}

/* final38 mobile repair: the cover stage carries .stage + .stage-side; the later
   .stage-side 42% rule was overriding the mobile single-column layout, clipping
   the headline on phones. Re-assert the settled mobile layout (photo first). */
@media (max-width: 760px) {
  .stage.stage-side { grid-template-columns: 1fr; min-height: 0; }
  .stage.stage-side .stage-photo { order: -1; height: 56vh; }
}

/* ================================================================
   final39 — 2026-11-09. The daughter five-series page (her ruling
   08:41): one name per row, name + arrow, centred column, no
   descriptions — the mother series page's pattern, in this file's
   own measures. Rows are entry links: plum, underlined.
   ================================================================ */
.series .screen-inner { max-width: 920px; margin: 0 auto; width: 100%; }
.series-rows { margin-top: 56px; }
.series-row {
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: baseline;
  padding: 27px 0;
  color: var(--rose-deep);
  text-decoration: underline;
  text-underline-offset: 6px;
}
.series-name {
  font-family: "Fraunces", serif;
  font-weight: 520;
  font-size: 37px;
}
.series-arrow { font-size: 30px; justify-self: end; color: var(--rose); }
@media (max-width: 760px) {
  .series-rows { margin-top: 42px; }
  .series-row { padding: 24px 0; }
  .series-name { font-size: 31px; }
}

/* final39 — 2026-11-09. Cover masthead E nudged down 12px (her
   ruling 08:41–08:42): a touch lower, still above the F of "For",
   left edges aligned, size unchanged at 64px. Mobile keeps its
   own scale (34px) and takes a 6px nudge. */
.masthead .mast-mark:has(img.mark-e) { transform: translateY(12px); }
@media (max-width: 760px) {
  .masthead .mast-mark:has(img.mark-e) { transform: translateY(6px); }
}

/* ================================================================
   final39 — LOGO POSITION, FINAL UNIFIED RULE (her ruling
   2026-11-09 08:42: 「logo 位置都要统一 / 在左上角」). ALL marks
   go TOP-LEFT on every screen: standalone E top-left, the A+E
   transition mark top-left, footer E back to the left of the
   footer text. This overrides the 2026-11-07 "letters right"
   convention and this morning's cover exception — the cover
   masthead E is already top-left; its +40px offset (the E-over-F
   exception) is removed, the enlarged 64px size and the 12px
   downward nudge stand. The two banded shop shelves keep their
   stepped-down top (76px); the left anchor is the same.
   ================================================================ */
.screen-mark { left: 96px; right: auto; }
.colophon .colo-mark { order: 0; margin-left: 0; margin-right: auto; }
.colophon .colo-text { order: 1; }
.masthead .mast-mark:has(img.mark-e) { margin-left: 0; }
@media (max-width: 760px) {
  .screen-mark { left: 20px; right: auto; }
  .masthead .mast-mark:has(img.mark-e) { margin-left: 0; }
}

/* final39 — header cart icon (her ruling 2026-11-09 08:42
   「你放一个购物车吧」): the BAG word is replaced by a simple
   line-style cart glyph at the same spot (top right end of the
   nav row), deep teal via currentColor, no count, no badge. */
.mast-bag { display: inline-flex; align-items: center; color: var(--ink); }
.mast-bag .cart-icon { display: block; }

/* final39 repair 2 — on the two banded shop shelves the content
   is left-aligned from the same left edge as the mark, so any
   mark position inside the text block overlaps a line (the first
   repair's 190px step landed on the intro line). The mark now
   keeps the shelves' standard step below the band (76px / 56px)
   and the shelf content gains top padding, so the title begins
   below the mark: the mark sits alone in its own row at the
   top-left, the unified position, on both shelves. */
#shelf-teen .screen-mark, #shelf-adults .screen-mark { top: 76px; }
#shelf-teen, #shelf-adults { padding-top: 150px; }
@media (max-width: 760px) {
  #shelf-teen .screen-mark, #shelf-adults .screen-mark { top: 56px; }
  #shelf-teen, #shelf-adults { padding-top: 116px; }
}

/* final39 — age labels on the five-series page (her ruling
   2026-11-09 08:56: 「系列要标注年龄的 / 12-18 二个系列
   18+ 三个系列」). The rows sit in two plain groups by door,
   12–18 first, then 18+. The age line is plain deep-teal text
   at full reading size — no badge, no box, no sticker. */
.series-rows { margin-top: 48px; }
.series-group + .series-group { margin-top: 54px; }

/* Daughter palette (her ruling 2026-11-09 08:57: 「女孩网页
   别用梅紫」) — the girls' pages run on FOUR colours only:
   gold #EFAB00, deep teal #0E5561, pink, and white. NO plum
   anywhere on daughter pages. The series rows were plum
   (names, underlines, arrows via --rose-deep / --rose); they
   now follow the daughter register: names deep teal, the
   underline and arrow in gold — the cover entry link's own
   pairing (teal names, gold accents). No pink is added on
   this text page; pink lives in the cover photograph. */
.series-row { color: var(--ink); text-decoration-color: var(--band); }
.series-age {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: 4px;
}
@media (max-width: 760px) {
  .series-age { font-size: 26px; }
  .series-group + .series-group { margin-top: 44px; }
}

/* final39 — 2026-11-09 08:59–09:00 (her rulings, final form).
   (1) Layout: the page is TWO COLUMNS with the AGE ON TOP of
   each column: left column headed "12–18" (Acne, Period &
   Everyday Care), right column headed "18+" (Contraception,
   Skin Care, Tests & Daily Support). Age line sits above its
   column's rows and is height-reserved so both columns' first
   rows start on one line. Columns separate by whitespace only
   — no boxes, no divider lines. Mobile: the two columns stack,
   12–18 block first, then 18+.
   (2) Click cue — FINAL (her tap, 2026-11-09 09:02): NO
   arrows on the series rows. Arrows were deleted, briefly
   restored large, then settled OFF by her tap: name + gold
   underline only, rows remain clickable to the same shop
   anchors. The arrow spans are gone from the markup, this
   block's arrow rules are removed, and the row grid collapses
   back to a single column. */
.series { justify-content: flex-start; }
.series-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 96px;
  align-items: start;
}
.series-age { min-height: 88px; }
.series-group-18 { padding-top: 54px; }
.series-row { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .series-rows { grid-template-columns: 1fr; }
}

/* ================================================================
   final39 — 2026-11-09 09:10–09:11 (her rulings, FINAL form —
   this block supersedes the two age-header blocks above).
   (1) THE AGES ARE LABELLED AS AGES AND SIT ON ONE LINE
   (「12-18 要标明是年龄，和18+ 在一行」): the headers read
   "Age 12–18" and "Age 18+". The one-row stagger is REMOVED:
   the second group's margin-top (54px, from the stacked-groups
   era) and its settle padding-top (54px) both go to zero in
   the two-column layout, and the 88px min-height reservation
   on the age line is dropped — identical headers share one
   baseline and both columns' rows start below that line.
   (2) THE AGE HEADERS ARE BIGGER (「是啊，变大」): 28px → 40px,
   bold deep teal, still plain text — no box, no badge. The
   series names (~34–37px) are NOT shrunk to make room.
   (3) THE WHOLE CONTENT BLOCK MOVES DOWN (09:11): the series
   screen drops its flex-start anchor and returns to the
   .screen base behaviour — the block (title, age line, two
   columns) rests centred on the screen, air above and below.
   The gold E mark is absolutely positioned (96, 40) and does
   NOT move.
   Mobile: columns still stack (12–18 block first); the stacked
   group gap is restored inside the media query, headers 34px.
   ================================================================ */
.series { justify-content: center; }
.series-group + .series-group { margin-top: 0; }
.series-age {
  min-height: 0;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 10px;
}
@media (max-width: 760px) {
  .series-age { font-size: 34px; }
  .series-group + .series-group { margin-top: 44px; }
}

/* ================================================================
   final39 — 2026-11-09 09:17–09:18 (her tap + her scope word
   「只是头二页」): THE GOLD BAND GOES ON THE FIRST TWO DAUGHTER
   PAGES ONLY — E1 the cover (its masthead strip, standing) and
   E2 this five-series page. The band is the entry signal for
   the first two pages, NOT a per-page rule; no other daughter
   page gains a band in this pass. The band is the settled
   .sec-band build (gold var(--band) #EFAB00, 56px / 40px
   mobile), the same element the two shop shelves already
   carry. The series page's E mark steps down below the band
   to the shelves' own relationship: top 76px desktop /
   56px mobile (band + 20px), left anchor unchanged (96px).
   Everything else on E2 is untouched: the title, the Age
   headers at 40px on one line, the two columns, no arrows,
   the centred content block.
   ================================================================ */
.series .screen-mark { top: 76px; }
@media (max-width: 760px) {
  .series .screen-mark { top: 56px; }
}

/* ================================================================
   final39 — 2026-11-09 09:19 (her word 「好一些了，把E往下挪」):
   THE E STEPS DOWN A TOUCH MORE on E2. The mark sat too tight
   under the new gold band; it gains air: top 76px → 90px
   desktop, 56px → 70px mobile (+14px both). Left anchor
   unchanged (96px), size unchanged (38×46). It stays the
   page's top-left mark. Nothing else on the page changes.
   ================================================================ */
.series .screen-mark { top: 90px; }
@media (max-width: 760px) {
  .series .screen-mark { top: 70px; }
}

/* ================================================================
   final39 — 2026-11-09 09:21 (her ruling 「不能分二排」 + her
   own solution): NO SERIES NAME WRAPS — every name sits on
   ONE line. "Period Care & Everyday" measured 419px at the
   settled 37px; the equal columns gave it 412px, so it broke
   after "&". Her fix, applied as she said it: THE 18+ COLUMN
   SHIFTS RIGHT into the page's spare right whitespace — the
   left edge of the block (title, Age 12–18, left column) does
   not move; the rows box grows rightward and the column split
   rebalances. Measured needs: left name 419px, right column's
   longest "Tests & Daily Support" 382px. New split: left
   460px / gap 96px (unchanged) / right 420px — both names
   keep ~40px of air, neither crowds an edge, and NO name is
   shrunk (her shrink licence stays unused). The inner keeps
   its left edge by pinning margin-left to the centred 920px
   box's own offset (50% − 460px of the section content box);
   margin-right auto absorbs the rest. Desktop only: the
   mobile reset below restores the centred margin for the
   stacked single column.
   ================================================================ */
.series .screen-inner { max-width: 976px; margin-left: calc(50% - 460px); margin-right: auto; }
.series-rows { grid-template-columns: 460px 420px; }
@media (max-width: 760px) {
  .series .screen-inner { margin-left: auto; }
  .series-rows { grid-template-columns: 1fr; }
}

/* ================================================================
   final39 — 2026-11-09 10:02 (her word: 「不是 按最早的那样」):
   every E3 letter-page experiment of today (09:36 verse-down,
   09:37–09:38 centre/wrap arrangements, 10:01 straight column)
   is REVERTED. The letter page stands in its EARLIEST settled
   form — photo LEFT at its original size, verse RIGHT in order,
   the original comfortable stanza spacing — exactly as rendered
   in the E-pages pass (E3-mothers-letter.png). The ONE survivor
   of today's letter edits is the widened A+e mark: the HTML
   points at axelle-mark-a-plus-e-spaced-2026-11-09.png (her
   09:36 「E和加号开一点」, kept), which needs no CSS here.
   ================================================================ */

/* ================================================================
   final39 — 2026-11-09 10:03 (her word: 「照片下面用手写体
   写一句话」): a handwritten signature line, "Love, Mama",
   directly under the letter page's photo in the left column.
   Allura (real script typeface, OFL, self-hosted), deep teal
   (--ink), sized like a real signature — larger than the verse
   body, not huge. Verse and layout untouched.
   ================================================================ */
@font-face {
  font-family: "Allura";
  src: url("assets/allura-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
.letter-sign {
  font-family: "Allura", cursive;
  font-size: 46px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 20px;
  text-align: center;
}
@media (max-width: 760px) {
  .letter-sign { font-size: 24px; margin-top: 10px; }
}

/* ================================================================
   final39 — 2026-11-09 10:15 (her word, relayed: 收紧段距 +
   整段诗下移): on the E3 letter page only, stanza gaps tighten
   from the original 58px to 34px and the coda's extra separation
   eases (46px -> 24px padding), so the verse reads as one
   connected piece; and the .verse block shifts DOWN 72px inside
   the shared grid row. The photo and the "Love, Mama" signature
   do NOT move: the row's align-items flips to start so the photo
   keeps its original top position, and the verse carries the
   shift alone. Mobile keeps its own settled values.
   ================================================================ */
.letter-col { align-items: start; }
.letter .verse { margin-top: 72px; }
.verse .stanza { margin: 0 0 34px; }
.verse .coda { padding-top: 24px; margin-bottom: 0; }
@media (max-width: 760px) {
  .letter .verse { margin-top: 0; }
  .verse .stanza { margin-bottom: 44px; }
  .verse .coda { padding-top: 36px; }
}

/* ================================================================
   final39 — 2026-11-09 10:18 (her word in the main window:
   「你改反了 照片居中。和 From 拉开点距离」): the 10:15 shift
   was the wrong way round. The verse returns to the row top
   (margin-top 0, stanza tightening 34px kept); the PHOTO is
   what moves — the row centres its items so the photo (with
   the signature under it) sits vertically centred against
   the verse block; and the two columns pull apart, gap
   72px -> 112px. Mobile keeps its settled values.
   ================================================================ */
.letter-col { align-items: center; column-gap: 112px; }
.letter .verse { margin-top: 0; }
@media (max-width: 760px) {
  .letter-col { align-items: start; column-gap: 20px; }
}

/* ================================================================
   final39 — 2026-11-09 10:22 (her word in the main window:
   「文案往下移，和上标题分开一些」): the whole letter row
   (photo + verse together, their centring against each other
   unchanged) moves DOWN 48px, opening more air between the
   copy and the head of the page above it.
   ================================================================ */
.letter-col { margin-top: 96px; }
@media (max-width: 760px) {
  .letter-col { margin-top: 48px; }
}

/* ================================================================
   final39 — 2026-11-09 10:24 (her word in the main window:
   「还要开一点，段间距可以小一点」): the letter row drops
   further (margin-top 96px -> 144px) and the stanza gaps
   ease down again (34px -> 26px, coda separation 24px ->
   18px). Mobile stanza values stay as settled.
   ================================================================ */
.letter-col { margin-top: 144px; }
.verse .stanza { margin: 0 0 26px; }
.verse .coda { padding-top: 18px; margin-bottom: 0; }
@media (max-width: 760px) {
  .letter-col { margin-top: 64px; }
  .verse .stanza { margin-bottom: 44px; }
  .verse .coda { padding-top: 36px; }
}

/* ================================================================
   final39 — 2026-11-09 10:25 (her word in the main window:
   「LOVE MAMA 用黄色吧，标题就不改了」): the "Love, Mama"
   signature turns gold #EFAB00, the daughter line's accent,
   echoing the gold e in the A+e mark. The opening line
   ("From the day you were born,") stays deep teal.
   ================================================================ */
.letter-sign { color: #EFAB00; }

/* ================================================================
   final39 — 2026-11-09 10:32 (her word in the main window:
   「单词不能回行」 — no word may strand alone on the next
   line): step headings ease from 29px to 25px so step 2's
   two-line heading breaks at the phrase boundary, and the
   quiet door's line may run wider so its first line carries
   the whole first phrase.
   ================================================================ */
.step-name { font-size: 25px; }
.door-quiet .door-line { max-width: 460px; }

/* ================================================================
   final39 — 2026-11-09 10:41 (her word in the main window:
   「A+E 要往下挪一点」): on E3 only, the A+e mark steps down
   14px (top 40px -> 54px desktop, 26px -> 40px mobile), the
   same touch E2's E received at 09:19. Nothing else moves.
   ================================================================ */
.letter .screen-mark { top: 54px; }
@media (max-width: 760px) {
  .letter .screen-mark { top: 40px; }
}

/* ================================================================
   final39 — 2026-11-09 10:46 (her word in the main window:
   「头三页用色条，后面几页不用」 + E2/E3 swap): the letter is
   now E2 and gains the gold band like E1 and E3; its A+e mark
   steps below the band to the same relationship as E3's E
   (top 90px desktop / 70px mobile), superseding the 10:41
   no-band step-down (54px / 40px).
   ================================================================ */
.letter .screen-mark { top: 90px; }
@media (max-width: 760px) {
  .letter .screen-mark { top: 70px; }
}

/* ================================================================
   final39 — 2026-11-09 10:59 (her word: 「在数字前面要加一个
   年龄」): E4's door numbers gain the word Age in front, set
   small against the big numerals (about a third of their size),
   same serif, so the doors read Age 12–18 / Age 18+ like E3's
   rows. Numerals untouched.
   ================================================================ */
.door-age-word { font-size: .33em; letter-spacing: .01em; margin-right: .22em; }

/* ================================================================
   final39 — 2026-11-09 11:02 (her word: 「TWO 太顶着 LOGO 了，
   往下挪」): E4's title crowds the e mark; the doors head
   gains air above it (margin-top 40px desktop / 24px mobile).
   E4 only.
   ================================================================ */
.doors-head { margin-top: 40px; }
@media (max-width: 760px) {
  .doors-head { margin-top: 24px; }
}

/* ================================================================
   final39 — 2026-11-09 11:04 (her word: 「12-18 下面很多地方
   空着」): the two E4 doors now stretch to one height and both
   ENTER lines sit on the same bottom line, so no void hangs
   under the quieter door. Column widths (7fr / 5fr) unchanged.
   ================================================================ */
.doors-unequal { align-items: stretch; }
.doors-unequal .door-enter { margin-top: auto; }

/* ================================================================
   final39 — 2026-11-09 11:06 (E4 photo void, second half of the
   fix): both door photos now flex to fill their card, so no
   blank band hangs between a photo and its ENTER line.
   ================================================================ */
.doors-unequal .door-photo { flex: 1 1 auto; display: flex; }
.doors-unequal .door-photo img { height: 100%; }

/* ================================================================
   final39 — 2026-11-09 11:10 (E4 door lines up a size, her word):
   the line under each age goes 24 -> 27px on both doors.
   ================================================================ */
.doors .door-line { font-size: 27px; }

/* ================================================================
   final39 — 2026-11-09 11:27 (E3 series tags, her ruling): every
   series states plainly whether it is prescription, mixed, or
   needs no prescription — one small line under the name.
   ================================================================ */
.series-tag { display: block; font-size: 20px; line-height: 1.4; color: #5E7377; margin-top: 7px; letter-spacing: 0; }
/* The row's underline belongs on the name only, never the tag. */
.series .series-row { text-decoration: none; }
.series .series-name { text-decoration: underline; text-decoration-color: var(--band); text-underline-offset: 6px; }

/* E6 (Rx shelf): the title crowds the left, so the E mark moves right. */
.shelf-rx .screen-mark { left: auto; right: 96px; }

/* Cover-fit variant: fills the feature frame instead of letterboxing. */
.shelf-feature-photo.photo-cover img { object-fit: cover; padding: 0; }

/* One small gold heart beside the signature: the line's single sign of care. */
.letter-heart { color: var(--gold); font-size: .58em; }

/* One-screen fit for the two shelf screens (desktop): tighter spacing, wider feature frame. */
@media (min-width: 761px) {
  section.shelf-rx, section.shelf-goods { padding-top: 54px; padding-bottom: 44px; }
  .shelf-rx .sec-head, .shelf-goods .sec-head { margin-bottom: 30px; }
  .shelf-rx .shelf-feature, .shelf-goods .shelf-feature { padding: 26px 36px; }
  .shelf-rx .shelf-feature-photo, .shelf-goods .shelf-feature-photo { aspect-ratio: 16 / 10; }
  .shelf-rx .shelf-rows, .shelf-goods .shelf-rows { margin-top: 34px; }
  .shelf-rx .shelf-row, .shelf-goods .shelf-row { padding: 22px 0; }
  .shelf-rx .shelf-note, .shelf-goods .shelf-note { margin-top: 30px; }
  .shelf-goods .photo-strip { margin-top: 30px; }
  .shelf-goods .photo-strip img { height: 168px; }
}

/* E7 (everyday shelves): same as E6, the E mark sits right, clear of the title. */
.shelf-goods .screen-mark { left: auto; right: 96px; }

/* Everyday care leaves the flow: one quiet link, bottom right of the Rx page. */
.shelf-corner-link { text-align: right; margin-top: 30px; }
.shelf-corner-link a { color: var(--ink); font-size: 20px; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }

/* E7 contraception prices: mark right, price row under each product. */
.shelf-prices .screen-mark { left: auto; right: 96px; }
.piece-price { margin-top: 14px; font-size: 21px; color: var(--ink); }
.piece-price .per { color: #5E7377; font-size: 18px; }

/* E7 grid: three across, one frame size for photo and name panels alike. */
@media (min-width: 761px) {
  .shelf-prices .pieces { grid-template-columns: repeat(3, 1fr); }
}
.shelf-prices .piece-media { aspect-ratio: 4 / 3; }
.shelf-prices .piece-media img { width: 100%; height: 100%; object-fit: cover; padding: 0; display: block; }
.shelf-prices .piece-none { display: flex; align-items: center; justify-content: center; }
.shelf-prices .piece-none-no { font-size: 40px; }

/* E9 site tail: full wordmark, company name, states, legal. Nothing more. */
.colo-tail { flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 64px 40px 56px; }
.colo-wordmark { height: 44px; width: auto; }
.colo-company { font-size: 19px; color: var(--ink); margin: 0; }
.colo-states { font-size: 17px; color: #5E7377; margin: 0; }
.colo-fine { font-size: 15px; color: #5E7377; margin: 0; }
.colo-fine a { color: inherit; }

/* E8 tidy: no mark inside the trust band; FAQ column centred. */
.trust .screen-mark { display: none; }
.faq-list { margin-inline: auto; }

/* E8 FAQ de-carded (her word 2026-11-09: the wash ground is not
   good-looking and the cards read as stacking): white ground,
   hairline-ruled rows instead of white cards on cream. */
.faq { background: #fff; }
.faq-item { background: transparent; border-radius: 0; padding: 34px 0; margin: 0; border-top: 1px solid #E7E0D2; }
.faq-item:first-child { border-top: none; }

/* Promise column widened so "shelves" never strands on its own line. */
@media (min-width: 761px) { .promise-col { max-width: 940px; } }

/* E8 site tail, on the live site's last-page composition (her word
   2026-11-09): the same content, the current locked wordmark,
   the whole tail on one screen. */
.tail8 { display: block; padding: 0 96px 44px; text-align: left; }
.tail-brand { text-align: center; font-size: 19px; line-height: 1.7; color: var(--body); margin: 0; padding: 34px 0 30px; }
.tail-brand a { color: var(--ink); }
.tail-strip { height: 40px; background: #830051; margin: 0 -96px; }
.tail-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding: 40px 0 30px; }
.tail-logo { height: 40px; width: auto; display: block; margin-bottom: 18px; }
.tail-tag { font-size: 17px; line-height: 1.65; color: var(--body); margin: 0; }
.tail-col h4 { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--body); margin: 4px 0 16px; font-weight: 600; }
.tail-col a { display: block; font-size: 17px; color: var(--ink); text-decoration: none; margin: 0 0 10px; }
.tail-fine { border-top: 1px solid #E0D5BE; padding-top: 22px; }
.tail-fine p { font-size: 14.5px; line-height: 1.65; color: #5E7377; margin: 0 0 10px; }

/* Tail leading tightened (her word 2026-11-09). */
.tail-brand { line-height: 1.55; }
.tail-tag { line-height: 1.5; }
.tail-fine p { line-height: 1.5; margin-bottom: 8px; }
.tail-col a { margin-bottom: 8px; }

/* The two link columns sit closer together (her word 2026-11-09). */
.tail-grid { grid-template-columns: 1.7fr .65fr .65fr; gap: 36px; }

/* Explore column removed (her word 2026-11-09): the tail keeps
   the wordmark column and Contact only. */
.tail-grid { grid-template-columns: 1.7fr .65fr; }

.shelf-note { font-size: 15px; color: #8A9A9C; margin: 18px 0 0; }

/* The two product pages (12-18 / 18+): name, one line, price. */
.shelf-teens .shelf-row, .shelf-adults .shelf-row { grid-template-columns: 300px 1fr auto; }
.shelf-teens .shelf-name, .shelf-adults .shelf-name { font-size: 30px; }
.shelf-price { font: 600 21px 'Source Sans 3', sans-serif; color: #0E5561; white-space: nowrap; }
.shelf-price-feature { display: block; margin-top: 24px; }
.shelf-note-prices { margin-top: 14px; font-style: normal; font-family: 'Source Sans 3', sans-serif; font-size: 19px; }
.shelf-intro { font-size: 22px; line-height: 1.6; color: var(--body); max-width: 760px; margin-top: 22px; }
.tail-feedback { margin-top: 18px; font-size: 19px; }
.tail-feedback a { color: #0E5561; text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 760px) { .shelf-teens .shelf-row, .shelf-adults .shelf-row { grid-template-columns: 1fr; } }

/* The two product pages: the closing notes stay full size. */
.shelf-teens .shelf-note, .shelf-adults .shelf-note { font-size: 20px; color: #33565B; }

/* Letter page on phones: the side-by-side grid crushes the poem.
   Stack it — photo above, poem below, full width. Desktop unchanged. */
@media (max-width: 760px) {
  .letter-col { display: block; max-width: 100%; }
  .letter-photo { width: 200px; margin: 40px auto 0; }
  .letter-photo img { height: 250px; }
  .letter .verse { margin-top: 36px; font-size: 26px; line-height: 1.6; }
}

/* Phone pass, 2026-11-09: closing grid stacks; series title clears the mark. */
@media (max-width: 760px) {
  .tail-grid { grid-template-columns: 1fr; gap: 34px; }
  .series .sec-title { padding-top: 44px; }
}
.tail8 .tail-legal a { color: #33565B; text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ===== BATCH 2026-11-09 EVENING — her live review, daughter side. ===== */

/* E4: the whole doors screen inside one laptop screen. */
@media (min-width: 761px) {
  .doors .screen-inner { padding-top: 26px; }
  .doors-unequal .door-photo img { height: 300px; }
  .door-main .door-photo img { height: 300px; }
  .doors .door { padding: 26px 30px 24px; }
  .doors .door-line { margin: 12px 0 16px; }
}

/* E6/E7: two columns, three a side, tighter rows, one screen.
   The feature card shrinks to a banner on the 18+ shelf. */
@media (min-width: 761px) {
  .shelf-teens .shelf-rows, .shelf-adults .shelf-rows { display: grid;
    grid-template-columns: 1fr 1fr; grid-auto-flow: column;
    grid-template-rows: repeat(3, auto); column-gap: 56px; }
  .shelf-teens .shelf-row, .shelf-adults .shelf-row { display: flex;
    flex-wrap: wrap; align-items: baseline; padding: 14px 0; }
  .shelf-teens .shelf-name, .shelf-adults .shelf-name { font-size: 24px; }
  .shelf-teens .shelf-price, .shelf-adults .shelf-price { margin-left: auto; font-size: 19px; }
  .shelf-teens .shelf-line, .shelf-adults .shelf-line { flex-basis: 100%; font-size: 18px; margin-top: 3px; }
  .shelf .sec-title { font-size: 34px; }
  .shelf-intro { font-size: 20px; margin-top: 12px; }
  .shelf-adults .shelf-feature { display: grid;
    grid-template-columns: 300px 1fr; gap: 32px; align-items: center;
    padding: 18px 26px; }
  .shelf-adults .shelf-feature-photo img { height: 150px; width: 100%; object-fit: cover; }
}

/* E8: the two columns draw toward the middle, and the hairline
   above the fine print runs shorter. */
@media (min-width: 761px) {
  .tail8 .tail-grid { grid-template-columns: 460px 260px;
    justify-content: center; gap: 110px; }
  .tail8 .tail-fine { max-width: 940px; margin: 0 auto; }
}

/* Shelf rows, second pass: the price joins the name's line (DOM
   order is name, line, price; flex order restores the row), and
   the inherited 36px row gap goes. */
@media (min-width: 761px) {
  .shelf-teens .shelf-row, .shelf-adults .shelf-row { row-gap: 4px; }
  .shelf-teens .shelf-name, .shelf-adults .shelf-name { order: 1; }
  .shelf-teens .shelf-price, .shelf-adults .shelf-price { order: 2; }
  .shelf-teens .shelf-line, .shelf-adults .shelf-line { order: 3; }
  .shelf-adults .shelf-feature { padding: 14px 22px; }
  .shelf-adults .shelf-feature-photo img { height: 130px; }
}

/* Shelves and doors, third pass: measured compression so E4, E6
   and E7 each stand inside one 800px laptop screen. */
@media (min-width: 761px) {
  .screen.shelf { padding-top: 48px; padding-bottom: 40px; }
  .shelf .sec-title { margin-top: 0; margin-bottom: 6px; }
  .shelf-intro { margin: 6px 0 16px; }
  .shelf-adults .shelf-feature { margin: 16px 0 6px; }
  .shelf-adults .shelf-feature-photo { height: 132px; overflow: hidden; margin: 0; }
  .shelf-adults .shelf-feature-photo img { height: 100%; }
  .shelf .shelf-note { margin-top: 12px; }
  .screen.doors { padding-top: 48px; padding-bottom: 40px; }
  .doors-head { margin-bottom: 18px; }
  .doors .door-age { font-size: 76px; }
  .doors .door-photo img { height: 250px; }
  .doors-unequal .door-photo img { height: 250px; }
  .door-main .door-photo img { height: 250px; }
  .doors .door-line { font-size: 21px; line-height: 1.3; }
  .doors .door-enter { margin-top: 16px; }
}

/* Final measured trims: E4 doors and E7 shelf inside one screen. */
@media (min-width: 761px) {
  .screen.doors { padding-top: 40px; padding-bottom: 32px; }
  .doors .door-photo img { height: 228px; }
  .doors-unequal .door-photo img { height: 228px; }
  .door-main .door-photo img { height: 228px; }
  .doors .door { padding: 22px 28px 20px; }
  .doors-head { margin-bottom: 12px; }
  .shelf-adults .shelf-feature-photo { height: 116px; }
  .shelf-adults .shelf-row, .shelf-teens .shelf-row { padding: 12px 0; }
  .screen.shelf { padding-top: 44px; padding-bottom: 36px; }
}

@media (min-width: 761px) {
  .screen.doors { padding-bottom: 24px; }
  .doors-head { margin-bottom: 8px; }
  .doors .door-line { margin: 10px 0 12px; }
  .doors .door-enter { margin-top: 12px; }
  .shelf-adults .shelf-feature { margin-top: 12px; }
  .shelf .shelf-note { margin-top: 8px; }
}

@media (min-width: 761px) {
  .screen.doors { padding-top: 34px; }
  .doors .door { padding-bottom: 18px; }
}

/* ================================================================
   Her rulings 2026-11-09 19:11–19:14 (post-launch review, second
   pass):
   - Every E mark moves to the RIGHT (anything crowded on the
     left moves right).
   - The 18+ door drops its deep-teal ground and stands white
     like the 12–18 door, simple and clean.
   - The door photographs are cropped less: taller boxes.
   - Prescription medicine names on the shelves carry the gold
     underline, as the mother products do.
   - The 18+ feature card: no dead white in the middle — photo
     and words together, the price at the right edge, lined up
     with the prices below.
   ================================================================ */
.screen-mark { left: auto; right: 96px; }
@media (max-width: 760px) { .screen-mark { left: auto; right: 20px; } }

#doors .door-main { background: #FFFFFF; }
#doors .door-main .door-age { color: var(--ink); }
#doors .door-main .door-line { color: var(--ink); }
#doors .door-main .door-enter { color: var(--ink); }
#doors .door-main .door-enter .arr { color: var(--ink); }

@media (min-width: 761px) {
  .screen.doors { padding-top: 28px; padding-bottom: 16px; }
  .doors-head { margin-bottom: 4px; }
  .doors .door { padding: 18px 28px 14px; }
  .doors .door-line { margin: 8px 0 10px; }
  .doors .door-enter { margin-top: 8px; }
  .doors .door-photo img { height: 260px; }
  #doors .door-main .door-photo img { object-position: 50% 15%; }
  #doors .door-quiet .door-photo img { object-position: 50% 30%; }
}

.shelf .shelf-name { border-bottom: 2px solid #EFAB00; padding-bottom: 1px; }

.shelf-feature { justify-content: flex-start; }
.shelf-feature-text { flex: 0 1 auto; }
.shelf-feature .shelf-price-feature { margin-left: auto; align-self: center; padding-left: 32px; }

/* The feature card as a lined-up row: name and line at the
   left, price at the right edge with the prices below. */
.shelf-feature-text { flex: 1; display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: center; }
.shelf-feature-text .shelf-name { grid-column: 1; grid-row: 1; justify-self: start; }
.shelf-feature-text .shelf-line { grid-column: 1; grid-row: 2; justify-self: start; }
.shelf-feature-text .shelf-price-feature { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-left: 0; align-self: center; padding-left: 0; }

@media (min-width: 761px) {
  .screen.doors { padding-bottom: 14px; }
  #shelf-adults { padding-bottom: 28px; }
}

/* The feature card shortened, held to the right (her ruling
   2026-11-09 19:18: inside the white frame it was too spread
   out; make the length smaller). */
@media (min-width: 761px) {
  .shelf-feature { width: 780px; margin-left: auto; }
}

@media (min-width: 761px) {
  #shelf-adults .shelf-feature { margin-left: auto; }
}

#shelf-adults .shelf-feature-photo { width: auto; flex: none; }
#shelf-adults .shelf-feature-photo img { width: auto; }

@media (min-width: 761px) {
  #shelf-adults .shelf-feature { width: 660px; grid-template-columns: auto 1fr; column-gap: 24px; }
}

.series-row .series-name { text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.door .door-enter { text-decoration: underline; text-decoration-color: #EFAB00; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* The Pill is the shelf's featured medicine (her ruling
   2026-11-09 19:23): its photograph stands bigger and taller,
   and the Age 18+ head at the left moves down toward it. */
#shelf-adults .shelf-feature-photo img { height: 168px; }
#shelf-adults .shelf-head { transform: translateY(18px); }

#shelf-adults .shelf-feature-photo { height: 168px; }
#shelf-adults .sec-title, #shelf-adults .shelf-intro { transform: translateY(18px); }

@media (min-width: 761px) {
  #shelf-adults { padding-bottom: 16px; }
  #shelf-adults .shelf-feature { margin-top: 8px; }
  #shelf-adults .shelf-rows { row-gap: 16px; }
}

@media (min-width: 761px) {
  #shelf-adults { padding-bottom: 8px; }
  #shelf-adults .sec-title { margin-bottom: 2px; }
  #shelf-adults .shelf-intro { margin-top: 2px; margin-bottom: 8px; }
  #shelf-adults .shelf-feature { margin-top: 4px; margin-bottom: 2px; }
  #shelf-adults .shelf-rows { margin-top: 10px; row-gap: 13px; }
  #shelf-adults .shelf-note { margin-top: 4px; }
}

@media (min-width: 761px) {
  #shelf-adults { padding-bottom: 4px; }
  #shelf-adults .shelf-rows { row-gap: 12px; }
}

/* The Pill bigger still (her ruling 2026-11-09 19:28): a wider,
   taller photograph and a larger name. */
@media (min-width: 761px) {
  #shelf-adults .shelf-feature { width: 720px; }
  #shelf-adults .shelf-feature-photo { width: 200px; height: 180px; }
  #shelf-adults .shelf-feature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
  #shelf-adults .shelf-feature .shelf-name { font-size: 30px; }
  #shelf-adults .shelf-rows { margin-top: 4px; row-gap: 10px; }
  #shelf-adults { padding-bottom: 2px; }
}

#shelf-adults .shelf-intro { transform: translateY(28px); }

@media (min-width: 761px) {
  #shelf-adults .shelf-feature { width: 648px; }
}

/* White grounds throughout (her ruling 2026-11-09 19:29: the
   yellow-cream ground is tacky; everything white, colours not
   used all over the place). */
.screen.doors, .screen.how, #shelf-adults { background: #FFFFFF; }

@media (min-width: 761px) {
  #shelf-adults .shelf-feature-photo img { object-position: 50% 82%; }
}

@media (min-width: 761px) {
  #shelf-adults .shelf-feature-photo img { transform: scale(1.55); object-position: 50% 58%; }
}

@media (min-width: 761px) {
  #shelf-adults .shelf-feature-photo { width: 252px; height: 168px; }
  #shelf-adults .shelf-feature-photo img { transform: none; object-position: 50% 50%; }
}

/* On the white ground the door cards keep the same hairline
   as the feature card, so they still read as cards. */
.doors .door { border: 1px solid #E7E0D2; }

@media (min-width: 761px) { .screen.doors { padding-bottom: 12px; } }

/* ENTER outside the frame (her ruling 2026-11-09 19:37): the
   border and padding move to an inner box; the link's ENTER
   sits below the box, flush with its left edge. */
.doors .door { border: none; background: transparent; padding: 0; overflow: visible; }
.door-box { display: flex; flex-direction: column; background: #fff;
  border: 1px solid #E7E0D2; border-radius: 26px; overflow: hidden;
  padding: 18px 28px 14px; }
.doors .door .door-enter { margin-top: 0; padding-top: 16px; }
@media (max-width: 760px) {
  .door-box { padding: 40px 30px 36px; }
}

/* Age numerals smaller (her ruling 2026-11-09 19:39). */
.doors .doors-grid .door-age { font-size: 66px; }

.doors .doors-grid .door-age { font-size: 40px; }

@media (min-width: 761px) { #series { padding-top: 72px; padding-bottom: 68px; } }

/* Shelf names are not links: no gold line under them (her
   ruling 2026-11-09 19:56 — what cannot be clicked must not
   look clickable). Applies to both shelves and the feature. */
.shelf .shelf-name { border-bottom: none; padding-bottom: 0; }

/* Shelves rebuilt in the mother A4 list format (her words
   2026-11-09 20:01): series groups, name left, price aligned
   right, no photos, no feature card. Series E1-E5. */
.screen.shelf { padding-top: 92px; }
.shelf .prod-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 76px; margin-top: 40px; }
.shelf .prod-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8A9A9C; margin: 0; }
.shelf .prod-eyebrow.second { margin-top: 40px; }
.shelf .prod-group { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; color: #0E5561; margin: 8px 0 0; }
.shelf .prod-list { margin-top: 18px; }
.shelf .prod-row { display: flex; align-items: baseline; gap: 22px; padding: 7px 0; margin: 0; }
.shelf .prod-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 24px; color: #0E5561; }
.shelf .prod-price { margin-left: auto; font-size: 19px; color: #5E7377; white-space: nowrap; }
.shelf .shelf-note { margin-top: 38px; }
@media (max-width: 760px) {
  .shelf .prod-cols { grid-template-columns: 1fr; }
  .shelf .prod-col + .prod-col { margin-top: 36px; }
}

/* Gold line under shelf product names, same as the mother
   list (her words 2026-11-09 20:06). */
.shelf .prod-name { border-bottom: 2px solid #EFAB00; padding-bottom: 1px; }

.shelf a.prod-name { text-decoration: none; cursor: pointer; }

/* Letter page: one band only (the masthead strip), no E in
   the masthead, and the whole opening fits one screen
   (her words 2026-11-09 20:28). Poem type untouched. */
.masthead .mast-row { height: 64px; min-height: 0; }
.screen.letter { padding-top: 30px; padding-bottom: 30px; }

.screen.letter { min-height: 0; }
.letter .letter-col { margin-top: 0; }

.letter .screen-mark.mark-ae { width: 100px; }

/* Full-check fix (2026-11-09 20:35): the phone masthead hid
   Knowledge and For Mothers, stranding the reader. All
   three links show on phones now; the row may wrap. */
@media (max-width: 760px) {
  .masthead .mast-row { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .mast-nav { flex-wrap: wrap; gap: 8px 16px; }
  .mast-nav a:nth-child(2), .mast-nav a:nth-child(3) { display: inline; }
}

/* Phone tightening (2026-11-09 20:41): same pass on the
   daughter side — section padding 66px (shelf tops 92 and
   116) and 1.60 line-height read scattered on a phone. */
@media (max-width: 760px) {
  .screen.series, .screen.doors, .screen.how { padding-top: 44px; padding-bottom: 44px; }
  .screen.shelf { padding-top: 56px; padding-bottom: 44px; }
  .shelf-intro { line-height: 1.45; }
  .step-line { line-height: 1.45; }
  .letter .stanza { margin-bottom: 18px; }
}

/* One screen per screen, finished (her words 2026-11-09
   20:54: 「一屏归一屏」「都彻底改过来」). The steps screen
   was 1206px: its photo and spacing shrink until the whole
   screen fits. The shelves' content was vertically centred
   and sat low («整体往上»): shelves now start from the top. */
.screen.how { padding-top: 40px; padding-bottom: 40px; }
.how .sec-title { margin-top: 0; }
.how .steps { margin-top: 20px; }
.how .how-photo { margin-top: 20px; }
.how .how-photo img { height: 250px; object-position: 50% 55%; }
.screen.shelf { justify-content: flex-start; padding-top: 64px; }

.shelf .screen-inner { padding-top: 0; margin-top: 0; }
.how .how-photo img { height: 200px; }
.screen.how { padding-bottom: 32px; }

#shelf-teens, #shelf-adults { padding-top: 64px; }

/* ============================================================
   MOBILE REBUILD (2026-11-09 21:00, same order as the mother
   side: phones programmed separately, screen by screen.)
   ============================================================ */
@media (max-width: 760px) {
  .mast-strip { height: 44px; }
  .masthead .mast-row { min-height: 0; padding: 10px 16px 12px; }
  .mast-nav { gap: 8px 18px; }
  .mast-nav a { font-size: 15px; }
  /* Letter: photo centred, poem fitted to the phone. */
  .letter-photo { width: 280px; margin: 8px auto 0; }
  .letter-photo img { height: 320px; }
  .letter .verse { margin-top: 26px; }
  .letter .verse .ln { font-size: 29px; line-height: 1.48; }
  .letter-sign { font-size: 34px; }
  /* Series rows. */
  .series-name { font-size: 29px; }
  /* Doors: photo shorter, cards tight. */
  .door-photo img { height: 230px; }
  /* Steps: stacked calmly, photo full width. */
  .how .how-photo img { height: 200px; width: 100%; object-fit: cover; }
  /* Shelves: readable rows, tighter groups. */
  .shelf .prod-name { font-size: 23px; }
  .shelf .prod-price { font-size: 16.5px; }
  .shelf-intro { font-size: 19px; }
}

/* Screens fill the real window (2026-11-09 21:02, her
   photo: on her taller laptop window the next screen's gold
   band showed under the letter — «把下面的黄线条往下移
   移到下一屏»). Desktop screens are now one full viewport
   tall each, so the next screen's band can never appear
   inside the current screen, at any window height. */
@media (min-width: 761px) {
  .screen { min-height: 100vh; }
  .screen.letter { min-height: calc(100vh - 120px); }
}

/* PHONE TYPE SCALE (2026-11-09 21:20, same ruling as the
   mother side: phone text steps down across the page). */
@media (max-width: 760px) {
  .mast-nav a { font-size: 13.5px; }
  .poem .ln { font-size: 24.5px; }
  .sec-title { font-size: 30px; }
  .series-age { font-size: 26px; }
  .series-name { font-size: 24px; }
  .series-tag { font-size: 16px; }
  .door-line { font-size: 22px; }
  .door-enter { font-size: 20px; }
  .door-plus { font-size: 32px; }
  .step-name { font-size: 21px; }
  .step-line { font-size: 17px; }
  .shelf-intro { font-size: 16px; }
  .prod-group { font-size: 24px; }
  .shelf .prod-name { font-size: 19.5px; }
  .shelf .prod-price { font-size: 14.5px; }
  .shelf-note { font-size: 15.5px; }
}

@media (max-width: 760px) {
  .ln { font-size: 24.5px; }
}

@media (max-width: 760px) {
  .letter .verse .ln { font-size: 24.5px; }
}

/* Phone: the A+e mark clears the letter photo (2026-11-09
   21:22, her photo: the mark lay on the photo's corner) —
   the photo starts below the mark, on white. */
@media (max-width: 760px) {
  .letter .marks-ae { width: 84px; top: 6px; right: 14px; }
  .letter-visual { margin-top: 72px; }
}

@media (max-width: 760px) {
  .letter .mark-ae { width: 84px; top: 6px; right: 14px; }
}

@media (max-width: 760px) {
  .letter { padding-top: 30px; }
}

@media (max-width: 760px) {
  .letter-visual { transform: translateY(16px); }
}

@media (max-width: 760px) {
  .letter-photo { transform: translateY(18px); }
}

/* Phone logos step down too (same ruling, daughter side). */
@media (max-width: 760px) {
  .screen .screen-mark { width: 23px; }
  .letter .screen-mark.mark-ae { width: 78px; }
}

/* Phone screens one to a screen (same ask, daughter side). */
@media (max-width: 760px) {
  html { scroll-snap-type: y proximity; }
  .screen { scroll-snap-align: start; min-height: 100vh; min-height: 100svh; }
  .screen.letter { min-height: calc(100vh - 88px); min-height: calc(100svh - 88px); }
}

@media (max-width: 760px) {
  section.doors span.door-line { font-size: 22px; }
  section.doors span.door-enter { font-size: 20px; }
}

/* DESKTOP TYPE SCALE (same ruling, daughter side). */
@media (min-width: 761px) {
  .mast-nav a { font-size: 15px; }
  .letter .verse .ln { font-size: 29px; }
  .letter .verse .ln.open { font-size: 40px; }
  #series .sec-title { font-size: 54px; }
  .series-age { font-size: 35px; }
  .series-name { font-size: 32px; }
  .series-tag { font-size: 18px; }
  section.doors .door-enter { font-size: 22px; }
  .door-plus { font-size: 34px; }
  .step-name { font-size: 22px; }
  .step-line { font-size: 20px; }
  .shelf .sec-title { font-size: 30px; }
  .shelf-intro { font-size: 18px; }
  .prod-group { font-size: 26px; }
  .shelf .prod-name { font-size: 21px; }
  .shelf .prod-price { font-size: 17px; }
  .shelf-note { font-size: 17.5px; }
}

/* Every screen mark at the same place (same ruling,
   daughter side): top 92, right 96 on desktop. */
@media (min-width: 761px) {
  .screen .screen-mark { top: 92px; right: 96px; }
}

/* Shelf prices bigger and close to their names (2026-11-09
   21:37, her photo of the live teens shelf: 「价格变大
   往产品方向移」「字太小了」); the adults shelf mark joins
   the unified 92 as well. Desktop only. */
@media (min-width: 761px) {
  .shelf .prod-price { margin-left: 20px; font-size: 19px; }
  #shelf-adults .screen-mark { top: 92px; }
}

/* Phone marks unified below the band line (same ruling,
   daughter side): every standalone E at top 54; the
   letter's A+e keeps its own place above the photo. */
@media (max-width: 760px) {
  .screen .screen-mark { top: 54px; }
  .letter.screen-mark.mark-ae { top: 6px; }
}

@media (max-width: 760px) {
  #shelf-adults .screen-mark { top: 54px; }
  #shelf-teens .screen-mark { top: 54px; }
}

/* Letter mark one notch smaller on phones (2026-11-09
   21:44, her photo of the letter: 「logo 要变小一号」). */
@media (max-width: 760px) {
  .letter.screen-mark.mark-ae { width: 64px; }
}

@media (max-width: 760px) {
  .letter .screen-mark.mark-ae { width: 64px; }
}

/* Every gold line becomes the wave (same ruling, daughter
   side); the two border rules convert to a wavy underline
   that hugs the words. */
.series-row .series-name, .door .door-enter, .tail-feedback a,
.tail8 .tail-legal a { text-decoration-style: wavy; }
.shelf .prod-name, .shelf .shelf-name {
  border-bottom: none;
  text-decoration: underline wavy #EFAB00 2px;
  text-underline-offset: 5px;
}

/* Series list drawn closer on phones (2026-11-09 21:45:
   「行间距太开了」「靠近一点」), the letter photo clears
   the smaller A+e, and shelf rows keep name and price on
   one line: names two notches smaller, prices a touch
   bigger, the amount biggest (21:47: 「名称变小 价格变
   大一点 特别是金额」「药品名称小二号」). */
@media (max-width: 760px) {
  .series .sec-title { margin-bottom: 24px; }
  .series-group { margin-top: 30px; }
  .series-row { padding-top: 9px; padding-bottom: 9px; }
  .letter-photo { margin-top: 42px; }
  .shelf .prod-name { font-size: 16px; }
  .shelf .prod-price { font-size: 16.5px; }
  .shelf .prod-price .amt { font-size: 19px; font-weight: 700; }
}

@media (max-width: 760px) {
  .shelf a.prod-name, .shelf .shelf-name {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #EFAB00;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
  .series-rows { margin-top: 8px; }
  .series-group { margin-top: 0; }
  .series-group + .series-group { margin-top: 36px; }
  .series-age { margin-top: 0; }
  .letter-photo { margin-top: 50px; }
}

@media (max-width: 760px) {
  .shelf .prod-price { margin-left: 16px; }
}

@media (max-width: 760px) {
  .shelf .prod-name { font-size: 15.5px; }
  .shelf .prod-price { margin-left: 10px; }
}

@media (max-width: 760px) {
  .shelf .prod-row { column-gap: 0; }
  #shelf-teens, #shelf-adults { padding-left: 15px; padding-right: 15px; }
}

/* Clickable without a line (same ruling, daughter side):
   no wave, no line on names; a small gold arrow follows
   the name. */
.shelf a.prod-name, .shelf .shelf-name,
.series-row .series-name {
  text-decoration: none;
  border-bottom: none;
}
.shelf a.prod-name::after, .series-row .series-name::after {
  content: " \2192";
  color: #EFAB00;
  font-weight: 400;
}
.door .door-enter { text-decoration-style: solid; }

/* Phone shelf prices in one clean column (2026-11-09
   21:53, her word: 「价格排版排版一下吧」): every name
   takes the same width, so every price starts at the
   same stop instead of floating row by row. */
@media (max-width: 760px) {
  .shelf a.prod-name { flex: 0 0 218px; }
  .shelf .prod-price { margin-left: 6px; }
}

/* Series names sit close to their products (2026-11-09
   21:55, her word: 「药品系列名称和下面的要靠近一些」):
   the gap under a shelf series title closes from 18
   to a few px, both form factors. */
.shelf .prod-group { margin-bottom: 2px; }
.shelf .prod-list { margin-top: 0; }

/* One series, one block (2026-11-09 21:55, her words:
   「一个系列一个系列 一目了然 否则都很散」): on phones
   each shelf series stands apart from the next, while
   its name stays close to its own products. */
@media (max-width: 760px) {
  .shelf .prod-list { margin-bottom: 42px; }
  .shelf .prod-list:last-child { margin-bottom: 0; }
}

/* Group zones, daughter shelves (same ruling): each
   series column becomes one soft warm block on phones;
   the arrow is glued to the name's last word so it can
   never dangle alone on the next line, and the name
   column widens a touch so the Pill row stays whole. */
.shelf a.prod-name::after { content: "\00a0\2192"; }
@media (max-width: 760px) {
  .shelf .prod-col {
    background: #FAF6EC;
    border-radius: 16px;
    padding: 18px 16px 20px;
    margin-bottom: 16px;
  }
  .shelf .prod-col:last-child { margin-bottom: 0; }
  .shelf .prod-col .prod-eyebrow { margin-top: 0; }
  .shelf .prod-list { margin-bottom: 0; }
  .shelf a.prod-name { flex-basis: 226px; }
  .shelf .prod-price { margin-left: 2px; }
}

/* Zone width repair (2026-11-09 21:58): the zone's own
   padding narrows the row, so the name column and the
   zone padding shrink to fit — no price may ever clip
   at the right edge again. Audited per row after this. */
@media (max-width: 760px) {
  .shelf .prod-col { padding-left: 12px; padding-right: 12px; }
  .shelf a.prod-name { flex-basis: 200px; }
  .shelf .prod-price { margin-left: 6px; }
}

@media (max-width: 760px) {
  .shelf a.prod-name { flex-basis: 178px; }
}

/* Per-group zones where one column holds two series
   (adults E4 + E5): the wrapper is transparent on
   desktop; on phones each series gets its own block
   and the host column's tint comes off. */
.shelf .zone { display: contents; }
@media (max-width: 760px) {
  .shelf .zone {
    display: block;
    background: #FAF6EC;
    border-radius: 16px;
    padding: 18px 12px 20px;
    margin-bottom: 16px;
  }
  .shelf .zone-host { background: none; padding: 0; border-radius: 0; }
  .shelf .zone-host .zone:last-child { margin-bottom: 0; }
  .shelf .zone .prod-eyebrow { margin-top: 0; }
}

/* Phone titles step down, daughter shelves (same
   ruling): section and series names 30 to 25/24, rows
   tighter. */
@media (max-width: 760px) {
  .shelf .sec-title { font-size: 25px; }
  .shelf .prod-group { font-size: 24px; }
  .shelf .prod-row { line-height: 1.32; padding-top: 2px; padding-bottom: 2px; }
}

/* Even air between series (2026-11-09 22:02, her words:
   「每个系列都空差不多」): the stacked columns were
   adding their own gap on top of the zone margin (52
   between columns, 16 inside one column). One rhythm
   now: every series block stands 28 from the next. */
@media (max-width: 760px) {
  .shelf .prod-cols { gap: 0; row-gap: 0; column-gap: 0; }
  .shelf .prod-col { margin-bottom: 28px; }
  .shelf .prod-col:last-child { margin-bottom: 0; }
  .shelf .zone { margin-bottom: 28px; }
  .shelf .zone-host .zone:last-child { margin-bottom: 0; }
}

@media (max-width: 760px) {
  .shelf .prod-col + .prod-col { margin-top: 0; }
}

/* Daughter product names step down on BOTH form
   factors (2026-11-09 22:05, her ruling over my
   keep-it view): desktop 21 to 18, phone 15.5 to 14.5.
   Prices keep their size, so the price leads. */
.shelf .prod-name { font-size: 18px; }
@media (max-width: 760px) {
  .shelf a.prod-name { font-size: 14.5px; }
}

/* Correction (2026-11-09 22:06): it is the SERIES
   names that step down, never the product names
   (「药品名称 不能小」). Product names return to
   21 desktop / 15.5 phone; series names go 30 to 26
   and 32 to 28 on desktop, 24 to 21 on phones. */
.shelf .prod-name { font-size: 21px; }
.shelf .prod-group { font-size: 26px; }
#series .series-name { font-size: 28px; }
@media (max-width: 760px) {
  .shelf a.prod-name { font-size: 15.5px; }
  .shelf .prod-group { font-size: 21px; }
  #series .series-name { font-size: 21px; }
}

/* Two notches and more (2026-11-09 22:07, her standard:
   「要小二号以上」) — series names down again from the
   original 30/32 desktop and 24 phone. */
.shelf .prod-group { font-size: 24px; }
#series .series-name { font-size: 26px; }
@media (max-width: 760px) {
  .shelf .prod-group { font-size: 19px; }
  #series .series-name { font-size: 19px; }
}

/* Phone: no A or E marks (same ruling, daughter side,
   including the letter's A+e). Desktop keeps them. */
@media (max-width: 760px) {
  img.screen-mark { display: none; }
}

@media (min-width: 761px) {
  .shelf .prod-price { margin-left: 8px; }
}

/* A blank line before the shelf note (2026-11-09 22:18,
   her words: 「All nine 前面空一行」 — on desktop the
   adults note sat 4px under the last row). */
@media (min-width: 761px) {
  .shelf .prod-cols + .shelf-note { margin-top: 26px; }
}

@media (min-width: 761px) {
  #shelf-adults .prod-cols + .shelf-note { margin-top: 26px; }
}

/* One link language, site-wide (same 22:29 ruling):
   lines off everywhere, gold arrows instead. */
.series-row .series-name, .series .series-name,
.door .door-enter, .tail-feedback a,
.tail8 .tail-legal a, .shelf .prod-name,
.shelf .shelf-name, .shelf-corner-link a {
  text-decoration: none; border-bottom: none;
}
.door .door-enter::after, .tail-feedback a::after,
.tail8 .tail-legal a::after, .shelf-corner-link a::after {
  content: "\00a0\2192"; color: #EFAB00;
}
@media (max-width: 760px) {
  .shelf a.prod-name, .shelf .shelf-name { text-decoration: none; border-bottom: none; }
}
/* Price blocks aligned the same way as the mother's
   list (22:31 ruling): fixed name column, reserved
   From slot, amount right-aligned, unit after. */
@media (min-width: 761px) {
  .shelf .prod-row { display: flex; align-items: baseline; }
  .shelf .prod-name { flex: 0 0 336px; }
  .shelf .prod-price { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 6px; }
  .shelf .p-from { flex: 0 0 46px; }
  .shelf .prod-price .amt { flex: 0 0 78px; text-align: right; }
}

@media (min-width: 761px) {
  .shelf .prod-price { flex-shrink: 0; }
  .shelf .p-unit { white-space: nowrap; }
  .shelf .prod-price .amt { flex-shrink: 0; }
}

/* Mid-width safety (2026-11-09 23:34: the shelf rows
   are the widest on the site; in two columns their
   right-hand prices ran past the screen edge at every
   width under full screen). Below 1400 the shelves run
   in ONE column, prices close behind the names. */
@media (min-width: 761px) and (max-width: 1399px) {
  .shelf .prod-cols { grid-template-columns: 1fr; }
  .shelf .prod-col + .prod-col { margin-top: 36px; }
}

/* Wide screens: more air in the middle (2026-11-09). */
@media (min-width: 1400px) {
  .shelf .prod-cols { gap: 0 104px; }
}

/* Same price rule as the mother shelves (2026-11-09
   23:41): amounts tight behind From, units aligned. */
.shelf .prod-price .amt { text-align: left; }

/* Letter on phones (2026-11-10 00:35, her review):
   it is a poem, so it is set as a poem: every written
   line stands on its own row, the type steps down
   until the longest lines fit whole, and the letter
   begins lower on the screen. Desktop untouched. */
@media (max-width: 760px) {
  .letter { padding-left: 12px; padding-right: 12px; }
  .letter-photo { margin-top: 84px; }
  .letter .verse { font-size: 19px; }
  .letter .verse .ln { font-size: 19px; line-height: 1.5; letter-spacing: -0.015em; }
  .letter .verse .ln.open { font-size: 24px; }
  .letter .verse .coda { font-size: 20px; }
}

/* Steps on phones (2026-11-10 00:37, her review):
   the three steps sat too far apart; the gaps close
   up. Desktop spacing unchanged. */
@media (max-width: 760px) {
  .steps { gap: 26px; }
  .step, .rx-steps .step { padding-top: 10px; }
  .how .steps { gap: 26px; }
  .how .steps .step { padding-top: 10px; }
}

/* Steps title steps down (2026-11-10 01:03, her
   photo: "Three" was too big): 64 -> 50 on desktop.
   Phone size unchanged. */
@media (min-width: 761px) {
  .how .sec-title { font-size: 50px; }
}

/* Prices as one tight piece (2026-11-10 01:03, her
   shelf photos: "/ month" floated away from its
   number): the unit connects to the amount, and the
   whole price sits close behind the name — the same
   treatment as the mother catalogue. Phones keep
   their arrangement. */
@media (min-width: 761px) {
  .prod-name { flex: 0 1 auto; }
  .prod-price { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px; flex: 0 1 auto; }
  .p-from { flex: 0 0 auto; }
  .prod-price .amt { flex: 0 0 auto; text-align: left; }
}

/* The E moves to the left (2026-11-10 01:04, her
   shelf photo): daughter screen marks sit at the
   top-left now, aligned with the section titles,
   instead of floating at the right. Cover mark is
   in the mother file and keeps its own place. */
@media (min-width: 761px) {
  .screen-mark { right: auto; left: 96px; }
  /* reverted 01:06 at her "不行": marks stay right. */
  .screen-mark { left: auto; right: 96px; }
}

/* Shelf prices, second pass (2026-11-10 01:06):
   the shelf-scoped slot widths outranked the first
   tight pass, so the amounts still sat in wide slots
   with the unit floating after them. These selectors
   match the shelf scope and close the slots for real:
   From right behind the name, amount tight, unit
   tight behind the amount. */
@media (min-width: 761px) {
  .shelf .prod-name { flex: 0 1 auto; }
  .shelf .prod-price { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px; flex: 0 1 auto; }
  .shelf .p-from { flex: 0 0 auto; }
  .shelf .prod-price .amt { flex: 0 0 auto; text-align: left; }
}

/* All marks step down-left a little (2026-11-10
   01:13, her words): every E moves 24px left and
   24px down from wherever it sits. */
.screen-mark { transform: translate(-24px, 24px); }

/* Phone marks, four pages only (2026-11-10): on
   this side the E shows on the series screen, top
   right where the air is. Other phone marks stay
   hidden; desktop marks keep their places. */
@media (max-width: 760px) {
  #series .screen-mark { display: block; position: absolute; top: 30px; right: 24px; left: auto; height: 36px; transform: none; }
}

/* Series anchors land exactly on their series
   (2026-11-10): a breath of margin so the series
   heading is not flush with the screen top. */
.prod-group, .zone, .prod-eyebrow { scroll-margin-top: 14px; }

/* Phone prices and arrows (2026-11-10, her items
   5 and 11): the shelves get the same small-table
   treatment as the mother's catalogue (amounts in
   one column, units in the next, the block at the
   right), and the gold arrows go bolder on phones,
   matching the mother's. */
@media (max-width: 760px) {
  .shelf .prod-list { display: grid; grid-template-columns: max-content max-content max-content; justify-content: end; column-gap: 5px; row-gap: 4px; }
  .shelf .prod-row { display: contents; }
  .shelf .prod-price { display: contents; }
  .shelf .prod-name { grid-column: 1 / -1; margin-top: 16px; }
  .shelf .prod-price .amt { text-align: right; }
  .shelf .prod-row:has(.prod-price:not(:has(.amt))) { display: block; grid-column: 1 / -1; }
  .shelf .prod-row:has(.prod-price:not(:has(.amt))) .prod-price { display: block; text-align: right; }
  .shelf .prod-row:has(.prod-price:not(:has(.amt))) .prod-name { margin-top: 16px; }
  .shelf a.prod-name::after, .series-row .series-name::after { font-weight: 700; font-size: 1.15em; }
}

/* Phone letter and steps (2026-11-10, her items
   9 and 10): the letter photo moves up so the
   photo, the signature and the first verse share
   one screen; the steps close their gaps so the
   whole steps screen fits one phone screen. */
@media (max-width: 760px) {
  .letter-photo { margin-top: 16px; }
  section.how .steps { gap: 14px; }
  section.how .step { padding-top: 6px; }
}

/* Gold arrows heavier (2026-11-10 09:51, her words:
   「黄的箭头加粗」): every gold arrow on the daughter
   pages to 900 at the same 1.15em as the mother's. */
.shelf a.prod-name::after, .series-row .series-name::after,
.door .door-enter::after, .tail-feedback a::after,
.tail8 .tail-legal a::after, .shelf-corner-link a::after {
  font-weight: 900;
  font-size: 1.15em;
}

@media (max-width: 760px) {
  .shelf a.prod-name::after, .series-row .series-name::after,
  .door .door-enter::after, .tail-feedback a::after,
  .tail8 .tail-legal a::after, .shelf-corner-link a::after {
    font-weight: 900; font-size: 1.3em; -webkit-text-stroke: .6px #EFAB00;
  }
}

@media (max-width: 760px) {
  .prod-list .p-from { text-align: right; }
}

@media (max-width: 760px) {
  .prod-list { row-gap: 0; }
  .prod-list .prod-name { line-height: 1.15; }
  .prod-list .p-from, .prod-list .amt, .prod-list .p-unit { margin-top: 1px; }
}

@media (max-width: 760px) {
  .prod-list .p-from, .prod-list .amt, .prod-list .p-unit { line-height: 1.05; }
}

@media (max-width: 760px) {
  .shelf .prod-list { row-gap: 0; }
  .shelf .prod-name { margin-top: 10px; margin-bottom: 0; }
}

@media (max-width: 760px) {
  .shelf .prod-list { grid-template-columns: 1fr max-content max-content max-content; }
  .shelf .prod-name { text-align: left; }
  .shelf .p-from { grid-column: 2; }
}

@media (max-width: 760px) {
  .shelf .prod-list { display: block; }
  .shelf .prod-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 12px; }
  .shelf .prod-name { grid-column: auto; margin: 0; font-size: 17.5px; text-align: left; }
  .shelf .prod-price { display: inline-flex; align-items: baseline; gap: 5px; margin-left: auto; }
  .shelf .p-from { grid-column: auto; font-size: 13.5px; }
  .shelf .amt { font-size: 16.5px; }
  .shelf .p-unit { font-size: 13.5px; }
}

@media (max-width: 760px) {
  .shelf .prod-row { column-gap: 10px; }
  .shelf .prod-name { flex: 0 1 auto; font-size: 17.5px; }
  .shelf .prod-price { margin-left: 0; }
}

@media (max-width: 760px) {
  .shelf .prod-row { flex-direction: row; align-items: baseline; }
}

@media (max-width: 760px) {
  .shelf .prod-name { font-size: 16px; }
}

@media (max-width: 760px) {
  .shelf .prod-price { margin-left: auto; }
}

@media (max-width: 760px) {
  .shelf .prod-name { font-size: 14.5px; }
}

@media (max-width: 760px) {
  .shelf .prod-name { font-size: 16px; }
}

@media (max-width: 760px) {
  .shelf .prod-name { font-size: 17.5px; }
}

@media (max-width: 760px) {
  .shelf .prod-row { flex-wrap: nowrap; }
  .shelf .prod-name { font-size: 14px; min-width: 0; }
  .shelf .prod-price { flex-shrink: 0; }
}

/* Phone: the daughter shelves drop their SERIES
   lines too (2026-11-10 10:20, her words: 「女孩药品
   手机版本把series也删除」). The lines collapse to
   zero height instead of display:none so the shelf
   anchor ids on them keep working. */
@media (max-width: 760px) {
  .prod-eyebrow { font-size: 0; line-height: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
}

@media (max-width: 760px) {
  .shelf a.prod-name::after, .series-row .series-name::after,
  .door .door-enter::after, .tail-feedback a::after,
  .tail8 .tail-legal a::after, .shelf-corner-link a::after {
    font-size: 1.35em; -webkit-text-stroke: 1px #EFAB00;
  }
}

/* Phone: daughter shelves follow the mother standard
   (2026-11-10 10:20, her words: 「女孩药品也和这个
   标准是一样的」): group name above the tint, smaller,
   right-aligned; the tint backs only the medicines;
   every product one line. */
@media (max-width: 760px) {
  .shelf .prod-group { text-align: right; font-size: 21px; margin: 0 0 10px; }
  .shelf .prod-col, .shelf .zone { background: transparent; }
  .shelf .prod-list { background: #FAF6EC; border-radius: 14px; padding: 14px 14px 12px; }
  .shelf .prod-name { font-size: 13px; }
}

@media (max-width: 760px) {
  .shelf .prod-col { padding-left: 0; padding-right: 0; }
  .shelf .prod-list { padding: 14px 10px 12px; }
  .shelf .amt { font-size: 15px; }
  .shelf .p-from, .shelf .p-unit { font-size: 12px; }
  .shelf .prod-price { gap: 3px; }
}

/* Phone: daughter shelves match the mother standard
   exactly (2026-11-10 10:22, her words: 「女孩药品的
   文字大小 排版和这是一样的」): same sizes, same
   layout; the old fixed name width is lifted and the
   shelf measure widened to the mother's. */
@media (max-width: 760px) {
  .shelf a.prod-name { flex: 0 1 auto; }
  .shelf .prod-name { font-size: 14px; }
  .shelf .amt { font-size: 16.5px; }
  .shelf .p-from, .shelf .p-unit { font-size: 13.5px; }
  .shelf .screen-inner { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 760px) {
  .shelf a.prod-name { font-size: 14px; }
}

@media (max-width: 760px) {
  .shelf .screen-inner { padding-left: 8px; padding-right: 8px; }
  .shelf .prod-list { padding-left: 8px; padding-right: 8px; }
  .shelf .zone { padding-left: 0; padding-right: 0; }
  section.shelf { padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 760px) {
  .shelf a.prod-name { letter-spacing: -0.3px; }
}

@media (min-width: 761px) {
  .shelf a.prod-name::after, .series-row .series-name::after,
  .door .door-enter::after, .tail-feedback a::after,
  .tail8 .tail-legal a::after, .shelf-corner-link a::after {
    -webkit-text-stroke: .6px #EFAB00;
  }
}

/* The letter page's A+e mark rises to the section's
   top-right, a deliberate letterhead place (2026-11-10
   10:31, her words: 「logo 上移」「不能随便放的」):
   at the shared mark height it floated unanchored
   above the letter text. */
@media (min-width: 761px) {
  #letter .mark-ae { top: 32px; }
}

/* The series screen's E now sits beside its title:
   the gold band is deleted (2026-11-10 10:34, her
   words: 「把一些色条删除」), and a mark must anchor
   to the title, never float (「不能随便放的」). */
@media (max-width: 760px) {
  #series .screen-mark { top: 113px; }
}
@media (min-width: 761px) {
  #series .screen-mark { top: 187px; }
}

/* Phone steps: the middle step's sentence stands in
   two lines (HTML breaks reset), and the steps sit
   closer together (2026-11-10 10:35, her words:
   「段间距太大」). */
@media (max-width: 760px) {
  section.how li.step { margin-top: 8px; }
  section.how .step-name { margin-bottom: 2px; }
}

/* Phone prices stand in fixed columns, From, amount
   and unit each on its own line of alignment, never
   crooked (2026-11-10 10:37, her words: 「数字对齐」
   「不能歪歪扭扭」). */
@media (max-width: 760px) {
  .shelf .p-from { width: 34px; text-align: right; }
  .shelf .amt { width: 62px; text-align: right; }
  .shelf .p-unit { width: 50px; text-align: left; }
}
/* The closing prices note turns gold and smaller
   (2026-11-10 10:36, her words: 「最后一句变成黄色
   变小一点」). */
.shelf-note.shelf-note-prices { color: #EFAB00; font-size: 16px; }

@media (max-width: 760px) {
  .shelf .p-from { width: 32px; }
  .shelf .amt { width: 50px; }
  .shelf .p-unit { width: 48px; }
  .shelf .prod-price { gap: 1px; }
  .shelf .prod-list { padding-left: 5px; padding-right: 5px; }
  .shelf .screen-inner { padding-left: 5px; padding-right: 5px; }
}

/* Daughter nav grows and firms up (2026-11-10 10:45,
   her words: 「栏目变大一点」「字体变粗」), and the
   doors and steps screens' E marks take the same
   top-right place as the letter's (「e 往上一点」). */
@media (min-width: 761px) {
  .mast-nav a { font-size: 17.5px; font-weight: 600; }
  #doors .screen-mark, section.how .screen-mark { top: 32px; }
}

@media (min-width: 761px) {
  section .screen-mark { top: 32px !important; }
  .shelf .p-from { width: 46px; text-align: right; }
  .shelf .amt { width: 52px; text-align: right; }
  .shelf .p-unit { width: 70px; text-align: left; }
}
@media (max-width: 760px) {
  #series .screen-mark { top: 56px; }
}

@media (min-width: 761px) {
  .shelf .prod-row { display: grid; grid-template-columns: 386px 44px 52px 68px; column-gap: 6px; align-items: baseline; }
  .shelf .prod-price { display: contents; }
  .shelf .p-from, .shelf .amt, .shelf .p-unit { width: auto; }
  .shelf .prod-row:not(:has(.amt)) .prod-price { display: block; grid-column: 2 / 5; }
}

@media (min-width: 761px) {
  /* Amount and unit are one whole (2026-11-10, her
     order): the amount sits right-aligned in its
     column, so the slash follows it at one even
     space on every row. */
  .shelf .amt { text-align: right !important; }
}

/* Colour bands belong to the DESKTOP daughter pages
   (2026-11-10, her clarification): without them the
   big screens look empty. On the phone they come
   out — the small screen does not carry them. */
@media (max-width: 760px) {
  .sec-band { display: none; }
}
/* The shelf marks sit in the top-right CORNER of
   their screens, above the Age titles, never on the
   title's line (2026-11-10, her order). */
@media (min-width: 761px) {
  #shelf-teens .screen-mark, #shelf-adults .screen-mark { top: -8px !important; }
}

/* Phone shelves: the groups sit closer together
   (2026-11-10, her order — Skin Care moved up
   toward Contraception; the hole between groups
   goes from 66px to 40px). */
@media (max-width: 760px) {
  .shelf .prod-col { margin-bottom: 8px; }
  .shelf .zone { margin-bottom: 8px; padding-top: 12px; }
  .shelf .prod-col.zone-host { margin-bottom: 0; }
}

/* …and Weight moves up too (2026-11-10, her
   follow-up): the phone shelf rhythm tightens
   once more, 40px to 28px between groups. */
@media (max-width: 760px) {
  .shelf .prod-col { margin-bottom: 0; }
  .shelf .zone { margin-bottom: 0; padding-top: 8px; }
}

/* Phone shelves: each group's amount column hugs
   its own widest price (2026-11-10, her order —
   From and the amount sit closer). Widths are the
   measured widest ink of each group plus 2px. */
@media (max-width: 760px) {
  #shelf-teens .prod-cols > .prod-col:nth-of-type(1) .amt { width: 39px; }
  #shelf-teens .prod-cols > .prod-col:nth-of-type(2) .amt { width: 35px; }
  #shelf-adults .prod-cols > .prod-col:nth-of-type(1) .amt { width: 47px; }
  #shelf-adults .zone-host > .zone:nth-of-type(1) .amt { width: 37px; }
  #shelf-adults .zone-host > .zone:nth-of-type(2) .amt { width: 50px; }
}

/* Contraception, phone: the From-rows take a
   tighter amount box so From sits close to the
   price on the $15 rows (2026-11-10, her order —
   the Mini-Pill row named). The Ring row, the
   group's widest at $150 with no From, keeps the
   full box. */
@media (max-width: 760px) {
  #shelf-adults .prod-cols > .prod-col:nth-of-type(1) .amt { width: 39px; }
  #shelf-adults .prod-row:has(a[href$="p=ring"]) .amt { width: 47px; }
}

/* From sits closer to the amount on desktop
   (2026-11-10, her order): in the groups whose
   amounts are all two figures, the amount box
   shrinks to its widest ink. The amount column
   stays right-aligned; units do not move. */
@media (min-width: 1201px) {
  .shelf .prod-row:has(a[href$="p=tretinoin"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=adapalene"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=clindamycin-bpo"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=doxycycline"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=pill-low"]) .prod-price .amt { flex-basis: 38px; }
}

/* Phone shelf names one size up (2026-11-10,
   her order). The longest-name exception in the
   page's own style block still governs that row. */
@media (max-width: 760px) {
  .shelf a.prod-name { font-size: 15px; }
}

/* From closer to the amount on desktop: the
   two-figure groups' amount boxes shrink to
   their widest ink (width governs here, not
   flex-basis). Arrows bigger and bolder. */
@media (min-width: 1201px) {
  .shelf .prod-row:has(a[href$="p=tretinoin"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=adapalene"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=clindamycin-bpo"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=doxycycline"]) .prod-price .amt,
  .shelf .prod-row:has(a[href$="p=pill-low"]) .prod-price .amt { width: 38px; }
}
.shelf a.prod-name::after { font-size: 1.12em; font-weight: 700; }
.arr { font-size: 1.15em; font-weight: 700; }

/* FULLCHECK 2026-11-10 — the #series and #doors gold bands
   now sit IN FLOW before their sections (the mother-junction
   pattern), no longer absolute inside the section where they
   sat flush on the e marks. The marks stay at rel 56 inside
   their sections, on white, with the band's height plus 56px
   of air above them. Phone is unchanged: bands stay hidden. */
main > .sec-band { position: static; }

/* Evening round two (2026-11-10, her orders):
   shelf prices move forward to their names so a
   row reads at a glance (the name column is sized
   per group to its longest name, amounts stay in
   their column, the slash tight against the
   number); shelf text one size up except the Age
   heading and the product names; the gold prices
   note bigger and a line clear of the note above;
   the doors title and cards move up; the steps
   text one size up. */
.shelf .shelf-note-prices { font-size: 19px; }
@media (min-width: 761px) {
  .shelf .prod-row { grid-template-columns: 386px 50px 58px 76px; }
  #shelf-teens .prod-cols > .prod-col:nth-of-type(1) .prod-row { grid-template-columns: 390px 50px 58px 76px; }
  #shelf-teens .prod-cols > .prod-col:nth-of-type(2) .prod-row { grid-template-columns: 326px 50px 58px 76px; }
  #shelf-adults .prod-cols > .prod-col:nth-of-type(1) .prod-row { grid-template-columns: 196px 50px 58px 76px; }
  #shelf-adults .zone:has(#shelf-skin) .prod-row { grid-template-columns: 210px 50px 58px 76px; }
  #shelf-adults .zone:has(#shelf-weight) .prod-row { grid-template-columns: 240px 50px 58px 76px; }
  .shelf .p-from, .shelf .amt, .shelf .p-unit { font-size: 21px; }
  .shelf .prod-group { font-size: 26px; }
  .shelf .shelf-note { font-size: 22px; }
  .shelf .shelf-note-prices { margin-top: 56px; }
  #doors { justify-content: flex-start; padding-top: 104px; }
  section.how .step-name { font-size: 24px; }
  section.how .step-line { font-size: 22px; }
}

/* Desktop small text raised (2026-11-10, her
   order). Desktop only; phone does not follow. */
@media (min-width: 761px) {
  .door-age-word { font-size: 16px; }
}

/* Shelf names never wrap on desktop (2026-11-10):
   the name columns above carry the arrow too. */
@media (min-width: 761px) {
  .shelf .prod-name { white-space: nowrap; }
}

/* The adults shelf carries its own note margin;
   the gold line still gets its clear line of air
   (2026-11-10). */
@media (min-width: 761px) {
  #shelf-adults .shelf-note-prices { margin-top: 56px; }
}

/* Type-up round (2026-11-10 late, her order).
   Shelf intro lines up a size, amounts aligned
   to the right edge so the slash sits tight,
   small text and links raised. */
.shelf .amt { justify-self: end; text-align: right; }
@media (min-width: 761px) {
  .shelf-intro { font-size: 20px; }
  .shelf .p-unit { margin-left: -3px; }
  .series-tag { font-size: 19.5px; }
  .door-age-word { font-size: 18px; }
}
@media (max-width: 760px) {
  .shelf-intro { font-size: 18px; }
  .series-tag { font-size: 17px; }
  .door-age-word { font-size: 16px; }
  .shelf .prod-price { font-size: 17.5px; }
  .shelf .p-from, .shelf .p-unit { font-size: 15px; }
}

/* Daughter masthead links raised with the rest
   of the clickable text (2026-11-10 late). */
@media (min-width: 761px) { .mast-nav a { font-size: 19px; } }
@media (max-width: 760px) { .mast-nav a { font-size: 16px; } }

/* The Ring on the phone (2026-11-10 late, her
   photo: the slash crashed into the $150): its
   amount ink is 45 wide and the shared 39 box
   let it spill over the slash. Its box now fits
   its own ink, so the slash sits clear like the
   other rows. */
@media (max-width: 760px) {
  #shelf-adults .amt-wide { width: 47px !important; }
}

/* ================================================================
   2026-11-14 BATCH (her orders).
   Daughter shelves: From hugs the amount; amounts align in one
   column (Skin Care $30 and Weight $299 on the same column).
   ================================================================ */
@media (min-width: 761px) {
  .shelf .prod-row { grid-template-columns: 1fr 50px max-content 76px !important; }
}