/* hakonedaytripfromtokyo.com — "Tea House" design system.
Rice-paper neutrals, bamboo-green ink, a single clay-red seal accent.
Three type tiers: Shippori Mincho (display), Noto Serif JP (body),
Noto Sans JP (labels/UI). Flat on purpose - the brief's no-gradient
rule is load-bearing, so there is not one in this file.
Every colour pairing below was measured; see apply_design.py. */
:root{
/* ---- palette (design.md "Tea House"; ratios measured, not assumed) ---- */
--ink:#1E2016; /* primary: headlines & core text 13.82 on neutral */
--sage:#686C59; /* secondary as TEXT: meta, captions 4.54 on neutral
the brief's #7B8069 is only 3.43 and fails the 4.5
text floor; corrected at constant hue (73.0 deg) */
--sage-line:#7B8069; /* the brief's secondary, BORDERS ONLY 3.43 > 3:1 UI */
--coral:#B0361B; /* tertiary: the single interaction accent
cream on it is 5.58, so unlike the last two builds
this brief's own button spec is already accessible */
--coral-ink:#932D15; /* same hue, darker: link + body text 7.19 on surface */
--coral-dk:#8A2A14; /* button hover 7.80 on surface */
--coral-lite:#E6A184; /* the accent RE-CUT FOR DARK SURFACES 7.69 on ink.
A dark surface needs its own lighter tint of the hue,
never the same token dimmed or brightened: --coral
itself is 2.66 on ink and filter:brightness() does
not change the computed colour, so it fools an audit
without fixing the render. */
--accent:#B0361B; /* alias .pa-now .btn reads with no fallback - it was
undefined in the scaffold, i.e. a transparent CTA */
--neutral:#F0EBDA; /* the page foundation - negative space is a feature */
--surface:#F8F3E1; /* rice-paper card / panel surface */
--white:#FFFFFF;
--line:#DCD3B8;
/* ---- warm greys for the ink surfaces (footer, bands, scorecards).
The scaffold's greys were cool (#C9CCC7 / #8d918c / #D9DBD7) and read
blue against cream. Re-cut warm; lowest ratio here is 5.34 on ink. ---- */
--on-ink:#CFC9B4; /* 9.95 body text on ink */
--on-ink-hi:#E3DECB; /* 12.23 lede / emphasis on ink */
--on-ink-mut:#969383; /* 5.34 labels + meta on ink */
--on-ink-pill:#A9A695;/* 6.73 footer pill text */
--on-ink-label:#EFB7A0;/* 9.39 warm clay tint for the hero eyebrow label */
--rule-ink:#34382A; /* hairline rules on ink - decorative, not text */
/* ---- type tiers. new_site.py can only swap ONE family, so it put the
body serif into the nav, chips, table heads and labels too. ---- */
--disp:"Shippori Mincho","Noto Serif JP",Georgia,serif;
--serif:"Noto Serif JP",Georgia,"Times New Roman",serif;
--ui:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
/* ---- radii straight from the brief (2 / 4 / 8): this system is nearly
square on purpose. Hardcoded 10-16px and 999px values elsewhere in the
file are normalised to these below. ---- */
--r-sm:2px;
--r-md:4px;
--r-lg:8px;
--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(--serif);
font-size:18px;line-height:1.75;color:var(--ink);background-color:var(--neutral);
-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-ink);text-decoration:none}
a:hover{text-decoration:underline}
/* Display tier: Shippori Mincho. It is a LIGHT mincho, so it is used only
at display sizes and at 500, never scaled down to sub-head size - the
same split that fixed a hairline serif on an earlier site. Negative
tracking is a geometric-sans habit; a mincho wants ~0. */
h1,.logo,.display{font-family:var(--disp);font-weight:500;letter-spacing:-.015em;
line-height:1.3;font-synthesis-weight:none;font-synthesis:none}
/* Sub-head tier: the BODY face at 700, not the display face shrunk. */
h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:0;line-height:1.38}
h1{font-size:2.4rem;margin:.1em 0 .5em}
h2{font-size:1.6rem;margin:2.2em 0 .6em}
h3{font-size:1.18rem;margin:1.6em 0 .4em}
h4{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em}
p{margin:0 0 1.05em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}}
.label{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5em}
/* ---------- buttons ---------- */
/* Scope the filled state as :not(.btn-ghost). .btn and .btn-ghost have EQUAL
specificity, so the ghost variant only wins by source order - one reordered
or duplicated rule and the ghost label goes cream-on-cream (a real user bug
report on a sister site). Ghost cascade restated explicitly below. */
.btn{
display:inline-block;font-family:var(--ui);font-weight:600;
font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
padding:12px 22px;border-radius:var(--r-md);border:2px solid transparent;
transition:background-color .15s,border-color .15s,color .15s;text-align:center;
}
.btn:not(.btn-ghost){background-color:var(--coral);color:#fff;border-color:var(--coral)}
.btn:not(.btn-ghost):hover{background-color:var(--coral-dk);border-color:var(--coral-dk);
text-decoration:none;color:#fff}
.btn-ghost{background-color:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background-color:var(--ink);color:var(--surface);text-decoration:none}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background-color:var(--neutral);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}
/* nowrap + no shrink: without these a tight nav WRAPS ITS LABELS instead of
tripping the hamburger, and the bar breaks (76px button in a 66px header,
user report). With them the nav either fits or the breakpoint fires - it
can never half-fit. The 1000px collapse below is measured, not guessed. */
.nav a{color:var(--ink);font-family:var(--ui);font-weight:600;font-size:.9rem;
letter-spacing:.01em;white-space:nowrap;flex:0 0 auto}
.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:1000px){
.nav-toggle{display:block}
.nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
background-color:var(--neutral);border-bottom:1px solid var(--line);padding:8px 22px 16px}
.nav.open{display:flex}
.nav a{padding:13px 0;border-bottom:1px solid var(--line);width:100%;white-space:normal}
.nav a.btn{margin-top:10px;text-align:center}
}
/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--ui);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'))}
/* Flat scrims only. The brief: "Don't introduce gradients. This system is
flat on purpose." The scaffold also carried the PREVIOUS theme's ink
(21,24,24) here; this site's ink is #1E2016 = 30,32,22.
THE SCRIM ALONE IS NOT ENOUGH, and no contrast audit will tell you so: an
audit reads .hero's opaque background-color (the ink fallback) and scores
white-on-ink at 16.5:1, while the pixels a reader actually sees are white
on a PHOTO seen through the scrim. This hero's brief puts open sky on the
LEFT — exactly where the copy sits. Composited against a blown-out sky the
old .52 scrim gave 3.43:1 for the h1 and 2.55:1 for the lede: a real,
invisible failure. Fixed by scrimming the COPY BLOCK rather than crushing
the whole photograph — see .hero-copy below. */
.hero::before{content:"";position:absolute;inset:0;background-color:rgba(30,32,22,.40)}
.hero .wrap{position:relative;z-index:1;padding:76px 22px 68px;min-height:460px;display:flex;flex-direction:column;justify-content:center}
.hero-copy{max-width:58%}
/* .hero h1 is (0,1,1) and outranks a bare h1 - it kept the WRONG FACE on
two earlier builds because the design layer only restyled `h1`. The
display face and weight are therefore restated here at matching
specificity rather than hoped for by inheritance. */
.hero .label{color:var(--on-ink-label);opacity:1}
.hero h1{font-family:var(--disp);font-size:clamp(1.75rem,2.9vw,2.6rem);
margin:0 0 .4em;color:#fff;font-weight:500;letter-spacing:-.015em;line-height:1.2;
font-synthesis:none}
.hero .lede{font-size:1.06rem;color:var(--on-ink-hi);margin-bottom:1.2em;line-height:1.55}
.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:var(--on-ink-hi);margin:0}
.hero-trust b{color:#fff}
/* The copy panel. Flat, hard-edged, with the same left rule the answer boxes
use, so it reads as a deliberate lacquer panel rather than a soft vignette —
and it guarantees legibility over ANY photograph, because the panel's own
background composites last. Measured against the worst case (pure white sky
under the .40 base scrim): h1 8.87:1, lede 6.58:1, eyebrow label 5.05:1. */
.hero-copy{background-color:rgba(30,32,22,.68);border-left:3px solid var(--coral);
padding:24px 28px 26px;border-radius:0 var(--r-md) var(--r-md) 0}
@media(max-width:900px){.hero-copy{max-width:100%}}
@media(max-width:640px){.hero-copy{padding:22px 20px 24px}}
@media(max-width:640px){.hero .wrap{padding:60px 22px 54px;min-height:0}}
/* ---------- tour-data facts strip (under hero) ---------- */
.facts-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0}
.facts-item{flex:1 1 0;min-width:150px;padding:16px 22px;border-right:1px solid var(--line)}
.facts-item:last-child{border-right:0}
.facts-val{font-family:var(--ui);font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.facts-val .star{color:var(--coral)}
.facts-label{font-family:var(--ui);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:var(--ui);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:var(--ui);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-color:var(--surface);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-color:var(--ink);border-radius:var(--r-lg);padding:26px 30px;margin:34px 0;color:rgba(255,255,255,.92)}
.ia-takeaways h2{color:#fff;margin:0 0 14px;font-size:1.25rem}
.ia-takeaways ul{list-style:none;margin:0;padding:0}
.ia-takeaways li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.14)}
.ia-takeaways li:last-child{border-bottom:0}
.ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--coral-lite);font-weight:700}
.ia-takeaways b,.ia-takeaways strong{color:#fff}
/* NEVER buy contrast with filter:brightness() - the computed colour is
unchanged, so an audit reads the pre-filter value while the render
stays at 2.66:1. Explicit light tint instead: 7.69:1. */
.ia-takeaways a{color:var(--coral-lite);filter:none;
text-decoration-color:rgba(255,255,255,.35)}
.ia-takeaways a:hover{color:#fff}
/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.96rem}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
/* ---------- tip / keyfacts / proscons ---------- */
.tip{background-color:var(--surface);border:2px solid var(--coral);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0}
.tip-label{display:inline-block;font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em}
.tip p{margin:0}
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0}
.keyfacts div{background:var(--surface);padding:14px 16px}
.kf-label{display:block;font-family:var(--ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px}
.keyfacts b{font-size:1.02rem}
@media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.pc ul{list-style:none;margin:0;padding:0}
.pc li{position:relative;padding-left:1.6em;margin:.5em 0}
.pros{border-color:var(--coral)}
.pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}
.inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0}
.inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.inclist h4{margin:0 0 .5em;font-family:var(--ui);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.inclist ul{list-style:none;margin:0;padding:0}
.inclist li{position:relative;padding-left:1.6em;margin:.5em 0}
.inclist .inc{border-color:var(--coral)}
.inclist .inc h4{color:var(--coral-ink)}
.inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700}
.inclist .exc h4{color:var(--sage)}
.inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700}
@media(max-width:640px){.inclist{grid-template-columns:1fr}}
/* ---------- scorecard (review pages) ---------- */
.scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em}
.sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sc-big{font-family:var(--ui);font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em}
.sc-stars{color:var(--coral-lite);letter-spacing:2px;margin:.2em 0}
.sc-rev{font-size:.8rem;color:var(--on-ink-hi)}
.sc-price{margin-top:.5em;font-weight:700;color:#fff}
.sc-specs{padding:8px 22px;background:var(--surface)}
.sc-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sc-row:last-child{border-bottom:0}
.sc-row span{color:var(--sage)}
.sc-row b{text-align:right}
@media(max-width:560px){.scorecard{grid-template-columns:1fr}}
/* ---------- review hub cards ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.5em 0 .4em}
@media(max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;background:var(--surface);color:var(--ink);transition:border-color .15s}
.rev-card:hover{border-color:var(--coral);text-decoration:none}
.rev-thumb{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.rev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rev-card:hover .rev-thumb img{transform:scale(1.04)}
.rev-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px}
.rev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.6em}
.rev-score{font-family:var(--ui);font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)}
.rev-stars{color:var(--coral);letter-spacing:1px;font-size:.9rem}
.rev-count{font-family:var(--ui);font-weight:500;font-size:.72rem;color:var(--sage)}
.rev-card h3{font-weight:700;font-size:1.05rem;line-height:1.3;margin:0 0 .4em}
.rev-card p{font-size:.92rem;color:var(--sage);margin:0 0 1em}
.rev-price{font-weight:700;font-size:.9rem;margin-top:auto}
.rev-more{display:block;color:var(--coral-ink);font-family:var(--ui);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.5em}
/* ---------- tour cards ---------- */
/* A CENTRED FLEX ROW, not a grid. Grid cannot centre an incomplete row, which
is the only reason the scaffold shipped a decorative "filler" tile to top
short rows up to a multiple of three. That tile looks like a product card
that failed to load - users try to click it - and it is fake inventory on a
site whose whole pitch is not padding the truth. The helper is deleted, not
just its output. Cards keep their exact grid widths (flex-grow:0), row-mates
still equalise height (flex items stretch by default), and 5 lays out 3 + 2
centred. */
.tours-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
gap:20px;margin:1.5em 0 .4em}
.tours-grid>*{flex:0 1 calc((100% - 40px)/3)}
.tours-grid.cols-4{gap:16px}
.tours-grid.cols-4>*{flex:0 1 calc((100% - 48px)/4)}
/* Shape the awkward counts with :has() child-counting instead of new markup:
four cards read as 2x2, a lone card as a half-width feature. SCOPED inside
the desktop breakpoint on purpose - :has()/:not() inherit their argument's
specificity, so an unscoped rule outranks the mobile widths below and pins
phones at half-width cards. */
@media(min-width:861px){
.tours-grid:not(.cols-4):has(>*:nth-child(4)):not(:has(>*:nth-child(5)))>*{
flex:0 1 calc((100% - 20px)/2)}
.tours-grid:not(:has(>*:nth-child(2)))>*{flex:0 1 calc((100% - 20px)/2)}
}
@media(max-width:1024px){.tours-grid.cols-4>*{flex:0 1 calc((100% - 16px)/2)}}
@media(max-width:860px){.tours-grid>*{flex:0 1 calc((100% - 20px)/2)}}
@media(max-width:560px){.tours-grid>*,.tours-grid.cols-4>*{flex:0 1 100%}}
.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}
/* explicit hover colour, never filter:brightness() - a filter leaves the
computed colour untouched, so it lies to a contrast audit and its real
effect depends on the stacking context */
a.tour:hover .btn:not(.btn-ghost){background-color:var(--coral-dk);border-color:var(--coral-dk)}
.thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;background:var(--coral);color:#fff;font-family:var(--ui);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}
/* (filler-tile styling deleted along with helpers._filler) */
/* ---------- book-card (docked chip availability) ---------- */
.book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)}
.book-chip{position:absolute;top:-13px;left:18px;background:var(--coral);color:#fff;font-family:var(--ui);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:var(--ui);font-weight:700}
table.cmp .rowlabel{font-family:var(--ui);font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)}
table.cmp thead .feat{border-top:2px solid var(--coral)}
table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)}
.cmp-badge{display:inline-block;background:var(--coral);color:#fff;font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);margin-bottom:6px}
.feat-title{display:block;font-family:var(--ui);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 ---------- */
/* 3 columns, because this site ships 6 gallery shots and the column count
MUST divide the shot count - a 3-column strip with 7 shots left one
hanging on an earlier build. 6 / 3 = 2 clean rows. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;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-color:rgba(30,32,22,.86);color:#fff;font-family:var(--ui);font-weight:600;font-size:.72rem;padding:14px 12px 9px;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:1.5em 0;counter-reset:s}
.step{border-top:3px solid var(--coral);padding:14px 4px 0;counter-increment:s}
.step::before{content:counter(s);font-family:var(--ui);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-color:var(--surface);border-radius:var(--r-lg);padding:24px;margin:1.8em 0}
.reviews-head{display:flex;align-items:center;gap:18px}
.reviews-head .big{font-family:var(--ui);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-color:var(--surface);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-color:var(--surface);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-color:var(--ink);color:var(--on-ink);margin-top:40px;border-top:4px solid var(--coral)}
.site-foot .wrap{padding:48px 22px 30px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px}
.site-foot .brand .logo{color:#fff;margin-bottom:.6em}
.site-foot .brand p{font-size:.9rem;max-width:34em}
.site-foot h4{color:#fff;margin-bottom:.8em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.4em 0}
.site-foot a{color:var(--on-ink);font-size:.92rem}
.site-foot a:hover{color:#fff}
.foot-guides{margin-top:30px;border-top:1px solid var(--rule-ink);padding-top:20px}
.foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px}
.foot-answers{margin-top:26px;border-top:1px solid var(--rule-ink);padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.foot-answers .label{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut)}
.foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-answers a{color:var(--on-ink);font-size:.86rem}
.foot-answers a:hover{color:#fff}
.foot-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;border-top:1px solid var(--rule-ink);padding-top:22px}
.foot-facts .kf-label,.foot-facts .label{display:block;font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut);margin-bottom:3px}
.foot-facts b{color:#fff;font-size:.92rem}
.foot-searches{margin-top:22px;border-top:1px solid var(--rule-ink);padding-top:20px}
.foot-searches h4{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut);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:6px 12px;border:1px solid var(--rule-ink);border-radius:var(--r-sm);font-size:.78rem;color:var(--on-ink-pill);line-height:1.3;transition:color .15s,border-color .15s,background .15s}
.foot-searches a:hover{color:#fff;border-color:var(--coral-lite);background-color:rgba(255,255,255,.06)}
.foot-bottom{margin-top:28px;border-top:1px solid var(--rule-ink);padding-top:18px;font-family:var(--ui);font-size:.74rem;color:var(--on-ink-mut)}
.foot-bottom a{color:var(--on-ink)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(2,1fr)}}
/* ---------- homepage: "what's included" two-column ---------- */
.includes{margin:2.2em 0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px}
.includes h2{margin:0 0 .25em}
.includes-lead{color:var(--sage);margin:0 0 1.2em;font-size:1rem}
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.includes-col h3{font-family:var(--ui);font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--coral);display:inline-block}
.includes-col ul.check{margin:0}
.includes-col .muted{color:var(--sage);font-style:italic}
@media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}}
/* ---------- homepage: route / "what you see, in order" (AEO) ---------- */
.route{margin:2.4em 0}
.route h2{margin:0 0 .25em}
.route-lead{color:var(--sage);margin:0 0 1.1em;font-size:1rem}
.route-stops{list-style:none;margin:1.4em 0;padding:0;counter-reset:stop}
.route-stops li{counter-increment:stop;position:relative;padding:0 0 1.1em 3.2em;margin:0}
.route-stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:var(--coral);color:#fff;font-family:var(--ui);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-color:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column}
.t-stars{color:var(--coral);letter-spacing:2px;font-size:.92rem;margin-bottom:.5em}
.t-card blockquote{margin:0 0 1em;font-size:.96rem;line-height:1.55;color:var(--ink)}
.t-card figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:.7em}
.t-name{display:block;font-family:var(--ui);font-weight:700;font-size:.86rem;color:var(--ink)}
.t-tour{display:block;font-family:var(--ui);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") */
/* the one non-palette colour in the file: a green "included" pill needs to read
as a different SIGNAL from the clay CTA, not as a second accent. Cream on it
is 6.31:1. */
.fee-badge{position:absolute;left:10px;bottom:10px;background-color:#33562F;color:var(--surface);
font-family:var(--ui);font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-sm)}
/* price-per-day subtext (tour dict: "perday") */
.perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px}
/* duration/decision ladder band (homecontent: LADDER) */
.ladder-band{background:var(--ink);color:var(--neutral);padding:34px 0 40px}
.ladder-band h2{color:var(--neutral);font-size:1.45rem;margin:0 0 18px}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ladder-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
border-radius:var(--r-md);padding:20px 18px;display:flex;flex-direction:column}
.ladder-col.feat{background:var(--surface);color:var(--ink);border-color:var(--surface)}
.ladder-col.feat p{color:var(--ink)}
.ladder-days{font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase}
.ladder-price{color:var(--coral-lite);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-lite);color:var(--coral-lite)}
@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-color:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
padding:7px 15px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.town-chips .chip.on{background:var(--ink);color:var(--neutral);border-color:var(--ink)}
.town-chips .chip:hover{border-color:var(--coral)}
/* sticky mobile book-bar (homecontent: BOOK_BAR) */
.book-bar{display:none}
@media(max-width:760px){
.book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
background:var(--ink);color:var(--neutral);align-items:center;justify-content:space-between;
gap:10px;padding:10px 14px;box-shadow:0 -3px 12px rgba(0,0,0,.25)}
.book-bar span{font-size:.85rem;font-weight:600}
.book-bar .btn{padding:9px 16px;font-size:.85rem}
body{padding-bottom:58px}
}
/* ==================================================================== */
/* Conversion + EEAT layer (piloted on okavangodeltasafaritours.com) */
/* cancel-note under availability widgets (conversion layer) */
.cancel-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)}
/* anchored-price band (opt-in via homecontent PRICE_ANCHOR) */
.price-anchor{margin:34px 0;padding:26px 26px 28px;background-color:var(--surface);
border:1px solid var(--line);border-radius:var(--r-lg)}
.price-anchor h2{margin:0 0 18px;font-size:1.25rem}
.pa-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.pa-col{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-md)}
.pa-was{background:var(--neutral);border:1px dashed var(--line)}
.pa-now{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.pa-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight: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:var(--r-lg);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:var(--r-lg);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-color:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.author-card img{width:96px;height:96px;border-radius:var(--r-lg);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)}
/* ==================================================================== */
/* UX + CTR polish. Applied at build time, not bolted on afterwards. */
/* Everything here is either an accessibility floor the scaffold had no */
/* rule for, or a conversion affordance that earned its place on an */
/* earlier site in this family. Nothing here relies on source order. */
/* --- 1. Focus. The scaffold shipped NO :focus-visible rule at all, so a
keyboard user tabbing through a page of tour cards got whatever the UA
drew — which on a cream surface is often nothing readable. --- */
:focus-visible{outline:3px solid var(--coral-ink);outline-offset:2px;border-radius:var(--r-sm)}
.hero :focus-visible,.site-foot :focus-visible,.ia-takeaways :focus-visible,
.ladder-band :focus-visible,.section-nav :focus-visible{outline-color:var(--coral-lite)}
a.tour:focus-visible{outline-offset:3px}
/* --- 2. Touch targets. Coarse pointers get 44px of height on everything
tappable; the desktop sizes are untouched. --- */
@media(pointer:coarse){
.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.faq summary{padding-top:16px;padding-bottom:16px}
.foot-searches a,.town-chips .chip{min-height:40px;display:inline-flex;align-items:center}
.site-foot li a,.foot-answers a{display:inline-block;padding:5px 0}
}
/* --- 3. Sticky-header offset. Section ids are the header nav's anchor
targets, so a heading must land BELOW the 66px bar, not under it. --- */
:target,section[id],h2[id],h3[id],#availability,#popular,#faq,#gallery,#compare,
#reviews,#how-it-works,#how-booking-works{scroll-margin-top:82px}
/* --- 4. Card affordance. The whole card is one ; make that legible
without a shadow (this system is flat) by moving the border and the
thumb only. --- */
.tour,.rev-card{transition:border-color .15s,transform .15s}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
a.tour:hover,.rev-card:hover{transform:translateY(-2px)}
a.tour:hover .thumb img{transform:scale(1.03)}
}
.thumb img{transition:transform .25s}
/* --- 5. Prices and ratings read as data, not prose: tabular figures stop
a column of yen amounts from shivering line to line. --- */
.price,.facts-val,.sc-big,.rev-score,.ladder-price,.pa-price,.reviews-head .big,
table.cmp td{font-variant-numeric:tabular-nums}
/* --- 6. Japanese typography for the /jp/ tree. Path label /jp/ carries
lang="ja" (never lang="jp" — that is not a language subtag). Japanese
needs more leading than Latin at the same size, and mincho headings
need noticeably more than the 1.24 the Latin hero uses. --- */
:lang(ja) body,:lang(ja) .prose{line-height:1.85}
:lang(ja) h1,:lang(ja) .hero h1{line-height:1.4;letter-spacing:0}
:lang(ja) h2,:lang(ja) h3{line-height:1.5}
:lang(ja) .label,:lang(ja) .facts-label,:lang(ja) .kf-label,:lang(ja) .badge,
:lang(ja) .cmp-badge,:lang(ja) .book-chip{letter-spacing:.04em;line-height:1.45}
/* Japanese wraps anywhere, so an uppercase Latin-styled nav label is wrong
for it; and the translated labels run longer, which is what broke a
sister site's header. Give the ja nav slightly tighter type INSIDE the
desktop breakpoint only, or it leaks into the stacked mobile panel where
full-size type is wanted. */
@media(min-width:1001px){
:lang(ja) .nav{gap:18px}
:lang(ja) .nav a{font-size:.85rem}
}
/* --- 7. Long product titles. GYG titles are not written to fit a card;
clamp them so a 12-word title cannot push the price and CTA out of line
with its row-mates. --- */
.tour-body h3,.rev-card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden}
/* --- 8. Print: people print itineraries and cost pages. --- */
@media print{
.site-head,.section-nav,.book-bar,.hero-cta,.foot-searches,.explore{display:none}
.hero{background-image:none;background-color:#fff;color:#000}
.hero::before,.hero::after{display:none}
.hero h1,.hero .lede,.hero-trust{color:#000}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all}
}
/* --- 9. Nav headroom band. The EN nav measures ~830px with a fallback face;
Noto Sans JP's Latin is wider, and the JA tree's labels will differ again.
Rather than betting one number, give the nav real slack just above the
1000px collapse so it can never arrive at the breakpoint already tight.
With white-space:nowrap + flex:0 0 auto the nav either fits or the
hamburger fires — the half-fit state that broke a sister site's header
(a 76px button inside a 66px bar) is not reachable. --- */
@media(min-width:1001px) and (max-width:1180px){
.nav{gap:18px}
.nav a{font-size:.86rem}
.nav a.btn{padding:11px 16px;letter-spacing:.04em}
}
/* --- 10. Foundation note. The page is --neutral (#F0EBDA) and cards/panels
are --surface (#F8F3E1), i.e. panels are LIGHTER than the page. That is
the brief's mapping ("Neutral: the page foundation", card background =
surface) and it is the inverse of the scaffold, which had a white page and
a near-white surface. The recessed tint stays --neutral in exactly three
places, all deliberate: table heads, the featured comparison column, and
the crossed-out anchor price inside an already-raised panel. --- */
/* 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="ja"] .hero h1,html[lang="jp"] .hero h1{--h1-scale:0.90} /* h1_retrofit v2: jp */