/* ---------- metric-matched fallback faces ----------------------------------
   Spectral and Inter load with display=swap, so for the first few hundred ms
   the page is set in whatever the visitor's machine offers. Unadjusted, that
   font is a different width, the hero h1 wraps to a different number of lines,
   and when the webfont lands everything below it jumps: measured at 0.20-0.25
   CLS on es/fr/it and 0.05 on en, against Google's 0.1 "good" line. The band
   was 940-1100px, i.e. invisible at the 1280px a screenshot is usually taken at.

   These faces scale the fallback to Spectral's and Inter's own widths so the
   line count does not change when the swap happens. size-adjust is the ratio of
   advance widths measured over the real hero copy of all four languages, per
   weight, not a single figure for the family -- Inter against Arial is 105.25%
   at 400 and 100.87% at 600, and using one number for both puts the nav back on
   a wrap boundary.

   Georgia is deliberately NOT the match target even though it is first in the
   old stack: it has no metric-compatible clone available to measure against,
   whereas Liberation Serif and Liberation Sans are metric clones of Times New
   Roman and Arial by design, so a ratio measured against them is the ratio
   against the real fonts. Georgia stays in the stack after these faces, for
   machines that have it and not Times.

   ascent/descent are divided by size-adjust because size-adjust scales the
   overridden metrics too; without that division the line box would grow by the
   same percentage the glyphs did. line-gap is 0 in both fonts already.
   -------------------------------------------------------------------------- */
@font-face{font-family:"Spectral fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:400;size-adjust:108.56%;ascent-override:97.55%;descent-override:42.65%;line-gap-override:0%}
@font-face{font-family:"Spectral fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:600;size-adjust:104.57%;ascent-override:101.27%;descent-override:44.28%;line-gap-override:0%}
@font-face{font-family:"Spectral fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:700;size-adjust:106.25%;ascent-override:99.67%;descent-override:43.58%;line-gap-override:0%}
@font-face{font-family:"Spectral fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:800;size-adjust:108.97%;ascent-override:97.18%;descent-override:42.49%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:400;size-adjust:105.25%;ascent-override:92.05%;descent-override:22.92%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:500;size-adjust:106.42%;ascent-override:91.04%;descent-override:22.66%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:600;size-adjust:100.87%;ascent-override:96.04%;descent-override:23.91%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:700;size-adjust:101.85%;ascent-override:95.12%;descent-override:23.68%;line-gap-override:0%}
@font-face{font-family:"Inter fb";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Arimo"),local("Albany AMT");font-weight:800;size-adjust:103.31%;ascent-override:93.78%;descent-override:23.35%;line-gap-override:0%}

/* "The reading room, not the gallery" — capillarealdegranada.com.
   Two families doing two jobs, and the split is the design's argument stated in
   the typography: this is a site of TEXT, about a monument you are not allowed
   to photograph, where the only souvenir is what somebody told you.
     --serif  Spectral, for everything you read in sentences: h1 down to body.
     --sans   Inter, for the machinery only: nav, eyebrow labels, badges, table
              headers, the facts strip and every price. Inter carries tabular
              figures, so the ladder of EUR 0 / 7 / 10 / 38 lines up in a column.
   Rule: if you read it in sentences it is --serif; if you scan it in a glance
   it is --sans. Flat by design: no gradients, one accent action per screen.
   The accent is a heraldic pomegranate red and must never be used anywhere it
   could read as blood — buttons only on the crypt page. */

:root{
  --ink:#1C1E22;        /* primary: headlines & core text */
  --sage:#6B6E74;       /* secondary: borders, meta, captions */
  --coral:#A5304A;      /* tertiary: the single interaction accent */
  --coral-ink:#8E2436;  /* readable orange (same hue) for link/body text */
  --coral-dk:#8F2941;   /* button hover */
  --neutral:#F2F1ED;    /* page foundation */
  --surface:#FFFFFF;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#E3E1DC;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:24px;
  --maxw:1240px;
  --serif:"Spectral","Spectral fb",Georgia,"Times New Roman",serif;
  --sans:"Inter","Inter fb",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

*{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:var(--serif);
  /* 19px against an 800px column holds the line at ~83 characters, the same
     measure the 18px/760px pair gave -- the column grows, the line does not. */
  font-size:19px;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:var(--serif);font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:2.3rem;margin:.1em 0 .5em;font-weight:800;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:var(--sans);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:var(--sans);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:var(--sans);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}
/* Six items (five pages + the booking button) need a tighter gap than the old
   anchor menu did, or the row collides with the wordmark around 900px. */
.nav{margin-left:auto;display:flex;align-items:center;gap:19px}
.nav a{color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.01em;white-space:nowrap}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
/* current page: a rule under the label rather than a colour swap, so it still
   reads as "you are here" for anyone who cannot separate the two crimsons */
.nav a.here{color:var(--coral-ink);position:relative}
.nav a.here::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--coral)}
.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}
/* The wordmark is a brand mark, so it may not reflow. Without this it was a
   shrinkable flex item and quietly wrapped "Capilla Real de Granada" onto two
   and then three lines inside a row with a fixed 66px height -- i.e. it
   overflowed its own header, on English as well, and no screenshot at 1280px
   would ever have shown it. Pinned, the same pressure becomes an honest
   overflow that the width sweep can see and the breakpoint below can fix. */
.logo{white-space:nowrap;flex:0 0 auto}
/* Between the collapse point and 1240px the row is full but not broken, so it
   is tightened rather than collapsed: a little less gap and a slightly smaller
   nav label buys ~120px, which is the difference between the French nav needing
   1061px and needing 941px. */
@media(min-width:1001px) and (max-width:1240px){
  .site-head .wrap{gap:13px}
  .nav{gap:13px}
  .nav a{font-size:.85rem}
}
/* 1000, not 900 and not the original 860. Two things widened this row: the
   language dropdown is a seventh item, and the Romance nav labels are longer
   than the English ones ("Getting There" is 13 characters, "Come arrivare" is
   13 but "Guida visitatori" is 16). A width sweep across all four languages put
   the worst case -- French -- clean from 941px up, so the row collapses to the
   drawer at 1000 for every language rather than carrying a per-language
   breakpoint. Measured, not guessed. */
@media(max-width:1000px){
  .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}
  /* the drawer stacks, so the underline would sit on the row divider */
  .nav a.here::after{display:none}
  .nav a.here{padding-left:11px;border-left:3px solid var(--coral)}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--sans);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'))}
.hero::before{content:"";position:absolute;inset:0;background:rgba(21,24,24,.44)}
.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}
/* 52% of a 1196px container is 622px, so above the --maxw cap this is exactly
   the old 52% and the desktop hero is untouched. Below the cap the column used
   to shrink with the viewport, and at ~1020px it was 508px wide: a 4-line h1
   and two CTA buttons that fitted on one line in Inter and two in the fallback,
   which is the last of the font-swap shift the metric-matched faces above do
   not catch. Holding the floor at 620px takes the buttons off that boundary.
   clamp keeps it continuous -- a plain media query would have snapped the
   column 200px wider the moment the window crossed the breakpoint. */
.hero-copy{max-width:clamp(52%,620px,100%)}
.hero .label{color:#FFC9B0;opacity:.98}
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:#fff;font-weight:800;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:var(--sans);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:var(--sans);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}}

/* ---------- intro band ("what is this place", homepage) ----------
   A full-width band, not a prose block: it sits above the jump bar, before the
   prose column opens. The copy column is capped at 34em rather than left to
   fill its grid track, because at 1240px the track alone would run past 90
   characters -- the whole point of the width work was to keep the measure at
   about 83. */
.intro-band{background:var(--white);border-bottom:1px solid var(--line)}
.intro-band .wrap{padding-top:52px;padding-bottom:52px}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:56px;align-items:start}
.intro-copy{max-width:34em}
.intro-copy h2{margin:0 0 .55em;font-size:1.92rem;line-height:1.18;letter-spacing:-.015em}
.intro-copy p{margin:0 0 1em}
.intro-copy p:last-child{margin-bottom:0}
.intro-cta{margin-top:1.5em}
.intro-aside{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 26px 22px}
/* --neutral, not --surface: --surface is #FFFFFF, the same value as the page
   background, so the card would have read as a stray hairline rectangle. */
.intro-aside-head{margin:0 0 1.1em;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
/* the timeline sits inside a bordered card here, so the last item's bottom
   padding would read as uneven space above the card edge */
.intro-aside .timeline{margin:0}
/* Collapse at 1040, not 980: between the two the copy track squeezes under
   about 55 characters, which reads worse than a full-width single column.
   And when it does collapse the cap becomes 800px -- the same measure as the
   prose column below -- because releasing it to the full shell ran the line to
   99 characters, undoing the width work rather than adapting to it. */
@media(max-width:1040px){
  .intro-grid{grid-template-columns:1fr;gap:34px}
  .intro-copy,.intro-aside{max-width:800px}
  .intro-band .wrap{padding-top:40px;padding-bottom:40px}
}
@media(max-width:640px){.intro-copy h2{font-size:1.55rem}}

/* compact timeline: same spine and markers, tighter type. Used in the intro
   card, where the entries are one line of context each rather than paragraphs. */
.intro-aside .timeline li::before{border-color:var(--neutral)}
.timeline--compact li{padding-bottom:1.1em}
.timeline--compact h3{font-size:1rem;margin:.1em 0 .2em}
.timeline--compact p{font-size:.92rem;color:var(--sage);line-height:1.5}
.timeline--compact .tl-year{font-size:.72rem}

/* ---------- 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}
/* Centred by auto margins on the end items rather than justify-content:center.
   The bar scrolls sideways once the links stop fitting, and in a scroll
   container justify-content:center pushes the overflow out past the scroll
   origin, where it cannot be reached -- the first link would be permanently
   unreachable on a phone. Auto margins collapse to zero the moment free space
   runs out, so the bar centres when it fits and scrolls normally when it does not. */
.section-nav a:first-child{margin-left:auto}
.section-nav a:last-child{margin-right:auto}
.section-nav a{flex:0 0 auto;display:inline-block;padding:13px 18px;color:#fff;
  font-family:var(--sans);font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)}
/* the group is centred now, so a trailing divider hangs off its right edge
   with nothing after it */
.section-nav a:last-child{border-right:0}
.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:var(--sans);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:800px;margin:0 auto}
.prose.wide{max-width:1010px}
.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:16px;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(--accent,var(--coral));font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
.ia-takeaways a{color:var(--accent,var(--coral));filter:brightness(1.35);text-decoration-color:rgba(255,255,255,.35)}
.ia-takeaways a:hover{color:#fff;filter:none}

/* ---------- 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:var(--sans);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:var(--sans);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:var(--sans);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:var(--sans);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:var(--sans);font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--coral);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:var(--sans);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:var(--sans);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:var(--sans);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:var(--sans);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 filler tile (rounds out incomplete card rows on desktop).
   Border was a hardcoded tan that belonged to the desert art this tile used to
   carry; it now takes the theme's own rule colour so it recedes behind the real
   cards instead of ringing them in a colour the palette never uses. */
.tour-filler{position:relative;border:2px dashed var(--line);background:var(--neutral);align-items:center;justify-content:flex-start;padding-top:18px;min-height:180px}
.tour-filler:hover{border-color:var(--line)}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%}
.tour-filler .filler-label{position:relative;font-family:var(--sans);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:var(--sans);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}

/* ---------- price cards (admission options) ----------
   Three ways to pay, set side by side above the prose that explains them. Same
   break as the comparison table below, so the page's two wide blocks
   share an edge rather than stepping in and out. The featured card is marked
   with the coral border the comparison table already uses for its featured
   column -- one idiom for "this is the one", used twice on the page.

   Two steps rather than one, and the thresholds are set by the 94vw ceiling on
   the full-bleed bands, NOT by the prose slack. Prose slack alone would allow
   -110 from 1064px and -165 from 1174px, but at those widths 94vw is still
   under 1020/1130, so the table would render WIDER than the gallery and CTA
   above it and the page's width hierarchy would invert. 1120 and 1240 are the
   first widths at which each step stays inside its band. */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:1.8em 0 1em;align-items:stretch}
@media(min-width:1120px){.price-grid{margin-left:-110px;margin-right:-110px}}
@media(min-width:1240px){.price-grid{margin-left:-165px;margin-right:-165px}}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
.price-card{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-md);padding:22px 22px 20px;position:relative;overflow:hidden}
.price-card--featured{border-color:var(--coral);background:var(--neutral)}
.price-card__media{margin:-22px -22px 16px;line-height:0}
.price-card__img{width:100%;height:150px;object-fit:cover;display:block}
.price-card__badge{align-self:flex-start;background:var(--coral);color:#fff;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-sm);margin-bottom:10px}
.price-card__header h3{margin:0 0 6px;font-size:1.16rem;line-height:1.25;border:0;padding:0}
.price-card__price{font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);margin-bottom:14px}
.price-card__price strong{font-size:1.75rem;font-weight:800;letter-spacing:-.02em}
.pc-prefix{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);font-weight:600}
.price-card__features{list-style:none;margin:0 0 18px;padding:0;font-size:.97rem;flex:1 1 auto}
.price-card__features li{position:relative;padding-left:1.5em;margin:.44em 0;line-height:1.42}
.price-card__features li span{position:absolute;left:0;top:0;font-family:var(--sans);font-weight:700}
.price-card__features .yes span{color:var(--coral-ink)}
/* the omissions are half the argument, so they stay readable rather than greyed away */
.price-card__features .no span,.price-card__features .no{color:var(--sage)}
.price-card .btn{width:100%;margin-top:auto}
.price-grid-note{font-size:.95rem;color:var(--sage);margin:0 0 1.8em}

/* ---------- callout panel ---------- */
.callout{border:2px solid var(--line);border-left-width:6px;border-radius:var(--r-md);background:var(--surface);padding:20px 24px;margin:1.8em 0}
.callout--accent{border-color:var(--coral);background:var(--neutral)}
.callout h3{margin:0 0 .45em;font-size:1.2rem;border:0;padding:0}
.callout p{margin:0 0 .6em}
.callout p:last-child{margin-bottom:0}

/* ---------- plain data table (opening hours, arrivals) ---------- */
.dtable-wrap{overflow-x:auto;margin:1.6em 0}
table.dtable{border-collapse:collapse;width:100%;min-width:460px;font-size:1rem}
/* background must be reset explicitly: the global `thead th` paints an ink band,
   which under this rule's sage text was grey-on-near-black */
table.dtable th{background:transparent;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);text-align:left;padding:0 16px 8px 0;border-bottom:2px solid var(--line)}
table.dtable td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.dtable td:first-child{font-weight:600}
table.dtable tr:last-child td{border-bottom:0}
/* tabular numerals only where a column is actually numeric -- the arrivals table
   carries prose in column 2, which must not be forced onto one line */
table.dtable td.num{font-family:var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable-note{font-size:.95rem;color:var(--sage);margin:.9em 0 0}

/* Stacked form for wide tables on phones. .dtable-wrap scrolls sideways, which
   is tolerable for three columns but on four it pushes the last column -- here
   the one the reader actually wants, "where it leaves you" -- off screen behind
   a gesture nobody knows is there. Below 640px each row becomes its own block:
   first cell as the heading, the rest as label/value pairs read off data-label. */
@media(max-width:640px){
  table.dtable--stack{min-width:0}
  table.dtable--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.dtable--stack,table.dtable--stack tbody,table.dtable--stack tr,table.dtable--stack td{display:block;width:auto}
  table.dtable--stack tr{padding:14px 0;border-bottom:1px solid var(--line)}
  table.dtable--stack tr:last-child{border-bottom:0}
  table.dtable--stack td{padding:0;border:0}
  /* the first cell is the row's subject, so it is set as a heading rather than
     repeating its own column label above itself */
  table.dtable--stack td:first-child{font-family:var(--sans);font-weight:700;font-size:1rem;margin-bottom:.45em}
  table.dtable--stack td:not(:first-child){display:flex;gap:10px;padding:.18em 0;font-size:.98rem}
  table.dtable--stack td:not(:first-child)::before{
    content:attr(data-label);flex:0 0 34%;font-family:var(--sans);font-weight:700;
    font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--sage);
    padding-top:.28em}
  /* nowrap was there to keep a numeric column aligned; there is no column to
     align to once the table is stacked, and it would force overflow instead */
  table.dtable--stack td.num{white-space:normal}
}

/* ---------- distance list ---------- */
.dist-list{list-style:none;margin:1.4em 0 1.2em;padding:0;max-width:560px}
.dist-list li{display:flex;align-items:baseline;gap:10px;padding:.5em 0;border-bottom:1px solid var(--line)}
.dist-list li:last-child{border-bottom:0}
.dist-list span{flex:0 1 auto}
/* the rule grows to fill whatever the two labels leave, which keeps the values
   flush right without a fixed column width that would break on long labels */
.dist-list li::after{content:"";flex:1 1 auto;order:1;border-bottom:1px dotted var(--line);transform:translateY(-.25em)}
.dist-list b{order:2;font-family:var(--sans);font-weight:700;font-size:.95rem;white-space:nowrap}
.dist-cta{margin:0 0 1.8em}

/* ---------- nearby sights ---------- */
.nearby-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:1.6em 0 2em}
@media(max-width:900px){.nearby-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.nearby-grid{grid-template-columns:1fr}}
.nearby-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 18px 16px;color:inherit}
a.nearby-card:hover{border-color:var(--coral);text-decoration:none}
.nc-dist{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--coral-ink)}
.nearby-card h3{margin:.35em 0 .3em;font-size:1.06rem;border:0;padding:0;line-height:1.2}
.nearby-card p{font-size:.95rem;margin:0;color:var(--ink)}
.nc-more{margin-top:auto;padding-top:12px;font-family:var(--sans);font-weight:600;font-size:.78rem;color:var(--coral-ink)}
/* three-up variant: four era cards would each be too narrow to hold a date
   range plus a sentence, so the history page runs them three across */
.nearby-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.nearby-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.nearby-grid--3{grid-template-columns:1fr}}

/* ---------- timeline ----------
   A ruled spine with the dates hung off it. The rule is drawn on the <li> as a
   left border rather than as a pseudo-element on the <ol>, so it stops exactly
   at the last item instead of trailing past it into whitespace. */
.timeline{list-style:none;margin:1.6em 0 2em;padding:0}
.timeline li{position:relative;padding:0 0 1.5em 30px;border-left:2px solid var(--line)}
.timeline li:last-child{padding-bottom:0;border-left-color:transparent}
/* the marker sits on the rule, so its left offset is half its own width minus
   half the rule's -- hard-coding -8px here would drift if the rule changes */
.timeline li::before{content:"";position:absolute;left:-7px;top:.34em;width:12px;height:12px;border-radius:50%;background:var(--coral);border:2px solid var(--white)}
.timeline li:last-child::before{background:var(--ink)}
.tl-year{display:block;font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.08em;color:var(--coral-ink)}
.timeline h3{margin:.15em 0 .25em;font-size:1.12rem;border:0;padding:0;line-height:1.25}
.timeline p{margin:0;font-size:1rem}
@media(max-width:540px){.timeline li{padding-left:22px}}

/* ---------- numbered route steps ----------
   Numbers come from a counter, not from the markup. The list stays a real <ol>
   so it is announced as an ordered list, and inserting a stop does not mean
   editing every number after it.

   Named .route-steps, not .steps: the stylesheet already has a .steps block
   further down (a four-up "how to book" grid), and it is declared later, so a
   shared name silently handed this vertical list that grid's layout -- five
   walking stops came out as four narrow columns and an orphan. */
.route-steps{list-style:none;counter-reset:step;margin:1.6em 0 2em;padding:0}
.route-steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start;padding:0 0 1.1em}
.route-steps li:last-child{padding-bottom:0}
.route-steps li::before{content:counter(step);flex:0 0 34px;height:34px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--sans);font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center}
.route-steps h3{margin:.28em 0 .25em;font-size:1.1rem;border:0;padding:0;line-height:1.2}
.route-steps p{margin:0;font-size:1rem}

/* ---------- captioned figure ---------- */
figure.fig{margin:1.8em 0 2em}
figure.fig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
figure.fig figcaption{margin-top:.7em;font-size:.92rem;color:var(--sage);line-height:1.5}

/* ---------- two editorial columns ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:1.6em 0}
.two-col h3{margin:0 0 .5em;font-size:1.14rem;color:var(--coral-ink);border:0;padding:0}
.two-col p{margin:0 0 .8em}
.two-col p:last-child{margin-bottom:0}
@media(max-width:760px){.two-col{grid-template-columns:1fr;gap:24px}}

/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* Break the comparison table out of the 800px prose column so it has more room
   to breathe. Prose has 198px of slack each side inside .wrap; stepped in two so
   the table never grows wider than the 94vw bands above it (see .price-grid). */
@media(min-width:1120px){.cmp-wrap{margin-left:-110px;margin-right:-110px}}
@media(min-width:1240px){.cmp-wrap{margin-left:-165px;margin-right:-165px}}
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:var(--sans);font-weight:700}
table.cmp .rowlabel{font-family:var(--sans);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:var(--sans);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:var(--sans);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:var(--sans);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:var(--sans);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:var(--sans);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:#C9CCC7;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:#C9CCC7;font-size:.92rem}
.site-foot a:hover{color:#fff}
.foot-guides{margin-top:30px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid #2c2f2f;padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:#C9CCC7;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 #2c2f2f;padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c;margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-searches{margin-top:22px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-searches h4{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c;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 #2c2f2f;border-radius:999px;font-size:.78rem;color:#9fa39d;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 #2c2f2f;padding-top:18px;font-family:var(--sans);font-size:.74rem;color:#8d918c}
/* font-size:inherit, or the blanket `.site-foot a{font-size:.92rem}` sets these
   links 25% larger than the copyright line they sit inline with. */
.foot-bottom a{color:#C9CCC7;font-size:inherit}
@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:var(--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:var(--sans);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(1300px,max(94vw,100%));margin:2.6em 0}
.photo-wide-head{text-align:center;max-width:44em;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(1300px,max(94vw,100%));margin:2.8em 0 2.2em}
.testimonials h2{text-align:center;margin:0 0 .25em}
.t-lead{text-align:center;color:var(--sage);margin:0 0 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:var(--sans);font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:var(--sans);font-size:.74rem;color:var(--sage);margin-top:2px}
.t-foot{text-align:center;color:var(--sage);font-size:.9rem;margin:1.4em 0 0}
@media(max-width:860px){.t-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.t-grid{grid-template-columns:1fr}}
/* ===== CTR features (opt-in; render only when the site defines them) =====
   _ladder / _town_chips / _book_bar in build_home.py + fee/perday in helpers.
   Recolor per site theme. */
/* entry-fee badge on card thumbs (tour dict: "fee_inc" / "fee_badge") */
.fee-badge{position:absolute;left:10px;bottom:10px;background:#2E5D3A;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:4px}
/* price-per-day subtext (tour dict: "perday") */
.perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px}
/* duration/decision ladder band (homecontent: LADDER) */
.ladder-band{background:var(--ink);color:var(--neutral);padding:34px 0 40px}
.ladder-band h2{color:var(--neutral);font-size:1.45rem;margin:0 0 18px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ladder-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  border-radius:10px;padding:20px 18px;display:flex;flex-direction:column}
.ladder-col.feat{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.ladder-col.feat p{color:var(--ink)}
.ladder-days{font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.ladder-price{color:var(--coral);font-weight:700;font-size:1.3rem;margin:4px 0 8px}
.ladder-col.feat .ladder-price{color:var(--coral-ink)}
.ladder-col p{font-size:.9rem;line-height:1.5;margin:0 0 16px;color:rgba(255,255,255,.85);flex:1}
.ladder-col .btn{align-self:flex-start}
.ladder-col .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:var(--neutral)}
.ladder-col .btn.ghost:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:760px){.ladder{grid-template-columns:1fr}}
/* departure-town chips (auto when 2+ tours carry "town") */
.town-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.chips-label{font-size:.85rem;color:var(--sage);font-weight:600}
.town-chips .chip{background:var(--neutral);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.town-chips .chip.on{background:var(--ink);color:var(--neutral);border-color:var(--ink)}
.town-chips .chip:hover{border-color:var(--coral)}
/* sticky mobile book-bar (homecontent: BOOK_BAR) */
.book-bar{display:none}
@media(max-width:760px){
  .book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--ink);color:var(--neutral);align-items:center;justify-content:space-between;
    gap:10px;padding:10px 14px;box-shadow:0 -3px 12px rgba(0,0,0,.25)}
  .book-bar span{font-size:.85rem;font-weight:600}
  .book-bar .btn{padding:9px 16px;font-size:.85rem}
  body{padding-bottom:58px}
}

/* ==================================================================== */
/* Conversion + EEAT layer                                              */

/* cancel-note under availability widgets (conversion layer) */
.cancel-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)}

/* anchored-price band (opt-in via homecontent PRICE_ANCHOR) */
.price-anchor{margin:34px 0;padding:26px 26px 28px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px}
.price-anchor h2{margin:0 0 18px;font-size:1.25rem}
.pa-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.pa-col{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:10px}
.pa-was{background:var(--neutral);border:1px dashed var(--line)}
.pa-now{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.pa-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700}
.pa-price{font-size:2rem;font-weight:800;line-height:1.1}
.pa-was .pa-price{color:var(--sage)}
.pa-now .pa-price{color:#fff}
.pa-note{font-size:.85rem;line-height:1.45;opacity:.85}
.pa-vs{align-self:center;font-weight:800;color:var(--sage);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.08em}
.pa-now .btn{margin-top:12px;align-self:flex-start;background:var(--accent);border-color:var(--accent)}
@media(max-width:720px){.pa-row{grid-template-columns:1fr}.pa-vs{justify-self:center;padding:2px 0}}

/* real-photo trust strip (opt-in via homecontent REAL_STRIP; Wikimedia Commons, credited) */
.real-strip{margin:38px 0}
.real-strip>h2{text-align:center}
.real-strip>p{color:var(--sage);margin-top:4px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.real-grid figure{margin:0}
.real-grid img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:10px;display:block}
.real-grid figcaption{font-size:.76rem;color:var(--sage);margin-top:6px;line-height:1.4}
.real-grid figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:720px){.real-grid{grid-template-columns:1fr}}
/* breakout: same width as the testimonials band */
.real-strip.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1300px,max(94vw,100%))}

/* ---------- closing CTA band (helpers.end_cta) ---------- */
.end-cta{position:relative;left:50%;transform:translateX(-50%);width:min(1300px,max(94vw,100%));
  background:var(--ink);color:#fff;border-radius:var(--r-lg,14px);
  padding:44px 34px;margin:52px 0 8px;text-align:center}
.end-cta h2{color:#fff;margin:0 0 10px;border:0;padding:0}
.end-cta p{color:rgba(255,255,255,.82);margin:0 auto 22px;max-width:62ch}
.end-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.end-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.end-cta .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
@media(max-width:720px){.end-cta{padding:34px 20px}.end-cta-actions .btn{width:100%}}
.real-zoom{display:block;cursor:zoom-in}
.real-zoom img{transition:transform .18s ease}
.real-zoom:hover img{transform:scale(1.015)}
/* lightbox overlay for full-size photos */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(20,26,18,.92);
  display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1500px,96vw);text-align:center}
.lightbox img{max-width:100%;max-height:84vh;border-radius:8px;display:block;margin:0 auto}
.lightbox figcaption{color:#e8e5da;font-size:.82rem;margin-top:10px;line-height:1.4}
.lightbox figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* author card (EEAT, about page — driven by cfg.AUTHOR) */
.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:12px}
.author-card img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-card div{display:flex;flex-direction:column;gap:3px}
.author-card b{font-size:1.05rem}
.author-card span{font-size:.85rem;color:var(--sage)}

/* Figures. Inter carries tabular numerals, so prices, scores and review
   counts line up in a column instead of wobbling — the price ladder is this
   site's whole argument and it has to read as a fare board. */
.price,.price-anchor,.ladder-price,.pa-price,.rev-price,.sc-price,
.facts-val,.sc-big,.rev-score,.rev-count,.reviews-head .big,
table.cmp td,thead th{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* ---- Language dropdown ----------------------------------------------------
   Placed at the END of .site-head .wrap, i.e. after the nav. The nav already
   owns `margin-left:auto`, so the whole group (links + Book Now + this) is
   pushed right as one block and no second auto margin fights the first — the
   failure mode when the switcher is inserted mid-row is that free space gets
   split between the two and the dropdown lands marooned in the middle.

   Below 860px the nav leaves the flow (it becomes the drawer), so the row is
   logo + switcher + burger. There the switcher takes the auto margin and the
   burger gives it up, which keeps the hamburger last where a thumb expects it.
*/
.lang-dd{position:relative;flex:0 0 auto;margin-left:2px}
.lang-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.04em;color:var(--ink);padding:5px 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary::after{content:"\25BE";font-size:.6rem;color:var(--sage)}
.lang-dd[open] summary{background:var(--neutral)}
.lang-dd .lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:6px;display:flex;flex-direction:column;min-width:130px;z-index:60}
.lang-menu a{padding:7px 10px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.lang-menu a:hover{background:var(--neutral);text-decoration:none}
.lang-menu a.active{color:var(--coral-ink);background:var(--neutral)}
/* Must track the collapse breakpoint above exactly: this only makes sense once
   the nav has left the flow, and if the two numbers drift apart there is a band
   where the burger is showing but still sitting on the wrong side. */
@media(max-width:1000px){
  /* DOM order in the header is logo, burger, nav, switcher -- desktop needs the
     switcher last. On mobile the nav leaves the flow and that DOM order would
     leave the burger to the LEFT of the switcher, which is not where a thumb
     looks for it. Flex `order` re-sorts the two without moving the markup. */
  .lang-dd{order:1;margin-left:auto}
  .nav-toggle{order:2;margin-left:0}
}

/* The switcher costs ~60px in the header row, and on a 390px phone that was
   enough to wrap "Capilla Real de Granada" onto a second line inside a row with
   a fixed 66px height -- i.e. the wordmark overflowed its own header. Two steps:
   trim the wordmark and the row gaps first, and only where even that cannot fit
   (<=360px) let the row grow instead of clipping. Widths from a sweep. */
@media(max-width:430px){
  .site-head .wrap{gap:11px}
  .logo{font-size:.98rem;gap:8px}
  .lang-dd summary{padding:4px 7px}
}
@media(max-width:360px){
  .site-head .wrap{height:auto;min-height:66px;padding-top:9px;padding-bottom:9px}
}
.lang-menu a{font-family:var(--sans)}