/* ═══ Agent B · Hormozi copy pass (2026-10-09) ═══════════════════════════════════════════════
   Used by tpl-art-gallery, -getting-here, -good-to-know, -terms, -about, -gallery.
   .wa-line: the WhatsApp line beside a booking CTA (012-995 3166, messages 9am to 6pm), a 48px
   tap row; on loam by default, on rice paper inside .content-section--white / --cream.
   .page-header has no grid of its own, so the ask block (.cta-banner__inner) gets its top gap here;
   its focus rings go back to bloom, because the header band is loam, not paper. */
html.v3 .wa-line { margin: 0; }
html.v3 .wa-line a { display: inline-block; padding: 11px 0; color: var(--s-loam); text-decoration: none; }
html.v3 .wa-line b { color: var(--bloom); font-weight: 600; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 4px; }
html.v3 .wa-line a:hover b { color: var(--amber-text); }
html.v3 :is(.content-section--white, .content-section--cream) .wa-line a { color: var(--ink-soft); }
html.v3 :is(.content-section--white, .content-section--cream) .wa-line b { color: var(--amber-ink); text-decoration-color: var(--amber-ink); }
html.v3 .page-header .cta-banner__inner { margin-top: 24px; }
html.v3 .page-header :focus-visible { outline-color: var(--bloom); }
/* Agent B: text links on rice paper. style.css paints .link / .story-link / .facility-card__link in
   --forest-fern (= amber-deep, 3.3:1 on paper, decorative only); amber-ink carries text at 5.3:1. */
html.v3 :is(.content-section--white, .content-section--cream) :is(.link, .story-link, .facility-card__link) { color: var(--amber-ink); }
html.v3 :is(.content-section--white, .content-section--cream) :is(.link, .story-link):hover { color: var(--ink); }

/* ═══ Round 3 (2026-10-10): one icon family in the farm's amber ═════════════════════════════════════════════
   The old theme's green chips and strokes go. Small marks on paper take amber-ink (5:1 and up), never amber-deep
   (3.2 to 3.5:1, decorative only). The icons themselves are Lucide outline glyphs at stroke 2, matched to their labels. */
html.v3 :is(.trail-detail__icon, .collection-card__icon, .transport-note__icon, .supply-item__icon, .simple-list__icon, .facility-card__icon) { background: rgb(184 116 26 / .12); color: var(--amber-ink); }
html.v3 :is(.facility-card__icon, .facility-card__link) svg { stroke: currentColor; }
html.v3 :is(.demo-detail svg, .rules-list__icon, .checklist__icon, .facility-card__link) { color: var(--amber-ink); }
html.v3 :is(.demo-detail, .trail-surprise, .terms-callout, .callout--highlight, .riding-rules__tag) { background-color: rgb(184 116 26 / .08); }
html.v3 :is(.terms-callout, .callout--highlight) { border-color: rgb(184 116 26 / .4); }
html.v3 :is(.quick-nav a, .distance-table tbody tr):hover { background-color: rgb(184 116 26 / .08); }
html.v3 .tour-flow__step-num { background: var(--amber-ink); }
html.v3 :is(.floor-card__level, .simple-list__distance, .restaurant-card__meta) { color: var(--amber-ink); }
html.v3 .terms-checklist > li::before { background: var(--amber-ink); }
/* /zh/ price card: the badges were cream text on an amber fill (1.1:1); outline them as on the homepage */
html.v3 .pricing-card .mfaf-pc__badges li { background: transparent; border: 1px solid var(--pc-rule); color: var(--pc-soft); }

/* 2026-10-14: the eight stops of the morning walk, four to a row on wide screens, one column on phones */
html.v3 .tour-flow--8 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
html.v3 .tour-flow--8 .tour-flow__step { min-width: 0; }

/* ═══ 2026-10-15: the homepage's worlds on every inner page (Albert, 2026-10-14: "apply the overall theme of the homepage") ═══
   Each content section is now a .part naming its world (data-world), exactly as the homepage's parts do; the hero and the
   close stay on loam. The grounds are flat here (js/v3.js turns the ground on the homepage only). The legacy section
   anatomy (titles, cards, lists, callouts, tables, timelines, the price card) takes the world's three colours through the
   old theme's own tokens, remapped inside the part; the eyebrow labels and the brush underline go, the titles take the
   thin display face. The six worlds are the homepage's (css/v3-home.css declares the same values on html.v3-home). */
html.v3 {
  --dusk-bg: #0F2B25;    --dusk-bg2: #16382F;    --dusk-fg: #EEF5F0;    --dusk-soft: #B7CEC3;
  --night-bg: #06070B;   --night-bg2: #121319;   --night-fg: #F4EFE2;   --night-soft: #B6B0A2;
  --dawn-bg: #E4EEE1;    --dawn-bg2: #F3F8F1;    --dawn-fg: #15301F;    --dawn-soft: #4B6655;
  --inkw-bg: #F2E9D9;    --inkw-bg2: #E7D9C2;    --inkw-fg: #1E1710;    --inkw-soft: #6A5A46;
  --lantern-bg: #8A1C12; --lantern-bg2: #A0281A; --lantern-fg: #FFE39A; --lantern-soft: #F3CB7A;
}
html.v3 .part[data-world="dusk"]    { --bg: var(--dusk-bg);    --bg2: var(--dusk-bg2);    --fg: var(--dusk-fg);    --soft: var(--dusk-soft);    --accent: var(--amber); }
html.v3 .part[data-world="night"]   { --bg: var(--night-bg);   --bg2: var(--night-bg2);   --fg: var(--night-fg);   --soft: var(--night-soft);   --accent: var(--amber); }
html.v3 .part[data-world="dawn"]    { --bg: var(--dawn-bg);    --bg2: var(--dawn-bg2);    --fg: var(--dawn-fg);    --soft: var(--dawn-soft);    --accent: var(--amber-ink); }
html.v3 .part[data-world="ink"]     { --bg: var(--inkw-bg);    --bg2: var(--inkw-bg2);    --fg: var(--inkw-fg);    --soft: var(--inkw-soft);    --accent: var(--seal); }
html.v3 .part[data-world="lantern"] { --bg: var(--lantern-bg); --bg2: var(--lantern-bg2); --fg: var(--lantern-fg); --soft: var(--lantern-soft); --accent: var(--amber); }
html.v3 .part[data-world="loam"]    { --bg: var(--loam);       --bg2: var(--loam-2);      --fg: var(--t-loam);     --soft: var(--s-loam);       --accent: var(--amber); }
html.v3 .part[data-world] { --rule: color-mix(in srgb, var(--fg) 22%, transparent); --tint: color-mix(in srgb, var(--fg) 8%, transparent);
  /* the old theme's tokens, read by style.css inside this part, follow the world */
  --forest-fern: var(--accent); --golden-earth: var(--accent); --accent-on-light: var(--accent); --lime-zest: var(--accent); --accent-on-dark: var(--accent);
  --charcoal-ink: var(--fg); --muted-stone: var(--soft); --text-muted: var(--soft); --whisper-border: var(--rule); --morning-mist: var(--bg); --pure-surface: var(--bg2);
  position: relative; background: var(--bg); color: var(--fg); padding: 36px var(--gut) 40px; }
@media (min-width: 900px)  { html.v3 .part[data-world] { padding: 60px var(--gut) 68px; } }
@media (min-width: 1100px) { html.v3 .part[data-world] { padding: 76px var(--gut) 84px; } }
/* the ink world's paper grain, as on the homepage */
html.v3 .part[data-world="ink"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../img/v3/paper-grain.webp) 0 0 / 256px 256px repeat; opacity: .9; }
html.v3 .part[data-world="ink"] > * { position: relative; z-index: 1; }
/* dawn: first light low on the left; lanterns: two warm glows in the lower corners (the homepage's devices) */
html.v3 .part[data-world="dawn"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 58% 34% at 22% 74%, rgb(255 214 140 / .5), transparent 70%); }
html.v3 .part[data-world="dawn"] > * { position: relative; z-index: 1; }
html.v3 .part[data-world="lantern"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 26% 22% at 4% 98%, rgb(255 190 80 / .22), transparent 70%), radial-gradient(ellipse 30% 26% at 92% 72%, rgb(255 190 80 / .22), transparent 70%); }
html.v3 .part[data-world="lantern"] > * { position: relative; z-index: 1; }
html.v3 .part[data-world] :focus-visible { outline-color: var(--fg); }

/* type: no eyebrow, no brush underline; the thin display face in the world's ink (the templates carry inline Fraunces rules, hence !important) */
html.v3 .part[data-world] :is(.section-label, .section-tag) { display: none; }
html.v3 .part[data-world] :is(.section-title, .section-heading, .terms-h2, .menu-category-title) { margin: 0 0 14px; font-family: var(--f-d) !important; font-weight: 300 !important; font-size: clamp(1.75rem, 6.6vw, 2.1rem) !important; line-height: 1.1 !important; letter-spacing: -.02em; color: var(--fg) !important; }
html.v3 .part[data-world] :is(.section-title, .section-heading)::after { content: none; }
@media (min-width: 1100px) { html.v3 .part[data-world] :is(.section-title, .section-heading, .terms-h2, .menu-category-title) { font-size: clamp(2.1rem, 2.6vw, 2.6rem) !important; } }
html.v3 .part[data-world] .section-subtitle { color: var(--soft); font-size: 1.0625rem; line-height: 1.5; }
@media (min-width: 1100px) { html.v3 .part[data-world] .section-subtitle { font-size: 1.125rem; } }
html.v3 .part[data-world] :is(h3, h4, .card__title, .facility-card__title, .collection-card__title, .value-card__title, .restaurant-card__name, .faq__question, .callout__title, .terms-h3, .floor-card__title, .supply-item__title, .rules-list__item strong, .checklist__item strong) { color: var(--fg); }
html.v3 .part[data-world] :is(p, li, dd, dt, td, th, label, summary, figcaption, small, blockquote, .terms-body, .prose, .included-strip__item, .timeline__desc, .tl-desc, .rules-list__detail, .checklist__text) { color: var(--fg); }
html.v3 .part[data-world] :is(.card__text, .facility-card__desc, .collection-card__desc, .value-card__desc, .restaurant-card__desc, .restaurant-card__meta, .faq__answer, .stat__label, .terms-note, .section-note, .floor-card__level, .simple-list__distance, .card__meta, .card__list, .card__list li) { color: var(--soft); }
html.v3 .part[data-world] a:not([class]), html.v3 .part[data-world] :is(.link, .story-link, .facility-card__link, .room-link) { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--fg) 45%, transparent); }
html.v3 .part[data-world] a:not([class]):hover, html.v3 .part[data-world] :is(.link, .story-link, .facility-card__link, .room-link):hover { color: inherit; text-decoration-color: currentColor; }
html.v3 .part[data-world] .wa-line a { color: var(--soft); }
html.v3 .part[data-world] .wa-line b { color: var(--fg); text-decoration-color: var(--accent); }
html.v3 .part[data-world] .wa-line a:hover b { color: var(--accent); }
html.v3 .part[data-world] .proof { color: var(--soft); }
html.v3 .part[data-world] .proof b { color: var(--fg); }
html.v3 .part[data-world] .proof .ico { color: var(--accent); }

/* cards lit by the world: a 14px frame, a hairline, one soft drop (the homepage's frame) */
html.v3 .part[data-world] :is(.card, .checklist__item, .facility-card, .collection-card, .value-card, .restaurant-card, .dt-include-card, .floor-card, .supply-item, .groups-occ__card, .groups-form, .groups-result, .room-card, .family-card, .door, .glass, .glass-bright, .meals-dinner-hero, .story-block, .trail-surprise, .demo-detail) { background: var(--bg2); border: 1px solid var(--rule); border-radius: 14px; color: var(--fg); box-shadow: 0 22px 54px -26px rgb(0 0 0 / .35); }
html.v3 .part[data-world] :is(.card, .facility-card, .collection-card, .value-card, .restaurant-card, .dt-include-card, .room-card, .door):hover { background: var(--bg2); border-color: var(--accent); box-shadow: 0 22px 54px -26px rgb(0 0 0 / .45); transform: none; }
html.v3 .part[data-world] :is(.room-card, .family-card, .door, .glass, .glass-bright, .meals-dinner-hero, .groups-result) :is(h3, .room-card__title, .family-card__label, .family-card__price, .room-card__price, .meals-dinner-hero__title) { color: var(--fg); }
html.v3 .part[data-world] :is(.room-card, .family-card, .door, .glass, .glass-bright, .meals-dinner-hero, .groups-result) :is(p, li, dd, dt, small, summary, .family-card__tagline, .room-card__specs, .room-card__amenities, .room-card__rooms, .room-card__refund, .room-card__includes, .room-card__photo-count, .room-card__details, .note, .sub, .meals-dinner-hero__time, .meals-dinner-hero__body p, .meals-dinner-hero__body li) { color: var(--soft); }
html.v3 .part[data-world] .room-card__amenities span { background: var(--tint); color: var(--fg); }
html.v3 .part[data-world] :is(.card__badge, .card__badge--included, .riding-rules__tag) { background: var(--tint); color: var(--fg); }
html.v3 .part[data-world] .card__badge--paid { background: var(--tint); color: var(--fg); }
html.v3 .part[data-world="dawn"] .card__badge--paid, html.v3 .part[data-world="ink"] .card__badge--paid { color: var(--seal); }
html.v3 .part[data-world] :is(.callout, .terms-callout, .callout--highlight) { background: var(--tint); border-color: var(--accent); border-radius: 0 14px 14px 0; color: var(--fg); }
html.v3 .part[data-world] .callout--warning { border-left-color: var(--seal); }
/* lists, icons, timelines (the homepage's beats: the hour in the accent, hairline rows) */
html.v3 .part[data-world] :is(.rules-list__item, .faq__item, .simple-list__item, .amenity-item, .timeline__item, .tl-row, .included-strip__item, .groups-list li) { border-color: var(--rule); }
html.v3 .part[data-world] :is(.rules-list__icon, .checklist__icon, .simple-list__icon, .amenity-item__icon, .facility-card__icon, .collection-card__icon, .dt-include-card__icon, .supply-item__icon, .faq__icon, .trail-detail__icon, .transport-note__icon, .demo-detail svg, .facility-card__link svg) { background: var(--tint); color: var(--accent); }
html.v3 .part[data-world] :is(.timeline__time, .tl-time) { font: 700 .875rem/1.3 var(--f-b); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
html.v3 .part[data-world] .timeline__dot { background: var(--accent); box-shadow: none; }
html.v3 .part[data-world] .tour-flow__step-num { background: var(--accent); color: var(--bg); }
html.v3 .part[data-world] .faq__question { color: var(--fg); }
html.v3 .part[data-world] .stat__number { color: var(--fg) !important; }
html.v3 .part[data-world] .terms-checklist > li::before { background: var(--accent); }
html.v3 .part[data-world] :is(.distance-table, .cancel-table) :is(th, td) { border-color: var(--rule); color: var(--fg); }
html.v3 .part[data-world] .distance-table thead { background: var(--bg2); }
html.v3 .part[data-world] .distance-table thead th { color: var(--fg); }
html.v3 .part[data-world] :is(.quick-nav a, .distance-table tbody tr):hover { background-color: var(--tint); }
html.v3 .part[data-world] .refund-partial { color: var(--accent); }
html.v3 .part[data-world="night"] :is(.refund-good, .refund-none), html.v3 .part[data-world="lantern"] :is(.refund-good, .refund-none) { color: var(--fg); }
html.v3 .part[data-world] .highlight { background: var(--tint); }
/* the price card from the renderer, in the world's colours */
html.v3 .part[data-world] .mfaf-pc { --pc-text: var(--fg); --pc-soft: var(--soft); --pc-rule: var(--rule); --pc-node: var(--accent); }
html.v3 .part[data-world] :is(.room-card, .family-card) .mfaf-pc__party, html.v3 .part[data-world] :is(.room-card, .family-card) .mfaf-pc__rows th { color: var(--fg); }
html.v3 .part[data-world] .mfaf-pc__badges li { background: transparent; border: 1px solid var(--rule); color: var(--soft); }
/* forms keep white fields with ink in them on every ground; their labels take the world's ink */
html.v3 .part[data-world] label, html.v3 .part[data-world] legend { color: var(--fg); }
html.v3 .part[data-world] :is(.rcp__hint, .groups-hint, .field-hint, small) { color: var(--soft); }
html.v3 .part[data-world] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
/* pictures in the homepage's frame */
html.v3 .part[data-world] :is(.card__img, .story-block__image, .room-card__img, .collection-card__img, .facility-card__img, .trail-image, .section-image) { border-radius: 14px; overflow: hidden; }
/* the gallery page: the filter and the grid on the night, the photos as a wall */
html.v3 .part--gallery { padding-inline: 0; }
html.v3 .part--gallery .gallery-filter { background: transparent; }
html.v3 .part--gallery .gallery-filter__btn { border-color: var(--rule); color: var(--fg); background: transparent; }
html.v3 .part--gallery .gallery-filter__btn:hover { border-color: var(--amber); color: var(--amber-text); }
html.v3 .part--gallery .gallery-filter__btn.active { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
html.v3 .part--gallery .gallery-grid { background: transparent; }
html.v3 .part--gallery .gallery-item { border-radius: 14px; }
/* seen in the 2026-10-15 sheets: the rowspan cells of the terms table were hard white; small legacy card copy under 15px */
html.v3 .part[data-world] .cancel-table td[rowspan], html.v3 .part[data-world] .cancel-table th[rowspan] { background: var(--bg2); }
html.v3 .part[data-world] :is(.collection-card__desc, .facility-card__desc, .rules-list__detail, .card__meta li, .card__list li, .restaurant-card__desc, .value-card__desc, .checklist__text, .tour-flow__step p, .trail-detail p) { font-size: .9375rem; line-height: 1.5; }
html.v3 .part[data-world] .section-subtitle a, html.v3 .part[data-world] .callout a { color: inherit; }

/* 2026-10-15, after the Codex review (r5) and the browser walk: the accents that fell under 4.5:1 on cards, the room cards'
   legacy colours, the chips that sit on photographs, the small type, the jump links' height */
html.v3 .part[data-world="ink"]     { --accent: #A52C1B; }        /* the seal one step darker: 4.7:1 on the ink cards */
html.v3 .part[data-world="lantern"] { --accent: var(--amber-hot); }   /* 4.9:1 on the lantern cards */
html.v3 .part[data-world] .room-card details summary.room-card__btn, html.v3 .part[data-world] .room-card details summary.room-card__btn:hover, html.v3 .part[data-world] .room-card details summary.room-card__btn:focus-visible, html.v3 .part[data-world] .room-card details[open] summary.room-card__btn { color: var(--on-amber); }
html.v3 .part[data-world] .room-card__specs li strong { color: var(--soft); }
html.v3 .part[data-world] .room-card__photo-count { color: #fff; }
html.v3 .part[data-world] :is(.room-card__badge, .trail-feature__badge, .meals-dinner-hero__badge) { background: rgb(8 8 8 / .64); color: #fff; }
html.v3 .part[data-world] :is(.demo-detail__free, .restaurant-card__pick) { background: var(--tint); color: var(--accent); }
html.v3 .part[data-world] .stepper__btn[disabled] { color: var(--soft); opacity: .55; }
html.v3 .part[data-world] .quick-nav a { display: inline-flex; align-items: center; min-height: 44px; }
html.v3 .part[data-world] :is(.room-card__refund, .room-card__includes, .room-card__rooms, .rcp__hint, .room-card__highlight, .dinner-tier__note, .dinner-tiers__intro, .dinner-tiers__footnote, .dinner-menu__plus, .dinner-menu__items li, .card__text, .mfaf-pc__party, .mfaf-pc__unit, .mfaf-pc__rows thead th, .mfaf-pc__row-note td, .cancel-table td, .distance-table td, .terms-h3-sub, .included-strip__item) { font-size: .9375rem; }
html.v3 .part[data-world] :is(.cancel-table th, .meals-dinner-hero__badge, .meals-dinner-hero__time, .dinner-menu__label, .dinner-tiers__eyebrow, .dinner-tier__pax, .dinner-tier__numLabel) { font-size: .8125rem; }
html.v3 .part[data-world] .room-card__rooms { color: var(--fg); }   /* "4 rooms like this": the soft read 4.4:1 on its chip */

/* ═══ 2026-10-15b: Rooms & Rates, rebuilt for skimming (Albert: "the prices per columns are all jumbled up") ═══
   One left edge per section (heading, text and cards share .content-section__wide); the value stack before the number;
   the renderer's price table reflowed so each party gets its own line above two equal night columns (no squeezed
   third column); the rooms as rows on a desktop so every price panel lines up in one column, photo beside text on a
   tablet, stacked on a phone. Every number is still the renderer's. */
html.v3 .rr .content-section__wide { max-width: 1180px; }
html.v3 .rr-head { max-width: 46rem; margin: 0 0 28px; }
html.v3 .rr-head .section-title { margin-bottom: 10px; }
html.v3 .rr-head__sub { margin: 0; color: var(--soft) !important; font-size: 1.0625rem; line-height: 1.55; }
@media (min-width: 1100px) { html.v3 .rr-head { margin-bottom: 36px; } html.v3 .rr-head__sub { font-size: 1.125rem; } }
html.v3 .rr-ico { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the whole stay, named: five groups, one tick list each */
html.v3 .rr-inc { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 32px; }
html.v3 .rr-inc__group { padding-top: 16px; border-top: 1px solid var(--rule); }
html.v3 .rr-inc__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 1.0625rem/1.3 var(--f-b); color: var(--fg); }
html.v3 .rr-inc__h .rr-ico { color: var(--accent); }
html.v3 .rr-inc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
html.v3 .rr-inc__list li { position: relative; padding-left: 24px; font-size: 1rem; line-height: 1.4; color: var(--fg); }
html.v3 .rr-inc__list li::before { content: ""; position: absolute; left: 4px; top: .2em; width: 5px; height: 10px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
html.v3 .rr-note { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 46rem; font-size: .9375rem; line-height: 1.5; color: var(--soft) !important; }

/* three kinds of room: a card each (one column on a phone, label beside price on a tablet, three across on a desktop) */
html.v3 .rr .family-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; }
html.v3 .rr .family-card { display: grid; gap: 10px; align-content: start; padding: 22px 20px; border-radius: 14px; }
html.v3 .rr .family-card__label { margin: 0; font: 300 1.625rem/1.1 var(--f-d); letter-spacing: -.01em; text-transform: none; color: var(--fg); }
html.v3 .rr .family-card__tagline { margin: 0; font: 400 1rem/1.45 var(--f-b); color: var(--soft); }
html.v3 .rr .family-card__price { display: block; margin-top: 6px; text-decoration: none; color: inherit; }
html.v3 .rr .family-card__jump { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
html.v3 .rr .family-card__jump:hover { text-decoration-color: currentColor; }
html.v3 .rr .family-card .mfaf-pc__extras, html.v3 .rr .family-card .mfaf-pc__nett { display: none; }   /* said once, under the three cards */
@media (min-width: 640px) and (max-width: 1099px) {
  html.v3 .rr .family-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 28px; grid-template-areas: "label price" "line price" "jump price"; }
  html.v3 .rr .family-card__label { grid-area: label; } html.v3 .rr .family-card__tagline { grid-area: line; }
  html.v3 .rr .family-card__jump { grid-area: jump; align-self: end; } html.v3 .rr .family-card__price { grid-area: price; margin: 0; }
}
@media (min-width: 1100px) { html.v3 .rr .family-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } html.v3 .rr .family-card { padding: 26px 24px; grid-template-rows: auto auto 1fr auto; } }
html.v3 .rr-facts { margin: 22px 0 0; max-width: 54rem; font-size: .9375rem; line-height: 1.6; color: var(--soft) !important; }
html.v3 .rr-facts :is(.rooms-intro__extras, .rooms-intro__nett) { display: inline; font: inherit; color: var(--fg); }
html.v3 .rr-promise { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 18px 20px; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; background: var(--tint); max-width: 54rem; }
html.v3 .rr-promise .rr-ico { color: var(--accent); margin-top: 2px; }
html.v3 .rr-promise p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fg); }
html.v3 .rr-promise a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
html.v3 .rr-promise .rr-promise__busy { margin-top: 8px; color: var(--soft); }

/* the price table, reflowed: night heads once, then each party on its own line over two equal columns */
html.v3 .rr .mfaf-pc--card { display: block; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; width: 100%; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__rows :is(thead, tbody, tr) { display: contents; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__rows thead th:first-child { display: none; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__rows thead th { width: auto; padding: 0 0 8px; border: 0; font: 600 .8125rem/1.3 var(--f-b); letter-spacing: .02em; color: var(--soft) !important; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__rows tbody th { grid-column: 1 / -1; padding: 12px 0 6px; border-top: 1px solid var(--rule); font: 400 .9375rem/1.35 var(--f-b); color: var(--soft) !important; word-break: normal; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__rows td { width: auto; padding: 0 0 4px; border: 0; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__price strong { font-size: 1.625rem; color: var(--fg); }
html.v3 .rr .mfaf-pc--card .mfaf-pc__price--peak strong { color: var(--fg); }
html.v3 .rr .mfaf-pc--card .mfaf-pc__unit { display: none; }   /* the column heads already say "night" */
html.v3 .rr .mfaf-pc--card :is(.mfaf-pc__extras, .mfaf-pc__nett) { display: inline; font-size: .9375rem; color: var(--soft); }
html.v3 .rr .mfaf-pc--card .mfaf-pc__extras { display: block; margin-top: 14px; }
html.v3 .rr .mfaf-pc--card .mfaf-pc__nett { display: block; margin-top: 2px; font-weight: 600; color: var(--fg); }

/* the rooms: rows */
html.v3 .rr .room-list { display: grid; gap: 18px; }
html.v3 .rr .room-card { display: grid; grid-template-columns: 1fr; border-radius: 14px; overflow: hidden; }
html.v3 .rr .room-card__img { aspect-ratio: 4 / 3; border-radius: 0; }
html.v3 .rr .room-card__img img { width: 100%; height: 100%; object-fit: cover; }
html.v3 .rr .room-card__body { display: block; padding: 20px 20px 4px; }
html.v3 .rr .room-card__header { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
html.v3 .rr .room-card__title { margin: 0; font: 400 1.375rem/1.2 var(--f-d); letter-spacing: -.01em; color: var(--fg); }
html.v3 .rr .room-card__rooms { padding: 4px 10px; border-radius: 999px; background: var(--tint); font: 500 .8125rem/1.3 var(--f-b); color: var(--fg); white-space: nowrap; }
html.v3 .rr .room-card__highlight { margin: 0 0 12px; padding: 0; background: none; border-radius: 0; font: 600 .9375rem/1.4 var(--f-b); font-style: normal; color: var(--accent); }
html.v3 .rr .room-card__specs { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
html.v3 .rr .room-card__specs li { padding: 7px 0; border-top: 1px solid var(--rule); font-size: .9375rem; line-height: 1.4; color: var(--fg); }
html.v3 .rr .room-card__specs li strong { font-weight: 600; color: var(--soft); }
html.v3 .rr .room-card__footer { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 0; padding: 16px 20px 20px; border-top: 0; }
html.v3 .rr .room-card__price { display: block; text-decoration: none; color: inherit; }
html.v3 .rr .room-card__refund { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--soft); }
html.v3 .rr .room-card__picker { display: block; width: 100%; }
@media (min-width: 640px) {
  html.v3 .rr .room-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "img body" "img buy"; grid-template-rows: auto 1fr; }
  html.v3 .rr .room-card__img { grid-area: img; position: relative; aspect-ratio: auto; min-height: 240px; }
  html.v3 .rr .room-card__img img { position: absolute; inset: 0; }
  html.v3 .rr .room-card__body { grid-area: body; padding: 22px 24px 4px; }
  html.v3 .rr .room-card__footer { grid-area: buy; padding: 14px 24px 22px; }
}
@media (min-width: 1100px) {
  html.v3 .rr .room-list { gap: 20px; }
  html.v3 .rr .room-card { grid-template-columns: 340px minmax(0, 1fr) 340px; grid-template-areas: "img body buy"; grid-template-rows: auto; }
  html.v3 .rr .room-card__body { padding: 26px 28px; }
  html.v3 .rr .room-card__footer { padding: 26px 26px 24px; border-left: 1px solid var(--rule); }
}

/* said once under the three cards, so not inside them; the photo-count chip sits on a photograph */
html.v3 .rr .family-card .mfaf-pc--card :is(.mfaf-pc__extras, .mfaf-pc__nett) { display: none; }
/* card copy colours must beat the kit's soft-text rule for cards, html.v3 .part[data-world] :is(.room-card …) :is(p, li, …,
   .meals-dinner-hero__body p) = (0,5,2); found by the Codex r6 review */
html.v3 .part[data-world].rr .room-card .room-card__photo-count { background: rgb(8 8 8 / .64); color: #fff; font-size: .8125rem; }
html.v3 .part[data-world].rr .room-card :is(.room-card__rooms, .room-card__specs li, .mfaf-pc__nett) { color: var(--fg); }
html.v3 .part[data-world].rr .room-card .room-card__specs li strong { color: var(--soft); }
html.v3 .part[data-world].rr .room-card .room-card__highlight { color: var(--accent); }
html.v3 .nowrap { white-space: nowrap; }

/* the close: one centred column, small print smaller */
html.v3 .rr-close .cta-banner__inner { max-width: 42rem; }
html.v3 .rr-close .cta-banner__quote { margin: 10px auto 0; font-style: italic; }
html.v3 .rr-close__small { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--s-loam); }
html.v3 .rr-close .rooms-group-link { max-width: none; margin: 0; }

/* questions folded, answers on a tap (Albert 2026-10-15, Groups "Straight answers"); native <details>, so it works without
   JavaScript and the browser's find-in-page still opens the right answer. Two columns from a tablet up, like the home's. */
html.v3 .qa-list { display: grid; grid-template-columns: 1fr; gap: 0 40px; align-items: start; max-width: 1180px; border-top: 1px solid var(--rule); }
@media (min-width: 900px) { html.v3 .qa-list { grid-template-columns: 1fr 1fr; border-top: 0; } html.v3 .qa-list .qa:nth-child(-n+2) { border-top: 1px solid var(--rule); } }
html.v3 .qa { border-bottom: 1px solid var(--rule); }
html.v3 .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 4px; cursor: pointer; list-style: none; font: 600 1.0625rem/1.35 var(--f-b); color: var(--fg); }
html.v3 .qa summary::-webkit-details-marker { display: none; }
html.v3 .qa summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
html.v3 .qa[open] summary::after { transform: translateY(2px) rotate(225deg); }
html.v3 .qa summary:hover { color: var(--accent); }
html.v3 .qa summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 6px; }
html.v3 .qa p { margin: 0; padding: 0 4px 18px; max-width: 40em; font-size: 1rem; line-height: 1.6; color: var(--soft) !important; }
@media (prefers-reduced-motion: reduce) { html.v3 .qa summary::after { transition: none; } }

/* ═══ 2026-10-15c: one edge, one alignment, even rows (Albert: "why some words are here and there?") ═══
   Seen in the sheets: sections set in .content-section__inner (960–1000px, centred) sat 90px to the right of the
   sections and grids set in __wide (1180px), so the left edge jumped from part to part, sometimes inside one part.
   Now every part has the one 1180px frame; what sits in the narrow container keeps its 1000px measure but starts on the
   same left edge, and running text keeps a readable line. Centred paragraphs inside cards read left; the masonry
   (ragged columns) becomes rows of equal cards, the photo cards first. */
html.v3 .part[data-world] > .content-section__inner { max-width: 1180px; margin-inline: auto; }
html.v3 .part[data-world] > .content-section__inner > * { max-width: 1000px; margin-left: 0; margin-right: auto; }
html.v3 .part[data-world] :is(.content-section__inner, .content-section__wide) > :is(p, .section-subtitle, .section-note) { max-width: 46rem; margin-left: 0; text-align: left; }
html.v3 .part[data-world] :is(.section-title, .section-heading) { text-align: left; margin-left: 0; }
html.v3 .part[data-world] :is(.value-card, .collection-card, .tour-flow__step) { text-align: left; }
html.v3 .part[data-world] .collection-card__icon, html.v3 .part[data-world] .tour-flow__step-num { margin-left: 0; }
html.v3 .part[data-world] .groups-stack__h { margin: 0 0 12px; font: 600 1.125rem/1.3 var(--f-b); letter-spacing: 0; color: var(--fg); }
html.v3 .part[data-world] .masonry { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; align-items: start; }
html.v3 .part[data-world] .masonry > .card { display: flex; flex-direction: column; width: auto; margin: 0; }
html.v3 .part[data-world] .masonry > .card:not(:has(.card__img)) { order: 2; }
/* a zero-height item across the whole row, between the photo cards and the text-only ones, so the text-only cards start a row of
   their own instead of stretching to a photo card's height beside it */
html.v3 .part[data-world] .masonry::after { content: ""; order: 1; grid-column: 1 / -1; height: 0; margin-top: -20px; }
/* 2026-10-20 (Albert: "i want my animal images to be fully shown"): no box of our own; each card is as tall as its picture, so a
   parrot photographed upright keeps its head and its tail. Rows align at the top. */
html.v3 .part[data-world] .masonry .card__img { aspect-ratio: auto; }
html.v3 .part[data-world] .masonry .card__img :is(picture, img) { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
@media (max-width: 599px) { html.v3 .part[data-world] .masonry { grid-template-columns: 1fr; } }
/* the supper menu: two columns of menus from a tablet up, each table the full width of its column (the inline 700px cap
   left the right half of the page empty) */
html.v3 .menu-cols { max-width: none !important; }
html.v3 .menu-cols > * { break-inside: avoid; }
@media (min-width: 900px) { html.v3 .menu-cols { columns: 2; column-gap: 40px; } }
html.v3 .menu-cols .distance-table { width: 100%; max-width: none !important; }
/* the morning tour's animals are a photo, a name and a place: two across on a phone, so 22 birds are not 22 screens */
@media (max-width: 599px) {
  html.v3 .part[data-world] .masonry--animals { grid-template-columns: 1fr 1fr; gap: 12px; }
  html.v3 .part[data-world] .masonry--animals .card__body { padding: 12px 12px 14px; }
  html.v3 .part[data-world] .masonry--animals :is(.card__title, h3) { font-size: 1rem; }
}
html.v3 .menu-cols .distance-table td:last-child { white-space: nowrap; }
html.v3 .part[data-world] .quick-nav { justify-content: flex-start; }   /* a header-nav rule leaked flex-end onto it */
/* 2026-10-19: the line under an animal / dish / place page that points back to the page it belongs to */
html.v3 .blog-post__more { margin-top: 28px; font-size: 1.0625rem; color: var(--s-loam); }
html.v3 .blog-post__more a { color: var(--bloom); text-decoration: underline; text-underline-offset: 3px; }
/* 2026-10-20 (website-qa at 320px): the price tables on the groups, day-trip and Chinese pages and the food page's distance
   tables are wider than the smallest phones; they scroll inside their card instead of pushing the whole page sideways */
@media (max-width: 380px) {
  html.v3 .mfaf-pc__rows, html.v3 .distance-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.v3 .mfaf-pc { max-width: 100%; min-width: 0; }
}
/* the blog / archive cards likewise: the featured picture whole, whatever its shape */
html.v3 .blog-card__img-link, html.v3 .blog-card__img { aspect-ratio: auto; height: auto; max-height: none; }
html.v3 .blog-card__img { display: block; width: 100%; height: auto; object-fit: contain; }
/* 2026-10-20: the horse feature card. Its photo is upright (a child on the horse); a wide 3:2 box cut the rider's head off.
   The picture keeps its own shape, beside the text from a tablet up, above it on a phone. */
html.v3 .mammal-highlight .card__img { aspect-ratio: auto; }
html.v3 .mammal-highlight .card__img :is(picture, img) { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
@media (min-width: 700px) {
  html.v3 .mammal-highlight { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; }
  html.v3 .mammal-highlight .card__img { align-self: stretch; }
  html.v3 .mammal-highlight .card__img :is(picture, img) { height: 100%; object-fit: cover; object-position: center top; }
}
/* 2026-10-20: the morning-tour hero is an upright cockatoo portrait; a centred crop on a wide screen cut its crest off */
html.v3 .page-template-tpl-morning-tour .page-hero__bg img { object-position: center 18%; }

/* 2026-10-20 design review (every page, phone + desktop): the quick, systemic ones */
html.v3 .part[data-world="ink"] .pill:not(.pill--fill) { color: var(--fg); border-color: currentColor; }   /* 404: cream-on-beige button was near invisible */
html.v3 .blog-card__img { aspect-ratio: 4 / 3; object-fit: cover; }                                          /* blog grid: one thumbnail shape, not 410px beside 173px */
@media (max-width: 599px) { html.v3 .menu-cols .distance-table td:last-child { white-space: normal; width: 36%; } }   /* supper menu: dish names no longer break over five lines */
@media (max-width: 599px) { html.v3 .bbq-tier-grid, html.v3 .lunch-tier-grid { grid-template-columns: 1fr !important; } }   /* food price cards one-up on phones: "RM 25" never breaks */
html.v3 .page-template-tpl-art-gallery .story-block > div:first-child { padding: 24px 20px; }                /* "Where the art comes from": text off the card edge */