/* four-corners-monument-tickets.com — "Film Photography" design system.
   Space Mono for display and labels, Inter for reading. Silver-gelatin
   neutrals, one Kodak-yellow accent, near-square corners.
   Flat by design: no gradients, one accent action per screen.
   (The scaffold ships the PREVIOUS site's name in this comment. It is
   cosmetic, which is exactly why it survives copy after copy.) */

:root{
  /* Every ratio below was measured, not estimated. Text floor 4.5:1,
     large-text and non-text UI floor 3:1. */
  --ink:#151412;        /* 15.32 on neutral, 17.20 on surface */
  --sage:#6E6960;       /* 4.54 on neutral, 5.09 on surface.
                           design.md says #777268, which is 3.98 on the
                           neutral - fine for a border, FAILS for the captions
                           and metadata the same line assigns it to. Darkened
                           at constant hue until it cleared the text floor. */
  --kodak:#F2C94C;      /* THE ACCENT, AS A FILL ONLY.
                           As TEXT on the neutral it is 1.32 - not a near-miss,
                           invisible. It has exactly two correct jobs:
                           ink on it (11.60, the button), and itself as text on
                           the ink footer (11.60). Never a word on cream. */
  --kodak-ink:#7D6827;  /* the SAME HUE darkened for text on light:
                           4.50 on neutral, 5.05 on surface, cream on it 5.05.
                           Solved against the NEUTRAL, not the surface - they
                           are close enough to feel interchangeable and are
                           not, and body links sit on the neutral. */
  --kodak-dk:#D9B23A;   /* button hover: DARKENS. The label is ink, so
                           darkening the fill raises contrast (13.6) rather
                           than lowering it. */
  --neutral:#EEEAE0;    /* page foundation */
  --surface:#FBF7EC;    /* card / panel surface */
  --white:#FFFFFF;
  --line:#DDD7C8;       /* decorative hairline only, 1.19 - never a functional
                           border on its own. Focus rings use --kodak-ink. */
  --line-strong:#B9B2A0;/* 2.14 - functional borders, inputs, chips */
  --on-ink:#DAD5C9;     /* body text on the ink footer, 11.0 */
  --on-ink-mut:#A29C90; /* muted text on ink, 5.6 */
  /* design.md: sm 0, md 2, lg 4. Film has square corners. */
  --r-sm:0px;
  --r-md:2px;
  --r-lg:4px;
  --disp:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --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:var(--ui);
  font-size:17px;line-height:1.65;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(--kodak-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* SPACE MONO CARRIES THE IDENTITY. A monospace display face is the whole
   point of the brief - frame counters, contact-sheet annotations - but it
   is wide, so headings get tighter tracking and a shorter measure than a
   proportional face would need. Space Mono ships 400 and 700 only;
   nothing here asks for a weight it does not have, and font-synthesis is
   off so a missing weight fails visibly instead of being faked. */
h1,h2,h3,.logo,.display{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.12}
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}
/* Labels are the frame-number motif: mono, small, wide-tracked. */
h4,.label{font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.10em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}

.label{font-family:"Inter",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kodak-ink);margin:0 0 .5em}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--kodak);color:#fff;font-family:"Inter",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(--kodak);
  transition:background .15s,border-color .15s;text-align:center;
}
.btn:hover{background:var(--kodak-dk);border-color:var(--kodak-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:"Inter",sans-serif;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.nav a:hover{color:var(--kodak-ink);text-decoration:none}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
        background:var(--white);border-bottom:1px solid var(--line);padding:8px 22px 16px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line);width:100%}
  .nav a.btn{margin-top:10px;text-align:center}
}

/* ---------- breadcrumb ---------- */
.crumb{font-family:"Inter",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(--kodak)}
.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}
.hero-copy{max-width:52%}
.hero .label{color:#FFC9B0;opacity:.98}
.hero h1{font-size:3.2rem;margin:0 0 .35em;color:#fff;font-weight: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:"Inter",sans-serif;font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.facts-val .star{color:var(--kodak)}
.facts-label{font-family:"Inter",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",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(--kodak);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:"Inter",sans-serif;font-size:.92rem;font-weight:500;
  color:var(--ink);padding:6px 0 6px 16px;border-left:3px solid var(--kodak);line-height:1.35}
.explore-links a:hover{color:var(--kodak-ink);border-left-color:var(--kodak-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(--kodak-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(--kodak);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(--kodak));font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
.ia-takeaways a{color:var(--accent,var(--kodak));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:"Inter",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}

/* NARROW SCREENS: A PROSE TABLE MUST SCROLL ITSELF, NOT THE PAGE.
   The distance table on /getting-there/ measures 352px in English and 378px in
   French - both wider than a 320px viewport - so the whole document scrolled
   sideways on a small phone, in BOTH languages. Nothing looked broken; every
   element rendered correctly and the page was simply 80px too wide, which is
   why it only surfaced by measuring documentElement.scrollWidth against
   window.innerWidth rather than by looking at it.
   display:block turns the table into its own scroll container; its rows still
   lay out as an anonymous table box inside, so column alignment is unaffected.
   .cmp is excluded because it already has .cmp-wrap doing exactly this. */
@media(max-width:700px){
  .prose table:not(.cmp){display:block;width:100%;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  .prose table:not(.cmp) th,.prose table:not(.cmp) td{padding:10px 9px;font-size:.9rem}
}

/* ---------- tip / keyfacts / proscons ---------- */
.tip{background:var(--neutral);border:2px solid var(--kodak);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:"Inter",sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kodak-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",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(--kodak)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--kodak-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:"Inter",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(--kodak)}
.inclist .inc h4{color:var(--kodak-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--kodak-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}

/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:"Inter",sans-serif;font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--kodak);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(--kodak);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",sans-serif;font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--kodak);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:"Inter",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(--kodak-ink);font-family:"Inter",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(--kodak)}
/* 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(--kodak);color:#fff;font-family:"Inter",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(--kodak)}
.price{font-weight:700;margin-bottom:.8em}
.price span{font-weight:400;color:var(--sage);font-size:.85rem}
.tour-body .btn{margin-top:auto}
/* decorative desert filler tile (rounds out incomplete card rows on desktop) */
.tour-filler{position:relative;border:2px dashed #e0c4ad;background:var(--neutral);align-items:center;justify-content:center;min-height:180px}
.tour-filler:hover{border-color:#e0c4ad}
.tour-filler .filler-art{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.tour-filler .filler-label{position:relative;font-family:"Inter",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(--kodak);color:#fff;font-family:"Inter",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:"Inter",sans-serif;font-weight:700}
table.cmp .rowlabel{font-family:"Inter",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(--kodak);border-right:2px solid var(--kodak)}
table.cmp thead .feat{border-top:2px solid var(--kodak)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--kodak)}
.cmp-badge{display:inline-block;background:var(--kodak);color:#fff;font-family:"Inter",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",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.col-alt{color:var(--ink)}
table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:1.8em 0}
.gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(21,24,24,.82);color:#fff;font-family:"Inter",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(--kodak);padding:14px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:"Inter",sans-serif;font-weight:800;font-size:1.5rem;color:var(--kodak-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",sans-serif;font-weight:800;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em}
.reviews-head .stars{color:var(--kodak);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(--kodak-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(--kodak-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(--kodak-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(--kodak-ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#C9CCC7;margin-top:40px;border-top:4px solid var(--kodak)}
.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:"Inter",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:"Inter",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}
.foot-searches{margin-top:22px;border-top:1px solid #2c2f2f;padding-top:20px}
.foot-searches h4{font-family:"Inter",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(--kodak);background:rgba(255,255,255,.05)}
.foot-bottom{margin-top:28px;border-top:1px solid #2c2f2f;padding-top:18px;font-family:"Inter",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:"Inter",sans-serif;font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--kodak);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(--kodak);color:#fff;font-family:"Inter",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)}
/* Photographer credit under the gallery. Small, but it is a licence
   condition rather than a caption, so it must stay legible: it is measured by
   the same contrast audit as body text and sits at 4.5:1 against the section
   background, not at the 3:1 large-text floor. */
.photo-credit{margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink)}
.photo-credit a{color:var(--ink);text-decoration:underline}
@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(--kodak);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",sans-serif;font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:"Inter",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.
   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: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(--kodak);font-weight:700;font-size:1.3rem;margin:4px 0 8px}
.ladder-col.feat .ladder-price{color:var(--kodak-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(--kodak);color:var(--kodak)}
@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(--kodak)}
/* 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: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)}


/* ==================================================================== *
 * FILM PHOTOGRAPHY - identity, high-CTR layout and UX polish.
 * Appended by apply_design.py. Everything here is measured; ratios are
 * in the comments so they can be checked rather than trusted.
 * ==================================================================== */

/* --- the accent, used correctly in each of its three contexts --- */
a{color:var(--kodak-ink)}                    /* 4.50 on neutral */
.btn,.btn:visited{
  background-color:var(--kodak);color:var(--ink);   /* 11.60 - design.md's own
                                                       pairing, and it is right */
  font-family:var(--disp);font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink);border-radius:var(--r-md);
  padding:13px 22px;display:inline-block;text-decoration:none;
  transition:background-color .15s ease,transform .15s ease}
.btn:hover{background-color:var(--kodak-dk);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background-color:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background-color:var(--surface)}
/* `.nav a.btn` is (0,2,1) and outranks `.btn` at (0,1,0). A sister site had a
   flipped label silently overridden by exactly this and it took a
   getComputedStyle sweep to find, because reading the CSS top-to-bottom shows
   the correct rule sitting right there. Stated explicitly instead. */
.nav a.btn{color:var(--ink)}

/* --- the film-frame motif: a sprocket rule, used sparingly --- */
.frame-rule{height:10px;background-image:repeating-linear-gradient(
   to right,var(--ink) 0 6px,transparent 6px 14px);opacity:.22;margin:2.4em 0}

/* --- header --- */
.site-head{background-color:var(--neutral);border-bottom:1px solid var(--ink)}
.logo{font-family:var(--disp);font-weight:700;letter-spacing:-.03em}

/* --- LANGUAGE SWITCHER (carried forward as a solved component) ---
 * It is a SIBLING of .nav, never a child. .nav is display:none below 1000px,
 * so a switcher inside it vanishes on every phone - and when the hamburger
 * opens, a column nav stacks the chips on separate full-width rows.
 * flex-wrap:nowrap makes "one row" structural rather than something to
 * re-measure at each breakpoint. */
.lang-bar{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;flex:0 0 auto}
.lang-bar .lang-chip{
  font-family:var(--disp);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;white-space:nowrap;
  padding:6px 7px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  color:var(--sage);background:transparent;text-decoration:none}
.lang-bar a.lang-chip:hover,.lang-bar a.lang-chip:focus-visible{
  color:var(--kodak-ink);border-color:var(--kodak-ink);text-decoration:none}
.lang-bar .lang-chip.on{
  color:var(--ink);background-color:var(--kodak);border-color:var(--ink)}  /* 11.60 */
@media(max-width:1000px){
  .lang-bar{order:2;margin-left:auto}
  .nav-toggle{order:3;margin-left:6px}
  .lang-bar .lang-chip{font-size:.68rem;padding:5px 6px}
}
/* Adding a third child to the header changes the small-width budget even when
   the new element itself fits: on a sister site the bar was 112px inside a
   320px wrap and the header still overflowed, because the 18px flex gaps and a
   full-size wordmark had previously had the row to themselves. */
@media(max-width:400px){
  .site-head .wrap{gap:8px}
  .logo{font-size:.98rem}
  .logo .mark{width:26px;height:26px}
}
@media(max-width:360px){.lang-bar .lang-chip{padding:5px 4px;letter-spacing:.02em}}
/* French is the only translated tree here and its nav labels run long
   ("Ce que ca coute", "Reserver"). Band measured, not guessed. */
@media(min-width:1001px) and (max-width:1300px){
  :lang(fr) .nav{gap:16px}
  :lang(fr) .nav a{font-size:.84rem;letter-spacing:0}
  :lang(fr) .nav a.btn{padding:11px 14px;letter-spacing:.04em}
  :lang(fr) .lang-bar .lang-chip{font-size:.66rem;padding:5px 5px}
}

/* --- cards and panels: square, hairline, flat --- */
.tour,.card,.answer-box,.book-card{
  background-color:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-lg)}
.tour{transition:transform .15s ease,box-shadow .15s ease}
.tour:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}

/* --- the facts strip: contact-sheet row --- */
.facts-strip{background-color:var(--surface);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.facts-val{font-family:var(--disp);font-weight:700}

/* --- focus, which the scaffold leaves to the browser default --- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.lang-chip:focus-visible{
  outline:2px solid var(--kodak-ink);outline-offset:2px}

/* --- footer on ink --- */
.site-foot{background-color:var(--ink);color:var(--on-ink)}
.site-foot a{color:var(--kodak)}              /* 11.60 on ink */
.site-foot .muted{color:var(--on-ink-mut)}    /* 5.60 on ink */

/* --- print: the guide is the kind of page people print for the car --- */
@media print{
  .site-head,.lang-bar,.book-card,.btn{display:none}
  body{background:#fff;font-size:11pt}
}


/* ------------------------------------------------------------------ *
 * THE ACCENT USED AS TEXT - the two places the scaffold gets it wrong,
 * and the reason a computed-style audit is not optional.
 *
 * A contrast sweep across the built site returned 216 failures on 32
 * pages. Both causes are one selector each, repeated on every card:
 *
 *   .badge  white on the Kodak yellow = 1.59:1. This is the EXACT
 *           pairing apply_design.py already warned about in writing -
 *           "the instinct to put white on a yellow button would have
 *           measured 1.59" - and it was sitting in the scaffold's badge
 *           rule the whole time, on a selector I had not looked at.
 *           Knowing the rule did not find the instance. Measuring did.
 *   .star   the raw accent as a text glyph on the cream card surface =
 *           1.48:1. Third site in this family where star glyphs in the
 *           accent colour failed on a light panel. An accent has TWO
 *           values - a fill and a text tone - and glyphs are text.
 * ------------------------------------------------------------------ */
.badge{color:var(--ink)}                 /* ink on Kodak yellow = 11.60 */
.star{color:var(--kodak-ink)}            /* 5.05 on the card surface */
.facts-val .star{color:var(--kodak-ink)} /* same glyph, same fix, light panel */
/* On the ink footer the raw yellow is correct and stays: 11.60 there. */
.site-foot .star{color:var(--kodak)}
/* .book-chip is the same white-on-yellow pairing a third time (1.59). The
   audit found it only after .badge and .star were fixed, because a page stops
   at nothing - each pass surfaces the next one down. Run the sweep until it
   returns zero, not until it returns fewer. */
.book-chip{color:var(--ink)}


/* ==================================================================== *
 * ACCENT-AS-TEXT: THE COMPLETE SWEEP.
 *
 * Fixing .badge, .star and .book-chip one at a time surfaced the next
 * offender each pass - 216 failures, then 82, then 57 - because a page
 * stops at nothing and each fix only reveals what was behind it. So this
 * block enumerates EVERY selector in this stylesheet that pairs the raw
 * Kodak yellow with white text, or uses it as a text colour on a light
 * surface, and fixes the class rather than the instance.
 *
 * The two rules, stated once:
 *   FILL  -> label must be --ink            (11.60)
 *   TEXT on light -> must be --kodak-ink    (4.50 neutral / 5.05 surface)
 *   TEXT on the ink footer -> raw --kodak is correct and stays (11.60)
 *
 * Glyphs are text. Stars, arrows, bullets and checkmarks in the accent
 * colour on a light panel are the single most repeated contrast failure
 * across this family of sites - this is the third build where star
 * glyphs failed, and knowing that in advance still did not find them.
 * Only measuring did.
 * ==================================================================== */

/* --- accent as a FILL: every label goes to ink --- */
.badge,.book-chip,.cmp-badge{color:var(--ink)}
.section-nav a:hover{color:var(--ink)}
.route-stops li:before{color:var(--ink)}

/* --- accent as TEXT on light: every one goes to the ink-toned yellow --- */
.star,.sc-stars,.rev-stars,.t-stars,.reviews-head .stars,
.facts-val .star,.ladder-price,.pros,.inclist .inc{color:var(--kodak-ink)}
.tour:hover,.rev-card:hover{color:var(--kodak-ink)}
.foot-searches a:hover,.town-chips .chip:hover,
.ladder-col .btn.ghost:hover{color:var(--kodak-ink)}

/* --- the ink footer is the one place the raw accent is right as text --- */
.site-foot a,.site-foot .star{color:var(--kodak)}   /* 11.60 on ink */
/* .sc-stars is the INVERSE case and it proves the rule. The scorecard panel is
   INK, not cream, so the ink-toned yellow that fixed every other star glyph is
   3.40 here - too dark - while the raw accent is 11.60. Same glyph, same class
   name, opposite correct answer, decided entirely by what it is sitting on.
   Read the surface off the RENDERED ELEMENT, never off the class name. */
.scorecard .sc-stars{color:var(--kodak)}
/* And the ladder band is dark too - same inversion as .sc-stars, found on the
   pass after it. The homepage ladder columns composite to a near-ink panel, so
   --kodak-ink is 2.85 there against a 3.0 floor for large text. Raw accent:
   11.60. Two selectors, two surfaces, and the only way to know which is which
   was to ask the browser. */
.ladder-col .ladder-price,.ladder-price{color:var(--kodak)}
.ladder-col.feat .ladder-price{color:var(--kodak-ink)}  /* feat column is cream */

/* ------------------------------------------------------------------ *
 * FOLD. Measured AFTER the content pass, which is the only measurement
 * that counts: the placeholder hero cleared the fold comfortably and
 * the real one did not, because the real H1 is a full sentence ("There
 * are no Four Corners Monument tickets. Admission is US$8, paid at the
 * gate.") set in a WIDE monospace face. Space Mono buys the identity
 * and costs about 15% more width per character than a proportional
 * sans, so the display clamp and the hero padding both have to be
 * tighter than they would otherwise be.
 * Target: the CTA and the trust line both above 768px.
 * ------------------------------------------------------------------ */
@media(min-width:1001px){
  .hero{padding-top:2.2em;padding-bottom:2.2em}
  .hero h1{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.14;margin:.05em 0 .35em}
  .hero .lede{font-size:1rem;line-height:1.5;margin-bottom:1em}
  .hero-cta{margin-top:.6em}
  .hero-trust{margin-top:.7em}
}

/* h1_retrofit v2 */
/* H1 line budget (owner rule 2026-09-07): every headline fits in TWO lines on
   every viewport, 360-1280px. --h1-scale is a per-language size step
   (0.88-1) written by h1_retrofit.py only when it keeps a headline intact
   that would otherwise have to be rewritten. No hyphens:auto: browsers
   hyphenate differently, so a headline that fits by hyphenating in one
   would be three lines in another. */
h1{font-size:calc(clamp(1.55rem,4.6vw,2rem) * var(--h1-scale,1));line-height:1.12;text-wrap:balance}
.hero h1{font-size:calc(clamp(1.75rem,3.9vw,3rem) * var(--h1-scale,1));line-height:1.1;text-wrap:balance}
@media(max-width:640px){h1{font-size:calc(1.55rem * var(--h1-scale,1))}.hero h1{font-size:calc(1.7rem * var(--h1-scale,1))}}
html[lang="en"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */
html[lang="fr"] .hero h1{--h1-scale:0.88} /* h1_retrofit v2 */