/**
 * Modernist reskin for the Experience landing pages (/experiences/*).
 *
 * These eleven templates carry a lot of bespoke, genuinely useful layout —
 * timelines, season bars, price ladders, festival calendars, an activity
 * matrix. Rewriting that markup would have thrown the content away to gain
 * nothing, so this sheet keeps the structure from style.css and replaces the
 * design language on top of it: Archivo everywhere, the Modernist palette,
 * radius 0, hairlines instead of glows, accent reserved for wayfinding.
 *
 * It loads AFTER style.css and after the Modernist bundle, and everything is
 * scoped to .page-shell so nothing here can reach the rest of the site.
 */

/* ---------------------------------------------------------------------
   1. Token remap. style.css reads 30 custom properties; redefining them
      on the wrapper converts the bulk of the page in one move, which is
      why the rest of this file is short.
   --------------------------------------------------------------------- */
.page-shell {
	--orange-700: var(--color-accent-700);
	--orange-600: var(--color-accent);
	--orange-500: var(--color-accent);
	--orange-400: var(--color-accent);
	--amber-400: var(--color-accent);
	--gold-300: var(--color-accent);

	--ink: var(--color-text);
	--ink-deep: var(--color-text);
	--ink-soft: var(--color-neutral-700);
	--ink-mute: var(--color-neutral-600);

	--cream: var(--color-bg);
	--cream-2: var(--color-surface);
	--card: var(--color-surface);
	--glass: var(--color-surface);
	--glass-strong: var(--color-surface);
	--glass-line: var(--color-neutral-300);
	--line: var(--color-neutral-300);
	--line-soft: var(--color-neutral-300);
	--hero-dark: var(--color-text);

	--shadow-card: var(--shadow-sm);
	--shadow-glow: var(--shadow-md);
	--grad-brand: linear-gradient(0deg, var(--color-accent), var(--color-accent));

	--r-lg: 0px;
	--r-md: 0px;
	--r-sm: 0px;

	--font-display: var(--font-heading);
	--font-body: "Archivo", system-ui, sans-serif;
	--font-mono: "Archivo", system-ui, sans-serif;
	--ease-out: var(--ease);

	background: var(--color-bg);
	color: var(--color-text);
	font-family: "Archivo", system-ui, sans-serif;
}

/* Radius 0 is a rule, not a preference (§2). A scoped sweep is far safer
   here than hunting 290 legacy selectors for stray corner values. */
.page-shell *,
.page-shell *::before,
.page-shell *::after { border-radius: 0 !important; }

/* No frosted glass, no coloured glow — neither exists in the system. */
.page-shell * {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.page-shell p { font-weight: 400; }

/* ---------------------------------------------------------------------
   2. Hero. Flat photograph, bottom-weighted scrim, type at the left edge.
   --------------------------------------------------------------------- */
.page-shell .lp-hero {
	min-height: clamp(460px, 72vh, 680px);
	padding: clamp(96px, 13vh, 150px) var(--pm) clamp(40px, 6vh, 64px);
}
.page-shell .lp-hero__glow { display: none; }
.page-shell .lp-hero__veil {
	background: linear-gradient(to top,
		rgba(32, 30, 29, .86) 0%,
		rgba(32, 30, 29, .58) 34%,
		rgba(32, 30, 29, .22) 66%,
		rgba(32, 30, 29, .34) 100%);
}
.page-shell .lp-hero__inner { max-width: var(--measure); }
.page-shell .lp-hero h1 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(2.3rem, 5.4vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	max-width: 16ch;
}
.page-shell .lp-hero__sub {
	font-weight: 400;
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.55;
	max-width: 54ch;
	color: rgba(255, 255, 255, .88);
}
.page-shell .lp-breadcrumb {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.page-shell .lp-eyebrow {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
}
.page-shell .lp-eyebrow::before { background: var(--color-accent); width: 22px; }

/* Stat strip under the hero: square, hairline, no glass. */
.page-shell .lp-chips {
	background: rgba(32, 30, 29, .55);
	border: 1px solid rgba(255, 255, 255, .22);
}
.page-shell .chip { border-right-color: rgba(255, 255, 255, .18); }
.page-shell .chip b {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -.02em;
}
.page-shell .chip span {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em;
}

/* ---------------------------------------------------------------------
   3. Buttons — square, Archivo 800, uppercase label.
   --------------------------------------------------------------------- */
.page-shell .btn,
.page-shell .btn-ghost,
.page-shell .btn-light {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 15px 24px;
	box-shadow: none;
	transition: background-color 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease);
}
.page-shell .btn {
	background: var(--color-accent);
	color: #fff;
	border: 1px solid var(--color-accent);
}
.page-shell .btn:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.page-shell .btn-ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
}
.page-shell .btn-ghost:hover { background: rgba(255, 255, 255, .12); transform: none; }
.page-shell .btn-light {
	background: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-bg);
}
.page-shell .btn-light:hover { background: #fff; }
.page-shell .btn:hover,
.page-shell .btn-light:hover { transform: none; }

/* ---------------------------------------------------------------------
   4. Section rhythm and headings.
   --------------------------------------------------------------------- */
.page-shell .lp-wrap {
	max-width: calc(var(--measure) + (var(--pm) * 2));
	padding: var(--sec) var(--pm);
}
.page-shell .lp-wrap.tight { border-top: 1px solid var(--color-neutral-300); }
.page-shell .lp-kicker {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--color-accent);
}
.page-shell .lp-kicker::before { background: var(--color-accent); width: 22px; }
.page-shell h2.lp-h2 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(1.9rem, 3.8vw, 3rem);
	line-height: 1.04;
	letter-spacing: -.03em;
}
.page-shell .lp-head p {
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--color-neutral-700);
}
.page-shell h3,
.page-shell .feature__body h3,
.page-shell .numitem h3,
.page-shell .mini-card h3,
.page-shell .subcard h3,
.page-shell .benefit h3,
.page-shell .tl-card h3,
.page-shell .rstep__card h3 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	letter-spacing: -.02em;
	line-height: 1.12;
}

/* ---------------------------------------------------------------------
   5. Panels, cards and labels. Surface fill, hairline edge, no float.
   --------------------------------------------------------------------- */
.page-shell .lcard,
.page-shell .stat,
.page-shell .mini-card,
.page-shell .benefit,
.page-shell .tl-card,
.page-shell .rstep__card,
.page-shell .flow__card,
.page-shell .cal__card,
.page-shell .lede__card,
.page-shell .value-note,
.page-shell .dcard,
.page-shell .bignum,
.page-shell .faq details,
.page-shell .exp-card {
	background: var(--color-surface);
	border: 1px solid var(--color-neutral-300);
	box-shadow: none;
}
.page-shell .lcard:hover,
.page-shell .mini-card:hover,
.page-shell .exp-card:hover { box-shadow: var(--shadow-md); transform: none; }

.page-shell .tag,
.page-shell .lede__tag,
.page-shell .feature__num,
.page-shell .numbadge,
.page-shell .lcard__k,
.page-shell .rstep__k,
.page-shell .flow__k,
.page-shell .cal__tag,
.page-shell .subcard .dist,
.page-shell .tl-card__year,
.page-shell .stat span,
.page-shell .bignum span,
.page-shell .feature__meta span,
.page-shell .lede__card span {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.page-shell .numbadge,
.page-shell .feature__num {
	background: var(--color-accent);
	color: #fff;
	font-size: 12px;
}
.page-shell .numbadge::before,
.page-shell .feature__num::before { display: none; }
.page-shell .stat b,
.page-shell .bignum b,
.page-shell .lcard b,
.page-shell .feature__meta b,
.page-shell .lede__card b,
.page-shell .flow__stat b {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: -.02em;
}
.page-shell .stat::before,
.page-shell .lcard::before,
.page-shell .lede__card::before,
.page-shell .cal__card::before,
.page-shell .flow__badge { background: var(--color-accent); }
.page-shell .stat__icon,
.page-shell .benefit__ic,
.page-shell .rstep__node,
.page-shell .dnode,
.page-shell .exp-card__icon {
	background: var(--color-text);
	color: var(--color-bg);
	border: 0;
}

/* ---------------------------------------------------------------------
   6. Photography — square, and no tinted overlays over faces.
   --------------------------------------------------------------------- */
.page-shell .lp-media,
.page-shell .lede__img,
.page-shell .subcard__img { overflow: hidden; }
.page-shell .lp-media.ph::before,
.page-shell .lp-hero__media.ph { background: var(--color-neutral-300); }
.page-shell .subcard__scrim {
	background: linear-gradient(to top,
		rgba(32, 30, 29, .88) 0%,
		rgba(32, 30, 29, .40) 46%,
		rgba(32, 30, 29, .06) 78%);
}

/* ---------------------------------------------------------------------
   7. FAQ, trail band and closing CTA.
   --------------------------------------------------------------------- */
.page-shell .faq summary {
	font-family: var(--font-heading);
	font-weight: 800;
	letter-spacing: -.01em;
}
.page-shell .trail,
.page-shell .lp-cta,
.page-shell .exp-cta {
	background: var(--color-text);
	color: var(--color-bg);
}
.page-shell .trail::before,
.page-shell .trail::after,
.page-shell .lp-cta::before,
.page-shell .exp-cta::before { display: none; }
.page-shell .trail h2,
.page-shell .lp-cta h2,
.page-shell .exp-cta h2 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	letter-spacing: -.03em;
	line-height: 1.04;
	color: var(--color-bg);
}
.page-shell .trail p,
.page-shell .lp-cta p,
.page-shell .exp-cta p { color: rgba(243, 242, 242, .8); }
.page-shell .trail .lp-kicker,
.page-shell .lp-cta .lp-kicker { color: var(--color-accent-400); }

/* ---------------------------------------------------------------------
   8. Reduced motion: the legacy sheet animates a few decorative pieces.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.page-shell *,
	.page-shell *::before,
	.page-shell *::after { animation: none !important; transition: none !important; }
}

/* The experiences hub uses .lead for a paragraph; the enquiry form in
   modernist-trip.css uses the same name for a form panel. Neutralise it. */
.page-shell .lead {
	display: block;
	background: none;
	border: 0;
	padding: 0;
	max-width: 62ch;
	font-weight: 400;
	color: var(--color-neutral-700);
}
.page-shell .daycard { background: var(--color-surface); border: 1px solid var(--color-neutral-300); }

/* =========================================================================
   9. Collisions with the Modernist bundle.
   Loading the design system alongside style.css means a handful of names
   now exist twice. Each of these is a real, visible bug, not tidiness.
   ========================================================================= */

/* ds/modernist.css paints every link with the accent. On these pages the
   card IS the anchor, so the accent was inherited by card headings sitting
   on photographs — both a violation of "accent for wayfinding only" and a
   contrast failure against bright sky. Links inherit here; genuine inline
   text links get the accent back explicitly. */
.mtf-modernist .page-shell a { color: inherit; }
.mtf-modernist .page-shell .lp-head p a,
.mtf-modernist .page-shell .feature__body p a,
.mtf-modernist .page-shell .numitem p a,
.mtf-modernist .page-shell .faq__a a,
.mtf-modernist .page-shell .lp-answer a { color: var(--color-accent); }
.mtf-modernist .page-shell .lp-breadcrumb a { color: rgba(255, 255, 255, .72); }
.mtf-modernist .page-shell .lp-breadcrumb a:hover { color: #fff; }

/* Type over photography stays white, whatever the card is wrapped in. */
.mtf-modernist .page-shell .subcard h3 { color: #fff; }
.mtf-modernist .page-shell .subcard .dist,
.mtf-modernist .page-shell .subcard p { color: rgba(255, 255, 255, .86); }
.mtf-modernist .page-shell .subcard:hover h3 { color: var(--color-accent-400); }

/* modernist-trip.css calls its sticky itinerary sidebar .trail; these pages
   use the same name for a full-width closing band. Put the band back. */
.mtf-modernist .page-shell .trail {
	position: relative;
	padding: clamp(44px, 5vw, 72px);
	background: var(--color-text);
	box-shadow: none;
}
.mtf-modernist .page-shell .trail h3 {
	color: inherit;
	font-size: inherit;
	letter-spacing: -.02em;
	text-transform: none;
}
.mtf-modernist .page-shell .trail .btn {
	width: auto;
	min-height: 0;
	margin-top: 0;
	justify-content: center;
	font-size: 11px;
	padding: 15px 24px;
}

/* ds/modernist.css has a .seg segmented control; the season bars on these
   pages use .seg for their coloured segments. */
.mtf-modernist .page-shell .seg {
	display: block;
	border: 0;
	overflow: visible;
}

/* =========================================================================
   10. Flatten the remaining amber gradients.
   The token remap caught everything expressed through custom properties;
   these declarations hard-code amber values, so they had to be listed.
   Audited against style.css by searching every gradient with a literal
   colour that is reachable from an experience page.
   ========================================================================= */

/* Decorative glows: the system has no coloured light sources. */
.mtf-modernist .page-shell .exp-cta::before,
.mtf-modernist .page-shell .lp-cta::before,
.mtf-modernist .page-shell .trail::before,
.mtf-modernist .page-shell .bignum::after { display: none; }

/* Icon chips and badges: ink plate, not an amber wash. */
.mtf-modernist .page-shell .exp-card__icon,
.mtf-modernist .page-shell .rstep__node,
.mtf-modernist .page-shell .benefit__ic,
.mtf-modernist .page-shell .flow__badge,
.mtf-modernist .page-shell .value-note span {
	background: var(--color-text);
	color: var(--color-bg);
	border: 0;
	box-shadow: none;
}
.mtf-modernist .page-shell .value-note {
	background: var(--color-surface);
	border: 1px solid var(--color-neutral-300);
}

/* Connector rules: a hairline, not a fading amber beam. */
.mtf-modernist .page-shell .ritual::before,
.mtf-modernist .page-shell .flow__mid::before,
.mtf-modernist .page-shell .day::before,
.mtf-modernist .page-shell .tl-track::before {
	background: var(--color-neutral-300);
}

/* Data marks keep meaning, so they become flat accent rather than vanish. */
.mtf-modernist .page-shell .seg.high,
.mtf-modernist .page-shell .cal__row.culture .cal__date {
	background: var(--color-accent-200);
	color: var(--color-accent-700);
}
.mtf-modernist .page-shell .leg > span.high,
.mtf-modernist .page-shell .cal__leg span.culture,
.mtf-modernist .page-shell .cal__row.culture .cal__card::before,
.mtf-modernist .page-shell .nfill.two { background: var(--color-accent); }

/* Photo placeholders and scrims: neutral ground, ink overlay. */
.mtf-modernist .page-shell .lp-media,
.mtf-modernist .page-shell .lede__img,
.mtf-modernist .page-shell .subcard,
.mtf-modernist .page-shell .xcard {
	background: var(--color-neutral-300);
	box-shadow: none;
}
.mtf-modernist .page-shell .xcard__scrim {
	background: linear-gradient(to top,
		rgba(32, 30, 29, .90) 0%,
		rgba(32, 30, 29, .48) 46%,
		rgba(32, 30, 29, .10) 78%);
}

/* The closing CTA band matches .trail: ink panel, no gradient. */
.mtf-modernist .page-shell .exp-cta,
.mtf-modernist .page-shell .lp-cta {
	background: var(--color-text);
	color: var(--color-bg);
}

/* =========================================================================
   11. Site chrome: header, footer, enquiry modal.
   These live OUTSIDE .page-shell, so the scoping that protects the rest of
   the site left them exposed to style.css. Its floating-glass nav targets
   .nav — the same class the Modernist header uses — and supplies
   border-radius, blur, a glass fill and a warm shadow that the Modernist
   rules never declare, so they survived and the experience pages ended up
   with a pill-shaped header while every other page had the flat one.
   ========================================================================= */

/* The legacy palette is declared on :root, so any legacy rule outside
   .page-shell still resolved to amber. Remap globally on these pages. */
:root {
	--orange-700: #ae1800;
	--orange-600: #ec3013;
	--orange-500: #ec3013;
	--orange-400: #ec3013;
	--amber-400: #ec3013;
	--gold-300: #ec3013;
	--ink: #201e1d;
	--ink-deep: #201e1d;
	--ink-soft: #605d5d;
	--ink-mute: #7d7979;
	--cream: #f3f2f2;
	--cream-2: #eae9e9;
	--card: #eae9e9;
	--glass: #f3f2f2;
	--glass-strong: #f3f2f2;
	--glass-line: #d7d3d3;
	--line: #d7d3d3;
	--line-soft: #d7d3d3;
	--hero-dark: #201e1d;
	--grad-brand: linear-gradient(0deg, #ec3013, #ec3013);
	--shadow-glow: none;
	--r-lg: 0px;
	--r-md: 0px;
	--r-sm: 0px;
	--font-display: "Archivo", system-ui, sans-serif;
	--font-body: "Archivo", system-ui, sans-serif;
	--font-mono: "Archivo", system-ui, sans-serif;
}

/* Header: strip the floating-glass treatment back to the flat bar. */
.site-head .nav {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.site-head .nav__links a { font-weight: 400; opacity: 1; color: var(--color-text); }
.site-head .nav__links a:hover { color: var(--color-accent); }
.site-head .nav__links a::after { background: var(--color-accent); border-radius: 0; height: 2px; }
.site-head .nav__burger span { border-radius: 0; margin: 0; }

/* Buttons in the chrome: no warm glow on hover, no pill. */
.site-head .btn,
.site-head .btn-secondary,
.modal .btn,
.foot .btn {
	border-radius: 0;
	box-shadow: none;
}
.site-head .btn:hover,
.site-head .btn-secondary:hover,
.modal .btn:hover,
.foot .btn:hover { box-shadow: none; transform: none; }

/* Enquiry modal: owned by modernist-site.css, decorated by style.css. */
.modal,
.modal__box,
.modal__media,
.modal__form,
.modal__ic,
.modal__close,
.modal__done,
.mfield input,
.mfield select,
.mfield textarea,
.modal__submit .btn {
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* =========================================================================
   12. Second audit pass.
   Six defects found on /experiences/ and /experiences/food/, each one a
   place where a legacy declaration survived because the Modernist rules
   never set that property.
   ========================================================================= */

/* (a) The hub hero was still a peach radial wash with a diagonal sheen and
       a noise layer over it, and it centred its type while every other
       hero on the site is flush left. */
.mtf-modernist .page-shell .page-hero {
	text-align: left;
	background: var(--color-surface);
	padding: clamp(72px, 11vh, 120px) var(--pm) clamp(40px, 6vh, 64px);
}
.mtf-modernist .page-shell .page-hero > * {
	max-width: var(--measure);
	margin-inline: auto;
}
.mtf-modernist .page-shell .page-hero__bg,
.mtf-modernist .page-shell .page-hero__bg::before,
.mtf-modernist .page-shell .page-hero__bg::after,
.mtf-modernist .page-shell .hero__grain { display: none; }
.mtf-modernist .page-shell .page-hero .breadcrumb {
	justify-content: flex-start;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}
.mtf-modernist .page-shell .page-hero .eyebrow {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--color-accent);
}
.mtf-modernist .page-shell .page-hero h1 {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	max-width: 18ch;
}
.mtf-modernist .page-shell .page-hero .lead {
	margin-top: var(--space-6);
	text-align: left;
}

/* (b) .stat__icon is declared width:auto;display:block in the legacy sheet,
       so giving it an ink fill turned it into a full-width black bar. */
.mtf-modernist .page-shell .stat__icon,
.mtf-modernist .page-shell .benefit__ic,
.mtf-modernist .page-shell .exp-card__icon,
.mtf-modernist .page-shell .value-note span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	padding: 0;
}
.mtf-modernist .page-shell .rstep__node,
.mtf-modernist .page-shell .flow__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex: none;
}

/* (c) An article with no photograph was painting an empty grey rectangle.
       No image means no image, not a placeholder block. */
.mtf-modernist .page-shell .lp-media.ph,
.mtf-modernist .page-shell .lp-hero__media.ph { display: none; }

/* (d) Buttons on the ink bands. The legacy .btn-light and the accent .btn
       both resolved to warm text on a warm ground and failed contrast. */
.mtf-modernist .page-shell .lp-cta .btn,
.mtf-modernist .page-shell .exp-cta .btn,
.mtf-modernist .page-shell .trail .btn {
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	color: #fff;
}
.mtf-modernist .page-shell .lp-cta .btn:hover,
.mtf-modernist .page-shell .exp-cta .btn:hover,
.mtf-modernist .page-shell .trail .btn:hover {
	background: var(--color-accent-700);
	border-color: var(--color-accent-700);
	color: #fff;
}
.mtf-modernist .page-shell .lp-cta .btn-light,
.mtf-modernist .page-shell .exp-cta .btn-light,
.mtf-modernist .page-shell .trail .btn-light,
.mtf-modernist .page-shell .lp-cta .btn-ghost,
.mtf-modernist .page-shell .exp-cta .btn-ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
}
.mtf-modernist .page-shell .lp-cta .btn-light:hover,
.mtf-modernist .page-shell .exp-cta .btn-light:hover,
.mtf-modernist .page-shell .trail .btn-light:hover,
.mtf-modernist .page-shell .lp-cta .btn-ghost:hover,
.mtf-modernist .page-shell .exp-cta .btn-ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* (e) The closing bands kept a warm halo and a frosted border. */
.mtf-modernist .page-shell .exp-cta,
.mtf-modernist .page-shell .lp-cta,
.mtf-modernist .page-shell .trail {
	border: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* (f) The lede portrait carried a 80px warm drop shadow. */
.mtf-modernist .page-shell .lede__img { box-shadow: none; }
.mtf-modernist .page-shell .lede__art { padding: 0; }


/* Embassy food photography: credit on the image, dish gallery. */
.page-shell .lp-media, .page-shell .lede__img, .page-shell .subcard { position: relative; }
.imgcr--on { position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 3px 8px; font-size: 10.5px; line-height: 1.4; background: rgba(32,30,29,.6); color: #fff; }
.subcard .imgcr--on { top: 0; bottom: auto; }
.dishgal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 32px; }
.dishgal__item { margin: 0; background: var(--color-paper, #fff); border: 1px solid var(--color-neutral-300); }
.dishgal__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-200, #e6e4e4); }
.dishgal__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.dishgal__item:hover .dishgal__img img { transform: scale(1.05); }
.dishgal figcaption { padding: 12px 14px 14px; }
.dishgal figcaption b { display: block; font-family: var(--font-heading); font-size: 1rem; line-height: 1.25; }
.dishgal figcaption span { display: block; margin-top: 2px; font-size: .84rem; color: var(--color-neutral-600); }
.dishgal figcaption i { display: block; margin-top: 8px; font-style: normal; font-size: 10.5px; line-height: 1.4; color: var(--color-neutral-500); }
@media (max-width: 900px) { .dishgal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Food page: 'More ways to taste' cards - photo on top, words on paper below. */
.fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.fcard { display: flex; flex-direction: column; background: var(--color-paper, #fff); border: 1px solid var(--color-neutral-300); color: var(--color-text); text-decoration: none; transition: transform 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease); }
.fcard:hover { transform: translateY(-4px); border-color: var(--color-text); box-shadow: 0 14px 30px -18px rgba(32,30,29,.45); }
.fcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-neutral-200, #e6e4e4); }
.fcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.fcard:hover .fcard__media img { transform: scale(1.06); }
.fcard__cr { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 3px 8px; font-size: 10px; line-height: 1.4; letter-spacing: .01em; color: #fff; background: rgba(32,30,29,.62); backdrop-filter: blur(4px); }
.fcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 20px 22px; border-top: 3px solid var(--color-accent); }
.fcard__k { font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }
.page-shell .fcard h3 { margin: 8px 0 0; font-size: 1.3rem; line-height: 1.15; color: var(--color-text); }
.fcard p { margin: 10px 0 0; font-size: .9rem; line-height: 1.55; color: var(--color-neutral-700); }
.fcard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text); }
.fcard:hover .fcard__go { color: var(--color-accent); }
.fcard:hover .fcard__go svg { transform: translateX(3px); }
.fcard__go svg { transition: transform 240ms var(--ease); }
@media (max-width: 1100px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }


/* feature__num v2: an accent rule and a label, not a filled bar. */
.page-shell .feature__num { display: inline-flex; align-items: center; gap: 12px; width: auto; padding: 0; background: none; color: var(--color-accent); font-size: 11px; letter-spacing: .16em; margin-bottom: 14px; }
.page-shell .feature__num::before { content: ""; display: block; flex: none; width: 36px; height: 2px; background: var(--color-accent); }
.page-shell .numbadge { padding: 4px 9px; }


/* dishgal text colour: the theme's figure/figcaption styles were greying the caption. */
.page-shell .dishgal figcaption, .page-shell .dishgal figure { opacity: 1; color: var(--color-text); font-style: normal; text-align: left; }
.page-shell .dishgal figcaption b { color: var(--color-text); font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.page-shell .dishgal figcaption span { color: var(--color-neutral-700); font-size: .9rem; }
.page-shell .dishgal figcaption i { color: var(--color-neutral-500); }


/* lp-cta v2: one alignment. Heading, text and buttons share a left edge. */
.mtf-modernist .page-shell .lp-cta { text-align: left; padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: end; border-top: 4px solid var(--color-accent); }
.mtf-modernist .page-shell .lp-cta h2 { grid-column: 1; margin: 0; max-width: 16ch; text-align: left; font-size: clamp(2rem, 4vw, 3.4rem); }
.mtf-modernist .page-shell .lp-cta p { grid-column: 1; margin: 0; max-width: 58ch; text-align: left; font-size: 1.05rem; line-height: 1.6; }
.mtf-modernist .page-shell .lp-cta .lp-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; margin: 0; }
.mtf-modernist .page-shell .lp-cta .lp-actions a { text-align: center; white-space: nowrap; }
@media (max-width: 860px) {
	.mtf-modernist .page-shell .lp-cta { grid-template-columns: 1fr; }
	.mtf-modernist .page-shell .lp-cta .lp-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
}


/* Village page: photo mosaic. Big, crisp photography, captions on the image. */
.vmosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 17vw, 260px); gap: 12px; margin-top: 28px; }
.vmosaic__item { position: relative; margin: 0; overflow: hidden; background: var(--color-neutral-300); }
.vmosaic__item.is-wide { grid-column: span 2; grid-row: span 2; }
.vmosaic__item.is-tall { grid-row: span 2; }
.vmosaic__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease), filter 600ms var(--ease); filter: saturate(1.05) contrast(1.03); }
.vmosaic__item:hover img { transform: scale(1.06); }
.vmosaic__item::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(to top, rgba(20,18,17,.72), rgba(20,18,17,0)); pointer-events: none; }
.vmosaic__item figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; }
.page-shell .vmosaic__item figcaption b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.page-shell .vmosaic__item figcaption span { display: block; margin-top: 3px; font-family: var(--font-heading); font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.vmosaic__item.is-wide figcaption b { font-size: clamp(1.3rem, 2.2vw, 1.9rem); }
.vmosaic__cta { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 22px; background: var(--color-text); color: #fff; text-decoration: none; border-top: 4px solid var(--color-accent); transition: background-color 300ms var(--ease); }
.vmosaic__cta:hover { background: #000; }
.vmosaic__cta b { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.vmosaic__go { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-400, #f47a63); }
@media (max-width: 900px) { .vmosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; } }
@media (max-width: 560px) { .vmosaic { grid-template-columns: 1fr; grid-auto-rows: 240px; } .vmosaic__item.is-wide, .vmosaic__item.is-tall { grid-column: auto; grid-row: auto; } }