/* ==========================================================================
Komodo Travellers — "Komodo Expedition Editorial" Design System
Single shared stylesheet. Vanilla CSS, mobile-first, no build step.
NOTE: web fonts are loaded via tags in
(see partials.py head()), NOT via @import here. @import forces the
browser to fetch and resolve the Google Fonts stylesheet before it can
apply any rule below it, which delays first paint and can produce a
visible flash of unstyled, unlaid-out content. tags let the font
CSS and this stylesheet load in parallel instead.
========================================================================== */
:root{
/* Refined brand palette */
--navy-950:#081C26;
--navy-900:#0C2833;
--ocean-700:#185765;
--teal-600:#21717A;
--olive-600:#5C6248;
--sand-100:#F1E8D9;
--ivory-50:#FCF9F2;
--charcoal-900:#202728;
--stone-600:#6F746F;
--coral-500:#D86848;
--copper-500:#B7804D;
--dry-grass:#A28B5D;
--white:#FFFFFF;
/* Back-compat aliases (kept so component classes below stay unchanged) */
--abyss-navy:var(--navy-950);
--deep-ocean:var(--ocean-700);
--komodo-teal:var(--teal-600);
--savanna-olive:var(--olive-600);
--warm-sand:var(--sand-100);
--soft-ivory:var(--ivory-50);
--volcanic-charcoal:var(--charcoal-900);
--sunset-coral:var(--coral-500);
--expedition-copper:var(--copper-500);
--muted-stone:var(--stone-600);
/* Semantic roles */
--bg-page:var(--soft-ivory);
--bg-section-alt:var(--warm-sand);
--bg-dark:var(--abyss-navy);
--bg-dark-2:var(--deep-ocean);
--text-primary:var(--volcanic-charcoal);
--text-muted:var(--muted-stone);
--text-on-dark:var(--soft-ivory);
--text-on-dark-muted:#B9C7C4;
--border-soft:rgba(32,39,40,0.12);
--border-on-dark:rgba(251,248,241,0.18);
--link:var(--komodo-teal);
--focus-ring:var(--sunset-coral);
/* Type */
--font-display:'Fraunces', Georgia, 'Times New Roman', serif;
--font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Scale */
--step-0:1rem;
--step-1:1.125rem;
--step-2:1.375rem;
--step-3:1.75rem;
--step-4:2.25rem;
--step-5:2.75rem;
--step-6:3.5rem;
--radius-s:4px;
--radius-m:8px;
--radius-l:12px;
--radius-pill:999px;
--shadow-s:0 1px 2px rgba(8,29,40,0.08);
--shadow-m:0 6px 20px rgba(8,29,40,0.10);
--shadow-l:0 16px 40px rgba(8,29,40,0.16);
/* Grid */
--container-max:1280px;
--content-narrow:760px;
--content-medium:980px;
--gutter-desktop:32px;
--gutter-tablet:24px;
--gutter-mobile:18px;
--measure:70ch;
--header-h:80px;
--z-nav:50;
--z-dropdown:55;
--z-mobile-nav:60;
--z-toc:20;
--z-skip:100;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}
body{
margin:0;
background:var(--bg-page);
color:var(--text-primary);
font-family:var(--font-body);
font-size:1rem;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.nav-locked{overflow:hidden;}
/* Fixed header needs every page to clear it, except the homepage where the
hero deliberately sits full-bleed behind the transparent header. */
main{padding-top:var(--header-h);}
body.page-home main{padding-top:0;}
img{max-width:100%;height:auto;display:block;}
svg{display:block;max-width:100%;}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--sunset-coral);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--focus-ring);
outline-offset:2px;
border-radius:var(--radius-s);
}
button{font-family:inherit;}
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:500;
line-height:1.15;
color:var(--text-primary);
margin:0 0 0.6em;
}
h1{font-size:clamp(2.375rem,3.4vw + 1.6rem,5.125rem);font-weight:500;letter-spacing:-0.01em;}
h2{font-size:clamp(2rem,2vw + 1.5rem,4rem);}
h3{font-size:clamp(1.5rem,1vw + 1.2rem,2.25rem);}
h4{font-size:var(--step-1);font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
p{margin:0 0 1.2em;max-width:var(--measure);}
.lede{font-size:clamp(1.0625rem,0.4vw + 0.95rem,1.1875rem);line-height:1.55;color:var(--text-primary);font-weight:400;}
ul,ol{padding-left:1.2em;}
li{margin-bottom:0.4em;}
/* ---------- Layout helpers ---------- */
.container{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--gutter-mobile);
}
@media (min-width:768px){ .container{padding-inline:var(--gutter-tablet);} }
@media (min-width:1024px){ .container{padding-inline:var(--gutter-desktop);} }
.section{padding-block:clamp(3rem,6vw,5.5rem);}
.section--alt{background:var(--bg-section-alt);}
.section--dark{background:var(--bg-dark);color:var(--text-on-dark);}
.section--dark h2,.section--dark h3,.section--dark h4{color:var(--text-on-dark);}
.section--dark p,.section--dark li{color:var(--text-on-dark-muted);}
.section--olive{background:var(--savanna-olive);color:var(--soft-ivory);}
.section--olive h2,.section--olive h3{color:var(--soft-ivory);}
.section--olive p,.section--olive li{color:#E6E7DE;}
.eyebrow{
display:inline-block;
font-family:var(--font-body);
font-weight:700;
font-size:0.8125rem;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--copper-500);
margin-bottom:0.9em;
}
.section--dark .eyebrow{color:var(--dry-grass);}
.section-head{max-width:var(--content-narrow);margin-bottom:2.75rem;}
.section-head h2{max-width:20ch;}
.section-num{
font-family:var(--font-display);
color:var(--dry-grass);
font-size:0.95rem;
letter-spacing:0.08em;
display:block;
margin-bottom:0.6em;
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:0.55em;
font-family:var(--font-body);
font-weight:700;
font-size:0.95rem;
padding:0.9em 1.7em;
border-radius:10px;
border:1.5px solid transparent;
cursor:pointer;
min-height:48px;
transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 150ms ease, box-shadow 200ms ease;
text-decoration:none;
line-height:1.2;
}
.btn svg{width:16px;height:16px;transition:transform 200ms ease;}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{background:var(--coral-500);color:var(--ivory-50);box-shadow:0 8px 24px rgba(216,104,72,0.28);}
.btn-primary:hover{background:#c1583b;color:var(--ivory-50);transform:translateY(-1px);}
.btn-secondary{background:rgba(8,28,38,0.35);color:var(--soft-ivory);border-color:rgba(251,248,241,0.55);backdrop-filter:blur(2px);}
.btn-secondary:hover{background:rgba(251,248,241,0.14);color:var(--soft-ivory);border-color:var(--soft-ivory);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--abyss-navy);border-color:rgba(32,39,40,0.3);}
.btn-outline:hover{background:var(--abyss-navy);color:var(--soft-ivory);border-color:var(--abyss-navy);}
.btn:active{transform:translateY(1px);}
/* ---------- Skip link ---------- */
.skip-link{
position:fixed;
left:1rem;top:-60px;
background:var(--soft-ivory);
color:var(--abyss-navy);
padding:0.8em 1.2em;
border-radius:var(--radius-s);
z-index:var(--z-skip);
font-weight:700;
transition:top 200ms ease;
box-shadow:var(--shadow-m);
}
.skip-link:focus{top:1rem;}
/* ==========================================================================
Header / Navigation — single row, fixed, transparent-to-solid on scroll
========================================================================== */
.site-header{
position:fixed;
top:0;left:0;right:0;
z-index:var(--z-nav);
height:var(--header-h);
display:flex;
align-items:center;
background:linear-gradient(to bottom, rgba(8,28,38,0.55) 0%, rgba(8,28,38,0.18) 70%, transparent 100%);
border-bottom:1px solid transparent;
transition:background-color 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease, box-shadow 260ms ease;
}
.site-header.is-scrolled{
background:rgba(8,28,38,0.97);
backdrop-filter:saturate(140%) blur(10px);
border-bottom-color:rgba(183,128,77,0.4);
box-shadow:0 8px 24px rgba(8,28,38,0.18);
}
/* Internal pages (non-home) always want a readable solid bar, since their
hero band is a flat navy fill, not photography needing see-through. */
body:not(.page-home) .site-header{
background:rgba(8,28,38,0.97);
backdrop-filter:saturate(140%) blur(10px);
border-bottom-color:rgba(251,248,241,0.14);
}
body:not(.page-home) .site-header.is-scrolled{border-bottom-color:rgba(183,128,77,0.4);}
.nav-bar{
width:100%;
max-width:var(--container-max);
margin-inline:auto;
padding-inline:var(--gutter-mobile);
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
height:100%;
}
@media (min-width:768px){ .nav-bar{padding-inline:var(--gutter-tablet);} }
@media (min-width:1024px){ .nav-bar{padding-inline:var(--gutter-desktop);} }
/* ---------- Brand lockup ---------- */
.brand-link{display:flex;align-items:center;gap:0.65em;text-decoration:none;color:var(--soft-ivory);flex-shrink:0;}
.brand-link .logo-mark{width:36px;height:36px;flex-shrink:0;}
.brand-wordmark{
font-family:var(--font-display);
font-size:1.375rem;
font-weight:500;
letter-spacing:0.002em;
color:var(--soft-ivory);
white-space:nowrap;
}
@media (max-width:420px){ .brand-wordmark{font-size:1.15rem;} }
/* ---------- Desktop nav ---------- */
.nav-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;height:44px;
background:transparent;
border:1px solid var(--border-on-dark);
border-radius:var(--radius-s);
color:var(--soft-ivory);
cursor:pointer;
flex-shrink:0;
}
.nav-toggle svg{width:20px;height:20px;}
.primary-nav{
position:fixed;
inset:0;
top:var(--header-h);
background:var(--navy-950);
z-index:var(--z-mobile-nav);
overflow-y:auto;
visibility:hidden;
opacity:0;
transform:translateY(-8px);
transition:opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.primary-nav.is-open{visibility:visible;opacity:1;transform:translateY(0);transition:opacity 220ms ease, transform 220ms ease;}
.primary-nav-close{
display:none;
}
.primary-nav ul{list-style:none;margin:0;padding:0.5rem var(--gutter-mobile) 2rem;}
.primary-nav > ul > li{margin:0;border-bottom:1px solid rgba(251,248,241,0.1);}
.primary-nav a{
display:flex;
align-items:center;
padding:1em 0.2em;
color:var(--text-on-dark);
text-decoration:none;
font-weight:600;
font-size:1.05rem;
min-height:48px;
}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--dry-grass);}
.nav-item-trigger{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
background:transparent;
border:0;
color:var(--text-on-dark);
font-family:inherit;
font-weight:600;
font-size:1.05rem;
padding:1em 0.2em;
min-height:48px;
cursor:pointer;
text-align:left;
}
.nav-item-trigger svg{width:18px;height:18px;flex-shrink:0;transition:transform 200ms ease;color:var(--dry-grass);}
.dropdown-panel{list-style:none;margin:0;padding:0 0 0.75rem 0.9rem;}
.dropdown-panel li{border:0;}
.dropdown-panel a{font-size:0.96rem;font-weight:500;padding:0.65em 0.2em;min-height:40px;color:var(--text-on-dark-muted);}
.dropdown-panel a:hover{color:var(--soft-ivory);}
.nav-lang{display:flex;align-items:center;gap:0.5em;padding:1.4rem 0.2em 0;font-size:0.95rem;}
.nav-lang a{padding:0.3em 0;color:var(--text-on-dark-muted);font-weight:600;min-height:auto;}
.nav-lang a[aria-current="true"]{color:var(--soft-ivory);border-bottom:1.5px solid var(--copper-500);}
.nav-lang .lang-sep{color:var(--text-on-dark-muted);opacity:0.5;}
@media (min-width:960px){
.nav-toggle{display:none;}
.primary-nav{
position:static;
inset:auto;
background:transparent;
z-index:auto;
overflow:visible;
visibility:visible;
opacity:1;
transform:none;
transition:none;
display:flex;
align-items:center;
gap:1.75rem;
height:100%;
}
.primary-nav ul{display:flex;align-items:center;gap:1.6rem;padding:0;margin:0;height:100%;}
.primary-nav > ul{flex:1;justify-content:center;}
.primary-nav > ul > li{border:0;height:100%;display:flex;align-items:center;position:relative;}
.primary-nav a{padding:0.4em 0.05em;font-size:0.92rem;font-weight:600;min-height:auto;border-bottom:2px solid transparent;}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{border-bottom-color:var(--sunset-coral);color:var(--soft-ivory);}
.nav-item-trigger{
padding:0.4em 0.05em;
font-size:0.92rem;
min-height:auto;
border-bottom:2px solid transparent;
gap:0.35em;
width:auto;
}
.nav-item-trigger:hover{color:var(--soft-ivory);border-bottom-color:var(--sunset-coral);}
.dropdown-panel{
position:absolute;
top:100%;left:50%;
transform:translateX(-50%) translateY(6px);
min-width:240px;
background:var(--navy-900);
border:1px solid rgba(251,248,241,0.12);
border-radius:var(--radius-m);
box-shadow:var(--shadow-l);
padding:0.6rem;
margin-top:0.6rem;
z-index:var(--z-dropdown);
opacity:0;
pointer-events:none;
transition:opacity 180ms ease, transform 180ms ease;
}
.nav-item-trigger svg{display:none;}
li.has-dropdown:hover .dropdown-panel,
li.has-dropdown:focus-within .dropdown-panel,
li.has-dropdown.is-open .dropdown-panel{
opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.dropdown-panel li{border:0;}
.dropdown-panel a{
display:block;
padding:0.7em 0.9em;
border-radius:var(--radius-s);
font-size:0.9rem;
border-bottom:0 !important;
}
.dropdown-panel a:hover{background:rgba(251,248,241,0.06);color:var(--soft-ivory);}
.nav-lang{padding:0;flex-shrink:0;}
}
/* ---------- Mobile full-screen nav ---------- */
@media (max-width:959px){
.primary-nav-close{
display:flex;
align-items:center;
justify-content:center;
width:44px;height:44px;
margin:0.75rem var(--gutter-mobile) 0 auto;
background:transparent;
border:1px solid var(--border-on-dark);
border-radius:var(--radius-s);
color:var(--soft-ivory);
cursor:pointer;
}
.primary-nav-close svg{width:20px;height:20px;}
}
/* ---------- Hero (homepage) ---------- */
.hero{
position:relative;
color:var(--soft-ivory);
background-color:var(--navy-950);
background-size:cover;
background-position:center;
min-height:clamp(760px,86vh,900px);
display:flex;
align-items:center;
isolation:isolate;
}
.hero::before{
content:"";
position:absolute;inset:0;
z-index:0;
background:
linear-gradient(90deg, rgba(8,28,38,0.92) 0%, rgba(8,28,38,0.72) 28%, rgba(8,28,38,0.28) 52%, rgba(8,28,38,0.05) 68%),
linear-gradient(0deg, rgba(8,28,38,0.55) 0%, rgba(8,28,38,0) 30%);
}
.hero-inner{position:relative;z-index:1;width:100%;padding-block:calc(var(--header-h) + 2rem) 4rem;}
.hero-content{max-width:640px;}
.hero .eyebrow{color:var(--dry-grass);}
.hero h1{color:var(--soft-ivory);max-width:15ch;margin-bottom:0.4em;}
.hero-desc{font-size:clamp(1.0625rem,0.5vw + 0.9rem,1.3125rem);max-width:36rem;line-height:1.55;color:var(--text-on-dark);opacity:0.94;margin-bottom:2em;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:0;}
.hero-credit{font-size:0.9rem;color:var(--text-on-dark-muted);border-top:1px solid var(--border-on-dark);padding-top:1.1rem;max-width:36ch;}
.hero-credit a{color:var(--warm-sand);}
.scroll-cue{
position:absolute;
left:var(--gutter-desktop);
bottom:2.25rem;
z-index:1;
display:flex;
align-items:center;
gap:0.6em;
font-size:0.72rem;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--text-on-dark-muted);
}
.scroll-cue .scroll-line{width:1px;height:34px;background:linear-gradient(to bottom, rgba(251,248,241,0.05), rgba(251,248,241,0.7));}
@media (max-width:640px){ .scroll-cue{display:none;} }
/* ---------- Post-hero pathway rail ---------- */
.rail{
position:relative;
z-index:2;
background:var(--navy-900);
}
@media (min-width:960px){
.rail{margin-top:-72px;}
}
.rail-grid{
display:grid;
grid-template-columns:1fr;
}
@media (min-width:700px){ .rail-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .rail-grid{grid-template-columns:repeat(4,1fr);} }
.rail-item{
display:flex;
flex-direction:column;
gap:0.5rem;
padding:1.9rem 1.75rem;
border-top:1px solid rgba(251,248,241,0.1);
text-decoration:none;
color:var(--soft-ivory);
transition:background-color 200ms ease;
}
@media (min-width:700px){
.rail-item{border-top:0;border-left:1px solid rgba(251,248,241,0.1);}
.rail-item:nth-child(1){border-left:0;}
}
@media (min-width:960px){
.rail-item:nth-child(3){border-left:1px solid rgba(251,248,241,0.1);}
}
.rail-item:hover{background:rgba(251,248,241,0.045);}
.rail-item:hover .rail-arrow{transform:translateX(4px);}
.rail-num{font-family:var(--font-display);color:var(--copper-500);font-size:0.85rem;letter-spacing:0.06em;}
.rail-item h3{font-size:1.05rem;margin:0.15em 0 0.1em;color:var(--soft-ivory);}
.rail-item p{font-size:0.86rem;color:var(--text-on-dark-muted);margin-bottom:0.3em;max-width:32ch;}
.rail-arrow{width:16px;height:16px;color:var(--copper-500);transition:transform 200ms ease;}
/* ---------- Internal page hero ---------- */
.page-hero{
background:linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 100%);
color:var(--soft-ivory);
padding-block:2.75rem 0;
}
.page-hero-grid{display:grid;gap:2rem;grid-template-columns:1fr;padding-bottom:2.75rem;}
.page-hero--with-image .page-hero-grid{padding-bottom:0;}
@media (min-width:900px){
.page-hero--with-image .page-hero-grid{grid-template-columns:1.05fr 0.95fr;align-items:end;gap:2.5rem;padding-bottom:0;}
}
.page-hero h1{color:var(--soft-ivory);max-width:20ch;margin-bottom:0.35em;}
.page-hero .lede{color:var(--text-on-dark-muted);max-width:56ch;font-size:1.0625rem;}
.page-hero-media{position:relative;}
.page-hero-media img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
border-radius:var(--radius-m) var(--radius-m) 0 0;
}
@media (min-width:900px){ .page-hero-media img{border-radius:var(--radius-m) var(--radius-m) 0 0;} }
.page-hero-facts{
background:rgba(251,248,241,0.06);
border:1px solid rgba(251,248,241,0.12);
border-radius:var(--radius-m);
padding:1.1rem 1.3rem;
margin-top:1.5rem;
display:flex;
flex-wrap:wrap;
gap:0.5rem 1.6rem;
}
.page-hero-facts dt{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--copper-500);font-weight:700;}
.page-hero-facts dd{margin:0.1em 0 0;font-size:0.92rem;color:var(--soft-ivory);}
/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-size:0.85rem;margin-bottom:1.1rem;}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0.4rem;padding:0;margin:0;}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:0.4rem;color:var(--text-on-dark-muted);}
.breadcrumbs a{color:var(--warm-sand);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs [aria-current="page"]{color:var(--text-on-dark-muted);}
.section .breadcrumbs a{color:var(--komodo-teal);}
.section .breadcrumbs li:not(:last-child)::after{color:var(--text-muted);}
.section .breadcrumbs [aria-current="page"]{color:var(--text-muted);}
/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:1.5rem;}
.grid-2{grid-template-columns:1fr;}
.grid-3{grid-template-columns:1fr;}
.grid-4{grid-template-columns:1fr;}
@media (min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr);} .grid-4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }
.card{
background:var(--soft-ivory);
border:1px solid var(--border-soft);
border-radius:var(--radius-m);
overflow:hidden;
display:flex;
flex-direction:column;
transition:box-shadow 200ms ease, transform 200ms ease;
}
.card:hover{box-shadow:var(--shadow-m);transform:translateY(-2px);}
.card .card-media{overflow:hidden;aspect-ratio:4/3;}
.card .card-media img{width:100%;height:100%;object-fit:cover;transition:transform 400ms ease;}
.card:hover .card-media img{transform:scale(1.025);}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.card-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1;}
.card-body h3{font-size:1.25rem;margin-bottom:0.4em;}
.card-body p{font-size:0.96rem;margin-bottom:1em;}
.card-link{margin-top:auto;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:0.4em;}
.card-link svg{width:16px;height:16px;transition:transform 150ms ease;}
.card-link:hover svg{transform:translateX(3px);}
.card-tag{font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--komodo-teal);margin-bottom:0.5em;}
/* Editorial atlas — varied card sizes */
.atlas-grid{display:grid;gap:1.25rem;grid-template-columns:1fr;}
@media (min-width:840px){
.atlas-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:220px;}
.atlas-item--lg{grid-column:span 4;grid-row:span 2;}
.atlas-item--sm{grid-column:span 2;grid-row:span 1;}
.atlas-item--md{grid-column:span 3;grid-row:span 1;}
}
.atlas-item{position:relative;border-radius:var(--radius-m);overflow:hidden;color:var(--soft-ivory);isolation:isolate;}
.atlas-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 400ms ease;}
.atlas-item:hover img{transform:scale(1.025);}
.atlas-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,29,40,0) 30%,rgba(8,29,40,0.88));z-index:-1;}
.atlas-item-content{position:absolute;left:0;right:0;bottom:0;padding:1.2rem;}
.atlas-item-content h3{color:var(--soft-ivory);margin-bottom:0.2em;font-size:1.3rem;}
.atlas-item-content p{color:var(--text-on-dark-muted);font-size:0.88rem;margin-bottom:0.6em;max-width:42ch;}
.atlas-item-link{display:inline-block;color:var(--soft-ivory);font-weight:700;font-size:0.85rem;border-bottom:1px solid var(--warm-sand);}
/* ---------- Entity explainer (asymmetric editorial modules) ---------- */
.entity-explainer{
display:grid;
gap:1.25rem;
grid-template-columns:1fr;
}
@media (min-width:900px){
.entity-explainer{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto;}
}
.entity-module{
position:relative;
border-radius:var(--radius-m);
overflow:hidden;
text-decoration:none;
color:var(--text-primary);
display:flex;
flex-direction:column;
border:1px solid var(--border-soft);
background:var(--soft-ivory);
transition:box-shadow 220ms ease, transform 220ms ease;
}
.entity-module:hover{box-shadow:var(--shadow-m);transform:translateY(-2px);}
.entity-module--feature{
grid-row:1 / span 2;
color:var(--soft-ivory);
min-height:420px;
justify-content:flex-end;
border:0;
}
.entity-module--feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.entity-module--feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(8,28,38,0.92) 0%, rgba(8,28,38,0.35) 55%, rgba(8,28,38,0.15) 100%);z-index:-1;}
.entity-module-body{padding:1.6rem 1.75rem 1.9rem;}
.entity-module--feature .entity-module-body{padding:2rem 1.9rem;}
.entity-module-symbol{width:30px;height:30px;color:var(--copper-500);margin-bottom:0.9rem;}
.entity-module--feature .entity-module-symbol{color:var(--dry-grass);}
.entity-module-tag{font-size:0.72rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--copper-500);margin-bottom:0.5em;display:block;}
.entity-module--feature .entity-module-tag{color:var(--dry-grass);}
.entity-module h3{font-size:1.4rem;margin-bottom:0.35em;}
.entity-module--feature h3{font-size:clamp(1.6rem,1.4vw + 1rem,2.1rem);color:var(--soft-ivory);}
.entity-module p{font-size:0.94rem;margin-bottom:0.9em;color:var(--text-muted);}
.entity-module--feature p{color:var(--text-on-dark-muted);max-width:38ch;}
.entity-module-link{font-size:0.85rem;font-weight:700;display:inline-flex;align-items:center;gap:0.4em;}
.entity-module-link svg{width:15px;height:15px;transition:transform 180ms ease;}
.entity-module:hover .entity-module-link svg{transform:translateX(3px);}
.entity-lockup{display:flex;flex-direction:column;gap:1.25rem;}
@media (min-width:640px) and (max-width:899px){ .entity-lockup{flex-direction:row;} .entity-lockup .entity-module{flex:1;} }
/* ---------- Fact panel ---------- */
.fact-panel{
background:var(--soft-ivory);
border:1px solid var(--border-soft);
border-radius:var(--radius-m);
padding:1.6rem;
display:grid;
gap:1.1rem;
grid-template-columns:1fr;
}
@media (min-width:640px){ .fact-panel{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .fact-panel{grid-template-columns:repeat(4,1fr);} }
.fact-item dt{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;color:var(--komodo-teal);margin-bottom:0.3em;}
.fact-item dd{margin:0;font-family:var(--font-display);font-size:1.1rem;}
/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--border-soft);border-radius:var(--radius-m);}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:0.95rem;}
caption{text-align:left;font-weight:700;padding:0.9rem 1rem 0;font-family:var(--font-display);font-size:1.1rem;}
th,td{padding:0.85rem 1rem;text-align:left;border-bottom:1px solid var(--border-soft);vertical-align:top;}
thead th{background:var(--bg-dark);color:var(--soft-ivory);font-family:var(--font-body);font-size:0.82rem;text-transform:uppercase;letter-spacing:0.05em;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:nth-child(even){background:rgba(92,98,71,0.06);}
/* ---------- Fact box / warning / notice ---------- */
.callout{border-left:4px solid var(--komodo-teal);background:var(--warm-sand);padding:1.1rem 1.3rem;border-radius:0 var(--radius-m) var(--radius-m) 0;margin:1.6rem 0;}
.callout h4{margin-bottom:0.4em;font-size:0.85rem;}
.callout p:last-child{margin-bottom:0;}
.callout--warning{border-color:var(--sunset-coral);}
.callout--notice{border-color:var(--expedition-copper);background:#F5EEE0;}
/* ---------- Checklist ---------- */
.checklist{list-style:none;padding:0;}
.checklist li{display:flex;gap:0.7em;align-items:flex-start;margin-bottom:0.7em;}
.checklist svg{flex-shrink:0;width:20px;height:20px;color:var(--komodo-teal);margin-top:0.15em;}
/* ---------- Author box / card ---------- */
.author-box{
display:flex;
flex-wrap:wrap;
gap:1.3rem;
align-items:flex-start;
background:var(--bg-section-alt);
border-radius:var(--radius-m);
padding:1.6rem;
margin:2.5rem 0;
}
.author-avatar{width:72px;height:72px;border-radius:50%;flex-shrink:0;background:var(--abyss-navy);object-fit:cover;}
.author-box-body{flex:1;min-width:220px;}
.author-box-body h4{font-family:var(--font-display);font-size:1.1rem;text-transform:none;letter-spacing:0;font-weight:600;margin-bottom:0.15em;}
.author-role{font-size:0.85rem;color:var(--komodo-teal);font-weight:700;margin-bottom:0.6em;}
.author-links{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:0.85rem;font-weight:700;margin-top:0.6em;}
.byline{display:flex;align-items:center;gap:0.6em;font-size:0.9rem;color:var(--text-muted);margin-bottom:1.6rem;flex-wrap:wrap;}
.byline a{font-weight:700;color:var(--komodo-teal);text-decoration:none;}
.byline a:hover{text-decoration:underline;}
.byline .dot{opacity:0.5;}
/* ---------- Article layout / TOC ---------- */
.article-layout{display:grid;gap:2.5rem;grid-template-columns:1fr;}
@media (min-width:960px){ .article-layout{grid-template-columns:minmax(0,1fr) 260px;align-items:start;} }
.article-body{min-width:0;}
.toc{
border:1px solid var(--border-soft);
border-radius:var(--radius-m);
padding:1.2rem 1.3rem;
background:var(--soft-ivory);
}
.toc h2{font-family:var(--font-body);font-size:0.82rem;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.7em;}
.toc ol{list-style:none;padding:0;margin:0;counter-reset:toc;}
.toc li{counter-increment:toc;margin-bottom:0.55em;font-size:0.88rem;line-height:1.35;}
.toc a{text-decoration:none;color:var(--text-primary);}
.toc a:hover{color:var(--komodo-teal);}
@media (min-width:960px){
.toc{position:sticky;top:calc(var(--header-h) + 1.5rem);}
}
.toc-mobile{display:block;margin-bottom:2rem;}
@media (min-width:960px){ .toc-mobile{display:none;} }
.toc-mobile summary{cursor:pointer;font-weight:700;padding:0.9rem 1.1rem;border:1px solid var(--border-soft);border-radius:var(--radius-m);list-style:none;min-height:44px;display:flex;align-items:center;background:var(--soft-ivory);}
.toc-mobile summary::-webkit-details-marker{display:none;}
.toc-mobile[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0;}
.toc-mobile ol{border:1px solid var(--border-soft);border-top:0;border-radius:0 0 var(--radius-m) var(--radius-m);padding:1rem 1.3rem;margin:0;list-style:none;counter-reset:toc;}
.toc-mobile li{counter-increment:toc;margin-bottom:0.5em;font-size:0.9rem;}
.article-body section{margin-bottom:2.6rem;scroll-margin-top:calc(var(--header-h) + 1rem);}
.article-body h2{scroll-margin-top:calc(var(--header-h) + 1rem);}
/* ---------- Related guides ---------- */
.related-guides{border-top:1px solid var(--border-soft);padding-top:1.8rem;margin-top:2.5rem;}
/* ---------- Accordion (FAQ) ---------- */
.accordion-item{border-bottom:1px solid var(--border-soft);}
.accordion-item summary{
cursor:pointer;
padding:1.1rem 0.2rem;
font-weight:700;
font-family:var(--font-display);
font-size:1.05rem;
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
list-style:none;
min-height:44px;
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary .chev{width:20px;height:20px;flex-shrink:0;transition:transform 200ms ease;color:var(--komodo-teal);}
.accordion-item[open] summary .chev{transform:rotate(180deg);}
.accordion-item p{padding-bottom:1.2rem;color:var(--text-muted);}
/* ---------- Comparison / pathways ---------- */
.pathways{display:grid;gap:1rem;grid-template-columns:1fr;}
@media (min-width:640px){ .pathways{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .pathways{grid-template-columns:repeat(4,1fr);} }
.pathway{
background:var(--soft-ivory);
border:1px solid var(--border-soft);
border-radius:var(--radius-m);
padding:1.4rem;
text-decoration:none;
color:var(--text-primary);
display:block;
transition:border-color 200ms ease, box-shadow 200ms ease;
}
.pathway:hover{border-color:var(--komodo-teal);box-shadow:var(--shadow-s);color:var(--text-primary);}
.pathway .num{font-family:var(--font-display);color:var(--dry-grass);font-size:0.85rem;}
.pathway svg{width:28px;height:28px;color:var(--komodo-teal);margin:0.6rem 0;}
.pathway h3{font-size:1.05rem;margin-bottom:0.3em;}
.pathway p{font-size:0.86rem;margin-bottom:0;}
/* ---------- Season calendar ---------- */
.season-calendar{display:grid;grid-template-columns:1fr;gap:0.7rem;}
@media (min-width:768px){ .season-calendar{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1100px){ .season-calendar{grid-template-columns:repeat(6,1fr);} }
.season-month{background:var(--soft-ivory);border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:1rem;}
.season-month h4{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--expedition-copper);margin-bottom:0.5em;}
.season-month p{font-size:0.86rem;margin-bottom:0.4em;}
.season-tag{display:inline-block;font-size:0.72rem;font-weight:700;padding:0.2em 0.6em;border-radius:var(--radius-pill);background:var(--warm-sand);color:var(--volcanic-charcoal);margin-bottom:0.5em;}
/* ---------- Trip planner ---------- */
.planner{background:var(--soft-ivory);border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:1.8rem;}
.planner-grid{display:grid;gap:1.3rem;grid-template-columns:1fr;}
@media (min-width:700px){ .planner-grid{grid-template-columns:repeat(2,1fr);} }
.field{display:flex;flex-direction:column;gap:0.4em;}
.field label{font-weight:700;font-size:0.9rem;}
.field select,.field input[type="number"]{
min-height:44px;
padding:0.6em 0.8em;
border:1.5px solid var(--border-soft);
border-radius:var(--radius-s);
font-family:inherit;
font-size:1rem;
background:var(--white);
}
fieldset{border:1px solid var(--border-soft);border-radius:var(--radius-m);padding:1rem 1.1rem;margin:0;}
legend{font-weight:700;font-size:0.9rem;padding:0 0.4em;}
.checkbox-row{display:flex;align-items:center;gap:0.6em;margin-bottom:0.5em;min-height:44px;}
.checkbox-row input{width:20px;height:20px;flex-shrink:0;}
.planner-actions{margin-top:1.5rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
.planner-result{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--border-soft);}
.planner-result[hidden]{display:none;}
.planner-result h3{margin-bottom:0.5em;}
.planner-result ul{margin-top:0.8em;}
.noscript-note{background:var(--warm-sand);border-radius:var(--radius-m);padding:1rem 1.2rem;font-size:0.9rem;}
/* ---------- Footer ---------- */
.site-footer{background:var(--abyss-navy);color:var(--text-on-dark-muted);}
.footer-top{padding-block:3.75rem 2.5rem;}
.footer-grid{display:grid;gap:2.2rem;grid-template-columns:1fr;}
@media (min-width:700px){ .footer-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1024px){ .footer-grid{grid-template-columns:1.4fr repeat(4,1fr);} }
.footer-brand{max-width:34ch;}
.footer-brand .brand-link{margin-bottom:1.1rem;}
.footer-brand p{font-size:0.92rem;}
.footer-col h4{color:var(--soft-ivory);font-size:0.76rem;letter-spacing:0.07em;margin-bottom:1em;}
.footer-col ul{list-style:none;padding:0;margin:0;}
.footer-col li{margin-bottom:0.6em;}
.footer-col a{color:var(--text-on-dark-muted);text-decoration:none;font-size:0.9rem;}
.footer-col a:hover{color:var(--soft-ivory);}
.footer-bottom{border-top:1px solid var(--border-on-dark);padding-block:1.6rem;font-size:0.82rem;}
.footer-bottom-inner{display:flex;flex-direction:column;gap:0.7rem;}
@media (min-width:700px){ .footer-bottom-inner{flex-direction:row;justify-content:space-between;align-items:flex-start;} }
.footer-legal-note{max-width:60ch;color:#8FA09C;}
.footer-legal-links{display:flex;gap:1.2rem;flex-wrap:wrap;}
.footer-legal-links a{color:var(--text-on-dark-muted);text-decoration:none;}
.footer-legal-links a:hover{color:var(--soft-ivory);}
/* ---------- Utility ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.flow > * + *{margin-top:1.2em;}
.two-col{display:grid;gap:2rem;grid-template-columns:1fr;}
@media (min-width:860px){ .two-col{grid-template-columns:1fr 1fr;align-items:center;} }
.stack-gap-lg{display:flex;flex-direction:column;gap:2.5rem;}
.img-frame{border-radius:var(--radius-m);overflow:hidden;}
.figure-caption{font-size:0.82rem;color:var(--text-muted);margin-top:0.6em;font-style:italic;}
.divider{border:0;border-top:1px solid var(--border-soft);margin:2.5rem 0;}
.section-signature{display:flex;align-items:center;gap:0.9rem;padding:1rem 0;}
.section-signature .author-avatar{width:52px;height:52px;}
.error-page{min-height:60vh;display:flex;align-items:center;}
/* ---------- No-JS fallback: keep nav usable without main.js ---------- */
.no-js .primary-nav{position:static;inset:auto;visibility:visible;opacity:1;transform:none;background:transparent;}
.no-js .nav-toggle,.no-js .primary-nav-close{display:none;}