/* adults.css - adults (full-size) page only (page-adults.php + template-parts/adults/*).
   Design source: wangcheng.factory07.site/adults.html
   2026-10 section order: hero, rail (#range), max (#max), m8 (#m8), w (#w), specs (#specs),
   oem, engnote, inquiry. The page is now split by PLATFORM (MAX trio / M8 / W series) instead of
   listing the three W machines first -- see the note in template-parts/adults/max.php.
   Shared components (tokens, .wrap, .section, .sec-alt, .btn family, header / .mobile-nav /
   footer, .hero base declarations, .inq, .ctaRow, .chips, .btn-line) live in style.css and are not
   redeclared here.
   The header's transparent-over-hero state is NOT redeclared here either: style.css owns both
   states through body.sse-hero-top / body:not(.sse-hero-top), so the design source's
   `header ...` block has no counterpart below.
   A selector's base declarations and its @media overrides must stay in the same file; the .hero
   rules below are a page-level override block whose base lives in style.css.
   Kept here even though a sibling page uses the same name - do not merge without checking all three
   sources: .hero-top / .ht-short / .ht-long / .sub-short and their <=600px rules sit inside media
   blocks whose other selectors are page-specific, and the .engNote
   band's inner rules (.engNote / .engNoteGrid / .engSide / .engMail a / .engStmt em are byte-identical
   across the three pages, but .engLab / .engStmt / .engMail differ, so the band cannot move as a whole
   and half-promoting it would be worse than the duplication).
   Local additions with no counterpart in this design source: .cert-row / .cert-label / .cert-badge
   (the design source keeps them in assets/css/site.css; style.css has never shipped the cert row).
   NOTE on var(--fs-label): the design source never defines that token - not in site.css, not in
   any of the four page files - so its four uses here (.mk, .upRow .area, .caps3 h3, .engLab)
   resolve to an invalid declaration and fall back to 16px there. style.css defines it at 12px
   (the label tier) and teenager-youth.html uses it ten times the same way, so the token stays.
   Consequence to expect when comparing against the raw source: this page's #oem block measures
   ~70px shorter and the declaration band ~6px shorter, entirely from those three 12px labels.

   APPARATUS SHARED WITH teenager-youth (duplicated on purpose, see the same note in teen.css):
   .rail / .rail-cols / .rc* (the ink selection rail), .pair / .pair-imgs / .pairNote,
   .xlink (the hand-off row) and the .tbl / .tRow table engine + .tblNote footnote.
   The design source inlines its own copy in every page, and these two pages carry different values
   (rail columns 3 vs 2, .rc-code 2.9rem vs 4.1rem, .pair-imgs aspect-ratio 8/5 + 5% padding vs 3/2,
   .pairNote 920px vs 780px, table ratios t4 1.1fr / t6 1.05fr here), so they stay page-local.
   Differences from the source, both deliberate:
     · The tables use the SAME transposed mobile layout as the teen page (see the 1024 breakpoint)
       rather than the source's "stack at 640 with data-l labels": this page's table is 6 columns
       wide, and between 640 and 1024 the source's version is a 6-column grid in ~900px.
   The table itself comes from template-parts/table.php (shared by teen and adults). */

/* ---------- hero ----------
   Same lower-left layout as kids. Three differences: the H1 runs to four word groups so the page
   tightens its own clamp instead of touching style.css; the bottom metadata band carries the
   full-size figures; and both the doc row and the subtitle ship a short variant, because on a
   667px-tall phone (iPhone SE) the desktop copy pushes the block up under the fixed header.
*/
.hero-top{position:static;display:block;margin:0 0 20px;justify-content:flex-start}
.ht-short{display:none}
.sub-short{display:none}
/* The hero copy apparatus is shared by the four product-line heroes and lives in style.css --
   the copy-block width, the H1 scale and the gutter-aligned .hero-inner box, see the
   "hero copy block" @media block there. Kids and adults no longer sit outside it. */
/* Desktop: one scrim down the left for the copy, the sunset and the roost on the right stay clean. */
.hero::after{background:
  linear-gradient(90deg,rgba(10,11,20,.86) 0%,rgba(10,11,20,.6) 34%,rgba(10,11,20,.18) 62%,rgba(10,11,20,0) 82%),
  linear-gradient(180deg,rgba(10,11,20,.5) 0%,rgba(10,11,20,.14) 20%,rgba(10,11,20,0) 40%)}
/* The metadata band spans the full width (SCROLL left, figures right) and hero-inner grows by the
   band's height - same arithmetic as kids.css and teen.css. */
.hero-inner{padding-bottom:calc(clamp(28px,5vh,56px) + 44px)}
.hero-foot{left:var(--pad);right:var(--pad);bottom:clamp(14px,2.4vh,24px);justify-content:space-between}
/* Phone: only the copy block changes width and the short doc line takes over. There is deliberately
   no phone scrim here. The design source carries one in its <=600px block, but it sits ABOVE the
   desktop declaration, so both resolve at the same specificity and the later desktop rule wins at
   every width - measured on the source at 390x844, ::after still computes to the 90deg left scrim.
   Reinstating it after the base so it actually applies was tried and renders worse on this photo:
   the portrait crop puts the rider at the right edge and the left half is dark rock, so the left
   scrim is already the right mask here, while a top+bottom scrim buries the machine. The left scrim
   therefore stands at every width and the dead rule is gone rather than shipped unreachable. */
@media(max-width:600px){
  .hero-block{width:auto}
  .ht-long{display:none}
  .ht-short{display:inline}
}
/* The two copy tiers swap at 900px, not 600px: the desktop subtitle wraps to four lines on a
   tablet and pushes the hero block into the header. */
@media(max-width:900px){.ht-long{display:none}.ht-short{display:inline}.sub-long{display:none}.sub-short{display:inline}}

/* Three content widths: the data rows run the full 1321px wrap, the prose heads stop at 820px. */
.sec-head{max-width:820px}

/* ---------- 段间距：本页同底色邻居各出半档（设计稿 2026-10 的规则，与 kids / teen 同一套） ----------
   本页底色序列：rail(墨) · max(纸) · m8(纸) · w(纸) · specs(paper-2) · oem(paper-2) · engNote(墨) · inq(paper-2)。
   同底色相邻三对：max|m8、m8|w、specs|oem → 各侧只出半档；不同底色交界两侧各出满档。
   主题没有 --sec-y / --sec-gap（.section 一档是 clamp(72px,9vw,140px)），半档取 clamp(36px,4.5vw,70px)，
   两半相加正好一档。
   ⚠️ 初版移植漏了这组规则，max|m8|w 三个纸面段各自出了满档 → 间隙是设计稿的两倍（实测 259px vs 130px）。 */
#max{padding-bottom:clamp(36px,4.5vw,70px)}
#m8{padding-top:clamp(36px,4.5vw,70px);padding-bottom:clamp(36px,4.5vw,70px)}
#w{padding-top:clamp(36px,4.5vw,70px)}
#specs{padding-bottom:clamp(36px,4.5vw,70px)}
#oem{padding-top:clamp(36px,4.5vw,70px)}

/* ---------- 01 the range (ink selection rail) ----------
   Three platforms, not three models: each entry is a whole platform (what chassis, what drivetrain,
   what wheels, what payload), and everything below the rail is one of them. */
.rail{background:var(--ink);color:var(--paper);padding:clamp(72px,7vw,104px) 0}
.rail .eyebrow{color:var(--orange)}
.rail .sec-title{color:var(--paper)}
.rail .sec-title .em{color:var(--orange)}
.rail .lead{color:rgba(243,241,234,.7)}
.rail-top{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,72px);flex-wrap:wrap}
.rail-cols{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2);
  margin-top:clamp(34px,4.4vw,60px)}
.rc{padding:28px 30px 4px 0;border-left:1px solid var(--line-2)}
.rc:first-child{border-left:0}
.rc:not(:first-child){padding-left:30px}
.rc:last-child{padding-right:0}
.rc-code{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:.92;letter-spacing:.01em}
.rc-pow{margin:10px 0 20px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.05em;color:var(--orange)}
.rc-caps{list-style:none;margin:0;padding:0}
.rc-caps li{display:flex;align-items:center;gap:11px;padding:5px 0;
  font-family:var(--mono);font-size:var(--fs-mini);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,241,234,.72)}
/* Every square is solid on this page (the entries are platform FACTS, not "which kinds of business
   this platform serves"), so there is no hollow-vs-filled state here -- the source's .rc-caps li.on
   rules are not carried over. */
.rc-caps li .sq{width:11px;height:11px;flex:none;background:var(--orange)}
.rc-link{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange);border-bottom:1px solid rgba(240,149,10,.5);
  padding-bottom:3px;transition:.25s}
.rc-link:hover{color:#fff;border-color:#fff}

/* ---------- 02 / 03 / 04 machine blocks ----------
   .models wraps the W-series rows (border + spacing); a single platform section (M8) uses .mrow
   directly and gets its top spacing from the .sec-head + .mrow rule below.
   The plate is DELIBERATELY a white box (same device as kids.css / teen.css). */
.models{margin-top:clamp(30px,3.6vw,54px);border-top:2px solid var(--ink)}
.sec-head + .mrow{margin-top:clamp(30px,3.8vw,48px)}
/* Each row carries an id and the rail jumps straight to it. style.css sets scroll-margin-top
   on section[id] only, so the rows need their own. .reveal's translateY has to be off as well:
   the browser resolves an in-page jump against the element's ANIMATED position, so once the
   animation ends and the transform is dropped the row moves up 28px and the landing point becomes
   84-28=56 - inside the 69px fixed header. With no displacement the landing point is exactly 84,
   the same as every other section anchor. These rows are large enough that a fade alone holds. */
.mrow[id]{scroll-margin-top:84px}
.mrow.reveal{transform:none}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4.4vw,76px);align-items:center;
  padding:clamp(32px,4.2vw,58px) 0}
.mrow:nth-child(even) .mfig{order:2}          /* even rows put the plate on the right */
.mfig{margin:0;background:#fff;border:1px solid var(--line);overflow:hidden}
.mfig a{display:block}                        /* the plate links to the model's product page; block kills the inline baseline gap */
.mfig img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;padding:5%}
/* Hover moves the machine, never the plate - same language as teen.css. The 6px budget: the plate's
   own slack is the 5% padding (30px at 609px wide) plus the image's built-in margin, so 6px spends
   about a fifth of it and cannot clip the bodywork; what shows underneath is the image's own white,
   seamless against the white plate. overflow:hidden is there for the 1.2% scale-up.
   @media(hover:hover) keeps touch devices out of the sticky-hover state; prefers-reduced-motion
   cancels the displacement outright (style.css only shortens durations, so the 6px would still jump). */
.mfig img{transition:transform .45s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){ .mfig:hover img{transform:translateY(-6px) scale(1.012)} }
@media(prefers-reduced-motion:reduce){ .mfig:hover img{transform:none} }
.mk{margin:0 0 10px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.mbody h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,2vw,1.85rem);line-height:1.08;margin:0 0 16px}
.mbody p{margin:0 0 14px;font-size:var(--fs-body);line-height:1.72;color:var(--muted);max-width:60ch}
.mbody p b{color:var(--ink)}
.mbody .chips{margin:20px 0 0}   /* overrides the shared .chips bottom margin (style.css) used in cards */
.mbody .acts{margin-top:22px}
.mbody .ctaRow{margin-top:22px}

/* ---------- dealer notes (one per model) ----------
   The copy labelled these three "Dealer note". Dropped on 2026-09-29: the label is too deliberate,
   and the orange rule plus ink-coloured body already separate them from the --muted paragraphs
   above. Each note still says in its first clause that it is positioning advice to a dealer. */
.dnote{margin:24px 0 0;border-left:2px solid var(--orange);padding:2px 0 2px 20px}
.dnote p{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--ink);max-width:56ch}

/* ---------- image strip + shared copy (the MAX trio: one chassis, three bodyworks) ---------- */
.pair{margin:clamp(30px,3.8vw,48px) 0 0;border:1px solid var(--line);background:#fff;overflow:hidden}
.pair-imgs{display:grid;grid-template-columns:repeat(3,1fr)}
.pair-imgs a{position:relative;display:block;overflow:hidden}
.pair-imgs img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:contain;padding:5%;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pair-imgs a + a{border-left:1px solid var(--line)}
/* The model label sits on the image's own bottom-left corner (it belongs to that image), and is
   clipped rather than allowed to cross into the next plate on a narrow column. */
.pair-imgs .tag{position:absolute;left:0;bottom:0;padding:0 12px 4px;pointer-events:none;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--muted);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(hover:hover){ .pair-imgs a:hover img{transform:translateY(-6px) scale(1.012)} }
@media(prefers-reduced-motion:reduce){ .pair-imgs a:hover img{transform:none} }
/* One caption cell per bodywork, each with its own enquiry button (the trio is not sold as three
   product pages in the design; the enquiry form is the entry point). */
.pair figcaption{display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--paper)}
.pair figcaption .cap{padding:14px 16px;display:flex;align-items:center}
.pair figcaption .cap + .cap{border-left:1px solid var(--line)}
/* The prose tier here is 920px: this page's section heads stop at 820px and the MAX trio's copy has
   two paragraphs plus the ROI line, which is still one comfortable measure at 920. */
.pairNote{max-width:920px;margin-top:clamp(28px,3.6vw,44px)}
.pairNote h3{margin:0 0 16px;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,1.95vw,1.9rem);line-height:1.04}
.pairNote p{margin:0;font-size:var(--fs-body);line-height:1.72}
.pairNote .roi{margin-top:20px;border-top:1px solid var(--ink);padding-top:15px;color:var(--muted)}

/* ---------- hand-off row (MAX -> M8, and out to the W series) ---------- */
.xlink{margin-top:clamp(30px,3.8vw,48px);border-top:2px solid var(--ink);padding-top:clamp(20px,2.6vw,30px);
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);align-items:center;justify-content:space-between}
.xlink .xl-t{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.1;letter-spacing:.01em}
.xlink .xl-d{margin:8px 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--muted);max-width:60ch}

/* ---------- spec comparison (the table engine shared with the teen page; see template-parts/table.php) ---------- */
.tbl{margin-top:clamp(28px,3.6vw,46px);border-top:2px solid var(--ink)}
.tRow{display:grid;position:relative}
.tRow > *{padding:14px 16px;font-size:var(--fs-body);line-height:1.6}
.tRow > *:not(:first-child){border-left:1px solid var(--line);font-family:var(--mono);font-weight:700;
  font-variant-numeric:tabular-nums}
.tRow.head > *{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--fs-label);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:16px}
.tRow.lab > *:first-child{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.tbl.t4 .tRow{grid-template-columns:1.1fr repeat(3,1fr)}
.tbl.t5 .tRow{grid-template-columns:1.05fr repeat(4,1fr)}
.tbl.t6 .tRow{grid-template-columns:1.05fr repeat(5,1fr)}
/* Rows stagger in via --d, written by assets/js/teen.js in row order. Scoped under .js so a blocked
   script cannot leave every row stuck at opacity:0. */
.js .tbl.reveal .tRow{opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.js .tbl.reveal.vis .tRow{opacity:1;transform:none;transition-delay:var(--d,0ms)}
/* Values every column would repeat are stated once, under the table (template-parts/table.php).
   Outside the grid on purpose: at <=1024 the table transposes, and grid-column:1/-1 cannot span an
   implicit-column grid. */
.tblNote{margin:0;padding:14px 16px;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:400;line-height:1.85;color:var(--muted)}
.specNote{margin-top:14px;font-size:var(--fs-body);line-height:1.65;color:var(--muted);max-width:74ch}
/* The cert row sits in the design source's shared site.css, which style.css never picked up
   (no earlier page used it). Values copied verbatim. */
.cert-row{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.cert-label{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-right:4px}
.cert-badge{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;color:var(--ink);border:1px solid var(--line);padding:5px 12px}

/* ---------- OEM upgrade list (from -> to) ----------
   Deliberately not a comparison table: a comparison table says "these three side by side", this
   says "swap this for that". Different meaning, so a different shape - same device as kids.css. */
.upgrades{margin-top:clamp(26px,3.4vw,44px);border-top:2px solid var(--ink)}
.upRow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,76px);align-items:end;
  padding:24px 0}
.upRow .area{margin:0 0 12px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Three tracks: the "from" state at a fixed width, the arrow at a fixed length, the "to" state
   auto. All six arrows therefore start, end and measure identically. The line is 2px because a 1px
   line gets split unevenly at fractional devicePixelRatio (measured at DPR 1.25). */
.swap{display:grid;grid-template-columns:minmax(0,196px) clamp(64px,9vw,148px) auto;
  align-items:center;gap:16px;margin:0;font-family:var(--mono);font-size:16px;line-height:1.4}
.swap .from{color:var(--muted)}
.swap i{--arrow:#B0AFB0;width:100%;height:2px;background:var(--arrow);position:relative}
.swap i::after{content:"";position:absolute;right:0;top:-4px;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:8px solid var(--arrow)}
.swap .to{font-weight:700;color:var(--ink)}
.benefit{margin:0;padding-top:2px;font-size:var(--fs-body);line-height:1.7;color:var(--muted);max-width:52ch}

/* ---------- OEM capability, three columns (prose, stops at 1000px) ---------- */
.caps3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1000px;
  margin-top:clamp(30px,3.6vw,50px)}
.caps3 div{padding:24px clamp(18px,2.4vw,32px) 24px 0}
.caps3 div+div{border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,32px)}
.caps3 h3{margin:0 0 10px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.caps3 p{margin:0;font-size:var(--fs-body);line-height:1.7;color:var(--muted)}

/* ---------- declaration band (full-bleed ink; the only dark field mid-page) ---------- */
.engNote{background:var(--ink);color:var(--paper);padding:clamp(72px,6vw,92px) 0}
.engLab{margin:0 0 18px;font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--orange)}
.engStmt{margin:0;max-width:34ch;font-family:var(--sans);font-weight:500;
  font-size:clamp(1.3rem,2.5vw,2.1rem);line-height:1.32;letter-spacing:-.005em;color:rgba(243,241,234,.96)}
.engStmt em{font-style:normal;color:var(--orange)}
.engNoteGrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,90px);align-items:end}
.engSide{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:6px}
.engMail{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:rgba(243,241,234,.62)}
.engMail a{color:rgba(243,241,234,.85);border-bottom:1px solid rgba(243,241,234,.35)}
.engMail a:hover{color:var(--orange);border-color:var(--orange)}
@media(max-width:860px){
  .engNoteGrid{grid-template-columns:1fr;align-items:start}
}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  /* The alternating rows collapse to one column: plate on top, copy under, same order both sides. */
  .mrow{grid-template-columns:1fr;gap:20px}
  .mrow:nth-child(even) .mfig{order:0}
  .caps3{grid-template-columns:1fr}
  .caps3 div{padding:22px 0}
  .caps3 div+div{border-left:0;padding-left:0}
  /* The rail stacks to ONE column at 1024 (the design source does this on this page, because the
     three platform cards carry more text than the teen page's two) -- and the 3rd card then needs a
     separator above it. Both nth-child rules are written out: the desktop .rc:not(:first-child) and
     .rc:last-child (0,2,0) outrank a bare .rc (0,1,0). */
  .rail-cols{grid-template-columns:1fr}
  .rc,.rc:nth-child(odd),.rc:nth-child(even){border-top:1px solid var(--line-2);border-left:0;
    padding:26px 0 4px}
  .rc:first-child{border-top:0}
  /* Spec table X/Y transposition: models become rows, parameters become columns (same treatment as
     the teen page). Any parameter column then shows every build's value stacked, so a horizontal
     comparison fits on one screen; the horizontal scroll only changes which parameter you look at.
     .tbl is its own grid, .tRow hands over its cells via display:contents, and the column count
     comes from --cols (written by template-parts/table.php). */
  .tbl{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--cols,6),auto);
    grid-auto-columns:minmax(146px,1fr);overflow-x:auto}
  .tbl .tRow{display:contents}
  .tbl .tRow > *{border-top:0;border-left:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  /* Only the first column is pinned - after transposing, the head row's cells ARE that column
     (the build names). Do NOT use :first-child here: that selects each row's parameter label, and
     they all land in the first ROW, so they would all stick to the left edge in a pile. */
  .tbl .tRow.head > *{position:sticky;left:0;z-index:1}
  .tbl .tRow.lab > *:first-child{background:var(--ink);color:var(--paper)}
  .js .tbl.reveal .tRow > *{opacity:0;transform:translateY(10px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .3s ease;
    transition-delay:var(--d,0ms),var(--d,0ms),0ms}
  .js .tbl.reveal.vis .tRow > *{opacity:1;transform:none}
}
@media(max-width:640px){
  .pair-imgs{grid-template-columns:1fr}
  .pair-imgs a + a{border-left:0}
  /* 2026-10（用户）：手机上图片竖排后，标签居中 + 末尾加「→」告诉客户可以点，图下按钮条隐藏。
     不做按钮样式（底色/描边太丑），保持原有 mono 小字；链接就是图片本身。 */
  .pair figcaption{display:none}
  .pair-imgs .tag{left:50%;transform:translateX(-50%);max-width:calc(100% - 24px)}
  .pair-imgs .tag::after{content:" →"}
}
@media(max-width:600px){
  .upRow{grid-template-columns:1fr;gap:14px}
  .swap{grid-template-columns:1fr;gap:8px}
  .swap i{display:none}
  .swap .to::before{content:"↓";margin-right:9px;font-weight:400;color:var(--muted)}
}