/* ============================================================
   LAYOVER — by Becca Ruffalo
   styles.css — All site-wide styles
   ============================================================
   TABLE OF CONTENTS
   1. Reset & Variables
   2. Navigation
   3. Hero (Homepage)
   4. Sections & Layout
   5. Cards (Homepage grid)
   6. Split Section
   7. Newsletter
   8. Photo Upload
   9. Footer
   10. Article Pages (sub-pages)
   11. Bucket List
   12. About Page
   13. Responsive
   ============================================================ */


/* ── 1. Reset & Variables ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:     #f7f2e8;
  --parchment: #ede5d0;
  --tan:       #c9b592;
  --terra:     #b8654a;
  --brown:     #352317;
  --mid:       #6b4f38;
  --ink:       #291a10;
  --gold:      #a8843a;
  --mist:      rgba(247, 242, 232, 0.93);
  --nav-h:     48px;
}

html  { scroll-behavior: smooth; }
body  {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth photo rendering across browsers */
img { image-rendering: auto; }

/* Pages (SPA-style show/hide) */
.page        { display: none; }
.page.active { display: block; animation: pageIn .5s cubic-bezier(.22,1,.36,1) both; }
.page.active:not(#home) { padding-top: var(--nav-h); }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .75s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger for sibling reveals (cards in a grid) */
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .18s; }
.reveal:nth-child(4) { transition-delay: .26s; }


/* ── 2. Navigation ─────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 4rem;
  background: var(--cream);
  border-bottom: 1px solid rgba(168, 132, 58, .15);
  box-shadow: 0 2px 12px rgba(41, 26, 16, .06);
  transition: padding .35s ease;
}
#nav.on {
  padding: 0.5rem 4rem;
}
.logo {
  font-family: 'Cormorant SC', serif;
  font-size: 1.05rem;
  letter-spacing: .46em;
  color: var(--brown);
  cursor: pointer;
}
.nav-links { display: flex; gap: 2.8rem; list-style: none; align-items: center; }
.nav-links a {
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
  text-decoration: none;
  transition: color .2s;
}
.nav-links a:hover     { color: var(--terra); }
/* Active page indicator */
.nav-links a.active           { opacity: 1; }
.nav-links a.active::after {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  margin-top: 3px;
  transform-origin: left;
  animation: navUnderline .3s ease both;
}
@keyframes navUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Drop-row: invisible on desktop, flex row on mobile */
.drop-row { display: contents; }
.drop-toggle { display: none; }

/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  z-index: 101;
  min-width: 44px;
  min-height: 44px;
  align-items: flex-end;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--mid);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Transparent hero mode — home page before scroll */
#nav.hero-mode {
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, padding .35s ease;
}
#nav.hero-mode:not(.on) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
#nav.hero-mode:not(.on) .logo          { color: var(--cream); }
#nav.hero-mode:not(.on) .nav-links a   { color: rgba(247,242,232,.72); }
#nav.hero-mode:not(.on) .nav-links a:hover { color: var(--cream); }
#nav.hero-mode:not(.on) .nav-toggle span   { background: var(--cream); }


/* ── Dropdown menus ────────────────────────────────────────── */
.has-dropdown { position: relative; }

/* Invisible bridge: keeps :hover alive while cursor travels to panel */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -1.5rem;
  right: -1.5rem;
  height: 20px;
  pointer-events: auto;
}

.dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
  min-width: 280px;
  background: var(--cream);   /* solid — eliminates backdrop-filter flicker */
  border: 1px solid rgba(168, 132, 58, .2);
  border-radius: 2px;
  padding: .5rem 0 .7rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(41,26,16,.1);
}
.dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px;
  background: var(--cream);
  border-left: 1px solid rgba(168, 132, 58, .2);
  border-top: 1px solid rgba(168, 132, 58, .2);
}
.has-dropdown:hover .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Drop items — full-row click target, color-shift on hover (no bg fill) */
.drop-item {
  display: block;
  padding: .85rem 1.6rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: border-color .12s ease;
}
.drop-item:hover { border-left-color: var(--terra); }
.drop-item:hover .drop-city { color: var(--terra); }
.drop-city {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--brown);
  letter-spacing: .02em;
  line-height: 1.3;
  transition: color .12s ease;
}
.drop-meta {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: .2rem;
  white-space: nowrap;
}
.drop-more {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .5rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tan);
  padding: .65rem 1.6rem .2rem;
  border-top: 1px solid rgba(168, 132, 58, .12);
  margin-top: .5rem;
}

/* Category headers inside dropdown */
.drop-cat {
  display: block;
  padding: .65rem 1.6rem .4rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: border-color .12s ease;
}
.drop-cat + .drop-cat,
.drop-sub + .drop-cat {
  border-top: 1px solid rgba(168,132,58,.12);
  padding-top: .7rem;
  margin-top: .3rem;
}
.drop-cat:hover { border-left-color: var(--terra); }
.drop-cat-name {
  font-family: 'Jost', sans-serif;
  font-size: .57rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brown);
  transition: color .12s ease;
}
.drop-cat:hover .drop-cat-name { color: var(--terra); }

/* Indented destination items under a category */
.drop-sub {
  display: block;
  padding: .45rem 1.6rem .45rem 2.8rem;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: border-color .12s ease;
}
.drop-sub:hover { border-left-color: var(--terra); }
.drop-sub:hover .drop-city { color: var(--terra); }
.drop-sub .drop-city { font-size: .95rem; }


/* ── 3. Hero (Homepage) ────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  animation: zoom 22s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
@keyframes zoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.03); }
}
.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,5,2,.12) 0%, rgba(10,5,2,.42) 55%, rgba(10,5,2,.85) 100%);
}
.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
  animation: up 1.5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.hero-eye {
  font-family: 'Jost', sans-serif;
  font-size: .56rem;
  font-weight: 300;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(247,242,232,.72);
  display: block;
  margin-bottom: 1.6rem;
}
.hero-title {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(5.5rem, 15vw, 14rem);
  font-weight: 300;
  letter-spacing: .12em;
  color: #fff;
  line-height: .88;
  margin-bottom: 1.8rem;
  text-shadow: 0 4px 40px rgba(0,0,0,.35);
}
.hero-by {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream);
  letter-spacing: .08em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.hero-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--cream);
  opacity: 1;
  margin-top: 1.6rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.75), 0 1px 6px rgba(0,0,0,.5);
}
.scroll-cue {
  position: absolute;
  bottom: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}
.scroll-cue span {
  font-family: 'Jost', sans-serif;
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247, 242, 232, .38);
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(247,242,232,.38), transparent);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .4; }
  50%       { opacity: .9; }
}


/* Film grain overlay on hero images */
.hero::after,
.art-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  animation: grain 1.4s steps(2) infinite;
}
@keyframes grain {
  0%   { background-position: 0 0; }
  25%  { background-position: 40px -30px; }
  50%  { background-position: -30px 40px; }
  75%  { background-position: 20px 20px; }
  100% { background-position: 0 0; }
}

/* Marquee ticker */
.ticker-wrap {
  overflow: hidden;
  background: var(--brown);
  padding: .85rem 0;
  border-top: 1px solid rgba(168,132,58,.18);
  border-bottom: 1px solid rgba(168,132,58,.18);
}
.ticker {
  display: flex;
  white-space: nowrap;
  animation: tickerScroll 32s linear infinite;
  will-change: transform;
}
.ticker span {
  font-family: 'Jost', sans-serif;
  font-size: .56rem;
  font-weight: 300;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(247,242,232,.38);
  padding: 0 2.4rem;
}
.ticker .t-sep {
  color: var(--gold);
  opacity: .45;
  padding: 0;
  letter-spacing: 0;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 4. Sections & Layout ──────────────────────────────────── */
.wrap    { max-width: 1180px; margin: 0 auto; padding: 0 2.5rem; }
.wrap-sm { max-width: 800px;  margin: 0 auto; padding: 0 2.5rem; }
.sec     { padding: 6rem 0; }

.label {
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--terra);
  display: block;
  margin-bottom: .9rem;
}
.h-sec {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  letter-spacing: .09em;
  color: var(--brown);
  line-height: 1.05;
}

/* Intro band */
.intro {
  background: #fff;
  padding: 7rem 2.5rem;
  text-align: center;
}
.intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  font-weight: 400;
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto 1.5rem;
  line-height: 1.38;
}
.intro p {
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  color: var(--mid);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.9;
}

/* Generic button */
.btn {
  display: inline-block;
  margin-top: 2rem;
  font-family: 'Jost', sans-serif;
  font-size: .63rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--brown);
  border: 1px solid rgba(53,35,23,.32);
  padding: .85rem 2rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--brown); color: var(--cream); }

/* Arrow link */
.arrow {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  border-bottom: 1px solid rgba(168,132,58,.32);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.arrow:hover { color: var(--terra); border-color: var(--terra); }


/* ── 5. Cards ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 2rem; }
.card {
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(41,26,16,.07), 0 1px 3px rgba(41,26,16,.04);
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), box-shadow .45s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 52px rgba(41,26,16,.14), 0 4px 12px rgba(41,26,16,.06);
}
.card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-bottom: 0;
}
.card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card:hover .card-img img { transform: scale(1.05); }
.card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,15,6,.45), transparent 60%);
  pointer-events: none;
  transition: background .5s ease;
}
.card:hover .card-img::after {
  background: linear-gradient(to top, rgba(30,15,6,.6), rgba(30,15,6,.1) 70%);
}
/* Hover tag reveal inside card image */
.card-img-label {
  position: absolute;
  bottom: 1.1rem;
  left: 1.1rem;
  z-index: 2;
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(247,242,232,.9);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .4s ease, transform .4s ease;
}
.card:hover .card-img-label {
  opacity: 1;
  transform: translateY(0);
}
.card-tag {
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terra);
  display: block;
  padding: 1.4rem 1.5rem 0;
}
.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--brown);
  line-height: 1.2;
  padding: .45rem 1.5rem 0;
  transition: color .2s;
}
.card:hover .card-title { color: var(--terra); }
.card-exc {
  font-family: 'Jost', sans-serif;
  font-size: .84rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  padding: .6rem 1.5rem 0;
}
.card .arrow {
  display: block;
  padding: 1rem 1.5rem 1.8rem;
  margin-top: 0;
}


/* ── 6. Travel page ─────────────────────────────────────────── */

/* 2×2 full-bleed category tile grid */
.travel-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.travel-cat-tile {
  position: relative;
  height: 46vh;
  min-height: 280px;
  overflow: hidden;
  cursor: pointer;
}
.travel-cat-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
}
.travel-cat-tile:hover img { transform: scale(1.06); }
.travel-cat-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,10,4,.72), rgba(20,10,4,.1) 58%);
  transition: background .5s ease;
}
.travel-cat-tile:hover .travel-cat-veil {
  background: linear-gradient(to top, rgba(20,10,4,.82), rgba(20,10,4,.22) 68%);
}
.travel-cat-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 2.4rem 2.2rem;
}
.travel-cat-body .label {
  color: rgba(247,242,232,.55);
  margin-bottom: .3rem;
}
.travel-cat-name {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  font-weight: 300;
  color: var(--cream);
  letter-spacing: .09em;
  line-height: 1.05;
  margin-bottom: .55rem;
}
.travel-cat-desc {
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 300;
  color: rgba(247,242,232,.72);
  line-height: 1.65;
  max-width: 30ch;
  margin-bottom: 1rem;
}
.travel-cat-arrow {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,242,232,.75);
  border-bottom: 1px solid rgba(247,242,232,.3);
  padding-bottom: .15rem;
  transition: color .25s, border-color .25s;
}
.travel-cat-tile:hover .travel-cat-arrow {
  color: var(--cream);
  border-color: rgba(247,242,232,.65);
}

/* Section headers within Travel content */
.travel-sec-hd {
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(168,132,58,.18);
  margin-bottom: 3rem;
}
.travel-sec-title {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--brown);
  letter-spacing: .08em;
  margin: .4rem 0 .7rem;
  line-height: 1.05;
}
.travel-sec-desc {
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.65;
  max-width: 54ch;
}


/* ── 7. Split Section ──────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--parchment);
  overflow: hidden;
  border-radius: 18px;
  margin: 2rem 2.5rem 5rem;
  box-shadow: 0 4px 24px rgba(41,26,16,.08), 0 1px 4px rgba(41,26,16,.04);
  transition: box-shadow .45s;
}
.split:hover {
  box-shadow: 0 16px 56px rgba(41,26,16,.13), 0 4px 12px rgba(41,26,16,.06);
}
.split-img { overflow: hidden; min-height: 520px; }
.split-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.split:hover .split-img img { transform: scale(1.04); }
.split-body {
  padding: 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 400;
  color: var(--brown);
  line-height: 1.28;
  margin-bottom: 1.4rem;
}
.split-body p {
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: .9rem;
}


/* ── 7. Featured editorial cards (homepage) ────────────────── */
.feat {
  background: var(--ink);
  padding: 6rem 2.5rem;
  border-top: 1px solid rgba(168,132,58,.1);
}
.feat-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: .56rem;
  font-weight: 300;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .75;
  display: block;
  text-align: center;
  margin-bottom: .6rem;
}
.feat-h {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cream);
  text-align: center;
  margin-bottom: 2.8rem;
}
.feat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  max-width: 1180px;
  margin: 0 auto;
}
.feat-card {
  position: relative;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s;
}
.feat-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0,0,0,.38);
}
.feat-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.feat-card:hover img { transform: scale(1.05); }
.feat-card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,8,3,.82) 0%, rgba(15,8,3,.2) 50%, transparent 100%);
}
.feat-card-text {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
}
.feat-tag {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: .55rem;
}
.feat-title {
  display: block;
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: .7rem;
}
.feat-cta {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,242,232,.65);
  border-bottom: 1px solid rgba(247,242,232,.22);
  padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.feat-card:hover .feat-cta {
  color: var(--cream);
  border-color: rgba(247,242,232,.6);
}


/* ── 8. Newsletter ─────────────────────────────────────────── */
.nl {
  background: var(--cream);
  padding: 5rem 2.5rem;
  text-align: center;
  border-top: 1px solid rgba(168,132,58,.18);
}
.nl .label { color: var(--mid) !important; }
.nl h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--ink);
  max-width: 480px;
  margin: .9rem auto;
  line-height: 1.3;
}
.nl p {
  font-family: 'Jost', sans-serif;
  font-size: .84rem;
  font-weight: 300;
  color: var(--mid);
  max-width: 360px;
  margin: .9rem auto 2.2rem;
  line-height: 1.85;
}
.nl-form {
  display: flex;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid rgba(53,35,23,.22);
}
.nl-form input {
  flex: 1;
  padding: .9rem 1.2rem;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  font-weight: 300;
  color: var(--ink);
}
.nl-form input::placeholder { color: rgba(53,35,23,.35); }
.nl-form button {
  padding: .9rem 1.4rem;
  background: var(--brown);
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cream);
  transition: background .2s;
}
.nl-form button:hover { background: var(--mid); }
.nl-form button:disabled { opacity: .6; cursor: default; }
.nl-msg {
  margin-top: 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .06em;
  min-height: 1.2em;
}
.nl-msg.success { color: var(--mid); }
.nl-msg.error   { color: #b84a35; }


/* ── 8. Photo Upload ───────────────────────────────────────── */
.upload {
  background: var(--parchment);
  border-top: 1px solid rgba(168,132,58,.14);
  padding: 3.5rem 2.5rem;
  text-align: center;
}
.upload h3 {
  font-family: 'Cormorant SC', serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--brown);
  margin-bottom: .4rem;
}
.upload > p {
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  font-weight: 300;
  color: var(--mid);
  margin-bottom: 1.6rem;
}
.drop {
  border: 1px dashed rgba(168,132,58,.4);
  padding: 2.5rem 2rem;
  max-width: 440px;
  margin: 0 auto 1.5rem;
  position: relative;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop:hover { border-color: var(--gold); background: rgba(168,132,58,.04); }
.drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
}
.drop-icon { font-size: 2rem; opacity: .3; margin-bottom: .5rem; display: block; }
.drop p {
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 300;
  color: var(--mid);
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;
}
.gallery img {
  width: 105px; height: 105px;
  object-fit: cover;
  border: 1px solid rgba(168,132,58,.2);
}


/* ── 8b. Browse by Type ────────────────────────────────────── */
.type-sec { background: var(--ink); }
.type-sec-head {
  padding: 5rem 2rem 3rem;
  text-align: center;
}
.type-sec-head .label { display: block; margin-bottom: .5rem; }

.type-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 72vh;
  min-height: 480px;
}
.type-tile {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.type-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .9s cubic-bezier(.25,.46,.45,.94);
}
.type-tile:hover img { transform: scale(1.07); }
.type-tile-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(10,5,2,.9) 0%,
    rgba(10,5,2,.45) 45%,
    rgba(10,5,2,.12) 100%);
  transition: opacity .4s;
}
.type-tile:hover .type-tile-veil { opacity: .85; }
.type-tile-body {
  position: absolute;
  bottom: 2.8rem;
  left: 2.8rem;
  right: 2.8rem;
}
.type-tile-num {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 300;
  color: rgba(255,255,255,.08);
  line-height: 1;
  display: block;
  margin-bottom: .8rem;
}
.type-tile-label {
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tan);
  display: block;
  margin-bottom: .7rem;
}
.type-tile-title {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 1.3rem;
}
.type-tile-cta {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(247,242,232,.65);
  border-bottom: 1px solid rgba(247,242,232,.22);
  padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.type-tile:hover .type-tile-cta { color: #fff; border-color: rgba(255,255,255,.55); }

/* Dividers between tiles */
.type-tile + .type-tile { border-left: 1px solid rgba(255,255,255,.06); }


/* ── 8c. Home Map Preview ──────────────────────────────────── */
.home-map-preview {
  position: relative;
  height: 440px;
  background: #0e0702;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hmp-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(168,132,58,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,132,58,.055) 1px, transparent 1px);
  background-size: 54px 54px;
}
.home-map-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 15%, rgba(14,7,2,.78) 100%);
  z-index: 1;
}
.hmp-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hmp-pin {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--tan);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  transform: translate(-50%, -50%);
  opacity: .5;
}
.hmp-pin--a {
  width: 10px;
  height: 10px;
  background: var(--terra);
  border-radius: 2px;
  opacity: .92;
  border-color: rgba(255,255,255,.3);
}
.hmp-body {
  position: relative;
  z-index: 3;
}
.hmp-count {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(2.8rem, 5.5vw, 4.8rem);
  font-weight: 300;
  color: var(--cream);
  letter-spacing: .06em;
  line-height: 1.0;
  margin: .7rem 0 2.2rem;
}
.hmp-cta {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .54rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247,242,232,.6);
  border-bottom: 1px solid rgba(247,242,232,.2);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.home-map-preview:hover .hmp-cta { color: var(--cream); border-color: rgba(247,242,232,.5); }


/* ── 9. Footer ─────────────────────────────────────────────── */
footer {
  background: var(--ink);
  padding: 4.5rem 4rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  border-top: 1px solid rgba(168,132,58,.18);
}
.f-brand { display: flex; flex-direction: column; gap: .45rem; }
.f-logo {
  font-family: 'Cormorant SC', serif;
  font-size: 1.1rem;
  letter-spacing: .46em;
  color: rgba(247,242,232,.55);
  cursor: pointer;
  transition: color .2s;
}
.f-logo:hover { color: rgba(247,242,232,.85); }
.f-copy {
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .14em;
  color: rgba(247,242,232,.18);
}
.f-nav {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.f-nav a {
  font-family: 'Jost', sans-serif;
  font-size: .57rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(247,242,232,.3);
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
}
.f-nav a:hover { color: var(--tan); }
.f-social { display: flex; flex-direction: column; gap: .65rem; align-items: flex-end; }
.f-soc {
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(247,242,232,.25);
  text-decoration: none;
  border-bottom: 1px solid rgba(168,132,58,.18);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.f-soc:hover { color: var(--gold); border-color: var(--gold); }

/* Reading time badge */
.read-time {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,242,232,.45);
  margin-top: .85rem;
  border: 1px solid rgba(247,242,232,.18);
  padding: .28rem .7rem;
}

/* Table of contents */
.toc {
  margin: 2.8rem 0;
  padding: 1.6rem 2rem;
  border: 1px solid rgba(168,132,58,.22);
  background: var(--parchment);
}
.toc-label {
  font-family: 'Jost', sans-serif;
  font-size: .58rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terra);
  display: block;
  margin-bottom: 1rem;
}
.toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding: 0;
}
.toc li {
  counter-increment: toc-counter;
  display: flex;
  gap: .8rem;
  align-items: baseline;
  margin-bottom: .55rem;
}
.toc li::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: 'Cormorant SC', serif;
  font-size: .78rem;
  color: var(--gold);
  opacity: .6;
  min-width: 1.6rem;
}
.toc a {
  font-family: 'Jost', sans-serif;
  font-size: .8rem;
  font-weight: 300;
  color: var(--mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
  cursor: pointer;
}
.toc a:hover { color: var(--terra); border-color: rgba(184,101,74,.3); }

/* Bucket list — done vs dream distinction */
.bucket-col--done .b-num  { color: var(--gold); }
.bucket-col--done .b-num::after {
  content: ' ✓';
  font-size: .6em;
  vertical-align: super;
  opacity: .65;
}
.bucket-col--dream .b-num { color: var(--mid); opacity: .7; }


/* ── 10. Article / Sub-page styles ─────────────────────────── */
.art-hero {
  position: relative;
  height: 42vh;
  min-height: 360px;
  overflow: hidden;
}
.art-hero img { width: 100%; height: 100%; object-fit: cover; }
.art-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,8,3,.15), rgba(15,8,3,.72));
}

/* CSS-only title header — replaces photo banners on section pages */
.art-hero--title {
  background: linear-gradient(160deg, var(--ink) 0%, #2a1508 60%, var(--brown) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Warm radial glow at center */
.art-hero--title::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(168,132,58,.1) 0%, transparent 100%);
  pointer-events: none;
}
/* Thin gold rule above title text */
.art-hero--title .art-hero-text::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
  margin: 0 auto 1.4rem;
}
/* Position override: centered instead of bottom-anchored */
.art-hero--title .art-hero-text {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  text-align: center;
  width: 85%;
  max-width: 860px;
  z-index: 2;
}

.art-hero-text {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 85%;
  max-width: 860px;
}
.art-hero-text h1 {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--cream);
  line-height: 1.05;
  margin-bottom: .7rem;
}
.art-hero-text .sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: rgba(247,242,232,.65);
}
.back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  text-decoration: none;
  margin: 2.8rem 0 0;
  transition: color .2s;
}
.back:hover  { color: var(--terra); }
.back::before { content: '←'; }
.coming-soon {
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 3rem;
}

.art-body           { padding: 4.5rem 0 6.5rem; }
.art-body h2 {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--brown);
  margin: 4.5rem 0 1.1rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(168,132,58,.15);
}
.art-body h2:first-of-type { margin-top: 3rem; }
.art-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  color: var(--mid);
  margin: 2.2rem 0 .7rem;
}
.art-body p { font-size: 1.08rem; line-height: 1.88; color: var(--ink); margin-bottom: 1.5rem; }

/* Pull quotes & blockquotes — strong left rule, editorial treatment */
.art-body blockquote,
.pullquote {
  margin: 3rem 0;
  padding: 1.2rem 0 1.2rem 1.8rem;
  border-left: 3px solid var(--terra);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.28rem;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.55;
}

.lede {
  font-size: 1.2rem !important;
  font-style: italic;
  color: var(--mid) !important;
  margin-bottom: 2rem !important;
  line-height: 1.68 !important;
  border-left: 3px solid rgba(168,132,58,.3);
  padding-left: 1.4rem;
}

/* Recommendations */
.rec {
  margin-bottom: 1.7rem;
  padding: .7rem 0 .7rem 1.1rem;
  border-left: 2px solid var(--parchment);
  transition: border-color .15s ease;
}
.rec:hover { border-left-color: var(--gold); }
.rec-n {
  font-family: 'Cormorant SC', serif;
  font-size: .96rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--brown);
  margin-bottom: .25rem;
  transition: color .15s ease;
}
.rec:hover .rec-n { color: var(--terra); }
.rec-d {
  font-family: 'Jost', sans-serif;
  font-size: .86rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
}

/* Ornament divider */
.orn {
  display: block;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: .45;
  margin: 2.2rem auto;
  letter-spacing: .3em;
}
.sub-label {
  font-size: .86rem;
  font-family: 'Jost', sans-serif;
  letter-spacing: .1em;
  color: var(--tan);
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  display: block;
}

/* Image layouts */
.img-full { margin: 2.8rem 0; }
.img-full img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.img-duo  { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 2.8rem 0; }
.img-duo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.img-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .9rem; margin: 2.8rem 0; }
.img-trio img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.cap {
  font-family: 'Jost', sans-serif;
  font-size: .7rem;
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--tan);
  margin-top: .5rem;
  text-align: center;
}

/* Tools (Strategy page) */
.tool-cat {
  background: #fff;
  border-radius: 14px;
  padding: 2.4rem 2.8rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 2px 14px rgba(41,26,16,.07), 0 1px 3px rgba(41,26,16,.04);
}
.tool-cat-h {
  font-family: 'Cormorant SC', serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--brown);
  margin-bottom: 1.6rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(168,132,58,.22);
}
.tool { margin-bottom: 1.8rem; }
.tool-n {
  font-family: 'Cormorant SC', serif;
  font-size: .96rem;
  font-weight: 400;
  color: var(--terra);
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.tool-d {
  font-family: 'Jost', sans-serif;
  font-size: .86rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
}

/* Strategy offshoot cards */
.strategy-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 1.8rem;
}
.strategy-card {
  background: var(--ink);
  padding: 2.4rem 1.8rem 2.2rem;
  border-radius: 16px;
  cursor: default;
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), background .25s, box-shadow .4s;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 56px rgba(20,10,4,.32), 0 6px 18px rgba(20,10,4,.16);
}
.strategy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent 70%);
}
.strategy-card:hover {
  transform: translateY(-6px);
  background: var(--brown);
  box-shadow: 0 32px 72px rgba(20,10,4,.42), 0 10px 28px rgba(20,10,4,.2);
}
.strategy-card-label {
  font-family: 'Jost', sans-serif;
  font-size: .54rem;
  font-weight: 300;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--tan);
  display: block;
  margin-bottom: 1.4rem;
}
.strategy-card-title {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(1.25rem, 1.6vw, 1.7rem);
  font-weight: 300;
  color: var(--cream);
  letter-spacing: .07em;
  line-height: 1.1;
  flex: 1;
  margin-bottom: 2.4rem;
}
.strategy-card-status {
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  font-weight: 300;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,242,232,.28);
}
.strategy-card--active { cursor: pointer; }
.strategy-card--active .strategy-card-status {
  color: var(--tan);
  border-bottom: 1px solid rgba(168,132,58,.35);
  padding-bottom: .15rem;
}


/* ── 11. Bucket List ───────────────────────────────────────── */
.bucket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 5rem; margin-top: 3.5rem; }
.bucket-col h3 {
  font-family: 'Cormorant SC', serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--brown);
  margin-bottom: 1.8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(168,132,58,.25);
}
.b-item  {
  display: flex;
  gap: .9rem;
  margin-bottom: 1.1rem;
  align-items: flex-start;
  transition: color .15s ease;
  cursor: default;
}
.b-item:hover .b-text { color: var(--brown); }
.b-item:hover .b-num  { opacity: 1; }
.b-num {
  font-family: 'Cormorant SC', serif;
  font-size: .8rem;
  color: var(--gold);
  min-width: 1.4rem;
  margin-top: .1rem;
}
.b-text {
  font-family: 'Jost', sans-serif;
  font-size: .86rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.55;
}
.b-text strong { display: block; font-weight: 400; color: var(--brown); margin-bottom: .05rem; }


/* ── 12. Inspo Page Redesign ───────────────────────────────── */

/* Hero: cream editorial — centered vertical stack */
.inspo-hero {
  background: var(--cream);
  padding: 2.8rem 8% 3.2rem;
  text-align: center;
  border-bottom: 1px solid rgba(50,33,18,.1);
}
.inspo-hero-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: .54rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 1.6rem;
}
.inspo-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.5rem, 8.5vw, 10rem);
  color: var(--ink);
  line-height: .88;
  letter-spacing: -.02em;
  margin: 0 0 2rem;
}
.inspo-hero-rule {
  width: 48px;
  height: 1px;
  background: rgba(168,132,58,.55);
  margin: 0 auto 2rem;
}
.inspo-hero-desc-p {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  letter-spacing: .02em;
  max-width: 52ch;
  margin: 0 auto;
}

/* Section headers */
.bl-sec-head {
  background: var(--ink);
  padding: 3.5rem 3rem 3rem;
  text-align: center;
}
.bl-sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.05;
  margin: .6rem 0 .8rem;
  letter-spacing: -.01em;
}
.bl-sec-intro {
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  line-height: 1.85;
  color: rgba(247,242,232,.55);
  max-width: 580px;
  margin: 0 auto;
}
.bl-sec-desc {
  font-family: 'Jost', sans-serif;
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247,242,232,.4);
}

/* Bucket list grid */
.bl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink);
  gap: 8px;
  padding: 8px;
}
.bl-card {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem 2.2rem;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
  transition: border-color .2s;
}
.bl-card:hover { border-color: rgba(168,132,58,.22); }
.bl-card--wide { grid-column: span 2; min-height: 300px; }
.bl-card--elephant .bl-card-bg { object-position: 40% 30%; }
.bl-card--text { background: var(--ink); }
.bl-card--alt  { background: #1c0f06; }
.bl-card--photo { background: var(--brown); }
.bl-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s ease;
  color: transparent; /* hides alt text / broken icon */
}
.bl-card:hover .bl-card-bg { transform: scale(1.05); }
.bl-card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,5,2,.88) 0%, rgba(10,5,2,.4) 55%, rgba(10,5,2,.12) 100%);
}
.bl-card-n {
  position: absolute;
  top: 1.2rem;
  left: 1.8rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 6vw, 6rem);
  font-weight: 300;
  color: rgba(255,255,255,.06);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.bl-card--photo .bl-card-n { color: rgba(255,255,255,.14); }
.bl-card-body {
  position: relative;
  z-index: 2;
}
.bl-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.15;
  margin: 0 0 .45rem;
}
.bl-card-loc {
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0;
}
.bl-card-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: rgba(247,242,232,.6);
  margin: .9rem 0 0;
  line-height: 1.5;
}

/* Photo strip — 3-up */
.bl-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 240px;
  gap: 8px;
  background: var(--ink);
  padding: 0 8px 8px;
}
.bl-strip-img { border-radius: 12px; }
.bl-strip-img { overflow: hidden; }
.bl-strip-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.bl-strip-img:hover img { transform: scale(1.06); }

/* Full-bleed pull quote */
.bl-pullquote {
  position: relative;
  height: 40vh;
  min-height: 280px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl-pullquote-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bl-pullquote-veil {
  position: absolute;
  inset: 0;
  background: rgba(10,5,2,.6);
}
.bl-pullquote-body {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  padding: 2rem 3rem;
}
.bl-pullquote-q {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  color: var(--cream);
  line-height: 1.3;
  margin: 0 0 1.6rem;
}
.bl-pullquote-byline {
  font-family: 'Jost', sans-serif;
  font-size: .5rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--tan);
}

/* Dream / future list */
.bl-dream {
  background: var(--parchment);
  padding: 4rem 0 3.5rem;
}
.bl-dream-head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.bl-dream-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.bl-dream-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.2rem 2rem;
  border-bottom: 1px solid rgba(168,132,58,.13);
  transition: background .15s;
}
.bl-dream-item:hover { background: rgba(168,132,58,.05); }
.bl-dream-item:nth-child(odd) { border-right: 1px solid rgba(168,132,58,.13); }
.bl-dream-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--tan);
  line-height: 1;
  flex-shrink: 0;
  width: 2.4rem;
}
.bl-dream-text { display: flex; flex-direction: column; gap: .3rem; padding-top: .5rem; }
.bl-dream-text strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--brown);
  line-height: 1.2;
}
.bl-dream-text span {
  font-family: 'Jost', sans-serif;
  font-size: .5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ── 13. Inspo Map ─────────────────────────────────────────── */
.inspo-map-sec { background: var(--parchment); }

.inspo-map-header { text-align: center; margin-bottom: 3rem; }
.inspo-map-header .label { display: block; margin-bottom: .6rem; }
.inspo-map-header .h-sec { margin: 0 0 1rem; }
.inspo-map-desc {
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  color: var(--mid);
  max-width: 38ch;
  margin: 0 auto;
  line-height: 1.6;
}

/* Map canvas */
.inspo-map-canvas {
  width: 100%;
  height: 520px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(41,26,16,.13), 0 2px 10px rgba(41,26,16,.07);
}

/* Custom marker dots */
.map-pin {
  width: 9px;
  height: 9px;
  background: var(--tan);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(41,26,16,.28);
  cursor: pointer;
  transition: transform .15s;
}
.map-pin:hover { transform: scale(1.6); }

/* Content pins — sharp square */
.map-pin--content {
  width: 12px;
  height: 12px;
  background: var(--terra);
  border-radius: 3px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(184,101,74,.45);
}
.map-pin--content:hover { transform: scale(1.4); }

/* Leaflet popup base overrides */
.map-leaflet-popup .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(41,26,16,.18), 0 2px 8px rgba(41,26,16,.08);
  padding: 0;
  border: none;
}
.map-leaflet-popup .leaflet-popup-content { margin: 0; }
.map-leaflet-popup .leaflet-popup-close-button { display: none; }

/* Light popup (visited, no guide) */
.map-leaflet-popup .leaflet-popup-content-wrapper { background: var(--cream); }
.map-leaflet-popup .leaflet-popup-tip           { background: var(--cream); }

/* Dark popup (content pins) */
.map-leaflet-popup--content .leaflet-popup-content-wrapper {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.map-leaflet-popup--content .leaflet-popup-content-wrapper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent 65%);
}
.map-leaflet-popup--content .leaflet-popup-tip { background: var(--ink); }

/* Popup inner layout */
.map-popup { padding: 1.4rem 1.6rem 1.6rem; min-width: 195px; }
.map-popup--simple { padding: .9rem 1.1rem; min-width: 0; }

.map-pop-type {
  font-family: 'Jost', sans-serif;
  font-size: .48rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tan);
  display: block;
  margin-bottom: .55rem;
}
.map-pop-name {
  font-family: 'Cormorant SC', serif;
  font-size: 1.25rem;
  font-weight: 400;
  display: block;
  line-height: 1.05;
}
.map-leaflet-popup            .map-pop-name { color: var(--ink); }
.map-leaflet-popup--content   .map-pop-name { color: var(--cream); }

.map-pop-country {
  font-family: 'Jost', sans-serif;
  font-size: .58rem;
  font-weight: 300;
  display: block;
  margin-top: .2rem;
  margin-bottom: .9rem;
}
.map-leaflet-popup            .map-pop-country { color: var(--mid); }
.map-leaflet-popup--content   .map-pop-country { color: rgba(247,242,232,.45); margin-bottom: .8rem; }
.map-popup--simple .map-pop-country { margin-bottom: 0; }

.map-pop-desc {
  font-family: 'Jost', sans-serif;
  font-size: .76rem;
  color: rgba(247,242,232,.65);
  line-height: 1.55;
  margin: 0 0 1.1rem;
}
.map-pop-cta {
  font-family: 'Jost', sans-serif;
  font-size: .52rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tan);
  cursor: pointer;
  border-bottom: 1px solid rgba(201,181,146,.4);
  padding-bottom: 2px;
  display: inline-block;
  transition: color .2s, border-color .2s;
}
.map-pop-cta:hover { color: var(--cream); border-color: rgba(247,242,232,.5); }


/* ── 13. About Page ────────────────────────────────────────── */

/* Hero — 3-panel grid */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  min-height: 42vh;
  overflow: hidden;
  gap: 3px;
  background: var(--ink);
}
.about-hero-panel {
  position: relative;
  overflow: hidden;
}
.about-hero-panel--main {
  display: flex;
  align-items: flex-end;
}
.about-hero-panel:not(.about-hero-panel--main):hover .about-hero-bg { transform: scale(1.06); }
.about-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.about-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,5,2,.88) 0%, rgba(10,5,2,.3) 55%, transparent 100%);
}
.about-hero-text {
  position: relative;
  z-index: 2;
  padding: 2.5rem 3rem;
}
.about-hero-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 300;
  color: var(--cream);
  line-height: .92;
  letter-spacing: -.02em;
  margin: .6rem 0 1.2rem;
  animation: aboutTitleIn .9s cubic-bezier(.22,1,.36,1) both;
}
.about-hero-tag {
  font-family: 'Jost', sans-serif;
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,242,232,.5);
  animation: aboutTitleIn .9s .15s cubic-bezier(.22,1,.36,1) both;
}
@keyframes aboutTitleIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Facts strip */
.about-facts {
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  border-bottom: 1px solid rgba(247,242,232,.06);
}
.about-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 1;
  max-width: 180px;
}
.about-fact-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 300;
  color: var(--tan);
  line-height: 1;
}
.about-fact-l {
  font-family: 'Jost', sans-serif;
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247,242,232,.38);
  text-align: center;
  line-height: 1.7;
}
.about-fact-div {
  width: 1px; height: 50px;
  background: rgba(247,242,232,.1);
  flex-shrink: 0;
}

/* Text intro */
.about-intro {
  background: var(--cream);
  padding: 8rem 0;
}
.about-intro-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 1.2rem 0 3.5rem;
}
.about-intro-h em {
  font-style: italic;
  color: var(--mid);
}
.about-intro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.about-intro-cols p {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
}

/* Travel voice */
.about-voice {
  background: var(--parchment);
  padding: 8rem 0;
  border-top: 1px solid rgba(168,132,58,.12);
}
.about-voice-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.about-voice-head { position: relative; overflow: hidden; min-height: 8rem; }
.about-voice-n {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 11rem;
  font-weight: 300;
  color: rgba(53,35,23,.06);
  line-height: .8;
  position: absolute;
  top: -.5rem;
  left: -.5rem;
  pointer-events: none;
  user-select: none;
}
.about-voice-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.4rem, 4.2vw, 4.2rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -.015em;
  position: relative;
  z-index: 1;
  padding-top: 1.5rem;
}
.about-voice-body p {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 1.4rem;
}
.about-voice-body p:last-child { margin-bottom: 0; }

/* Personal essay section */
.about-essay {
  background: var(--cream);
  padding: 8rem 0;
  border-top: 1px solid rgba(168,132,58,.1);
}
.about-essay-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: start;
}
.about-essay-mark {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 9rem;
  color: var(--tan);
  line-height: .72;
  margin-bottom: .6rem;
  opacity: .7;
}
.about-essay-big {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.75rem, 2.8vw, 2.7rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.about-essay-body p {
  font-family: 'Jost', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 1.3rem;
}
.about-essay-body p:last-child { margin-bottom: 0; }

/* Travel style cards */
.about-style {
  background: var(--parchment);
  padding: 6rem 0 5rem;
}
.about-style-head { text-align: center; margin-bottom: 3rem; }
.about-style-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--ink);
  margin: .6rem 0 0;
  letter-spacing: -.01em;
}
.about-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.2rem;
}
.about-style-card {
  background: var(--ink);
  border-radius: 14px;
  padding: 3rem 2.4rem;
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.about-style-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(41,26,16,.28);
}
.about-style-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 6rem;
  font-weight: 300;
  color: rgba(255,255,255,.05);
  line-height: 1;
  position: absolute;
  top: .8rem; right: 1.4rem;
  pointer-events: none;
  user-select: none;
}
.about-style-cardh {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.1;
  margin: 0 0 1.1rem;
}
.about-style-card p {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 300;
  color: rgba(247,242,232,.5);
  line-height: 1.8;
  margin: 0;
}

/* Mission section — text only */
.about-mission {
  background: var(--ink);
  padding: 9rem 0;
  text-align: center;
}
.about-mission-inner { max-width: 860px; margin: 0 auto; }
.about-mission-h {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 1.2rem 0 3.5rem;
}
.about-mission-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
}
.about-mission-cols p {
  font-family: 'Jost', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(247,242,232,.5);
  line-height: 1.85;
}

/* Closing mantra */
.about-mantra {
  background: var(--brown);
  padding: 10rem 4rem;
  text-align: center;
}
.about-mantra-lead {
  font-family: 'Jost', sans-serif;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247,242,232,.35);
  margin: 0 0 2rem;
}
.about-mantra-q {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.18;
  margin: 0 0 2rem;
  letter-spacing: -.01em;
}
.about-mantra-sub {
  font-family: 'Jost', sans-serif;
  font-size: .55rem;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--tan);
}

/* Legacy mantra (used elsewhere) */
.mantra {
  margin-top: 2.8rem;
  padding: 1.8rem 2.2rem;
  border: 1px solid rgba(168,132,58,.26);
  background: var(--parchment);
  text-align: center;
}
.mantra p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--brown);
  line-height: 1.5;
  margin: 0;
}
.mantra .ms {
  font-family: 'Jost', sans-serif;
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: .7rem;
  font-style: normal;
  display: block;
}


/* ── Image shimmer (loading placeholder) ──────────────────── */
.img-shimmer {
  background: linear-gradient(90deg,
    var(--parchment) 25%,
    rgba(201,181,146,.45) 50%,
    var(--parchment) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Lightbox ──────────────────────────────────────────────── */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15,8,3,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2rem;
}
#lightbox.open {
  opacity: 1;
  pointer-events: all;
}
#lightbox img {
  max-width: min(90vw, 1100px);
  max-height: 88vh;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  transform: scale(.96);
}
#lightbox.open img { transform: scale(1); }
#lb-close {
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
  background: none;
  border: none;
  color: rgba(247,242,232,.55);
  font-size: 1.4rem;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  transition: color .2s;
  padding: .5rem;
  line-height: 1;
}
#lb-close:hover { color: var(--cream); }
#lb-caption {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Jost', sans-serif;
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .18em;
  color: rgba(247,242,232,.4);
  text-align: center;
  white-space: nowrap;
  max-width: 80vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Clickable article images get a pointer + subtle hover overlay */
.art-body img,
.img-full img,
.img-duo img,
.img-trio img { cursor: zoom-in; }


/* ── Bio strip ─────────────────────────────────────────────── */
.bio-strip {
  padding: 5rem 0;
  border-bottom: 1px solid rgba(168,132,58,.12);
}
.bio-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 4rem;
  align-items: center;
}
.bio-img {
  aspect-ratio: 3/4;
  overflow: hidden;
}
.bio-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bio-text p {
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: .9rem;
}


/* ── What's here (3-tile nav section) ─────────────────────── */
.what-here {
  background: var(--parchment);
  border-top: 1px solid rgba(168,132,58,.13);
  border-bottom: 1px solid rgba(168,132,58,.13);
}
.what-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.what-tile {
  padding: 3rem 2.8rem;
  border-right: 1px solid rgba(168,132,58,.13);
  cursor: pointer;
  transition: background .2s;
}
.what-tile:last-child { border-right: none; }
.what-tile:hover { background: rgba(168,132,58,.06); }
.what-num {
  font-family: 'Cormorant SC', serif;
  font-size: .78rem;
  color: var(--gold);
  opacity: .65;
  display: block;
  margin-bottom: .85rem;
}
.what-title {
  font-family: 'Cormorant SC', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: .09em;
  color: var(--brown);
  margin-bottom: .55rem;
}
.what-desc {
  font-family: 'Jost', sans-serif;
  font-size: .83rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 1rem;
}


/* ── Article metadata line ─────────────────────────────────── */
.art-meta {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .9rem;
  font-family: 'Jost', sans-serif;
  font-size: .56rem;
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(247,242,232,.42);
}
.art-meta-sep { opacity: .3; }


/* ── 13. Responsive ────────────────────────────────────────── */

/* ── Tablet (≤ 860px) ──────────────────────────────────────── */
@media (max-width: 860px) {
  #nav, #nav.on { padding: 0.75rem 2.2rem; }
  .about-grid  { grid-template-columns: 1fr; gap: 3rem; padding: 4rem 0; }
  .sticky-img  { position: static; }
  .bucket-grid { grid-template-columns: 1fr; gap: 2.5rem 0; }
  footer {
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
    padding: 2.5rem 2.2rem;
  }
  .f-social { align-items: flex-start; }

  /* Keep dropdown inside viewport — anchor to right edge of trigger */
  .dropdown {
    left: auto;
    right: 0;
    transform: translateY(-5px);
  }
  .has-dropdown:hover .dropdown {
    transform: translateY(0);
  }
  .dropdown::before {
    left: auto;
    right: 1.4rem;
    transform: translateX(0) rotate(45deg);
  }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hamburger nav */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    z-index: 100;
    list-style: none;
    padding: 5rem 2.5rem 3rem;
    overflow-y: auto;
  }
  nav.open .nav-links { display: flex; }
  #nav.hero-mode.open .nav-links a,
  #nav.hero-mode.open .nav-links a:hover { color: var(--mid); }
  .nav-links > li + li { border-top: 1px solid rgba(168,132,58,.13); }
  .nav-links a {
    font-size: .72rem;
    letter-spacing: .3em;
    color: var(--mid);
    padding: 1rem 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  /* Layout */
  .wrap, .wrap-sm { padding: 0 1.4rem; }
  .sec    { padding: 3.8rem 0; }
  .grid-2 { grid-template-columns: 1fr; gap: 2.6rem; }
  .travel-cat-grid  { grid-template-columns: 1fr; gap: 3px; }
  .travel-cat-tile  { height: 54vw; min-height: 220px; }
  .strategy-cards   { grid-template-columns: 1fr; gap: 1rem; }

  /* Split */
  .split           { grid-template-columns: 1fr; }
  .split-img       { min-height: 260px; }
  .split-body      { padding: 2.2rem 1.6rem; }

  /* Hero */
  .hero            { min-height: 560px; }

  /* Intro */
  .intro { padding: 3.8rem 1.4rem; }

  /* Newsletter */
  .nl      { padding: 3.8rem 1.4rem; }
  .nl-form { max-width: 100%; }

  /* Footer */
  footer { flex-direction: column; align-items: flex-start; gap: 1.8rem; padding: 2.5rem 1.4rem; }
  .f-nav  { gap: 1.2rem; }
  .f-social { flex-direction: row; }

  /* Article hero */
  .art-hero        { height: 44vh; min-height: 280px; }
  .art-hero-text   { width: 92%; bottom: 2rem; }
  .art-hero-text .sub { font-size: .95rem; }

  /* Article body */
  .art-body { padding: 3rem 1.4rem 4.5rem; }

  /* Reduce asymmetric left-indents so right side isn't cramped */
  .lede                          { padding-left: .9rem; }
  .art-body blockquote,
  .pullquote                     { padding-left: 1.2rem; }
  .rec                           { padding-left: .7rem; }
  .toc                           { padding: 1.2rem 1.4rem; }

  /* Featured cards — stack on mobile */
  .feat { padding: 4rem 1.4rem; }
  .feat-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .feat-card { aspect-ratio: 3/4; }

  /* Browse by Type tiles — stack on mobile */
  .type-tiles { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .type-tile  { height: 60vw; min-height: 260px; }
  .type-tile + .type-tile { border-left: none; border-top: 1px solid rgba(255,255,255,.06); }
  .type-sec-head { padding: 3.5rem 1.4rem 2rem; }

  /* Map preview */
  .home-map-preview { height: 360px; }
  .hmp-count { font-size: clamp(2rem, 7vw, 3rem); }

  /* Split — remove border-radius on mobile */
  .split { border-radius: 0; margin: 0 0 3.5rem; }

  /* Image layouts — stack on mobile */
  .img-duo,
  .img-trio        { grid-template-columns: 1fr; gap: .7rem; }
  .img-duo img     { aspect-ratio: 16/9; }
  .img-trio img    { aspect-ratio: 16/9; }

  /* About */
  .about-grid        { gap: 2rem; padding: 3rem 0; }
  .about-intro       { padding: 4.5rem 0; }
  .about-intro-cols  { grid-template-columns: 1fr; gap: 1.4rem; }
  .about-voice       { padding: 4.5rem 0; }
  .about-voice-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-voice-n     { font-size: 10rem; }
  .about-essay       { padding: 4rem 0; }
  .about-essay-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-essay-mark  { font-size: 6rem; }
  .about-mission     { padding: 5rem 0; }
  .about-mission-cols { grid-template-columns: 1fr; gap: 1.4rem; text-align: left; }
  .about-mantra      { padding: 6rem 2rem; }
  .bucket-grid       { margin-top: 2rem; }

  /* Bio strip */
  .bio-inner { grid-template-columns: 1fr; gap: 2rem; }
  .bio-img   { max-width: 180px; }

  /* What's here */
  .what-grid { grid-template-columns: 1fr; }
  .what-tile { border-right: none; border-bottom: 1px solid rgba(168,132,58,.13); padding: 2.2rem 1.4rem; }
  .what-tile:last-child { border-bottom: none; }

  /* Dropdowns — collapsible in mobile overlay */
  .nav-links > li { width: 100%; text-align: center; }
  .has-dropdown { flex-direction: column; align-items: stretch; gap: 0; }

  /* Drop-row: link + chevron on one line */
  .drop-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .drop-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tan);
    transition: transform .25s ease;
    padding: 0;
  }
  .has-dropdown.open .drop-toggle { transform: rotate(180deg); }

  /* Dropdown hidden by default; shown when .open */
  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: rgba(168,132,58,.06);
    border: none;
    border-top: 1px solid rgba(168,132,58,.14);
    box-shadow: none;
    padding: .4rem 0 .7rem;
    min-width: auto;
    display: none;
  }
  .has-dropdown.open .dropdown { display: block; }
  .dropdown::before { display: none; }

  /* Sub-item styles in mobile */
  .drop-item, .drop-cat, .drop-sub {
    text-align: center;
    border-left: none;
    padding: .55rem 1rem;
  }
  .drop-item:hover, .drop-cat:hover, .drop-sub:hover { background: none; border-left: none; }
  .drop-cat + .drop-cat, .drop-sub + .drop-cat {
    border-top: 1px solid rgba(168,132,58,.1);
    margin-top: .2rem;
    padding-top: .65rem;
  }
  .drop-city { font-size: .95rem; color: var(--brown); }
  .drop-meta { font-size: .5rem; color: var(--mid); }
  .drop-cat-name { font-size: .58rem; color: var(--mid); }
  .drop-sub .drop-city { font-size: .85rem; }
  .drop-more { border-top: 1px solid rgba(168,132,58,.16); padding: .5rem 0 0; text-align: center; margin-top: .3rem; }

  /* ── About page ──────────────────────────────────────────── */
  .about-hero { min-height: 44vh; grid-template-columns: 1fr; }
  .about-hero-panel:not(.about-hero-panel--main) { display: none; }
  .about-hero-text { padding: 2.5rem 2rem; }
  .about-facts { flex-wrap: wrap; gap: 1.5rem; padding: 2.5rem 1.4rem; }
  .about-fact { max-width: 130px; }
  .about-fact-div { display: none; }
  .about-story { grid-template-columns: 1fr; }
  .about-story-visual { min-height: 260px; }
  .about-story-body { padding: 3rem 2rem; }
  .about-triptych { height: 220px; }
  .about-style { padding: 4rem 0 3rem; }
  .about-style-grid { grid-template-columns: 1fr; gap: .8rem; }
  .about-mission { grid-template-columns: 1fr; }
  .about-mission-body { padding: 3.5rem 2rem; }
  .about-mission-visual { min-height: 260px; }
  .about-mantra { padding: 5rem 2rem; }
}

/* ── Small mobile (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
  #nav, #nav.on { padding: 0.6rem 1.4rem; }
  /* Keep wrap padding consistent — 1rem was too tight */
  .wrap, .wrap-sm { padding: 0 1.4rem; }
  .sec         { padding: 3rem 0; }

  /* Hero */
  .hero        { min-height: 520px; }
  .hero-by     { font-size: 1rem; }

  /* Intro / NL */
  .intro       { padding: 3rem 1.4rem; }
  .nl          { padding: 3rem 1.4rem; }
  .nl-form input,
  .nl-form button { padding: 1rem 1.2rem; }

  /* Split */
  .split-body  { padding: 1.8rem 1.2rem; }
  .split-img   { min-height: 220px; }

  /* Art hero */
  .art-hero    { height: 38vh; min-height: 240px; }

  /* Article — keep indents small so right side has room */
  .art-body    { padding: 2.4rem 1.4rem 3.5rem; }
  .back        { margin: 2rem 0 0; }
  .lede                          { padding-left: .7rem; }
  .art-body blockquote,
  .pullquote                     { padding-left: 1rem; }
  .rec                           { padding-left: .55rem; }
  .toc                           { padding: 1rem 1.1rem; }

  /* Bucket */
  .bucket-grid { gap: 2rem; }

  /* About */
  .about-grid  { padding: 2.5rem 0; }

  /* Cards gap */
  .grid-2      { gap: 2rem; }

  /* Inspo page redesign — mobile */
  .inspo-hero { padding: 2rem 1.6rem 2.5rem; }
  .inspo-hero-title { font-size: clamp(3.2rem, 12vw, 5.5rem); margin-bottom: 1.5rem; }
  .inspo-hero-rule { margin-bottom: 1.5rem; }
  .inspo-hero-desc-p { max-width: 100%; font-size: .82rem; }
  .bl-sec-head { padding: 2.5rem 1.6rem 2rem; }
  .bl-sec-title { font-size: clamp(1.8rem, 8vw, 3rem); }
  .bl-grid { grid-template-columns: 1fr; gap: 6px; padding: 6px; }
  .bl-card--wide { grid-column: span 1; min-height: 240px; }
  .bl-card { min-height: 220px; padding: 1.4rem 1.4rem; }
  .bl-card-n { font-size: clamp(3rem, 14vw, 5rem); }
  .bl-strip { grid-template-columns: 1fr 1fr 1fr; height: 120px; padding: 0 6px 6px; gap: 6px; }
  .bl-pullquote { height: auto; min-height: 240px; padding: 4rem 1.6rem; }
  .bl-pullquote-body { padding: 0; }
  .bl-pullquote-q { font-size: clamp(1.4rem, 5vw, 2rem); }
  .bl-dream { padding: 3rem 0 2.5rem; }
  .bl-dream-list { grid-template-columns: 1fr; }
  .bl-dream-item:nth-child(odd) { border-right: none; }
  .bl-dream-item { padding: 1.4rem 1.4rem; gap: 1.2rem; }

  /* About page — small mobile */
  .about-hero { min-height: 38vh; }
  .about-hero-text { padding: 2.5rem 1.4rem; }
  .about-intro { padding: 3.5rem 0; }
  .about-voice { padding: 3.5rem 0; }
  .about-voice-n { font-size: 8rem; }
  .about-essay { padding: 3rem 0; }
  .about-essay-mark { font-size: 5rem; }
  .about-mission { padding: 4rem 0; }
  .about-mantra { padding: 5rem 1.4rem; }
}