/* ============================================================
   THE FRESH ANGLE — main.css
   Design system: CSS custom properties → components → utilities
   ============================================================ */

/* ── Google Fonts are enqueued via functions.php ── */

/* ────────────────────────────────────────────────
   1. DESIGN TOKENS
───────────────────────────────────────────────── */
:root {
  --accent:          #B2533E;
  --accent-dark:     #8F3E2C;
  --dark:            #2D3436;
  --footer-bg:       #1e2633;
  --border-natural:  #E6E2D3;
  --cream:           #FAF9F6;
  --cream-warm:      #FAF5F2;
  --white:           #ffffff;

  --font-sans:       'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display:    Georgia, 'Times New Roman', serif; /* React: --font-display: "Georgia", serif */
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  --radius-sm:       0.5rem;
  --radius-md:       0.75rem;
  --radius-lg:       1rem;
  --radius-xl:       1.5rem;
  --radius-2xl:      2rem;

  --shadow-card:     0 2px 16px rgba(45,52,54,0.07);
  --shadow-hover:    0 4px 24px rgba(178,83,62,0.12);
  --transition:      all 0.2s ease;
}

/* ────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;           /* makes body{min-height:100%} = viewport height */
  scroll-behavior: smooth;
  overflow-x: clip;       /* clips horizontal overflow without creating a scroll
                             container — preserves position:sticky on sidebar/header */
}

body {
  font-family: var(--font-sans);
  color: var(--dark);
  background: var(--white);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-align: left; /* explicit — prevents WordPress global styles from centering */
  /* overflow-x: clip — same visual result as React's body{overflow-x:hidden}
     but does NOT create a scroll container (unlike hidden). This is critical:
       – overflow-x: hidden → body becomes scroll container → breaks position:sticky
         on the header AND clamps body width to the visible area, clipping any
         content that overflows by even 1 px (our clamp() padding gives 31 px
         per side vs React's 16 px, tightening pill row to near-overflow width).
       – overflow-x: clip  → no scroll container → sticky works correctly, and
         html{overflow-x:clip} (already set) acts as the outer paint guard. */
  overflow-x: clip;

  /* Sticky-footer via CSS Grid.
     min-height: 100% (NOT 100vh) so that WordPress admin-bar's
     html{padding-top:32px} is respected: body height = viewport − 32px,
     which keeps the footer exactly at the bottom with no overflow below it.
     Using 100vh would make body 32px taller than visible area, producing
     32px of white space below the footer when the page is scrolled. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Without an explicit column, the CSS Grid implicit-column algorithm sizes
     the column at the max-content of its items. Elements with max-width:1280px
     and margin-inline:auto force the implicit column (and therefore body) to
     compute at 1280px, making every grid item 1280px wide at any viewport.
     Anchoring the column to 100% ties it to body's own available width
     (= viewport width), so all grid items are correctly viewport-wide. */
  grid-template-columns: 100%;
  min-height: 100%;
}

/* Sticky-footer grid: WP injects #wpadminbar, drawer, and <script> tags as direct
   body children. Without explicit rows they auto-place into the 3 template tracks
   AND create implicit rows — #page lands outside the 1fr row (~1747px phantom
   gap on short pages like no-results search). Pin layout children to rows 1–3;
   park fixed layers + scripts in row 1 with zero size so they never add height. */
.site-header { grid-row: 1; }
#page.site   { grid-row: 2; min-height: 0; align-self: stretch; }
.site-footer { grid-row: 3; }

#wpadminbar,
.drawer-overlay,
.drawer {
  grid-row: 1;
  grid-column: 1;
}

/* WP injects <script> tags as body children — each becomes a grid item and
   creates implicit rows that blow up page height. Hide from layout only. */
body > script {
  display: none;
}

/* Admin bar adds margin-top: 32px (46px mobile) to <html> via WP core CSS.
   With html{height:100%} body min-height:100% resolves to full viewport height
   while body starts 32px down — body extends past the viewport bottom on short
   pages, causing space below footer + vertical scrollbar side-gaps. */
html.admin-bar body,
body.admin-bar { min-height: calc(100% - 32px); }
@media screen and (max-width: 782px) {
  html.admin-bar body,
  body.admin-bar { min-height: calc(100% - 46px); }
}

/* #page.site occupies the 1fr row */
#page.site {}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; }

/* ────────────────────────────────────────────────
   3. LAYOUT UTILITIES
───────────────────────────────────────────────── */
.container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section-gap { padding-block: clamp(2rem, 5vw, 3.5rem); }
/* Tablet: tighten section-gap to match React's space-y-10 = 2.5rem rhythm.
   At 640–1023 px React keeps all sections in one space-y-10 container (40 px gap).
   Our WP containers add padding on BOTH sides, so 20 px × 2 = 40 px ≈ React. */
@media (min-width: 640px) and (max-width: 1023px) {
  .section-gap { padding-block: 1.25rem; }
}

/* ────────────────────────────────────────────────
   4. GRID SYSTEM
───────────────────────────────────────────────── */
.grid-4col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .grid-4col { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid-4col { grid-template-columns: repeat(4, 1fr); }
}

.grid-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .grid-3col { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .grid-3col { grid-template-columns: repeat(3, 1fr); }
}

/* React article grids use gap-5 = 1.25rem */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;   /* gap-5 = 1.25rem, matching React */
}
@media (min-width: 640px) {
  .grid-2col { grid-template-columns: 1fr 1fr; }
}

/* Transparent link inside section headings (replaces style="color:inherit;text-decoration:none") */
.section-link {
  color: inherit;
  text-decoration: none;
}
.section-link:hover { color: var(--accent); }

/* Home section blocks: space-y-10 spacing between Fashion/Lifestyle (React: space-y-10 = 2.5rem) */
.home-section-block {
  margin-bottom: 2.5rem; /* space-y-10 = 2.5rem between sections */
}
.home-section-block--last { margin-bottom: 0; }

/* Beauty section: border-top from React's `border-t border-gray-200/30 pt-8` */
/* React: border-t border-gray-200/50 pt-8 wraps the entire Travel+Beauty block.
   In our WP templates each is a separate container, so we put the border on Travel
   and keep Beauty's pt-8 spacing independently. */
.travel-section-wrap {
  border-top: 1px solid rgba(229, 231, 235, 0.3);
  padding-top: 2rem !important; /* pt-8 = 2rem, override section-gap */
}
.beauty-section-wrap {
  /* React: space-y-10 = 2.5rem gap between Travel and Beauty inside horizontal-categories-block */
  padding-top: 2.5rem !important;
}

/* Beauty compact cards grid — React: grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 */
.grid-beauty {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;  /* gap-4 = 1rem */
}
@media (min-width: 640px)  { .grid-beauty { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .grid-beauty { grid-template-columns: repeat(4, 1fr); } }

/* Home: main content (2/3) + sidebar (1/3) */
.home-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  /* React: lg:col-span-8 / lg:col-span-4 = 8:4 ratio (2:1).
     Using 8fr 4fr instead of fixed 340px so sidebar scales with viewport width. */
  .home-layout { grid-template-columns: 8fr 4fr; }
  /* React: lg:sticky lg:top-28 (top-28 = 7rem = 112px) */
  .home-layout > aside {
    position: sticky;
    top: 112px;       /* lg:top-28 = 7rem */
    align-self: start;
    padding-left: 1rem; /* lg:pl-4 = 1rem */
  }
}

/* ────────────────────────────────────────────────
   5. TYPOGRAPHY
───────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--dark);
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: break-word;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
  display: block;
}

/* ────────────────────────────────────────────────
   6. HEADER  (Katen 3-row desktop / 1-row mobile)
───────────────────────────────────────────────── */
/* React: sticky top-0 z-50 bg-light-bg/95 backdrop-blur-md border-b border-border-natural
   NOTE: React's border-b is invisible there because header + page share cream bg.
   On our white bg, a bottom border on the full header creates a visible line below nav pills.
   Instead we only add it on mobile (no nav-row), and on desktop the nav-row's border-top
   already acts as the separator between the logo bar and nav bar. */
/* React: sticky top-0 z-50 bg-light-bg/95 backdrop-blur-md border-b border-border-natural
   border-b applies on ALL viewports — appears below the last child (nav-row on desktop,
   mobile-row on mobile). Combined with nav-row border-top above pills = correct two-separator look. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-natural); /* ALL viewports — matches React border-b */
  /* overflow-x containment is handled at html level (overflow-x: clip) and by
     the nav row itself — adding clip here caused nav pills to be clipped at
     the right edge at 768 px because our clamp() container padding is wider
     than React's px-4, leaving slightly less room for the pill row. */
}

/* ────────────────────────────────────────────────
   DESKTOP TOP BAR (768px+)
───────────────────────────────────────────────── */
.header-desktop-bar {
  display: none;
  /* No border-bottom here — the nav-row below already has border-top as the separator */
}
@media (min-width: 768px) {
  .header-desktop-bar { display: block; }
}

/* React desktop top bar: pt-8 pb-6 = padding-top:2rem, padding-bottom:1.5rem */
.header-desktop-bar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 2rem;     /* pt-8 = 2rem */
  padding-bottom: 1.5rem; /* pb-6 = 1.5rem */
  gap: 1rem;
}

/* Social icons — left */
.header-desktop-social {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.hd-social-link {
  color: #6b7280;
  transition: var(--transition);
  display: flex;
  align-items: center;
}
.hd-social-link:hover { color: var(--accent); }

/* Centered logo block */
.header-desktop-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.logo-emblem-link { display: flex; }

.logo-emblem-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border-natural);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 1px 4px rgba(45,52,54,0.06);
}
.logo-emblem-circle:hover {
  border-color: rgba(178,83,62,0.4);
  box-shadow: 0 4px 12px rgba(178,83,62,0.1);
}
.logo-emblem-sm {
  width: 36px;
  height: 36px;
}

.brand-name-large {
  /* React: font-display text-4xl font-black — fixed 2.25rem, no clamp */
  font-family: var(--font-display);
  font-size: 2.25rem;    /* text-4xl = 36px */
  font-weight: 900;      /* font-black */
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--dark);
  text-decoration: none;
  transition: opacity 0.2s;
}
.brand-name-large:hover { opacity: 0.88; }
.brand-the-fresh {
  text-transform: uppercase;
  color: var(--dark);
}
.brand-angle {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.brand-dot { color: var(--accent); font-weight: 900; }

/* Right actions */
.header-desktop-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Search circle button */
.search-btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-natural);
  background: var(--white);
  color: #6b7280;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(45,52,54,0.06);
}
.search-btn-circle:hover,
.search-btn-circle.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Hamburger button — round, accent tint */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(178,83,62,0.1);
  border: none;
  color: var(--accent);
  cursor: pointer;
  transition: var(--transition);
}
.hamburger-btn:hover {
  background: var(--accent);
  color: #fff;
}
.hamburger-line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ────────────────────────────────────────────────
   SEARCH BAR (shared — desktop + mobile)
───────────────────────────────────────────────── */
/* React: {searchOpen && <div className="border-t border-border-natural bg-white py-4.5 shadow-inner">}
   The search bar div is conditionally rendered in React — in WordPress we use max-height trick.
   CRITICAL: border-top must NOT be on the closed state — at max-height:0 the border is still
   painted as a 1px line, which merges with the nav-row border-top creating a thick double border.
   Solution: only apply border-top when .open. */
.header-search-bar {
  background: var(--white);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
  box-shadow: none;
  /* NO border-top here — border only appears in .open state */
}
.header-search-bar.open {
  max-height: 100px;
  padding: 1.125rem 0;   /* py-4.5 = 1.125rem */
  border-top: 1px solid var(--border-natural); /* only visible when open */
  box-shadow: inset 0 2px 6px rgba(45,52,54,0.04); /* shadow-inner */
}

/* React: max-w-2xl mx-auto — form is relative with absolute X button */
.search-form-inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 42rem;   /* max-w-2xl = 672px */
  margin: 0 auto;
}
/* React: w-full pl-4 pr-12 py-3 bg-gray-50 border border-border-natural rounded-2xl
   focus:ring-2 focus:ring-accent/30 focus:border-accent text-sm text-gray-800 */
.search-form-inner input[type="search"] {
  width: 100%;
  padding: 0.75rem 3rem 0.75rem 1rem; /* py-3 pl-4 pr-12 */
  background: #f9fafb;  /* bg-gray-50 */
  border: 1px solid var(--border-natural);
  border-radius: 1rem;  /* rounded-2xl = 1rem */
  font-family: var(--font-sans);
  font-size: 0.875rem;  /* text-sm */
  color: #1f2937;       /* text-gray-800 */
  outline: none;
  transition: var(--transition);
}
.search-form-inner input[type="search"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(178,83,62,0.3); /* focus:ring-2 focus:ring-accent/30 */
}
/* React: absolute right-3 p-1.5 text-gray-400 hover:text-gray-600 rounded-full */
.search-clear-btn {
  position: absolute;
  right: 0.75rem;   /* right-3 = 0.75rem */
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.375rem; /* p-1.5 = 0.375rem */
  border-radius: 50%;
  transition: var(--transition);
}
.search-clear-btn:hover { color: #4b5563; } /* hover:text-gray-600 */

/* ────────────────────────────────────────────────
   DESKTOP NAV ROW — centered category pills (768px+)
───────────────────────────────────────────────── */
.header-nav-row {
  display: none;
  border-top: 1px solid var(--border-natural);
  /* Clip any subpixel overflow from pill flex row — targeted so only the nav
     row is clipped, not the entire header (which would hide the pill ends) */
  overflow-x: clip;
}
@media (min-width: 768px) {
  .header-nav-row { display: block; }
}
/* React: py-4 = 1rem top/bottom; gap-3.5 = 0.875rem between pills */
.header-nav-row-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;         /* gap-3.5 = 0.875rem */
  padding-top: 1rem;     /* py-4 = 1rem */
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

/* React nav pills:
   Inactive: text-gray-600 font-semibold hover:text-accent hover:bg-gray-50
   Active:   bg-gradient text-white font-black shadow-md scale-102 */
.nav-pill {
  font-family: var(--font-sans);
  font-size: 0.75rem;    /* text-xs = 12px */
  font-weight: 600;      /* font-semibold for inactive */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem; /* px-5 py-2.5 */
  border-radius: 99px;
  white-space: nowrap;
  color: #4b5563;        /* text-gray-600 */
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.nav-pill:hover {
  color: var(--accent);
  background: #f9fafb;
}
.nav-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 900;      /* font-black on active */
  box-shadow: 0 4px 12px rgba(178,83,62,0.15);
  transform: scale(1.02);
}

/* ────────────────────────────────────────────────
   MOBILE HEADER ROW (below 768px)
───────────────────────────────────────────────── */
.header-mobile-row {
  display: block;
  border-bottom: 1px solid var(--border-natural);
}
@media (min-width: 768px) {
  .header-mobile-row { display: none; }
}
.header-mobile-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.header-mobile-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.brand-name-mobile {
  /* React mobile: font-display text-lg font-extrabold */
  font-family: var(--font-display);
  font-size: 1.125rem;   /* text-lg = 18px */
  font-weight: 800;      /* font-extrabold */
  color: var(--dark);
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.brand-name-mobile em {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.search-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 50%;
  transition: var(--transition);
}
.search-mobile-btn:hover,
.search-mobile-btn.active { color: var(--accent); }

/* ────────────────────────────────────────────────
   DRAWER
───────────────────────────────────────────────── */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
}
.drawer-overlay.open { display: block; }

/* React: fixed top-0 right-0 h-screen w-[320px] max-w-[85vw] bg-white shadow-2xl p-8 flex flex-col */
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--white);
  z-index: 1200;
  box-shadow: 0 25px 50px rgba(0,0,0,0.25); /* shadow-2xl */
  /* Use transform instead of right: -340px — transforms do NOT expand
     document.scrollWidth, eliminating phantom horizontal scroll on every page */
  transform: translateX(100%);
  transition: transform 0.35s ease-in-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem;  /* p-8 = 2rem */
}
.drawer.open { transform: translateX(0); }

/* React: absolute top-6 right-6 p-2 rounded-full hover:bg-gray-100 text-gray-400 hover:text-gray-900 */
.drawer-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  transition: var(--transition);
}
.drawer-close-btn:hover { background: #f3f4f6; color: #111827; }

/* React: flex flex-col items-center mt-6 mb-8 text-center */
.drawer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;   /* mt-6 */
  margin-bottom: 2rem;  /* mb-8 */
  text-align: center;
}

/* React: w-20 h-20 rounded-full border border-border-natural bg-white shadow-sm */
.drawer-brand-emblem {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid var(--border-natural);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: var(--transition);
}
.drawer-brand-emblem:hover { border-color: rgba(178,83,62,0.45); transform: scale(1.05); }

/* React: font-display font-extrabold text-gray-950 mt-3.5 text-base tracking-tight */
.drawer-brand-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #030712;
  margin-top: 0.875rem;
  letter-spacing: -0.02em;
}
.drawer-brand-angle {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
  letter-spacing: 0.04em;
}

.drawer-nav-body { flex: 1; }

/* React: flex flex-col text-[#303c54] font-sans text-[14px] font-semibold tracking-wide uppercase divide-y divide-gray-100 */
.drawer-nav-list {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 0.875rem;  /* text-[14px] */
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #303c54;
}

.drawer-nav-item {
  border-top: 1px solid #f3f4f6; /* divide-gray-100 */
  padding: 0.25rem 0;
}
.drawer-nav-item:first-child { border-top: none; }

/* React: py-3.5 hover:text-accent */
.drawer-nav-link {
  display: block;
  padding: 0.875rem 0;
  color: #374151;
  text-decoration: none;
  transition: var(--transition);
}
.drawer-nav-link:hover { color: var(--accent); }

/* Home row */
.drawer-home-row { display: flex; align-items: center; justify-content: space-between; }
.drawer-home-link { padding: 0.75rem 0; flex: 1; }

/* React: w-7 h-7 rounded border border-gray-200 hover:bg-gray-50 */
.drawer-chevron-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.25rem;
  border: 1px solid #e5e7eb;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.drawer-chevron-btn:hover { background: #f9fafb; }
.drawer-chevron-icon { color: #9ca3af; transition: transform 0.3s ease; }
.drawer-chevron-btn[aria-expanded="true"] .drawer-chevron-icon { transform: rotate(180deg); color: var(--accent); }

/* React: pl-4 pb-2 text-[11px] font-bold text-gray-500 tracking-wider border-l-2 border-accent/20 */
.drawer-home-submenu { padding: 0 0 0.5rem 1rem; margin-top: 0.375rem; border-left: 2px solid rgba(178,83,62,0.2); }
.drawer-home-submenu[hidden] { display: none; }
.drawer-submenu-link {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #6b7280;
  text-decoration: none;
  padding: 0.25rem 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: var(--transition);
}
.drawer-submenu-link:hover { color: var(--accent); }

/* Categories section */
.drawer-categories-section { padding: 0.25rem 0; }

/* React: text-[9px] font-mono font-black text-gray-400 tracking-widest pt-3.5 pb-2 */
.drawer-categories-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.5625rem;  /* 9px */
  font-weight: 900;
  color: #9ca3af;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.875rem 0 0.5rem;
}

/* React: flex flex-col gap-1 pl-1 */
.drawer-category-list { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 0.25rem; }

/* React: py-2 text-xs tracking-wider uppercase font-semibold hover:text-accent */
.drawer-cat-link {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #374151;
  text-decoration: none;
  transition: var(--transition);
}
.drawer-cat-link:hover { color: var(--accent); }

/* React: pt-6 border-t border-gray-100 text-[10px] text-gray-400 font-mono tracking-wide mt-auto */
.drawer-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid #f3f4f6;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: #9ca3af;
  letter-spacing: 0.06em;
}

/* React: text-accent hover:underline mt-1 font-bold font-sans */
.drawer-newsletter-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  margin-top: 0.25rem;
  transition: var(--transition);
}
.drawer-newsletter-link:hover { text-decoration: underline; }

/* ────────────────────────────────────────────────
   7. KATEN HERO CAROUSEL (horizontal scroll)
───────────────────────────────────────────────── */
.katen-carousel-section {
  /* Contained like React — inside max-width container */
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2rem);
  /* Clip horizontal overflow so carousel never causes page-level scroll.
     overflow-x: clip (not hidden) preserves position:sticky on header. */
  overflow-x: clip;
}

.katen-carousel-wrap {
  position: relative;
  /* overflow-x: clip contains vw-sized flex cards that would otherwise escape the
     section-level clip boundary on some browsers. Nav buttons are inset at
     left:8px / right:8px so they remain visible inside the clipped wrap. */
  overflow-x: clip;
  min-width: 0;
}

.katen-scroll-track {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;   /* smooth programmatic scroll */
  scrollbar-width: none;     /* Firefox */
  gap: 1.5rem;
  -webkit-overflow-scrolling: touch;
  width: 100%;    /* prevent flex track from widening the document */
  min-width: 0;   /* allow flex container to shrink below content width */
}
.katen-scroll-track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* React KatenHero card widths: 85vw → 45vw → 31.5vw → 18.4vw
   = mobile(1 card) → sm(~2) → md(~3) → lg(~5) */
.katen-card {
  flex-shrink: 0;
  width: 85vw;           /* mobile: w-[85vw] = 1 card */
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;  /* aspect-[3/4] */
  border-radius: 1.5rem; /* rounded-3xl */
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border-natural);
  box-shadow: 0 2px 12px rgba(45,52,54,0.06); /* shadow-sm */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.katen-card:hover {
  box-shadow: 0 8px 28px rgba(45,52,54,0.14); /* hover:shadow-lg */
  transform: translateY(-2px);
}
@media (min-width: 640px)  { .katen-card { width: 45vw; } }   /* sm:w-[45vw] ~2 cards */
@media (min-width: 768px)  { .katen-card { width: 31.5vw; } } /* md:w-[31.5vw] ~3 cards */
@media (min-width: 1024px) { .katen-card { width: 18.4vw; } } /* lg:w-[18.4vw] ~5 cards */

.katen-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.katen-card:hover .katen-card-img { transform: scale(1.05); }

.katen-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,5,5,0.88) 0%,
    rgba(5,5,5,0.55) 45%,
    rgba(5,5,5,0.18) 100%
  );
}

/* React: relative z-10 flex flex-col items-center text-center space-y-3.5 w-full
   Card itself has p-6 so content is inset 1.5rem from edges */
.katen-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 1.5rem;       /* p-6 = 1.5rem all sides */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.875rem;         /* space-y-3.5 = 0.875rem */
}

/* React: bg-accent text-white font-sans text-[10px] uppercase tracking-widest font-extrabold px-3.5 py-1 rounded-full shadow-sm */
.hero-category-pill {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans); /* font-sans (not mono) */
  font-size: 0.625rem;   /* text-[10px] = 10px */
  font-weight: 800;      /* font-extrabold */
  letter-spacing: 0.1em; /* tracking-widest */
  text-transform: uppercase;
  padding: 0.25rem 0.875rem; /* py-1 px-3.5 */
  border-radius: 99px;   /* rounded-full */
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* shadow-sm */
}

/* React: font-display text-sm sm:text-base font-extrabold text-white leading-tight line-clamp-3 */
.katen-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;   /* text-sm = 14px */
  font-weight: 800;      /* font-extrabold */
  color: #fff;
  line-height: 1.3;      /* leading-tight */
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* line-clamp-3 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
/* React: min-h-[2.75rem] keeps card titles consistent height at all sizes */
.katen-card-title { min-height: 2.75rem; }
@media (min-width: 640px) { .katen-card-title { font-size: 1rem; } } /* sm:text-base = 1rem */
.katen-card-title:hover { color: rgba(255,255,255,0.8); }

/* Chevron nav buttons — React: hidden md:flex (only on 768px+) */
@media (max-width: 767px) { .katen-nav-btn { display: none !important; } }

.katen-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-natural);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(45,52,54,0.12);
  cursor: pointer;
  transition: var(--transition);
}
.katen-nav-btn:hover { background: #f9fafb; color: var(--accent); }
.katen-nav-btn:disabled,
.katen-nav-btn[aria-disabled="true"] {
  opacity: 0;
  pointer-events: none;
}
/* Inset 8px inside the wrap (was -8px outside) so overflow-x:clip on
   .katen-carousel-section doesn't cut them off */
.katen-prev { left: 8px; }
.katen-next { right: 8px; }

/* Dots */
.katen-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1.25rem;
}
.katen-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--transition);
}
.katen-dot.active {
  width: 24px;
  border-radius: 5px;
  background: var(--accent);
}

/* ────────────────────────────────────────────────
   7b. SECTION HEADINGS (left-border accent style)
───────────────────────────────────────────────── */
/* React section headings: font-display text-base sm:text-lg font-extrabold text-gray-950 tracking-tight uppercase
   Shared styles for both left-border and pulsing-dot variants */
.section-heading-accent,
.section-heading-dot {
  font-family: var(--font-display);
  font-size: 1rem;       /* text-base = 1rem */
  font-weight: 800;      /* font-extrabold */
  color: var(--dark);    /* text-gray-950 */
  letter-spacing: -0.02em; /* tracking-tight */
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}
@media (min-width: 640px) {
  .section-heading-accent,
  .section-heading-dot { font-size: 1.125rem; } /* sm:text-lg = 1.125rem */
}

/* Left-border accent heading (Fashion / Lifestyle) — matches React border-l-4 pl-3.5 */
.section-heading-row {
  border-left: 4px solid var(--accent);
  padding-left: 0.875rem; /* pl-3.5 = 0.875rem */
  margin-bottom: 1.25rem; /* space-y-5 sibling gap ≈ 1.25rem */
}

/* Pulsing dot heading (Travel / Beauty) — matches React animate-ping dot */
.section-heading-dot-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;  /* gap-1.5 = 0.375rem */
  margin-bottom: 1.25rem;
}

.section-dot-pulse {
  display: inline-block;
  width: 0.5rem;   /* w-2 = 0.5rem */
  height: 0.5rem;  /* h-2 = 0.5rem */
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: ping-dot 1.5s ease-in-out infinite;
}

@keyframes ping-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.5; }
}

/* ────────────────────────────────────────────────
   8. ARTICLE CARDS
───────────────────────────────────────────────── */

/* React travel cards: bg-white p-3.5 rounded-2xl border border-border-natural
   hover:border-accent/40 hover:shadow-[0_12px_25px_rgba(138,154,91,0.06)] hover:-translate-y-1 */
.travel-card {
  background: var(--white);
  border: 1px solid var(--border-natural);
  border-radius: var(--radius-lg);   /* rounded-2xl in React = 1rem */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}
.travel-card:hover {
  border-color: rgba(178,83,62,0.4);
  box-shadow: 0 12px 25px rgba(138,154,91,0.06); /* greenish shadow matching React */
  transform: translateY(-4px); /* -translate-y-1 = -4px */
}

.travel-card-img-link { display: block; }

.travel-card-img-wrap {
  aspect-ratio: 3 / 2;   /* landscape — matches React aspect-[1.5] */
  overflow: hidden;
  background: #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  position: relative;
}
.travel-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.travel-card:hover .travel-card-img-wrap img { transform: scale(1.05); }

.travel-featured-badge {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--accent);
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
}

.travel-card-body {
  padding: 0.875rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.travel-card-title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.35;
  text-decoration: none;
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color 0.2s;
}
.travel-card-title:hover { color: var(--accent); }

.travel-card-desc {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.travel-card-footer {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f3f4f6;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.travel-view-link {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: text-decoration 0.2s;
}
.travel-view-link:hover { text-decoration: underline; }
.article-card {
  background: var(--white);
  border: 1px solid var(--border-natural);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}
/* React: hover:border-accent/40 hover:shadow-[0_12px_30px_rgba(138,154,91,0.08)] hover:-translate-y-1 */
.article-card:hover {
  border-color: rgba(178, 83, 62, 0.4);
  box-shadow: 0 12px 30px rgba(138, 154, 91, 0.08); /* greenish shadow matching React */
  transform: translateY(-4px); /* -translate-y-1 = -4px */
}

.article-card-image-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;   /* React: aspect-[4/3] */
}
.article-card-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.article-card:hover .article-card-image-link img {
  transform: scale(1.04);
}

.article-card-body {
  padding: 1.5rem;   /* React: p-6 = 1.5rem */
}

/* React: font-display text-[10px] uppercase tracking-widest font-black text-accent */
.article-category-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.625rem;   /* 10px */
  font-weight: 900;      /* font-black */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 0.75rem;
  transition: var(--transition);
}
.article-category-badge:hover { color: var(--accent-dark); }

/* React: font-display text-base font-semibold text-gray-800 line-clamp-2 leading-tight */
.article-card-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;       /* text-base = 16px */
  font-weight: 600;      /* font-semibold */
  color: #1f2937;        /* text-gray-800 */
  line-height: 1.3;      /* leading-tight */
  margin-bottom: 0.5rem;
  text-decoration: none;
  transition: var(--transition);
  word-break: break-word;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-title:hover { color: var(--accent); }

/* React: text-xs mt-2 line-clamp-2 text-gray-450 */
.article-card-desc {
  font-size: 0.75rem;   /* text-xs = 12px */
  color: #6b7280;
  line-height: 1.55;
  margin-top: 0.5rem;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #9ca3af;
  letter-spacing: 0.05em;
}

/* Beauty compact card — React: bg-white p-2.5 rounded-xl border border-border-natural
   hover:border-accent/40 hover:shadow-[0_8px_20px_rgba(138,154,91,0.04)] hover:-translate-y-0.5
   flex items-center gap-3 */
.article-card-compact {
  display: flex;
  gap: 0.75rem;           /* gap-3 = 0.75rem */
  align-items: center;    /* items-center (not flex-start) */
  padding: 0.625rem;      /* p-2.5 = 0.625rem */
  background: var(--white);
  border: 1px solid var(--border-natural);
  border-radius: var(--radius-md);  /* rounded-xl = 0.75rem */
  transition: all 0.3s ease;
}
.article-card-compact:hover {
  border-color: rgba(178, 83, 62, 0.4);
  box-shadow: 0 8px 20px rgba(138, 154, 91, 0.04); /* greenish matching React */
  transform: translateY(-2px); /* -translate-y-0.5 = -2px */
}

/* React: w-16 h-16 rounded-lg overflow-hidden bg-gray-50 border border-gray-100 */
.compact-thumb-link {
  display: block;
  flex-shrink: 0;
  width: 64px;            /* w-16 = 4rem = 64px */
  height: 64px;           /* h-16 = 4rem = 64px */
  border-radius: 0.5rem;  /* rounded-lg = 0.5rem */
  overflow: hidden;
  border: 1px solid #f3f4f6; /* border-gray-100 */
  background: #f9fafb;    /* bg-gray-50 */
}
.compact-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.article-card-compact:hover .compact-thumb-link img {
  transform: scale(1.03); /* group-hover:scale-103 */
}

.compact-body { flex: 1; min-width: 0; }

/* React: font-sans text-[11.5px] font-bold text-gray-955 leading-tight line-clamp-2 */
.compact-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);  /* font-sans, NOT font-display */
  font-size: 0.71875rem;  /* 11.5px */
  font-weight: 700;       /* font-bold */
  color: #111827;         /* text-gray-955 ≈ near-black */
  line-height: 1.3;       /* leading-tight */
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: var(--transition);
}
.compact-title:hover { color: var(--accent); }

/* ────────────────────────────────────────────────
   9. SIDEBAR
───────────────────────────────────────────────── */
.sidebar { display: flex; flex-direction: column; gap: 2.5rem; }

/* ─── Shared section heading row ─── */
.sidebar-section-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;    /* pb-3 = 0.75rem */
  border-bottom: 1px solid var(--border-natural);
  margin-bottom: 1.25rem;     /* space-y-5 gap between heading row and items = 1.25rem */
}
.sidebar-section-head svg { flex-shrink: 0; }
.sidebar-icon-accent { color: var(--accent); }

/* React: font-display text-sm font-bold uppercase tracking-widest text-gray-950 */
.sidebar-widget-title {
  font-family: var(--font-display);
  font-size: 0.875rem;   /* text-sm = 14px */
  font-weight: 700;      /* font-bold */
  color: var(--dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

/* React: bg-white rounded-2xl p-5 border border-border-natural shadow-sm */
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--border-natural);
  border-radius: var(--radius-xl);  /* rounded-2xl = 1.5rem ✓ */
  padding: 1.25rem;                 /* p-5 = 1.25rem all sides */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
}

.editorial-vision {
  background: var(--white);   /* White, not cream — matches React bg-white */
  border-color: var(--border-natural);
  position: relative;
  overflow: hidden;
  padding: 1.5rem; /* React: p-6 = 1.5rem — overrides sidebar-widget's p-5 */
}
/* React: absolute top-0 right-0 w-20 h-20 bg-accent/5 rounded-full translate-x-8 -translate-y-8 */
.editorial-vision::before {
  content: '';
  position: absolute;
  top: -2rem;   /* -translate-y-8 = -2rem */
  right: -2rem; /* translate-x-8 = 2rem */
  width: 5rem;  /* w-20 = 5rem */
  height: 5rem; /* h-20 = 5rem */
  background: rgba(178,83,62,0.05); /* bg-accent/5 */
  border-radius: 50%;               /* rounded-full */
  pointer-events: none;
}
/* The heading row inside editorial vision */
.editorial-vision .sidebar-section-head {
  border-bottom: none;
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}
.editorial-vision .sidebar-widget-title {
  font-size: 0.625rem;   /* text-[10px] in React */
  letter-spacing: 0.15em;
  color: var(--accent);
}
.editorial-vision .sidebar-section-head svg { color: var(--accent); }

/* React Sidebar.tsx: font-serif italic text-sm text-gray-700 leading-relaxed mb-4 text-left
   font-serif in Tailwind = ui-serif, Georgia, Cambria, Times New Roman — same as our --font-display */
.editorial-quote {
  font-family: var(--font-display); /* Georgia — matches React font-serif */
  font-size: 0.875rem;    /* text-sm = 14px */
  font-weight: 400;       /* normal weight — Georgia italic at 400 */
  line-height: 1.625;     /* leading-relaxed = 1.625 */
  color: #374151;         /* text-gray-700 */
  font-style: italic;
  margin: 0 0 1rem;       /* mb-4 = 1rem */
  padding: 0;
  text-align: left;
}

/* React: text-[10px] font-mono text-gray-400 uppercase tracking-wider — flex items-center gap-3 border-t pt-4 */
.editorial-subtext {
  display: flex;
  align-items: center;
  gap: 0.75rem;           /* gap-3 = 0.75rem */
  padding-top: 1rem;      /* pt-4 = 1rem */
  border-top: 1px solid var(--border-natural);
  font-family: var(--font-mono);
  font-size: 0.625rem;    /* text-[10px] = 10px */
  color: #9ca3af;         /* text-gray-400 */
  letter-spacing: 0.1em;  /* tracking-wider */
  text-transform: uppercase;
}
.editorial-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── Borderless sidebar sections (Most Popular, Recent Stories, Curator's Choices) ─── */
.sidebar-section { /* no box, no border, no background */ }
.sidebar-section-body { display: flex; flex-direction: column; }

/* Category label — React: font-display text-[9px] uppercase tracking-widest font-black text-accent/80 */
.sidebar-cat-label {
  font-family: var(--font-display); /* Georgia */
  font-size: 0.5625rem;   /* text-[9px] = 9px */
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(178,83,62,0.8);
  text-decoration: none;
  display: block;
  margin-bottom: 0.2rem;
  transition: var(--transition);
}
.sidebar-cat-label:hover { color: var(--accent); }

/* ─── Most Popular items — React: space-y-4 (1rem gap), NO borders ─── */
.popular-item {
  display: flex;
  gap: 1rem;           /* gap-4 = 1rem */
  align-items: flex-start;
  text-align: left;    /* always left regardless of parent centering */
  padding: 0;
  /* No border-bottom — React uses space-y-4 gap only, no dividers */
}
.sidebar-section-body.popular-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;           /* space-y-4 = 1rem */
}

.popular-number {
  /* React: font-display text-3.5xl font-black text-accent/90 */
  /* text-3.5xl is not a Tailwind v4 default — numbers inherit body (1rem).
     Visual intent is large bold numerals, so we use 1rem to match the actual React render. */
  font-family: var(--font-display); /* Georgia */
  font-size: 1rem;
  font-weight: 900;
  color: rgba(178,83,62,0.9);
  line-height: 1;
  min-width: 2.25rem;   /* min-w-[2.25rem] — preserved from React */
  padding-top: 0.125rem;
  padding-right: 0.25rem;
  flex-shrink: 0;
}

.popular-text {
  flex: 1;
  text-align: left;   /* React: items-start, text always left-aligned */
  min-width: 0;       /* prevent overflow in narrow sidebar */
}

/* React: font-sans text-xs sm:text-sm font-semibold text-gray-800 line-clamp-2 */
.popular-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;    /* text-xs = 12px base */
  font-weight: 600;      /* font-semibold */
  color: #1f2937;
  line-height: 1.4;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: var(--transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) { .popular-title { font-size: 0.875rem; } } /* sm:text-sm */
.popular-title:hover { color: var(--accent); }

/* ─── Recent Stories items ─── */
.recent-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;   /* prevent inheritance from newsletter text-center */
}
.recent-item:last-child { border-bottom: none; padding-bottom: 0; }

/* ─── Curator's Choices items ─── */
.curator-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  text-align: left;   /* prevent inheritance from newsletter text-center */
}
.curator-item:last-child { padding-bottom: 0; }

.curator-thumb {
  display: block;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-natural);
}
.curator-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.curator-item:hover .curator-thumb img { transform: scale(1.06); }

.curator-text { flex: 1; text-align: left; }

/* React: font-sans text-xs font-semibold text-gray-800 line-clamp-2 */
.curator-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;    /* text-xs = 12px */
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: break-word;
  transition: var(--transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.curator-title:hover { color: var(--accent); }

/* ────────────────────────────────────────────────
   10. BRANDS MARQUEE
───────────────────────────────────────────────── */
.brands-section {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--border-natural);
  border-bottom: 1px solid var(--border-natural);
  background: var(--white);
  overflow: hidden;
  position: relative;
  margin-block: 2.5rem;   /* breathing space above and below */
  border-radius: var(--radius-xl);  /* slightly rounded since it's now contained */
}
/* Tablet: tighten brands margin to match React's space-y-10 = 2.5rem one-sided rhythm */
@media (min-width: 640px) and (max-width: 1023px) {
  .brands-section { margin-block: 1.25rem; }
}

.brands-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 1.25rem;
}

.brands-track-wrap {
  overflow: hidden;
  position: relative;
}

/* Gradient fade masks — absolute children of .brands-section (position:relative) */
.brands-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem; /* w-16 = 4rem mobile */
  pointer-events: none;
  z-index: 10;
}
/* React: sm:w-28 = 7rem at 640px */
@media (min-width: 640px) { .brands-fade { width: 7rem; } }
.brands-fade-left  { left:  0; background: linear-gradient(to right, #fff 30%, transparent); }
.brands-fade-right { right: 0; background: linear-gradient(to left,  #fff 30%, transparent); }

.brands-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brands-scroll 30s linear infinite;
}
.brands-track:hover { animation-play-state: paused; }

@keyframes brands-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

/* Base brand logo — no borders, each brand styled individually */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 2rem;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  color: #111827;
  transition: color 0.3s;
  flex-shrink: 0;
}
.brand-logo:hover { color: #000; }

/* Image logo variant — displayed when an image is uploaded via ACF */
.brand-logo--img {
  padding: 0.25rem 1.5rem;
}
.brand-logo--img img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.brand-logo--img:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* ZARA: very tight tracking, heavy serif-style weight */
.brand-zara {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.12em;
  line-height: 1;
}

/* stradivarius: small icon circle + italic serif */
.brand-stradivarius {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: #1f2937;
}
.brand-stradivarius em {
  font-style: italic;
}
.strad-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.strad-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #1f2937;
}

/* MANGO: wide tracking, very bold sans */
.brand-mango {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #111827;
}

/* Massimo Dutti: serif italic semi-bold */
.brand-massimodutti {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #111827;
}
.brand-massimodutti em { font-style: italic; }

/* PULL&BEAR: slightly wide tracking, extrabold sans */
.brand-pullbear {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #1f2937;
}

/* Bershka: neutral sans, very heavy */
.brand-bershka {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #111827;
}

/* ────────────────────────────────────────────────
   11. NEWSLETTER BOX
───────────────────────────────────────────────── */
.newsletter-section {
  background: var(--cream-warm);
  border: 1px solid rgba(178,83,62,0.12);
  border-radius: var(--radius-2xl);
  /* React: p-6 sm:p-12 md:p-14 → 24px → 48px → 56px */
  padding: 1.5rem;
  text-align: center;
  margin-block: 3.5rem; /* my-14 = 3.5rem */
}

/* React: font-display text-2xl sm:text-3.5xl font-bold mb-3 text-gray-950 */
.newsletter-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;      /* text-2xl mobile */
  font-weight: 700;       /* font-bold (not 900) */
  color: #030712;         /* text-gray-950 */
  margin-bottom: 0.75rem; /* mb-3 */
}
@media (min-width: 640px) {
  .newsletter-section { padding: 3rem; }          /* sm:p-12 = 3rem */
  .newsletter-section h2 { font-size: 2.25rem; }  /* sm: closest to text-3.5xl */
}
@media (min-width: 768px) {
  .newsletter-section { padding: 3.5rem; }        /* md:p-14 = 3.5rem */
}

/* React: text-gray-600 text-xs sm:text-sm max-w-xl mx-auto leading-relaxed */
.newsletter-section > p {
  font-size: 0.75rem;   /* text-xs */
  color: #4b5563;       /* text-gray-600 */
  max-width: 36rem;     /* max-w-xl = 576px */
  margin: 0 auto;
  line-height: 1.625;   /* leading-relaxed */
}
@media (min-width: 640px) {
  .newsletter-section > p { font-size: 0.875rem; } /* sm:text-sm */
}

/* React: mt-8 flex flex-col sm:flex-row justify-center items-center gap-3 max-w-md mx-auto */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;        /* gap-3 */
  max-width: 28rem;    /* max-w-md = 448px */
  margin: 2rem auto 0; /* mt-8 = 2rem */
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) {
  .newsletter-form { flex-direction: row; }
}

.newsletter-input-wrap {
  width: 100%;
  position: relative;
}

/* React: w-full px-6 py-4 text-xs bg-white border border-accent/15 focus:border-accent rounded-full font-medium shadow-xs */
.newsletter-form input[type="email"] {
  width: 100%;
  padding: 1rem 1.5rem;          /* px-6 py-4 */
  border: 1px solid rgba(178,83,62,0.15); /* border-accent/15 */
  border-radius: 9999px;         /* rounded-full */
  font-family: var(--font-sans);
  font-size: 0.75rem;            /* text-xs */
  font-weight: 500;              /* font-medium */
  color: #1f2937;                /* text-gray-800 */
  background: var(--white);
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* shadow-xs */
  transition: var(--transition);
}
.newsletter-form input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(178,83,62,0.05); /* ring-4 ring-accent/5 */
}
.newsletter-form input[type="email"]::placeholder {
  color: #9ca3af; /* text-gray-400 */
}

/* React: bg-accent text-white font-display font-semibold text-xs tracking-wider uppercase px-8 py-4 rounded-full w-full sm:w-auto */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display); /* font-display = Georgia */
  font-size: 0.75rem;               /* text-xs */
  font-weight: 600;                 /* font-semibold */
  letter-spacing: 0.05em;          /* tracking-wider */
  text-transform: uppercase;
  padding: 1rem 2rem;               /* py-4 px-8 */
  border-radius: 9999px;            /* rounded-full */
  border: none;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;                      /* w-full on mobile */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: var(--transition);
}
@media (min-width: 640px) {
  .btn-accent { width: auto; }      /* sm:w-auto */
}
.btn-accent:hover {
  background: var(--accent-dark);
  box-shadow: 0 2px 8px rgba(178,83,62,0.25);
}

/* React: mt-4 flex flex-col sm:flex-row items-center justify-center gap-3 */
.newsletter-success-inline {
  display: none; /* shown via JS */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
@media (min-width: 640px) {
  .newsletter-success-inline { flex-direction: row; }
}

/* React: text-emerald-700 text-xs font-semibold flex items-center gap-1.5 */
.newsletter-success-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #047857; /* emerald-700 */
  margin: 0;
}
.newsletter-sparkle-icon {
  color: var(--accent);
  flex-shrink: 0;
  animation: bounce 1s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* React: text-xs text-accent bg-accent/10 px-3.5 py-1.5 rounded-full */
.newsletter-reset-btn {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent);
  background: rgba(178,83,62,0.1);
  border: none;
  border-radius: 99px;
  padding: 0.375rem 0.875rem;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.newsletter-reset-btn:hover {
  background: rgba(178,83,62,0.15);
  color: var(--accent-dark);
}

/* Decorative blobs inside newsletter section */
.newsletter-section { position: relative; overflow: hidden; }
.newsletter-blob {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(178,83,62,0.05);
  filter: blur(24px);
  pointer-events: none;
}
.newsletter-blob--tl { top: -2.5rem; left: -2.5rem; }
.newsletter-blob--br { bottom: -2.5rem; right: -2.5rem; }

/* Also keep .newsletter-input-wrap consistent */
.newsletter-input-wrap { flex: 1; }

/* ────────────────────────────────────────────────
   12. SINGLE / ARTICLE READER — replicates ArticleReader.tsx
───────────────────────────────────────────────── */
/* Outer: max-w-4xl mx-auto px-4 py-8 */
.single-outer { padding: 2rem 0 4rem; }
.single-container {
  max-width: 56rem; /* max-w-4xl = 896px */
  margin-inline: auto;
  padding-inline: clamp(1rem,4vw,2rem);
}

/* Back button: text-gray-500 hover:text-accent uppercase tracking-wider text-xs font-semibold */
.single-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color 0.2s ease;
}
.single-back-btn:hover { color: var(--accent); }
.single-back-btn svg { transition: transform 0.2s ease; }
.single-back-btn:hover svg { transform: translateX(-3px); }

/* Article card: bg-white rounded-3xl border border-border-natural shadow */
.single-article-card {
  background: var(--white);
  border-radius: 1.5rem;
  border: 1px solid var(--border-natural);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(138,154,91,0.02);
}
@media (min-width: 1280px) { .single-article-card { padding: 1rem; } }

/* Hero wrapper: aspect-[21/9] max-h-[460px] rounded-2xl overflow-hidden */
.single-hero-wrap {
  position: relative;
  aspect-ratio: 21/9;
  max-height: 460px;
  overflow: hidden;
  border-radius: 1rem;
}
.single-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Gradient: from-black/40 via-transparent to-transparent */
.single-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 50%);
  pointer-events: none;
}
.single-hero-bottom {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
}
/* Category pill on image: bg-white/95 backdrop-blur text-accent rounded-full */
.single-hero-cat {
  display: inline-block;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(4px);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border-radius: 99px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  text-decoration: none;
}

/* Post body: px-6 md:px-12 py-10 */
.single-body {
  padding: 1.5rem;
}
@media (min-width: 768px) { .single-body { padding: 2.5rem 3rem; } }

/* Header row: category badge + border-b */
.single-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-natural);
}
/* Category pill in header: bg-accent/5 text-accent rounded-full */
.single-cat-pill {
  display: inline-block;
  background: rgba(178,83,62,0.05);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.375rem 0.75rem;
  border-radius: 99px;
  text-decoration: none;
}

/* H1: font-display text-2xl md:text-4xl font-extrabold */
.single-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Description pull-quote: border-l-4 border-accent pl-5 italic font-serif */
.single-description {
  border-left: 4px solid var(--accent);
  padding-left: 1.25rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 2rem;
  line-height: 1.7;
}

/* Article body content */
.single-content {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.7;
  color: #374151;
}
.single-content p { margin-bottom: 1.25em; }
.single-content h2,
.single-content h3 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--dark);
  margin: 1.75em 0 0.75em;
}
.single-content h2 { font-size: 1.5rem; }
.single-content h3 { font-size: 1.25rem; }
.single-content ul, .single-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25em;
}
.single-content ul { list-style: disc; }
.single-content ol { list-style: decimal; }
.single-content li { margin-bottom: 0.5em; }
.single-content strong { font-weight: 700; color: var(--dark); }

/* Author section: border-t mt-12 mb-2 */
.single-author-wrap {
  border-top: 1px solid rgba(243,244,246,0.85);
  padding-top: 2rem;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}
/* Author card: bg-[#FAF9F6] rounded-2xl p-5 sm:p-6 border relative overflow-hidden */
.single-author-card {
  background: #FAF9F6;
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(230,226,211,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
@media (min-width: 640px) {
  .single-author-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem;
  }
}
.single-author-card:hover { border-color: rgba(178,83,62,0.2); }
/* Decorative corner: absolute top-0 right-0 w-24 h-24 bg-accent/2 rounded-bl-[4rem] */
.single-author-deco {
  position: absolute;
  top: 0; right: 0;
  width: 6rem; height: 6rem;
  background: rgba(178,83,62,0.02);
  border-bottom-left-radius: 4rem;
  pointer-events: none;
}
/* Avatar: w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden */
.single-author-avatar-wrap {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 640px) { .single-author-avatar-wrap { width: 64px; height: 64px; } }
.single-author-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.single-author-card:hover .single-author-avatar { transform: scale(1.04); }

.single-author-text { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; position: relative; z-index: 1; }
.single-author-meta { display: flex; flex-direction: column; gap: 0.125rem; }
/* Signature: text-[9px] uppercase font-extrabold text-accent — feather icon + "Author" */
.single-author-sig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (min-width: 640px) { .single-author-sig { justify-content: flex-start; } }
/* Author name: font-display text-base font-black */
.single-author-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  color: #030712;
  margin: 0;
}
/* Bio: font-sans text-xs sm:text-[13px] text-gray-500 */
.single-author-bio {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.625;
  margin: 0;
  max-width: 42rem;
}
@media (min-width: 640px) {
  .single-author-bio { font-size: 0.8125rem; } /* sm:text-[13px] */
}

/* ── RELATED ARTICLES ─────────────────────────── */
/* Section: mt-14 */
.related-section { margin-top: 3.5rem; }
/* Heading: font-display text-lg font-bold — NO border, NO border-b */
.related-heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1.5rem;
}
.related-cat-accent { color: var(--accent); }
/* Grid: grid-cols-1 md:grid-cols-3 gap-6 */
.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
/* Related card: bg-white rounded-2xl border hover:shadow hover:-translate-y-0.5 */
.related-card {
  background: var(--white);
  border-radius: 1rem;
  border: 1px solid var(--border-natural);
  overflow: hidden;
  transition: all 0.3s ease;
}
.related-card:hover {
  box-shadow: 0 8px 20px rgba(138,154,91,0.04);
  transform: translateY(-2px);
}
.related-card-img-link { display: block; }
/* Image: aspect-[16/10] group-hover:scale-102 */
.related-card-img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.related-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  display: block;
}
.related-card:hover .related-card-img-wrap img { transform: scale(1.02); }
/* Card body: p-4 */
.related-card-body { padding: 1rem; }
/* Category: text-[9px] uppercase tracking-widest font-bold text-accent font-display */
.related-card-cat {
  font-family: var(--font-display);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.25rem;
  text-decoration: none;
}
/* Title: font-display text-xs md:text-sm font-semibold line-clamp-2 group-hover:text-accent */
.related-card-title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
  text-decoration: none;
}
@media (min-width: 768px) { .related-card-title { font-size: 0.875rem; } }
.related-card:hover .related-card-title { color: var(--accent); }

/* ────────────────────────────────────────────────
   13. ABOUT PAGE — replicates AboutSection.tsx
───────────────────────────────────────────────── */
/* Outer wrapper: max-w-7xl mx-auto px-4 py-6 sm:py-10 space-y-12 */
/* React: selection:bg-accent/15 on the about container */
.about-outer ::selection {
  background-color: rgba(178, 83, 62, 0.15);
}

/* React: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-10 space-y-12 */
.about-outer {
  max-width: 1280px;  /* max-w-7xl = 80rem = 1280px */
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);   /* px-4 → sm:px-6 → lg:px-8 */
  padding-top: 1.5rem;    /* py-6 = 1.5rem mobile */
  padding-bottom: 1.5rem; /* py-6 = 1.5rem mobile */
  display: flex;
  flex-direction: column;
  gap: 3rem;  /* space-y-12 = 3rem */
}
@media (min-width: 640px) {
  /* sm:py-10 = 2.5rem top and bottom */
  .about-outer { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* HERO — text-center relative max-w-4xl mx-auto pt-4 pb-8 space-y-6 */
.about-hero-section {
  text-align: center;
  position: relative;
  max-width: 56rem; /* max-w-4xl */
  margin-inline: auto;
  padding: 1rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 640px) {
  .about-hero-section { padding: 2rem 0 3rem; }
}
/* Glow blob: absolute bg-accent/5 rounded-full blur-3xl -z-10 */
.about-hero-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20rem; height: 20rem;
  background: rgba(178,83,62,0.05);
  border-radius: 50%;
  filter: blur(3rem);
  pointer-events: none;
  z-index: -1;
}
.about-hero-titles { display: flex; flex-direction: column; gap: 0.75rem; }

/* React: font-display text-4xl sm:text-5xl lg:text-6xl font-black text-gray-950 tracking-tight leading-none pt-1 */
.about-h1 {
  font-family: var(--font-display);
  font-size: 2.25rem;       /* text-4xl */
  font-weight: 900;         /* font-black */
  color: #030712;           /* text-gray-950 */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1;           /* leading-none */
  padding-top: 0.25rem;     /* pt-1 */
  margin: 0;
}
@media (min-width: 640px)  { .about-h1 { font-size: 3rem; } }   /* sm:text-5xl */
@media (min-width: 1024px) { .about-h1 { font-size: 3.75rem; } } /* lg:text-6xl */

/* React: font-serif italic text-base sm:text-lg text-accent font-light */
.about-hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;          /* text-base */
  color: var(--accent);
  font-weight: 300;         /* font-light */
  margin: 0;
}
@media (min-width: 640px) { .about-hero-subtitle { font-size: 1.125rem; } } /* sm:text-lg */
/* React: relative p-6 sm:p-8 bg-[#FAF9F6] border border-border-natural/60 rounded-[2rem] shadow-xs max-w-3xl mx-auto overflow-hidden group */
.about-quote-card {
  position: relative;
  padding: 1.5rem;          /* p-6 */
  background: #FAF9F6;
  border: 1px solid rgba(230,226,211,0.6); /* border-border-natural/60 */
  border-radius: 2rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  max-width: 48rem;
  width: 100%;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
@media (min-width: 640px) { .about-quote-card { padding: 2rem; } }
.about-quote-card:hover { border-color: rgba(178,83,62,0.3); }
/* Decorative blob inside card: absolute -right-8 -bottom-8 w-24 h-24 rounded-full bg-accent/5 */
.about-quote-blob {
  position: absolute;
  right: -2rem; bottom: -2rem;
  width: 6rem; height: 6rem;
  border-radius: 50%;
  background: rgba(178,83,62,0.05);
  pointer-events: none;
  transition: transform 0.5s ease;
}
.about-quote-card:hover .about-quote-blob { transform: scale(1.1); }
/* React: font-serif text-base sm:text-lg lg:text-xl text-gray-800 leading-relaxed italic */
.about-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;     /* text-base */
  color: #1f2937;      /* text-gray-800 */
  line-height: 1.625;  /* leading-relaxed */
  position: relative;
  z-index: 1;
  margin: 0;
}
@media (min-width: 640px)  { .about-quote-text { font-size: 1.125rem; } } /* sm:text-lg */
@media (min-width: 1024px) { .about-quote-text { font-size: 1.25rem; } }  /* lg:text-xl */

/* Star divider */
.about-star-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.about-star-line { height: 1px; width: 2rem; background: #e5e7eb; }
.about-star-icon { color: var(--accent); transform: rotate(12deg); }

/* EDITORIAL BLOCKS wrapper: space-y-12 sm:space-y-16 */
.about-blocks {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 640px) { .about-blocks { gap: 4rem; } }

/* React: bg-white/60 and bg-[#FAF9F6]/60 — made solid for reliable rendering on any bg */
.about-block-card {
  background: #FFFFFF;   /* solid white — matches React bg-white/60 on white page */
  border-radius: 2rem;
  padding: 1.5rem;    /* p-6 */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
@media (min-width: 640px)  { .about-block-card { padding: 2rem; } }   /* sm:p-8 */
@media (min-width: 1024px) { .about-block-card { padding: 2.5rem; } } /* lg:p-10 */
.about-block-card:hover {
  box-shadow: 0 12px 30px rgba(138,154,91,0.05);
  transform: translateY(-2px);
}
.about-block-card--cream { background: #FAF9F6; } /* solid cream — React bg-[#FAF9F6]/60 on white */

/* Block grid: grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 items-stretch */
.about-block-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  /* React: md:grid-cols-2 gap-8 (32px) — 48px gap is lg:gap-12 only */
  .about-block-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .about-block-grid--reverse .about-img-order-2 { order: 2; }
  .about-block-grid--reverse .about-text-order-1 { order: 1; }
}
@media (min-width: 1024px) {
  .about-block-grid { gap: 3rem; } /* lg:gap-12 = 3rem */
}

/* Image wrapper: rounded-2xl overflow-hidden aspect-[16/10] shadow-xs */
/* min-width:0 + overflow:hidden prevent aspect-ratio+min-height from overriding 1fr column sizing */
.about-block-img-wrap { width: 100%; min-width: 0; overflow: hidden; }
.about-img-inner {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: #f9fafb;
  aspect-ratio: 16/10;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  width: 100%;      /* pin to column width — prevents aspect-ratio+min-height from creating a 480px intrinsic min-width */
  height: 100%;
  min-height: 240px;
}
@media (min-width: 640px) { .about-img-inner { min-height: 300px; } }
.about-img-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.about-block-card:hover .about-img-inner img { transform: scale(1.03); }

/* Image overlay badge */
.about-img-badge {
  position: absolute;
  top: 1rem; left: 1rem;            /* top-4 left-4 */
  padding: 0.25rem 0.75rem;         /* py-1 px-3 */
  border-radius: 9999px;            /* rounded-full */
  font-family: var(--font-sans);
  font-size: 0.625rem;              /* text-[10px] */
  font-weight: 800;                 /* font-extrabold */
  text-transform: uppercase;
  letter-spacing: 0.05em;           /* tracking-wider */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* shadow-xs */
}
/* White badge (block 1) */
.about-img-badge--white { background: rgba(255,255,255,0.95); color: var(--accent); }
/* Accent badge (block 2) */
.about-img-badge--accent { background: rgba(178,83,62,0.95); color: #fff; }

/* Text column */
.about-block-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
}
/* React: font-display text-xl sm:text-[22px] lg:text-2xl font-extrabold tracking-tight leading-tight */
.about-block-h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;       /* text-xl */
  font-weight: 800;         /* font-extrabold */
  color: #030712;           /* text-gray-955 ≈ gray-950 */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.25;        /* leading-tight */
  margin: 0;
}
@media (min-width: 640px)  { .about-block-h2 { font-size: 1.375rem; } } /* sm:text-[22px] */
@media (min-width: 1024px) { .about-block-h2 { font-size: 1.5rem; } }   /* lg:text-2xl */

/* React: font-sans text-gray-650 text-xs sm:text-[13px] lg:text-sm leading-relaxed
   text-gray-650 is non-standard Tailwind — no class generated — inherits near-dark.
   We use gray-600 (#4b5563) as the closest visible match.
   Extra specificity (.about-block-card .about-block-paras p) guards against any
   WordPress core or plugin CSS that targets generic `p` elements. */
.about-block-paras { display: flex; flex-direction: column; gap: 0.875rem; } /* space-y-3.5 */
.about-block-paras p,
.about-block-card .about-block-paras p {
  font-family: var(--font-sans);
  font-size: 0.75rem;   /* text-xs */
  /* React: text-gray-650 has no Tailwind rule → inherits body color: #2D3436 (var(--dark)) */
  color: var(--dark);
  line-height: 1.625;   /* leading-relaxed */
  margin: 0;
}
@media (min-width: 640px) {
  .about-block-paras p,
  .about-block-card .about-block-paras p { font-size: 0.8125rem; } /* sm:13px */
}
@media (min-width: 1024px) {
  .about-block-paras p,
  .about-block-card .about-block-paras p { font-size: 0.875rem; }  /* lg:text-sm = 14px */
}
/* Second paragraph has border-t separator */
.about-para-2nd {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(243,244,246,0.7);
}
.about-brand-accent { font-weight: 800; color: var(--accent); }

/* React: bg-accent text-white p-8 sm:p-12 rounded-[2rem] text-center shadow-md max-w-5xl mx-auto */
.about-mission-banner {
  background: var(--accent);
  color: #fff;
  padding: 2rem;          /* p-8 */
  border-radius: 2rem;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* shadow-md */
  position: relative;
  overflow: hidden;
  max-width: 64rem;       /* max-w-5xl */
  margin-inline: auto;
  width: 100%;
  transition: box-shadow 0.3s ease;
}
@media (min-width: 640px) { .about-mission-banner { padding: 3rem; } } /* sm:p-12 */
.about-mission-banner:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.2); } /* hover:shadow-lg */

/* Blurred decorations: absolute -right-16 -top-16 / -left-16 -bottom-16 w-48 h-48 rounded-full bg-accent-dark/30 blur-2xl */
.about-mission-blob {
  position: absolute;
  width: 12rem; height: 12rem;  /* w-48 h-48 */
  border-radius: 50%;
  background: rgba(143,62,44,0.3); /* bg-accent-dark/30 */
  filter: blur(2rem);              /* blur-2xl ≈ 40px, using 2rem */
  pointer-events: none;
}
.about-mission-blob--r { right: -4rem; top: -4rem; }     /* -right-16 -top-16 */
.about-mission-blob--l { left: -4rem; bottom: -4rem; }   /* -left-16 -bottom-16 */

/* React: relative z-10 max-w-3xl mx-auto space-y-5 */
.about-mission-inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;   /* max-w-3xl */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;       /* space-y-5 */
}

/* React: font-display text-lg sm:text-[22px] font-bold tracking-tight leading-relaxed */
.about-mission-quote {
  font-family: var(--font-display);
  font-size: 1.125rem;      /* text-lg */
  font-weight: 700;         /* font-bold */
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.625;       /* leading-relaxed */
  margin: 0;
}
@media (min-width: 640px) { .about-mission-quote { font-size: 1.375rem; } } /* sm:text-[22px] */

/* React: flex justify-center items-center gap-2 text-xs tracking-widest font-sans font-extrabold */
.about-mission-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;            /* gap-2 */
  font-family: var(--font-sans);
  font-size: 0.75rem;     /* text-xs */
  font-weight: 800;       /* font-extrabold */
  letter-spacing: 0.1em;  /* tracking-widest */
  text-transform: uppercase;
  color: rgba(255,255,255,0.9); /* text-white/90 */
}

/* React: h-3 w-3 fill-current text-white/90 */
.about-mission-star { color: rgba(255,255,255,0.9); flex-shrink: 0; fill: currentColor; }


/* ────────────────────────────────────────────────
   14. CONTACT PAGE — replicates ContactForm.tsx
───────────────────────────────────────────────── */
/* Outer: max-w-5xl mx-auto px-4 py-8 sm:py-14 space-y-10 */
.contact-outer {
  max-width: 64rem; /* max-w-5xl */
  margin-inline: auto;
  padding: clamp(1rem,4vw,2rem);
  padding-top: 2rem;    /* py-8 mobile = 2rem */
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
/* React: sm:py-14 = 3.5rem top+bottom at 640px */
@media (min-width: 640px) {
  .contact-outer { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* 1. BANNER — aspect-[21/9] sm:aspect-[25/8] rounded-3xl */
.contact-banner-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid rgba(209,213,219,0.6);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  aspect-ratio: 21/9;
  background: #f9fafb;
}
@media (min-width: 640px) { .contact-banner-wrap { aspect-ratio: 25/8; } }
.contact-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
  display: block;
}
.contact-banner-wrap:hover .contact-banner-img { transform: scale(1.03); }
/* Gradient overlay: from-gray-950/80 via-gray-950/20 to-transparent */
.contact-banner-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,7,18,0.8) 0%, rgba(3,7,18,0.2) 50%, transparent 100%);
  pointer-events: none;
}
/* Text overlay */
.contact-banner-text {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  color: #fff;
  pointer-events: none;
}
@media (min-width: 640px) { .contact-banner-text { bottom: 2rem; left: 2rem; } }
.contact-banner-brand {
  font-family: var(--font-mono);
  font-size: 0.5625rem; /* text-[9px] */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  /* React: text-accent-light — not in @theme → inherits text-white from parent .contact-banner-text */
  color: rgba(255,255,255,0.85);
  display: block;
}
.contact-banner-title {
  font-family: var(--font-display);
  font-weight: 800;
  /* React: text-xl sm:text-3.5xl → 1.25rem → 2rem */
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0;
  line-height: 1.2;
  color: #ffffff;
}
.contact-banner-sub {
  color: #d1d5db;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  max-width: 28rem;
  font-weight: 500;
  display: none;
}
@media (min-width: 640px) { .contact-banner-sub { display: block; } }

/* 2. TAB HEADER — border-b with accent underline */
.contact-tab-header {
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
}
.contact-tab-active {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
  border-bottom: 2px solid var(--accent);
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #030712;
}
.contact-tab-icon { color: var(--accent); flex-shrink: 0; }

/* 3. GRID — lg:grid-cols-12 (5 + 7) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 5fr 7fr; }
}

/* INFO COLUMN */
.contact-info-col { display: flex; flex-direction: column; justify-content: stretch; }
/* Info card: bg-[#FAF5F2] rounded-3xl p-8 border border-accent/15 space-y-6 */
.contact-info-card {
  background: #FAF5F2;
  border: 1px solid rgba(178,83,62,0.15);
  border-radius: 1.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-grow: 1;
}

/* Status card: bg-white p-4 rounded-2xl border shadow-xs */
.contact-status-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: var(--white);
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(237,229,223,0.6);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
/* Icon: w-10 h-10 rounded-full bg-accent/10 text-accent */
.contact-status-icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgba(178,83,62,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.contact-status-active {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.contact-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
.contact-status-label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16a34a;
}
.contact-status-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: #030712;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  line-height: 1.3;
  margin: 0.25rem 0 0;
}

/* Info body: first-letter drop cap */
.contact-info-body {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  color: #6b7280;
  line-height: 1.625;
  margin: 0;
}
.contact-info-body::first-letter {
  font-size: 1.35em;
  font-family: var(--font-display);
  color: var(--accent);
  float: left;
  margin-right: 0.25rem;
  line-height: 1;
}

/* Social section */
.contact-social-section {
  border-top: 1px solid #ede5df;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.contact-social-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1a1a1a;
  margin: 0;
}
/* Icon-only dark circles: w-9 h-9 rounded-full bg-[#121c2c] hover:bg-accent */
.contact-social-icons { display: flex; align-items: center; gap: 0.75rem; }
.contact-social-circle {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: #121c2c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.contact-social-circle:hover {
  background: var(--accent);
  transform: scale(1.1);
}
.contact-social-svg {
  width: 14px; height: 14px;
  fill: currentColor;
}

/* FORM COLUMN */
.contact-form-col {}
/* Form card: bg-white p-6 sm:p-10 rounded-3xl border shadow */
.contact-form-card {
  background: var(--white);
  padding: clamp(1.5rem,4vw,2.5rem);
  border-radius: 1.5rem;
  border: 1px solid rgba(229,231,235,0.8);
  box-shadow: 0 12px 36px rgba(0,0,0,0.015);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}
.contact-form-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: #030712;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.contact-form-sub {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.5;
  margin: 0.375rem 0 0;
}
.contact-form-header { margin: 0; }

/* DM Form */
.contact-dm-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form-row-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .contact-form-row-2col { grid-template-columns: 1fr 1fr; }
}

/* Input wrap: relative for icon positioning */
.contact-input-wrap { position: relative; }
.contact-input-icon {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  color: #9ca3af;
  pointer-events: none;
  display: flex;
}
.contact-input-icon--ta { top: 0.875rem; }

/* Inputs: w-full pl-10 pr-4 py-3 text-xs bg-white border border-gray-200 rounded-xl */
.contact-dm-input,
.contact-dm-textarea {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  color: #1f2937;
  background: var(--white);
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  outline: none;
  transition: all 0.2s ease;
}
.contact-dm-input:focus,
.contact-dm-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(178,83,62,0.05);
}
.contact-dm-textarea {
  resize: none;
  min-height: 6rem;
  padding-top: 0.75rem;
}

/* Validation error */
.contact-dm-error {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #e11d48;
  padding-left: 0.25rem;
  margin: 0;
}

/* Success inline banner: bg-emerald-50 border border-emerald-100 rounded-xl */
.contact-dm-success {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #f0fdf4;
  border: 1px solid #d1fae5;
  border-radius: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: #065f46;
}
.contact-dm-success-icon { color: #059669; flex-shrink: 0; }

/* Submit button */
.contact-dm-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.875rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.contact-dm-submit:hover { background: var(--accent-dark); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.contact-dm-submit:disabled { background: #d1d5db; cursor: not-allowed; }
.contact-dm-submit:active { transform: scale(0.99); }

/* (Stale old-contact-page rules removed — current markup uses .contact-dm-* classes above) */

/* ────────────────────────────────────────────────
   15. LEGAL / POLICY PAGES — replicates PolicySection.tsx
───────────────────────────────────────────────── */
/* Outer: max-w-6xl mx-auto px-4 py-8 sm:py-16 space-y-10 */
.policy-outer {
  max-width: 72rem; /* max-w-6xl */
  margin-inline: auto;
  padding-inline: 1rem; /* React: px-4 — fixed 1rem, not clamp */
  padding-top: 2rem;    /* py-8 mobile = 2rem */
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;          /* space-y-10 */
}
/* React: sm:py-16 = 4rem top+bottom at 640px */
@media (min-width: 640px) {
  .policy-outer { padding-top: 4rem; padding-bottom: 4rem; }
}

/* HERO */
.policy-hero-section {
  text-align: center;
  position: relative;
  max-width: 42rem; /* max-w-2xl */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.policy-hero-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 12rem; height: 12rem;
  background: rgba(178,83,62,0.05);
  border-radius: 50%;
  filter: blur(3rem);
  pointer-events: none;
  z-index: -1;
}
.policy-hero-h1 {
  font-family: var(--font-display);
  font-size: 2.25rem;          /* text-4xl = 2.25rem mobile */
  font-weight: 900;
  color: #030712;
  letter-spacing: -0.025em;   /* tracking-tight */
  line-height: 1;
  padding-top: 0.25rem;       /* pt-1 */
  margin: 0;
}
@media (min-width: 640px) {
  .policy-hero-h1 { font-size: 3rem; } /* sm:text-5xl = 3rem */
}
.policy-hero-sub {
  font-family: var(--font-sans);
  font-size: 0.75rem;          /* text-xs mobile */
  color: #6b7280;
  max-width: 32rem;
  margin: 0;
  line-height: 1.625;
}
@media (min-width: 640px) {
  .policy-hero-sub { font-size: 0.875rem; } /* sm:text-sm */
}
.policy-hero-sub strong { font-weight: 700; color: #1f2937; }
.policy-hero-star { padding-top: 0.25rem; }

/* LAYOUT: sidebar nav (col-span-3) + content (col-span-9) */
.policy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .policy-layout { grid-template-columns: 3fr 9fr; }
}

/* SIDEBAR NAV: bg-[#FAF9F6]/85 border rounded-2xl p-3 sm:p-4 flex flex-row lg:flex-col */
.policy-nav {
  background: rgba(250,249,246,0.85);
  border: 1px solid rgba(230,226,211,0.5);
  padding: 0.75rem;     /* p-3 mobile */
  border-radius: 1rem;  /* rounded-2xl */
  display: flex;
  flex-direction: row;
  gap: 0.375rem;        /* gap-1.5 — until lg */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory; /* React: snap-x */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;      /* IE/Edge legacy */
  scrollbar-width: none;         /* Firefox */
}
.policy-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* React: sm:p-4 = 1rem at 640px; gap stays gap-1.5 until lg */
@media (min-width: 640px) and (max-width: 1023px) {
  .policy-nav { padding: 1rem; }
}
@media (min-width: 1024px) {
  .policy-nav {
    flex-direction: column;
    overflow-x: visible;
    gap: 0.5rem;      /* lg:gap-2 */
    padding: 1rem;
  }
}

/* Nav button: px-4 py-3 rounded-xl font-sans text-xs sm:text-[13px] font-black uppercase tracking-wider
   Mobile/tablet: w-full min-w-[170px] snap-center — one tab fills nav width, swipe between tabs */
.policy-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;   /* text-xs mobile */
  font-weight: 900;
  letter-spacing: 0.05em;   /* tracking-wider */
  scroll-snap-align: center;  /* React: snap-center */
  text-transform: uppercase;
  color: #6b7280;
  background: none;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  width: 100%;
  min-width: 170px;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}
/* React: sm:text-[13px] = 0.8125rem at 640px+; tracking-wider = 0.05em */
@media (min-width: 640px) and (max-width: 1023px) { .policy-nav-btn { font-size: 0.8125rem; } }
@media (min-width: 1024px) { .policy-nav-btn { min-width: 0; font-size: 0.8125rem; } }
.policy-nav-btn:hover {
  background: var(--white);
  color: #030712;
  border-color: #f3f4f6;
}
.policy-nav-btn--active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 8px rgba(178,83,62,0.15);
}
.policy-nav-btn--active:hover { background: var(--accent); color: #fff; }
.policy-nav-inner { display: flex; align-items: center; gap: 0.625rem; }
.policy-nav-chevron { display: none; }
@media (min-width: 1024px) { .policy-nav-chevron { display: block; } }

/* CONTENT PANE: bg-white rounded-[2rem] p-6 sm:p-10 border relative overflow-hidden min-h-[460px] */
.policy-content-pane {
  background: var(--white);
  border-radius: 2rem;
  padding: 1.5rem;  /* p-6 = 1.5rem mobile */
  border: 1px solid rgba(230,226,211,0.5);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
  min-height: 460px;
  text-align: left;
}
@media (min-width: 640px) {
  .policy-content-pane { padding: 2.5rem; } /* sm:p-10 = 2.5rem */
}
/* Corner decoration: absolute top-0 right-0 w-36 h-36 bg-accent/2 rounded-bl-[6rem] */
.policy-pane-deco {
  position: absolute;
  top: 0; right: 0;
  width: 9rem; height: 9rem;
  background: rgba(178,83,62,0.02);
  border-bottom-left-radius: 6rem;
  pointer-events: none;
  z-index: 0;
}
.policy-pane-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Pane header (icon + H2): border-b border-gray-100 pb-4 */
.policy-pane-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 1rem;
}
/* Icon box: w-10 h-10 rounded-xl */
.policy-pane-icon-box {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.policy-pane-icon-box--emerald { background: #ecfdf5; }
.policy-pane-icon-box--amber   { background: #fffbeb; }
.policy-pane-icon-box--indigo  { background: #eef2ff; }
/* H2: font-display text-xl sm:text-2xl font-black tracking-tight */
.policy-pane-h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;          /* text-xl = 1.25rem mobile */
  font-weight: 900;
  color: #030712;
  letter-spacing: -0.025em;   /* tracking-tight */
  margin: 0;
}
@media (min-width: 640px) {
  .policy-pane-h2 { font-size: 1.5rem; } /* sm:text-2xl = 1.5rem */
}

/* Sections container (kept for legacy .policy-section markup) */
.policy-sections {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  color: #6b7280;
  line-height: 1.625;
}
.policy-section { display: flex; flex-direction: column; gap: 0.5rem; }
/* Section H3 (legacy class-based) */
.policy-h3 {
  font-family: var(--font-display);
  font-size: clamp(0.825rem, 1.3vw, 1rem);
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.policy-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Indented paragraphs */
.pl-4 { padding-left: 1rem; }
.policy-section p { margin: 0; }
.policy-list {
  list-style: disc;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   WP Classic Editor content rendered inside policy panes
   Matches React design: space-y-6 between sections, space-y-2 within section
   ───────────────────────────────────────────────────────────────────────── */
.policy-page-content {
  margin-top: 1.5rem; /* gap below pane-header border — React: space-y-6 */
  font-family: var(--font-sans);
  font-size: 0.75rem;          /* text-xs mobile */
  color: #6b7280;
  line-height: 1.625;
}
@media (min-width: 640px) {
  .policy-page-content { font-size: 0.875rem; } /* sm:text-sm = 0.875rem */
}
/* Hide the duplicate h2 that the setup plugin injects — already shown in pane header */
.policy-page-content h2 { display: none; }
/* H3: font-display text-sm sm:text-base font-bold text-gray-900 tracking-tight */
.policy-page-content h3 {
  font-family: var(--font-display);
  font-size: 0.875rem;         /* text-sm mobile */
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.025em;   /* tracking-tight */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
@media (min-width: 640px) {
  .policy-page-content h3 { font-size: 1rem; } /* sm:text-base */
}
.policy-page-content h3::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Dot color per tab — keyed by pane ID */
#active-privacy-pane .policy-page-content h3::before { background: #22c55e; }
#active-cookie-pane  .policy-page-content h3::before { background: #f59e0b; }
#active-terms-pane   .policy-page-content h3::before { background: #6366f1; }
/* Paragraphs: indented like React pl-4 — but NOT inside card components */
.policy-page-content p {
  padding-left: 1rem;
  margin: 0;
}
.policy-page-content .policy-cookie-card-desc {
  padding-left: 0;
  margin: 0;
}
/* Lists */
.policy-page-content ul,
.policy-page-content ol {
  list-style: disc;
  padding-left: 2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.policy-page-content li { margin: 0; }
/* Sibling spacing: 1.5rem before each h3 (new section), 0.5rem before p/ul after h3 */
.policy-page-content * + h3  { margin-top: 1.5rem; }
.policy-page-content h3 + *  { margin-top: 0.5rem; }
.policy-page-content p + p   { margin-top: 0.5rem; }
.policy-page-content p + ul  { margin-top: 0.5rem; }

/* Terms section 4 — disclaimer monospace box
   React: pl-4 bg-gray-50/75 p-4 rounded-xl border border-gray-150 font-mono text-[11px] */
.policy-disclaimer-box {
  background: rgba(249,250,251,0.75);
  padding: 1rem !important;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  font-family: monospace;
  font-size: 11px !important;
  line-height: 1.625;
  color: #374151;
  padding-left: 1rem;
  margin-top: 0.5rem;
}

/* Cookie section 4 — amber italic warning
   React: pl-4 text-xs italic text-amber-700 */
.policy-warning {
  padding-left: 1rem;
  font-size: 0.75rem !important;
  font-style: italic;
  color: #b45309 !important; /* text-amber-700 */
  margin-top: 0.5rem;
}

/* Cookie type cards — React: pl-4 space-y-3.5 pt-1 wrapper + p-4 bg-[#FAF9F6] rounded-xl border */
.policy-cookie-cards {
  padding-left: 1rem;       /* pl-4 */
  padding-top: 0.25rem;     /* pt-1 */
  display: flex;
  flex-direction: column;
  gap: 0.875rem;            /* space-y-3.5 */
  margin-top: 0.5rem;       /* h3 + div gap */
}
.policy-cookie-card {
  padding: 1rem;            /* p-4 */
  background: #FAF9F6;
  border-radius: 0.75rem;   /* rounded-xl */
  border: 1px solid rgba(230,226,211,0.5);
}
/* React: font-display text-xs font-black text-gray-900 uppercase tracking-widest mb-1 */
.policy-cookie-card-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 900;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.25rem;
}
/* React: text-xs text-gray-500 leading-relaxed */
.policy-cookie-card-desc {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.625;
  font-family: var(--font-sans);
}
.policy-link {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 700;
}
.policy-link:hover { opacity: 0.85; }

/* Cookie policy sub-boxes */
.policy-boxes {
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-top: 0.25rem;
}
.policy-box {
  padding: 1rem;
  background: #FAF9F6;
  border: 1px solid rgba(230,226,211,0.5);
  border-radius: 0.75rem;
}
.policy-box-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111827;
  margin: 0 0 0.25rem;
}
.policy-box p {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

/* Amber italic warning */
.policy-amber-warn {
  font-style: italic;
  color: #b45309;
  padding-left: 1rem;
  margin: 0;
}

/* Terms disclaimer: bg-gray-50/75 font-mono text-[11px] */
.policy-disclaimer {
  background: rgba(249,250,251,0.75);
  border: 1px solid #f3f4f6;
  border-radius: 0.75rem;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.625;
  color: #6b7280;
  margin: 0;
}

/* ────────────────────────────────────────────────
   16. SEARCH RESULTS PAGE
───────────────────────────────────────────────── */

/* Search heading row — flex row with clear button on the right */
.search-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Article count — React: text-xs text-gray-400 mt-1 font-mono */
.search-result-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

/* "Clear filter" link — React: text-xs font-mono font-semibold text-accent hover:underline bg-accent/5 px-3 py-1.5 rounded-full */
.search-clear-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  background: rgba(178,83,62,0.05);
  padding: 0.375rem 0.75rem;
  border-radius: 99px;
  white-space: nowrap;
  transition: var(--transition);
  flex-shrink: 0;
  align-self: center;
}
.search-clear-link:hover { text-decoration: underline; color: var(--accent-dark); }

/* No results empty state — NEVER use .search-no-results here: WordPress adds that
   class to <body> on empty search pages, which would style the entire layout. */
.search-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  background: #f9fafb;
  border-radius: var(--radius-2xl);
  border: 1px dashed #e5e7eb;
}
.search-empty-state-msg {
  font-size: 0.9375rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.search-empty-state-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 1.5rem;
}
.search-retry-form { max-width: 420px; margin: 0 auto; }

/* ────────────────────────────────────────────────
   17. ARCHIVE / CATEGORY PAGE (was 16)
───────────────────────────────────────────────── */

/* The archive uses home-layout — styles inherited.
   Only archive-specific overrides needed: */
.archive-main { min-width: 0; } /* prevent grid blowout */

/* "Latest in [Category]" heading reuses .section-heading-accent style */
.archive-main .section-heading-accent {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  margin-bottom: 0;
}

/* ────────────────────────────────────────────────
   17. FOOTER
───────────────────────────────────────────────── */
/* React: bg-[#1e2633] pt-16 pb-12 mt-16 border-t border-gray-800 */
.site-footer {
  background: var(--footer-bg);
  color: #e5e7eb;
  padding-top: 4rem;    /* pt-16 = 4rem */
  padding-bottom: 3rem; /* pb-12 = 3rem */
  margin-top: 4rem;     /* mt-16 = 4rem */
  border-top: 1px solid #1f2937; /* border-gray-800 */
  width: 100%;          /* always full viewport width */
  text-align: left;     /* explicit — never inherits center from WordPress globals */
}

/* React: grid-cols-1 md:grid-cols-12 gap-10 pb-12 border-b border-gray-850
   Cols: md:col-span-4 | md:col-span-2 | md:col-span-2 | md:col-span-4 → ratio 2:1:1:2 */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;          /* gap-10 = 2.5rem */
  padding-bottom: 3rem; /* pb-12 = 3rem */
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: left;     /* columns always left-aligned */
}
/* React: grid-cols-1 md:grid-cols-12 — stays 1-col until 768px (NOT 640px) */
@media (min-width: 768px)  { .footer-grid { grid-template-columns: 2fr 1fr 1fr 2fr; } } /* md:grid-cols-12 4:2:2:4 */

/* CSS Grid items default to min-width:auto, preventing shrink below content size.
   At 768px each 1fr column is ~97px but "Important Pages" title is ~108px —
   min-width:0 lets the tracks contain their text without expanding past 100vw. */
.footer-grid > * { min-width: 0; }

.footer-brand-logo { margin-bottom: 1.25rem; }

/* React Footer.tsx: font-display text-2xl font-black */
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;     /* text-2xl = 24px */
  font-weight: 900;      /* font-black */
  color: #fff;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.footer-brand-name:hover { opacity: 0.8; }
.footer-brand-name em {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.footer-brand-dot { color: var(--accent); font-weight: 900; }

/* React: text-xs sm:text-sm font-light font-sans text-gray-300 */
.footer-tagline {
  font-family: var(--font-sans);
  font-size: 0.75rem;    /* text-xs = 12px */
  color: #d1d5db;        /* text-gray-300 */
  line-height: 1.65;
  max-width: 22rem;
  font-weight: 300;      /* font-light */
}
@media (min-width: 640px) { .footer-tagline { font-size: 0.875rem; } } /* sm:text-sm */

/* React: font-display text-xs sm:text-sm font-bold tracking-wider text-white */
.footer-col-title {
  font-family: var(--font-display);
  font-size: 0.75rem;    /* text-xs = 12px */
  font-weight: 700;
  letter-spacing: 0.05em; /* tracking-wider */
  color: #fff;
  margin-bottom: 1rem;
}
@media (min-width: 640px) { .footer-col-title { font-size: 0.875rem; } } /* sm:text-sm */

/* React: md:pl-4 on the "Important Pages" column (2nd child of footer-grid) */
@media (min-width: 768px) {
  .footer-grid > *:nth-child(2) { padding-left: 1rem; }
}

/* React: text-xs sm:text-sm text-gray-400 font-medium */
.footer-links { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-links a {
  font-size: 0.75rem;    /* text-xs = 12px */
  color: #9ca3af;
  font-weight: 500;
  text-decoration: none;
  transition: var(--transition);
}
@media (min-width: 640px) { .footer-links a { font-size: 0.875rem; } } /* sm:text-sm */
.footer-links a:hover { color: var(--accent); }

/* Legal links get amber color like React */
.footer-link-legal { color: #9ca3af !important; }
.footer-link-legal:hover { color: #f59e0b !important; }

/* ─── Trustpilot block (Col 4) ─── */
/* React: bg-gray-900/40 p-5 rounded-2xl border border-gray-800 */
.footer-trustpilot {
  background: rgba(17,24,39,0.4);  /* bg-gray-900/40 — slightly darker than footer */
  border: 1px solid rgba(255,255,255,0.07); /* border-gray-800 in dark context */
  border-radius: var(--radius-lg); /* rounded-2xl ≈ 1rem */
  padding: 1.25rem;    /* p-5 = 1.25rem */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-trustpilot-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-tp-star {
  width: 1.5rem;
  height: 1.5rem;
  fill: #00b67a;
  color: #00b67a;
  flex-shrink: 0;
}
/* React: font-sans font-bold text-lg tracking-tight text-white */
.footer-tp-name {
  font-family: var(--font-sans);
  font-size: 1.125rem;   /* text-lg = 18px */
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.footer-tp-stars {
  display: flex;
  gap: 0.375rem;
}
.footer-tp-star-box {
  width: 2rem;
  height: 2rem;
  background: #00b67a;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-tp-star-box svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: #fff;
}

/* React: text-xs font-mono text-gray-400 pt-1 */
.footer-tp-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;    /* text-xs = 12px */
  color: #9ca3af;
  line-height: 1.5;
  margin: 0;
}

/* React footer bottom: text-[10px] sm:text-xs text-gray-400 font-mono */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.625rem;   /* text-[10px] = 10px */
  color: #9ca3af;        /* text-gray-400 */
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
@media (min-width: 640px) { .footer-bottom { font-size: 0.75rem; } } /* sm:text-xs */
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; }
}

/* React: p-2.5 rounded-full bg-gray-800 hover:bg-gray-700 text-white */
.scroll-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f2937;  /* bg-gray-800 */
  border: none;
  color: #fff;          /* text-white */
  cursor: pointer;
  transition: var(--transition);
}
.scroll-to-top:hover {
  background: #374151;  /* hover:bg-gray-700 */
  color: #fff;
}

/* ────────────────────────────────────────────────
   18. 404
───────────────────────────────────────────────── */
.not-found {
  text-align: center;
  padding: clamp(4rem, 10vw, 8rem) 1rem;
}
.not-found h1 {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.not-found p {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 2rem;
}

/* ────────────────────────────────────────────────
   19. PAGINATION
───────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding-block: 3rem;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid var(--border-natural);
  color: var(--dark);
  text-decoration: none;
  transition: var(--transition);
}
.page-numbers:hover,
.page-numbers.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ────────────────────────────────────────────────
   20. UTILITY CLASSES
───────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-accent  { color: var(--accent); }
.bg-cream     { background: var(--cream); }
.border-top   { border-top: 1px solid var(--border-natural); }
.mt-section   { margin-top: clamp(2rem, 5vw, 3.5rem); }
.mb-section   { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

/* ────────────────────────────────────────────────
   21. WORDPRESS ADMIN BAR COMPENSATION
───────────────────────────────────────────────── */
/* When logged in, the admin bar is 32px tall on desktop (46px on mobile).
   WordPress already adds padding-top to <html> via .wp-toolbar.
   We just need to bump the sticky header's top offset so it snaps
   immediately below the admin bar instead of overlapping it. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}
/* Adjust sticky sidebar offset when admin bar is showing */
@media (min-width: 1024px) {
  /* Admin bar is 32px; sticky sidebar offset = admin-bar + same 112px */
  .admin-bar .home-layout > aside { top: calc(32px + 112px); }
}