/* ============================================================
   Kuala Lumpur Aquarium - Phase 3 Design System
   IDENTITY: "Tidal Slate" (locked at the Phase C gate, 2026-09-05, per site.config.md, and
   checked unused across every sibling stylesheet; standing rule: vary the ground per site).
   A cool tidal blue-grey page a full step deeper than the near-white the portfolio had
   collapsed into, deep teal ink and structure, coral reserved for the one CTA (white text on
   a deeper coral so the fill still clears AA, the approved brighter coral kept for rules,
   eyebrows and numbers), amber-bronze for real ratings only so it can never be mistaken for
   the CTA, and deep tidal-night bands (hero, stat grid, footer) with pale tidal text.
   Serif display over a plain sans body; uppercase letter-spaced sans for eyebrows, category
   links and buttons. Flat, hairline-bordered cards, 4px radii, no shadows. Split hero with
   the booking panel above the fold; single-bar centered-brand nav.
   Mobile-first, zero heavy deps, system fonts (no webfont, LCP protected).
   ============================================================ */
/* ---- COLOR TOKENS (light, purposeful) ---- */
:root {
  /* ---- Palette "Tidal Slate" (site.config.md, locked at the Phase C gate 2026-09-05).
     Verified unused across all 96 sibling stylesheets, and a full step deeper than the
     near-white ground the portfolio had collapsed into (standing rule: vary the background
     colour per site). Cool tidal blue-grey page, deep teal structure, coral for action. ---- */
  --ink:        #10242B;   /* primary text: near-black teal */
  --ink-soft:   #3A5560;   /* secondary text: muted slate (7.0:1 on --paper) */
  --paper:      #E9F1F3;   /* page ground: pale tidal blue-grey */
  --paper-2:    #DFEAED;   /* raised panels, wash bands, table headers */
  --surface:    #ffffff;   /* cards */
  --surface-2:  #F6FAFB;   /* inputs, zebra rows */
  --line:       #C6D8DD;   /* hairline borders on light */
  --brand:      #0D5C66;   /* deep teal: links (underlined), structural fills (6.4:1) */
  --brand-deep: #084048;   /* deeper teal: btn-brand hover */
  /* CTA. Oleg approved coral #E2603F at the gate. White text on that exact value measures
     3.59:1, under AA, so the FILLED button uses the same coral one step deeper (4.57:1 with
     white) and the approved value stays as the visible coral identity in --accent-bright,
     used for rules, eyebrows and numbers where it sits on a light or dark ground, not behind
     small white text. Same colour to the eye, honest contrast under it. */
  --accent:     #C6502F;   /* CTA fill (white text, 4.57:1) */
  --accent-deep:#A63F22;   /* CTA hover/active */
  --accent-ink: #ffffff;   /* text on --accent */
  --accent-bright:#E2603F; /* the approved coral: rules, eyebrows, accents, never behind small white text */
  --sea:        #1B4A57;   /* deep tidal blue: secondary structure, icons, hovers (8.2:1) */
  --sea-deep:   #143843;   /* darker tidal blue for hover/active states */
  --gold:       #A8701C;   /* amber-bronze: real ratings only, kept clear of the coral CTA */
  --gold-soft:  #F2E4CC;   /* gold wash for badge backgrounds (DARK text on top) */
  --gold-ink:   #4A3208;   /* text colour that sits on --gold-soft */
  --gold-bright:#E0B357;   /* brighter gold for eyebrows and numbers on night bands */
  --slate:      #5A7480;   /* muted slate: sparing tertiary tint/borders */
  --night:      #0B2A32;   /* deep tidal night: hero base, footer, dark bands */
  --night-2:    #123B45;   /* raised surface on night */
  --night-ink:  #E8F1F3;   /* pale tidal text on night bands */
  --footer:     #0B2A32;   /* footer fill */
  --ok:         #1F6E52;
  --warn:       #8C4A18;

  /* ---- TYPE - high-contrast serif display (dinner-menu register) over a plain sans body.
     System stacks, no webfont (protects LCP). ---- */
  /* Display stack, reset 2026-09-05 (Oleg: "font is weird"). The donor led with Didot and
     Bodoni 72: ultra-high-contrast Mac-only display faces whose hairline strokes read thin and
     odd at heading sizes, and which fall back to something completely different off macOS, so
     the site looked like two different brands depending on the machine. Georgia-first is warm,
     universally installed and renders identically everywhere; the remaining faces are
     same-flavour fallbacks, not a different register. */
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* modular scale */
  --step--1: clamp(.83rem, .8rem + .15vw, .92rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.9vw, 3.2rem);
  --step-4:  clamp(2.5rem, 1.9rem + 3.2vw, 4.6rem);

  /* spacing scale */
  --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem;
  --maxw: 72rem;
  /* flat, hairline-bordered surfaces: menu-card corners, no shadows */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: none;
}

/* ---- RESET-ISH ---- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }
h1,h2 { font-family: var(--display); line-height: 1.05; letter-spacing: -.01em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h3 { font-family: var(--display); line-height: 1.2; letter-spacing: 0; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); margin-top: var(--s6); }
h3 { font-size: var(--step-1); margin-top: var(--s4); }
p { margin: 0 0 var(--s3); max-width: 64ch; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- LAYOUT ---- */
.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, 50rem); margin-inline: auto; }
.section { padding-block: var(--s6); }
.section + .section { padding-top: 0; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:50; font-weight:700; }
.skip-link:focus { left:8px; top:8px; }

/* ---- FULL-BLEED BANDS on a .section.wrap (keeps the 4.5 section convention): the background
   is painted edge to edge with a box-shadow and clipped to the section's own height. ---- */
.section.band-night, .section.band-linen { padding-block: var(--s6); margin-top: var(--s5); clip-path: inset(0 -100vmax); }
.section.band-night { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); color: var(--night-ink); }
.section.band-linen { background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); }
.section.band-night h2, .section.band-night h3 { color: #fff; }
.section.band-night p { color: var(--night-ink); }
.section.band-night a { color: var(--gold-bright); }

/* ---- CTA ---- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font-family: var(--body); font-weight:800; font-size: .84rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .9rem 1.5rem; border-radius: var(--radius); text-decoration:none; border:0; cursor:pointer;
  min-height: 48px; transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); color:var(--accent-ink); }
.btn-brand { background: var(--brand); color:#fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border:1.5px solid var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ---- HEADER / NAV: centered-brand (V3.1 Design Director, 2026-09-03).
   One bar: the serif wordmark in the middle, the site's cruise groups on its left, the site
   pages on its right, the CTA as the far-right item (the menu-card composition). Under 1000px
   both link groups collapse into one dropdown driven by base.html's existing
   .nav-toggle / #nav-links data-open script; the toggle sits left, the CTA right. ---- */
/* 2026-09-05: was rgba(251,245,234,.94) -- the DONOR's champagne-cream paper, left behind when
   the palette was reset to "Tidal Slate". It sat as a warm cream band on top of this site's
   icy aqua-white ground on every page. Now derived from this site's own --paper. */
.site-header { position: sticky; top:0; z-index:40; background: rgba(243,251,250,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.nav { display:grid; grid-template-columns: 1fr auto 1fr auto; grid-template-areas: "left brand right cta"; align-items:center; column-gap: var(--s4); padding-block:.75rem; }
/* 2026-09-05 (site-recheck f-040/041/050/051/052, mech+vision agreement): a 4-word brand phrase
   (a long multi-word brand phrase) with white-space:nowrap and no min-width in a CSS grid
   track never shrinks below its intrinsic width, so it either overflowed the 390px viewport
   (grid forced wider than .wrap, scrollWidth > innerWidth) or, at desktop widths where .wrap
   still caps at var(--maxw)=72rem, overlapped the right nav group (the tail of the brand phrase running
   into "GUIDES"). min-width:0 lets the grid track actually shrink; a hard max-width plus
   overflow:hidden/ellipsis is the backstop so the header can never force page-level overflow
   again, on this site or a future one whose EMD brand phrase is this long. */
/* 2026-09-05 (Oleg: "logo no need for letters"): the header brand is now the MARK ONLY, so all
   of the wordmark-shrinking machinery above is gone with it -- a 40px square can never force
   page overflow or collide with the nav groups at any width. */
/* SCOPED to .site-header on purpose: the FOOTER reuses .brand for the sitewide brand-anchor
   link (the exact brand phrase -> /), which is a standing requirement and must keep
   its wordmark and normal text rendering. An unscoped rule here silently collapsed it. */
.site-header .brand { grid-area:brand; justify-self:center; min-width:0; display:inline-flex; align-items:center; text-decoration:none; line-height:0; }
.site-header .brand:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:50%; }
.brand-logo { width:40px; height:40px; display:block; }
@media (max-width: 360px) { .brand-logo { width:34px; height:34px; } }
.brand b { color: var(--accent); font-weight:700; }
.nav-cta { grid-area:cta; min-height:40px; padding:.55rem 1rem; font-size:.74rem; }
.nav-links { display:contents; }
.nav-group { display:flex; gap:1.4rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-group--left { grid-area:left; justify-content:flex-end; }
.nav-group--right { grid-area:right; justify-content:flex-start; }
.nav-group a { display:inline-block; padding:.3rem 0; font-family:var(--body); font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; }
.nav-group--right a { color:var(--ink-soft); font-weight:700; }
.nav-group a:hover { color:var(--brand); border-bottom-color:var(--accent); }
.nav-group .nav-cta-mobile { display:none; }
.nav-links a.btn-brand, .nav-links a.btn-primary { color:#fff; }
.nav-toggle { display:none; grid-area:toggle; background:none; border:0; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); padding:0; place-items:center; }
.nav-toggle svg { width:26px; height:26px; }
@media (max-width: 1000px) {
  .nav { grid-template-columns: auto 1fr auto; grid-template-areas: "toggle brand cta"; padding-block:.5rem; column-gap:var(--s2); }
  .nav-toggle { display:grid; }
  .nav-links { display:none; position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; }
  .nav-links[data-open="true"] { display:flex; }
  .nav-group { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.3rem; }
  .nav-group a { padding:.45rem 0; border-bottom:0; font-size:.82rem; }
  .nav-group--right { border-top:1px solid var(--line); padding-top:.9rem; width:100%; }
}
@media (max-width: 520px) {
  .nav-cta { display:none; }
  .nav-group .nav-cta-mobile { display:block; width:100%; margin-top:.4rem; }
  .nav-group .nav-cta-mobile .btn { width:100%; }
}

/* ---- BREADCRUMB ---- */
.crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--s3); }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-current] { color: var(--ink); font-weight:600; }

/* ---- HERO: DUSK SPLIT (split-hero-booking / hero-split-media-panel, approved blueprint 2026-09-03).
   Night-navy band. Left: eyebrow, H1, lede, proof, secondary actions. Right: a white panel that
   stacks the hero image over the compile-emitted booking panel, so the real booking CTA is above
   the fold. On mobile the H1 column comes first and the panel drops below it. ---- */
.hero-dusk { background: radial-gradient(120% 90% at 12% 0%, #2B2A55 0%, var(--night-2) 45%, var(--night) 100%); color: var(--night-ink); border-bottom: 3px solid var(--accent); }
.hero-dusk-inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--s5); align-items:center; padding-block: var(--s6); }
.eyebrow { font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--gold); font-weight:800; margin-bottom:var(--s2); }
.hero-dusk .eyebrow { color: var(--gold-bright); }
.hero-dusk h1 { color:#fff; max-width: 14ch; margin-bottom: var(--s3); }
.hero-dusk .lede { color: rgba(246,238,220,.84); max-width: 50ch; }
.hero-dusk .cta-proof { color: rgba(246,238,220,.92); }
.hero-dusk .cta-proof .gold { color: var(--gold-bright); }
.hero-actions { display:flex; flex-wrap:wrap; gap: var(--s3); align-items:center; margin-top: var(--s4); }
.hero-ghost { color:#fff; border-color: rgba(246,238,220,.55); }
.hero-ghost:hover { border-color:#fff; color:#fff; }
.hero-link { color: var(--gold-bright); font-weight:600; text-underline-offset:4px; }
.hero-panel { background: var(--surface); color: var(--ink); border-radius: var(--radius); overflow:hidden; border:1px solid rgba(246,238,220,.2); }
.hero-media { aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); border-radius:var(--radius); }
.hero-media img { width:100%; height:100%; object-fit:cover; display:block; }
.section-media { aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); margin: var(--s3) 0 var(--s4); }
.section-media img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-panel .hero-media { border-radius:0; }
.hero-panel .booking-panel { border:0; border-radius:0; box-shadow:none; }
@media (max-width: 860px) {
  .hero-dusk-inner { grid-template-columns:1fr; gap:var(--s4); padding-block: var(--s5); }
  .hero-dusk h1 { max-width:none; }
}
@media (max-width: 640px) { .hero-actions .btn { width:100%; } }

/* ---- SECTION HEADING RULE: a short coral bar above each section H2 (menu-card rule) ---- */
.section > h2:first-child, .rule-h2 { position:relative; padding-top: var(--s3); border-bottom:0; }
.section > h2:first-child::before, .rule-h2::before { content:""; position:absolute; top:0; left:0; width:3rem; height:3px; background: var(--accent); }
.section.band-night > h2:first-child::before { background: var(--gold-bright); }
.section h2:first-child { margin-top: 0; }

/* ---- QUICK ANSWER (answer-first) ---- */
.quick-answer { background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s3); }
.quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; }
.quick-answer p + p { margin-top: var(--s3); font-size: var(--step-0); }
.quick-answer .qa-label { font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--gold); margin-bottom:var(--s2); font-weight:800; }
.quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4); }
.quick-answer-box p:first-child { margin-top:0; }
.quick-answer-box p:last-child { margin-bottom:0; }

/* ---- KEY TAKEAWAYS ---- */
.takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.takeaways-list li { position:relative; padding-left:1.6rem; line-height:1.5; max-width:70ch; }
.takeaways-list li::before { content:""; position:absolute; left:0; top:.6em; width:.55rem; height:.55rem; background:var(--accent); border-radius:50%; }

/* ---- KEY FACTS TABLE ---- */
.keyfacts { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.keyfacts th, .keyfacts td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; }
.keyfacts th { width:42%; font-family:var(--body); font-weight:700; color:var(--ink); background:var(--paper-2); }
.keyfacts tr:last-child th, .keyfacts tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .keyfacts { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .keyfacts th { min-width: 9rem; }
}

/* ---- PRODUCT CARD (money component) ---- */
.product-card { display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.product-card .pc-media { background:var(--paper-2); overflow:hidden; }
.product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.pc-tag { align-self:flex-start; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:var(--radius-sm); }
.pc-rating { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.pc-rating .src { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); }

/* ---- STAR RATING (dependency-free) - set fill width inline: ratingValue/5*100% ---- */
.stars { position:relative; display:inline-block; vertical-align:middle; line-height:1; white-space:nowrap; font-size:1.05em; }
.stars::before { content:"★★★★★"; color:var(--line); letter-spacing:2px; }
.stars .stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; }
.stars .stars-fill::before { content:"★★★★★"; color:var(--gold); letter-spacing:2px; }
.stars-num { font-weight:700; color:var(--ink); }
.trust .stars { font-size:1.15rem; margin-top:.2rem; }
.pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:700; color:var(--ink); }
.pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; font-family:var(--body); }
@media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } }

/* ---- PRICING & INCLUSIONS ---- */
.incl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.incl ul { list-style:none; padding:0; margin:0; }
.incl li { padding:.35rem 0 .35rem 1.6rem; position:relative; }
.incl .yes::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; }
.incl .no::before  { content:"✕"; position:absolute; left:0; color:var(--accent); font-weight:800; }
@media (max-width:600px){ .incl{ grid-template-columns:1fr; } }

/* ---- ITINERARY ---- */
.timeline { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); }
.timeline li { position:relative; padding:0 0 var(--s4) var(--s4); }
.timeline li::before { content:""; position:absolute; left:-9px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); }
.timeline .t { font-family:var(--body); font-weight:700; }

/* ---- PROS / CONS ---- */
.proscons { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.proscons .col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.proscons h3 { margin-top:0; }
.proscons ul { padding-left:1.1rem; margin:0; }
.proscons li { margin-bottom:.5rem; }
.proscons .pros { border-top:3px solid var(--ok); }
.proscons .cons { border-top:3px solid var(--accent); }
@media (max-width:600px){ .proscons{ grid-template-columns:1fr; } }

/* ---- AUTHOR EXPERIENCE ---- */
.author-block { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; }
.author-block img.avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); }
.author-block .updated { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
@media (max-width:600px){ .author-block{ grid-template-columns:1fr; } }

/* ---- TRUST STRIP ---- */
.trust { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.trust .num { font-family:var(--display); font-size:var(--step-2); font-weight:700; color:var(--gold); }
.trust .lbl { font-size:var(--step--1); color:var(--ink-soft); }
@media (max-width:640px){ .trust{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } }

/* ---- FAQ (FAQPage) ---- */
.faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.4rem 1rem; margin-bottom:.7rem; }
.faq summary { font-family:var(--body); font-weight:700; cursor:pointer; padding:.6rem 0; list-style:none; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; }
.faq details[open] summary::after { content:"−"; }

/* ---- RELATED TOURS ---- */
.related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.related .rcard .rc-body { padding:var(--s3) var(--s4); }
@media (max-width:600px){ .related{ grid-template-columns:1fr; } }
/* 3-up card grid (homepage / hubs): flat, hairline-bordered, vertical image-top cards */
.cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); }
.cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; }
.cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.cards-3 .rcard .rc-body .btn { margin-top:auto; }
@media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } }
/* 2026-09-05 (Oleg: "do two cards horizontally same lane, otherwise no proper image visible").
   A 3-column grid holding only TWO cards left each card at a third of the lane with a dead gap
   on the right, which shrank the 4:3 card image to the point it read as decorative. This site
   has exactly 2 real tours, so every tour-card grid hits that case. :has() applies the 2-column
   layout only when the grid really holds exactly two cards, so a 3-card grid elsewhere (and the
   1- or 6-card groups on the guides hub) is untouched. Kept inside min-width:821px so it can
   never outrank the single-column mobile rule above (a :has() selector would otherwise win on
   specificity, since a media query adds none). */
@media (min-width:821px){
  .cards-3:has(> .rcard:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); }
}

/* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */
.pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); }
.pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink);
  font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:var(--radius-sm); }
.pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; }
.pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; }
.pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--accent); font-weight:800; }
.rc-media, .pc-media { position:relative; }
.pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink);
  font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:var(--radius-sm); }
.cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--accent); border-top:3px solid var(--accent); }

/* ---- CTA BANNER (night band, gold rule) ---- */
.cta-banner { background:linear-gradient(120deg, var(--night-2), var(--night)); border:1px solid var(--night); border-top:3px solid var(--gold-bright); color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; }
.cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; }
.cta-banner p { color:rgba(246,238,220,.84); max-width:52ch; margin-inline:auto; }

/* ---- AVAILABILITY WIDGET (date -> affiliate check) ---- */
.availability { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.availability .av-label { font-family:var(--body); font-weight:700; color:var(--ink); }
.availability .av-date { padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; min-height:48px; background:var(--surface-2); color:var(--ink); color-scheme:light; }
.availability .av-go, .availability .av-check { margin-left:auto; }
.availability .av-msg { width:100%; margin:.3rem 0 0; color:var(--ok); font-weight:600; }
@media (max-width:560px){ .availability .av-go, .availability .av-check { margin-left:0; width:100%; } }
/* GetYourGuide live availability widget container (gyg_widget token, guide/blog pages) */
.gyg-avail { margin: var(--s5) 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding: var(--s3); max-width:none; }

/* ---- FOOTER (the one deepest surface, night bay navy) ---- */
.site-footer { background:var(--footer); color:#D9D3C4; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:3px solid var(--gold-bright); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); }
.site-footer a { color:#EDE6D6; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; color:var(--gold-bright); }
.site-footer h4, .site-footer .footer-h { font-family:var(--display); font-weight:700; font-size:var(--step-0); color:#fff; margin:0 0 var(--s2); }
.footer-nav ul { list-style:none; margin:0; padding:0; }
.footer-nav li { margin-bottom:.4rem; }
.socials { display:flex; gap:.8rem; margin-top:var(--s3); }
.socials a { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(246,238,220,.28); border-radius:50%; }
.socials a:hover { border-color:var(--gold-bright); color:var(--gold-bright); }
.disclosure { font-size:var(--step--1); color:#B7B0A2; border-top:1px solid rgba(246,238,220,.18); margin-top:var(--s5); padding-top:var(--s3); }
.disclosure p { max-width:none; }
@media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } }

/* ---- BLOG ---- */
.blog-hero { margin:var(--s5) 0 0; }
.blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); }
.blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); }
.blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); }
.author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.prose { margin-top:var(--s5); }
.prose > * { max-width:64ch; }
.prose h2 { margin-top:var(--s6); }
.prose h3 { margin-top:var(--s5); }
.prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; }
.prose figure { margin:var(--s4) 0; }
.prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li { margin-bottom:.4rem; }
.prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; }
.prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); }
.prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose thead th { background:var(--paper-2); font-family:var(--body); font-weight:700; color:var(--ink); }
.prose tbody tr:last-child td { border-bottom:0; }
@media (max-width:640px){
  .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll > table { min-width: 640px; }
}
.prose a { color:var(--accent); }
/* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a
   button inside an article body renders accent-on-accent = INVISIBLE TEXT. */
.prose a.btn-primary, .prose a.btn-primary:hover { color:#fff; }
.prose a.btn-brand { color:#fff; }
.prose a.btn-ghost { color:var(--ink); }
/* Hotel affiliate pill (Expedia via Travelpayouts): champagne gold + outline so it reads as a
   secondary lodging action, distinct from the coral tour buttons. Explicit colors defeat the
   .prose a override trap above. */
.hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--body); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:var(--radius); border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; }
.hotel-cta:hover, .prose a.hotel-cta:hover { background:var(--gold-ink); border-color:var(--gold-ink); color:#fff; text-decoration:none; }
.hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); }
.hotel-row .hr-name { font-weight:700; color:var(--ink); }
.blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; }
.blog-cta h2 { margin-top:0; }
.blog-cta p { margin-bottom:var(--s3); }
.blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }

/* ---- INFOGRAPHIC (generated SVG) ---- */
.infographic { margin:var(--s4) 0; }
.infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; }
.infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); }
.embed + p, .embed + p.small, .video-grid + p { max-width:none; }

/* information-gain block: fresh, sourced data competitors don't carry */
.infogain { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s4) var(--s3); margin:var(--s5) 0; }
.infogain .infogain-h { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--display); font-weight:700; font-size:var(--step-1); line-height:1.1; margin:0 0 var(--s3); max-width:none; color:var(--ink); }
.infogain .tag { font-family:var(--body); font-size:var(--step--1); font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:.18rem .55rem; border-radius:var(--radius-sm); letter-spacing:.03em; text-transform:uppercase; }
.infogain ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.infogain li { position:relative; padding-left:1.5rem; max-width:66ch; }
.infogain li::before { content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; background:var(--gold); border-radius:50%; }
.infogain .src { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.2rem; }
.infogain .src a { color:var(--ink-soft); }
.infogain .infogain-note { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0 0; max-width:none; }

/* ---- EMBEDS (interactive map + videos) ---- */
.embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } }

/* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */
.btn-xl { font-size: .96rem; padding: 1.05rem 1.9rem; }
@media (max-width: 430px) { .btn-xl { font-size: .84rem; padding: .95rem 1.2rem; } }
.cta-proof { display:block; font-size:var(--step--1); color:var(--ink-soft); margin:.55rem 0 0; max-width:none; }
.cta-proof .gold { color: var(--gold); font-weight:700; }
.cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--accent);
  border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0; max-width:none; text-align:center; }
.cta-box .cb-h { font-family:var(--display); font-weight:700; font-size:var(--step-2); color:var(--ink); margin:0 0 .5rem; max-width:none; }
.cta-box p { max-width:44ch; margin-inline:auto; }
.cta-box p:last-child { margin-bottom:0; max-width:none; }
.cta-box .btn { margin-top:.5rem; }
.cta-box a.btn-primary, .cta-box a.btn-primary:hover { color:var(--accent-ink); }
@media (max-width:640px){ .cta-box { padding:var(--s4); } .cta-box .btn { width:100%; } }
/* sticky bar: fixed overlay (zero CLS), thin, revealed after first screen */
.sticky-cta { position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center;
  justify-content:center; gap:.9rem; padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(251,245,234,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s ease; }
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta .sc-proof { font-size:var(--step--1); color:var(--ink); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sc-proof .gold { color:var(--gold); font-weight:700; }
.sticky-cta .btn { min-height:44px; padding:.6rem 1.3rem; white-space:nowrap; flex:0 0 auto; }
@media (min-width: 761px) {
  .sticky-cta { left:auto; right:1.2rem; bottom:1.2rem; border:1px solid var(--line);
    border-radius:var(--radius); padding:.5rem .6rem .5rem 1.1rem; }
  /* article pages (blog/guides): full-width bottom bar on desktop too, like mobile */
  body.article .sticky-cta { left:0; right:0; bottom:0; border-radius:0; border:0;
    border-top:1px solid var(--line); padding:.55rem .9rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } }

/* ---- TESTIMONIALS (real GetYourGuide/Viator reviews, verbatim) ---- */
.reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.review-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.review-card .stars { font-size:.95rem; }
.review-card blockquote { margin:0; font-size:var(--step-0); color:var(--ink); max-width:none; }
.review-card blockquote p { max-width:none; margin:0; }
.review-meta { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); }
.review-meta strong { color:var(--ink); }
@media (max-width:760px){ .reviews{ grid-template-columns:1fr; } }

/* utility */
.lede { font-size:var(--step-1); color:var(--ink-soft); }
.small { font-size:var(--step--1); color:var(--ink-soft); }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.text-center{text-align:center}

/* ============================================================
   SITE-SPECIFIC LAYER, "Champagne and Dusk" additions inherited from the structural donor site
   ============================================================ */

/* ---- CATEGORY GRID (cruise-type hubs on the homepage): flat, hairline, coral left rule ---- */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.cat-card { display:flex; flex-direction:column; gap:.3rem; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4); text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .08s ease; }
.cat-card:hover { border-left-color:var(--sea); transform:translateY(-2px); }
.cat-card .cc-name { font-family:var(--display); font-weight:700; font-size:var(--step-1); line-height:1.15; }
.cat-card .cc-meta { font-size:var(--step--1); color:var(--ink-soft); }
@media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---- PLATFORM PILL (which marketplace a listing lives on) ---- */
.pc-platform { font-size:var(--step--1); font-weight:700; color:var(--ink-soft); }
.pc-platform .pf { display:inline-block; padding:.12rem .5rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem;
  letter-spacing:.03em; text-transform:uppercase; }

/* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */
.honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent);
  border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; }
.honesty .h-h { font-family:var(--display); font-weight:700; font-size:var(--step-1);
  margin:0 0 var(--s2); max-width:none; color:var(--ink); }
.honesty p:last-child { margin-bottom:0; }
.prose .honesty p { max-width:none; }

/* ---- TOUR LIST (category hubs: a dense, scannable row per product) ---- */
.tour-list { display:grid; gap:var(--s3); }
.tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.tour-row.is-lead { border-color:var(--accent); border-top:3px solid var(--accent); }
.tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); }
.tour-row h3 a { color:var(--ink); text-decoration:none; }
.tour-row h3 a:hover { color:var(--brand); }
.tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; }
.tour-row .tr-desc { margin:0; max-width:58ch; }
.tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; }
.tour-row .tr-price { font-family:var(--display); font-weight:700; font-size:var(--step-1); white-space:nowrap; }
.tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; }
@media (max-width:760px){
  .tour-row { grid-template-columns:1fr; }
  .tour-row .tr-cta { align-items:stretch; text-align:left; }
  .tour-row .tr-cta .btn { width:100%; }
}

/* ============================================================
   TOUR-PICKS GRID (depth-cro conversion layer). A 3-card grid dropped into an article body
   before its FAQ. Whole card converts: image, title and button all carry the sponsored link.
   ============================================================ */
.tour-picks {
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--s4); margin:var(--s5) 0;
}
.tour-picks .tp-season {
  font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3);
  border-left:3px solid var(--accent); padding-left:.7rem;
}
.tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } }
.tour-picks .tp-card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden; display:flex; flex-direction:column;
}
.tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; }
.tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; }
.tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; }
.pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em;
  padding:.2rem .55rem; border-radius:var(--radius-sm); background:var(--paper-2); color:var(--ink-soft);
  border:1px solid var(--line); }
.tour-picks .tp-chips .pc-chip { white-space:nowrap; }
.tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); }
.tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; }
.tour-picks .tp-title a { color:var(--ink); text-decoration:none; }
.tour-picks .tp-title a:hover { color:var(--brand); text-decoration:underline; }
.tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; }
.tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; }
.tour-picks .tp-proof-none { font-style:italic; }
.tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); }
.tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:.78rem; padding:.7rem .8rem; }
.tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; }
/* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width,
   so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure
   (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */
.wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks {
  max-width:none;
  width:min(100vw - 2rem, 68rem);
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:700px) {
  .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; }
}

/* ---- v2.1: card-style mid-article CTA (image + body) ---- */
.cta-box.cta-card { display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:center; max-width:none; }
.cta-box.cta-card .cb-media { display:block; }
.cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:170px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
.cta-box.cta-card .cb-body p { margin:0 0 var(--s2); max-width:none; margin-inline:0; text-align:left; }
.cta-box.cta-card .tp-proof { color:var(--ink-soft); font-size:var(--step--1); }
@media (max-width: 700px) { .cta-box.cta-card { grid-template-columns:1fr; } }
/* category card: who-it's-for line */
.cat-card .cc-who { display:block; margin-top:.35rem; color:var(--ink-soft); font-size:var(--step--1); font-weight:600; }

/* ---- v2.2: section intros span the container, rows + cat cards carry images ---- */
.section.wrap > p { max-width: none; }
.tour-row.has-media { grid-template-columns: 220px 1fr auto; }
.tour-row .tr-media { display:block; align-self:stretch; }
.tour-row .tr-media img { width:100%; height:100%; min-height:150px; object-fit:cover; border-radius:var(--radius-sm); display:block; }
@media (max-width: 860px) {
  .tour-row.has-media { grid-template-columns: 1fr; }
  .tour-row .tr-media img { min-height:0; max-height:210px; }
}
.cat-card { padding-top:0; overflow:hidden; }
.cat-card .cc-media { display:block; margin:0 calc(-1 * var(--s4)) var(--s2); }
.cat-card .cc-media img { width:100%; height:130px; object-fit:cover; display:block; }

/* homepage per-category anchor blocks (inside the group sections) */
.cat-block { margin-top: var(--s5); scroll-margin-top: 5.5rem; }
.cat-block > h3 { margin-bottom: var(--s1); }
.cat-block > p.small { margin-top: 0; color: var(--ink-soft); }
section[id] { scroll-margin-top: 5.5rem; }

/* single mid-article conversion card (gradual blog placements) */
.tp-solo { margin: var(--s5) 0; }
.tp-solo .tp-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }

/* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */
.tour-hero { padding-top: var(--s4); }
.tour-hero-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } }
.tour-hero .hero-media { aspect-ratio:auto; }
.tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); }
.booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; }
.booking-panel .bp-title { font-family: var(--display); font-weight: 700; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; }
.bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); }
.bp-rating .gold { color: var(--gold); font-weight: 700; }
.bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); }
.bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--display); }
.bp-price small { display: block; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--body); font-weight: 400; }
.btn-block { display: block; width: 100%; text-align: center; }
.bp-next { color: var(--ink-soft); margin: var(--s2) 0 var(--s3); }
.bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s3); }
.bp-facts div { min-width: 0; }
.bp-facts dt { font-size: var(--step--1); color: var(--ink-soft); }
.bp-facts dd { margin: 0; font-size: var(--step--1); font-weight: 600; }

/* ============================================================
   V3.1 DESIGN DIRECTOR + homepage blueprint components (04-block-library.md 4.5), 2026-09-03.
   split-hero-booking homepage; destination modules: operator-comparison (#quick-comparison)
   and the season/storm-window calendar (#season). See research/design-blueprint.json.
   ============================================================ */

/* ---- RESPONSIVE COMPARISON TABLE ("table-card-hybrid" archetype): zebra rows and no vertical
   borders on desktop, labeled stacked cards under 768px. CSS-only, no JS. ---- */
.table-hybrid { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.table-hybrid th, .table-hybrid td { text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.table-hybrid thead th { background:var(--paper-2); font-family:var(--body); font-weight:800; color:var(--ink); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.table-hybrid tbody tr:nth-child(even) td { background:var(--surface-2); }
.table-hybrid tbody tr:last-child td { border-bottom:0; }
.table-hybrid td a { font-weight:700; }
@media (max-width:768px) {
  .table-hybrid thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; }
  .table-hybrid, .table-hybrid tbody, .table-hybrid tr, .table-hybrid td { display:block; width:100%; }
  .table-hybrid { border:0; border-radius:0; background:transparent; }
  .table-hybrid tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; }
  .table-hybrid tr:last-child { margin-bottom:0; }
  .table-hybrid td, .table-hybrid tbody tr:nth-child(even) td { background:var(--surface); border-bottom:1px solid var(--line); padding:.6rem .9rem; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); text-align:right; }
  .table-hybrid td:last-child { border-bottom:0; }
  .table-hybrid td::before { content:attr(data-label); font-weight:700; color:var(--ink-soft); text-align:left; flex:0 0 auto; }
}
.checked-date { display:inline-block; font-size:.85rem; font-weight:500; color:var(--ink-soft); font-style:italic; }
.compare-intro { max-width: none; color: var(--ink-soft); }
.compare-table td:first-child a { color: var(--brand); }

/* ---- FEATURED-TOUR SPOTLIGHT: text-led card on the linen band, facts list beside the copy ---- */
.featured-tour-card { display:grid; grid-template-columns:1.35fr .85fr; gap:var(--s5); align-items:start; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:var(--s5); }
.featured-tour-card .ft-badge { display:inline-block; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:.32rem .7rem; border-radius:var(--radius-sm); margin-bottom:.7rem; }
.featured-tour-card h3 { font-size: var(--step-2); }
.featured-tour-card .ft-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin: var(--s3) 0 0; }
.ft-facts { list-style:none; margin:0; padding:0; border-left:1px solid var(--line); padding-left:var(--s4); display:grid; gap:.8rem; align-self:stretch; }
.ft-facts li { display:grid; gap:.15rem; }
.ft-facts .ff-k { font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.ft-facts .ff-v { font-weight:600; color:var(--ink); }
@media (max-width:760px){
  .featured-tour-card { grid-template-columns:1fr; padding:var(--s4); }
  .ft-facts { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:var(--s3); }
  .featured-tour-card .ft-actions .btn { width:100%; }
}

/* ---- DESTINATION STAT GRID ("What Makes ... ") on the night band: number tiles, no icons ---- */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.stat-tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); text-align:left; }
.stat-tile .st-num { display:block; font-family:var(--display); font-weight:700; font-size:var(--step-3); line-height:1; color:var(--brand); margin-bottom:.5rem; }
.stat-tile .st-label { display:block; font-size:var(--step--1); color:var(--ink-soft); line-height:1.45; }
.band-night .stat-tile { background:rgba(255,255,255,.04); border-color:rgba(246,238,220,.2); }
.band-night .stat-tile .st-num { color:var(--gold-bright); }
.band-night .stat-tile .st-label { color:rgba(246,238,220,.82); }
@media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .stat-grid{ grid-template-columns:1fr; } }

/* Complete-Guide Zone divider. */
.guide-zone-intro { max-width:70ch; }

/* ---- SEASON / STORM-WINDOW CALENDAR: hand-authored CSS timeline against the calendar year ---- */
.season-timeline { display:grid; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.season-timeline .st-row { display:grid; grid-template-columns: 15rem 1fr; gap: var(--s3); align-items:center; }
.season-timeline .st-label { font-weight:700; color: var(--ink); font-size: var(--step--1); }
.season-timeline .st-track { position:relative; height: 1.6rem; background: var(--paper-2); border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); }
.season-timeline .st-bar { position:absolute; top:0; bottom:0; background: var(--sea); border-radius: var(--radius-sm); }
.season-timeline .st-bar.is-yearround { background: var(--sea); opacity:.55; }
.season-timeline .st-bar.is-storm { background: var(--accent); opacity:.85; }
.season-timeline .st-months { display:grid; grid-template-columns: 15rem 1fr; gap: var(--s3); }
.season-timeline .st-scale { display:flex; justify-content:space-between; font-size: .74rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:620px) {
  .season-timeline .st-row, .season-timeline .st-months { grid-template-columns: 1fr; }
  .season-timeline .st-label { margin-bottom: .1rem; }
}

/* ---- MAP SECTION: real Google Maps embed + hand-authored SVG pin schematic side by side ---- */
.spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:start; margin-top:var(--s3); }
.spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; }
.spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s3); }
.spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; }
.map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.5rem; }
@media (max-width:820px){ .spot-map-wrap{ grid-template-columns:1fr; } }

/* ---- FULL TESTIMONIALS: individual real quotes on the linen band ---- */
.testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.testimonial-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); }
.testimonial-card .tc-stars { color:var(--gold); letter-spacing:.1em; margin-bottom:.5rem; }
.testimonial-card blockquote { margin:0 0 .6rem; font-family:var(--display); font-size:var(--step-1); line-height:1.4; max-width:none; }
.testimonial-card .tc-attr { font-size:var(--step--1); color:var(--ink-soft); font-weight:600; margin:0; }
.testimonials-disclaimer { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); max-width:none; }
@media (max-width:680px){ .testimonials-grid{ grid-template-columns:1fr; } }

/* ---- CATEGORIZED "ANSWERED" GUIDES/BLOG GRID ---- */
.answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); }
.answered-group h3 { font-size:var(--step-0); font-family:var(--body); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--line); }
.answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.answered-group li { display:flex; gap:.45rem; align-items:baseline; font-size:var(--step--1); line-height:1.35; }
.answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; }
.answered-group li a:hover { text-decoration-color:currentColor; color:var(--brand); }
.answered-group .ag-kind { font-family:var(--body); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); flex:none; }
@media (max-width:900px){ .answered-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .answered-grid{ grid-template-columns:1fr; } }
.pending-line { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); font-style:italic; }

/* ---- Hand-drawn icons + yes/no glyphs (inclusions matrix) ---- */
.ico { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; flex:none; }
.glyph { display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; }
.glyph .ico { width:1rem; height:1rem; stroke-width:2.6; vertical-align:0; }
.glyph.yes { background:rgba(23,93,114,.14); color:var(--sea); }
.glyph.no { background:rgba(11,125,121,.10); color:var(--brand); }

/* ---- WHERE TO STAY: hotel picks ---- */
.hotel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.hotel-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.5rem; }
.hotel-card .hc-tier { font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--gold-ink); background:var(--gold-soft); align-self:flex-start; padding:.2rem .6rem; border-radius:999px; }
.hotel-card h3 { margin:0; font-size:var(--step-0); }
.hotel-card .hc-area { color:var(--ink-soft); font-size:.85rem; margin:0; display:flex; align-items:center; gap:.35rem; }
.hotel-card .hc-rating { font-size:.85rem; margin:0; }
.hotel-card .hc-rating .gold { color:var(--gold-ink); font-weight:700; }
.hotel-card p { margin:0; font-size:var(--step--1); }
.hotel-card .btn { margin-top:auto; align-self:flex-start; }
@media (max-width:860px){ .hotel-grid { grid-template-columns:1fr; } }

/* Editorial section photo break (text-heavy sections). */
.section-img { width: 100%; max-width: 780px; border-radius: var(--radius); overflow: hidden; margin: var(--s3) 0 var(--s4); border:1px solid var(--line); }
.section-img img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }

/* ---- PLACEHOLDER SKIN (skeleton only): every .tbd element is unmistakable on screen and must be
   replaced by the homepage copy pass before publishing. Delete this block once no .tbd remains. ---- */
.tbd { outline: 2px dashed var(--accent); outline-offset: 3px; background: rgba(194,75,46,.06); color: var(--ink-soft); font-style: italic; }
.tbd::before { content:"Placeholder"; font-style:normal; font-family:var(--body); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.12rem .4rem; margin-right:.5rem; border-radius:2px; vertical-align:middle; }
.band-night .tbd, .hero-dusk .tbd { color: var(--night-ink); }

/* decision-names: tour-official (rule 36) */
.tour-official{margin:.35rem 0 0;font-size:var(--step-0,1rem);line-height:1.45;color:var(--ink-soft,var(--slate,#6b6b6b));font-weight:400}

/* ============================================================
   AQUARIUM DATA BLOCKS ({{ stat_tiles }}, {{ zone_cards }}, {{ zone_explorer }},
   {{ feeding_clock }}, {{ photo_collage }}). Palette tokens only, no raw hex beyond the
   caption scrim, which has to be a true black-to-transparent gradient over photography.
   ============================================================ */

/* Unit suffix inside a stat tile: keeps "2.5" big and "million litres" readable next to it. */
.st-unit { display:block; font-family:var(--body); font-weight:700; font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:.25rem; }
.band-night .st-unit { color:rgba(232,241,243,.78); }

/* ---- Shared chip control (zone explorer + feeding clock) ---- */
.chip { font-family:var(--body); font-weight:700; font-size:var(--step--1); min-height:40px; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem 1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.chip:hover { border-color:var(--sea); }
.chip.is-active { background:var(--sea); border-color:var(--sea); color:var(--night-ink); }
.chip:focus-visible { outline:3px solid var(--accent-bright); outline-offset:2px; }
.chip-n { font-size:.72rem; font-weight:800; letter-spacing:.04em; color:var(--ink-soft); }
.chip.is-active .chip-n { color:var(--night-ink); opacity:.85; }

/* ---- Zone cards: one per named exhibit, in route order ---- */
.zone-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); }
.zone-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.45rem; scroll-margin-top:5rem; }
.zone-card .zc-step { margin:0; font-family:var(--body); font-weight:800; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-bright); }
.zone-card h3 { margin:0; font-size:var(--step-1); }
.zone-card .zc-species { margin:0; font-size:var(--step--1); font-weight:700; color:var(--sea); }
.zone-card .zc-blurb { margin:0; font-size:var(--step--1); color:var(--ink-soft); max-width:none; }
.zone-card .zc-meta { list-style:none; margin:auto 0 0; padding:.7rem 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font-size:.82rem; color:var(--ink-soft); }
.zone-card .zc-meta li { display:flex; align-items:center; gap:.35rem; }
.zone-card .zc-meta .ico { color:var(--brand); }
@media (max-width:900px){ .zone-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .zone-grid { grid-template-columns:1fr; } }

/* ---- Interactive block: zone explorer ---- */
.zone-explorer { margin-top:var(--s4); }
.zx-controls { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.zx-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.zx-sort { display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); font-weight:700; }
.zx-sort select { min-height:40px; border-radius:var(--radius); border:1.5px solid var(--line); background:var(--surface); color:var(--ink); padding:.3rem .6rem; font:inherit; }
.zx-sort select:focus-visible { outline:3px solid var(--accent-bright); outline-offset:2px; }
.zx-status, .fc-status { font-size:var(--step--1); color:var(--ink-soft); margin:.8rem 0; max-width:70ch; }
.zx-empty { background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:var(--s4); text-align:center; display:grid; gap:.7rem; justify-items:center; font-size:var(--step--1); color:var(--ink-soft); }
.zx-empty[hidden], .table-scroll[hidden] { display:none; }

/* ---- Interactive block: feeding clock ---- */
.feeding-clock { margin-top:var(--s4); }
.fc-controls { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); display:grid; gap:var(--s3); }
.fc-row { display:grid; gap:.5rem; }
.fc-legend { font-family:var(--body); font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.fc-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.fc-check { display:flex; align-items:center; gap:.5rem; min-height:40px; font-size:var(--step--1); cursor:pointer; }
.fc-check input { width:18px; height:18px; accent-color:var(--sea); }
.fc-table tbody tr.is-off td { opacity:.5; }
.fc-table tbody tr.is-passed td { color:var(--ink-soft); }
.fc-table tbody tr.is-catchable td { background:var(--gold-soft); color:var(--gold-ink); }
.fc-table tbody tr.is-catchable td:first-child { box-shadow:inset 3px 0 0 var(--accent-bright); font-weight:800; }

/* Designed-table trim shared by both interactive tables (rule 27): display-font header on the
   raised panel tone, right-aligned numerics, and no forced min-width once .table-hybrid has
   already collapsed to stacked cards on a phone (that combination scrolled inside its own box
   for no reason). */
.zx-table thead th, .fc-table thead th, .ai-table thead th { font-family:var(--display); font-weight:700; letter-spacing:.06em; }
.zx-table td.num, .zx-table th.num, .fc-table td.num, .fc-table th.num,
.ai-table td.num, .ai-table th.num { text-align:right; }
.zx-table td:first-child a { font-weight:700; }
@media (max-width:760px){
  .table-scroll > .table-hybrid { min-width:0; }
  .zx-table td.num, .fc-table td.num, .ai-table td.num { text-align:right; }
  .zx-controls, .fc-controls { padding:var(--s3); }
}

/* ---- Photo collage (rule 32): one tile per named exhibit, 4-col with a 2x2 hero ---- */
.photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:.6rem; margin-top:var(--s4); }
.pcol-tile { position:relative; display:block; margin:0; border-radius:var(--radius-sm); overflow:hidden; background:var(--paper-2); }
.pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; }
.pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.pcol-tile:hover img { transform:scale(1.05); }
.pcol-cap { position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem .4rem; font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--night-ink); background:linear-gradient(180deg, rgba(11,42,50,0) 0%, rgba(11,42,50,.82) 100%); }
.pcol-hero .pcol-cap { font-size:1rem; padding:.8rem .9rem .6rem; }
@media (max-width:900px){ .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:120px; } }
@media (max-width:600px){
  .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 1; }
  .pcol-tile:nth-child(n+7) { display:none; }
}
@media (prefers-reduced-motion: reduce){ .pcol-tile img, .chip { transition:none; } .pcol-tile:hover img { transform:none; } }
/* .table-hybrid turns rows into blocks on a phone, and that author rule outranks the UA
   [hidden] rule, so a filtered-out row would reappear at exactly the width where filtering
   matters most. Pin it shut for both interactive tables. */
.zx-table tr[hidden], .fc-table tr[hidden] { display:none !important; }
.chip[disabled] { opacity:.4; cursor:not-allowed; }
.chip[disabled]:hover { border-color:var(--line); }

/* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */
.decision-picker { --dp-key: var(--brand, var(--sea, #24506a)); --dp-line: var(--line, #dfe3e6);
  --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #f5f6f7));
  --dp-ink: var(--ink, #1b1f23); --dp-soft: var(--ink-soft, #5b6570);
  background:var(--dp-surface); border:1px solid var(--dp-line); border-radius:var(--radius, 10px);
  padding:var(--s4, 1.5rem); box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.06)); }
.decision-picker .dp-q { border:0; padding:0; margin:0 0 var(--s3, 1rem); min-width:0; }
.decision-picker .dp-q legend { font-family:var(--display, inherit); font-weight:800;
  font-size:var(--step-0, 1rem); color:var(--dp-ink); padding:0 0 .45rem; }
.decision-picker .dp-opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.decision-picker .dp-opt { font-family:var(--body, inherit); font-size:var(--step--1, .9rem); font-weight:600;
  color:var(--dp-ink); background:var(--dp-surface); border:1.5px solid var(--dp-line); border-radius:999px;
  padding:.5rem .9rem; cursor:pointer; line-height:1.25; min-height:40px;
  transition:border-color .15s ease, background .15s ease, color .15s ease; }
.decision-picker .dp-opt:hover { border-color:var(--dp-key); color:var(--dp-key); }
.decision-picker .dp-opt.is-on { background:var(--dp-key); border-color:var(--dp-key); color:#fff; }
.decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; }
.decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); }
.decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px);
  background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; }
.decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); }
.decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line);
  border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); }
.decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.decision-picker .dp-card.dp-fold { display:none; }
/* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a
   card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */
.decision-picker .dp-card[hidden] { display:none !important; }

.decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); }
.decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; }
.decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; }
.decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; }
.decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; }
.decision-picker .dp-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; }
.decision-picker .dp-facts span { font-size:.72rem; font-weight:600; background:var(--dp-surface);
  color:var(--dp-soft); border:1px solid var(--dp-line); border-radius:999px; padding:.2rem .55rem; }
.decision-picker .dp-price { margin:0; font-size:var(--step--1, .9rem); max-width:none; }
.decision-picker .dp-price strong { font-family:var(--display, inherit); font-size:var(--step-0, 1rem); }
.decision-picker .dp-rev { color:var(--dp-soft); }
.decision-picker .dp-body .btn { margin-top:auto; text-align:center; }
@media (max-width:900px){ .decision-picker .dp-results { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .decision-picker { padding:var(--s3, 1rem); }
  .decision-picker .dp-results { grid-template-columns:1fr; }
  .decision-picker .dp-card { flex-direction:row; }
  .decision-picker .dp-media { width:38%; flex:none; aspect-ratio:1/1; }
}

/* ---- Interactive-block tap targets (rule 33: >=40px on phones) ------------------------------
   The chips, buttons and selects in the decision picker, zone explorer and feeding clock all
   measured exactly 40px, but the LINKS inside those blocks did not: zone-name links in the
   explorer table came in at 26.6px and the picker's tour-title links at 39.2px on a 390px
   viewport. Links are the highest-intent targets in all three blocks, so they get the same
   floor as the controls, with a little more room than the 40px minimum. Applied only where a
   finger is actually used; the desktop layout is untouched. */
@media (max-width: 760px) {
  #zone-explorer td a,
  #feeding-clock td a,
  .dp-name a,
  .dp-card a:not(.btn) {
    display: inline-block;
    min-height: 44px;
    line-height: 1.35;
    padding-block: 9px;
  }
  /* The picker's card title is a block-level heading link: stretch the hit area to the card
     width so the whole title line is tappable, not just the glyphs. */
  .dp-name a { display: block; }
}

/* Category-card media (rule 24) and the tour-pick card price line (rule 13). */
.cat-card { display: flex; flex-direction: column; overflow: hidden; }
.cc-media { display: block; margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s2); }
.cc-media img { display: block; width: 100%; height: 160px; object-fit: cover; }
.tp-price { margin: .15rem 0 .35rem; font-weight: 700; color: var(--ink); }
.tp-price small { font-weight: 400; color: var(--ink-soft); }