/* schlosslinderhof.com — "Forest Floor" design system, from design.md.
   Moss and bark: a deep forest primary, a warm bone-coloured page, one copper
   accent. Cormorant Garamond at weight 500 for the display sizes and h1, Inter
   for body and labels. Radii 4 / 8 / 16 — THIS BRIEF IS NOT FLAT, unlike the
   two before it, and the rounding is part of its character.

   IT FAILS ITS OWN CONTRAST FLOOR IN SEVEN PLACES, which is more than any
   brief in this series so far. Measured before a line of CSS was written, on
   this brief's own grounds (#E8E2D0 page, #F5F1E4 card, #1F3529 band):

     secondary #5C6B5E   4.36:1 on the page                      (needs 4.5)
     tertiary  #C9733A   2.70:1 as a link on the page            (needs 4.5)
     tertiary  #C9733A   3.10:1 as a link on a card              (needs 4.5)
     tertiary  #C9733A   3.10:1 CARRYING THE BRIEF'S OWN CREAM as a button fill
     tertiary  #C9733A   2.70:1 as an edge on the page           (needs 3.0)
     secondary #5C6B5E   2.33:1 on the #1F3529 band              (needs 4.5)
     tertiary  #C9733A   3.75:1 on the #1F3529 band              (needs 4.5)

   The button is the serious one again. design.md specifies button-primary as a
   tertiary fill with on-primary text, and that pairing AS WRITTEN is 3.10:1 —
   the second brief running to specify a component that cannot be read. The
   only way to find that out is to do the arithmetic before drawing anything.

   Every corrected value was SOLVED, not chosen: each colour walked along its
   own hue and saturation, lightness only, until every ground it sits on
   cleared the floor with a small margin. The brief's single-accent rule is
   kept — the copper stays copper, the sage stays sage, nothing new enters.

   What did NOT need touching: the ink at 10.14:1 on the page and 11.62:1 on a
   card, and the surface reversed out on the dark band at 11.62:1.
*/

:root{
  --ink:#1F3529;  /* primary: headlines & core text    10.14:1 on the page */
  --sage:#59685B;  /* secondary DARKENED from #5C6B5E: 4.56 page, 5.23 card */
  --coral:#A25B2C;  /* tertiary as a FILL - carries the cream at 4.57:1 */
  --coral-ink:#945329;  /* tertiary as INK on the page and card   4.60 / 5.27 */
  --coral-dk:#874C25;  /* button hover fill; cream on it              6.01:1 */
  --coral-text:#F5F1E4;  /* what goes ON the copper fill                4.57:1 */
  --coral-edge:#945329;  /* the button's edge against the page          4.60:1 */
  --coral-band:#D18756;  /* copper LIGHTENED for the band: 4.57:1 on #1F3529 */
  --neutral:#E8E2D0;  /* page foundation: bone */
  --surface:#F5F1E4;  /* card / panel surface */
  --white:#FFFFFF;
  --line:#D6CFB8;
  --foot-muted:#8D9D8F;  /* footer text ON --ink                        4.55:1 */
  --foot-link:#DCE3DD;  /* footer links ON --ink                      13.02:1 */
  --foot-line:#2E2A26;  /* footer hairline, decorative, no floor */
  /* design.md rounded: sm 0, md 0, lg 2. Square on purpose. */
  --r-sm:4px;
  --r-md:8px;
  --r-lg:16px;
  --maxw:1120px;
  --prose-w:760px;      /* THE MEASURE. Section intros align to this, not to their band. */
}

*{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:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:17px;line-height:1.7;font-weight:500;color:var(--ink);background:var(--neutral);
  -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}

/* ONE SERIF DOES BOTH JOBS HERE. The last brief named a didone for display and
   a book face for prose; this one names Source Serif 4 for display, h1 AND
   body, so the ladder is carried by size and weight alone and the weights have
   to be right. design.md asks for 700 on display and h1 - a text serif, not a
   didone, so 700 is a proper bold rather than a hairline risk - and the two
   sizes it states (4rem display, 2.2rem h1) are set below.
   THE LOGO IS NOT A HEADING. On the last site it shared a declaration with h3
   and was bolded by a change that was never about it; it gets its own rule
   here from the start. Source Serif 4 loads 400,500,600,700 and Inter loads
   400,500,600,700 - every weight below is one of those, which is what the
   per-face weight gate checks. */
h1,h2,h3,.logo,.display{font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:-.02em;line-height:1.2}
h1,.display{font-weight:800}
h2{font-weight:700}
h3{font-weight:700}
.logo{font-weight:600;letter-spacing:-.01em}
h1{font-size:2.2rem;margin:.1em 0 .5em;font-weight:800;letter-spacing:-.01em}  /* design.md: h1 Cormorant Garamond 2.5rem/300. THIS LINE USED TO CARRY THE COMMENT
   "design.md: h1 2.2rem/700" AND THE BRIEF SAYS NOTHING OF THE KIND - a
   citation invented to make a drifted value look checked. The size stays at
   2.2rem so a long German or Italian h1 still fits two lines; the WEIGHT is
   the brief's, because light large display type is the whole Luxe look. */
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,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}}

/* placard caps, per design.md: Inter 500 at .68rem with .3em tracking */
.label{font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);margin:0 0 .7em}

/* ---------- buttons ---------- */
/* THE BUTTON CARRIES WINE INK, NOT WHITE. design.md pairs its gold fill with
   the cream on-primary: #FAF3E4 on #B8935F is 2.58:1, which is not a button,
   it is a rumour of one. The same fill under the wine primary is 5.61:1 and
   keeps the brief's rule that the tertiary is the only interaction colour. The
   hover deepens the gold and flips to cream at 6.26:1. */
/* THE BUTTON, MEASURED RATHER THAN ADJUSTED BY EYE.
   What was wrong, from a rendered card at 1280px: the label sat 270px wide in
   a 307px card and the box was 50px tall, so it read as a slab rather than a
   control. Two causes, neither of them the padding:

     1. letter-spacing .14em on 13px uppercase. "CHECK AVAILABILITY" is 18
        characters; at that tracking it spans the whole card and has nowhere
        left to breathe. .05em keeps the label a label without shouting.
     2. a 2px border in --coral-edge (#945329) around a --coral (#A25B2C)
        fill. Those two are 1.15:1 against EACH OTHER - the edge is invisible
        as an edge and does nothing but add 4px to every side. It was there to
        give the control a boundary against the page; the fill already does
        that on its own at 3.99:1 on the page and 4.57:1 on a card, both clear
        of the 3.0 floor a non-text boundary needs. So the border stays at 1px
        and takes the fill's own colour: same geometry, no halo.

   THE PADDING IS UNCHANGED AT 12px 20px because design.md specifies it
   (components.button-primary.padding) and it was never the problem. Height
   goes from 50px to 46px purely by dropping the two stray border pixels a
   side, which is still well over the 44px touch-target minimum. */
.btn{
  display:inline-block;background:var(--coral);color:var(--coral-text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  text-align:center;line-height:1.25;
  padding:12px 20px;border-radius:var(--r-md);border:1px solid var(--coral);
  transition:background .15s,border-color .15s,color .15s;text-align:center;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);
  text-decoration:none;color:var(--surface)}
/* the ghost has no fill, so it still needs a real edge: --ink is 10.14:1 */
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--surface);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.15rem;font-weight:700;letter-spacing:-.01em}
.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:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
/* The palette gate resolves `.btn` and passed at 5.61:1 while THIS rule
   repainted the one button every page shows, in the header, back to white
   on the gold: 2.85:1. A promise about a class is not a promise about the
   element, once a second rule with higher specificity exists. */
/* .nav a is (0,2,0) and .btn is (0,1,0), so the nav rule was quietly winning
   on weight and tracking and the header's Book button rendered at 600 with
   almost no tracking while every other button on the site was 700. Nobody
   would call that a bug, but they are the same component and they should not
   disagree. Restated here at the specificity that wins. */
.nav a.btn{color:var(--coral-text);font-weight:700;letter-spacing:.05em}
.nav a.btn:hover{color:var(--surface)}
.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(--surface);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}
}

/* ---------- language switcher ----------
   add_langbar.py injects this bar after </nav> on all 170 pages, and this
   stylesheet had NO rule for it. Five 18px links with no separators and no
   padding rendered as the single word "ENDEFRESIT" in link blue, wider than
   the nav beside it: in German it pushed the document 21px past a 1000px
   viewport and the header gate failed on horizontal overflow.

   The gate had asserted the bar EXISTED, and it did. Presence is not
   appearance - the same lesson the bar's own docstring records about the
   build before this one, one level further out. */
.lang-bar{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.lang-chip{
  display:inline-block;font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;
  color:var(--sage);                       /* 5.12:1 on white */
  border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 6px;
}
.lang-chip:hover{color:var(--ink);border-color:var(--sage);text-decoration:none}
.lang-chip.is-current{background:var(--ink);border-color:var(--ink);color:#fff}  /* 18.17:1 */

@media(max-width:860px){
  .nav-toggle{display:block;margin-left:12px}
  .lang-bar{margin-left:auto}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--surface);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}
}
@media(max-width:520px){
  /* the switcher costs ~135px the header did not have to find before, and on a
     narrow phone that pushed the wordmark onto two lines. Measured at 390px. */
  .site-head .wrap{gap:10px}
  .logo{font-size:.95rem}
  .lang-chip{font-size:.58rem;padding:4px 3px;letter-spacing:.02em}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"Inter",system-ui,-apple-system,Segoe UI,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, AND THE SHAPE OF IT IS THE FIX, NOT THE NUMBERS.
   The stack this replaces was a flat 44% plus a gradient anchored to the BOTTOM
   55% - and .hero .wrap CENTRES its copy, so the h1 sat in the one band the
   gradient never reached. On the last site that shipped, and the client could
   read it before any gate could: white h1 at 3.04:1 against a 4.5 floor.

   Two layers, because the copy column is left-aligned and max-width:52%: a flat
   layer for the sky, and a LEFT-WEIGHTED gradient that puts the darkness where
   the text is and releases the photograph on the right. Below 900px .hero-copy
   goes full width, so that layer flattens - left-weighting there would leave
   the end of every line uncovered.

   THE ALPHAS BELOW ARE PROVISIONAL until this site's hero photograph exists.
   qa_battery's CONTRAST OVER PHOTOGRAPHS gate reads the rendered pixels under
   every hero text box and prints the five tightest; these get re-solved against
   what it measures, not against what looks about right. */
/* THE SCRIM, RE-SOLVED AGAINST THE ACTUAL PHOTOGRAPH.
   The old one PASSED - I composited hero.jpg with it and the copy band came out
   at min 4.63:1, p05 4.97, median 10.10. All above the floor, which is why no
   gate ever complained and why I would have defended it. It was still hard to
   read, and the numbers say why: a MEDIAN of 10 against a MINIMUM of 4.6 means
   the ground under the text swings enormously - white masonry, bright sky and
   dark conifers all within one line of type. Contrast ratio answers "is the
   worst pixel legible"; it does not answer "is this a calm surface to read on".
   The standard deviation of the ground luminance does, and that was 0.0413.

   Solved for both. Base .46 -> .62 and the horizontal gradient .52/.46 -> .47/.37:

               effective   min   p05   median   ground sd
     before       .741     5.12  5.45   10.27    0.0351   (left edge)
     before       .708     4.63  4.97   10.10    0.0413   (50% across)
     after        .799     6.14  6.46   10.56    0.0252
     after        .761     5.44  5.78   10.37    0.0316

   Worst case goes 4.63 -> 5.44 and the ground the eye has to read across gets
   23% calmer. The right-hand fade is untouched, so the photograph still opens
   up where there is no text over it. */
.hero::before{content:"";position:absolute;inset:0;background:rgba(31,53,41,.62)}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(31,53,41,0) 55%,rgba(31,53,41,.38) 100%),
  linear-gradient(96deg,rgba(31,53,41,.47) 0%,rgba(31,53,41,.37) 50%,rgba(31,53,41,.10) 84%,rgba(31,53,41,0) 100%)}
@media(max-width:900px){
  /* NARROW: the copy stops being a left column and sits over the whole frame,
     so there is no "empty" side to protect and the scrim is flat and stronger.
     Effective 1-(1-.62)(1-.44) = .787 everywhere. */
  .hero::after{background:
    linear-gradient(180deg,rgba(31,53,41,0) 55%,rgba(31,53,41,.38) 100%),
    linear-gradient(180deg,rgba(31,53,41,.44),rgba(31,53,41,.44))}
}
.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:rgba(251,248,239,.82)}   /* was a peach left over from the scaffold theme */
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:var(--surface);font-weight:800;letter-spacing:-.02em}  /* the display size, one step down so a long German h1 still fits */
.hero .lede{font-size:1.18rem;color:#F7F2E4;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:#F0EADB;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,sans-serif;font-weight:600;font-size:1.32rem;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.facts-val .star{color:var(--coral-ink)}
.facts-val,.facts-label{overflow-wrap:break-word;hyphens:auto}
.facts-label{font-family:"Inter",system-ui,-apple-system,Segoe UI,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:"Inter",system-ui,-apple-system,Segoe UI,sans-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:var(--coral-text);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:"Inter",system-ui,-apple-system,Segoe UI,sans-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:var(--prose-w);margin:0 auto;overflow-wrap:break-word}
.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:600}

/* 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}
/* A DARK ACCENT HAS NO VALUE ON A DARK GROUND. This band is painted --ink and
   these two rules coloured their tick and their links with the accent, which
   was written for a palette whose accent was a bright orange. Here the accent
   is a near-black charcoal: measured on the built page, 1.65:1 against a 4.5
   requirement, on the one block answer engines quote most. The mirror image of
   the fault two sites ago, where white text sat on an accent too light to
   carry it. Same lesson from the other end - name the ground, then choose. */
.ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--coral-band);font-weight:600}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
/* On THIS palette the accent works here: gold on wine is 5.61:1, so the
   brief's single-accent rule and the contrast floor agree for once. */
/* THE PLAIN GOLD IS 4.25:1 ON THIS GREEN - it cleared the bar on the last
   site's wine and does not clear it here. Same variable, same rule, a
   different ground. The lightened gold is 5.17:1. */
.ia-takeaways a{color:var(--coral-band);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(198,162,107,.55)}
.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:"Inter",system-ui,-apple-system,Segoe UI,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,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,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:600}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:600}
@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,sans-serif;font-size:.72rem;letter-spacing:.24em;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:600}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:600}
@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,sans-serif;font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--coral-ink);letter-spacing:2px;margin:.2em 0}
.sc-rev{font-size:.8rem;color:#D9DBD7}
.sc-price{margin-top:.5em;font-weight:600;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,sans-serif;font-weight:700;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral-ink);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-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:600;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:"Inter",system-ui,-apple-system,Segoe UI,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:var(--coral-text);font-family:"Inter",system-ui,-apple-system,Segoe UI,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.3;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
/* THE GOLD IS A FILL, NOT AN INK - AND THAT RULE HAS TO REACH THE SMALL
   PARTS TOO. The palette promises in gate_tooling passed while 53 nodes
   failed on the built pages, because those promises check the six pairs
   a stylesheet DECLARES and these are the pairs it forgets: a star glyph
   at 2.58:1, white on a gold badge at 2.85:1. Stars take the darkened
   gold (4.99:1 on the page, 5.34:1 on a card); anything painted ON the
   gold takes the wine ink at 5.61:1. */
.star{color:var(--coral-ink)}
.price{font-weight:600;margin-bottom:.8em}
/* Cards print how long the day is and whether it reaches the Citadelle.
   Exact figures live in the tariff table and the live widget. */
.tour-meta{font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.86rem;color:var(--ink);margin-bottom:.8em}
.tour-meta span{font-weight:500;color:var(--sage)}
.price span{font-weight:500;color:var(--sage);font-size:.85rem}
/* IN A CARD the .btn is a flex item in a column, so it blockifies to the full
   card width whatever `display:inline-block` says. That is the right pattern -
   one wide, unambiguous tap target - but a full-bleed control wants a quieter
   label than a hero button, and it wants clear air above it rather than
   butting straight onto the meta line. */
/* 14px, NOT 12px, AND THAT IS A MEASUREMENT NOT A PREFERENCE. Tightening the
   label and dropping the stray border pixels took this control from 50.3px
   tall to 41.2px - under the 44px minimum comfortable touch target, a
   regression I introduced while fixing something else. 14px vertical padding
   puts it at 45.2px. The whole card is the link, so the button is not the only
   way in, but a control that looks tappable should be tappable. */
.tour-body .btn{margin-top:auto;font-size:.76rem;letter-spacing:.04em;padding:14px 16px}
/* AND margin-top:auto STAYS. I wrote a second rule below this one setting
   margin-top:14px "for air", which would have silently overridden it - and
   `auto` is not decoration: it pushes the button to the bottom of the flex
   column so that every card in a row ends on the same line whatever the length
   of its title. A fixed margin would have left the CTAs ragged across a row of
   three. The air it wanted is already there, because `auto` absorbs whatever
   space the card has spare. */
/* 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,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:var(--coral-text);font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.24em;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. */
/* THE PULL DEPENDS ON THE COLUMN, and the rule this replaces applied the
   narrow column's pull to both:
     .wrap content box = 1120 - 44 = 1076px
     .prose      760px -> (1076-760)/2 = 158px slack each side
     .prose.wide 960px -> (1076-960)/2 =  58px slack each side
   -110px on a .wide page overflows the body by 52px each side, which is how a
   table page silently starts scrolling sideways. */
@media(min-width:1080px){
  .prose .cmp-wrap{margin-left:-110px;margin-right:-110px}
  .prose.wide .cmp-wrap{margin-left:-58px;margin-right:-58px}
}
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:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600}
table.cmp .rowlabel{font-family:"Inter",system-ui,-apple-system,Segoe UI,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:var(--coral-text);font-family:"Inter",system-ui,-apple-system,Segoe UI,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,sans-serif;font-weight:600;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,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,sans-serif;font-weight:600;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,sans-serif;font-weight:600;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:600;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(--foot-link);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(--foot-link);font-size:.92rem}
.site-foot a:hover{color:#fff}
/* THE FOOTER HAS ITS OWN GROUND, and on the last site the palette gate never
   looked at it: seven pairs passed and 33 pages failed at 3.86:1. It is a
   promise now, measured here before a page exists - --foot-muted is 5.18:1 on
   this near-black and --foot-link is 13.55:1.
   THE LINK GREY WAS ALSO A CARRY-OVER, and this is the shape §1 is about: it
   was a hardcoded var(--foot-link), not a token, so no gate could see it. It passes on
   contrast (11.64:1) and was wrong anyway - a cold grey on a warm oxblood-brown
   ground. It is a token now, and it is warm. The hairline stays decorative and
   needs no floor. */
.foot-guides{margin-top:30px;border-top:1px solid var(--foot-line);padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid var(--foot-line);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,sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--foot-muted)}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:var(--foot-link);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(--foot-line);padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--foot-muted);margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-searches{margin-top:22px;border-top:1px solid var(--foot-line);padding-top:20px}
.foot-searches h4{font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--foot-muted);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(--foot-line);border-radius:var(--r-sm);font-size:.78rem;color:var(--foot-muted);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(--foot-line);padding-top:18px;font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;font-size:.74rem;color:var(--foot-muted)}
.foot-bottom a{color:var(--foot-link)}
@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:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;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:var(--coral-text);font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-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 measure, not 44em: the children below align to --prose-w and a
   narrower parent clamps them 16px off it */
.photo-wide-head{text-align:center;max-width:var(--prose-w);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: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(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column}
.t-stars{color:var(--coral-ink);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:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:600;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:500;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.
   First shipped on yellowstonetourpackages.com. 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:600;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-sm)}
/* 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:var(--r-md);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:600;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.ladder-price{color:var(--coral);font-weight:600;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-ink);color:var(--coral-ink)}
@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:var(--r-sm);
  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 (piloted on okavangodeltasafaritours.com)    */

/* 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:var(--r-lg)}
.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:var(--r-md)}
.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:600}
.pa-price{font-size:2rem;font-weight:600;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:600;color:var(--sage);font-size:.9rem;
  text-transform:uppercase;letter-spacing:.24em}
.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:var(--r-md);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}
.real-grid.pair{grid-template-columns:repeat(2,1fr);max-width:900px;margin-left:auto;margin-right:auto}
@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(1180px,94vw)}
.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:var(--r-sm);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:var(--r-lg)}
.author-card img{width:96px;height:96px;border-radius:var(--r-sm);object-fit:cover;flex-shrink:0}
/* No portrait: cfg.AUTHOR["portrait"] is empty on purpose - the guide is a
   real person and we are not generating a face for her - so the card wears
   her initials as a placard instead of an <img> pointed at nothing. */
.author-mono::before{content:attr(data-mono)}
.author-mono{width:96px;height:96px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;background:var(--ink);color:var(--neutral);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;font-weight:400;font-size:2.1rem;
  letter-spacing:.02em;line-height:1}
.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)}


/* ---------- section intros align to the measure ----------
   Reported by eye two builds ago and true of every scaffold since: the heading
   blocks inside the wide bands were centred while every other section sat on
   the left edge of the measure, so the page had four different left edges.
   Aligning a heading to its own band puts it ~160px LEFT of everything above
   it, which is just as wrong. Both band and measure are centred on the
   viewport, so giving the intro the measure's width and auto side margins
   lands its left edge exactly on the measure at every viewport. */
.testimonials > h2,
.testimonials > .t-lead,
.t-foot,
.real-strip > h2,
.real-strip > p,
/* The decision ladder is a full-width band like the others and its heading sat
   158px left of the measure at 1440px. Every band added to this layout has to
   be added here too - which is why the gate measures the painted left edge of
   every intro block rather than trusting the list. */
.ladder-band .wrap > h2,
.ladder-band .wrap > p,
.photo-wide-head > *{
  text-align:left;
  max-width:var(--prose-w);
  margin-left:auto;
  margin-right:auto;
}