/* ===========================================================================
   放松 · /relax/     卡片 C 标本 + 标题 T1 报头
   ---------------------------------------------------------------------------
   THE HEADING IS THE HOMEPAGE'S HEADING, TO THE PIXEL. Owner: 「this section
   heading should observe the specs of all the headings on home page, in terms
   of margin, font size, background, divider line height, etc.」 So the numbers
   below are not chosen — they are MEASURED off the running homepage
   (.mh-desks-h / .mh-deep-h / .mh-news-h / .mh-pair-h and their titles), with
   Playwright reading computed style rather than me reading rules:

       band gap        margin-top: 85px on the band wrapper
       divider         border-top: 3px solid #171A17   (滚动新闻 uses 4px; the
                                                        other four use 3px)
       gap under rule  padding-top: 18px
       title           700 31px "Songti SC", letter-spacing .62px  (= .02em)
       colour          #1A1A18
       background      transparent — the paper shows through

   THE DIVIDER USES --ink, NOT --rule-strong, and that is a correction rather
   than a preference. --rule-strong reads #1A1A18 in site-build/tokens.css, so
   it looked like the right name — but on a LIVE inner page the Bricks :root
   resolves it to #C9C6BC, a light grey, and the 3px rule came out faint. Caught
   by reading computed style off the deployed page instead of trusting the
   token file. --ink resolves to rgb(26,26,24), within one step of the
   homepage's rgb(23,26,23); --mh-* tokens are front-page only and an inner
   page must not reach for them.

   CONSUMES THE SITE'S TOKENS AND CARRIES NO PALETTE OF ITS OWN — the same rule
   fanqiang.css and after-the-wall.css keep, so dark mode arrives for free.

   THE SHORTHAND TRAP: a font shorthand whose family slot is the keyword for
   "take the parent's" is invalid CSS and the whole declaration is dropped in
   silence. It shipped here once and rendered a 14px heading at 29px. Longhand
   for anything inheriting a family; RelaxRendererTest enforces it.

   NO FIXED POSITIONING. The floating 留声机 dock and the 回到顶部 arrow hold
   z-index 189/190; nothing here may enter that corner or that band.
   =========================================================================== */

.rx{
  width:1080px;
  max-width:calc(100vw - 32px);
  margin-inline:auto;
  padding-block: 0 64px;
  color:var(--ink);
  --rx-serif: var(--mh-serif, "Songti SC","Noto Serif CJK SC","SimSun",serif);
  --rx-mono:  var(--mh-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ====================== T1 报头 — homepage band heading ====================== */
.rx-head{
  border-top:3px solid var(--ink);
  padding-top:18px;
  margin-bottom:26px;
}
.rx-title-row{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap }
.rx-title{
  font-size:31px; font-weight:700; line-height:1.1;
  font-family:var(--rx-serif);
  letter-spacing:.02em; color:var(--ink); margin:0;
}
.rx-en{
  font-size:11px; font-weight:400; line-height:1;
  font-family:var(--rx-mono);
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2);
}
.rx-count{ margin-left:auto; font-size:12px; font-family:var(--rx-mono); color:var(--ink-2) }
.rx-lede{ margin:14px 0 0; max-width:58ch; color:var(--ink-2); font-size:14.5px; line-height:1.85 }

/* ====================== C 标本 — plates on paper ======================
   THE MAT IS THE POINT. The ten screenshots run from pure black (吃豆人,
   明暗, 破锁) to near-white (2048, 汉兜); edge to edge they read as noise.
   A white mat around every one is what a plate section in a book does about
   exactly that, and it is the same device 文库 uses for its 藏书票. */
.rx-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:34px 26px; margin:0;
}
.rx-plate{ display:block; color:inherit; text-decoration:none }
.rx-mat{
  display:block; background:var(--surface,#fff);
  border:1px solid var(--rule); padding:11px;
  transition:border-color .2s ease;
}
.rx-win{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--rule) }
.rx-win img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease }
.rx-label{ display:block; padding:11px 2px 12px; border-bottom:1px solid var(--rule) }
.rx-no{
  display:block; font-size:10px; line-height:1; font-family:var(--rx-mono);
  letter-spacing:.2em; color:var(--accent);
}
.rx-name{
  display:inline-block; margin-top:6px;
  font-size:16px; font-weight:700; line-height:1.4;
  font-family:var(--rx-serif); letter-spacing:.04em;
}
.rx-latin{
  font-size:10px; font-weight:400; line-height:1; font-family:var(--rx-mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin-left:8px;
}
.rx-note{ display:block; font-size:12.5px; line-height:1.75; color:var(--ink-2); margin-top:7px }
.rx-meta{ display:flex; align-items:center; gap:10px; margin-top:8px }
.rx-kind{
  font-size:11px; letter-spacing:.08em; padding:2px 8px;
  border:1px solid var(--rule); color:var(--ink-2);
}
.rx-input{ font-size:12px; color:var(--ink-2) }

.rx-plate:hover .rx-mat{ border-color:var(--accent) }
.rx-plate:hover .rx-name{ color:var(--accent) }
.rx-plate:hover .rx-win img{ transform:scale(1.03) }
.rx-plate:focus-visible .rx-mat{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion:reduce){ .rx-win img{ transition:none } }

/* ============================== notes ==============================
   85px is the homepage's own gap between bands, measured the same way. */
/* THE RULE SPANS THE COLUMN, THE PROSE DOES NOT. max-width on the band cut the
   3px divider off half way, which on a page whose other rule runs edge to edge
   reads as a mistake. The homepage's band rules span their column; only the
   text inside is measured. */
.rx-cost{
  margin-top:85px; padding-top:18px; border-top:3px solid var(--ink);
}
.rx-cost h2{
  font-size:31px; font-weight:700; line-height:1.1;
  font-family:var(--rx-serif); letter-spacing:.02em; color:var(--ink); margin:0;
}
.rx-cost p{ margin:13px 0 0; max-width:70ch; font-size:13.5px; line-height:1.85; color:var(--ink-2) }

.rx-legal{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:44px;
  padding-top:18px; border-top:1px solid var(--rule); font-size:13px;
}
.rx-legal a{ color:var(--ink-2) }
.rx-legal a:hover{ color:var(--accent) }

/* ============================== tiers ==============================
   LAST BLOCK IN THIS FILE — the phone tier stays last. Append above this
   banner, never below it. */
@media (max-width:940px){
  .rx-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:520px){
  .rx{ padding-block: 0 44px }
  .rx-grid{ grid-template-columns:1fr; gap:28px }
  .rx-title{ font-size:25px }
  .rx-cost h2{ font-size:25px }
  .rx-cost{ margin-top:60px }
  .rx-count{ margin-left:0; width:100% }
}