/* ════════════════════════════════════════════
   YOUR BLOG — styles.css
   Layout: Centered header · Post list + Sidebar
   Fonts:  Playfair Display (serif) · Lato (sans)
   Palette: White · Near-black · Warm grey · Accent
════════════════════════════════════════════ */

/* ── Google Fonts via HTML <link> ── */

/* ── Variables ── */
:root {
  --white: #ffffff;
  --off-white: #fafaf8;
  --bg: #f7f5f2;
  --beige: #f0ebe3;
  --rule: #e2ddd8;
  --ink: #1a1a18;
  --ink-soft: #444240;
  --ink-muted: #888480;
  --accent: #c0815a; /* ← change this to your brand color */
  --accent-lt: #e8c4a8;
  --accent-hover: #a86a45;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Lato", "Helvetica Neue", Arial, sans-serif;

  --top-bar-h: 36px;
  --header-h: 90px;
  --nav-h: 44px;
  --total-top: calc(var(--top-bar-h) + var(--header-h) + var(--nav-h));

  --max-w: 1200px;
  --pad-x: clamp(1rem, 4vw, 3rem);
  --sidebar-w: 300px;
  --gap: 2rem;

  --radius: 2px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --parchment: #f5f1ea;
--ink-60: rgba(26, 26, 24, 0.6);
--ink-35: rgba(26, 26, 24, 0.35);
--accent-dk: #8c5a3c;

}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
input,
textarea {
  font-family: inherit;
}
::selection {
  background: var(--accent);
  color: var(--white);
}

/* ── Scroll reveal ── */
.js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s var(--ease),
    transform 0.65s var(--ease);
}
.js-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Keyframes ── */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════
   TOP BAR
════════════════════════════════════════════ */
.top-bar {
  background: var(--ink);
  height: var(--top-bar-h);
  display: flex;
  align-items: center;
}
.top-bar-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tb-icon {
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
  padding: 2px;
}
.tb-icon + .tb-icon {
  margin-left: 10px;
}
.tb-icon:hover {
  color: var(--white);
}
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tb-link {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}
.tb-link.active {
  color: var(--accent);
  font-weight: 600;
}
.tb-link:hover {
  color: var(--white);
}
.tb-link--cta {
  color: var(--accent-lt);
  font-weight: 600;
}
.tb-link--cta:hover {
  color: var(--white);
}
.tb-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.65rem;
}

/* ════════════════════════════════════════════
   SITE HEADER — centered logo
════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: var(--header-h);
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
}

/* ── Logo (shared: header + footer) ── */
.logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s;
}
.logo:hover {
  opacity: 0.8;
}

/* Monogram image */
.logo-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-img {
  width: 50px;
  height: 50px;
  max-width: none;
  object-fit: contain;
  display: block;
}

/* Text: AdiRaj + tagline */
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 2.5px solid #7c5cbf;
  padding-left: 10px;
}
.logo-text {
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 5px; /* gap between AdiRaj and tagline */
}
.logo-tagline {
  font-family: var(--sans);
  font-size: 0.21em;   /* relative to logo-text size — always proportional */
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
  white-space: nowrap;
  display: block;
  width: 100%;         /* never overflows beyond AdiRaj width */
}

/* Header right actions */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.search-toggle {
  color: var(--ink-soft);
  padding: 6px;
  transition: color 0.2s;
}
.search-toggle:hover {
  color: var(--accent);
}

/* ══════════════════════════════════════════
   NEWSLETTER — REFINED
══════════════════════════════════════════ */

.newsletter {
  background: var(--parchment);
  padding: clamp(1.8rem, 3vw, 2.4rem) var(--pad-x); /* ↓ reduced height */
  border-top: 1px solid var(--rule);
}

.newsletter-inner {
  max-width: 560px; /* slightly tighter */
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow */
.nl-eyebrow {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.8rem; /* ↓ tighter */
}

/* Title */
.nl-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem); /* ↓ reduced */
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

/* Description */
.nl-desc {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-60);
  margin-bottom: 1.5rem; /* ↓ reduced */
  letter-spacing: 0.08em;
}

/* Form */
.nl-form {
  display: flex;
  max-width: 380px; /* ↓ tighter */
  margin-inline: auto;
  border: 1px solid var(--rule);
  background: #fff;
}

/* Input */
.nl-input {
  flex: 1;
    min-width: 0;
  border: none;
  outline: none;
  padding: 0.7rem 1rem; /* ↓ tighter */
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink);
  background: transparent;
}

.nl-input::placeholder {
  color: var(--ink-35);
letter-spacing: 0.08em;
}

/* Button */
.nl-btn {
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem; /* ↓ smaller */
  white-space: nowrap;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
    flex-shrink: 0; /* 🔥 prevents button collapse */
}

.nl-btn:hover {
  background: var(--accent-dk);
}

/* Note */
.nl-note {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-35);
  margin-top: 0.8rem; /* ↓ tighter */
  letter-spacing: 0.1em;
}

/* Hide mobile widget on desktop */
.subscribe-mobile {
  display: none;
}

/* Show only on mobile */
@media (max-width: 768px) {
  .subscribe-mobile {
    display: block;
    padding: 50px 20px;
    background: #f8f7f5;
    text-align: center;
    border-top: 1px solid #eee;
  }
.subscribe-mobile .widget-eyebrow {
  text-align: left;
}
  .subscribe-container {
    max-width: 500px;
    margin: 0 auto;
  }

  .subscribe-title {
    font-size: 24px;
    margin: 10px 0;
  }

  .subscribe-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
  }
}

/* Newsletter success message */
.nl-success {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: #4a7c5c;
  font-weight: 600;
  margin-top: 0.8rem;
  letter-spacing: 0.05em;
  animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Burger (mobile only) */
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition:
    transform 0.3s,
    opacity 0.3s;
  transform-origin: center;
}
.burger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
}
.burger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── JOIN US SECTION ── */
.mob-join {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule); /* match menu items */
}

/* Match EXACT menu typography */
.mob-join-label {
  font-size: 1.1rem;        /* same as .mob-nav a */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Icons stay inline ALWAYS */
.mob-join-icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Icon size proportional to text */
.mob-join-icons svg {
  width: 22px;
  height: 22px;
}

/* Icon styling */
.mob-join-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  opacity: 0.8;
  transition: all 0.2s ease;
  border-top: none;
  border-bottom: none;
  padding: 0;
}

/* Interaction */
.mob-join-icons a:active {
  transform: scale(0.95);
}
.mob-join-icons a:hover {
  opacity: 1;
}


/* ── Category Navigation ── */
.cat-nav {
  border-top: 1px solid var(--rule);
  background: var(--white);
}
.cat-nav-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.cat-nav-inner::-webkit-scrollbar {
  display: none;
}

.cat-nav-link {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.cat-nav-link:hover,
.cat-nav-link.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ── Search Bar ── */
.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  height: 60px;
  display: flex;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease);
  pointer-events: none;
}
.search-bar.open {
  transform: translateY(0);
  pointer-events: all;
}
.search-bar-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-muted);
}
.search-bar-inner svg {
  flex-shrink: 0;
}
#searchInput {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
}
#searchInput::placeholder {
  color: var(--ink-muted);
}
.search-close {
  font-size: 1.1rem;
  color: var(--ink-muted);
  padding: 4px 8px;
  transition: color 0.2s;
}
.search-close:hover {
  color: var(--ink);
}

/* ── Mobile menu ── */
.mob-menu {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: 190;
  overflow-y: auto;
  padding: 5rem var(--pad-x) 3rem;
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mob-menu.open {
  display: flex;
  opacity: 1;
}
.mob-close {
  position: absolute;
  top: 1.2rem;
  right: var(--pad-x);
  font-size: 1.4rem;
  color: var(--ink-soft);
  padding: 6px;
  transition: color 0.2s;
}
.mob-close:hover {
  color: var(--ink);
}
.mob-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mob-nav > a {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  transition:
    color 0.2s,
    padding-left 0.2s;
}
.mob-nav > a:first-child {
  border-top: 1px solid var(--rule);
}
.mob-nav > a:hover {
  color: var(--accent);
  padding-left: 6px;
}
.mob-divider {
  height: 1.5rem;
}

/* ════════════════════════════════════════════
   PAGE LAYOUT: Post list + Sidebar
════════════════════════════════════════════ */
.page-wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: 2.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 2.5rem;
  align-items: start;
}

/* ════════════════════════════════════════════
   POST CARD — left image · right text
════════════════════════════════════════════ */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.post-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.post-card:first-child {
  padding-top: 0;
}

/* Image */
.post-card-img-link {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--beige);
}
.post-card-img {
  width: 220px;
  height: 165px; /* 4:3 ratio */
  object-fit: cover;
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s;
  display: block;
}
.post-card-img-link:hover .post-card-img {
  transform: scale(1.04);
}

/* Body */
.post-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

/* Tags */
.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.15rem;
}
.post-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s;
}
.post-tag:hover {
  color: var(--accent-hover);
}
.post-tag + .post-tag::before {
  content: "·";
  margin-right: 0.3rem;
  color: var(--rule);
}

/* Title */
.post-card-title {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.1rem;
}
.post-card-title a {
  transition: color 0.2s;
}
.post-card-title a:hover {
  color: var(--accent);
}

/* Date */
.post-card-date {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-weight: 400;
}
.post-card-date strong {
  font-weight: 600;
  color: var(--ink-soft);
}

/* Excerpt */
.post-card-excerpt {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.7;
  font-weight: 300;
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Continue reading */
.post-card-more {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.5rem;
  transition:
    color 0.2s,
    letter-spacing 0.2s;
}
.post-card-more:hover {
  color: var(--accent-hover);
  letter-spacing: 0.18em;
}

/* Filed Under / Tagged With */
.post-card-meta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 0.4rem;
  line-height: 1.5;
}
.post-card-meta a {
  color: var(--ink-muted);
  transition: color 0.2s;
}
.post-card-meta a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 2.5rem;
  margin-top: 0.5rem;
}
.page-link,
.page-current,
.page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius);
  transition:
    background 0.2s,
    color 0.2s;
}
.page-current {
  background: var(--ink);
  color: var(--white);
}
.page-link {
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.page-link:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.page-next {
  width: auto;
  padding-inline: 1rem;
  letter-spacing: 0.06em;
}
.page-ellipsis {
  color: var(--ink-muted);
  width: auto;
  border: none;
}

/* ════════════════════════════════════════════
   FEATURED DESTINATIONS
════════════════════════════════════════════ */

.featured-destinations {
  margin: 2.5rem 0 1.5rem;
  width: 100%;
}

.featured-destinations h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.dest-grid a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
  background: var(--white);
}

.dest-grid a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.dest-grid img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.dest-grid span {
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-family: var(--sans);
}

/* ════════════════════════════════════════════
   EXPLORE MORE LINKS
════════════════════════════════════════════ */

.explore-more {
  margin: 1.5rem 0 0;
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}

.explore-more h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
}

/* Optional subtext */
.explore-subtext {
  margin-bottom: 1rem;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.explore-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.explore-links a {
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink-soft);
  background-color: var(--off-white);
  font-family: var(--sans);
  transition: all 0.25s var(--ease);
}

.explore-links a:hover {
  background-color: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(192, 129, 90, 0.25);
}

/* ════════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════════ */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h) + 1rem);
  max-height: none;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  padding-right: 4px;
}
.sidebar::-webkit-scrollbar {
  width: 3px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--rule);
}

/* Widget base */
.widget {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 1.5rem;
  border-radius: var(--radius);
}
.widget-title {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  
}

/* About widget */
.widget--about {
  text-align: center;
}
.about-photo-wrap {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  margin-inline: auto;
  margin-bottom: 1rem;
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--rule);
}
.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.about-text p {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink-soft);
  font-weight: 300;
}
.widget-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s;
}
.widget-link:hover {
  color: var(--accent-hover);
}
.widget-link--center {
  display: block;
  text-align: center;
}

/* Search widget */
.widget-search {
  display: flex;
  border: 1px solid var(--rule);
  overflow: hidden;
  border-radius: var(--radius);
}
.widget-search-input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  border: none;
  outline: none;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
}
.widget-search-input::placeholder {
  color: var(--ink-muted);
}
.widget-search-btn {
  padding: 0.55rem 0.75rem;
  background: var(--ink);
  color: var(--white);
  transition: background 0.2s;
  display: flex;
  align-items: center;
}
.widget-search-btn:hover {
  background: var(--accent);
}

/* Newsletter widget */
.widget--newsletter {
  background: var(--ink);
  border-color: var(--ink);
}
.widget--newsletter .widget-title {
  color: var(--white);
  border-bottom-color: var(--accent);
}
.widget-text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  margin-bottom: 1rem;
}
.widget-email-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 0.85rem;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 0.6rem;
}
.widget-email-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.widget-email-input:focus {
  border-color: var(--accent-lt);
}
.widget-subscribe-btn {
  width: 100%;
  padding: 0.7rem;
  background: var(--accent);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition:
    background 0.2s,
    transform 0.15s;
}
.widget-subscribe-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
.widget-fine {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-top: 0.6rem;
  letter-spacing: 0.04em;
}

/* Categories list */
.widget-cat-list {
  display: flex;
  flex-direction: column;
}
.widget-cat-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  transition:
    color 0.2s,
    padding-left 0.2s;
}
.widget-cat-list li:last-child a {
  border-bottom: none;
}
.widget-cat-list li a:hover {
  color: var(--accent);
  padding-left: 4px;
}
.cat-count {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

/* Popular posts */
.popular-posts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pop-post {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0.75rem;
  align-items: center;
}
.pop-post-img-link {
  display: block;
  width: 64px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius);
  flex-shrink: 0;
  background: var(--beige);
}
.pop-post-img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.pop-post-img-link:hover img {
  transform: scale(1.08);
}
.pop-post-text a {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: color 0.2s;
  display: block;
  margin-bottom: 0.2rem;
}
.pop-post-text a:hover {
  color: var(--accent);
}
.pop-post-date {
  font-size: 0.7rem;
  color: var(--ink-muted);
}

/* Instagram grid */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 0.75rem;
}
.insta-cell {
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
  background: var(--beige);
}
.insta-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.4s var(--ease),
    opacity 0.3s;
}
.insta-cell:hover img {
  transform: scale(1.08);
  opacity: 0.85;
}

/* Tag cloud */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tag-pill {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--rule);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ink-soft);
  border-radius: 2px;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.tag-pill:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.site-footer {
  background: var(--ink);
  color: var(--white);
  margin-top: 1rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 3rem var(--pad-x) 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.footer-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Footer logo = same layout as header, just white colours */
.footer-logo .logo-img {
  filter: invert(1);
}
.footer-logo .logo-text {
  color: var(--white);
}
.footer-logo .logo-tagline {
  color: rgba(255, 255, 255, 0.5);
}
.footer-logo .logo-text-wrap {
  border-left-color: rgba(255, 255, 255, 0.35);
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
}
.footer-nav a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}
.footer-nav a:hover {
  color: var(--white);
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer-social a {
  color: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  transition:
    color 0.2s,
    transform 0.2s;
}
.footer-social a:hover {
  color: var(--white);
  transform: translateY(-2px);
}

.footer-copy {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.06em;
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}

/* ════════════════════════════════════════════
   BACK TO TOP
════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 50;
  width: 40px;
  height: 40px;
  background: var(--ink);
  color: var(--white);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s;
  box-shadow: var(--shadow-md);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.back-to-top:hover {
  background: var(--accent);
}

/* ════════════════════════════════════════════
   POST TEMPLATE PAGE (post-template.html)
════════════════════════════════════════════ */

/* Reading progress bar */
.reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  width: 0%;
  z-index: 300;
  transition: width 0.1s linear;
}

/* Post hero */
.post-hero {
  width: 100%;
  background: var(--beige);
}
.post-hero-img-wrap {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
}
.post-hero-img-wrap img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.post-header {
  max-width: 760px;
  margin-inline: auto;
  padding: 2.5rem var(--pad-x) 1rem;
  text-align: center;
}
.post-header .post-card-tags {
  justify-content: center;
  margin-bottom: 0.75rem;
}
.post-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 1rem;
}
.post-subtitle {
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.post-meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.post-meta-item {
  font-size: 0.75rem;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}
.post-meta-item strong {
  color: var(--ink-soft);
  font-weight: 600;
}

/* Post body + sidebar layout */
.post-page-wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2.5rem var(--pad-x) 4rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}

/* Post body typography */
.post-body {
  min-width: 0;
}
.post-body p {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.post-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
  line-height: 1.25;
}
.post-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
  margin: 2rem 0 0.75rem;
}
.post-body h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.5rem 0 0.5rem;
}
.post-body ul,
.post-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.post-body li {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem;
  margin-block: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.65;
}
.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.post-body a:hover {
  color: var(--accent-hover);
}
.post-body img {
  width: 100%;
  margin-block: 2rem;
  border-radius: var(--radius);
}
.post-body .img-caption {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: -1.5rem;
  margin-bottom: 2rem;
  font-style: italic;
}
.post-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ════════════════════════════════════════════
   CUSTOM SCROLLBAR
════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-muted);
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */

/* ── Tablet: 1024px ── */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 260px;
  }
}

/* ── Small tablet: 820px ── */
@media (max-width: 820px) {
  .page-wrap,
  .post-page-wrap {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .post-card {
    grid-template-columns: 180px 1fr;
  }
  .post-card-img {
    width: 180px;
    height: 135px;
  }
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── iPad / small tablet: 1024px ── */
@media (max-width: 1024px) {
  .header-inner {
    grid-template-columns: 50px 1fr 50px;
  }
  .logo-text {
    font-size: 1.9rem;
  }
  .logo-icon,
  .logo-img {
    width: 42px;
    height: 42px;
  }
  .logo {
    gap: 9px;
  }
}

/* ── Mobile: 620px ── */
@media (max-width: 620px) {
  .top-bar {
    display: none;
  }
  .header-inner {
    grid-template-columns: 44px 1fr 44px;
    height: 70px;
  }
  .burger {
    display: flex;
  }
  .main-nav,
  .cat-nav {
    display: block;
  }
  .logo-wordmark {
    display: none;
  }
  /* Only need to set logo-text size — tagline scales automatically via em */
  .logo-text {
    font-size: 1.4rem;
    gap: 3px;
  }
  .logo-icon,
  .logo-img {
    width: 34px;
    height: 34px;
  }

  .cat-nav-inner {
    justify-content: flex-start;
    padding-inline: var(--pad-x);
  }

  .post-card {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .post-card-img-link {
    width: 100%;
  }
  .post-card-img {
    width: 100%;
    height: 200px;
  }

  .dest-grid {
    grid-template-columns: 1fr;
  }

  .explore-links {
    gap: 0.5rem;
  }
  .explore-links a {
    flex: 1 1 calc(50% - 0.25rem);
    text-align: center;
  }

  .footer-nav {
    gap: 0.4rem 1rem;
  }
}

/* ── Tiny: 400px ── */
@media (max-width: 400px) {
  .cat-nav-inner {
    gap: 0.8rem;
  }
  .cat-nav-link {
    font-size: 0.65rem;
  }
}

/* ════════════════════════════════════════════
   CONTACT PAGE (contact.html)
════════════════════════════════════════════ */

/* ── Hero image ── */
.contact-hero-img {
  width: 100%;
  height: 320px;
  overflow: hidden;
  position: relative;
}
.contact-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: none;
  transform: none;
  transition: transform 6s ease;
}
.contact-hero-img:hover img {
  transform: scale(1);
}
.contact-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 70%,
    rgba(252, 250, 247, 0.25) 100%
  );
  pointer-events: none;
}

/* ── Intro ── */
.contact-intro {
  text-align: center;
  padding: 2rem var(--pad-x) 0;
  max-width: 560px;
  margin-inline: auto;
  position: relative;
}
.contact-intro::before {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--accent);
  margin: 0 auto 1.1rem;
}
.contact-intro h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.contact-intro p {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.8;
  margin: 0;
}
.contact-intro p em {
  font-style: italic;
  font-family: var(--serif);
}

/* ── Divider ── */
.contact-divider {
  max-width: var(--max-w);
  margin: 2rem auto 0;
  padding-inline: var(--pad-x);
  border: none;
  border-top: 1px solid var(--rule);
}

/* ── Two-column body ── */
.contact-body {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2.5rem var(--pad-x) 4.5rem;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  align-items: stretch;
}

/* ─ Left: info panel ─ */
.contact-info {
  position: static;
  display: flex;
  flex-direction: column;
}
.contact-info h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.contact-info-desc {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.85;
  margin-bottom: 1.4rem;
}
.contact-info-desc em {
  font-style: italic;
  font-family: var(--serif);
}
.contact-reach-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
  opacity: 0.7;
}
.contact-reach-list {
  list-style: none;
  margin-bottom: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-reach-list li {
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 300;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.contact-reach-list li:first-child {
  border-top: 1px solid var(--rule);
}
.contact-reach-list li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ─ Email block ─ */
.contact-email-block {
  background: #faf8f5;
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  padding: 1rem 1.1rem;
  margin-top: 0.25rem;
}
.contact-email-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.contact-email-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.contact-email-line svg {
  color: var(--accent);
  flex-shrink: 0;
}
.contact-email-line a {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.contact-email-line a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
/* Divider between email and form */
.contact-divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-divider-text::before,
.contact-divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.contact-or-line {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-muted);
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.contact-or-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ─ Right: form card ─ */
.contact-form-wrap {
background: var(--white);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 4px);
  padding: 2rem 2.2rem;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.045);
  display: flex;
  flex-direction: column;
}

.contact-form-wrap form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form-wrap .field:last-of-type {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact-form-wrap .field:last-of-type textarea {
  flex: 1;
  min-height: 120px;
  resize: none;
}
}
.contact-form-wrap h2 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.9rem;
}
.field label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.field input,
.field textarea {
  background: #faf8f5;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-muted);
  font-weight: 300;
}
.field input:focus,
.field textarea:focus {
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 129, 90, 0.1);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}
.btn-submit {
  width: 100%;
  padding: 0.8rem;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0.2rem;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.btn-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}
.btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(192, 129, 90, 0.25);
}
.btn-submit:active {
  transform: translateY(0);
}
.success-msg {
  display: none;
  align-items: center;
  gap: 10px;
  background: #f0f8f0;
  border: 1px solid #c3dfc3;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.83rem;
  color: #2d6a2d;
  font-family: var(--sans);
  margin-top: 0.65rem;
}

/* ── Contact responsive (merged into global breakpoints) ── */
@media (max-width: 900px) {
  .contact-body {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 3.5rem;
  }
  .contact-info {
    position: static;
  }
  .contact-hero-img {
    height: 220px;
  }
}
@media (max-width: 620px) {
  .contact-hero-img {
    height: 170px;
  }
  .contact-intro {
    padding-top: 1.75rem;
  }
  .contact-form-wrap {
    padding: 1.5rem 1.2rem;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════
   WORK WITH US
════════════════════════════════════════════ */

/* ── Hero badge overlay ── */
.wwu-hero-img {
  position: relative; /* already set by .contact-hero-img, but keeps override safe */
}
.wwu-hero-badge {
  position: absolute;
  bottom: 1.25rem;
  right: var(--pad-x);
  background: var(--accent);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius);
  pointer-events: none;
  animation: fadeIn 0.8s 0.4s both;
}

/* ── Services grid ── */
.wwu-services {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2.5rem var(--pad-x) 0;
}
.wwu-services-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.wwu-service-card {
  background: var(--white);
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.4rem;
  transition:
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.wwu-service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.wwu-service-icon {
  width: 42px;
  height: 42px;
  background: var(--beige);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 1rem;
  transition: background 0.25s;
}
.wwu-service-card:hover .wwu-service-icon {
  background: var(--accent-lt);
}

.wwu-service-card h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
  line-height: 1.3;
}
.wwu-service-card p {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}

/* ── Stats strip ── */
.wwu-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--beige);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  padding: 1rem 1.1rem;
  margin: 1.4rem 0 1.25rem;
}
.wwu-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.wwu-stat-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.wwu-stat-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  line-height: 1.3;
}
.wwu-stat-divider {
  width: 1px;
  height: 2.5rem;
  background: var(--rule);
  flex-shrink: 0;
}

/* ── Select field (collab type) ── */
.wwu-select {
  background: #faf8f5;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888480' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
  width: 100%;
}
.wwu-select:focus {
  background-color: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(192, 129, 90, 0.1);
}

/* ── Left/right column bottom alignment ── */
.wwu-body {
  align-items: stretch; /* both columns same height */
}
.wwu-body .contact-info {
  position: static; /* remove sticky offset */
  display: flex;
  flex-direction: column;
}
.wwu-body .contact-info .contact-divider-text {
  margin-top: auto; /* push "Or send a proposal" to bottom */
  margin-bottom: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .wwu-services-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wwu-services-inner {
    grid-template-columns: 1fr;
  }
  .wwu-stats {
    gap: 0;
    padding: 0.85rem 0.75rem;
  }
  .wwu-stat-num {
    font-size: 1.25rem;
  }
  .wwu-hero-badge {
    font-size: 0.6rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ════════════════════════════════════════════
   ABOUT PAGE
════════════════════════════════════════════ */

.about-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding: 2rem var(--pad-x) 4rem;
}

/* ── Hero ── */
.about-hero {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.about-eyebrow {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.about-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 1.4rem;
}
.about-hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.about-hero-intro {
    font-family: var(--serif);   /* switch to serif */
    font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1.9;
  color: #8e8a83;              /* softer muted tone */
  max-width: 620px;           /* slightly wider */
  margin-inline: auto;
  text-align: center;         /* ensure centered */
  letter-spacing: 0.01em;
}

/* ── Portrait pair ── */
.about-portrait-row {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin: 2rem 0 2rem;
}
.about-portrait {
  width: 300px;
  height: 350px;
  border-radius: 4px;
  background: var(--beige);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-portrait:hover {
  transform: translateY(-7px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13);
}


.about-portrait-label {
  position: absolute;
  bottom: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(26, 26, 24, 0.7);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  white-space: nowrap;
}
.portrait-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-lt);
}

/* ───────────────────────
         SECTION
      ─────────────────────── */
.about-section {
  padding: clamp(2.5rem, 5vh, 4rem) 0;
  border-bottom: 1px solid var(--rule);
}
.about-section:last-child {
  border-bottom: none;
}

/* Label (keep premium but subtle) */
.about-section-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.about-section-label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--rule);
}

/* Heading */
.about-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.25;
  margin-bottom: 1.4rem;
}
.about-section h2 em {
  color: var(--accent);
}

/* Body (keep readable, not too stylized) */
.about-section p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

/* Pull quote (soft highlight, not heavy box) */
.about-pullquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
}
.about-pullquote p {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
}

/* ── What You'll Find grid ── */
.about-find-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 20px;
  margin-top: 1.5rem;
}
.about-find-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 240px;
  background-color: var(--beige);
  cursor: pointer;
}

/* Layer 0 — blurred background image (real element; inherit on ::after is unreliable in production) */
.about-find-item::after {
  display: none; /* disabled — replaced by .about-find-bg */
}

.about-find-bg {
  position: absolute;
  inset: -10px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(2.5px) brightness(0.88);
  z-index: 0;
  transition:
    filter 0.35s var(--ease),
    transform 0.35s var(--ease);
}

/* Layer 1 — dark gradient overlay */
.about-find-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.78) 0%,
    rgba(10, 8, 6, 0.32) 55%,
    rgba(10, 8, 6, 0.06) 100%
  );
  transition: background 0.35s var(--ease);
  z-index: 1;
}

/* Hover — image sharpens and zooms slightly */
.about-find-item:hover .about-find-bg {
  filter: blur(1px) brightness(0.75);
  transform: scale(1.05);
}
.about-find-item:hover::before {
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.88) 0%,
    rgba(10, 8, 6, 0.44) 60%,
    rgba(10, 8, 6, 0.10) 100%
  );
}

/* Layer 2 — text content */
.about-find-item-inner {
  position: relative;
  z-index: 2;
  padding: 1.1rem 1.2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Arrow icon — fades in on hover */
.about-find-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.about-find-item:hover .about-find-arrow {
  opacity: 1;
}
.about-find-arrow svg {
  width: 12px;
  height: 12px;
  stroke: var(--white);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Numbered category tag */
.about-find-tag {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.35rem;
  display: block;
}
.about-find-icon {
  font-size: 1.25rem;
  margin-bottom: 0.65rem;
  display: block;
  line-height: 1;
}
.about-find-item h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.3rem;
}
.about-find-item p {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* ── Philosophy pillars ── */
.about-pillars {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.about-pillar {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.about-pillar-num {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-lt);
  line-height: 1;
  flex-shrink: 0;
  width: 2rem;
  padding-top: 0.05rem;
}
.about-pillar-text h3 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.about-pillar-text p {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0;
}

/* ── CTA block ── */
.about-cta {
  text-align: center;
  background: var(--beige);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 2rem 2rem;
  margin-top: 2.5rem;
}
.about-cta h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.6rem;
  letter-spacing: 0.1em;
}
.about-cta h2 em {
  font-style: italic;
    letter-spacing: 0.07em;
}
.about-cta p {
  font-family: var(--serif);
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 400px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
    letter-spacing: 0.1em;
}
.about-cta-links {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.8rem 1.75rem;
  border-radius: 2px;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}
.cta-btn--primary {
  background: var(--accent);
  color: var(--white);
}
.cta-btn--primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(192, 129, 90, 0.25);
}
.cta-btn--ghost {
  border: 1.5px solid var(--ink-muted);
  color: var(--ink-soft);
}
.cta-btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── About responsive ── */
@media (max-width: 600px) {
  .about-wrap {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }
  .about-portrait-row {
    gap: 0.9rem;
  }
  .about-portrait {
    width: 120px;
    height: 150px;
  }
  .about-find-grid {
    grid-template-columns: 1fr;
  }
  .about-find-item {
    height: 160px;
  }
  .about-cta {
    padding: 2.5rem 1.25rem;
  }
}

/* ════════════════════════════════════════════
   TRAVEL DESTINATIONS — travel-dest.css
 ════════════════════════════════════════════ */

/* ── Country / City Hero ── */
.tdest-hero {
  position: relative;
  height: 480px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.tdest-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.tdest-hero:hover .tdest-hero-bg { transform: scale(1); }
.tdest-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,8,6,0.88) 0%,
    rgba(10,8,6,0.45) 45%,
    rgba(10,8,6,0.15) 100%
  );
}
.tdest-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-x) 3rem;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
}
.tdest-hero-kicker {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-lt);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tdest-hero-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent-lt);
  display: inline-block;
}
.tdest-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.tdest-hero h1 em { font-style: italic; font-weight: 400; }
.tdest-hero-tagline {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.tdest-hero-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.tdest-badge {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 2px;
  padding: 0.3rem 0.75rem;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
}

/* ── Breadcrumb ── */
.tdest-breadcrumb {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 1.2rem var(--pad-x) 0;
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tdest-breadcrumb a { color: var(--ink-muted); transition: color 0.2s; }
.tdest-breadcrumb a:hover { color: var(--accent); }
.tdest-breadcrumb span.sep { color: var(--rule); }
.tdest-breadcrumb span.current { color: var(--ink-soft); }

/* ── Page layout ── */
.tdest-layout {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 2.5rem var(--pad-x) 5rem;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .tdest-layout { grid-template-columns: 1fr; }
  .tdest-sidebar { order: -1; }
}

/* ── Intro block ── */
.tdest-intro {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin-bottom: 2.5rem;
}
.tdest-intro p {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0;
}

/* ── Quick facts box ── */
.tdest-facts {
  background: var(--beige);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.tdest-facts-title {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}
.tdest-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 500px) { .tdest-facts-grid { grid-template-columns: 1fr; } }
.tdest-fact-item {}
.tdest-fact-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.2rem;
}
.tdest-fact-value {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink);
}

/* ── Section heading ── */
.tdest-section-title {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.tdest-section-title em { font-style: italic; color: var(--accent); }

/* ── Country / city card grid ── */
.tdest-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 600px) { .tdest-cards { grid-template-columns: 1fr; } }

.tdest-ccard {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: var(--beige);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s, transform 0.3s;
}
.tdest-ccard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tdest-ccard-img {
  height: 120px;
  overflow: hidden;
  position: relative;
}
.tdest-ccard-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
}
.tdest-ccard:hover .tdest-ccard-img-bg { transform: scale(1.07); }
.tdest-ccard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.5s var(--ease);
}
.tdest-ccard:hover .tdest-ccard-img img { transform: scale(1.07); }
.tdest-ccard-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(10,8,6,0.65) 0%, transparent 60%);
}
.tdest-ccard-flag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 3;
  font-size: 1.4rem;
  line-height: 1;
}
.tdest-ccard-body {
  padding: 0.7rem 0.9rem 0.8rem;
}
.tdest-ccard-tag {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.3rem;
}
.tdest-ccard-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
  line-height: 1.2;
}
.tdest-ccard-desc {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.tdest-ccard-link {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s;
}
.tdest-ccard:hover .tdest-ccard-link { gap: 0.6rem; }

/* ── Sidebar ── */
.tdest-sidebar {}
.tdest-sidebar-widget {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.4rem 1.3rem;
  margin-bottom: 1.5rem;
}
.tdest-sidebar-widget-title {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.tdest-sidebar-list { display: flex; flex-direction: column; gap: 0.6rem; }
.tdest-sidebar-list a {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--beige);
  transition: color 0.2s, padding-left 0.2s;
}
.tdest-sidebar-list a:last-child { border-bottom: none; }
.tdest-sidebar-list a:hover { color: var(--accent); padding-left: 0.4rem; }
.tdest-sidebar-list a span { font-size: 1rem; }

/* ── Tips list ── */
.tdest-tips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.tdest-tip {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.tdest-tip-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1.4;
}
.tdest-tip-text {}
.tdest-tip-text strong {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 0.2rem;
}
.tdest-tip-text p {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}

/* ── Body text ── */
.tdest-body p {
  font-family: var(--sans);
  font-size: 0.975rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.9;
  margin-bottom: 1.2rem;
}
.tdest-body p:last-child { margin-bottom: 0; }
.tdest-body h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
  margin: 2rem 0 0.8rem;
}
.tdest-body strong { font-weight: 700; color: var(--ink); }

/* ── CTA banner ── */
.tdest-cta {
  background: var(--ink);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.tdest-cta h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.tdest-cta h3 em { font-style: italic; color: var(--accent-lt); }
.tdest-cta p {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 300;
  color: rgba(255,255,255,0.62);
  max-width: 380px;
  margin-inline: auto;
  margin-bottom: 1.5rem;
  line-height: 1.75;
}
.tdest-cta a {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  padding: 0.85rem 2rem;
  border-radius: 2px;
  transition: background 0.2s, transform 0.15s;
}
.tdest-cta a:hover { background: var(--accent-hover); transform: translateY(-2px); }

/* ── City guide header (inside country page) ── */
.tdest-cities-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}
.tdest-cities-header h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--ink);
}
.tdest-cities-header a {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── City detail cards (3 col) ── */
.tdest-city-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
@media (max-width: 720px) { .tdest-city-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .tdest-city-cards { grid-template-columns: 1fr; } }

.tdest-city-card {
  display: block;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--rule);
  transition: box-shadow 0.25s, transform 0.25s;
}
.tdest-city-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tdest-city-card-img {
  height: 160px;
  overflow: hidden;
  position: relative;
}
.tdest-city-card-img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
}
.tdest-city-card:hover .tdest-city-card-img-bg { transform: scale(1.08); }
.tdest-city-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.5s var(--ease);
}
.tdest-city-card:hover .tdest-city-card-img img { transform: scale(1.08); }
.tdest-city-card-body {
  padding: 0.9rem 1rem 1rem;
}
.tdest-city-card-name {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.tdest-city-card-sub {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── Responsive header adjustments ── */
@media (max-width: 680px) {
  .tdest-hero { height: 360px; }
  .tdest-hero h1 { font-size: 2rem; }
  .tdest-layout { padding-top: 2rem; padding-bottom: 3rem; }
}

/* Accordion content hidden */
.dest-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  padding-left: 2.2rem;
  display: flex;
  flex-direction: column;
}

/* Links inside */
.dest-accordion-content a {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.3rem 0;
}

/* Active (expanded) */
.dest-accordion-item.active .dest-accordion-content {
  max-height: 400px;
  margin-top: 0.5rem;
}

/* ════════════════════════════════════════════
   TRAVEL / DESTINATIONS PAGE — travel.html
   All styles extracted from inline <style> block
════════════════════════════════════════════ */

/* ── Page wrapper ── */
.dest-page {
  background: var(--off-white);
  min-height: 100vh;
}

/* ── Page Hero Banner ── */
.dest-page-hero {
  position: relative;
  padding: 60px 20px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, #e8ddd3 0%, #d5c9be 50%, #c9b8a8 100%);
}
.dest-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a09080' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dest-page-hero-content {
  position: relative;
  z-index: 1;
}
.dest-page-hero-kicker {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.dest-page-hero-kicker::before,
.dest-page-hero-kicker::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}
.dest-page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.dest-page-hero-sub {
  font-family: var(--sans);
  font-size: 1.0rem;
  font-weight: 300;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}

/* ── Divider ornament ── */
.dest-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.8rem var(--pad-x);
  gap: 0.6rem;
  overflow: hidden;
}
.dest-ornament-line {
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule), transparent);
}
.dest-ornament svg {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.7;
}

/* ── Two-column layout: sidebar + map ── */
.dest-top-section {
  max-width: 1200px;
  margin-inline: auto;
  padding: 2rem var(--pad-x) 4rem;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .dest-top-section {
    grid-template-columns: 1fr;
  }
}

/* ── Left sidebar ── */
.dest-sidebar-list-wrap {
  position: sticky;
  top: calc(var(--total-top) + 1rem);
}
.dest-sidebar-box {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.8rem 1.5rem 2rem;
  position: relative;
}
.dest-sidebar-expand-label {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.4rem;
  display: block;
}
.dest-sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dest-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid #f0ebe4;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}
.dest-sidebar-item:last-child { border-bottom: none; }
.dest-sidebar-item:hover .dest-sidebar-item-name { color: var(--accent); }
.dest-sidebar-item-num {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-muted);
  width: 16px;
  flex-shrink: 0;
  text-align: right;
}
.dest-sidebar-item-diamond {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
}
.dest-sidebar-item-diamond::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent-lt);
  transform: rotate(45deg);
  border-radius: 1px;
  transition: background 0.2s;
}
.dest-sidebar-item:hover .dest-sidebar-item-diamond::before { background: var(--accent); }
.dest-sidebar-item-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.2s;
}

/* Currently Traveling stamp */
.dest-traveling-stamp {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.25rem;
}
.dest-stamp-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px dashed #c5b8a8;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
}
.dest-stamp-circle span {
  font-family: var(--sans);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7e72;
  line-height: 1.4;
}
.dest-stamp-location {
  background: var(--white);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ── World Map Area ── */
.dest-map-area {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
}

/* Filter bar */
.dest-map-filters {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(240, 230, 215, 0.92);
  backdrop-filter: blur(6px);
}
.dest-map-select {
  flex: 1;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a4a38;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 2rem 0.5rem 1rem;
  border-radius: 2px;
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.dest-map-search-wrap {
  flex: 1.4;
  position: relative;
  display: flex;
  align-items: center;
}
.dest-map-search {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 300;
  color: #3a2e22;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 2.2rem 0.5rem 1rem;
  border-radius: 2px;
  outline: none;
}
.dest-map-search::placeholder { color: #9a8a78; }
.dest-map-search-icon {
  position: absolute;
  right: 0.75rem;
  color: #9a8a78;
  pointer-events: none;
}

/* ── Map Canvas ──
   KEY FIX: use padding-bottom aspect ratio trick so the canvas
   always matches the image's natural aspect ratio.
   worldmapbackground.jpg is 1920×960 → 50% aspect ratio.
   Pins are placed inside .dest-map-img-layer which perfectly
   overlaps the rendered image, eliminating offset errors.
── */
.dest-map-canvas {
  position: relative;
  width: 100%;
  background-color: #fdf9f5;
  /* aspect-ratio maintained via JS-driven height or padding trick */
  overflow: hidden;
}

/* The actual img tag fills the canvas */
.dest-map-canvas .dest-map-img {
  display: block;
  width: 100%;
  height: auto;
  /* image is full-width, height auto — canvas matches exactly */
  pointer-events: none;
  user-select: none;
}

/* Overlay layer sits exactly on top of the image */
.dest-map-pin-layer {
  position: absolute;
  inset: 0;
  pointer-events: none; /* children override */
}

/* ── Polaroid pin ── */
.dest-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  /* Anchor: the pin dot is at (left, top); shift so photo sits above */
  transform: translate(-50%, -100%);
  transition: transform 0.3s var(--ease), filter 0.3s, z-index 0s;
  z-index: 3;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
  pointer-events: auto;
}
.dest-pin:hover {
  transform: translate(-50%, -106%) scale(1.14);
  z-index: 10;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.42));
}

/* White Polaroid frame */
.dest-pin-photo {
  width: 68px;
  background: #fff;
  padding: 3px 3px 14px;
  border-radius: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  position: relative;
}
.dest-pin-img-area {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s;
}
.dest-pin:hover .dest-pin-img-area { transform: scale(1.08); }

/* Number badge */
.dest-pin-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.48rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/* Country label in Polaroid strip */
.dest-pin-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.36rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3a2e22;
}

/* Pin stem + anchor dot */
.dest-pin-needle {
  width: 1.5px;
  height: 7px;
  background: rgba(0, 0, 0, 0.5);
}
.dest-pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Photo fills */
.bg-india    { background-image: url("assets/india.jpg");    background-size: cover; background-color: #c0814a; }
.bg-japan    { background-image: url("assets/japan.JPG");    background-size: cover; background-color: #c84b4b; }
.bg-taiwan   { background-image: url("assets/taiwan.JPG");   background-size: cover; background-color: #27ae60; }
.bg-thailand { background-image: url("assets/thailand.JPG"); background-size: cover; background-color: #2d8a6a; }
.bg-kenya    { background-image: url("assets/kenya.JPG");    background-size: cover; background-color: #d4a017; }
.bg-maldives { background-image: url("assets/maldives.jpg"); background-size: cover; background-color: #1a89a4; }

/* Mobile: smaller pins */
@media (max-width: 600px) {
  .dest-pin-photo { width: 48px; padding: 2px 2px 11px; }
  .dest-pin-img-area { height: 36px; }
  .dest-pin-label { font-size: 0.28rem; height: 11px; }
  .dest-pin-badge { width: 13px; height: 13px; font-size: 0.38rem; top: -5px; right: -5px; }
  .dest-pin-needle { height: 5px; }
  .dest-pin-dot { width: 5px; height: 5px; }
}

/* ══════════════════════════════════════════
   POPULAR DESTINATIONS SECTION
══════════════════════════════════════════ */
.dest-popular-section {
  background: var(--white);
  padding: 4rem var(--pad-x);
}
.dest-popular-inner {
  max-width: 1200px;
  margin-inline: auto;
}
.dest-section-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  margin-bottom: 2.5rem;
}
.dest-popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 760px) { .dest-popular-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dest-popular-grid { grid-template-columns: 1fr; } }

.dest-pop-card {
  display: block;
  text-decoration: none;
  position: relative;
  border: 1px solid var(--rule);
  background: var(--white);
  overflow: visible;
  border-radius: 2px;
  transition: box-shadow 0.3s, transform 0.3s;
}
.dest-pop-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}
.dest-pop-card-img {
  width: 100%;
  height: 280px;
  overflow: hidden;
  border: 5px solid var(--white);
  position: relative;
}
.dest-pop-card-img-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s;
}
.dest-pop-card:hover .dest-pop-card-img-bg { transform: scale(1.05); }
.dest-pop-card-label {
  background: #b5a898;
  padding: 0.7rem 1rem;
  text-align: center;
  margin: 0 5px;
}
.dest-pop-card-label span {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
}
.dest-pop-card-arrow {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.75rem;
}
.dest-pop-card-arrow svg {
  color: var(--accent-lt);
  opacity: 0.7;
}

/* ══════════════════════════════════════
         TRAVEL RESOURCES TEASER — redesigned warm palette
      ══════════════════════════════════════ */

      /* Seamless gradient bridge from itinerary section (#faf9f6) to toolkit */
      .tr-res-section {
        background: linear-gradient(
          to bottom,
          #f0ebe3 0%,
          #e8e0d4 40%,
          #dfd5c6 100%
        );
        padding: 4.5rem 0 5rem;
        position: relative;
        overflow: hidden;
      }

      /* Ornamental watermark numeral */
      .tr-res-section::before {
        content: "✦";
        position: absolute;
        right: -2%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 32rem;
        line-height: 1;
        color: rgba(139, 99, 60, 0.04);
        pointer-events: none;
        font-family: "Playfair Display", serif;
        user-select: none;
      }

      /* Top rule — warm gold line matching page accent */
      .tr-res-topline {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          #c9a882 20%,
          #8b7355 50%,
          #c9a882 80%,
          transparent 100%
        );
      }

      .tr-res-inner {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin-inline: auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 4.5rem;
        align-items: center;
      }

      /* ── Left text block ── */
      .tr-res-eyebrow {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-family: "Lato", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: #8b7355;
        margin-bottom: 1.4rem;
      }

      .tr-res-eyebrow-dash {
        display: inline-block;
        width: 28px;
        height: 1px;
        background: #8b7355;
        flex-shrink: 0;
      }

      .tr-res-title {
        font-family: "Playfair Display", serif;
        font-size: clamp(2.4rem, 3.8vw, 3.3rem);
        font-weight: 400;
        color: #2c2416;
        line-height: 1.18;
        margin: 0 0 1.5rem;
        letter-spacing: -0.01em;
      }

      .tr-res-title em {
        font-style: italic;
        color: #8b6244;
      }

      .tr-res-body {
        font-family: "Lato", sans-serif;
        font-size: 0.97rem;
        font-weight: 300;
        color: #5c4e3c;
        line-height: 1.9;
        margin: 0 0 2.6rem;
        max-width: 380px;
      }

      .tr-res-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-family: "Lato", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #f5f0eb;
        background: #5a4a38;
        text-decoration: none;
        padding: 1rem 2.3rem;
        border-radius: 2px;
        transition: background 0.24s, transform 0.2s, box-shadow 0.24s;
        box-shadow: 0 6px 22px rgba(44, 36, 22, 0.2);
      }

      .tr-res-cta-btn:hover {
        background: #2c2416;
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(44, 36, 22, 0.22);
      }

      .tr-res-cta-btn svg {
        transition: transform 0.2s;
      }

      .tr-res-cta-btn:hover svg {
        transform: translateX(4px);
      }

      /* ── Right: category cards ── */
      .tr-res-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
      }

      .tr-res-card {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        padding: 1.5rem 1.6rem;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(139, 99, 60, 0.18);
         box-shadow: 0 6px 20px rgba(44, 36, 22, 0.06);
        border-radius: 6px;
        text-decoration: none;
        color: inherit;
        transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
        backdrop-filter: blur(6px);
        position: relative;
      }

      .tr-res-card:hover {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(139, 99, 60, 0.35);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(44, 36, 22, 0.12);
      }

      .tr-res-card-icon {
        flex-shrink: 0;
        width: 46px;
        height: 46px;
        background: rgba(139, 99, 60, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8b6244;
        transition: background 0.22s, color 0.22s;
      }

      .tr-res-card:hover .tr-res-card-icon {
        background: rgba(139, 99, 60, 0.18);
        color: #5a4a38;
      }

      .tr-res-card-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
        min-width: 0;
      }

      .tr-res-card-title {
        font-family: "Lato", sans-serif;
        font-size: 0.92rem;
         letter-spacing: 0.02em;
        font-weight: 700;
        color: #2c2416;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tr-res-card-sub {
        font-family: "Lato", sans-serif;
        font-size: 0.76rem;
        font-weight: 300;
        color: #7a6a58;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tr-res-card-arrow {
        flex-shrink: 0;
        color: rgba(139, 99, 60, 0.4);
        transition: transform 0.2s, color 0.2s;
      }

      .tr-res-card:hover .tr-res-card-arrow {
        transform: translateX(4px);
        color: #8b6244;
      }

      /* Wide "see all" card spans both columns */
      .tr-res-card--wide {
        grid-column: 1 / -1;
        justify-content: center;
        gap: 0.8rem;
        padding: 1.2rem 1.5rem;
        background: transparent;
        border: 1.8px solid rgba(139, 99, 60, 0.28);
        border-style: dashed;
      }

      .tr-res-card--wide:hover {
        background: rgba(255, 255, 255, 0.6);
        border-style: solid;
        border-color: rgba(139, 99, 60, 0.5);
        transform: none;
        box-shadow: none;
      }

      .tr-res-card-wide-label {
        font-family: "Lato", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #8b6244;
        transition: letter-spacing 0.22s;
      }

      .tr-res-card--wide:hover .tr-res-card-wide-label {
        letter-spacing: 0.16em;
      }

      .tr-res-card--wide svg {
        color: #8b6244;
        flex-shrink: 0;
        transition: transform 0.22s;
      }

      .tr-res-card--wide:hover svg {
        transform: translateX(3px);
      }

      /* ── Responsive ── */
      @media (max-width: 900px) {
        .tr-res-inner {
          grid-template-columns: 1fr;
          gap: 3.5rem;
        }
        .tr-res-body {
          max-width: 100%;
        }
      }

      @media (max-width: 540px) {
        .tr-res-right {
          grid-template-columns: 1fr;
        }
        .tr-res-card--wide {
          grid-column: auto;
        }
        .tr-res-section {
          padding: 5rem 0 5.5rem;
        }
      }



/* ════════════════════════════════════════════
   INDEX PAGE — Hero, Ticker, Cards, Panels
   (Extracted from index.html <style> block)
════════════════════════════════════════════ */

      /* ═══════════════════════════════════════════
         INDEX PAGE — Styles
      ═══════════════════════════════════════════ */

      /* ── Hero ── */
      .hero {
        position: relative;
        background: var(--ink);
        overflow: hidden;
        min-height: 580px;
        display: flex;
        align-items: center;
      }

      /* ── Hero Slideshow — full-bleed crossfade + Ken Burns ── */
      .hero-slides {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
      }
      .hero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .hero-slide.active {
        opacity: 1;
      }
      .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        /* Ken Burns: each slide animates from a unique start/end */
        filter: brightness(0.72);
        will-change: transform;
      }
      /* Ken Burns keyframes — alternating directions for variety */
      @keyframes kb-zoom-in-left {
        from {
          transform: scale(1.12) translate(2%, 1%);
        }
        to {
          transform: scale(1) translate(0, 0);
        }
      }
      @keyframes kb-zoom-in-right {
        from {
          transform: scale(1.1) translate(-2%, -1%);
        }
        to {
          transform: scale(1) translate(0, 0);
        }
      }
      @keyframes kb-pan-up {
        from {
          transform: scale(1.08) translateY(3%);
        }
        to {
          transform: scale(1) translateY(0);
        }
      }
      @keyframes kb-pan-down {
        from {
          transform: scale(1.08) translateY(-3%);
        }
        to {
          transform: scale(1) translateY(0);
        }
      }
      @keyframes kb-zoom-center {
        from {
          transform: scale(1.14);
        }
        to {
          transform: scale(1);
        }
      }

      .hero-slide:nth-child(1) img {
        animation: kb-zoom-in-left 8s ease-out both;
      }
      .hero-slide:nth-child(2) img {
        animation: kb-pan-up 8s ease-out both;
      }
      .hero-slide:nth-child(3) img {
        animation: kb-zoom-in-right 8s ease-out both;
      }
      .hero-slide:nth-child(4) img {
        animation: kb-pan-down 8s ease-out both;
      }
      .hero-slide:nth-child(5) img {
        animation: kb-zoom-center 8s ease-out both;
      }

      /* Restart animation when slide becomes active */
      .hero-slide.active img {
        animation-play-state: running;
      }
      .hero-slide:not(.active) img {
        animation-play-state: paused;
      }

      /* Vignette overlay — darkens edges, lighter in the centre */
      .hero-vignette {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 80% 70% at 62% 50%,
            transparent 30%,
            rgba(10, 8, 6, 0.55) 100%
          ),
          linear-gradient(
            100deg,
            rgba(12, 10, 8, 0.88) 0%,
            rgba(12, 10, 8, 0.42) 36%,
            rgba(12, 10, 8, 0.1) 60%,
            transparent 100%
          );
        pointer-events: none;
        z-index: 1;
      }

      /* Vertical dot indicators — right edge */
      .hero-dots {
        position: absolute;
        right: 1.75rem;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        z-index: 3;
      }
      .hero-dot {
        width: 2px;
        height: 20px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 1px;
        cursor: pointer;
        transition:
          background 0.35s,
          height 0.35s;
        border: none;
        padding: 0;
      }
      .hero-dot.active {
        background: var(--accent-lt);
        height: 42px;
      }

      /* Keep old caption hidden */
      .hero-slide-caption {
        display: none;
      }

      .hero-inner {
        position: relative;
        z-index: 2;
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 5.5rem var(--pad-x) 6rem;
        width: 100%;
      }

      .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-family: var(--sans);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--accent-lt);
        margin-bottom: 1.5rem;
        opacity: 0.85;
      }
      .hero-eyebrow::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--accent-lt);
        display: block;
        flex-shrink: 0;
      }

      .hero-title {
        font-family: var(--serif);
        font-size: clamp(2.8rem, 6.5vw, 4.8rem);
        font-weight: 400;
        color: var(--white);
        line-height: 1.1;
        margin-bottom: 1.5rem;
        letter-spacing: -0.01em;
        max-width: 680px;
      }
      .hero-title em {
        font-style: italic;
        color: var(--accent-lt);
      }

      .hero-desc {
        font-family: var(--sans);
        font-size: 1rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.62);
        line-height: 1.85;
        max-width: 420px;
        margin-bottom: 2.25rem;
      }

      .hero-cta-row {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        flex-wrap: wrap;
      }

      .hero-btn {
        display: inline-block;
        font-family: var(--sans);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        padding: 0.9rem 1.9rem;
        border-radius: 2px;
        transition:
          background 0.2s,
          transform 0.15s,
          box-shadow 0.2s;
        text-decoration: none;
      }
      .hero-btn--primary {
        background: var(--accent);
        color: var(--white);
      }
      .hero-btn--primary:hover {
        background: var(--accent-hover);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(192, 129, 90, 0.38);
      }
      .hero-btn--ghost {
        border: 1px solid rgba(255, 255, 255, 0.28);
        color: rgba(255, 255, 255, 0.7);
      }
      .hero-btn--ghost:hover {
        border-color: rgba(255, 255, 255, 0.7);
        color: var(--white);
      }

      /* ── Redesigned Ticker ribbon ── */
      .hero-ticker {
        background: var(--white);
        border-top: 3px solid var(--accent);
        border-bottom: 1px solid var(--rule);
        overflow: hidden;
        height: 46px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        position: relative;
      }
      .hero-ticker::before,
      .hero-ticker::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        z-index: 2;
        pointer-events: none;
      }
      .hero-ticker::before {
        left: 0;
        background: linear-gradient(to right, var(--white), transparent);
      }
      .hero-ticker::after {
        right: 0;
        background: linear-gradient(to left, var(--white), transparent);
      }
      .hero-ticker-track {
        display: inline-flex;
        align-items: center;
        animation: ticker 32s linear infinite;
      }
      .hero-ticker-track span {
        font-family: var(--sans);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--ink-soft);
        padding: 0 1.6rem;
        transition: color 0.2s;
      }
      .hero-ticker-track span:hover {
        color: var(--accent);
      }
      .hero-ticker-sep {
        color: var(--accent) !important;
        font-size: 0.45rem !important;
        letter-spacing: 0 !important;
        padding: 0 !important;
        opacity: 0.7;
      }
      @keyframes ticker {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      /* ── Shared section header ── */
      .section-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 1.75rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--rule);
      }
      .section-kicker {
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--accent);
        display: block;
        margin-bottom: 0.3rem;
      }
      .section-title {
        font-family: var(--serif);
        font-size: clamp(1.25rem, 2.5vw, 1.6rem);
        font-weight: 400;
        color: var(--ink);
        line-height: 1.2;
        margin: 0;
      }
      .section-title em {
        font-style: italic;
      }
      .section-more {
        font-family: var(--sans);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
        white-space: nowrap;
        flex-shrink: 0;
        transition:
          color 0.2s,
          letter-spacing 0.2s;
        text-decoration: none;
      }
      .section-more:hover {
        color: var(--accent-hover);
        letter-spacing: 0.18em;
      }

      /* ── Featured banner card ── */
      .featured-card {
        position: relative;
        border-radius: 2px;
        overflow: hidden;
        display: block;
        margin-bottom: 1.5rem;
        text-decoration: none;
        background: var(--ink);
      }
      .featured-card-img {
        width: 100%;
        height: 340px;
        object-fit: cover;
        display: block;
        opacity: 0.75;
        transition:
          opacity 0.4s,
          transform 0.6s;
      }
      .featured-card:hover .featured-card-img {
        opacity: 0.65;
        transform: scale(1.03);
      }
      .featured-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(10, 8, 6, 0.9) 0%,
          rgba(10, 8, 6, 0.35) 52%,
          rgba(10, 8, 6, 0.04) 100%
        );
        pointer-events: none;
      }
      .featured-card-badge {
        position: absolute;
        top: 1.25rem;
        left: 1.5rem;
        background: var(--accent);
        color: var(--white);
        font-family: var(--sans);
        font-size: 0.56rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        padding: 0.3rem 0.8rem;
        border-radius: 1px;
      }
      .featured-card-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 1.75rem;
      }
      .featured-card-tags {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
      }
      .featured-card-tag {
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent-lt);
      }
      .featured-card-tag + .featured-card-tag::before {
        content: "·";
        margin-right: 0.5rem;
        color: rgba(255, 255, 255, 0.3);
      }
      .featured-card-title {
        font-family: var(--serif);
        font-size: clamp(1.4rem, 3vw, 2rem);
        font-weight: 600;
        color: var(--white);
        line-height: 1.2;
        margin-bottom: 0.65rem;
        transition: color 0.2s;
      }
      .featured-card:hover .featured-card-title {
        color: var(--accent-lt);
      }
      .featured-card-excerpt {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.65);
        line-height: 1.75;
        max-width: 520px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .featured-card-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .featured-card-date {
        font-family: var(--sans);
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.38);
        letter-spacing: 0.06em;
      }
      .featured-card-read {
        font-family: var(--sans);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent-lt);
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.3rem;
      }
      .featured-card-read svg {
        transition: transform 0.2s;
      }
      .featured-card:hover .featured-card-read svg {
        transform: translateX(4px);
      }

      /* ── 3-col posts grid ── */
      .posts-grid {
        display: grid;
         grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      .grid-post-card {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--rule);
        background: var(--white);
        border-radius: 2px;
        overflow: hidden;
        transition:
          box-shadow 0.3s,
          transform 0.3s;
        text-decoration: none;
      }
      .grid-post-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .grid-post-card-img-wrap {
        overflow: hidden;
        height: 130px;
        background: var(--beige);
        flex-shrink: 0;
      }
      .grid-post-card-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s var(--ease);
      }
      .grid-post-card:hover .grid-post-card-img-wrap img {
        transform: scale(1.05);
      }
      .grid-post-card-body {
        padding: 0.85rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .grid-post-card-tag {
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 0.4rem;
      }
      .grid-post-card-title {
        font-family: var(--serif);
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
        margin-bottom: 0.35rem;
        transition: color 0.2s;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .grid-post-card:hover .grid-post-card-title {
        color: var(--accent);
      }
      .grid-post-card-excerpt {
        font-family: var(--sans);
        font-size: 0.78rem;
        font-weight: 300;
        color: var(--ink-soft);
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        flex: 1;
      }
      .grid-post-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--beige);
      }
      .grid-post-card-date {
        font-size: 0.68rem;
        color: var(--ink-muted);
      }
      .grid-post-card-arrow {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
        transition: letter-spacing 0.2s;
      }
      .grid-post-card:hover .grid-post-card-arrow {
        letter-spacing: 0.16em;
      }

      /* ══════════════════════════════════════════
         LIFESTYLE + STUDIO — Photo editorial panels
      ══════════════════════════════════════════ */

      .ls-st-section {
        padding: 0 var(--pad-x) 3.5rem;
        background: var(--off-white);
      }
      /* Section header — matches page content alignment */
      .ls-st-header {
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 3rem 0 1.5rem;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        border-bottom: 1px solid var(--rule);
        margin-bottom: 1.25rem;
      }
      .ls-st-header-left {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
      }
      .ls-st-header-kicker {
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .ls-st-header-title {
        font-family: var(--serif);
        font-size: clamp(1.2rem, 2.2vw, 1.5rem);
        font-weight: 400;
        color: var(--ink);
        line-height: 1.2;
        margin: 0;
      }
      .ls-st-header-title em {
        font-style: italic;
      }

      .ls-st-inner {
        max-width: var(--max-w);
        margin-inline: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      @media (max-width: 820px) {
        .ls-st-inner {
          grid-template-columns: 1fr;
        }
      }
      .ls-st-panel {
        position: relative;
        overflow: hidden;
        display: block;
        text-decoration: none;
        height: 420px;
        background: var(--ink);
      }
      @media (max-width: 620px) {
        .ls-st-panel {
          height: 250px;
        }
      }

      /* The actual photo — visible, not crushed */
      .ls-st-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
      }
      .ls-st-panel:hover .ls-st-photo {
        transform: scale(1.06);
      }

      /* Lifestyle: warm left-heavy scrim — enough to read text, photo still sings */
      .ls-st-panel--lifestyle .ls-st-photo {
        filter: brightness(0.78) saturate(0.82);
      }
      .ls-st-panel--lifestyle .ls-st-scrim {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            to top,
            rgba(16, 12, 8, 0.94) 0%,
            rgba(16, 12, 8, 0.45) 40%,
            rgba(16, 12, 8, 0.05) 70%,
            transparent 100%
          ),
          linear-gradient(to right, rgba(16, 12, 8, 0.22) 0%, transparent 55%);
        pointer-events: none;
      }
      /* Accent left rule */
      .ls-st-panel--lifestyle::before {
        content: "";
        position: absolute;
        top: 12%;
        bottom: 12%;
        left: 0;
        width: 2px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(192, 129, 90, 0.8) 30%,
          rgba(192, 129, 90, 0.8) 70%,
          transparent
        );
        z-index: 4;
        pointer-events: none;
      }

      /* Studio: darker treatment, gold hairline top */
      .ls-st-panel--studio .ls-st-photo {
        filter: brightness(0.6) saturate(0.65);
      }
      .ls-st-panel--studio .ls-st-scrim {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            to top,
            rgba(10, 9, 7, 0.96) 0%,
            rgba(10, 9, 7, 0.48) 42%,
            rgba(10, 9, 7, 0.08) 68%,
            transparent 100%
          ),
          linear-gradient(to right, rgba(10, 9, 7, 0.25) 0%, transparent 55%);
        pointer-events: none;
      }
      /* Gold hairline top */
      .ls-st-panel--studio::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          to right,
          transparent 0%,
          #b8924a 20%,
          #b8924a 80%,
          transparent 100%
        );
        z-index: 4;
        pointer-events: none;
      }

      /* ── Text content — always bottom-left ── */
      .ls-st-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.5rem);
        z-index: 3;
      }

      /* Section label */
      .ls-st-label {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 1rem;
      }
      .ls-st-label::before {
        content: "";
        display: block;
        width: 22px;
        height: 1px;
        flex-shrink: 0;
      }
      .ls-st-panel--lifestyle .ls-st-label::before {
        background: rgba(192, 129, 90, 0.75);
      }
      .ls-st-panel--studio .ls-st-label::before {
        background: rgba(184, 146, 74, 0.7);
      }
      .ls-st-label-text {
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.36em;
        text-transform: uppercase;
      }
      .ls-st-panel--lifestyle .ls-st-label-text {
        color: rgba(192, 129, 90, 0.85);
      }
      .ls-st-panel--studio .ls-st-label-text {
        color: rgba(184, 146, 74, 0.75);
      }

      /* Title */
      .ls-st-title {
        font-family: var(--serif);
        font-size: clamp(1.55rem, 2.6vw, 2.2rem);
        font-weight: 400;
        line-height: 1.18;
        letter-spacing: -0.01em;
        color: #fff;
        margin-bottom: 0.8rem;
      }
      .ls-st-title em {
        font-style: italic;
      }
      .ls-st-panel--lifestyle .ls-st-title em {
        color: rgba(220, 168, 118, 0.95);
      }
      .ls-st-panel--studio .ls-st-title em {
        color: rgba(220, 188, 110, 0.95);
      }

      /* One-liner description */
      .ls-st-desc {
        font-family: var(--sans);
        font-size: 0.82rem;
        font-weight: 300;
        line-height: 1.75;
        max-width: 340px;
        margin-bottom: 1.5rem;
      }
      .ls-st-panel--lifestyle .ls-st-desc {
        color: rgba(255, 255, 255, 0.52);
      }
      .ls-st-panel--studio .ls-st-desc {
        color: rgba(255, 255, 255, 0.45);
      }

      /* Separator line before CTA */
      .ls-st-rule {
        width: 100%;
        height: 1px;
        margin-bottom: 1.25rem;
      }
      .ls-st-panel--lifestyle .ls-st-rule {
        background: rgba(192, 129, 90, 0.18);
      }
      .ls-st-panel--studio .ls-st-rule {
        background: rgba(184, 146, 74, 0.16);
      }

      /* CTA row */
      .ls-st-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .ls-st-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        transition:
          color 0.2s,
          gap 0.2s;
      }
      .ls-st-panel--lifestyle .ls-st-cta:hover {
        color: rgba(220, 168, 118, 1);
        gap: 0.95rem;
      }
      .ls-st-panel--studio .ls-st-cta:hover {
        color: rgba(220, 188, 110, 1);
        gap: 0.95rem;
      }
      .ls-st-cta svg {
        transition: transform 0.2s;
        flex-shrink: 0;
        opacity: 0.6;
      }
      .ls-st-cta:hover svg {
        transform: translateX(4px);
        opacity: 1;
      }

      /* Post count — right side of foot */
      .ls-st-count {
        font-family: var(--serif);
        font-size: 0.72rem;
        font-style: italic;
        display: flex;
        align-items: baseline;
        gap: 0.3rem;
      }
      .ls-st-count-num {
        font-size: 1.5rem;
        font-weight: 600;
        font-style: normal;
        line-height: 1;
      }
      .ls-st-count-label {
        font-family: var(--sans);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }
      .ls-st-panel--lifestyle .ls-st-count,
      .ls-st-panel--lifestyle .ls-st-count-num {
        color: rgba(192, 129, 90, 0.35);
      }
      .ls-st-panel--lifestyle .ls-st-count-label {
        color: rgba(192, 129, 90, 0.28);
      }
      .ls-st-panel--studio .ls-st-count,
      .ls-st-panel--studio .ls-st-count-num {
        color: rgba(184, 146, 74, 0.32);
      }
      .ls-st-panel--studio .ls-st-count-label {
        color: rgba(184, 146, 74, 0.26);
      }

      @media (max-width: 620px) {
        .ls-st-section {
          padding-bottom: 2.5rem;
        }
        .ls-st-header {
          padding-top: 2rem;
        }
      }

      /* Pagination styles are defined globally in styles.css */

      /* ── Sidebar variants ── */
      .widget--about-v2 {
        background: linear-gradient(
          145deg,
          #2a1f14 0%,
          #1e1510 40%,
          #2d1e10 70%,
          #1a1208 100%
        ) !important;
        border-color: rgba(192, 129, 90, 0.2) !important;
        border-width: 1px;
        text-align: center;
        padding: 2rem 1.5rem;
        position: relative;
        overflow: hidden;
      }
      .widget--about-v2::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -40px;
        width: 140px;
        height: 140px;
        background: radial-gradient(
          circle,
          rgba(192, 129, 90, 0.18) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .widget--about-v2::after {
        content: "";
        position: absolute;
        bottom: -30px;
        left: -30px;
        width: 110px;
        height: 110px;
        background: radial-gradient(
          circle,
          rgba(192, 129, 90, 0.12) 0%,
          transparent 70%
        );
        pointer-events: none;
      }
      .widget--about-v2 .about-photo-wrap {
        box-shadow:
          0 0 0 2px var(--accent),
          0 0 20px rgba(192, 129, 90, 0.25);
        width: 100px;
        height: 100px;
      }
      .widget--about-v2 .about-name {
        color: var(--white);
        font-size: 1.1rem;
        margin-top: 0.25rem;
      }
      .widget--about-v2 .about-text p {
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.82rem;
      }
      .widget--about-v2 .widget-link {
        display: inline-block;
        margin-top: 1rem;
        background: var(--accent);
        color: var(--white);
        padding: 0.6rem 1.4rem;
        font-size: 0.65rem;
        letter-spacing: 0.16em;
        border-radius: 2px;
        transition:
          background 0.2s,
          box-shadow 0.2s;
        text-decoration: none;
      }
      .widget--about-v2 .widget-link:hover {
        background: var(--accent-hover);
        box-shadow: 0 4px 16px rgba(192, 129, 90, 0.35);
      }

      .widget--stats {
        background: var(--beige) !important;
        border-color: var(--rule) !important;
        text-align: center;
        padding: 1.5rem;
      }
      .stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-top: 0.75rem;
      }
      .stat-item {
        padding: 0.75rem 0.5rem;
        border-right: 1px solid var(--rule);
      }
      .stat-item:last-child {
        border-right: none;
      }
      .stat-num {
        font-family: var(--serif);
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--accent);
        line-height: 1;
        display: block;
      }
      .stat-label {
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--ink-muted);
        margin-top: 0.3rem;
        display: block;
      }

      /* ── Responsive ── */
      @media (max-width: 900px) {
        .dest-strip-card {
          flex: 0 0 calc(33.33% - 0.5rem);
        }
        .posts-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 620px) {
        .hero {
          min-height: 460px;
        }
        .hero-title {
          font-size: 2.2rem;
        }
        .hero-dots {
          display: none;
        }
        .dest-strip-card {
          flex: 0 0 calc(50% - 0.4rem);
        }
        .featured-card-img {
          height: 300px;
        }
        .explore-bar-label {
          width: 100%;
        }
        .dest-carousel-btn {
          display: none;
        }
      }
    


/* ════════════════════════════════════════════
   LIFESTYLE PAGE — Hero, Subnav, Cards, Panels
   (Extracted from lifestyle.html <style> block)
════════════════════════════════════════════ */

      /* ═══════════════════════════════════════════════════════
       LIFESTYLE PAGE — scoped styles only.
       Colors / fonts / radius all reference styles.css vars.
    ═══════════════════════════════════════════════════════ */

      /* .js-reveal rules are defined globally in styles.css */

      /* ════════════════════════════
       PAGE HERO — dark editorial banner
    ════════════════════════════ */
      .ls-page-hero {
        background: var(--ink);
        position: relative;
        overflow: hidden;
        min-height: 300px;
        display: flex;
        align-items: flex-end;
      }
      .ls-hero-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          #2a1e12 0%,
          #1a1410 55%,
          #141018 100%
        );
      }
      .ls-hero-glow {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            ellipse 65% 55% at 18% 65%,
            rgba(192, 129, 90, 0.22) 0%,
            transparent 65%
          ),
          radial-gradient(
            ellipse 38% 32% at 72% 28%,
            rgba(100, 75, 45, 0.14) 0%,
            transparent 60%
          );
        pointer-events: none;
      }
      .ls-hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.32;
        filter: saturate(0.55) brightness(0.7);
      }
      .ls-hero-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(26, 26, 24, 0.94) 0%,
          rgba(26, 26, 24, 0.28) 62%,
          transparent 100%
        );
        pointer-events: none;
      }
      .ls-hero-inner {
        position: relative;
        z-index: 2;
        max-width: var(--max-w);
        margin-inline: auto;
        padding: 4rem var(--pad-x) 3rem;
        width: 100%;
      }
      .ls-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        font-family: var(--sans);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--accent-lt);
        margin-bottom: 1rem;
        opacity: 0.85;
      }
      .ls-hero-eyebrow::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--accent-lt);
        display: block;
        flex-shrink: 0;
      }
      .ls-hero-title {
        font-family: var(--serif);
        font-size: clamp(2.3rem, 5vw, 3.7rem);
        font-weight: 400;
        color: var(--white);
        line-height: 1.1;
        letter-spacing: -0.01em;
        margin-bottom: 0.9rem;
        max-width: 600px;
      }
      .ls-hero-title em {
        font-style: italic;
        color: var(--accent-lt);
      }
      .ls-hero-desc {
        font-family: var(--sans);
        font-size: 0.95rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.52);
        line-height: 1.8;
        max-width: 460px;
      }

      /* ════════════════════════════
       TICKER — identical to index
    ════════════════════════════ */
      .ls-ticker {
        background: var(--white);
        border-top: 3px solid var(--accent);
        border-bottom: 1px solid var(--rule);
        overflow: hidden;
        height: 44px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        position: relative;
      }
      .ls-ticker::before,
      .ls-ticker::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        z-index: 2;
        pointer-events: none;
      }
      .ls-ticker::before {
        left: 0;
        background: linear-gradient(to right, var(--white), transparent);
      }
      .ls-ticker::after {
        right: 0;
        background: linear-gradient(to left, var(--white), transparent);
      }
      .ls-ticker-track {
        display: inline-flex;
        align-items: center;
        animation: ls-tick 30s linear infinite;
      }
      .ls-ticker-track span {
        font-family: var(--sans);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--ink-soft);
        padding: 0 1.4rem;
        transition: color 0.2s;
      }
      .ls-ticker-track span:hover {
        color: var(--accent);
      }
      .ls-tick-sep {
        color: var(--accent) !important;
        font-size: 0.45rem !important;
        letter-spacing: 0 !important;
        padding: 0 !important;
        opacity: 0.7;
      }
      @keyframes ls-tick {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      /* ════════════════════════════
       LIFESTYLE SUB-NAV + DROPDOWNS
       Same dark bg as cat-nav, same type scale
    ════════════════════════════ */
      .ls-subnav {
        background: var(--ink);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        position: sticky;
        top: calc(var(--header-h) + var(--nav-h));
        z-index: 95;
        overflow: visible;
      }
      .ls-subnav-inner {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--pad-x);
        height: 46px;
        display: flex;
        align-items: center;
        overflow: visible;
        scrollbar-width: none;
      }
      .ls-subnav-inner::-webkit-scrollbar {
        display: none;
      }

      .ls-nav-item {
        position: relative;
        height: 46px;
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
      .ls-nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--sans);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.42);
        white-space: nowrap;
        padding: 0 1.15rem;
        height: 100%;
        border: none;
        border-bottom: 2px solid transparent;
        background: none;
        cursor: pointer;
        transition:
          color 0.2s,
          border-color 0.2s;
        user-select: none;
      }
      .ls-nav-btn:hover {
        color: rgba(255, 255, 255, 0.78);
      }
      .ls-nav-btn.ls-active {
        color: var(--accent-lt);
        border-bottom-color: var(--accent);
      }
      .ls-chev {
        width: 9px;
        height: 9px;
        flex-shrink: 0;
        transition: transform 0.22s var(--ease);
        opacity: 0.45;
      }
      .ls-nav-item.ls-open .ls-chev {
        transform: rotate(180deg);
        opacity: 0.9;
      }
      .ls-nav-item.ls-open > .ls-nav-btn {
        color: rgba(255, 255, 255, 0.9);
      }

      /* DROPDOWN */
      .ls-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 208px;
        background: var(--white);
        border-top: 2px solid var(--accent);
        border-radius: 0 0 3px 3px;
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.16),
          0 2px 8px rgba(0, 0, 0, 0.07);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition:
          opacity 0.22s var(--ease),
          transform 0.22s var(--ease);
        z-index: 300;
      }
      .ls-nav-item.ls-open > .ls-dropdown {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
      }
      .ls-dd-label {
        display: block;
        font-family: var(--sans);
        font-size: 0.52rem;
        font-weight: 600;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--accent);
        padding: 1rem 1.25rem 0.6rem;
        border-bottom: 1px solid var(--rule);
        margin-bottom: 0.25rem;
      }
      .ls-dd-link {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.58rem 1.25rem;
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--ink-soft);
        transition:
          background 0.15s,
          color 0.15s,
          padding-left 0.15s;
      }
      .ls-dd-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--accent);
        flex-shrink: 0;
        opacity: 0.4;
        transition: opacity 0.15s;
      }
      .ls-dd-link:hover {
        background: var(--beige);
        color: var(--ink);
        padding-left: 1.65rem;
      }
      .ls-dd-link:hover .ls-dd-dot {
        opacity: 1;
      }
      .ls-dd-divider {
        height: 1px;
        background: var(--rule);
        margin: 0.25rem 1.25rem;
      }
      .ls-dd-all {
        display: block;
        text-align: center;
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--accent);
        padding: 0.75rem 1.25rem 0.85rem;
        border-top: 1px solid var(--rule);
        margin-top: 0.25rem;
        transition: background 0.15s;
      }
      .ls-dd-all:hover {
        background: var(--beige);
      }

      /* click-outside overlay */
      .ls-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 94;
      }
      .ls-overlay.ls-open {
        display: block;
      }

      /* ════════════════════════════
       SECTION LAYOUT — same paddings as index page-wrap
    ════════════════════════════ */
      .ls-wrap {
        max-width: var(--max-w);
        margin-inline: auto;
        padding-inline: var(--pad-x);
      }
      .ls-sec {
        padding-block: 3.25rem;
      }
      .ls-sec--beige {
        background: var(--beige);
      }
      .ls-sec--white {
        background: var(--white);
      }
      .ls-sec--offwhite {
        background: var(--off-white);
      }
      .ls-sec--dark {
        background: var(--ink);
      }

      /* Section header — mirrors .section-header from index */
      .ls-sec-hdr {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 1.75rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--rule);
      }
      .ls-sec-hdr--dark {
        border-bottom-color: rgba(255, 255, 255, 0.1);
      }
      .ls-kicker {
        display: block;
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 0.25rem;
      }
      .ls-kicker--lt {
        color: var(--accent-lt);
      }
      .ls-sec-title {
        font-family: var(--serif);
        font-size: clamp(1.2rem, 2.2vw, 1.55rem);
        font-weight: 400;
        color: var(--ink);
        line-height: 1.2;
        margin: 0;
      }
      .ls-sec-title--lt {
        color: var(--white);
      }
      .ls-sec-title em {
        font-style: italic;
      }
      .ls-sec-more {
        font-family: var(--sans);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--accent);
        white-space: nowrap;
        flex-shrink: 0;
        transition:
          color 0.2s,
          letter-spacing 0.2s;
      }
      .ls-sec-more--lt {
        color: var(--accent-lt);
      }
      .ls-sec-more:hover {
        color: var(--accent-hover);
        letter-spacing: 0.18em;
      }

      /* ════════════════════════════
       FEATURED CARD — same as index featured-card
    ════════════════════════════ */
      .ls-feat {
        position: relative;
        border-radius: 2px;
        overflow: hidden;
        display: block;
        text-decoration: none;
        background: var(--ink);
      }
      .ls-feat-ph {
        width: 100%;
        height: 480px;
        display: block;
      }
      .ls-feat-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.75;
        transition:
          opacity 0.4s,
          transform 0.6s;
      }
      .ls-feat:hover .ls-feat-img {
        opacity: 0.62;
        transform: scale(1.03);
      }
      .ls-feat-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(10, 8, 6, 0.92) 0%,
          rgba(10, 8, 6, 0.35) 52%,
          rgba(10, 8, 6, 0.04) 100%
        );
        pointer-events: none;
      }
      .ls-feat-badge {
        position: absolute;
        top: 1.25rem;
        left: 1.5rem;
        background: var(--accent);
        color: var(--white);
        font-family: var(--sans);
        font-size: 0.56rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        padding: 0.3rem 0.8rem;
        border-radius: 1px;
      }
      .ls-feat-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2.8rem 2.2rem;
      }
      .ls-feat-tags {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.55rem;
      }
      .ls-feat-tag {
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent-lt);
      }
      .ls-feat-tag + .ls-feat-tag::before {
        content: "·";
        margin-right: 0.5rem;
        color: rgba(255, 255, 255, 0.3);
      }
      .ls-feat-title {
        font-family: var(--serif);
        font-size: clamp(1.6rem, 3.2vw, 2.3rem);
        font-weight: 600;
        color: var(--white);
        line-height: 1.2;
        margin-bottom: 0.55rem;
        transition: color 0.2s;
      }
      .ls-feat:hover .ls-feat-title {
        color: var(--accent-lt);
      }
      .ls-feat-excerpt {
        font-family: var(--sans);
        font-size: 0.875rem;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.75;
        max-width: 520px;
        margin-top: 0.4rem;
        margin-bottom: 0.8rem;
      }
      .ls-feat-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1.4rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .ls-feat-date {
        font-family: var(--sans);
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.38);
        letter-spacing: 0.06em;
      }
      .ls-feat-read {
        font-family: var(--sans);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--accent-lt);
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.3rem;
      }
      .ls-feat-read svg {
        transition: transform 0.2s;
      }
      .ls-feat:hover .ls-feat-read svg {
        transform: translateX(4px);
      }

      /* ════════════════════════════
       GRID CARDS — same as index grid-post-card
    ════════════════════════════ */
      .ls-grid-2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
      }
      .ls-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      @media (max-width: 860px) {
        .ls-grid-3 {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 640px) {
        .ls-grid-2,
        .ls-grid-3 {
          grid-template-columns: 1fr;
        }
      }

      .ls-card {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--rule);
        background: var(--white);
        border-radius: 2px;
        overflow: hidden;
        transition:
          box-shadow 0.3s,
          transform 0.3s;
        text-decoration: none;
      }
      .ls-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .ls-card-img {
        overflow: hidden;
        height: 220px;
        background: var(--beige);
        flex-shrink: 0;
      }
      .ls-card-ph {
        width: 100%;
        height: 100%;
        display: block;
      }
      .ls-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s var(--ease);
      }
      .ls-card:hover .ls-card-img img {
        transform: scale(1.05);
      }
      .ls-card-body {
        padding: 1.2rem 1.25rem 1.3rem;
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .ls-card-tag {
        font-family: var(--sans);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 0.35rem;
      }
      .ls-card-title {
        font-family: var(--serif);
        font-size: clamp(0.92rem, 1.5vw, 1rem);
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
        margin-bottom: 0.5rem;
        transition: color 0.2s;
      }
      .ls-card:hover .ls-card-title {
        color: var(--accent);
      }
      .ls-card-excerpt {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 300;
        color: var(--ink-soft);
        line-height: 1.65;
        flex: 1;
        margin-bottom: 0.6rem;
      }
      .ls-card-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.85rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--beige);
      }
      .ls-card-date {
        font-size: 0.68rem;
        color: var(--ink-muted);
      }
      .ls-card-arrow {
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
        transition: letter-spacing 0.2s;
      }
      .ls-card:hover .ls-card-arrow {
        letter-spacing: 0.16em;
      }

      /* ════════════════════════════
       DARK CARD — wellness / dark sections
    ════════════════════════════ */
      .ls-dark-card {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.03);
        border-radius: 2px;
        overflow: hidden;
        text-decoration: none;
        padding: 1.5rem;
        transition:
          background 0.2s,
          border-color 0.2s,
          transform 0.25s;
        position: relative;
      }
      .ls-dark-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s var(--ease);
      }
      .ls-dark-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        transform: translateY(-2px);
      }
      .ls-dark-card:hover::after {
        transform: scaleX(1);
      }
      .ls-dc-icon {
        font-size: 1.3rem;
        width: 42px;
        height: 42px;
        background: rgba(192, 129, 90, 0.12);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ls-dc-tag {
        font-family: var(--sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--accent-lt);
        opacity: 0.75;
      }
      .ls-dc-title {
        font-family: var(--serif);
        font-size: 1rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.35;
      }
      .ls-dc-desc {
        font-family: var(--sans);
        font-size: 0.78rem;
        font-weight: 300;
        line-height: 1.72;
        color: rgba(255, 255, 255, 0.4);
        flex: 1;
      }
      .ls-dc-link {
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent-lt);
        transition: letter-spacing 0.2s;
      }
      .ls-dark-card:hover .ls-dc-link {
        letter-spacing: 0.26em;
      }

      /* ════════════════════════════
       EDITORIAL PHOTO PANELS — same as index ls-st-panel
    ════════════════════════════ */
      .ls-panels {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      @media (max-width: 820px) {
        .ls-panels {
          grid-template-columns: 1fr;
        }
      }

      .ls-panel {
        position: relative;
        overflow: hidden;
        display: block;
        text-decoration: none;
        height: 370px;
        background: var(--ink);
        border-radius: 2px;
      }
      @media (max-width: 620px) {
        .ls-panel {
          height: 240px;
        }
      }
      .ls-panel-ph {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .ls-panel-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 1s var(--ease);
        will-change: transform;
        filter: brightness(0.72) saturate(0.82);
      }
      .ls-panel:hover .ls-panel-photo {
        transform: scale(1.06);
      }
      .ls-panel-scrim {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            to top,
            rgba(16, 12, 8, 0.94) 0%,
            rgba(16, 12, 8, 0.42) 42%,
            rgba(16, 12, 8, 0.05) 70%,
            transparent 100%
          ),
          linear-gradient(to right, rgba(16, 12, 8, 0.22) 0%, transparent 55%);
        pointer-events: none;
      }
      .ls-panel::before {
        content: "";
        position: absolute;
        top: 12%;
        bottom: 12%;
        left: 0;
        width: 2px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(192, 129, 90, 0.8) 30%,
          rgba(192, 129, 90, 0.8) 70%,
          transparent
        );
        z-index: 4;
        pointer-events: none;
      }
      .ls-panel-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: clamp(1.5rem, 3.5vw, 2.25rem);
        z-index: 3;
      }
      .ls-panel-label {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.75rem;
      }
      .ls-panel-label::before {
        content: "";
        display: block;
        width: 20px;
        height: 1px;
        background: rgba(192, 129, 90, 0.75);
        flex-shrink: 0;
      }
      .ls-panel-label span {
        font-family: var(--sans);
        font-size: 0.5rem;
        font-weight: 600;
        letter-spacing: 0.36em;
        text-transform: uppercase;
        color: rgba(192, 129, 90, 0.85);
      }
      .ls-panel-title {
        font-family: var(--serif);
        font-size: clamp(1.3rem, 2.4vw, 1.8rem);
        font-weight: 400;
        line-height: 1.2;
        color: var(--white);
        margin-bottom: 0.55rem;
      }
      .ls-panel-title em {
        font-style: italic;
        color: rgba(220, 168, 118, 0.95);
      }
      .ls-panel-desc {
        font-family: var(--sans);
        font-size: 0.82rem;
        font-weight: 300;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.48);
        margin-bottom: 1.2rem;
      }
      .ls-panel-rule {
        height: 1px;
        background: rgba(192, 129, 90, 0.18);
        margin-bottom: 1rem;
      }
      .ls-panel-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.66);
        transition:
          color 0.2s,
          gap 0.2s;
      }
      .ls-panel:hover .ls-panel-cta {
        color: rgba(220, 168, 118, 1);
        gap: 0.9rem;
      }
      .ls-panel-cta svg {
        transition: transform 0.2s;
        opacity: 0.6;
        flex-shrink: 0;
      }
      .ls-panel:hover .ls-panel-cta svg {
        transform: translateX(4px);
        opacity: 1;
      }

      /* ════════════════════════════
       HORIZONTAL SCROLL STRIP
    ════════════════════════════ */
      .ls-hscroll {
        display: flex;
        gap: 1.25rem;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
        scrollbar-color: var(--rule) transparent;
      }
      .ls-hscroll::-webkit-scrollbar {
        height: 3px;
      }
      .ls-hscroll::-webkit-scrollbar-thumb {
        background: var(--rule);
      }

      .ls-sc-card {
        flex-shrink: 0;
        width: 270px;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--rule);
        background: var(--white);
        border-radius: 2px;
        overflow: hidden;
        text-decoration: none;
        transition:
          box-shadow 0.3s,
          transform 0.25s;
      }
      .ls-sc-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .ls-sc-img {
        overflow: hidden;
        height: 145px;
        background: var(--beige);
      }
      .ls-sc-ph {
        width: 100%;
        height: 100%;
        display: block;
      }
      .ls-sc-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s var(--ease);
      }
      .ls-sc-card:hover .ls-sc-img img {
        transform: scale(1.06);
      }
      .ls-sc-body {
        padding: 0.9rem 1rem 1rem;
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
      }
      .ls-sc-num {
        font-family: var(--serif);
        font-size: 1.8rem;
        font-weight: 600;
        color: var(--rule);
        line-height: 1;
      }
      .ls-sc-tag {
        font-family: var(--sans);
        font-size: 0.55rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .ls-sc-title {
        font-family: var(--serif);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
        transition: color 0.2s;
      }
      .ls-sc-card:hover .ls-sc-title {
        color: var(--accent);
      }
      .ls-sc-desc {
        font-family: var(--sans);
        font-size: 0.76rem;
        font-weight: 300;
        line-height: 1.65;
        color: var(--ink-soft);
        flex: 1;
      }

      /* ════════════════════════════
       THEMES GRID
    ════════════════════════════ */
      .ls-themes {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1px;
        background: rgba(255, 255, 255, 0.07);
      }
      @media (max-width: 900px) {
        .ls-themes {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 560px) {
        .ls-themes {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .ls-theme {
        background: var(--ink);
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        text-decoration: none;
        transition: background 0.2s;
      }
      .ls-theme:hover {
        background: #222018;
      }
      .ls-theme-num {
        font-family: var(--serif);
        font-size: 2.5rem;
        font-weight: 600;
        color: rgba(192, 129, 90, 0.14);
        line-height: 1;
      }
      .ls-theme-name {
        font-family: var(--sans);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.74);
      }
      .ls-theme-desc {
        font-family: var(--serif);
        font-size: 0.88rem;
        font-style: italic;
        font-weight: 300;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.36);
        flex: 1;
      }
      .ls-theme-count {
        font-family: var(--sans);
        font-size: 0.56rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--accent);
        margin-top: auto;
      }

      /* ════════════════════════════
       PLACEHOLDER SWATCHES
    ════════════════════════════ */
      .ph-sage {
        background: linear-gradient(135deg, #8fa88a, #4a6a4a);
      }
      .ph-blush {
        background: linear-gradient(135deg, #c9a08a, #7a4a34);
      }
      .ph-slate {
        background: linear-gradient(135deg, #7a8a9a, #3a4a5a);
      }
      .ph-warm {
        background: linear-gradient(135deg, #c8a870, #7a5820);
      }
      .ph-stone {
        background: linear-gradient(135deg, #a89880, #5a4830);
      }
      .ph-dusk {
        background: linear-gradient(135deg, #9080a8, #403060);
      }
      .ph-earth {
        background: linear-gradient(135deg, #b09070, #5a4020);
      }
      .ph-gold {
        background: linear-gradient(135deg, #d4b870, #7a5820);
      }
      .ph-moss {
        background: linear-gradient(135deg, #90a880, #406040);
      }
      .ph-rose {
        background: linear-gradient(135deg, #d4a090, #8a4838);
      }
      .ph-ink {
        background: linear-gradient(135deg, #3a2e22, #1a1410);
      }

      @media (max-width: 640px) {
        .ls-page-hero {
          min-height: 240px;
        }
        .ls-page-hero-title {
          font-size: 2rem;
        }
        .ls-feat-ph {
          height: 320px;
        }
      }

      /* Pagination styles are defined globally in styles.css */

      /* ════════════════════════════
       MAGAZINE GRID LAYOUT
       Big card left (2fr) + stacked smalls right (1fr)
       Used across Recent Posts, Wellness, Growth
    ════════════════════════════ */
      .ls-mag-grid {
        display: grid;
        grid-template-columns: 1.65fr 1fr;
        gap: 1.5rem;
        align-items: stretch;
      }

      /* ── Big card ── */
      .ls-mag-big {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 3px;
        min-height: 380px;
        background: var(--ink);
        text-decoration: none;
        box-shadow: 0 4px 24px rgba(0,0,0,0.10);
        transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
      }
      .ls-mag-big:hover {
        box-shadow: 0 10px 40px rgba(0,0,0,0.18);
        transform: translateY(-3px);
      }
      .ls-mag-big-ph {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transition: transform 0.6s var(--ease);
      }
      .ls-mag-big:hover .ls-mag-big-ph {
        transform: scale(1.04);
      }
      .ls-mag-big-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(10,8,6,0.95) 0%,
          rgba(10,8,6,0.45) 50%,
          rgba(10,8,6,0.08) 100%
        );
        pointer-events: none;
      }
      /* Thin accent rule along the left edge — editorial touch */
      .ls-mag-big::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 100%;
        background: var(--accent);
        z-index: 3;
        opacity: 0;
        transition: opacity 0.3s;
      }
      .ls-mag-big:hover::before {
        opacity: 1;
      }
      .ls-mag-big-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 1.75rem 1.75rem;
        z-index: 2;
      }
      .ls-mag-big-tag {
        display: inline-block;
        font-family: var(--sans);
        font-size: 0.54rem;
        font-weight: 700;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: var(--accent-lt);
        margin-bottom: 0.6rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(192,129,90,0.35);
      }
      .ls-mag-big-tag--lt {
        color: var(--accent-lt);
      }
      .ls-mag-big-title {
        font-family: var(--serif);
        font-size: clamp(1.1rem, 2vw, 1.55rem);
        font-weight: 600;
        color: var(--white);
        line-height: 1.25;
        margin-bottom: 0.6rem;
        transition: color 0.2s;
      }
      .ls-mag-big:hover .ls-mag-big-title {
        color: var(--accent-lt);
      }
      .ls-mag-big-excerpt {
        font-family: var(--sans);
        font-size: 0.8rem;
        font-weight: 300;
        color: rgba(255,255,255,0.55);
        line-height: 1.7;
        margin-bottom: 1rem;
      }
      .ls-mag-big-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255,255,255,0.1);
      }
      .ls-mag-big-date {
        font-family: var(--sans);
        font-size: 0.63rem;
        color: rgba(255,255,255,0.34);
        letter-spacing: 0.05em;
      }
      .ls-mag-big-date--lt {
        color: rgba(255,255,255,0.34);
      }
      .ls-mag-big-read {
        font-family: var(--sans);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--accent);
        transition: color 0.2s, letter-spacing 0.2s;
      }
      .ls-mag-big:hover .ls-mag-big-read {
        color: var(--accent-lt);
        letter-spacing: 0.22em;
      }

      /* ── Small cards column ── */
      .ls-mag-smalls {
        display: flex;
        flex-direction: column;
        gap: 1rem;
           }
      .ls-mag-small {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 0;
        background: var(--white);
        border: 1px solid var(--rule);
        border-radius: 2px;
        overflow: hidden;
        text-decoration: none;
        transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease), border-color 0.28s;
        flex: 1;
      }
      .ls-mag-small:hover {
        box-shadow: 0 6px 22px rgba(0,0,0,0.10);
        transform: translateY(-2px);
        border-color: var(--accent-lt);
      }
      .ls-mag-small--dark {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.08);
      }
      .ls-mag-small--dark:hover {
        border-color: var(--accent);
        background: rgba(255,255,255,0.08);
      }
      .ls-mag-small-img {
        position: relative;
        overflow: hidden;
        flex-shrink: 0;
      }
      .ls-mag-small-img .ls-card-ph {
        width: 100%;
        height: 100%;
        min-height: 80px;
        transition: transform 0.45s var(--ease);
      }
      .ls-mag-small:hover .ls-mag-small-img .ls-card-ph {
        transform: scale(1.06);
      }
      .ls-mag-small-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        min-height: 80px;
        font-size: 1.6rem;
        background: rgba(255,255,255,0.04);
      }
      .ls-mag-small-body {
        padding: 0.8rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.3rem;
      }
      .ls-mag-small-body--dark {
        background: transparent;
      }
      .ls-mag-small-tag {
        display: block;
        font-family: var(--sans);
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--accent);
      }
      .ls-mag-small-tag--lt {
        color: var(--accent-lt);
      }
      .ls-mag-small-title {
        font-family: var(--serif);
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--ink);
        line-height: 1.35;
        margin: 0;
        transition: color 0.2s;
      }
      .ls-mag-small-title--lt {
        color: rgba(255,255,255,0.85);
      }
      .ls-mag-small:hover .ls-mag-small-title {
        color: var(--accent);
      }
      .ls-mag-small:hover .ls-mag-small-title--lt {
        color: var(--accent-lt);
      }
      .ls-mag-small-date {
        display: block;
        font-family: var(--sans);
        font-size: 0.58rem;
        color: var(--ink-muted);
        letter-spacing: 0.04em;
      }
      .ls-mag-small-date--lt {
        color: rgba(255,255,255,0.35);
      }

      .ls-mag-big {
  position: relative;
}

.ls-mag-big-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
      /* Responsive collapse */
      @media (max-width: 800px) {
        .ls-mag-grid {
          grid-template-columns: 1fr;
        }
        .ls-mag-big {
          min-height: 300px;
        }
        .ls-mag-smalls {
          flex-direction: row;
          flex-wrap: wrap;
        }
        .ls-mag-small {
          flex: 1 1 calc(50% - 0.5rem);
          grid-template-columns: 80px 1fr;
        }
      }
      @media (max-width: 480px) {
        .ls-mag-small {
          flex: 1 1 100%;
        }
      }


/* ════════════════════════════════════════════
   STUDIO PAGE — Hero, Products, Creations
   (Extracted from studio.html <style> block)
════════════════════════════════════════════ */

                 /* ═══════════════════════════════════════════════
                    STUDIO PAGE — Self-contained styles
                    Tone: Parker Pen — dark, gold, editorial, precise
                 ═══════════════════════════════════════════════ */

                 :root {
                   --gold: #b8924a;
                   --gold-lt: #dfc07a;
                   --gold-dk: #7a5f2a;
                   --ink-deep: #0e0d0b;
                   --parchment: #f5f0e8;
                   --parch-dk: #ede5d5;
                 }

                 body {
                   background: var(--parchment);
                 }

                 /* ── Micro-label used across all sections ── */
                 .st-kicker {
                   display: inline-flex;
                   align-items: center;
                   gap: 0.75rem;
                   font-family: var(--sans);
                   font-size: 0.58rem;
                   font-weight: 600;
                   letter-spacing: 0.3em;
                   text-transform: uppercase;
                   color: var(--gold);
                   margin-bottom: 1.25rem;
                 }
                 .st-kicker::before {
                   content: "";
                   display: block;
                   width: 30px;
                   height: 1px;
                   background: var(--gold);
                   flex-shrink: 0;
                 }
                 .st-kicker--light {
                   color: rgba(255, 255, 255, 0.4);
                 }
                 .st-kicker--light::before {
                   background: rgba(255, 255, 255, 0.25);
                 }
                 .st-kicker--center {
                   justify-content: center;
                 }
                 .st-kicker--center::before {
                   display: none;
                 }

                 /* ── Shared buttons ── */
                 .st-btn {
                   display: inline-block;
                   font-family: var(--sans);
                   font-size: 0.62rem;
                   font-weight: 600;
                   letter-spacing: 0.22em;
                   text-transform: uppercase;
                   padding: 0.9rem 2.2rem;
                   border-radius: 1px;
                   transition:
                     background 0.25s,
                     color 0.25s,
                     transform 0.2s,
                     border-color 0.25s;
                   cursor: pointer;
                   border: 1px solid transparent;
                 }
                 .st-btn--gold {
                   background: var(--gold);
                   color: var(--ink-deep);
                 }
                 .st-btn--gold:hover {
                   background: var(--gold-lt);
                   transform: translateY(-1px);
                 }
                 .st-btn--outline-dark {
                   border-color: rgba(255, 255, 255, 0.28);
                   color: rgba(255, 255, 255, 0.7);
                 }
                 .st-btn--outline-dark:hover {
                   border-color: var(--gold);
                   color: var(--gold-lt);
                 }
                 .st-btn--outline-ink {
                   border-color: var(--ink);
                   color: var(--ink);
                   background: transparent;
                 }
                 .st-btn--outline-ink:hover {
                   background: var(--ink);
                   color: var(--white);
                 }

                 /* ════════════════════════════════════════════
                    HERO — full viewport, cinematic
                 ════════════════════════════════════════════ */
                 .st-hero {
                   position: relative;
                   display: flex;
                   align-items: center;
                   min-height: auto;
                   padding: 1rem 0;
                   overflow: hidden;
                   background: var(--ink-deep);
                 }
                 /* Gold hairline at very top */
                 .st-hero::before {
                   content: "";
                   position: absolute;
                   top: 0;
                   left: 0;
                   right: 0;
                   height: 2px;
                   background: linear-gradient(
                     to right,
                     transparent 0%,
                     var(--gold) 30%,
                     var(--gold) 70%,
                     transparent 100%
                   );
                   z-index: 10;
                 }
                 .st-hero-bg {
                   position: absolute;
                   inset: 0;
                   background: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1800&q=80")
                     center 40% / cover no-repeat;
                   opacity: 0.32;
                 }
                 .st-hero-overlay {
                   position: absolute;
                   inset: 0;
                   background: linear-gradient(
                     170deg,
                     rgba(14, 13, 11, 0.05) 0%,
                     rgba(14, 13, 11, 0.6) 50%,
                     rgba(14, 13, 11, 0.97) 100%
                   );
                 }
                 .st-hero-inner {
                   position: relative;
                   z-index: 5;
                   max-width: var(--max-w);
                   margin-inline: auto;
                   width: 100%;
                   padding: clamp(1.5rem, 3vw, 3rem) var(--pad-x);
                 }
                 .st-hero h1 {
                   font-family: var(--serif);
                   font-size: clamp(2.2rem, 5vw, 4.5rem);
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.04;
                   letter-spacing: -0.015em;
                   margin-bottom: 1rem;
                   max-width: 820px;
                 }
                 .st-hero h1 em {
                   font-style: italic;
                   color: var(--gold-lt);
                 }
                 .st-hero-sub {
                   font-family: var(--sans);
                   font-size: 0.9rem;
                   font-weight: 300;
                   color: rgba(255, 255, 255, 0.48);
                   max-width: 390px;
                   line-height: 1.95;
                   margin-bottom: 1.8rem;
                 }
                 .st-hero-actions {
                   display: flex;
                   align-items: center;
                   gap: 1.25rem;
                   flex-wrap: wrap;
                 }

                 /* Scroll indicator — right edge */
                 .st-hero-scroll {
                   position: absolute;
                   right: var(--pad-x);
                   bottom: 3.5rem;
                   z-index: 5;
                   display: flex;
                   flex-direction: column;
                   align-items: center;
                   gap: 0.6rem;
                 }
                 .st-hero-scroll span {
                   font-family: var(--sans);
                   font-size: 0.5rem;
                   font-weight: 600;
                   letter-spacing: 0.22em;
                   text-transform: uppercase;
                   color: rgba(255, 255, 255, 0.22);
                   writing-mode: vertical-rl;
                 }
                 .st-scroll-bar {
                   width: 1px;
                   height: 56px;
                   background: linear-gradient(to bottom, var(--gold), transparent);
                   animation: stScroll 2.2s ease-in-out infinite;
                 }
                 @keyframes stScroll {
                   0%,
                   100% {
                     opacity: 0.3;
                     transform: scaleY(1);
                     transform-origin: top;
                   }
                   50% {
                     opacity: 1;
                     transform: scaleY(0.45);
                     transform-origin: top;
                   }
                 }

                 /* ════════════════════════════════════════════
                    SECTION 1 — The Travel Edit
                    Dark split — emotional, storytelling
                 ════════════════════════════════════════════ */
                 .st-wander {
                   background: var(--ink-deep);
                   display: grid;
                   grid-template-columns: 1fr 1fr;
                   min-height: auto;
                 }
                 .st-wander-text {
                   display: flex;
                   flex-direction: column;
                   padding: 1.5rem var(--pad-x);
                 }
                 .st-wander h2 {
                   font-family: var(--serif);
                   font-size: clamp(2rem, 3.8vw, 3.5rem);
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.15;
                   letter-spacing: -0.01em;
                   margin-bottom: 0.6rem;
                 }
                 .st-wander h2 em {
                   font-style: italic;
                   color: var(--gold-lt);
                   display: block;
                 }
                 .st-wander-body {
                   font-family: var(--sans);
                   font-size: 0.9rem;
                   font-weight: 300;
                   line-height: 2;
                   color: rgba(255, 255, 255, 0.48);
                   margin-bottom: 0.6rem;
                   max-width: 440px;
                 }
                 .st-wander-pullquote {
                   border-left: 1px solid var(--gold);
                   padding-left: 1.5rem;
                   margin: 2rem 0 2.5rem;
                 }
                 .st-wander-pullquote p {
                   font-family: var(--serif);
                   font-size: 1.1rem;
                   font-style: italic;
                   color: rgba(255, 255, 255, 0.65);
                   line-height: 1.65;
                   margin: 0;
                 }
                 .st-wander-stats {
                   display: flex;
                   gap: 2.5rem;
                   padding-top: 2rem;
                   border-top: 1px solid rgba(255, 255, 255, 0.07);
                   margin-bottom: 0.6rem;
                 }
                 .st-stat {
                   display: flex;
                   flex-direction: column;
                   gap: 0.3rem;
                 }
                 .st-stat-num {
                   font-family: var(--serif);
                   font-size: 2.2rem;
                   font-weight: 400;
                   color: var(--gold);
                   line-height: 1;
                 }
                 .st-stat-lbl {
                   font-family: var(--sans);
                   font-size: 0.56rem;
                   font-weight: 600;
                   letter-spacing: 0.18em;
                   text-transform: uppercase;
                   color: rgba(255, 255, 255, 0.25);
                 }
                 .st-wander-visual {
                   position: relative;
                   overflow: hidden;
                   background: #1a1712;
                   min-height: 600px;
                 }
                 .st-wander-visual img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   opacity: 0.68;
                   display: block;
                   transition:
                     transform 0.9s var(--ease),
                     opacity 0.4s;
                 }
                 .st-wander-visual:hover img {
                   transform: scale(1.04);
                   opacity: 0.8;
                 }
                 .st-img-label {
                   position: absolute;
                   bottom: 1.75rem;
                   left: 1.75rem;
                   font-family: var(--sans);
                   font-size: 0.54rem;
                   font-weight: 600;
                   letter-spacing: 0.18em;
                   text-transform: uppercase;
                   color: rgba(255, 255, 255, 0.38);
                   background: rgba(14, 13, 11, 0.5);
                   padding: 0.3rem 0.7rem;
                   border-left: 2px solid var(--gold);
                 }

                 /* ════════════════════════════════════════════
                    SECTION 2 — THE ARTISAN EDIT
                    Parchment, clean, upscale — 4-card grid
                 ════════════════════════════════════════════ */
                 .st-artisan {
                   background: var(--parchment);
                   padding: 2.5rem 0;
                 }
                 .st-artisan-head {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding: 0 var(--pad-x) 1.5rem;
                   display: grid;
                   grid-template-columns: 1fr 1fr;
                   gap: 1.5rem;
                   align-items: end;
                   border-bottom: 1px solid var(--parch-dk);
                   margin-bottom: 0.6rem;
                 }
                 .st-artisan-head h2 {
                   font-family: var(--serif);
                   font-size: clamp(1.9rem, 3.8vw, 3.2rem);
                   font-weight: 400;
                   color: var(--ink);
                   line-height: 1.15;
                   letter-spacing: -0.01em;
                 }
                 .st-artisan-head h2 em {
                   font-style: italic;
                   color: var(--gold-dk);
                 }
                 .st-artisan-head-right p {
                   font-family: var(--sans);
                   font-size: 0.9rem;
                   font-weight: 300;
                   line-height: 1.9;
                   color: var(--ink-soft);
                   margin-bottom: 0.6rem;
                 }

                 /* 4-card product row */
                 .st-product-row {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding-inline: var(--pad-x);
                   display: grid;
                   grid-template-columns: repeat(4, 1fr);
                   gap: 1.25rem;
                 }
                 .st-card {
                   background: var(--white);
                   display: flex;
                   flex-direction: column;
                   transition:
                     box-shadow 0.3s var(--ease),
                     transform 0.3s var(--ease);
                 }
                 .st-card:hover {
                   box-shadow: 0 16px 48px rgba(0, 0, 0, 0.09);
                   transform: translateY(-2px);
                 }
                 .st-card-img {
                   position: relative;
                   aspect-ratio: 3/4;
                   overflow: hidden;
                   background: var(--parch-dk);
                 }
                 .st-card-img img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   display: block;
                   transition: transform 0.7s var(--ease);
                 }
                 .st-card:hover .st-card-img img {
                   transform: scale(1.07);
                 }
                 .st-card-badge {
                   position: absolute;
                   top: 0.85rem;
                   left: 0.85rem;
                   font-family: var(--sans);
                   font-size: 0.52rem;
                   font-weight: 600;
                   letter-spacing: 0.16em;
                   text-transform: uppercase;
                   background: var(--gold);
                   color: var(--ink-deep);
                   padding: 0.22rem 0.55rem;
                 }
                 .st-card-body {
                   padding: 1.1rem 1rem 1.4rem;
                   flex: 1;
                   display: flex;
                   flex-direction: column;
                   gap: 0.3rem;
                 }
                 .st-card-origin {
                   font-family: var(--sans);
                   font-size: 0.56rem;
                   font-weight: 600;
                   letter-spacing: 0.2em;
                   text-transform: uppercase;
                   color: var(--gold-dk);
                 }
                 .st-card-name {
                   font-family: var(--serif);
                   font-size: 1rem;
                   font-weight: 600;
                   color: var(--ink);
                   line-height: 1.3;
                 }
                 .st-card-desc {
                   font-family: var(--sans);
                   font-size: 0.78rem;
                   font-weight: 300;
                   color: var(--ink-soft);
                   line-height: 1.7;
                   margin: 0.2rem 0 0;
                   flex: 1;
                 }
                 .st-card-footer {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   padding-top: 0.9rem;
                   margin-top: 0.75rem;
                   border-top: 1px solid var(--parch-dk);
                 }
                 .st-card-price {
                   font-family: var(--serif);
                   font-size: 1rem;
                   font-weight: 600;
                   color: var(--ink);
                 }
                 .st-card-btn {
                   font-family: var(--sans);
                   font-size: 0.55rem;
                   font-weight: 600;
                   letter-spacing: 0.16em;
                   text-transform: uppercase;
                   color: var(--white);
                   background: var(--ink);
                   padding: 0.5rem 1rem;
                   border: none;
                   cursor: pointer;
                   transition: background 0.2s;
                 }
                 .st-card-btn:hover {
                   background: var(--gold);
                   color: var(--ink-deep);
                 }

                 /* ════════════════════════════════════════════
                    SECTION 3 — CRAFTED JOURNEYS
                    Full-bleed cinematic — travel meets objects
                 ════════════════════════════════════════════ */
                 .st-journeys {
                   position: relative;
                   min-height: auto;
                   display: flex;
                   align-items: center;
                   overflow: hidden;
                   background: var(--ink-deep);
                 }
                 .st-journeys-bg {
                   position: absolute;
                   inset: 0;
                   background: url("https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=1800&q=80")
                     center / cover no-repeat;
                   opacity: 0.35;
                   transition: transform 0.8s var(--ease);
                 }
                 .st-journeys:hover .st-journeys-bg {
                   transform: scale(1.02);
                 }
                 .st-journeys-overlay {
                   position: absolute;
                   inset: 0;
                   background: linear-gradient(
                     105deg,
                     rgba(14, 13, 11, 0.94) 0%,
                     rgba(14, 13, 11, 0.68) 55%,
                     rgba(14, 13, 11, 0.2) 100%
                   );
                 }
                 .st-journeys-inner {
                   position: relative;
                   z-index: 2;
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding: 1.5rem var(--pad-x);
                   display: grid;
                   grid-template-columns: 1fr 1fr;
                   gap: 2rem;
                   align-items: center;
                   width: 100%;
                 }
                 .st-journeys h2 {
                   font-family: var(--serif);
                   font-size: clamp(1.9rem, 4vw, 3.5rem);
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.12;
                   letter-spacing: -0.01em;
                   margin-bottom: 1.5rem;
                 }
                 .st-journeys h2 em {
                   font-style: italic;
                   color: var(--gold-lt);
                 }
                 .st-journeys-body {
                   font-family: var(--sans);
                   font-size: 0.9rem;
                   font-weight: 300;
                   line-height: 2;
                   color: rgba(255, 255, 255, 0.48);
                   margin-bottom: 1.5rem;
                 }
                 .st-journey-list {
                   display: flex;
                   flex-direction: column;
                 }
                 .st-journey-item {
                   display: grid;
                   grid-template-columns: 36px 1fr;
                   gap: 1.25rem;
                   padding: 1.5rem 0;
                   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                   align-items: start;
                 }
                 .st-journey-item:first-child {
                   border-top: 1px solid rgba(255, 255, 255, 0.06);
                 }
                 .st-journey-num {
                   font-family: var(--serif);
                   font-size: 0.78rem;
                   color: var(--gold);
                   opacity: 0.65;
                   padding-top: 0.15rem;
                 }
                 .st-journey-item h4 {
                   font-family: var(--sans);
                   font-size: 0.7rem;
                   font-weight: 600;
                   letter-spacing: 0.12em;
                   text-transform: uppercase;
                   color: var(--white);
                   margin-bottom: 0.35rem;
                 }
                 .st-journey-item p {
                   font-family: var(--sans);
                   font-size: 0.82rem;
                   font-weight: 300;
                   line-height: 1.75;
                   color: rgba(255, 255, 255, 0.38);
                   margin: 0;
                 }

                 /* ════════════════════════════════════════════
                    SECTION 4 — ARTFUL LIVING CO.
                    White bg — asymmetric editorial photo grid
                 ════════════════════════════════════════════ */
                 .st-artful {
                   background: var(--white);
                   padding: 1.5rem 0;
                 }
                 .st-artful-inner {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding-inline: var(--pad-x);
                 }
                 .st-artful-top {
                   text-align: center;
                   max-width: 600px;
                   margin-inline: auto;
                   margin-bottom: 1.5rem;
                 }
                 .st-artful-top h2 {
                   font-family: var(--serif);
                   font-size: clamp(1.9rem, 3.8vw, 3rem);
                   font-weight: 400;
                   color: var(--ink);
                   line-height: 1.2;
                   letter-spacing: -0.01em;
                   margin-bottom: 1rem;
                 }
                 .st-artful-top h2 em {
                   font-style: italic;
                   color: var(--gold-dk);
                 }
                 .st-artful-top p {
                   font-family: var(--sans);
                   font-size: 0.9rem;
                   font-weight: 300;
                   line-height: 1.9;
                   color: var(--ink-soft);
                 }

                 /* Asymmetric 3-col grid — Parker-style */
                 .st-artful-grid {
                   display: grid;
                   grid-template-columns: 1.4fr 1fr 1fr;
                   grid-template-rows: 1fr 1fr;
                   gap: 1rem;
                 }
                 .st-artful-cell {
                   position: relative;
                   overflow: hidden;
                   background: var(--parch-dk);
                 }
                 .st-artful-cell img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   display: block;
                   transition:
                     transform 0.7s var(--ease),
                     opacity 0.4s;
                 }
                 .st-artful-cell:hover img {
                   transform: scale(1.05);
                 }
                 .st-artful-cell--tall {
                   grid-row: 1 / 3;
                   min-height: 580px;
                 }
                 .st-artful-cell--short {
                   min-height: 260px;
                 }
                 .st-artful-cell-overlay {
                   position: absolute;
                   inset: 0;
                   background: linear-gradient(
                     to top,
                     rgba(14, 13, 11, 0.72) 0%,
                     transparent 55%
                   );
                   pointer-events: none;
                 }
                 .st-artful-cell-text {
                   position: absolute;
                   bottom: 1.5rem;
                   left: 1.5rem;
                   z-index: 2;
                 }
                 .st-artful-cell-cat {
                   display: block;
                   font-family: var(--sans);
                   font-size: 0.52rem;
                   font-weight: 600;
                   letter-spacing: 0.22em;
                   text-transform: uppercase;
                   color: var(--gold-lt);
                   margin-bottom: 0.35rem;
                 }
                 .st-artful-cell-title {
                   font-family: var(--serif);
                   font-size: 1.1rem;
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.3;
                 }
                 .st-artful-cell--tall .st-artful-cell-title {
                   font-size: 1.45rem;
                 }
                 .st-artful-cta {
                   text-align: center;
                   margin-top: 3.5rem;
                 }

                 /* ════════════════════════════════════════════
                    SECTION 5 — WANDER ESSENTIALS
                    Dark, product-forward — 3-card shelf
                 ════════════════════════════════════════════ */
                 .st-essentials {
                   background: var(--ink-deep);
                   padding: 1.5rem 0;
                 }
                 .st-essentials-inner {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding-inline: var(--pad-x);
                 }
                 .st-essentials-top {
                   display: flex;
                   align-items: flex-end;
                   justify-content: space-between;
                   gap: 3rem;
                   margin-bottom: 1.5rem;
                   padding-bottom: 1.5rem;
                   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                 }
                 .st-essentials-top h2 {
                   font-family: var(--serif);
                   font-size: clamp(1.9rem, 3.8vw, 3rem);
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.15;
                   letter-spacing: -0.01em;
                 }
                 .st-essentials-top h2 em {
                   font-style: italic;
                   color: var(--gold-lt);
                 }
                 .st-essentials-top p {
                   font-family: var(--sans);
                   font-size: 0.88rem;
                   font-weight: 300;
                   color: rgba(255, 255, 255, 0.38);
                   line-height: 1.8;
                   max-width: 340px;
                 }

                 .st-essentials-shelf {
                   display: grid;
                   grid-template-columns: repeat(3, 1fr);
                   gap: 1.5rem;
                 }
                 .st-ess-card {
                   background: rgba(255, 255, 255, 0.04);
                   border: 1px solid rgba(255, 255, 255, 0.07);
                   display: flex;
                   flex-direction: column;
                   transition:
                     border-color 0.3s,
                     background 0.3s;
                 }
                 .st-ess-card:hover {
                   border-color: var(--gold);
                   background: rgba(184, 146, 74, 0.05);
                 }
                 .st-ess-card-img {
                   aspect-ratio: 4/3;
                   overflow: hidden;
                   background: rgba(255, 255, 255, 0.06);
                 }
                 .st-ess-card-img img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   display: block;
                   opacity: 0.78;
                   transition:
                     transform 0.6s var(--ease),
                     opacity 0.3s;
                 }
                 .st-ess-card:hover .st-ess-card-img img {
                   transform: scale(1.05);
                   opacity: 0.95;
                 }
                 .st-ess-card-body {
                   padding: 1.25rem 1.25rem 1.5rem;
                   flex: 1;
                   display: flex;
                   flex-direction: column;
                 }
                 .st-ess-card-cat {
                   font-family: var(--sans);
                   font-size: 0.54rem;
                   font-weight: 600;
                   letter-spacing: 0.22em;
                   text-transform: uppercase;
                   color: var(--gold);
                   margin-bottom: 0.5rem;
                 }
                 .st-ess-card-name {
                   font-family: var(--serif);
                   font-size: 1.05rem;
                   font-weight: 600;
                   color: var(--white);
                   line-height: 1.3;
                   margin-bottom: 0.5rem;
                 }
                 .st-ess-card-desc {
                   font-family: var(--sans);
                   font-size: 0.8rem;
                   font-weight: 300;
                   color: rgba(255, 255, 255, 0.38);
                   line-height: 1.75;
                   flex: 1;
                   margin-bottom: 1.25rem;
                 }
                 .st-ess-card-footer {
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
                   padding-top: 1rem;
                   border-top: 1px solid rgba(255, 255, 255, 0.06);
                 }
                 .st-ess-price {
                   font-family: var(--serif);
                   font-size: 1.05rem;
                   font-weight: 400;
                   color: var(--gold-lt);
                 }
                 .st-ess-btn {
                   font-family: var(--sans);
                   font-size: 0.55rem;
                   font-weight: 600;
                   letter-spacing: 0.16em;
                   text-transform: uppercase;
                   background: var(--gold);
                   color: var(--ink-deep);
                   padding: 0.55rem 1.1rem;
                   border: none;
                   cursor: pointer;
                   transition: background 0.2s;
                 }
                 .st-ess-btn:hover {
                   background: var(--gold-lt);
                 }

                 /* ════════════════════════════════════════════
                    SECTION 6 — THE CURATED CRAFT
                    Manifesto + pillars — boutique close
                 ════════════════════════════════════════════ */
                 .st-curated {
                   background: var(--parchment);
                   padding: 1.5rem 0 0;
                 }
                 .st-curated-inner {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding-inline: var(--pad-x);
                 }

                 .st-manifesto {
                   text-align: center;
                   max-width: 700px;
                   margin-inline: auto;
                   padding-bottom: 1.5rem;
                   border-bottom: 1px solid var(--parch-dk);
                 }
                 .st-manifesto h2 {
                   font-family: var(--serif);
                   font-size: clamp(1.9rem, 3.8vw, 3.2rem);
                   font-weight: 400;
                   color: var(--ink);
                   line-height: 1.2;
                   letter-spacing: -0.01em;
                   margin-bottom: 1.75rem;
                 }
                 .st-manifesto h2 em {
                   font-style: italic;
                   color: var(--gold-dk);
                 }
                 .st-manifesto-body {
                   font-family: var(--sans);
                   font-size: 0.95rem;
                   font-weight: 300;
                   line-height: 2;
                   color: var(--ink-soft);
                   margin-bottom: 2.5rem;
                 }
                 .st-pillars {
                   display: grid;
                   grid-template-columns: repeat(3, 1fr);
                   gap: 0;
                   margin-top: 3.5rem;
                 }
                 .st-pillar {
                   padding: 2.5rem 3rem;
                   border-right: 1px solid var(--parch-dk);
                 }
                 .st-pillar:last-child {
                   border-right: none;
                 }
                 .st-pillar-num {
                   display: block;
                   font-family: var(--serif);
                   font-size: 2rem;
                   font-weight: 400;
                   color: var(--gold);
                   opacity: 0.5;
                   margin-bottom: 1.25rem;
                 }
                 .st-pillar h4 {
                   font-family: var(--sans);
                   font-size: 0.68rem;
                   font-weight: 600;
                   letter-spacing: 0.16em;
                   text-transform: uppercase;
                   color: var(--ink);
                   margin-bottom: 0.85rem;
                 }
                 .st-pillar p {
                   font-family: var(--sans);
                   font-size: 0.85rem;
                   font-weight: 300;
                   line-height: 1.85;
                   color: var(--ink-soft);
                   margin: 0;
                 }

                 /* Gold rule at bottom of section */
                 .st-curated-rule {
                   height: 2px;
                   background: linear-gradient(
                     to right,
                     transparent,
                     var(--gold),
                     transparent
                   );
                   margin-top: 0;
                 }

                 /* ════════════════════════════════════════════
                    NEW — CREATIONS SECTION (PRIMARY)
                    Responsive image-first grid
                 ════════════════════════════════════════════ */
                 .st-creations {
                   background: #ede8df; /* warm beige — mirrors ls-sec--beige / Coming Soon */
                   padding: 5rem 0;
                   border-bottom: 1px solid rgba(26, 20, 14, 0.07);
                 }
                 .st-creations-inner {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding-inline: var(--pad-x);
                 }
                 .st-creations-head {
                   display: grid;
                   grid-template-columns: 1fr 1fr;
                   gap: 2rem;
                   align-items: end;
                   padding-bottom: 2.5rem;
                   border-bottom: 1px solid rgba(26, 20, 14, 0.1);
                   margin-bottom: 3rem;
                 }
                 .st-creations-head h2 {
                   font-family: var(--serif);
                   font-size: clamp(2rem, 3.8vw, 3.2rem);
                   font-weight: 400;
                   color: #1a1410;
                   line-height: 1.15;
                   letter-spacing: -0.01em;
                 }
                 .st-creations-head h2 em {
                   font-style: italic;
                   color: var(--gold-dk);
                 }
                 /* Right column: flex column so button always aligns to bottom */
                 .st-creations-head-right {
                   display: flex;
                   flex-direction: column;
                   justify-content: flex-end;
                   align-items: flex-start;
                   gap: 1rem;
                 }
                 .st-creations-head-right p {
                   font-family: var(--sans);
                   font-size: 0.88rem;
                   font-weight: 300;
                   line-height: 1.95;
                   color: #5a5248;
                   margin-bottom: 0;
                 }

                 /* Creation grid: 4-col desktop, 2 tablet, 1 mobile */
                 .st-creations-grid {
                   display: grid;
                   grid-template-columns: repeat(4, 1fr);
                   gap: 1.5rem;
                 }

                 /* ROW SYSTEM */
                 .st-creations-rows {
                   display: flex;
                   flex-direction: column;
                   gap: 2rem;
                 }

                 /* Row wrapper with arrows */
                 .st-creation-row-wrap {
                   position: relative;
                   display: flex;
                   align-items: center;
                 }

                 /* Scroll row */
                 .st-creation-row {
                   display: flex;
                   gap: 1.5rem;
                   overflow-x: auto;
                   scroll-behavior: smooth;
                   width: 100%;
                   padding: 0.5rem 0;
                 }

                 /* Hide scrollbar */
                 .st-creation-row::-webkit-scrollbar {
                   display: none;
                 }
                 .st-creation-row {
                   scrollbar-width: none;
                 }

                 /* Cards: fixed width so they overflow the row and enable scrolling.
                    5 cards visible on desktop (row ~1200px wide, each card ~210px). */
                 .st-creation-card {
                   flex: 0 0 210px;
                 }

                 @media (max-width: 1024px) {
                   .st-creation-card {
                     flex: 0 0 180px;
                   }
                 }

                 @media (max-width: 620px) {
                   .st-creation-card {
                     flex: 0 0 140px;
                   }
                   .st-creation-row {
                     gap: 0.8rem;
                   }
                   .st-creation-card-img {
                     aspect-ratio: 1 / 1.2;
                   }
                 }

                 /* Scroll arrows — left/right of each artwork row */
                 .st-row-btn {
                   width: 36px;
                   height: 36px;
                   flex-shrink: 0;
                   display: flex;
                   align-items: center;
                   justify-content: center;
                   background: #f5f2ec;
                   border: 1px solid rgba(26, 20, 14, 0.14);
                   border-radius: 50%;
                   cursor: pointer;
                   font-size: 1.25rem;
                   line-height: 1;
                   color: var(--ink);
                   transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
                   z-index: 2;
                 }
                 .st-row-btn:hover {
                   background: var(--gold);
                   border-color: var(--gold);
                   color: var(--white);
                   transform: scale(1.08);
                 }

                 /* Creation card — image-first, hover reveals title */
                 .st-creation-card {
                   position: relative;
                   overflow: hidden;
                   background: #d9d2c6;
                   cursor: pointer;
                 }
                 .st-creation-card-img {
                   aspect-ratio: 1/1.2;
                   overflow: hidden;
                   display: block;
                   width: 100%;
                 }
                 .st-creation-card-img img {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                   display: block;
                   transition: transform 0.75s var(--ease);
                   transform-origin: center;
                 }
                 .st-creation-card:hover .st-creation-card-img img {
                   transform: scale(1.07);
                 }

                 /* Overlay — slides up on hover */
                 .st-creation-card-overlay {
                   position: absolute;
                   inset: 0;
                   background: linear-gradient(
                     to top,
                     rgba(14, 13, 11, 0.88) 0%,
                     rgba(14, 13, 11, 0.2) 50%,
                     transparent 100%
                   );
                   opacity: 0;
                   transition: opacity 0.4s var(--ease);
                   pointer-events: none;
                 }
                 .st-creation-card:hover .st-creation-card-overlay {
                   opacity: 1;
                 }

                 /* Text — revealed on hover */
                 .st-creation-card-text {
                   position: absolute;
                   bottom: 0;
                   left: 0;
                   right: 0;
                   padding: 1.5rem 1.25rem;
                   transform: translateY(12px);
                   opacity: 0;
                   transition:
                     transform 0.4s var(--ease),
                     opacity 0.4s var(--ease);
                   pointer-events: none;
                   z-index: 2;
                 }
                 .st-creation-card:hover .st-creation-card-text {
                   transform: translateY(0);
                   opacity: 1;
                 }
                 .st-creation-card-medium {
                   display: block;
                   font-family: var(--sans);
                   font-size: 0.5rem;
                   font-weight: 600;
                   letter-spacing: 0.24em;
                   text-transform: uppercase;
                   color: var(--gold-lt);
                   margin-bottom: 0.4rem;
                 }
                 .st-creation-card-title {
                   font-family: var(--serif);
                   font-size: 1rem;
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.35;
                 }

                 /* ════════════════════════════════════════════
                    CREATIVE PROCESS — WARM PREMIUM (Aesop style)
                  ════════════════════════════════════════════ */

                  /* Section */
                  .st-process {
                    background: #ffffff; /* crisp white — former Creations bg */
                    padding: 5rem 0 6rem;
                    border-top: 1px solid rgba(26, 20, 14, 0.07);
                  }

                  /* Container */
                  .st-process-inner {
                    max-width: var(--max-w);
                    margin-inline: auto;
                    padding-inline: var(--pad-x);
                  }

                  /* Top */
                  .st-process-top {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 4rem;
                    align-items: end;
                    margin-bottom: 3.5rem;
                  }

                  /* Heading */
                  .st-process-top h2 {
                    font-family: var(--serif);
                    font-size: clamp(2rem, 3.5vw, 3.2rem);
                    font-weight: 400;
                    color: #1a1714;
                    line-height: 1.15;
                  }

                  .st-process-top h2 em {
                    font-style: italic;
                    color: #c9a84c;
                  }

                  /* Right content */
                  .st-process-head-right {
                    display: flex;
                    flex-direction: column;
                    gap: 1.2rem;
                  }

                  .st-process-intro {
                    max-width: 420px;
                    font-family: var(--sans);
                    font-size: 0.92rem;
                    font-weight: 300;
                    color: #6a6258;
                    line-height: 1.9;
                  }

                  /* Grid */
                  .st-process-items {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 28px;
                  }

                  /* Card */
                  .st-process-item {
                    position: relative;
                    background: #faf8f4;
                    border: 1px solid rgba(26, 20, 14, 0.07);
                    padding: 2.2rem 2rem;
                    border-radius: 6px;
                    display: grid;
                    grid-template-columns: 60px 1fr;
                    gap: 1.6rem;
                    transition: all 0.35s ease;
                  }

                  /* subtle warm glow */
                  .st-process-item::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: radial-gradient(
                      circle at top right,
                      rgba(201,168,76,0.06),
                      transparent 60%
                    );
                    opacity: 0;
                    transition: opacity 0.35s ease;
                  }

                  /* hover */
                  .st-process-item:hover {
                    transform: translateY(-5px);
                    border-color: rgba(201,168,76,0.3);
                    box-shadow: 0 12px 30px rgba(26, 20, 14, 0.07);
                  }

                  .st-process-item:hover::after {
                    opacity: 1;
                  }

                  /* Number box */
                  .st-process-num {
                    width: 60px;
                    height: 60px;
                    border: 1px solid rgba(201,168,76,0.28);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f5f2ec;
                  }

                  .st-process-num span {
                    font-family: var(--serif);
                    font-size: 1.1rem;
                    color: #c9a84c;
                  }

                  /* Label */
                  .st-process-item-label {
                    font-family: var(--sans);
                    font-size: 0.62rem;
                    font-weight: 600;
                    letter-spacing: 0.22em;
                    text-transform: uppercase;
                    color: #c9a84c;
                    margin-bottom: 0.5rem;
                  }

                  /* Title */
                  .st-process-item h4 {
                    font-family: var(--serif);
                    font-size: 1.15rem;
                    font-weight: 400;
                    color: #1a1714;
                    margin-bottom: 0.5rem;
                  }

                  /* Text */
                  .st-process-item p {
                    font-family: var(--sans);
                    font-size: 0.85rem;
                    font-weight: 300;
                    line-height: 1.8;
                    color: #6a6258;
                  }

                  /* Responsive */
                  @media (max-width: 900px) {
                    .st-process-top {
                      grid-template-columns: 1fr;
                      gap: 2rem;
                    }

                    .st-process-items {
                      grid-template-columns: 1fr;
                      gap: 20px;
                    }
                  }

                 /* ════════════════════════════════════════════
                    NEW — COMING SOON SECTIONS
                    Collections · Shop · Ideas
                 ════════════════════════════════════════════ */
                 .st-coming-row {
                   background: var(--ink-deep);
                   padding: 5rem 0;
                   position: relative;
                   overflow: hidden;
                 }
                 .st-coming-row::before {
                   display: none; /* hairline was designed for dark bg; beige bg handled via inline style override */
                 }
                 .st-coming-inner {
                   max-width: var(--max-w);
                   margin-inline: auto;
                   padding-inline: var(--pad-x);
                   display: grid;
                   grid-template-columns: repeat(3, 1fr);
                   gap: 1px;
                   background: transparent;
                 }
                 .st-coming-tile {
                   background: var(--ink-deep);
                   padding: 3rem 2.5rem 3.5rem;
                   position: relative;
                   display: flex;
                   flex-direction: column;
                   transition: background 0.3s;
                 }
                 .st-coming-tile:hover {
                   background: rgba(184, 146, 74, 0.04);
                 }
                 .st-coming-tile-icon {
                   width: 40px;
                   height: 40px;
                   margin-bottom: 2rem;
                   opacity: 0.22;
                 }
                 .st-coming-tile-icon svg {
                   width: 100%;
                   height: 100%;
                 }
                 .st-coming-tag {
                   display: inline-flex;
                   align-items: center;
                   gap: 0.5rem;
                   font-family: var(--sans);
                   font-size: 0.48rem;
                   font-weight: 600;
                   letter-spacing: 0.28em;
                   text-transform: uppercase;
                   color: var(--gold);
                   margin-bottom: 1.25rem;
                 }
                 .st-coming-tag::before {
                   content: "";
                   width: 18px;
                   height: 1px;
                   background: var(--gold);
                   opacity: 0.6;
                   flex-shrink: 0;
                 }
                 .st-coming-tile h3 {
                   font-family: var(--serif);
                   font-size: clamp(1.4rem, 2.2vw, 2rem);
                   font-weight: 400;
                   color: var(--white);
                   line-height: 1.2;
                   letter-spacing: -0.01em;
                   margin-bottom: 1rem;
                 }
                 .st-coming-tile h3 em {
                   font-style: italic;
                   color: var(--gold-lt);
                 }
                 .st-coming-tile p {
                   font-family: var(--sans);
                   font-size: 0.84rem;
                   font-weight: 300;
                   line-height: 1.9;
                   color: rgba(255, 255, 255, 0.35);
                   margin: 0 0 2.5rem;
                   flex: 1;
                 }
                 .st-coming-pill {
                   display: inline-flex;
                   align-items: center;
                   gap: 0.6rem;
                   font-family: var(--sans);
                   font-size: 0.5rem;
                   font-weight: 600;
                   letter-spacing: 0.22em;
                   text-transform: uppercase;
                   color: rgba(255, 255, 255, 0.2);
                   border: 1px solid rgba(255, 255, 255, 0.1);
                   padding: 0.55rem 1.1rem;
                   border-radius: 1px;
                   width: fit-content;
                 }
                 .st-coming-pill::before {
                   content: "";
                   width: 5px;
                   height: 5px;
                   border-radius: 50%;
                   background: var(--gold);
                   opacity: 0.5;
                   flex-shrink: 0;
                 }

                 /* ════════════════════════════════════════════
                    RESPONSIVE
                 ════════════════════════════════════════════ */
                 @media (max-width: 1024px) {
                   .st-product-row {
                     grid-template-columns: repeat(2, 1fr);
                   }
                   .st-artful-grid {
                     grid-template-columns: 1fr 1fr;
                   }
                   .st-artful-cell--tall {
                     grid-row: auto;
                     min-height: 340px;
                   }
                   .st-artful-cell--short {
                     min-height: 200px;
                   }
                   /* New sections */
                   .st-creations-grid {
                     grid-template-columns: repeat(3, 1fr);
                   }
                   .st-coming-inner {
                     grid-template-columns: 1fr;
                     gap: 1px;
                   }
                 }
                 @media (max-width: 820px) {
                   .st-wander {
                     grid-template-columns: 1fr;
                   }
                   .st-wander-visual {
                     min-height: 420px;
                     order: -1;
                   }
                   .st-wander-text {
                     padding: 4rem var(--pad-x);
                   }
                   .st-artisan-head {
                     grid-template-columns: 1fr;
                     gap: 1.5rem;
                   }
                   .st-journeys-inner {
                     grid-template-columns: 1fr;
                     gap: 3rem;
                   }
                   .st-essentials-top {
                     flex-direction: column;
                     align-items: flex-start;
                     gap: 1rem;
                   }
                   .st-pillars {
                     grid-template-columns: 1fr;
                   }
                   .st-pillar {
                     border-right: none;
                     border-bottom: 1px solid var(--parch-dk);
                     padding: 2.5rem 0;
                   }
                   .st-pillar:last-child {
                     border-bottom: none;
                   }
                   /* New sections */
                   .st-creations-head {
                     grid-template-columns: 1fr;
                     gap: 1.5rem;
                   }
                   .st-creations-grid {
                     grid-template-columns: repeat(2, 1fr);
                   }
                   .st-process-top {
                     grid-template-columns: 1fr;
                     gap: 2rem;
                     align-items: end;
                   }
                   .st-process-items {
                     grid-template-columns: 1fr;
                   }
                   .st-coming-inner {
                     grid-template-columns: 1fr;
                   }
                 }
                 @media (max-width: 620px) {
                   .st-hero h1 {
                     font-size: 2.8rem;
                   }
                   .st-hero-inner {
                     padding: 0 var(--pad-x) 2rem;
                   }
                   .st-hero {
                     height: auto;
                     min-height: 480px;
                   }
                   .st-hero-scroll {
                     display: none;
                   }
                   .st-product-row {
                     grid-template-columns: 1fr;
                   }
                   .st-essentials-shelf {
                     grid-template-columns: 1fr;
                   }
                   .st-artful-grid {
                     grid-template-columns: 1fr;
                   }
                   .st-artful-cell--tall,
                   .st-artful-cell--short {
                     min-height: 260px;
                   }
                   .st-notify-form {
                     flex-direction: column;
                   }
                   .st-notify-input {
                     border-right: 1px solid rgba(255, 255, 255, 0.14);
                   }
                   .st-wander-stats {
                     gap: 1.5rem;
                   }
                   /* New sections */
                   .st-creations-grid {
                     grid-template-columns: 1fr;
                   }
                   .st-coming-tile {
                     padding: 2.5rem 1.5rem;
                   }

                   .st-process-head-right {
                     display: flex;
                     flex-direction: column;
                     align-items: flex-start;
                     max-width: 420px;
                     margin-bottom: 1rem;
                   }
                   .st-process-head-right .st-btn {
                     padding: 0.95rem 2.4rem;
                   }
                 }
    


/* ════════════════════════════════════════════
   MOBILE OVERFLOW FIXES
   Cards that were overflowing on small screens
════════════════════════════════════════════ */

/* Grid cards: single column on mobile, no overflow */
@media (max-width: 620px) {
  /* Index hero */
  .hero { min-height: 460px; }
  .hero-title { font-size: 2.2rem; }
  .hero-dots { display: none; }
  .featured-card-img { height: 300px; }

  /* Index grid: stack to 1 col, prevent overflow */
  .posts-grid {
    grid-template-columns: 1fr;
  }
  .grid-post-card {
    min-width: 0;
    max-width: 100%;
  }

  /* Index LS-ST panels: shorter on mobile */
  .ls-st-panel { height: 250px; }
  .ls-st-inner { grid-template-columns: 1fr; }

  /* Lifestyle */
  .ls-page-hero { min-height: 240px; }
  .ls-feat-ph   { height: 480px; }
  .ls-grid-2,
  .ls-grid-3 { grid-template-columns: 1fr; }
  .ls-themes { grid-template-columns: repeat(2, 1fr); }
  .ls-panels { grid-template-columns: 1fr; }
  .ls-panel  { height: 240px; }

  /* Studio: stack all grids */
  .st-hero          { min-height: 480px; }
  .st-hero h1       { font-size: 2.8rem; }
  .st-hero-scroll   { display: none; }
  .st-product-row   { grid-template-columns: 1fr; }
  .st-essentials-shelf { grid-template-columns: 1fr; }
  .st-artful-grid   { grid-template-columns: 1fr; }
  .st-artful-cell--tall,
  .st-artful-cell--short { min-height: 260px; }
  .st-wander        { grid-template-columns: 1fr; }
  .st-wander-visual { min-height: 320px; order: -1; }
  .st-wander-stats  { gap: 1.5rem; flex-wrap: wrap; }
  .st-coming-inner  { grid-template-columns: 1fr; }
  .st-coming-tile   { padding: 2rem 1.25rem; }
  /* Artwork cards: show ~3 at once on mobile */
  .st-creation-card { flex: 0 0 calc(33.33% - 0.6rem); }
  .st-creation-row  { gap: 0.75rem; }

  /* Travel map */
  .dest-map-filters   { flex-direction: column; gap: 0.6rem; }
  .dest-popular-grid  { grid-template-columns: 1fr 1fr; }
  .dest-continents-grid { grid-template-columns: 1fr; }
  .dest-continent-cell { border-right: none; }
  /* Smaller polaroid pins on mobile */
  .dest-pin-photo   { width: 48px; padding: 2px 2px 11px; }
  .dest-pin-img-area { height: 36px; }
  .dest-pin-label   { font-size: 0.28rem; height: 11px; }

  .ls-feat-body {
  padding: 1.5rem 1.25rem;
  }
.ls-feat-title {
  font-size: 1.4rem;
  }
.ls-feat-excerpt {
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
  }
.ls-feat-meta {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  }
}

@media (max-width: 480px) {
  .dest-popular-grid { grid-template-columns: 1fr; }
  .ls-themes { grid-template-columns: 1fr 1fr; }
  /* Artwork: 2 cards on very small screens */
  .st-creation-card { flex: 0 0 calc(50% - 0.5rem); }
}

@media (max-width: 820px) {
  /* LS-ST panels: single col at tablet */
  .ls-st-inner { grid-template-columns: 1fr; }
  .ls-panels   { grid-template-columns: 1fr; }
  .ls-grid-3   { grid-template-columns: repeat(2, 1fr); }
  .ls-themes   { grid-template-columns: repeat(3, 1fr); }
  /* Studio split sections */
  .st-artisan-head    { grid-template-columns: 1fr; }
  .st-journeys-inner  { grid-template-columns: 1fr; }
  .st-essentials-top  { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .st-pillars         { grid-template-columns: 1fr; }
  .st-pillar          { border-right: none; border-bottom: 1px solid var(--parch-dk); padding: 2rem 0; }
  .st-pillar:last-child { border-bottom: none; }
  .st-creations-head  { grid-template-columns: 1fr; gap: 1.5rem; }
  .st-process-top     { grid-template-columns: 1fr; gap: 2rem; }
  .st-process-items   { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   PAGINATION — button-style (postsGrid + lsPostsGrid)
   These styles were previously only in inline <style>
   blocks and got dropped during extraction. Added here.
════════════════════════════════════════════ */
.pagination-wrap {
  padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Lifestyle page centers its pagination —
   Both the nav element and its .pagination-wrap parent need centering */
#lsPostsPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Center lifestyle pagination — nav carries .pagination-wrap so
   padding/margin are already inherited; only centering needed here */
.pagination-wrap--center {
  justify-content: center;
}









.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  text-decoration: none;
  line-height: 1;
}

.page-btn:hover:not(:disabled):not(.page-btn--active) {
  border-color: var(--ink-muted);
  color: var(--ink);
}

.page-btn--active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  cursor: default;
}

.page-btn--next {
  padding: 0 0.9rem;
  gap: 0.3rem;
}

.page-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.page-ellipsis {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-muted);
  padding: 0 0.2rem;
  user-select: none;
}


    /* ═══════════════════════════════════════════════════════════
       INDEX PAGE — 3 TEASER SECTIONS + LAYOUT FIXES
       Travel · Lifestyle · Studio
    ═══════════════════════════════════════════════════════════ */

      /* ── Fix: ensure page-wrap uses grid so main doesn't collapse ── */
      .page-wrap {
        display: grid !important;
        grid-template-columns: 1fr 300px !important;
        gap: 2.5rem;
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.75rem 2rem;
        align-items: start;
        box-sizing: border-box;
      }
      .post-list {
        min-width: 0;
        width: 100%;
      }

      /* ── Shared teaser shell ── */
      .idx-teaser {
        position: relative;
        overflow: hidden;
      }
      .idx-teaser-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2.75rem 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;
        align-items: center;
      }
      .idx-teaser-inner--reversed {
        direction: rtl;
      }
      .idx-teaser-inner--reversed > * {
        direction: ltr;
      }

      /* ── Shared editorial block ── */
      .idx-teaser-label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.4rem;
      }
      .idx-teaser-label-line {
        display: block;
        width: 28px;
        height: 1.5px;
        background: #9a8068;
      }
      .idx-teaser-label-line--gold {
        background: #c9a84c;
      }
      .idx-teaser-label-text {
        font-family: "Lato", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #9a8068;
      }
      .idx-teaser-label-text--gold {
        color: #c9a84c;
      }
      .idx-teaser-title {
        font-family: "Playfair Display", serif;
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 400;
        line-height: 1.2;
        color: #1a140e;
        margin: 0 0 1.1rem;
      }
      .idx-teaser-title--light {
         color: #2c2416;
      }
      .idx-teaser-title em {
        font-style: italic;
      }
      .idx-teaser-desc {
        font-family: "Lato", sans-serif;
        font-size: 0.95rem;
        font-weight: 300;
        line-height: 1.75;
        color: #6b5c4e;
        margin: 0 0 1.8rem;
        max-width: 38ch;
      }
      .idx-teaser-desc--light {
       color: #6b5c4e;
      }
      .idx-teaser-cta {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-family: "Lato", sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 0.75rem 1.5rem;
        border-radius: 2px;
        transition:
          background 0.25s,
          color 0.25s,
          border-color 0.25s;
      }
      .idx-teaser-cta svg {
        transition: transform 0.25s;
      }
      .idx-teaser-cta:hover svg {
        transform: translateX(3px);
      }

      /* ═══════════════════════════════
       1. TRAVEL TEASER
    ═══════════════════════════════ */
      .idx-teaser--travel {
        background: #faf9f6;
        border-top: 1px solid #ede7df;
      }
      .idx-teaser-cta--travel {
        background: #2c2416;
        color: #f5f0e8;
        border: 1.5px solid #2c2416;
      }
      .idx-teaser-cta--travel:hover {
        background: transparent;
        color: #2c2416;
      }
      .idx-teaser-stats {
        display: flex;
        gap: 2rem;
        margin-bottom: 2rem;
      }
      .idx-teaser-stat-num {
        display: block;
        font-family: "Playfair Display", serif;
        font-size: 1.9rem;
        font-weight: 400;
        color: #2c2416;
        line-height: 1;
      }
      .idx-teaser-stat-label {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #9a8068;
        margin-top: 0.3rem;
      }

      /* Travel destination cards */
      .idx-teaser-cards--travel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 10px;
        height: 420px;
      }
      .idx-tv-card {
        position: relative;
        overflow: hidden;
        border-radius: 3px;
        display: block;
        text-decoration: none;
        height: 100%;
      }
      .idx-tv-card--tall {
        grid-row: 1 / 3;
        height: 100%;
      }
      .idx-tv-card-col {
        display: contents; /* children participate directly in grid */
      }
      .idx-tv-card--half {
        /* sits in its own grid cell */
      }
      .idx-tv-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
      }
      .idx-tv-card:hover .idx-tv-card-img {
        transform: scale(1.04);
      }
      .idx-tv-card-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(26, 20, 10, 0.85) 0%,
          rgba(26, 20, 10, 0.1) 50%,
          transparent 100%
        );
        pointer-events: none;
      }
      .idx-tv-card-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem 1.1rem;
      }
      .idx-tv-card-region {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 0.2rem;
      }
      .idx-tv-card-name {
        font-family: "Playfair Display", serif;
        font-size: 1.15rem;
        font-weight: 400;
        color: #fff;
        margin: 0 0 0.15rem;
      }
      .idx-tv-card-sub {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.6rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        letter-spacing: 0.08em;
      }

      /* ═══════════════════════════════
       2. LIFESTYLE TEASER
    ═══════════════════════════════ */
      .idx-teaser--lifestyle {
        background: #f5f2ed;
        border-top: 1px solid #e4ddd4;
      }
      .idx-teaser-editorial--lifestyle .idx-teaser-label-line {
        background: #b89e80;
      }
      .idx-teaser-editorial--lifestyle .idx-teaser-label-text {
        color: #b89e80;
      }
      .idx-teaser-cta--lifestyle {
        background: transparent;
        color: #2c2416;
        border: 1.5px solid #2c2416;
      }
      .idx-teaser-cta--lifestyle:hover {
        background: #2c2416;
        color: #f5f0e8;
      }
      .idx-ls-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.8rem;
      }
      .idx-ls-cat {
        font-family: "Lato", sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #6b5c4e;
        background: #ede8df;
        border: 1px solid #d9d0c4;
        padding: 0.28rem 0.75rem;
        border-radius: 2px;
      }

      /* Lifestyle cards */
      .idx-teaser-cards--lifestyle {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .idx-ls-card--feature {
        position: relative;
        overflow: hidden;
        border-radius: 3px;
        display: block;
        text-decoration: none;
         height: 180px;
      }
      /* Placeholder sits BEHIND image */
      .idx-ls-card-ph {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .idx-ls-card-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
        z-index: 1;
      }
      .idx-ls-card--feature:hover .idx-ls-card-img {
        transform: scale(1.04);
      }
      .idx-ls-card-scrim {
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(
          to top,
          rgba(20, 18, 16, 0.88) 0%,
          rgba(20, 18, 16, 0.15) 55%,
          transparent 100%
        );
      }
      .idx-ls-card-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.4rem 1.5rem;
        z-index: 3;
      }
      .idx-ls-card-tag {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        margin-bottom: 0.35rem;
      }
      .idx-ls-card-title {
        font-family: "Playfair Display", serif;
        font-size: 1.25rem;
        font-weight: 400;
        color: #fff;
        margin: 0 0 0.35rem;
      }
      .idx-ls-card-excerpt {
        font-family: "Lato", sans-serif;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.6);
        margin: 0 0 0.6rem;
        line-height: 1.5;
      }
      .idx-ls-card-read {
        font-family: "Lato", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
      }

      /* Small lifestyle cards */
      .idx-ls-smalls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }
      .idx-ls-small {
        display: block;
        text-decoration: none;
        background: #fff;
        border: 1px solid #e4ddd4;
        border-radius: 3px;
        overflow: hidden;
        transition:
          border-color 0.25s,
          box-shadow 0.25s;
      }
      .idx-ls-small:hover {
        border-color: #c9a88a;
        box-shadow: 0 4px 16px rgba(26, 20, 10, 0.08);
      }
      .idx-ls-small-img {
        position: relative;
        height: 90px;
        overflow: hidden;
        background: #e8e2d8;
      }
      /* Placeholder behind photo */
      .idx-ls-small-ph {
        position: absolute;
        inset: 0;
        z-index: 0;
      }
      .idx-ls-small-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        z-index: 1;
      }
      .idx-ls-small:hover .idx-ls-small-photo {
        transform: scale(1.05);
      }
      .idx-ls-small-body {
        padding: 0.6rem 0.7rem;
      }
      .idx-ls-small-tag {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #9a8068;
        margin-bottom: 0.25rem;
      }
      .idx-ls-small-title {
        font-family: "Playfair Display", serif;
        font-size: 0.8rem;
        font-weight: 400;
        color: #1a140e;
        margin: 0 0 0.2rem;
        line-height: 1.3;
      }
      .idx-ls-small-meta {
        font-family: "Lato", sans-serif;
        font-size: 0.58rem;
        color: #b0a090;
      }

      /* ═══════════════════════════════
       3. STUDIO TEASER
    ═══════════════════════════════ */
      .idx-teaser--studio {
          background: #faf9f6;
        border-top: 1px solid #ede7df;
        position: relative;
        overflow: hidden;
      }
      .idx-st-orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }
    .idx-st-orb--1 {
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(44, 36, 22, 0.04) 0%,
    transparent 70%
  );
  top: -100px;
  right: 100px;
  filter: blur(40px);
}

.idx-st-orb--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(44, 36, 22, 0.03) 0%,
    transparent 70%
  );
  bottom: -80px;
  left: 60px;
  filter: blur(40px);
}
      .idx-teaser-editorial--studio {
        position: relative;
        z-index: 1;
      }
      .idx-teaser-cta--studio {
        background: #2c2416;
  color: #f5f0e8;
  border: 1.5px solid #2c2416;
        font-weight: 700;
      }
      .idx-teaser-cta--studio:hover {
         background: transparent;
  color: #2c2416;
      }

      /* Studio process mini-list */
      .idx-st-process {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 1.25rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
      }
      .idx-st-process-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
      }
      .idx-st-process-num {
        font-family: "Playfair Display", serif;
        font-size: 1rem;
        font-weight: 400;
        font-style: italic;
        color: rgba(201, 168, 76, 0.55);
        flex-shrink: 0;
        line-height: 1.2;
        min-width: 24px;
      }
      .idx-st-process-label {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(245, 240, 232, 0.75);
        margin-bottom: 0.1rem;
      }
      .idx-st-process-desc {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.78rem;
        color: rgba(245, 240, 232, 0.35);
        line-height: 1.4;
      }

      /* Studio artwork grid */
      .idx-teaser-cards--studio {
        position: relative;
        z-index: 1;
      }
      .idx-st-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
      }
      .idx-st-tile {
        position: relative;
        overflow: hidden;
        border-radius: 2px;
         background: #f3eee7;
  border: 1px solid #e4ddd4;
      height: 200px;
      }
      .idx-st-tile--wide {
        grid-column: span 2;
        height: 200px;
      }
      .idx-st-tile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease;
         object-fit: cover;
  transform: scale(1.08);
      }

      .idx-st-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.08);
  pointer-events: none;
}

      .idx-st-tile:hover .idx-st-tile-img {
        transform: scale(1.04);
      }
      .idx-st-tile-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(20, 18, 16, 0.72) 0%,
          transparent 50%
        );
      }
      .idx-st-tile-label {
        position: absolute;
        bottom: 0.9rem;
        left: 1rem;
        font-family: "Lato", sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
      }
      .idx-st-tile--coming {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3eee7;
  border: 1px solid #d9d0c4;
      }
      .idx-st-coming-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
      }
      .idx-st-coming-icon {
        color: rgba(201, 168, 76, 0.5);
      }
      .idx-st-coming-label {
        font-family: "Playfair Display", serif;
        font-size: 0.9rem;
        font-style: italic;
          color: #2c2416;
      }
      .idx-st-coming-pill {
        font-family: "Lato", sans-serif;
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
       color: #9a8068;
  background: #ede8df;
  border: 1px solid #d9d0c4;
        padding: 0.2rem 0.6rem;
        border-radius: 20px;
      }

      /* ═══════════════════════════════
       RESPONSIVE
    ═══════════════════════════════ */
      @media (max-width: 1024px) {
        .page-wrap {
          grid-template-columns: 1fr 260px !important;
        }
      }
      @media (max-width: 900px) {
        .page-wrap {
          grid-template-columns: 1fr !important;
        }
        .sidebar {
          display: none;
        }
        .idx-teaser-inner,
        .idx-teaser-inner--reversed {
          grid-template-columns: 1fr;
          direction: ltr;
          gap: 2rem;
          padding: 3rem 1.5rem;
        }
        .idx-teaser-cards--travel {
          order: -1;
          height: 340px;
        }
        .idx-ls-smalls {
          grid-template-columns: repeat(3, 1fr);
        }
        .idx-st-grid {
          grid-template-columns: 1fr 1fr;
        }
        .idx-teaser-desc {
          max-width: none;
        }
      }
      @media (max-width: 580px) {
        .idx-teaser-inner {
          padding: 2.5rem 1rem;
        }
        .idx-teaser-cards--travel {
          height: 280px;
        }
        .idx-ls-smalls {
          grid-template-columns: 1fr 1fr;
        }
        .idx-ls-smalls .idx-ls-small:last-child {
          display: none;
        }
        .idx-teaser-stats {
          gap: 1.25rem;
        }
        .idx-st-grid {
          grid-template-columns: 1fr 1fr;
             gap: 6px;
        }
        .idx-st-tile--wide {
          height: 150px;
        }

        .idx-st-tile {
  height: 110px;
}

}
      }

      /* ═══════════════════════════════════════════════════════════
       MAGAZINE FRONT — Featured + 3 Recent articles
       Elegant editorial layout for the main column
    ═══════════════════════════════════════════════════════════ */

      /* ── Section wrapper ── */
      .mag-front {
        padding: 0;
      }

      /* ── Section header ── */
      .mag-front-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding-bottom: 1.25rem;
        border-bottom: 2px solid #1a140e;
        margin-bottom: 1.75rem;
      }
      .mag-kicker {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #9a8068;
        margin-bottom: 0.35rem;
      }
      .mag-front-title {
        font-family: "Playfair Display", serif;
        font-size: 1.6rem;
        font-weight: 400;
        color: #1a140e;
        margin: 0;
        line-height: 1.1;
      }
      .mag-front-title em {
        font-style: italic;
      }
      .mag-front-all {
        font-family: "Lato", sans-serif;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #9a8068;
        text-decoration: none;
        white-space: nowrap;
        padding-bottom: 2px;
        border-bottom: 1px solid #c9bfaf;
        transition:
          color 0.2s,
          border-color 0.2s;
      }
      .mag-front-all:hover {
        color: #1a140e;
        border-color: #1a140e;
      }

      /* ── Hero article card ── */
      .mag-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        text-decoration: none;
        overflow: hidden;
        border-radius: 3px;
        background: #1a140e;
        min-height: 340px;
        position: relative;
        transition: box-shadow 0.3s ease;
      }
      .mag-hero:hover {
        box-shadow: 0 12px 40px rgba(26, 20, 10, 0.22);
      }
      .mag-hero-img-wrap {
        position: relative;
        overflow: hidden;
      }
      .mag-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.7s ease;
      }
      .mag-hero:hover .mag-hero-img {
        transform: scale(1.04);
      }
      .mag-hero-img-scrim {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to right,
          transparent 60%,
          rgba(26, 20, 10, 0.35) 100%
        );
        pointer-events: none;
      }
      .mag-hero-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem 1.75rem;
        background: #1a140e;
      }
      .mag-hero-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
      }
      .mag-hero-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
      }
      .mag-hero-tag {
        font-family: "Lato", sans-serif;
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(201, 168, 76, 0.9);
        border: 1px solid rgba(201, 168, 76, 0.3);
        padding: 0.2rem 0.55rem;
        border-radius: 1px;
      }
      .mag-hero-badge {
        font-family: "Lato", sans-serif;
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #1a140e;
        background: #c9a84c;
        padding: 0.22rem 0.6rem;
        border-radius: 1px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .mag-hero-title {
        font-family: "Playfair Display", serif;
        font-size: clamp(1.3rem, 2.5vw, 1.75rem);
        font-weight: 400;
        line-height: 1.25;
        color: #f5f0e8;
        margin: 0 0 1rem;
      }
      .mag-hero-excerpt {
        font-family: "Lato", sans-serif;
        font-size: 0.82rem;
        font-weight: 300;
        line-height: 1.75;
        color: rgba(245, 240, 232, 0.65);
        margin: 0 0 1.5rem;
        flex: 1;
      }
      .mag-hero-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        gap: 0.75rem;
      }
      .mag-hero-meta {
        font-family: "Lato", sans-serif;
        font-size: 0.62rem;
        color: rgba(245, 240, 232, 0.4);
        letter-spacing: 0.04em;
      }
      .mag-hero-read {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: "Lato", sans-serif;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #c9a84c;
        white-space: nowrap;
        transition: gap 0.2s;
      }
      .mag-hero:hover .mag-hero-read {
        gap: 0.65rem;
      }

      /* ── Ruled divider ── */
      .mag-divider {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        margin: 1.75rem 0 1.4rem;
      }
      .mag-divider-label {
        font-family: "Lato", sans-serif;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #9a8068;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .mag-divider-line {
        display: block;
        flex: 1;
        height: 1px;
        background: #e0d8ce;
      }

      /* ── Three secondary stories ── */
      .mag-secondaries {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .mag-story {
        display: grid;
        grid-template-columns: 88px 1fr;
        gap: 1rem;
        text-decoration: none;
        padding: 1.1rem 0;
        border-bottom: 1px solid #ede8df;
        transition: background 0.2s;
        align-items: start;
      }
      .mag-story:first-child {
        border-top: none;
      }
      .mag-story:last-child {
        border-bottom: none;
      }
      .mag-story:hover {
        background: #faf9f6;
      }
      .mag-story-img {
        width: 88px;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        border-radius: 2px;
        flex-shrink: 0;
        background: #e8e2d8;
      }
      .mag-story-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
      }
      .mag-story:hover .mag-story-img img {
        transform: scale(1.06);
      }
      .mag-story-body {
        min-width: 0;
        padding: 0.1rem 0;
      }
      .mag-story-tag {
        display: block;
        font-family: "Lato", sans-serif;
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #9a8068;
        margin-bottom: 0.3rem;
      }
      .mag-story-title {
        font-family: "Playfair Display", serif;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.35;
        color: #1a140e;
        margin: 0 0 0.35rem;
        transition: color 0.2s;
      }
      .mag-story:hover .mag-story-title {
        color: #5a4a38;
      }
      .mag-story-excerpt {
        font-family: "Lato", sans-serif;
        font-size: 0.75rem;
        font-weight: 300;
        line-height: 1.6;
        color: #7a6b5c;
        margin: 0 0 0.5rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .mag-story-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }
      .mag-story-date {
        font-family: "Lato", sans-serif;
        font-size: 0.6rem;
        color: #b0a090;
      }
      .mag-story-read {
        font-family: "Lato", sans-serif;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9a8068;
        transition: color 0.2s;
      }
      .mag-story:hover .mag-story-read {
        color: #1a140e;
      }

      /* ── Responsive ── */
      @media (max-width: 720px) {
        .mag-hero {
          grid-template-columns: 1fr;
          min-height: auto;
        }
        .mag-hero-img-wrap {
          aspect-ratio: 16/9;
        }
        .mag-hero-img-scrim {
          background: linear-gradient(
            to top,
            rgba(26, 20, 10, 0.5) 0%,
            transparent 60%
          );
        }
        .mag-hero-body {
          padding: 1.5rem;
        }
        .mag-story {
          grid-template-columns: 72px 1fr;
          gap: 0.75rem;
        }
        .mag-story-img {
          width: 72px;
        }
        .mag-story-excerpt {
          display: none;
        }
      }
      @media (max-width: 480px) {
        .mag-front-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
        }
        .mag-front-title {
          font-size: 1.35rem;
        }
      }


/* ═══════════════════════════════
   NEWSLETTER WIDGET (FINAL)
═══════════════════════════════ */

.widget--newsletter {
  background: #faf9f6;
  border: 1px solid #e4ddd4;
  padding: 1.6rem 1.4rem;
  text-align: left;
  box-shadow: 0 6px 24px rgba(26, 20, 10, 0.05);
  position: relative;
}

/* Eyebrow (NOW matches FOLLOW ALONG) */
.widget-eyebrow {
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2c2416;
  
  padding-bottom: 0.6rem;              /* 👈 NEW */
  border-bottom: 1px solid #2c2416;    /* 👈 NEW */
  margin-bottom: 0.9rem;               /* 👈 adjusted spacing */
}

/* Title */
.widget--newsletter .widget-title {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: #2c2416;
  line-height: 1.5;
  margin-bottom: 0.5rem;

  text-transform: none;
  letter-spacing: normal;
}

/* Description */
.widget-newsletter-desc {
  font-family: "Lato", sans-serif;
  font-size: 0.76rem;
  color: #6b5c4e;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

/* Form container */
.widget-newsletter-form {
  display: flex;
  border: 1px solid #d9d0c4;
  background: #fff;
  overflow: hidden;
  height: 42px;
  margin-bottom: 0.8rem;
}

/* Input */
.widget-newsletter-form input {
  flex: 1;
  border: none;
  padding: 0 0.8rem;
  font-family: "Lato", sans-serif;
  font-size: 0.75rem;
  outline: none;
  color: #2c2416;
  background: transparent;
}

/* Button */
.widget-newsletter-form button {
  background: #2c2416;
  color: #f5f0e8;
  border: none;
  padding: 0 0.9rem;
  font-family: "Lato", sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;

  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.25s ease;
}

/* Hover */
.widget-newsletter-form button:hover {
  background: transparent;
  color: #2c2416;
  border-left: 1px solid #d9d0c4;
}

/* Note */
.widget-newsletter-note {
  font-family: "Lato", sans-serif;
  font-size: 0.58rem;
  color: #9a8068;
  margin-top: 0.6rem;
}