/* "Running Kilometer" design system.
Outfit for everything, near-black ink + single track-orange accent.
Flat by design: no decorative gradients, one accent action per screen. */
:root{
--ink:#1F3A2C; /* primary: headlines & core text */
--sage:#6E7566; /* secondary: borders, meta, captions */
--coral:#B89155; /* tertiary: the single interaction accent */
--coral-ink:#7A5A24; /* readable orange (same hue) for link/body text */
--coral-dk:#9C7638; /* button hover */
--neutral:#F0EADB; /* page foundation */
--surface:#F8F1DF; /* card / panel surface */
--white:#FFFFFF;
--line:#DCD3BC;
--r-sm:8px;
--r-md:14px;
--r-lg:24px;
--maxw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
font-family:"Cormorant",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
font-size:18px;line-height:1.6;color:var(--ink);background:var(--white);
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.logo,.display{font-family:"Cormorant",sans-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:"Cormorant",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}
.label{font-family:"Cormorant",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5em}
/* ---------- buttons ---------- */
.btn{
display:inline-block;background:var(--coral);color:#fff;font-family:"Cormorant",sans-serif;font-weight:600;
font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
padding:12px 20px;border-radius:var(--r-md);border:2px solid var(--coral);
transition:background .15s,border-color .15s;text-align:center;
}
.btn:hover{background:var(--coral-dk);border-color:var(--coral-dk);text-decoration:none;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .mark{width:30px;height:30px;flex:0 0 auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-family:"Cormorant",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--coral-ink);text-decoration:none}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:860px){
.nav-toggle{display:block}
.nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
background:var(--white);border-bottom:1px solid var(--line);padding:8px 22px 16px}
.nav.open{display:flex}
.nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
.nav a.btn{margin-top:10px;text-align:center}
}
/* ---------- breadcrumb ---------- */
.crumb{font-family:"Cormorant",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'))}
.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}
/* Above the --maxw cap this is exactly the old 52%, so the desktop hero is
unchanged. Below the cap the column used to shrink with the viewport, and
around 1000-1100px it got narrow enough that the h1 and the two CTA buttons
sat on a wrap boundary: they took one more line in the visitor's fallback
font than in the webfont, so everything below them jumped when the swap
landed. Measured at 0.19-0.25 CLS on capillarealdegranada.com, in a band
nobody screenshots. Holding a 620px floor takes them off that boundary.
clamp keeps it continuous -- a 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:"Cormorant",sans-serif;font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.facts-val .star{color:var(--coral)}
.facts-label{font-family:"Cormorant",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:"Cormorant",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:#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:"Cormorant",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:760px;margin:0 auto}
.prose.wide{max-width:960px}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em}
.prose li{margin:.32em 0}
ul.check{list-style:none;padding-left:0}
ul.check li{position:relative;padding-left:1.7em;margin:.5em 0}
ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700}
/* page-hero banner inside articles */
.page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden}
.page-hero img{width:100%;max-height:380px;object-fit:cover}
/* ---------- answer box ---------- */
.answer-box{background:var(--neutral);border-left:5px solid var(--coral);padding:20px 24px;margin:0 0 1.8em;border-radius:0 var(--r-md) var(--r-md) 0}
.answer-box p{margin:0}
.answer-box strong{color:var(--ink)}
.answer-box a{text-decoration:underline;text-underline-offset:2px}
/* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */
.ia-takeaways{background:var(--ink);border-radius: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:"Cormorant",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:"Cormorant",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:"Cormorant",sans-serif;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1.02rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-color:var(--coral)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}
.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:"Cormorant",sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-color:var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}
/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:"Cormorant",sans-serif;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:"Cormorant",sans-serif;font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"Cormorant",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:700;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:"Cormorant",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 (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:"Cormorant",sans-serif;font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm)}
.tour-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.tour-body h3{font-size:1.02rem;margin:0 0 .45em;line-height:1.25;font-weight:700}
.rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em}
.star{color:var(--coral)}
.price{font-weight:700;margin-bottom:.8em}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto}
/* decorative desert filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:2px dashed #e0c4ad;background:var(--neutral);align-items:center;justify-content:center;min-height:180px}
.tour-filler:hover{border-color:#e0c4ad}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.tour-filler .filler-label{position:relative;font-family:"Cormorant",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;color:var(--sage);background:rgba(244,245,242,.78);padding:5px 11px;border-radius:var(--r-sm)}
@media(max-width:860px){.tour-filler{display:none}}
/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)}
.book-chip{position:absolute;top:-13px;left:18px;background:var(--coral);color:#fff;font-family:"Cormorant",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm)}
.gyg-frame{min-height:220px}
/* ---------- comparison table ---------- */
.cmp-wrap{overflow-x:auto;margin:1.8em 0}
/* Break the comparison table out of the 760px prose column so it has more room
to breathe. Prose has ~158px of slack each side inside .wrap, so -110px is safe. */
@media(min-width:1080px){.cmp-wrap{margin-left:-110px;margin-right:-110px}}
table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1.02rem}
table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)}
table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:"Cormorant",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"Cormorant",sans-serif;font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:#fff;font-family:"Cormorant",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:"Cormorant",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem}
/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,24,24,.82);color:#fff;font-family:"Cormorant",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:"Cormorant",sans-serif;font-weight:800;font-size:1.5rem;color:var(--coral-ink);display:block;margin-bottom:.1em}
.step h3{margin:0 0 .25em;font-size:1.05rem}
.step p{font-size:.9rem;color:var(--sage);margin:0}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
/* ---------- reviews band ---------- */
.reviews-band{background:var(--neutral);border-radius:var(--r-lg);padding:24px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:"Cormorant",sans-serif;font-weight:800;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px}
/* ---------- honest guide ---------- */
.honest-guide{background:var(--neutral);border-radius:var(--r-lg);padding:32px 30px;margin:2.4em 0}
.honest-guide h2{margin-top:0}
.honest-guide .lead{font-size:1.1rem;color:var(--ink)}
.honest-guide h3{margin-top:1.5em}
.guide-fig{margin:1.5em 0}
.guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)}
.guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic}
/* ---------- FAQ ---------- */
.faq{margin:1em 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:14px 30px 14px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem}
.faq details[open] summary::after{content:"\2212"}
.faq-body{padding:0 0 12px}
.faq-body p{margin:0}
.faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)}
.faq-contact a{color:var(--coral-ink)}
/* ---------- disclosure ---------- */
.disclosure{font-size:.84rem;color:var(--sage);background:var(--neutral);border-radius:var(--r-md);padding:13px 16px;margin:1em 0 1.6em}
.disclosure a{color:var(--coral-ink)}
/* related strip */
.related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.2em}
/* sitemap */
.sitemap-list{list-style:none;padding-left:0}
.sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative}
.sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)}
/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#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:"Cormorant",sans-serif;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:"Cormorant",sans-serif;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}
/* address + transport, grouped with the key-facts strip above it — no top
border, so the two read as one "where is it" block rather than two bands. */
.foot-find{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.foot-find .label{font-family:"Cormorant",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#8d918c}
.foot-find nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-find a{color:#C9CCC7;font-size:.86rem}
.foot-find a:hover{color:#fff}
.foot-searches{margin-top:22px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-searches h4{font-family:"Cormorant",sans-serif;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:"Cormorant",sans-serif;font-size:.74rem;color:#8d918c}
.foot-bottom a{color:#C9CCC7}
@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:"Cormorant",sans-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:"Cormorant",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}
.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(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(--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:"Cormorant",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Cormorant",sans-serif;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 / siteconfig: PAGE_BOOK_BAR).
Price-anchored (.bb-copy/.bb-price/.bb-txt) and revealed by BAR_JS only
after 420px of scroll (.bb-wait hides it until then). */
.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);
transition:transform .25s ease,opacity .25s ease}
.book-bar.bb-wait{transform:translateY(110%);opacity:0}
.book-bar span{font-size:.85rem;font-weight:600}
.book-bar .btn{padding:9px 16px;font-size:.85rem}
body{padding-bottom:58px}
}
.book-bar .bb-price{font-size:1.05rem;font-weight:800;letter-spacing:.01em}
.book-bar .bb-txt{font-size:.72rem;font-weight:500;opacity:.85;display:block}
.book-bar .bb-copy{display:flex;flex-direction:column;line-height:1.25;min-width:0}
/* info-page conversion layer (build_site._cta_layer + helpers.availability) */
.cta-early{background:var(--neutral);border:2px solid var(--coral);border-radius:var(--r-md);
padding:16px 20px;margin:1.6em 0;display:flex;flex-wrap:wrap;align-items:center;
gap:12px 18px;justify-content:space-between}
.cta-early p{margin:0;flex:1 1 300px}
.cta-early .cta-label{display:block;font-weight:600;font-size:.7rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--coral);margin-bottom:.25em}
.cta-early .btn{white-space:nowrap;flex:0 0 auto}
.book-card{scroll-margin-top:84px}
/* ==================================================================== */
/* Engagement layer (2026-08-23, from colomares) */
/* live opening-status strip (homecontent: LIVE_STRIP) — hidden until its
inline script computes today's status and sets display:block */
.live-strip{display:none;background:var(--neutral);border-bottom:1px solid rgba(0,0,0,.08)}
.live-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:9px 20px;font-size:.85rem}
.ls-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#8a8a8a}
.live-strip.is-open .ls-dot{background:#2e9e44;box-shadow:0 0 0 3px rgba(46,158,68,.18);animation:lspulse 2s infinite}
.live-strip.is-closed .ls-dot{background:#c0392b}
@keyframes lspulse{50%{box-shadow:0 0 0 6px rgba(46,158,68,.06)}}
.ls-status{font-weight:700}
.ls-hours,.ls-crowd{color:rgba(0,0,0,.6)}
.ls-left,.ls-right{display:flex;align-items:center;gap:8px}
.ls-right{margin-left:auto}
@media(max-width:600px){.ls-right{margin-left:17px}}
/* itinerary time badges (ROUTE stops as 3-tuples) */
.stop-time{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
background:rgba(0,0,0,.07);font-size:.72rem;font-weight:700;letter-spacing:.02em;
vertical-align:2px;white-space:nowrap}
/* pull-quote (helpers.pullquote) */
.pullquote{margin:38px auto;padding:0 8px;max-width:560px;text-align:center;border:0}
.pullquote p{font-family:inherit;font-size:1.45rem;line-height:1.35;font-weight:700;
font-style:italic;color:var(--ink);margin:0}
.pullquote::before{content:"\201D";display:block;font-size:3rem;line-height:.6;color:var(--coral);margin-bottom:10px}
/* "good to know" glance grid (homecontent: GLANCE — replaces ia-takeaways) */
.glance{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:34px 0}
.prose>.glance:first-child{margin-top:0}
@media(max-width:640px){.glance{grid-template-columns:1fr}}
.glance-item{display:flex;gap:13px;align-items:flex-start;background:var(--neutral);
border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:15px 17px;
text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease}
.glance-item:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.g-ico{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--coral);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.g-txt{font-size:.86rem;line-height:1.45;color:rgba(0,0,0,.65)}
.g-txt b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:2px}
/* ==================================================================== */
/* 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(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: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)}
/* ------------------------------------------------------------------ */
/* Attractions map (2026-08-23, build_map.py) */
/* ------------------------------------------------------------------ */
#amap-map{height:520px;border-radius:14px;border:1px solid var(--line);
margin:18px 0 26px;z-index:0}
@media(max-width:760px){#amap-map{height:420px}}
.amap-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.amap-chip{--chip:var(--ink);display:inline-flex;align-items:center;gap:7px;
padding:7px 13px;border-radius:999px;border:1.5px solid var(--line);
background:var(--surface);font:inherit;font-size:.86rem;font-weight:600;
color:var(--ink);cursor:pointer}
.amap-chip::before{content:"";width:10px;height:10px;border-radius:50%;
background:var(--chip)}
.amap-chip[data-g="all"]::before{display:none}
.amap-chip.is-on{border-color:var(--chip);background:color-mix(in srgb,var(--chip) 8%,var(--surface))}
.amap-n{font-size:.74rem;font-weight:700;opacity:.55}
.amap-pin{display:block;width:24px;height:24px;border-radius:50%;
background:var(--chip,#A63A1B);border:3px solid #fff;
box-shadow:0 1px 5px rgba(0,0,0,.45)}
.leaflet-popup-content{font-family:inherit;margin:12px 14px}
.leaflet-popup-content b{display:block;font-size:.95rem;margin-bottom:3px}
.amap-pdesc{display:block;font-size:.82rem;color:var(--sage,#6E6459);margin:2px 0}
.amap-pprice{display:block;font-size:.86rem;font-weight:700;margin:4px 0 2px}
.amap-pbtn{display:inline-block;margin-top:6px;padding:7px 13px;
border-radius:8px;background:var(--accent,var(--coral,#A63A1B));color:#fff!important;
font-weight:600;font-size:.84rem;text-decoration:none}
.amap-group{margin-top:8px}
ul.amap-list{list-style:none;padding:0;margin:10px 0 0}
ul.amap-list li{display:flex;align-items:flex-start;gap:12px;
padding:13px 2px;border-bottom:1px solid var(--line)}
ul.amap-list li>div{flex:1;min-width:0}
.amap-dotmark{width:11px;height:11px;border-radius:50%;background:var(--chip);
flex-shrink:0;margin-top:6px}
ul.amap-list b{font-weight:650}
.amap-meta{display:block;font-size:.83rem;font-weight:600;margin-top:1px}
.amap-desc{display:block;font-size:.87rem;color:var(--sage);margin-top:2px}
.amap-locate{flex-shrink:0;font:inherit;font-size:.78rem;font-weight:600;
padding:6px 11px;border-radius:8px;border:1.5px solid var(--line);
background:none;color:var(--ink);cursor:pointer;white-space:nowrap}
.amap-locate:hover{border-color:var(--accent);color:var(--accent)}
/* --- Start-here chooser (2026-08-24, replaces homepage answer-box) --- */
.starter{border:1px solid var(--line,#E3DCCF);border-radius:var(--r-md,14px);
padding:18px 18px 14px;margin:0 0 1.7em;background:var(--surface,#fff)}
.starter-kick{margin:0 0 12px;font-size:.95rem}
.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.starter-opt{display:flex;flex-direction:column;gap:3px;padding:12px 14px;
border:1.5px solid var(--line,#E3DCCF);border-radius:10px;text-decoration:none;
color:var(--ink,#222);background:var(--surface,#fff);transition:border-color .15s}
.starter-opt:hover{border-color:var(--accent,var(--coral,#A63A1B))}
.starter-opt.is-top{border-color:var(--accent,var(--coral,#A63A1B));
background:color-mix(in srgb,var(--accent,var(--coral,#A63A1B)) 5%,var(--surface,#fff))}
.starter-opt b{font-size:.98rem;line-height:1.25}
.s-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
color:var(--accent,var(--coral,#A63A1B))}
.s-note{font-size:.82rem;color:var(--sage,#6E6459)}
.starter-foot{margin:10px 0 0;font-size:.85rem;color:var(--sage,#6E6459)}
.starter-foot a{text-decoration:underline;color:inherit}
@media(max-width:760px){.starter-grid{grid-template-columns:1fr}}
/* Lightbox prev/next controls (2026-08-24) */
.lightbox-close{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;padding:4px 10px;z-index:2}
.lightbox-close:hover{color:var(--accent,var(--coral,#A63A1B))}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:3.2rem;line-height:1;cursor:pointer;padding:8px 18px;opacity:.8;z-index:2}
.lightbox-nav:hover{opacity:1;color:var(--accent,var(--coral,#A63A1B))}
.lightbox-nav[hidden]{display:none}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}
@media(max-width:760px){.lightbox-nav{font-size:2.4rem;padding:6px 10px}}
/* Insider's Guide (70/30 + sticky) v20260824d */
.iguide{background:var(--neutral);border-radius:var(--r-lg);padding:40px 34px;margin:2.4em 0}
@media(min-width:1080px){.iguide{margin-left:-110px;margin-right:-110px}}
@media(min-width:1200px){.iguide{margin-left:-150px;margin-right:-150px}}
.iguide-label{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent,var(--coral,#A63A1B));margin:0 0 6px}
.iguide-title{margin:0 0 26px}
.iguide-grid{display:grid;grid-template-columns:7fr 3fr;gap:48px;align-items:start}
.iguide-lead{font-size:1.12rem;font-style:italic;color:var(--ink);margin-top:0}
.iguide-art h3{margin:1.6em 0 .5em;scroll-margin-top:84px}
.iguide-art h3:first-of-type{margin-top:1.2em}
.iguide-fig{margin:1.6em 0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/7}
.iguide-fig img{width:100%;height:100%;object-fit:cover}
.iguide-fig--tall{aspect-ratio:auto;min-height:340px;margin:1.6em 0 0}
.iguide-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.iguide-duo .iguide-art h3,.iguide-duo h3{margin-top:1.6em}
.iguide-side{position:sticky;top:84px;display:grid;gap:14px}
.iguide-book{background:#fff;border-radius:var(--r-md);border-top:4px solid var(--accent,var(--coral,#A63A1B));padding:16px 18px}
.iguide-book-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sage,#777);margin:0 0 4px}
.iguide-book-title{font-family:var(--serif,inherit);font-size:1.1rem;font-weight:700;margin:0 0 3px}
.iguide-book-rating{font-size:.82rem;margin:0 0 8px}
.iguide-book-rating span{color:var(--accent,var(--coral,#A63A1B))}
.iguide-book-list{list-style:none;margin:0 0 12px;padding:0}
.iguide-book-list li{font-size:.8rem;line-height:1.4;margin:0 0 5px;padding-left:16px;position:relative}
.iguide-book-list li::before{content:"\2713";position:absolute;left:0;color:var(--accent,var(--coral,#A63A1B))}
.iguide-book .btn{display:block;text-align:center}
@media(max-width:900px){.iguide{padding:30px 22px}.iguide-grid{grid-template-columns:1fr;gap:30px}.iguide-side{position:static}.iguide-duo{grid-template-columns:1fr;gap:0}.iguide-fig--tall{aspect-ratio:3/4;min-height:0}}
/* ==========================================================================
OLD MONEY — the design layer for schlossambras.com (design.md, 2026-09-17)
Hunter green, one gold accent, embossed cream. Flat on purpose: no
gradients, and the accent drives exactly one action per screen.
THREE THINGS IN HERE ARE NOT COSMETIC.
1. CONTRAST. Measured against the page, not eyeballed. The brief's
secondary #7B8271 comes out at 3.32:1 on the cream ground and its gold
#B89155 at 2.42:1 - both under AA for text, and the gold is the face of
every button. Rather than break the single-accent rule, each is darkened
at CONSTANT HUE until it passes: captions and metadata use #666C5E
(4.52:1), and gold used as text or as a button fill becomes #7A5A24
(5.28:1 on cream; cream on it is 5.62:1). The brief's #B89155 keeps the
jobs where contrast rules do not apply - hairlines, rules, ornament.
2. THE FALLBACK FACES. The font link is display=swap, so for a few hundred
milliseconds the page is set in whatever the machine has. Cormorant runs
90-96% of Times and Inter 101-106% of Arial, so without a metric match
the headings re-wrap when the webfonts land and everything below them
jumps. The size-adjust figures below were MEASURED with the real faces
installed locally (measure_font_fallback.py), not copied from anywhere.
3. THE H1 STEPS. Cormorant is a narrow display serif with a small x-height:
it buys line-count headroom and spends legibility. The phone-width steps
and the per-language scale below are what hold the home hero to two
lines at 360px and every inner h1 to three, in five languages.
========================================================================== */
@font-face{font-family:"Cormorant fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:400;size-adjust:95.79%}
@font-face{font-family:"Cormorant fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:500;size-adjust:96.13%}
@font-face{font-family:"Cormorant fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:600;size-adjust:90.62%}
@font-face{font-family:"Cormorant fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:700;size-adjust:90.96%}
@font-face{font-family:"EB Garamond fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:400;size-adjust:94.22%}
@font-face{font-family:"EB Garamond fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:600;size-adjust:94.08%}
@font-face{font-family:"EB Garamond fb";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos"),local("Nimbus Roman"),local("Thorndale AMT");font-weight:700;size-adjust:96.81%}
@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.42%}
@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.48%}
@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.96%}
@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.94%}
:root{
--display:"Cormorant","Cormorant fb",Georgia,"Times New Roman",serif;
--body:"EB Garamond","EB Garamond fb",Georgia,"Times New Roman",serif;
--label:"Inter","Inter fb",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
/* AA-corrected tokens. The raw brief values live on as ornament only. */
--sage:#666C5E; /* was #7B8271 (3.32:1) - captions and metadata */
--rule:#B89155; /* the brief's gold, for hairlines and ornament */
--coral:#7A5A24; /* gold as a surface under cream text (5.62:1) */
--coral-ink:#7A5A24; /* gold as text on cream (5.28:1) */
--coral-dk:#5E4519; /* hover, darker still at the same hue */
--line:#DDD4BE;
--r-sm:0px; --r-md:2px; --r-lg:4px; /* square by design */
--h1-scale:1;
}
body{font-family:var(--body);background:var(--neutral);font-size:19px;line-height:1.7}
h1,h2,h3,.logo,.display{font-family:var(--display);font-weight:600;letter-spacing:-.012em;line-height:1.14}
h1{font-size:calc(2.75rem * var(--h1-scale))}
h4,.label,.nav a,.crumb,.btn,.badge,.chip,.book-chip,.cmp-badge,.rowlabel,.sc-row span,.rate,.foot-bottom{
font-family:var(--label);letter-spacing:.06em}
h4,.label{letter-spacing:.18em;font-size:.7rem}
.nav a{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
/* Hairlines, not boxes: the panels sit on the cream and are separated by a
single gold rule rather than by shadow. */
.card,.book-card,.answer-box,.starter,.glance,.tour,.rev-card,.scorecard,.cmp{
border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:none}
.answer-box{border-left:2px solid var(--rule)}
hr,.rule{border:0;border-top:1px solid var(--rule);opacity:.6}
/* One action per screen carries the gold; everything else is outlined ink. */
.btn{background:var(--coral);color:var(--surface);border-radius:var(--r-md);
font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem}
.btn:hover{background:var(--coral-dk)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--surface)}
/* H1 STEPS. Cormorant at 2.75rem overflows two lines on a phone in every
language once the castle's name is in it, so the display size steps down
twice before the gate does. */
@media (max-width:420px){h1{font-size:calc(1.62rem * var(--h1-scale))}}
@media (max-width:360px){h1{font-size:calc(1.46rem * var(--h1-scale))}}
@media (max-width:330px){h1{font-size:calc(1.34rem * var(--h1-scale))}}
/* PER-LANGUAGE SCALE. German compounds (Habsburger Portraetgalerie,
Kunst- und Wunderkammer) and the Romance articles run longer than the
English they are translated from; the scale is what keeps their heroes on
two lines without cutting the castle's name out of the headline. */
html[lang="de"]{--h1-scale:.92}
html[lang="fr"]{--h1-scale:.95}
html[lang="es"]{--h1-scale:.95}
html[lang="it"]{--h1-scale:.95}
/* THE HERO'S OWN RAMP. `.hero h1` (0,1,1) outranks the `h1` media queries
above (0,0,1), so without these the home hero ignored every phone step and
rendered at the base 2.1rem - which is how it came back three lines deep in
the padded stress test while the inner pages passed. Same ladder, higher
specificity, and the display weight comes back to Cormorant's 600: the
inherited 800 is heavier than this face was drawn for and cost width. */
.hero h1{font-family:var(--display);font-weight:600;letter-spacing:-.018em;
font-size:calc(3.2rem * var(--h1-scale))}
@media(max-width:640px){.hero h1{font-size:calc(2.05rem * var(--h1-scale))}}
@media(max-width:420px){.hero h1{font-size:calc(1.72rem * var(--h1-scale))}}
@media(max-width:360px){.hero h1{font-size:calc(1.54rem * var(--h1-scale))}}
@media(max-width:330px){.hero h1{font-size:calc(1.40rem * var(--h1-scale))}}
/* ---- the language bar ----------------------------------------------------
add_langbar.py INJECTS THIS MARKUP; NOTHING IN THE SCAFFOLD STYLES IT. The
chips are inline / with no whitespace between them, so with no rules
they render as one fused run - "ENDEFRESIT" - in the header of all 205 pages.
The previous site carried these rules with a comment saying exactly that, and
a comment in one site's stylesheet is not a thing the next build reads: this
layer was written from design.md and reproduced the defect the note warned
about. add_langbar.py now refuses to finish unless the stylesheet carries a
.lang-chip rule, so the fourth site cannot repeat it either. Themed for Old
Money: square chips, hairline border, ink tile for the current language. */
.lang-bar{display:flex;align-items:center;gap:4px;margin-left:10px;flex:0 0 auto}
.lang-chip{display:inline-block;padding:4px 7px;border-radius:var(--r-md);
font-family:var(--label);font-size:.62rem;font-weight:600;letter-spacing:.16em;
color:var(--sage);text-decoration:none;line-height:1.2;white-space:nowrap;
border:1px solid transparent;text-transform:uppercase}
a.lang-chip:hover{color:var(--ink);background-color:var(--neutral);
border-color:var(--line);text-decoration:none}
.lang-chip.is-current{color:var(--surface);background-color:var(--ink);
border-color:var(--ink)}
@media(max-width:1000px){.lang-bar{margin-left:auto;margin-right:8px;order:2}
.nav-toggle{order:3}}
@media(max-width:420px){.lang-chip{padding:3px 5px;letter-spacing:.1em}}
@media(max-width:640px){
.lang-chip{min-height:32px;display:inline-flex;align-items:center}
}
/* ---- hero legibility ------------------------------------------------------
MEASURED, NOT EYEBALLED. The scaffold dims the hero photograph with one flat
rgba(21,24,24,.44) and sets the lede at #ECEDEA and the trust line at
#D9DBD7. Sampled against this site's own hero frame - whose left half is
bright sky, sunlit valley and pale buildings, because the castle was
composed on the RIGHT THIRD to leave room for the copy - the worst case came
out at 3.81:1 for the h1, 3.24:1 for the lede and 2.73:1 for the trust line.
The h1 scrapes AA for large text; the other two fail it, and Cormorant at
600 is optically thinner than the 800-weight sans those colours were chosen
for.
Fixing it by darkening the flat scrim would dim the castle as well, so the
scrim is now DIRECTIONAL: lighter overall than before (.28 against .44, so
the castle side is brighter than it shipped) with an ink gradient over the
left where the words are, fading out by 62% - before the keep. On phones the
copy spans the full width, so there the ink is flat across the frame.
Measured again after the change, worst case over the copy area - blurred to
a glyph stroke first, because legibility is decided at the scale of a stroke
and not by one blown pixel or by a 20x downsample:
desktop 6.17:1 phone 5.12:1
Both well above the 4.5 AA line for body text. The first attempt at this
gradient started fading at 38% and measured 4.50:1 on the desktop, because
the copy column runs to 52% and the ink had almost gone by the time it got
there: the hold now covers the whole column and only then fades. The eyebrow's #FFC9B0 was a leftover from the scaffold's coral
theme - not an Old Money colour, and 1.9:1 on this ground. */
.hero::before{background:
linear-gradient(90deg, rgba(31,58,44,.50) 0%, rgba(31,58,44,.50) 50%,
rgba(31,58,44,0) 66%),
rgba(21,24,24,.28)}
.hero .label{color:#fff;opacity:1}
.hero .lede{color:#fff}
.hero-trust{color:#fff}
.hero-trust b{color:#fff}
@media(max-width:900px){
/* the copy is full-width here, so the ink is too */
.hero::before{background:
linear-gradient(90deg, rgba(31,58,44,.50) 0%, rgba(31,58,44,.50) 100%),
rgba(21,24,24,.28)}
}