/* palaciodemonserrate.com — "Botanical" design system (design.md).
   Pressed leaves, tea-stained paper, a copper ink. Deep herb green primary
   on parchment, one copper accent that drives interaction, and nothing else.
   Flat by design: no gradients, one accent action per screen.

   THIS FILE ARRIVED DESCRIBING A DIFFERENT SITE ENTIRELY - a previous build
   in this series, its own design system and its own accent - in the three
   lines above a palette that had already been re-solved for Sintra. So the
   comment was wrong and everything under it was right, which is the hardest
   version to notice. check_carryover.py exists to catch precisely that and
   reported clean, because it globbed *.py and *.md and a stylesheet is
   neither; it scans .css now, and style.css is in its FATAL list. The footer
   below was still carrying that build's greys - see ON THE DARK BAND in
   :root. (The previous domain is deliberately not written here: the gate that
   found this reads these opening lines for a site name, and a name in the
   explanation reads the same to it as a name in the original.) */

:root{
  --ink:#2A3A1F;        /* primary: headlines & core text */
  --sage:#686A53;       /* secondary: borders, meta, captions */
  --coral:#9E5C37;      /* tertiary: the single interaction accent */
  --coral-ink:#975935;  /* readable orange (same hue) for link/body text */
  --coral-dk:#8B5130;   /* button hover */
  --neutral:#F0EAD6;    /* page foundation */
  --surface:#F7F1DC;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#DED6BC;
  /* ON THE DARK BAND (--ink). siteconfig's DESIGN_DEVIATIONS table already
     declared both of these, with their measured ratios, as deliberate
     additions to the brief - and NEITHER WAS EVER IN THIS FILE. The footer and
     the takeaways box went on using the ported greys, so the deviations table
     documented a fix that had not been made and read as though it had.
       --muted-on-ink  #9FA287 on #2A3A1F = 4.64:1  (was var(--muted-on-ink), 3.81:1)
       --coral-on-ink  #CD926F on #2A3A1F = 4.61:1  (was --coral, 2.34:1)
       --on-ink        #CBCCBE on #2A3A1F = 7.50:1  (was var(--on-ink), a grey off
                       this palette's hue; same job, solved along the sage hue)
       --line-on-ink   #585946 on #2A3A1F = 1.70:1  hairline separators only,
                       never a control edge and never carrying meaning; the
                       ported var(--line-on-ink) was 1.11:1 and effectively invisible. */
  --muted-on-ink:#9FA287;
  --coral-on-ink:#CD926F;
  --on-ink:#CBCCBE;
  --line-on-ink:#585946;
  /* design.md rounded.sm/md/lg. These read 8/14/24 - the previous system's
     numbers - against a brief that asks for 2/6/12. */
  --r-sm:2px;
  --r-md:6px;
  --r-lg:12px;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:18px;line-height:1.6;color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.logo,.display{font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:2.3rem;margin:.1em 0 .5em;font-weight:700;letter-spacing:-.04em}
h2{font-size:1.7rem;margin:2.2em 0 .6em}
h3{font-size:1.2rem;margin:1.6em 0 .4em}
h4{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}

.label{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--coral);color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 20px;border-radius:var(--r-md);border:2px solid var(--coral);
  transition:background .15s,border-color .15s;text-align:center;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--white);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a.btn{margin-top:10px;text-align:center}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.74rem;color:var(--sage);padding:14px 22px 0;text-transform:uppercase;letter-spacing:.05em}
.crumb a{color:var(--sage)}

/* ---------- hero (flat solid overlay, not a gradient) ---------- */
.hero{position:relative;background:var(--ink) center/cover no-repeat;background-image:url('/images/hero.jpg');color:#fff;border-bottom:4px solid var(--coral)}
.hero{background-image:-webkit-image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'))}
/* THE SCRIM IS SOLVED AGAINST THIS PHOTOGRAPH, NOT INHERITED.
   The hero is the palace above the main lawn: bright sky top-right, sunlit
   grass across the bottom, and it is a far higher-key picture than the one
   this flat rgba(21,24,24,.44) was tuned for. Measured on rendered pixels at
   1366px, p95 luminance inside each text box:
       label 3.48:1  h1 4.80  lede 6.61  trust 15.06  btn 21.00
   - the eyebrow label failed at 12px against a 4.5 floor.
   Raising the flat layer to .58 fixes the label (4.83) and flattens the whole
   photograph to do it. The copy sits in the upper left, so weight the scrim
   where the text is and let the lawn keep its light instead:
       label 5.39  h1 6.70  lede 7.83  trust 15.06  btn 21.00
   ...which passes the 4.5 floor everywhere and STILL READ AS TOO LIGHT to the
   client, who is looking at the page rather than at a table. Both things are
   true: WCAG AA is a floor for legibility, not a description of how a white
   heading sits on a sunlit lawn. So the scrim is darker again, and the numbers
   below are what it now measures rather than what it needs:
       390   label 8.09  h1 10.30  lede 7.23
       1366  label 7.54  h1  9.44  lede 9.80
       1920  label 7.43  h1  9.58  lede 9.93
   Nothing below 7:1 at any width, against a 4.5 requirement. The photograph
   still reads - the lawn and the palace keep their shape - because the weight
   is on the top of the frame where the copy is, and ::after below already
   carries the bottom edge.
   MEASURED AT THREE WIDTHS, because the crop under a text box changes with the
   layout: an earlier solution passed at 1366 and left the lede at 4.59 on a
   390px phone. */
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,24,24,.82),rgba(21,24,24,.68) 42%,rgba(21,24,24,.68))}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,rgba(21,24,24,0),rgba(21,24,24,.72))}
.hero .wrap{position:relative;z-index:1;padding:163px 22px 145px;min-height:550px;display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:52%}
.hero .label{color:#FFC9B0;opacity:.98}
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:#fff;font-weight:700;letter-spacing:-.045em}
.hero .lede{font-size:1.18rem;color:#ECEDEA;margin-bottom:1.5em;line-height:1.5}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.6em}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero-trust{font-size:.95rem;color:#D9DBD7;margin:0}
.hero-trust b{color:#fff}
@media(max-width:900px){.hero-copy{max-width:100%}}
@media(max-width:640px){.hero h1{font-size:2.1rem}.hero .wrap{padding:64px 22px 56px;min-height:0}}

/* ---------- tour-data facts strip (under hero) ---------- */
.facts-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0}
.facts-item{flex:1 1 0;min-width:150px;padding:16px 22px;border-right:1px solid var(--line)}
.facts-item:last-child{border-right:0}
.facts-val{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.facts-val .star{color:var(--coral)}
.facts-label{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.7rem;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-top:.45em}
@media(max-width:780px){.facts-item{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.facts-item:nth-child(2n){border-right:0}}
@media(max-width:420px){.facts-item{flex:1 1 100%;border-right:0}}

/* ---------- on-page jump bar (sticky anchor menu, homepage) ---------- */
.section-nav{position:sticky;top:66px;z-index:30;background:var(--ink);border-bottom:1px solid var(--ink)}
.section-nav .wrap{display:flex;gap:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.section-nav .wrap::-webkit-scrollbar{display:none}
.section-nav a{flex:0 0 auto;display:inline-block;padding:13px 18px;color:#fff;
  font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
.section-nav a:hover{background:var(--coral);color:#fff;text-decoration:none}
@media(max-width:780px){.section-nav{top:0}.section-nav a{padding:12px 15px;font-size:.8rem}}

/* ---------- explore link cluster (keyword interlinks, above footer) ---------- */
.explore{margin:2.4em 0 0;padding:26px 0 0;border-top:2px solid var(--ink)}
.explore h2{margin:0 0 .7em}
.explore-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.explore-links a{display:block;font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.92rem;font-weight:500;
  color:var(--ink);padding:6px 0 6px 16px;border-left:3px solid var(--coral);line-height:1.35}
.explore-links a:hover{color:var(--coral-ink);border-left-color:var(--coral-ink)}
@media(max-width:780px){.explore-links{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.explore-links{grid-template-columns:1fr}}

/* ---------- main / prose ---------- */
.section-pad{padding-top:40px;padding-bottom:64px}
.prose{max-width:760px;margin:0 auto}
.prose.wide{max-width:960px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em}
.prose li{margin:.32em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em;margin:.5em 0}
ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700}

/* page-hero banner inside articles */
.page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden}
.page-hero img{width:100%;max-height:380px;object-fit:cover}

/* ---------- answer box ---------- */
.answer-box{background:var(--neutral);border-left:5px solid var(--coral);padding:20px 24px;margin:0 0 1.8em;border-radius:0 var(--r-md) var(--r-md) 0}
.answer-box p{margin:0}
.answer-box strong{color:var(--ink)}
.answer-box a{text-decoration:underline;text-underline-offset:2px}

/* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */
.ia-takeaways{background:var(--ink);border-radius:var(--r-lg);padding:26px 30px;margin:34px 0;color:rgba(255,255,255,.92)}
.ia-takeaways h2{color:#fff;margin:0 0 14px;font-size:1.25rem}
.ia-takeaways ul{list-style:none;margin:0;padding:0}
.ia-takeaways li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.14)}
.ia-takeaways li:last-child{border-bottom:0}
.ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--coral-on-ink);font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
/* THIS RULE READ  color:var(--accent,var(--coral)); filter:brightness(1.35)
   AND IT IS WORTH SAYING WHY THAT IS THE BAD VERSION OF THE RIGHT INSTINCT.
   Somebody knew the copper was too dark on this band and lightened it - with
   a filter, at render time, from a variable (--accent) THIS STYLESHEET NEVER
   DEFINES, so the declared colour fell back to --coral #9E5C37 at 2.34:1 on
   --ink. Two consequences. The declared colour is what the contrast gate
   composites, so the gate reported the failure and a human reading the CSS
   would have said "no, look, there's a brightness on it" and waved it through.
   And brightness() is a rendering multiplier, not a colour decision: nothing
   in this file records what ratio it was aiming for, nothing re-checks it, and
   it applies to the element's whole rendering rather than to its text.
   A solved token says the number out loud and the gate can read it. */
.ia-takeaways a{color:var(--coral-on-ink);text-decoration-color:rgba(255,255,255,.35)}
.ia-takeaways a:hover{color:#fff}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.96rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- tip / keyfacts / proscons ---------- */
.tip{background:var(--neutral);border:2px solid var(--coral);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em}
.tip p{margin:0}

.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0}
.keyfacts div{background:var(--surface);padding:14px 16px}
.kf-label{display:block;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1.02rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}

.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-color:var(--coral)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-color:var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}

/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
/* Same 2.34:1 as the takeaways box, on the review pages - and the contrast
   gate never saw it, because it measured the homepage and the first four
   nav routes and .scorecard appears on none of them. The gate picks its
   routes by component now. */
.sc-stars{color:var(--coral-on-ink);letter-spacing:2px;margin:.2em 0}
.sc-rev{font-size:.8rem;color:#D9DBD7}
.sc-price{margin-top:.5em;font-weight:700;color:#fff}
.sc-specs{padding:8px 22px;background:var(--surface)}
.sc-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sc-row:last-child{border-bottom:0}
.sc-row span{color:var(--sage)}
.sc-row b{text-align:right}
@media(max-width:560px){.scorecard{grid-template-columns:1fr}}

/* ---------- review hub cards ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.5em 0 .4em}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;background:var(--surface);color:var(--ink);transition:border-color .15s}
.rev-card:hover{border-color:var(--coral);text-decoration:none}
.rev-thumb{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.rev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rev-card:hover .rev-thumb img{transform:scale(1.04)}
.rev-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px}
.rev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.6em}
.rev-score{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:500;font-size:.72rem;color:var(--sage)}
.rev-card h3{font-weight:700;font-size:1.05rem;line-height:1.3;margin:0 0 .4em}
.rev-card p{font-size:.92rem;color:var(--sage);margin:0 0 1em}
.rev-price{font-weight:700;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.5em}

/* ---------- tour cards ---------- */
.tours-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:20px;margin:1.5em 0 .4em}
.tours-grid.cols-4{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:860px){.tours-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px){.tours-grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tours-grid,.tours-grid.cols-4{grid-template-columns:1fr}}
.tour{border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color .15s}
.tour:hover{border-color:var(--coral)}
/* whole card is an <a> (see helpers._card) — kill link styling, keep hover feedback */
a.tour{color:inherit;text-decoration:none}
a.tour:hover .btn{filter:brightness(1.08)}
.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:var(--coral);color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm)}
.tour-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.tour-body h3{font-size:1.02rem;margin:0 0 .45em;line-height:1.25;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
.star{color:var(--coral)}
.price{font-weight:700;margin-bottom:.8em}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto}
/* decorative desert filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:2px dashed #e0c4ad;background:var(--neutral);align-items:center;justify-content:center;min-height:180px}
.tour-filler:hover{border-color:#e0c4ad}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.tour-filler .filler-label{position:relative;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--sage);background:rgba(244,245,242,.78);padding:5px 11px;border-radius:var(--r-sm)}
@media(max-width:860px){.tour-filler{display:none}}

/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)}
.book-chip{position:absolute;top:-13px;left:18px;background:var(--coral);color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm)}
.gyg-frame{min-height:220px}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* Break the comparison table out of the 760px prose column so it has more room
   to breathe. Prose has ~158px of slack each side inside .wrap, so -110px is safe. */
@media(min-width:1080px){.cmp-wrap{margin-left:-110px;margin-right:-110px}}
table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1.02rem}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)}
table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:700}
table.cmp .rowlabel{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);margin-bottom:6px}
.feat-title{display:block;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,24,24,.82);color:#fff;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.72rem;padding:14px 12px 9px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:1.5em 0;counter-reset:s}
.step{border-top:3px solid var(--coral);padding:14px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:1.5rem;color:var(--coral-ink);display:block;margin-bottom:.1em}
.step h3{margin:0 0 .25em;font-size:1.05rem}
.step p{font-size:.9rem;color:var(--sage);margin:0}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}

/* ---------- reviews band ---------- */
.reviews-band{background:var(--neutral);border-radius:var(--r-lg);padding:24px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:800;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px}

/* ---------- honest guide ---------- */
.honest-guide{background:var(--neutral);border-radius:var(--r-lg);padding:32px 30px;margin:2.4em 0}
.honest-guide h2{margin-top:0}
.honest-guide .lead{font-size:1.1rem;color:var(--ink)}
.honest-guide h3{margin-top:1.5em}
.guide-fig{margin:1.5em 0}
.guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)}
.guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic}

/* ---------- FAQ ---------- */
.faq{margin:1em 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:14px 30px 14px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem}
.faq details[open] summary::after{content:"\2212"}
.faq-body{padding:0 0 12px}
.faq-body p{margin:0}
.faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)}
.faq-contact a{color:var(--coral-ink)}

/* ---------- disclosure ---------- */
.disclosure{font-size:.84rem;color:var(--sage);background:var(--neutral);border-radius:var(--r-md);padding:13px 16px;margin:1em 0 1.6em}
.disclosure a{color:var(--coral-ink)}

/* related strip */
.related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.2em}

/* sitemap */
.sitemap-list{list-style:none;padding-left:0}
.sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative}
.sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-ink);margin-top:40px;border-top:4px solid var(--coral)}
.site-foot .wrap{padding:48px 22px 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px}
.site-foot .brand .logo{color:#fff;margin-bottom:.6em}
.site-foot .brand p{font-size:.9rem;max-width:34em}
.site-foot h4{color:#fff;margin-bottom:.8em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.4em 0}
.site-foot a{color:var(--on-ink);font-size:.92rem}
.site-foot a:hover{color:#fff}
.foot-guides{margin-top:30px;border-top:1px solid var(--line-on-ink);padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid var(--line-on-ink);padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-ink)}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:var(--on-ink);font-size:.86rem}
.foot-answers a:hover{color:#fff}
.foot-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;border-top:1px solid var(--line-on-ink);padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-ink);margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-searches{margin-top:22px;border-top:1px solid var(--line-on-ink);padding-top:20px}
.foot-searches h4{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-ink);margin:0 0 12px}
.foot-searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot-searches li{margin:0}
.foot-searches a{display:inline-block;padding:5px 11px;border:1px solid var(--line-on-ink);border-radius:var(--r-sm);font-size:.78rem;color:var(--muted-on-ink);line-height:1.3;transition:color .15s,border-color .15s,background .15s}
.foot-searches a:hover{color:#fff;border-color:var(--coral);background:rgba(255,255,255,.05)}
.foot-bottom{margin-top:28px;border-top:1px solid var(--line-on-ink);padding-top:18px;font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.74rem;color:var(--muted-on-ink)}
.foot-bottom a{color:var(--on-ink)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(2,1fr)}}

/* ---------- homepage: "what's included" two-column ---------- */
.includes{margin:2.2em 0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px}
.includes h2{margin:0 0 .25em}
.includes-lead{color:var(--sage);margin:0 0 1.2em;font-size:1rem}
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.includes-col h3{font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--coral);display:inline-block}
.includes-col ul.check{margin:0}
.includes-col .muted{color:var(--sage);font-style:italic}
@media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- homepage: route / "what you see, in order" (AEO) ---------- */
.route{margin:2.4em 0}
.route h2{margin:0 0 .25em}
.route-lead{color:var(--sage);margin:0 0 1.1em;font-size:1rem}
.route-stops{list-style:none;margin:1.4em 0;padding:0;counter-reset:stop}
.route-stops li{counter-increment:stop;position:relative;padding:0 0 1.1em 3.2em;margin:0}
.route-stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.85rem;font-weight:600;border-radius:var(--r-sm)}
.route-stops li:not(:last-child):after{content:"";position:absolute;left:.95rem;top:2rem;bottom:.2em;width:2px;background:var(--line)}
.route-stops li strong{color:var(--ink)}

/* ---------- homepage: wide photo gallery (breaks out of prose) ---------- */
.photo-wide{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.6em 0}
/* THE TWO FULL-BLEED BLOCKS BREAK OUT OF THE 760px MEASURE ON PURPOSE - the
   gallery and the testimonial cards want the width - BUT THEIR HEADINGS DO
   NOT. Both arrived text-align:center, which put the gallery label 322px
   right of where every other heading on the page starts and the testimonials
   heading 191px right of it: 30 alignment failures across five viewports,
   all of them these four elements.
   The alignment gate names these exact selectors, which is the previous
   build's way of saying an intro block lines up with the text it introduces.
   Fix: keep the wide band, put the head back on the measure. A 760px block
   with auto margins inside a band that is itself centred on the same axis
   starts exactly where .prose starts, at every viewport, without arithmetic. */
.photo-wide-head{text-align:left;max-width:760px;margin:0 auto 1.2em}
.photo-wide-head h2{margin:.15em 0 .3em}
.photo-wide-sub{color:var(--sage);margin:0}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-strip .shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--neutral)}
.photo-strip .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.photo-strip .shot:hover img{transform:scale(1.06)}
@media(max-width:760px){.photo-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.photo-strip{grid-template-columns:1fr}}

/* ---------- homepage: guest testimonials (breaks out of prose) ---------- */
.testimonials{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.8em 0 2.2em}
.testimonials>h2{text-align:left;max-width:760px;margin:0 auto .25em}
.t-lead{text-align:left;max-width:760px;color:var(--sage);margin:0 auto 1.4em}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{margin:0;background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column}
.t-stars{color:var(--coral);letter-spacing:2px;font-size:.92rem;margin-bottom:.5em}
.t-card blockquote{margin:0 0 1em;font-size:.96rem;line-height:1.55;color:var(--ink)}
.t-card figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:.7em}
.t-name{display:block;font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Lora",Georgia,"Times New Roman",serif;font-size:.74rem;color:var(--sage);margin-top:2px}
.t-foot{text-align:left;max-width:760px;color:var(--sage);font-size:.9rem;margin:1.4em auto 0}
@media(max-width:860px){.t-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.t-grid{grid-template-columns:1fr}}
/* ---------------------------------------------------------- author placard
   content_util.author_card() carries its own inline styling because these
   rules did not exist, and it says so in its docstring. They exist now, for
   one reason that is not tidiness: fix_markup.py has a FALLBACK path that
   emits `<span class="author-mono" data-mono="IS" aria-hidden="true"></span>`
   - no text, no inline style - if it cannot read content_util.AUTHOR_FACE.
   With no rule for the class that is a 0x0 invisible element where a face
   should be, and nothing downstream reports it. The ::before below draws the
   initials from the attribute, so BOTH paths render.

   The inline styles content_util writes still win over these (same
   specificity, inline wins), so the placard is unchanged where it already
   worked. Measured, not assumed: ink #2A3A1F on neutral #F0EAD6 is 10.12:1
   and on surface #F7F1DC is 10.78:1. */
.author-card{
  display:flex;gap:18px;align-items:center;margin:18px 0 24px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
}
.author-card b{font-weight:700}
.author-mono{
  width:96px;height:96px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);
  background:var(--neutral);color:var(--ink);
  font-size:1.6rem;font-weight:700;letter-spacing:.06em;
}
/* Only when the span is empty - the content_util path puts real text inside
   and must not have the initials drawn twice. */
.author-mono:empty::before{content:attr(data-mono)}
@media (max-width:520px){
  .author-card{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ==========================================================================
   EIGHT CLASSES THAT WERE IN THE MARKUP AND NOWHERE IN THIS FILE.

   The language switcher rendered as the single word "ENPTESDEFR" pressed
   against the Book button; the six-photograph gallery stacked vertically
   instead of gridding; the pre-footer callout sat flush against the left edge
   of the viewport with its button touching its text. All one cause: .lang-bar,
   .lang-chip, .real-strip, .real-grid, .real-zoom, .breakout, .book-bar,
   .cancel-note, .tour-meta and .lightbox are emitted by the builders and had
   no rule here at all.

   WHY NO GATE CAUGHT IT, which is the part worth keeping:
     * the GRIDS gate enumerates its list of grids BY READING THIS STYLESHEET,
       so a grid with no rule is not a broken grid to it - it is not a grid.
       The one selector that needed checking was the one it could not see.
     * the ALIGNMENT gate names .real-strip > h2 and .real-strip > p by hand,
       which is the previous build's way of saying those must sit on the
       measure - and it measured them against a block that had no width rules,
       so they happened to line up by inheritance.
     * the HEADER gate counts rows and language chips. It counted five chips
       and one row and was satisfied; nothing asked whether a chip is drawn.
   A class present in the markup and absent from the stylesheet is now its own
   gate (qa_battery.gate_orphan_classes), because "no rule" is invisible to
   every gate that starts from the rules.
   ========================================================================== */

/* ---------- language switcher (add_langbar.py) ---------- */
.lang-bar{display:flex;align-items:center;gap:4px;margin-left:14px;flex-shrink:0}
.lang-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 6px;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:.68rem;font-weight:600;letter-spacing:.06em;
  color:var(--sage);                      /* 5.56:1 on white */
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  line-height:1;text-decoration:none;
  transition:color .15s,border-color .15s,background .15s;
}
.lang-chip:hover{color:var(--ink);border-color:var(--sage)}
/* The current language is the one that must not look clickable. */
.lang-chip.is-current{
  color:var(--ink);                       /* 10.12:1 on neutral */
  background:var(--neutral);
  border-color:var(--sage);
  font-weight:700;
}
@media(max-width:900px){
  .lang-bar{margin-left:10px;gap:3px}
  .lang-chip{min-width:26px;height:24px;padding:0 4px;font-size:.62rem;letter-spacing:.04em}
}

/* ---------- the credited photographs (homecontent real-strip) ---------- */
/* Same full-bleed-band-with-its-head-on-the-measure pattern as .photo-wide
   above, and for the same reason: the pictures want the width, the heading
   lines up with every other heading on the page. */
.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
.real-strip{margin:2.8em 0 2.4em}
.real-strip>h2{max-width:760px;margin:0 auto .3em;text-align:left}
.real-strip>p{max-width:760px;margin:0 auto 1.3em;text-align:left;color:var(--sage)}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.real-grid figure{margin:0;display:flex;flex-direction:column}
.real-zoom{display:block;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--line);background:var(--neutral)}
.real-zoom img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .35s ease}
.real-zoom:hover img{transform:scale(1.04)}
.real-grid figcaption{
  margin-top:.55em;font-size:.82rem;line-height:1.45;color:var(--sage);
}
/* The credit runs straight on from the caption in the markup - "...pierced
   plasterwork C30p05m80 / CC BY-SA 4.0" - so it needs a separator, and it must
   come from CSS rather than from a content module: the caption text is the alt
   text, and the two are asserted identical by check_assets. nowrap is wrong
   here too; "RicardoFilipePereira / CC BY-SA 4.0" is wider than a column. */
.real-grid figcaption a{color:var(--coral-ink)}
.real-grid figcaption a::before{content:"\00b7\00a0"}
/* Two is the one short set with a layout of its own; anything else is trimmed
   to whole rows by homecontent._whole_rows before it reaches here. */
.real-grid.pair{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.real-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.real-grid{grid-template-columns:1fr}}

/* ---------- the lightbox the gallery script opens ---------- */
.lightbox{
  position:fixed;inset:0;z-index:60;
  background:rgba(21,24,24,.88);
  display:flex;align-items:center;justify-content:center;padding:28px;
}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1200px,92vw);max-height:92vh;display:flex;flex-direction:column}
.lightbox img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-md)}
.lightbox figcaption{margin-top:.7em;color:var(--on-ink);font-size:.85rem;line-height:1.5}

/* ---------- the pre-footer callout ---------- */
/* It sits AFTER </main>, so it is outside .wrap and was painting flush to the
   viewport edge with its button against its text. It carries its own measure. */
.book-bar{
  background:var(--neutral);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:0;
}
.book-bar>span,.book-bar>a{position:relative}
.book-bar{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:14px 26px;
  padding:22px;
}
.book-bar>span{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:1.05rem;color:var(--ink);          /* 10.12:1 on neutral */
  max-width:44em;
}
@media(max-width:560px){
  .book-bar{flex-direction:column;align-items:flex-start;padding:20px 22px}
  .book-bar>span{font-size:1rem}
}

/* ---------- small blocks the builders emit ---------- */
.cancel-note{
  margin-top:10px;font-size:.8rem;line-height:1.45;color:var(--sage);
}
.tour-meta{
  display:flex;flex-wrap:wrap;gap:2px 10px;
  margin:.5em 0 .9em;font-size:.78rem;color:var(--sage);
}