/* MFAF v3 — "the lake lights up" (2026-10-09).
   One warm ground (loam), one light (the farm's amber LED ribbon), ink on rice paper for reading.
   Loaded on every page except the booking flow and Front Desk (mfaf_v3_active() in functions.php).
   Inner pages: this sits on top of style.css — the old tokens are remapped first, then the shared
   primitives are restyled. The homepage loads v3-home.css instead of style.css.
   Brief: design/redesign-studio/builds/FINAL-BRIEF.md */

html.v3 {
  --loam: #0E0C09;         /* warm black ground */
  --loam-2: #171310;       /* a raised surface on loam */
  --loam-3: #221B14;
  --amber: #F5A623;        /* the ribbon along the lake */
  --amber-hot: #FFC94D;    /* its core */
  --amber-deep: #B8741A;   /* amber that can carry text on paper */
  --ember: #7A4200;
  --bloom: #FFF3C9;        /* warm white: prices, the one focused thing */
  --t-loam: #F2EBDD;       /* text on loam */
  --s-loam: #CDBFA3;       /* muted text on loam */
  --paper: #F4EDDF;        /* rice paper */
  --paper-2: #FBF7EE;
  --ink: #17130D;
  --ink-soft: #5E5547;
  --rule-paper: rgb(23 19 13 / .14);
  --rule-loam: rgb(245 166 35 / .28);
  --veil: color-mix(in srgb, var(--loam) 80%, transparent);
  --seal: #B5321F;         /* the red seal */
  --amber-ink: #8A5611;    /* amber for small text and links on paper (5.5:1); amber-deep stays decorative */
  --on-amber: #0E0C09; --amber-text: var(--amber); --amber-hot-text: var(--amber-hot); --dim-loam: #8f877a; --loam-4: #4A4540;   /* ink on amber, amber as ink, the dim and the fourth loam: the sky flips these (2026-10-28) */
  --wa: #137A3A;           /* WhatsApp green that carries white text (5.5:1) */
  --f-d: "Albert Sans", "Avenir Next", "Segoe UI", sans-serif;
  --f-b: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, sans-serif;
  --f-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --gut: 20px;
  --bar: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --brush-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 9c22-6 44-5 60-3 18 2 34 1 54-4' fill='none' stroke='%2317130D' stroke-width='5.5' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M8 11.5c30-4 60-3 100-7' fill='none' stroke='%2317130D' stroke-width='1.5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  --brush-amber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 9c22-6 44-5 60-3 18 2 34 1 54-4' fill='none' stroke='%23F5A623' stroke-width='5.5' stroke-linecap='round' opacity='.9'/%3E%3Cpath d='M8 11.5c30-4 60-3 100-7' fill='none' stroke='%23F5A623' stroke-width='1.5' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");

  /* the old theme's tokens, pointed at the new world (style.css uses them ~740 times) */
  --deep-canopy: var(--loam);
  --forest-fern: var(--amber-deep);
  --timber-bark: #5B3A1A;
  --golden-earth: var(--amber-deep);
  --lime-zest: var(--amber);
  --morning-mist: var(--paper);
  --charcoal-ink: var(--ink);
  --muted-stone: var(--ink-soft);
  --whisper-border: var(--rule-paper);
  --pure-surface: var(--paper-2);
  --text-muted: var(--ink-soft);
  --accent-on-dark: var(--amber);
  --accent-on-light: var(--amber-deep);
}
@media (min-width: 1100px) { html.v3 { --gut: clamp(40px, 6vw, 110px); --bar: 76px; } }

/* ---------- the sky (2026-10-28, Albert: C by the clock) ----------
   dawn by day, loam after dark (js/v3-sky.js sets data-sky before paint; the header pill holds a choice). Paint tokens
   (amber fills, amber tints) stay; ink tokens flip. The home page keeps its five worlds: its pill only records the choice. */
html.v3:not(.v3-home)[data-sky="dawn"] {
  --loam: #E4EEE1; --loam-2: #F4F7F1; --loam-3: #FFFFFF; --loam-4: #C9D3C7;
  --t-loam: #15301F; --s-loam: #4B6655; --dim-loam: #5A655D; --bloom: #15301F;
  --amber-text: var(--amber-ink); --amber-hot-text: #6E4208; --on-amber: #0E0C09;
  --rule-loam: rgb(21 48 31 / .16); --veil: rgb(228 238 225 / .85);
  color-scheme: light;
}
/* style.css paints the inner-page header text in literal cream on --deep-canopy (= --loam), which dawn turns pale: the title read
   at ~1:1 on 81 pages (rehearsal walk 10-29). The loam ink tokens flip with the sky (cream at night, unchanged; dark by day). */
html.v3 .page-header .page-header__title { color: var(--t-loam); }
html.v3 .page-header :is(.page-header__subtitle, .page-header__breadcrumb, .page-header__breadcrumb a) { color: var(--s-loam); }
html.v3 .page-header .page-header__breadcrumb span { color: var(--dim-loam); }
html.v3 .pill.v3bar__sky { min-height: 44px; width: 44px; padding: 0; flex: none; color: var(--amber-text); }   /* .pill comes later: without the extra class its padding left the icon 0px wide */
html.v3 .v3bar__sky svg { display: block; }

/* ---------- base ---------- */
html.v3 *, html.v3 *::before, html.v3 *::after { box-sizing: border-box; }   /* style.css carried this reset; the homepage no longer loads it */
html.v3 { background: var(--loam); color-scheme: dark; font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }
@media (min-width: 1100px) { html.v3 { font-size: 19px; } }
html.v3 body { margin: 0; background: var(--loam); color: var(--t-loam); font: 400 1rem/1.5 var(--f-b); overflow-x: clip; -webkit-font-smoothing: antialiased; }
html.v3 img, html.v3 video { display: block; max-width: 100%; }
html.v3 [lang^="zh"] { font-family: var(--f-zh); }
html.v3 :focus-visible { outline: 2px solid var(--bloom); outline-offset: 3px; border-radius: 6px; }
html.v3 .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.v3 .skip { position: absolute; left: 12px; top: -120px; z-index: 300; padding: 14px 18px; border-radius: 999px; background: var(--amber); color: var(--on-amber); font-weight: 600; }
html.v3 .skip:focus { top: 12px; }
html.v3 .num { font-family: var(--f-d); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; }
html.v3 .ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html.v3 .ico--fill { fill: currentColor; stroke: none; }

/* type: a thin geometric display face, a sturdy reading face */
html.v3 h1, html.v3 h2, html.v3 .h2, html.v3 .section-title, html.v3 .section-heading, html.v3 .page-hero__title, html.v3 .page-header__title,
html.v3 .cta-banner__title, html.v3 .dt-hero__title, html.v3 .fraunces, html.v3 .space, html.v3 .hero-display {
  font-family: var(--f-d) !important; font-weight: 300 !important; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
html.v3 h3, html.v3 h4, html.v3 h5 { font-family: var(--f-b); font-weight: 600; line-height: 1.25; }
html.v3 button, html.v3 input, html.v3 select, html.v3 textarea { font-family: var(--f-b); }

/* pills: the only control shape */
html.v3 .pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid rgb(245 166 35 / .75); border-radius: 999px; white-space: nowrap;
  background: transparent; color: var(--bloom); font: 600 1rem/1 var(--f-b); text-decoration: none; cursor: pointer; transition: background-color .25s, box-shadow .35s var(--ease), color .25s; }
html.v3 .pill:hover { background: rgb(245 166 35 / .14); }
html.v3 .pill--fill { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
html.v3 .pill--fill:hover { background: var(--amber-hot); box-shadow: 0 8px 30px -4px rgb(245 166 35 / .55); }
html.v3 .pill--big { min-height: 56px; padding: 0 30px; font-size: 1.125rem; }
html.v3 .pill--ink { border-color: rgb(23 19 13 / .5); color: var(--ink); }
html.v3 .pill--ink:hover { background: rgb(23 19 13 / .06); }
html.v3 .pill:active { transform: translateY(1px); }
html.v3 .proof { display: flex; align-items: flex-start; gap: 8px; font-size: 1rem; color: var(--s-loam); }
html.v3 .proof b { color: var(--bloom); font-weight: 600; }
html.v3 .proof .ico { color: var(--amber-text); margin-top: .1em; }

/* ---------- the bar ---------- */
html.v3 .v3bar { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--bar); display: flex; align-items: center; gap: 12px; padding: 0 var(--gut); transition: background-color .3s, box-shadow .3s; }
html.v3 .v3bar.is-solid { background: color-mix(in srgb, var(--loam) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--rule-loam); }
html.v3 .v3brand { display: flex; align-items: center; gap: 9px; margin-right: auto; min-height: 48px; text-decoration: none; color: var(--bloom); }
html.v3 .v3brand__mark { width: 52px; height: 52px; flex: none; background: var(--amber); -webkit-mask: url(../img/v3/logo-mask.webp) center / contain no-repeat; mask: url(../img/v3/logo-mask.webp) center / contain no-repeat; }
/* the name in the teacher's brush (round 3, 2026-10-10: every stroke of 林 back, the four characters on one line) */
html.v3 .v3brand__ink { width: 92px; height: 32px; flex: none; background: var(--amber); -webkit-mask: url(../img/v3/name-ink-mask-800.webp) center / contain no-repeat; mask: url(../img/v3/name-ink-mask-800.webp) center / contain no-repeat; }
html.v3 .v3brand__name { display: none; flex: none; white-space: nowrap; font: 300 1.0625rem/1.12 var(--f-d); letter-spacing: -.005em; }
@media (min-width: 440px) and (max-width: 1099px) { html.v3 .v3brand__name { display: block; font-size: .8125rem; } }   /* 440: below it the sky pill + Menu leave no room for the name (390 px overflowed 42 px) */
html.v3 .v3nav { display: none; }
html.v3 .v3bar__cta { display: none; }
html.v3 .v3bar__menu { min-height: 48px; padding: 0 16px; }
@media (min-width: 1100px) {
  html.v3 .v3brand__mark { width: 64px; height: 64px; }
  html.v3 .v3brand__ink { width: 124px; height: 43px; }
  html.v3 .v3brand__name { display: block; font-size: 1.125rem; }
  html.v3 .v3nav { display: flex; align-items: center; gap: 2px; }
  html.v3 .v3nav > a, html.v3 .v3nav__dd > button { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font: 400 1rem/1 var(--f-b); color: var(--t-loam); text-decoration: none; cursor: pointer; white-space: nowrap; }
  html.v3 .v3nav > a:hover, html.v3 .v3nav__dd > button:hover, html.v3 .v3nav > a[aria-current="page"], html.v3 .v3nav__dd.is-open > button { color: var(--bloom); background: rgb(245 166 35 / .12); }
  html.v3 .v3nav__dd { position: relative; }
  html.v3 .v3nav__dd > button::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  html.v3 .v3nav__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; padding: 8px; border-radius: 14px; background: var(--loam-2); border: 1px solid var(--rule-loam); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .8); display: none; }
  html.v3 .v3nav__dd.is-open .v3nav__menu { display: grid; }
  html.v3 .v3nav__menu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--t-loam); text-decoration: none; font-size: 1rem; }
  html.v3 .v3nav__menu a:hover, html.v3 .v3nav__menu a[aria-current="page"] { background: rgb(245 166 35 / .12); color: var(--bloom); }
  html.v3 .v3nav__zh { font-family: var(--f-zh); }
  html.v3 .v3bar__cta { display: inline-flex; margin-left: 8px; }
  html.v3 .v3bar__menu { display: none; }
}
@media (min-width: 1100px) and (max-width: 1279px) { html.v3 .v3brand__name { display: none; } }

/* the phone menu: a native dialog that fills the screen */
html.v3 .v3sheet { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 14px var(--gut) 32px; border: 0; background: var(--loam); color: var(--t-loam); }
html.v3 .v3sheet::backdrop { background: var(--loam); }
html.v3 .v3sheet[open] { display: flex; flex-direction: column; overflow-y: auto; }
html.v3 .v3sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
html.v3 .v3sheet__close { min-height: 48px; padding: 0 16px; }
html.v3 .v3sheet__nav { display: grid; margin: 22px 0 auto; justify-content: stretch; padding: 0; }   /* style.css's bare nav rule pushed it right */
html.v3 .v3sheet__nav a { display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--rule-loam); text-decoration: none; font: 300 1.5rem/1.1 var(--f-d); color: var(--bloom); }
html.v3 .v3sheet__nav a[lang] { font-family: var(--f-zh); font-weight: 400; }
html.v3 .v3sheet__group { padding: 18px 0 6px; font: 600 .8125rem/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-text); }
html.v3 .v3sheet__group + a, html.v3 .v3sheet__sub a { font-size: 1.25rem; min-height: 52px; }
html.v3 .v3sheet__cta { margin-top: 24px; min-height: 56px; }
html.v3 .v3sheet__reach { margin-top: 18px; display: grid; gap: 4px; color: var(--s-loam); font-size: .9375rem; }
html.v3 .v3sheet__reach a { color: var(--t-loam); text-decoration: none; }

/* ---------- the footer ---------- */
html.v3 .v3foot { position: relative; display: grid; gap: 30px; padding: 44px var(--gut) 124px; border-top: 1px solid var(--rule-loam); background: var(--loam); color: var(--s-loam); font-size: 1rem; }
html.v3 .v3foot a { color: var(--t-loam); text-decoration: none; }
html.v3 .v3foot a:hover { color: var(--amber-text); }
html.v3 .v3foot__brand { display: grid; gap: 10px; justify-items: start; }
html.v3 .v3foot__ink { width: 160px; height: 56px; background: var(--amber); -webkit-mask: url(../img/v3/name-ink-mask-800.webp) left center / contain no-repeat; mask: url(../img/v3/name-ink-mask-800.webp) left center / contain no-repeat; }
html.v3 .v3foot__name { color: var(--bloom); font: 300 1.375rem/1.2 var(--f-d); margin: 0; }
html.v3 .v3foot__line, html.v3 .v3foot__addr { margin: 0; line-height: 1.5; }
html.v3 .v3foot__reach { display: grid; gap: 2px; margin-top: 6px; }
html.v3 .v3foot__reach a { display: flex; align-items: center; gap: 12px; min-height: 48px; }
html.v3 .v3foot__reach .ico { width: 22px; height: 22px; color: var(--amber-text); }
html.v3 .v3foot__reach em { font-style: normal; color: var(--s-loam); margin-left: 6px; }
html.v3 .v3foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
html.v3 .v3foot__col { display: grid; gap: 2px; align-content: start; }
html.v3 .v3foot__col h3 { margin: 0 0 8px; font: 600 .8125rem/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-text); }
html.v3 .v3foot__col a { min-height: 40px; display: flex; align-items: center; }
html.v3 .v3foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 22px; border-top: 1px solid var(--rule-loam); font-size: .9375rem; }
html.v3 .v3foot__social { display: flex; gap: 8px; }
html.v3 .v3foot__social a { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule-loam); align-items: center; justify-content: center; }
html.v3 .v3foot__social svg { width: 20px; height: 20px; fill: currentColor; }
@media (min-width: 900px) { html.v3 .v3foot { grid-template-columns: 1.3fr 1fr; align-items: start; padding-bottom: 60px; } html.v3 .v3foot__bottom { grid-column: 1 / -1; } }

/* floating: the booking pill and WhatsApp, hidden over the footer */
html.v3 .v3float { position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 90; display: grid; gap: 10px; justify-items: end; transition: opacity .3s, transform .3s; }
html.v3 .v3float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }
html.v3 .v3float__book { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 52px; height: 52px; padding: 0; border-radius: 999px; background: var(--amber); color: var(--on-amber); font: 600 1rem/1 var(--f-b); text-decoration: none; box-shadow: 0 12px 34px -10px rgb(245 166 35 / .7); }
html.v3 .v3float__cal { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
html.v3 .v3float__book span { display: none; }
@media (min-width: 1100px) { html.v3 .v3float__book { width: auto; height: auto; min-height: 48px; padding: 0 18px; } html.v3 .v3float__book span { display: inline; } }
html.v3 .v3float__wa { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 12px 30px -8px rgb(0 0 0 / .6); }
html.v3 .v3float__wa svg { width: 28px; height: 28px; fill: currentColor; }
html.v3 body.mfaf-booking-flow .v3float__book { display: none; }

/* ---------- inner pages: hero on loam ---------- */
html.v3 .page-hero, html.v3 .groups-hero { position: relative; min-height: 0; display: grid; align-items: end; justify-content: start; text-align: left; padding: calc(var(--bar) + 64px) var(--gut) 44px; background: var(--loam); color: var(--t-loam); overflow: hidden; isolation: isolate; }
html.v3 .page-hero__bg { position: absolute; inset: 0; z-index: -1; }
html.v3 .page-hero__bg picture, html.v3 .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
html.v3 .page-hero__bg img { filter: brightness(.6) saturate(.85); }
html.v3 .page-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--loam) 0, color-mix(in srgb, var(--loam) 60%, transparent) 40%, color-mix(in srgb, var(--loam) 30%, transparent) 100%); }
html.v3 .page-hero__content { position: relative; max-width: 40rem; display: grid; gap: 12px; justify-items: start; }
html.v3 .page-hero__breadcrumb { margin: 0; font-size: .9375rem; color: var(--amber-text); letter-spacing: .04em; }
html.v3 .page-hero__breadcrumb a { color: inherit; }
html.v3 .page-hero__title { margin: 0; font-size: clamp(2.2rem, 8.5vw, 2.8rem); color: var(--bloom); text-shadow: 0 0 34px rgb(245 166 35 / .25); }
html.v3 .page-hero__subtitle, html.v3 .groups-hero__line { margin: 0; font-size: 1.125rem; color: var(--s-loam); max-width: 34em; }
html.v3 .page-hero .btn-primary, html.v3 .page-hero .btn-whatsapp { margin-top: 6px; }
@media (min-width: 1100px) {
  html.v3 .page-hero, html.v3 .groups-hero { min-height: 60vh; padding-bottom: 64px; }
  html.v3 .page-hero__title { font-size: clamp(3rem, 4.3vw, 4.25rem); }
  html.v3 .page-hero__subtitle, html.v3 .groups-hero__line { font-size: 1.3125rem; }
}

/* ---------- inner pages: reading on rice paper ---------- */
html.v3 .content-section { padding: clamp(3rem, 8vw, 5.5rem) var(--gut); }
html.v3 .content-section--white { background: var(--paper-2); color: var(--ink); }
html.v3 .content-section--cream { background: var(--paper); color: var(--ink); }
html.v3 .content-section--dark { background: var(--loam-2); color: var(--t-loam); }
html.v3 .content-section__inner { max-width: 1000px; margin-inline: auto; }
html.v3 .content-section__wide { max-width: 1180px; margin-inline: auto; }
html.v3 .section-label, html.v3 .section-tag, html.v3 .journey-tag { display: flex; align-items: center; gap: .6em; margin: 0 0 10px; font: 600 .8125rem/1.2 var(--f-b); letter-spacing: .14em; text-transform: uppercase; color: var(--amber-ink); }
/* focus must be visible on paper too (bloom vanishes there) */
html.v3 :is(.content-section--white, .content-section--cream, .page-header, .groups-form) :focus-visible { outline-color: var(--ink); }
html.v3 .section-label::before, html.v3 .section-tag::before { content: ""; width: .7em; height: .7em; flex: none; background: var(--seal); }
html.v3 .content-section--dark .section-label, html.v3 .content-section--dark .section-tag { color: var(--amber-text); }
html.v3 .section-title, html.v3 .section-heading { margin: 0 0 16px; font-size: clamp(1.9rem, 6.5vw, 2.3rem) !important; color: var(--ink); }
html.v3 .content-section--dark .section-title, html.v3 .content-section--dark .section-heading, html.v3 .section-heading--light, html.v3 .section-title:not(.section-title--dark) { color: var(--bloom); }
html.v3 .content-section--white .section-title, html.v3 .content-section--cream .section-title { color: var(--ink); }
html.v3 .section-title--dark::after, html.v3 .section-heading::after { content: ""; display: block; width: 4.6em; height: .34em; margin-top: .38em; background: var(--brush-ink) left center / 100% 100% no-repeat; }
html.v3 .content-section--dark .section-heading::after, html.v3 .section-heading--light::after { background-image: var(--brush-amber); }
html.v3 .section-subtitle { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-soft); max-width: 34em; }
html.v3 .content-section--dark .section-subtitle { color: var(--s-loam); }
@media (min-width: 1100px) { html.v3 .section-title, html.v3 .section-heading { font-size: clamp(2.3rem, 3.1vw, 3rem) !important; } html.v3 .section-subtitle { font-size: 1.1875rem; } }
html.v3 .content-section p { line-height: 1.55; }
html.v3 .content-section a:not([class]) { color: var(--amber-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.v3 .content-section--dark a:not([class]) { color: var(--amber-text); }

/* cards and lists */
html.v3 .card, html.v3 .checklist__item, html.v3 .facility-card, html.v3 .collection-card, html.v3 .value-card, html.v3 .restaurant-card, html.v3 .dt-include-card, html.v3 .floor-card, html.v3 .supply-item { background: var(--paper-2); border: 1px solid var(--rule-paper); border-radius: 18px; color: var(--ink); box-shadow: none; }
html.v3 .content-section--white .card, html.v3 .content-section--white .checklist__item, html.v3 .content-section--white .facility-card, html.v3 .content-section--white .collection-card, html.v3 .content-section--white .value-card, html.v3 .content-section--white .restaurant-card, html.v3 .content-section--white .dt-include-card { background: var(--paper); }
html.v3 .card:hover, html.v3 .facility-card:hover { transform: none; box-shadow: 0 10px 40px -16px rgb(23 19 13 / .35); border-color: rgb(184 116 26 / .45); }
html.v3 .card__title, html.v3 .facility-card__title, html.v3 .collection-card__title, html.v3 .value-card__title { color: var(--ink); }
html.v3 .card__text, html.v3 .facility-card__desc, html.v3 .collection-card__desc, html.v3 .value-card__desc { color: var(--ink-soft); }
html.v3 .card__badge { font-family: var(--f-b); letter-spacing: .06em; font-weight: 600; font-size: .75rem; }
html.v3 .card__badge--included { background: rgb(184 116 26 / .14); color: var(--amber-ink); }
html.v3 .card__badge--paid { background: rgb(181 50 31 / .1); color: var(--seal); }
html.v3 .callout { border-left: 3px solid var(--amber); background: rgb(245 166 35 / .09); border-radius: 0 14px 14px 0; color: var(--ink); }
html.v3 .callout--warning { border-left-color: var(--seal); background: rgb(181 50 31 / .06); }
html.v3 .callout__title { color: var(--ink); }
html.v3 .rules-list__item, html.v3 .faq__item, html.v3 .simple-list__item { border-color: var(--rule-paper); color: var(--ink); }
html.v3 .rules-list__icon, html.v3 .checklist__icon, html.v3 .simple-list__icon, html.v3 .amenity-item__icon, html.v3 .facility-card__icon, html.v3 .collection-card__icon, html.v3 .dt-include-card__icon, html.v3 .supply-item__icon { color: var(--amber-deep); }
html.v3 .timeline__time, html.v3 .tl-time { font-family: var(--f-d); font-weight: 400; font-size: 1.125rem; color: var(--amber-ink); }
html.v3 .timeline__dot { background: var(--amber); box-shadow: 0 0 10px 2px rgb(245 166 35 / .5); }
html.v3 .timeline__desc, html.v3 .tl-desc { color: var(--ink); }
html.v3 .faq__question { font-family: var(--f-b); font-weight: 600; font-size: 1.0625rem; color: var(--ink); }
html.v3 .faq__answer { color: var(--ink-soft); }
html.v3 .faq__group-title { font-family: var(--f-d); font-weight: 400; color: var(--ink); }
html.v3 .stat__number { font-family: var(--f-d) !important; font-weight: 300 !important; color: var(--ink); }
html.v3 .stat__label { color: var(--ink-soft); }
html.v3 .content-section--dark .stat__number { color: var(--bloom); }
html.v3 .distance-table th, html.v3 .distance-table td, html.v3 .cancel-table th, html.v3 .cancel-table td { border-color: var(--rule-paper); color: var(--ink); }
html.v3 .distance-table thead { background: var(--loam-2); }
html.v3 .distance-table thead th { color: var(--bloom); font-family: var(--f-b); letter-spacing: .08em; }
/* the Food page's dinner card is dark now; its template styles the title in charcoal */
html.v3 .meals-dinner-hero__title { color: var(--bloom); }
html.v3 .meals-dinner-hero__time, html.v3 .meals-dinner-hero__body p, html.v3 .meals-dinner-hero__body li { color: var(--s-loam); }
html.v3 .refund-good { color: #2E6B2E; } html.v3 .refund-partial { color: var(--amber-deep); } html.v3 .refund-none { color: var(--seal); }
html.v3 .highlight { background: rgb(245 166 35 / .22); }
html.v3 .menu-category-title, html.v3 .terms-h2, html.v3 .terms-h3 { color: var(--ink); }
html.v3 .terms-body, html.v3 .terms-note, html.v3 .prose { color: var(--ink); }
html.v3 .included-strip__item { color: var(--ink); }

/* glass cards from the old green world become lamp-lit loam cards (their text was built for a dark ground) */
html.v3 .room-card, html.v3 .door, html.v3 .glass, html.v3 .glass-bright, html.v3 .family-card, html.v3 .dt-price-card, html.v3 .groups-result, html.v3 .meals-dinner-hero { background: var(--loam-2); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--rule-loam); color: var(--t-loam); box-shadow: 0 16px 50px -20px rgb(245 166 35 / .25); }
html.v3 .room-card:hover, html.v3 .door:hover { background: var(--loam-3); border-color: rgb(245 166 35 / .5); transform: none; }
html.v3 .room-card h3, html.v3 .room-card__title, html.v3 .door h3, html.v3 .family-card__label, html.v3 .dt-price-card__label, html.v3 .dt-price-card__amount, html.v3 .family-card__price, html.v3 .room-card__price { color: var(--bloom); }
/* everything muted inside a dark card was written for a dark ground: keep it legible there */
html.v3 :is(.room-card, .door, .family-card, .dt-price-card, .groups-result, .meals-dinner-hero, .glass, .glass-bright) :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, .dt-price-card__note, .note, .sub) { color: var(--s-loam); }
html.v3 :is(.room-card, .door, .family-card, .dt-price-card, .groups-result, .meals-dinner-hero) :is(a:not([class]), .room-link, .family-card__jump, summary) { color: var(--amber-text); }
html.v3 .family-card__jump { color: var(--amber-text); }
html.v3 .door .door__cta { color: var(--on-amber); }
/* price tables inside a narrow dark card (the 中文 hero card, room cards): smaller figures so the party label keeps its words */
html.v3 :is(.pricing-card, .room-card, .family-card) .mfaf-pc__price strong { font-size: 1.25rem; }
html.v3 :is(.pricing-card, .room-card, .family-card) .mfaf-pc__rows thead th + th, html.v3 :is(.pricing-card, .room-card, .family-card) .mfaf-pc__rows td { width: 27%; padding-left: 8px; }
html.v3 .mfaf-pc__rows tbody th { word-break: keep-all; }
/* the group calculator's two-column form on a phone: inputs must be allowed to shrink */
html.v3 .groups-form__grid > *, html.v3 .groups-field { min-width: 0; }
html.v3 .groups-field input, html.v3 .groups-field select, html.v3 .groups-field textarea { width: 100%; min-width: 0; box-sizing: border-box; }

/* buttons */
html.v3 .btn-primary, html.v3 .btn-cta-full, html.v3 .btn-submit, html.v3 .groups-submit, html.v3 .dt-hero__btn, html.v3 .btn-rooms, html.v3 .btn-book, html.v3 .btn-book-mobile, html.v3 .gallery-filter__btn.active { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--amber); color: var(--on-amber); font: 600 1rem/1 var(--f-b); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background-color .25s, box-shadow .35s var(--ease); }
html.v3 .btn-primary:hover, html.v3 .btn-cta-full:hover, html.v3 .btn-submit:hover, html.v3 .groups-submit:hover, html.v3 .btn-rooms:hover { background: var(--amber-hot); box-shadow: 0 8px 30px -4px rgb(245 166 35 / .55); transform: none; }
/* style.css pins .btn-primary to the old green with !important (a VikBooking-era rule); match its weight */
html.v3 .btn-primary, html.v3 .btn-primary:link, html.v3 .btn-primary:visited { background-color: var(--amber) !important; border-color: var(--amber) !important; color: var(--on-amber) !important; }
html.v3 .btn-primary:hover, html.v3 .btn-primary:focus, html.v3 .btn-primary:active { background-color: var(--amber-hot) !important; border-color: var(--amber-hot) !important; color: var(--on-amber) !important; }
/* .btn-whatsapp is the templates' generic action class; WhatsApp green only when it really goes to WhatsApp */
html.v3 .btn-whatsapp, html.v3 .cta-banner__btn, html.v3 .page-hero .btn-primary, html.v3 .page-hero__content .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--amber); color: var(--on-amber); font: 600 1rem/1 var(--f-b); letter-spacing: 0; text-transform: none; text-decoration: none; }
html.v3 .btn-whatsapp:hover, html.v3 .cta-banner__btn:hover { background: var(--amber-hot); box-shadow: 0 8px 30px -4px rgb(245 166 35 / .55); }
html.v3 .btn-whatsapp[href*="wa.me"], html.v3 .btn-whatsapp[href*="whatsapp"] { background: var(--wa); color: #fff; }
html.v3 .btn-whatsapp[href*="wa.me"]:hover, html.v3 .btn-whatsapp[href*="whatsapp"]:hover { background: #179447; box-shadow: none; }
html.v3 .btn-review, html.v3 .room-link, html.v3 .story-link, html.v3 .facility-card__link, html.v3 .dt-include-card--link, html.v3 .gallery-filter__btn { font-family: var(--f-b); }
html.v3 .gallery-filter__btn { border-radius: 999px; border: 1px solid var(--rule-paper); color: var(--ink); background: transparent; min-height: 44px; padding: 0 16px; }

/* forms (the group calculator and friends) */
html.v3 .content-section input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), html.v3 .content-section select, html.v3 .content-section textarea { font: 400 1rem/1.3 var(--f-b); color: var(--ink); background: #fff; border: 1px solid rgb(23 19 13 / .32); border-radius: 12px; padding: 12px 14px; min-height: 48px; }
html.v3 .content-section label { color: var(--ink); }
html.v3 .groups-field label, html.v3 .groups-fieldset legend { font-weight: 600; }

/* the 中文 page reuses the old home's sections: hero wash, green glass, the two doors, the USP grid */
html.v3 .hero .bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--loam) 92%, transparent) 0%, color-mix(in srgb, var(--loam) 70%, transparent) 35%, color-mix(in srgb, var(--loam) 30%, transparent) 65%, color-mix(in srgb, var(--loam) 60%, transparent) 100%); }
html.v3 .hero .tag { color: var(--amber-text); font-family: var(--f-b); letter-spacing: .14em; }
html.v3 .hero .sub { color: var(--t-loam); border-left-color: rgb(245 166 35 / .5); font-family: var(--f-b); }
html.v3 .hero-headline, html.v3 .h1-line, html.v3 .h1-sub-line { color: var(--bloom); }
html.v3 .pricing-card, html.v3 .usp-card, html.v3 .glass-pill, html.v3 .rating-pill { background: var(--loam-2); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--rule-loam); color: var(--t-loam); box-shadow: 0 16px 50px -20px rgb(245 166 35 / .25); }
html.v3 .pricing-card h3, html.v3 .usp-card h3 { color: var(--bloom); }
html.v3 .pricing-card .note, html.v3 .usp-card p { color: var(--s-loam); }
html.v3 .pricing-card .mfaf-pc, html.v3 .usp-card .mfaf-pc { --pc-text: var(--bloom); --pc-soft: var(--s-loam); --pc-rule: var(--rule-loam); --pc-node: var(--amber); }
html.v3 .usp-card .icon { border-color: var(--rule-loam); background: rgb(245 166 35 / .1); color: var(--amber-text); }
html.v3 .usp-link { color: var(--bloom); }
html.v3 .section-dark { background: var(--loam-2); color: var(--t-loam); padding-inline: var(--gut); }
html.v3 .section-dark .section-title, html.v3 .section-dark .section-title em { color: var(--bloom); }
html.v3 .door__cta { background: var(--amber); color: var(--on-amber); border-radius: 999px; font-family: var(--f-b); font-weight: 600; }
html.v3 .door__cta svg { stroke: currentColor; }

/* the itinerary band (style.css paints it a hard-coded green gradient) */
html.v3 .section-journey { background: var(--loam-2); color: var(--t-loam); padding: clamp(3rem, 8vw, 6rem) var(--gut); }
html.v3 .journey-header h2 { color: var(--bloom); }
html.v3 .journey-header h2 em { font-family: var(--f-d); font-style: normal; color: var(--amber-text); text-shadow: 0 0 30px rgb(245 166 35 / .3); }
html.v3 .journey-desc { color: var(--s-loam); }
html.v3 .day-rows { background: color-mix(in srgb, var(--loam) 50%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--rule-loam); border-radius: 16px; }
html.v3 .day-label { color: var(--bloom); }
html.v3 .tl-row { border-bottom-color: var(--rule-loam); }
html.v3 .tl-row.highlight { background: rgb(245 166 35 / .08); }
html.v3 .tl-time { color: var(--amber-text); }
html.v3 .tl-desc { color: var(--t-loam); }
html.v3 .tl-desc a { color: var(--amber-text); }
/* the Day Trip date picker (css/day-trip.css pins it to the old greens with !important) */
html.v3 .ui-datepicker .ui-datepicker-header { background: var(--loam-2) !important; color: var(--bloom) !important; }
html.v3 .ui-datepicker .ui-datepicker-prev:hover, html.v3 .ui-datepicker .ui-datepicker-next:hover { background: var(--amber) !important; border-color: var(--amber) !important; }
html.v3 .ui-datepicker .ui-datepicker-calendar td a:hover { background: rgb(245 166 35 / .14) !important; color: var(--ink) !important; border-color: rgb(184 116 26 / .5) !important; }
html.v3 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a, html.v3 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today span.ui-state-default { border-color: var(--amber-deep) !important; color: var(--ink) !important; }
html.v3 .ui-datepicker .ui-datepicker-calendar td a.ui-state-active, html.v3 .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a { background: var(--amber) !important; color: var(--on-amber) !important; border-color: var(--amber) !important; box-shadow: 0 4px 12px -4px rgb(245 166 35 / .6) !important; }
html.v3 #ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-close { background: var(--amber) !important; color: var(--on-amber) !important; border-color: var(--amber) !important; }
html.v3 #ui-datepicker-div .ui-datepicker-buttonpane .ui-datepicker-close:hover { background: var(--amber-hot) !important; border-color: var(--amber-hot) !important; }
html.v3 .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover { color: var(--amber-deep) !important; }
html.v3 .vbo-showprc-wrapper::before { background: var(--amber); }
html.v3 .vbo-results-head.vbo-results-head-showprc { color: var(--ink); font-family: var(--f-d); font-weight: 300; }
html.v3 .vbo-showprc-staydetails-party { background: var(--loam-2) !important; color: var(--bloom) !important; font-family: var(--f-b) !important; letter-spacing: 0 !important; }

/* the closing band on inner pages */
html.v3 .cta-banner { position: relative; isolation: isolate; padding: clamp(3.5rem, 8vw, 6rem) var(--gut); background: var(--loam); color: var(--t-loam); text-align: center; }
html.v3 .cta-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 100%, rgb(245 166 35 / .16), transparent 70%); }
html.v3 .cta-banner__inner { max-width: 40rem; margin-inline: auto; display: grid; gap: 14px; justify-items: center; }
html.v3 .cta-banner__title { margin: 0; font-size: clamp(2rem, 6.5vw, 2.6rem) !important; color: var(--bloom); text-shadow: 0 0 34px rgb(245 166 35 / .25); }
html.v3 .cta-banner__text, html.v3 .cta-banner__subtitle, html.v3 .cta-banner__quote { color: var(--s-loam); max-width: 34em; margin-inline: auto; }
html.v3 .cta-banner__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
@media (min-width: 1100px) { html.v3 .cta-banner__title { font-size: clamp(2.6rem, 3.6vw, 3.4rem) !important; } }

/* the price card from the renderer (mu-plugins/mfaf-price-card.php), on paper or on loam */
html.v3 .mfaf-pc { --pc-text: var(--ink); --pc-soft: var(--ink-soft); --pc-rule: var(--rule-paper); --pc-node: var(--amber-deep); display: grid; gap: 12px; margin: 0; font-family: var(--f-b); color: var(--pc-text); }
html.v3 .content-section--dark .mfaf-pc, html.v3 .cta-banner .mfaf-pc, html.v3 .room-card .mfaf-pc, html.v3 .door .mfaf-pc, html.v3 .family-card .mfaf-pc, html.v3 .dt-price-card .mfaf-pc, html.v3 .mfaf-pc--onloam { --pc-text: var(--bloom); --pc-soft: var(--s-loam); --pc-rule: var(--rule-loam); --pc-node: var(--amber); }
html.v3 .mfaf-pc__title, html.v3 .mfaf-pc__includes-h, html.v3 .mfaf-pc__examples-h { margin: 6px 0 0; font: 600 1rem/1.3 var(--f-b); color: var(--pc-text); }
html.v3 .mfaf-pc__rows { width: 100%; border-collapse: collapse; }
html.v3 .mfaf-pc__rows th, html.v3 .mfaf-pc__rows td { padding: 12px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--pc-rule); }
html.v3 .mfaf-pc__rows thead th { border-top: 0; padding: 0 0 6px; font: 400 .875rem/1.25 var(--f-b); color: var(--pc-soft); }
html.v3 .mfaf-pc__rows thead th + th, html.v3 .mfaf-pc__rows td { padding-left: 12px; width: 31%; }
html.v3 .mfaf-pc__rows tbody th { font-weight: 400; font-size: 1rem; line-height: 1.35; color: var(--pc-text); }
html.v3 .mfaf-pc__price strong { display: block; font-family: var(--f-d); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--pc-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.v3 .mfaf-pc__unit { display: block; margin-top: 3px; font-size: .8125rem; color: var(--pc-soft); }
html.v3 .mfaf-pc__row-note td { padding: 0 0 10px; border-top: 0; font-size: .9375rem; color: var(--pc-soft); }
html.v3 .mfaf-pc__extras, html.v3 .mfaf-pc__peak-label, html.v3 .mfaf-pc__nett, html.v3 .mfaf-pc__refund, html.v3 .mfaf-pc__times, html.v3 .mfaf-pc__proof, html.v3 .mfaf-pc__banner { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--pc-soft); }
html.v3 .mfaf-pc__proof { color: var(--pc-text); }
html.v3 .mfaf-pc__includes, html.v3 .mfaf-pc__footnotes, html.v3 .mfaf-pc__examples { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
html.v3 .mfaf-pc__includes li, html.v3 .mfaf-pc__footnotes li, html.v3 .mfaf-pc__examples li { position: relative; padding-left: 18px; font-size: 1rem; line-height: 1.4; color: var(--pc-text); }
html.v3 .mfaf-pc__footnotes li { color: var(--pc-soft); font-size: .9375rem; }
html.v3 .mfaf-pc__includes li::before, html.v3 .mfaf-pc__footnotes li::before, html.v3 .mfaf-pc__examples li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--pc-node); box-shadow: 0 0 8px rgb(245 166 35 / .6); }
html.v3 .mfaf-pc__badges { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
html.v3 .mfaf-pc__badges li { font-size: .8125rem; line-height: 1.2; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--pc-rule); background: transparent; color: var(--pc-soft); }   /* 2026-10-20: the old lime chip no longer shows through outside a world section (zh) */
html.v3 .mfaf-pc__example strong { color: var(--pc-text); }
html.v3 .mfaf-pc__example-detail { color: var(--pc-soft); font-size: .9375rem; }
@media (min-width: 1100px) { html.v3 .mfaf-pc__price strong { font-size: 1.75rem; } }

/* reveal (style.css animates .reveal; keep it honest when main.js is absent) */
html.v3.no-main .reveal { opacity: 1; transform: none; }

/* ---------- still mode ---------- */
@media (prefers-reduced-motion: reduce) { html.v3 { scroll-behavior: auto; } html.v3 .pill, html.v3 .v3bar { transition: none; } }

/* ---------- 2026-10-09, from the DESIGN.md audit: contrast, targets, a font net ---------- */
html.v3 a.btn-whatsapp[href*="wa.me"]:hover, html.v3 a.btn-whatsapp[href*="whatsapp"]:hover, html.v3 .wa-btn:hover { background: #0F6A32; color: #fff; }   /* real WhatsApp links only; white on it stays above 4.5:1. Quote buttons keep the amber hover */
html.v3 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), html.v3 select, html.v3 textarea { border-color: rgb(23 19 13 / .42); }
/* style.css still names the retired faces (Fraunces, Space Grotesk, Source Sans 3, Yellowtail) in ~320 rules;
   where v3 does not override a class, the text falls to the reading face instead of a system default */
html.v3 :where(p, li, td, th, dd, dt, label, summary, figcaption, small, blockquote, address, caption) { font-family: var(--f-b); }
html.v3 :where(h1, h2, h3, h4, .h2) :where(span, small, em, strong, a) { font-family: inherit; }
/* the Day Trip hero was a fixed 420/520px box with overflow hidden: a four-line headline clipped at both ends on phones */
html.v3 .dt-hero { height: auto; min-height: 420px; padding: calc(var(--bar) + 28px) 0 40px; }
@media (min-width: 769px) { html.v3 .dt-hero { min-height: 520px; } }
/* Getting Here: the "last 4 km" list was a two-column grid that squeezed its first words into a sliver on phones */
html.v3 .road-warning__list li { display: block; }
html.v3 .road-warning__list li strong { display: inline; }
/* the room cards' "Book Now" summary came out amber on amber at 13px: a blank bar */
html.v3 .room-card__btn { display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--on-amber); font: 600 1rem/1 var(--f-b); letter-spacing: 0; text-transform: none; }
/* every state names both colours: style.css paints the hover/open background in the old canopy green, which v3 maps to loam */
html.v3 .room-card details summary.room-card__btn { background: var(--amber); color: var(--on-amber); }
html.v3 .room-card details summary.room-card__btn:hover, html.v3 .room-card details summary.room-card__btn:focus-visible, html.v3 .room-card details[open] summary.room-card__btn { background: var(--amber-hot); color: var(--on-amber); }
/* ---------- 2026-10-09, from the agy phone walk ---------- */
/* the room cards' price table printed its party labels in ink on loam (1:1); the dark cards take the loam set of card colours */
html.v3 :is(.room-card, .family-card, .door) .mfaf-pc { --pc-text: var(--bloom); --pc-soft: var(--s-loam); --pc-rule: var(--rule-loam); --pc-node: var(--amber); }
html.v3 .room-card .mfaf-pc__party, html.v3 .room-card .mfaf-pc__rows th { color: var(--bloom); }
html.v3 .v3foot__cols a { display: inline-flex; align-items: center; min-height: 44px; }
html.v3 .cancel-table th { font-size: .8125rem; }
html.v3 :is(.breadcrumb, .breadcrumbs, .page-hero__breadcrumb, .page-header__breadcrumb, .page-hero__crumbs) a { display: inline-block; padding: 11px 0; }

/* ═══ Round 3 (2026-10-10): fixes from the stay-page audit (Day Trip, Rooms, Groups) ═════════════════════════════
   Measured after: include and amenity icons 5.0:1, tier labels 16.6:1, chips 12.1:1, the picker hint 6.7:1. */
/* the old theme's green and sand tokens resolve to amber-ink on the light sections, where small marks need 5:1 */
html.v3 :is(.content-section--white, .content-section--cream) { --forest-fern: var(--amber-ink); --golden-earth: var(--amber-ink); }
/* Day Trip: the include icons sit on an amber disc (they were hard-coded lime green), the hero veil is the loam */
html.v3 .dt-include-card__icon, html.v3 .amenity-item__icon { background: rgb(184 116 26 / .12); color: var(--amber-ink); }
html.v3 .dt-include-card__icon svg { stroke: currentColor; width: 28px; height: 28px; }
html.v3 .dt-include-card--link:hover { border-color: rgb(184 116 26 / .45); box-shadow: 0 12px 30px -16px rgb(138 86 17 / .4); }
html.v3 .dt-hero__overlay { background: linear-gradient(to bottom, color-mix(in srgb, var(--loam) 55%, transparent), color-mix(in srgb, var(--loam) 76%, transparent)); }
html.v3 .journey-tag { color: var(--amber-text); }
html.v3 .vbdivsearch .vbo-search-submit .btn.vbo-pref-color-btn { background: var(--amber) !important; border-color: var(--amber) !important; color: var(--on-amber) !important; }
/* Rooms: the tier rows, chips and spec labels on the dark cards were near-invisible (1.0 to 2.5:1) */
html.v3 :is(.room-card, .family-card) .mfaf-pc__party, html.v3 :is(.room-card, .family-card) .mfaf-pc__rows th { color: var(--bloom); }
html.v3 .family-card .mfaf-pc__rows td { padding-left: 14px; }
html.v3 .room-card__amenities span { background: rgb(245 166 35 / .14); color: var(--t-loam); }
html.v3 .room-card__specs li strong { color: var(--s-loam); }
html.v3 .rcp :is(.rcp__hint, small, em) { color: var(--ink-soft); }
html.v3 :is(.content-section, .rcp) :is(input, select, textarea) { color-scheme: light; }
html.v3 .content-section :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--amber-ink); }
/* the review links take the words around them, underlined (not the browser's own blue on the dark grounds) */
html.v3 :is(a[href^="https://www.google.com/travel/hotels/"], a[href^="https://www.facebook.com/mantinfarmstay/reviews"]) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
html.v3 .vbdivsearch .vbo-search-submit .btn.vbo-pref-color-btn:hover { background: var(--amber-hot) !important; border-color: var(--amber-hot) !important; }
/* the old theme uppercases every nav link on the inner pages; the bar reads the same on every page */
html.v3 .v3nav > a, html.v3 .v3nav__dd > button { text-transform: none; letter-spacing: 0; }
html.v3 .family-card .mfaf-pc__price strong { font-size: 1.375rem; white-space: nowrap; }   /* the narrow family cards: two prices side by side must not touch */

/* 2026-10-20 (design review): at 1100–1339px the bar overflowed on inner pages ("Check your dates" clipped at 1311px on a
   1280 viewport) — tighter item padding and no brand name until the wide screens. */
@media (min-width: 1100px) and (max-width: 1339px) {
  html.v3 .v3nav > a, html.v3 .v3nav__dd > button { padding: 0 8px; }
  html.v3 .v3brand__name { display: none; }
}