/* ---- Light / dark themes ---- */
:root{--hdr-bg:rgba(13,15,16,.92)}
:root[data-theme="light"]{
  --ink:#f4efe6;
  --ink-2:#e8e1d4;
  --bone:#1b1814;
  --bone-dim:#544e46;
  --mute:#857e74;
  --amber:#9c6a2a;
  --line:rgba(27,24,20,.14);
  --hdr-bg:rgba(244,239,230,.93);
}
body{transition:background-color .4s ease,color .4s ease}
.hdr.solid{background:var(--hdr-bg)}

/* Anything sitting on a photo keeps the light-on-dark look in both modes */
.hero,.page-hero,.band,.dest,.lb,.hdr:not(.solid){
  --ink:#0d0f10;
  --ink-2:#16191b;
  --bone:#efe8dc;
  --bone-dim:#d6cfc3;
  --amber:#d9a35b;
  --line:rgba(239,232,220,.2);
}
.hero,.page-hero,.band,.dest{color:var(--bone)}
.masonry figcaption{color:#efe8dc}
:root[data-theme="light"] .print .fr{background:#fffdf8;box-shadow:0 18px 36px rgba(60,45,25,.18)}
:root[data-theme="light"] .masonry figure{background:#e3dccf}

/* Toggle button */
.nav{margin-left:auto}
.theme{position:relative;z-index:2;background:none;border:1px solid var(--line);color:var(--bone);width:38px;height:38px;border-radius:50%;cursor:pointer;display:grid;place-items:center;margin-left:18px;padding:0;transition:border-color .2s,color .2s}
.theme:hover{border-color:var(--amber);color:var(--amber)}
.theme svg{width:17px;height:17px}
.burger{position:relative;z-index:2}
@media (max-width:980px){
  .theme{margin-left:auto}
  .burger{margin-left:14px}
  .hdr.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink)}
  .nav{height:100vh;height:100dvh;visibility:hidden;transition:transform .45s,visibility 0s .45s}
  .nav.open{visibility:visible;transition:transform .45s}
}

/* Category menus (sub-categories) — larger and labelled */
.chips{gap:10px;padding-top:18px;padding-bottom:30px}
.chips::before{content:"Browse by category";flex-basis:100%;font:500 11px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.chip{padding:12px 24px;font-size:15px;letter-spacing:.01em;border-color:rgba(127,120,110,.45);color:var(--bone)}
.chip i{font-size:12px}
.chip.on{box-shadow:0 6px 18px rgba(0,0,0,.18)}
@media (max-width:600px){.chip{padding:10px 18px;font-size:14px}}
.vnote{margin:10px 2px 0;font-size:13px;color:var(--mute)}
.vnote a{color:var(--amber);text-decoration:none}
.vcell{display:flex;flex-direction:column}

/* Logo in the header */
.brand{flex-direction:row;align-items:center}
.brand img{height:64px;width:auto;display:block}
.brand .lg-dark{display:none}
:root[data-theme="light"] .hdr.solid .brand .lg-light{display:none}
:root[data-theme="light"] .hdr.solid .brand .lg-dark{display:block}
.hdr.solid .brand img{height:54px}
@media (max-width:600px){.brand img,.hdr.solid .brand img{height:46px}}
.hdr:not(.solid) .brand img{filter:drop-shadow(0 1px 8px rgba(0,0,0,.65))}