/* ==========================================================================
   Home & Living — Luxury Editorial Design System
   Bootstrap 5.3 compatible · Warm neutrals · Magazine typography
   ========================================================================== */

:root {
  --ivory: #faf8f4;
  --cream: #f3ede4;
  --warm-beige: #e5d9c8;
  --soft-clay: #c4a088;
  --terracotta: #a86540;
  --terracotta-l: #c4825c;
  --charcoal: #1e1b18;
  --charcoal-m: #3d3832;
  --charcoal-l: #6b635a;
  --champagne: #c9a962;
  --gold-light: #e8d5a3;
  --gold-muted: rgba(201, 169, 98, 0.18);

  --sand-50: var(--ivory);
  --sand-100: var(--cream);
  --sand-200: var(--warm-beige);
  --sand-300: #d4c8b8;
  --ink-900: var(--charcoal);
  --ink-700: var(--charcoal-m);
  --ink-500: var(--charcoal-l);
  --clay-600: var(--terracotta);
  --clay-500: var(--terracotta-l);
  --clay-100: #f5e8df;
  --sage-600: #7a8f72;
  --sage-100: #e8efe4;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  --shadow-soft: 0 4px 24px rgba(30, 27, 24, 0.06), 0 1px 3px rgba(30, 27, 24, 0.04);
  --shadow-lift: 0 20px 50px -12px rgba(30, 27, 24, 0.18);
  --shadow-gold: 0 8px 32px rgba(201, 169, 98, 0.22);

  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --header-h: 76px;
  --catbar-h: 52px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);

  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--ivory);
  --bs-body-color: var(--charcoal);
  --bs-border-radius: var(--radius-sm);
  --bs-link-color: var(--terracotta);
  --bs-link-hover-color: var(--terracotta-l);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--catbar-h) + 12px);
}

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--charcoal);
  font-size: 1.02rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection {
  background: rgba(201, 169, 98, 0.35);
  color: var(--charcoal);
}

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.visually-hidden-focusable:focus {
  position: fixed !important;
  top: 12px;
  left: 12px;
  z-index: 2000;
  width: auto !important;
  height: auto !important;
  padding: 0.6rem 1.1rem;
  clip: auto !important;
}

img {
  max-width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 0.5s var(--ease-out);
}

img[loading="lazy"]:not(.is-loaded) { opacity: 0.01; }
img.is-loaded { opacity: 1; }

h1, h2, h3, h4, .navbar-brand {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 500;
}

a {
  color: var(--terracotta);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

a:hover { color: var(--terracotta-l); }

.text-muted-soft { color: var(--ink-500); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-luxury { box-shadow: 0 10px 40px rgba(30, 27, 24, 0.08) !important; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 0.65rem;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), transparent);
}

.eyebrow--dark { color: var(--terracotta); }
.eyebrow--dark::before { background: linear-gradient(90deg, var(--terracotta), transparent); }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 500;
  padding: 0.65rem 1.5rem;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease-luxury), box-shadow 0.25s var(--ease-luxury), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }

.btn-clay {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-l));
  color: #fff;
  border: 0;
}

.btn-clay:hover {
  background: linear-gradient(135deg, var(--terracotta-l), var(--soft-clay));
  color: #fff;
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.btn-gold {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--champagne);
}

.btn-gold:hover {
  background: var(--gold-muted);
  border-color: var(--champagne);
  color: var(--charcoal);
  box-shadow: var(--shadow-gold);
}

.btn-ink,
.btn-luxury {
  background: linear-gradient(135deg, #1e1b18, #3d3832);
  color: #fff !important;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(30, 27, 24, 0.15);
}

.btn-ink:hover,
.btn-luxury:hover {
  background: linear-gradient(135deg, #3d3832, #1e1b18);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 27, 24, 0.25);
}

.btn-outline-ink {
  border: 1px solid var(--sand-300);
  color: var(--ink-700);
  background: transparent;
}

.btn-outline-ink:hover {
  border-color: var(--charcoal);
  color: var(--charcoal);
  background: var(--cream);
}

.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.88rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: rgba(255, 253, 248, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201, 169, 98, 0.15);
  transition: background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.4s var(--ease-luxury);
}

body.is-nav-scrolled .site-header {
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

body.is-nav-hidden .site-header {
  transform: translateY(-100%);
}

.navbar { padding: 0.75rem 0; }

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--charcoal);
}

.navbar-brand:hover { color: var(--terracotta); }

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--gold-muted), rgba(201, 169, 98, 0.08));
  color: var(--champagne);
  border: 1px solid rgba(201, 169, 98, 0.25);
  font-size: 1.1rem;
}

.brand-mark--lg {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.brand-text {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--charcoal);
  letter-spacing: -0.02em;
}

.navbar .nav-link,
.premium-link {
  position: relative;
  color: var(--ink-700) !important;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.9rem !important;
  border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease;
}

.navbar .nav-link:hover,
.premium-link:hover { color: var(--champagne) !important; background: transparent; }

.premium-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--champagne);
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.premium-link:hover::after,
.premium-link.active::after { width: 70%; }

.navbar-toggler,
.custom-toggler {
  border: 1px solid var(--sand-300);
  border-radius: 12px;
  padding: 0.4rem 0.65rem;
  color: var(--charcoal);
  background: transparent;
}

.navbar-toggler-icon {
  width: 1.15em;
  height: 1.15em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231e1b18' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(30, 27, 24, 0.04);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  color: var(--ink-500);
  transition: all 0.3s ease;
}

.search-form:focus-within {
  background: #fff;
  border-color: rgba(201, 169, 98, 0.4);
  box-shadow: 0 0 0 4px rgba(201, 169, 98, 0.1);
}

.search-icon,
.search-form .bi-search {
  color: var(--ink-500);
  font-size: 0.9rem;
  transition: color 0.25s ease;
}

.search-form:focus-within .search-icon,
.search-form:focus-within .bi-search { color: var(--champagne); }

.search-form input,
.search-input {
  border: 0;
  outline: none;
  background: transparent;
  width: 140px;
  font-size: 0.9rem;
  color: var(--charcoal);
  transition: width 0.35s var(--ease-luxury);
}

.search-form input::placeholder,
.search-input::placeholder { color: #a39c94; }

.search-form input:focus,
.search-input:focus { width: 200px; }

.premium-dropdown .dropdown-menu,
.dropdown-menu {
  border: 1px solid rgba(201, 169, 98, 0.15);
  border-radius: 16px;
  padding: 0.5rem;
  overflow: hidden;
  animation: dropFade 0.28s var(--ease-luxury) forwards;
}

.dropdown-item {
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-700);
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(201, 169, 98, 0.08);
  color: var(--champagne);
}

.dropdown-item.text-danger:hover {
  background: rgba(179, 38, 30, 0.08);
  color: #b3261e;
}

@keyframes dropFade {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Category bar ---------- */
.category-bar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 27, 24, 0.05);
}

.category-bar__inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: var(--catbar-h);
  padding: 0.5rem 0;
}

.category-bar__label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-right: 0.75rem;
  border-right: 1px solid var(--sand-200);
}

.category-bar__track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0;
  cursor: grab;
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 32px), transparent 100%);
}

.category-bar__track.is-dragging { cursor: grabbing; }
.category-bar__track::-webkit-scrollbar { display: none; }

.category-bar__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-700);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-bar__link:hover {
  background: var(--gold-muted);
  color: var(--terracotta);
}

.category-bar__link.is-active {
  background: var(--charcoal);
  color: var(--ivory);
}

/* ---------- Layout ---------- */
.page-offset { padding-top: calc(var(--header-h) + var(--catbar-h)); }
.page-shell { padding: 3rem 0 4.5rem; }

.flash-stack { position: relative; z-index: 10; }
.flash-stack .alert {
  border: 0;
  border-radius: var(--radius);
  border-left: 3px solid currentColor;
  box-shadow: var(--shadow-soft);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

.section-lead {
  max-width: 32rem;
  color: var(--ink-500);
  font-size: 1.05rem;
  margin: 0.75rem 0 0;
}

/* ---------- Post cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.card-grid--tight { gap: 1.5rem; }

.post-card {
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease-luxury), box-shadow 0.35s var(--ease-luxury);
}

@media (hover: hover) {
  .post-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
  .post-card:hover .post-card__media img { transform: scale(1.06); }
  .post-card:hover .post-card__media::after { opacity: 1; }
}

.post-card__media {
  display: block;
  overflow: hidden;
  position: relative;
}

.post-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(30, 27, 24, 0.15));
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.post-card__media img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-luxury);
}

.post-card__body {
  padding: 1.35rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.post-card__body h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.35;
}

.post-card__body h3 a { color: var(--charcoal); }
.post-card__body h3 a:hover { color: var(--terracotta); }
.post-card__body p { font-size: 0.92rem; margin: 0; }

.post-card__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-top: 0.5rem;
}

.badge-cat {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--gold-muted);
  color: var(--terracotta);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Sidebar ---------- */
.side-card {
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.side-card--accent {
  background: linear-gradient(145deg, var(--cream), var(--ivory));
  border-color: rgba(201, 169, 98, 0.15);
}

.side-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.side-list a {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  color: var(--charcoal);
  font-size: 0.94rem;
  line-height: 1.4;
}

.side-list img {
  width: 56px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: none;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.chip {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-700);
  font-size: 0.85rem;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
  background: var(--gold-muted);
  border-color: rgba(201, 169, 98, 0.3);
  color: var(--terracotta);
}

/* ---------- Article ---------- */
.article {
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

.breadcrumbs {
  font-size: 0.82rem;
  color: var(--ink-500);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.article__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.84rem;
  color: var(--ink-500);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sand-200);
}

.badge-featured {
  background: var(--gold-muted);
  color: var(--champagne);
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
}

.article__hero { margin: 0 0 2.5rem; }

.article__hero img {
  width: 100%;
  max-width: 680px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
  margin-inline: auto;
  box-shadow: var(--shadow-lift);
}

.article__body {
  font-size: 1.08rem;
  color: var(--ink-700);
  max-width: 680px;
  margin-inline: auto;
}

.article__body h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  margin: 2.5rem 0 1rem;
  color: var(--charcoal);
}

.article__body h3 {
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
  color: var(--charcoal);
}

.article__body img { border-radius: var(--radius); margin: 1.75rem 0; }

.article__body blockquote {
  border-left: 3px solid var(--champagne);
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--charcoal);
}

.video-frame {
  position: relative;
  padding-top: 56.25%;
  margin: 2.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--charcoal);
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery { margin-top: 3rem; }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.gallery__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: transform 0.35s var(--ease-luxury);
}

.gallery__grid a:hover img { transform: scale(1.04); }

.shop-block {
  margin-top: 3rem;
  padding: 2rem;
  background: linear-gradient(145deg, var(--cream), var(--ivory));
  border-radius: var(--radius);
  border: 1px solid rgba(201, 169, 98, 0.12);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.shop-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius-sm);
  padding: 1rem;
  transition: box-shadow 0.25s ease;
}

.shop-card:hover { box-shadow: var(--shadow-soft); }

.shop-card img,
.shop-card__placeholder {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex: none;
}

.shop-card__placeholder {
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--ink-500);
}

.shop-card h4 { font-size: 0.98rem; margin: 0 0 0.2rem; color: var(--charcoal); }
.shop-card .price { display: block; font-size: 0.85rem; color: var(--champagne); font-weight: 600; }
.shop-cta { font-size: 0.8rem; color: var(--terracotta); }

.share-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sand-200);
  font-size: 0.9rem;
  color: var(--ink-500);
}

.share-btn {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-700);
  transition: background 0.2s ease, color 0.2s ease;
}

.share-btn:hover {
  background: var(--gold-muted);
  color: var(--terracotta);
}

.related { margin-top: 4rem; }

/* ---------- Pagination / empty / search ---------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
}

.pager__btn {
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--sand-300);
  color: var(--ink-700);
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.pager__btn:hover {
  border-color: var(--charcoal);
  color: var(--charcoal);
  background: var(--cream);
}

.pager__status { font-size: 0.86rem; color: var(--ink-500); }

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
  border: 1px dashed var(--sand-300);
  border-radius: var(--radius-lg);
}

.empty-state i { font-size: 2.5rem; color: var(--champagne); }
.empty-state h1,
.empty-state h3 { font-family: var(--font-serif); margin: 1rem 0 0.35rem; }
.empty-state--lg { padding: 6rem 2rem; }

.search-block {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.search-block input {
  flex: 1;
  border: 1px solid var(--sand-300);
  border-radius: 999px;
  padding: 0.75rem 1.35rem;
  background: #fff;
  font-size: 0.95rem;
}

.search-block input:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

/* ---------- Auth ---------- */
.auth-wrap {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: 2rem 0;
}

.auth-card {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius-lg);
  padding: 2.75rem;
  box-shadow: var(--shadow-lift);
  text-align: center;
}

.auth-card h1 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  margin-bottom: 0.35rem;
}

.auth-card form { text-align: left; margin-top: 1.75rem; }
.back-link { display: inline-block; margin-top: 1.5rem; font-size: 0.88rem; color: var(--ink-500); }

/* ---------- Forms ---------- */
.field { margin-bottom: 1.2rem; }

.field label,
.form-check-label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
  display: inline-block;
}

.form-control,
.form-select {
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  background: #fff;
  color: var(--charcoal);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

.field-error { display: block; color: #b3261e; font-size: 0.82rem; margin-top: 0.3rem; }
.hint { display: block; color: var(--ink-500); font-size: 0.8rem; margin-top: 0.35rem; }
.form-check-input:checked { background-color: var(--terracotta); border-color: var(--terracotta); }

.form-actions {
  position: sticky;
  bottom: 0;
  padding: 1rem 0;
  margin-top: 1.5rem;
  background: linear-gradient(transparent, var(--ivory) 35%);
}

/* ---------- Public admin shell (unscoped tokens) ---------- */
.admin-shell {
  align-items: start;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius);
  padding: 1.15rem;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: 0.92rem;
}

.admin-nav a:hover { background: var(--cream); color: var(--charcoal); }
.admin-nav a.active { background: var(--gold-muted); color: var(--terracotta); font-weight: 500; }

.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.admin-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  margin: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.15rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-card i { font-size: 1.25rem; color: var(--champagne); margin-bottom: 0.35rem; }
.stat-num { font-family: var(--font-serif); font-size: 2.25rem; line-height: 1; }
.stat-label { font-size: 0.84rem; color: var(--ink-500); }

.panel {
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.panel--flush { padding: 0; overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.panel__head h2,
.panel-title { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 1rem; }

.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mini-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--sand-100);
}

.mini-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.mini-list li > div { display: flex; flex-direction: column; margin-right: auto; }
.mini-list img { width: 44px; height: 56px; object-fit: cover; border-radius: 8px; }
.mini-list a { color: var(--charcoal); font-weight: 500; }

.admin-table thead th {
  background: var(--cream);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--sand-200);
  padding: 0.9rem 1rem;
}

.admin-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--sand-100); vertical-align: middle; }
.cell-post { display: flex; align-items: center; gap: 0.85rem; }
.cell-post img { width: 40px; height: 52px; object-fit: cover; border-radius: 8px; }
.star-btn { border: 0; background: transparent; color: var(--ink-500); font-size: 1.05rem; }
.star-btn.is-on { color: var(--champagne); }

.preview-img { width: 130px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 0.6rem; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; }
.thumb { position: relative; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

.thumb__del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(30, 27, 24, 0.75);
  color: #fff;
  font-size: 0.65rem;
}

.modal-content { border: 0; border-radius: var(--radius); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--warm-beige);
  padding: 5rem 0 2.5rem;
  margin-top: 0;
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  color: var(--ivory);
  margin-bottom: 0.75rem;
}

.footer-title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.15rem;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}

.footer-list a { color: var(--warm-beige); font-size: 0.93rem; transition: color 0.2s ease; }
.footer-list a:hover { color: var(--gold-light); }

.site-footer .text-muted-soft { color: rgba(229, 217, 200, 0.65); }

.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 98, 0.25);
  color: var(--champagne);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--ease-luxury);
}

.footer-social a:hover {
  background: rgba(201, 169, 98, 0.15);
  border-color: var(--champagne);
  color: var(--gold-light);
  transform: translateY(-2px);
}

.footer-newsletter { margin-top: 1.5rem; }

.footer-newsletter__form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.footer-newsletter__form input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ivory);
  font-size: 0.88rem;
}

.footer-newsletter__form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.footer-newsletter__form input:focus { outline: none; border-color: var(--champagne); }

.footer-newsletter__form button {
  padding: 0.65rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--champagne);
  color: var(--charcoal);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.footer-newsletter__form button:hover { background: var(--gold-light); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
}

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.15rem;
  margin-top: 2.5rem;
}

.contact-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid rgba(30, 27, 24, 0.04);
}

.contact-card i { font-size: 1.35rem; color: var(--champagne); }
.contact-card h3 { font-family: var(--font-serif); font-size: 1.1rem; margin: 0.65rem 0 0.25rem; }

.contact-form {
  position: relative;
  margin-top: 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.contact-form__group { margin-bottom: 1.2rem; }

.contact-form__label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink-700);
  font-size: 0.86rem;
  font-weight: 600;
}

.contact-form__field {
  width: 100%;
  min-height: 52px;
  padding: 0.8rem 1rem;
  border: 1px solid var(--sand-300);
  border-radius: var(--radius-sm);
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 0.94rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__field:focus {
  outline: none;
  border-color: var(--champagne);
  box-shadow: 0 0 0 3px var(--gold-muted);
}

.contact-form__textarea { min-height: 165px; resize: vertical; }

.contact-form__button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-l));
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.contact-form__note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.15rem;
  font-size: 0.82rem;
  color: var(--ink-500);
}

.contact-form__note i { color: var(--champagne); }

.contact-form__flash {
  margin-bottom: 1.2rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}

.contact-form__flash--success { background: #f0faf2; color: #28633a; border: 1px solid #cfe5d4; }
.contact-form__flash--danger { background: #fff5f5; color: #963c3c; border: 1px solid #efd0d0; }

.contact-form__heading h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  margin: 0 0 0.4rem;
}

.contact-page-header { max-width: 720px; margin: 0 auto 2.5rem; text-align: center; }

/* ---------- Homepage cinematic hero (layout) ---------- */
.cinematic-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: calc(-1 * (var(--header-h) + var(--catbar-h)));
  padding-top: calc(var(--header-h) + var(--catbar-h));
  background: var(--ivory);
}

.cinematic-hero__bg,
.cinematic-hero__layers { position: absolute; inset: 0; }
.cinematic-hero__bg { z-index: 0; }
.cinematic-hero__layers { overflow: hidden; }

.cinematic-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.cinematic-hero__layer {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.cinematic-hero__layer--1 {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(201, 169, 98, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(168, 101, 64, 0.08), transparent 55%),
    linear-gradient(165deg, var(--cream) 0%, var(--ivory) 45%, var(--warm-beige) 100%);
}

.cinematic-hero__layer--2 {
  opacity: 0.35;
  background: radial-gradient(circle at 30% 20%, rgba(201, 169, 98, 0.2), transparent 40%);
}

.cinematic-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(250, 248, 244, 0.55) 0%,
    rgba(250, 248, 244, 0.75) 50%,
    rgba(250, 248, 244, 0.95) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.cinematic-hero__content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 10vw, 7rem);
}

.cinematic-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.cinematic-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.05;
  margin-bottom: 1.25rem;
  color: var(--charcoal);
}

.cinematic-hero__title em {
  font-style: italic;
  color: var(--terracotta);
}

.cinematic-hero__lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--ink-700);
  max-width: 28rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.cinematic-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.cinematic-hero__visual { position: relative; }

.hero__showcase {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}

.home-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.home-showcase__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--cream);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 2 / 3;
}

.home-showcase__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-luxury);
}

.home-showcase__item:hover img { transform: scale(1.05); }

.hero__showcase .home-showcase__item:nth-child(2) { transform: translateY(2.5rem); }
.hero__showcase .home-showcase__item:nth-child(3) { transform: translateY(-1.25rem); }

.hero__card {
  display: block;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.hero__card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-luxury);
}

.hero__card:hover img { transform: scale(1.04); }

.hero__card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem;
  background: linear-gradient(transparent, rgba(30, 27, 24, 0.88));
  color: #fff;
}

.hero__card-body h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0;
  color: #fff;
}

/* ---------- Homepage sections ---------- */
.home-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  position: relative;
}

.home-section--cream { background: var(--cream); }
.home-section--ivory { background: var(--ivory); }

.home-section--dark {
  background: var(--charcoal);
  color: var(--warm-beige);
}

.home-section--dark .section-title { color: var(--ivory); }
.home-section--dark .section-lead { color: rgba(229, 217, 200, 0.7); }
.home-section--dark .eyebrow { color: var(--champagne); }

.featured-magazine {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

.featured-magazine__hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 520px;
}

.featured-magazine__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.7s var(--ease-luxury);
}

.featured-magazine__hero:hover img { transform: scale(1.04); }

.featured-magazine__hero-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem;
  background: linear-gradient(transparent, rgba(30, 27, 24, 0.9));
  color: #fff;
}

.featured-magazine__hero-content h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0.5rem 0;
  color: #fff;
}

.featured-magazine__stack { display: grid; gap: 1.25rem; }

.featured-magazine__card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1.15rem;
  align-items: center;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(30, 27, 24, 0.06);
  transition: transform 0.3s var(--ease-luxury), box-shadow 0.3s ease;
}

.featured-magazine__card:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-soft);
}

.featured-magazine__card img {
  width: 100%;
  height: 100%;
  min-height: 140px;
  object-fit: cover;
}

.featured-magazine__card h4 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin: 0.35rem 0;
  line-height: 1.35;
}

.featured-magazine__card h4 a { color: var(--charcoal); }

.category-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid rgba(30, 27, 24, 0.06);
  overflow: hidden;
  transition: transform 0.35s var(--ease-luxury), box-shadow 0.35s ease, border-color 0.35s ease;
}

.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--gold-muted), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.category-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(201, 169, 98, 0.25);
}

.category-card:hover::before { opacity: 1; }

.category-card__icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-muted);
  color: var(--champagne);
  font-size: 1.35rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  transition: transform 0.35s var(--ease-luxury), background 0.35s ease;
}

.category-card:hover .category-card__icon {
  transform: scale(1.1);
  background: rgba(201, 169, 98, 0.25);
}

.category-card__name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--charcoal);
  position: relative;
  z-index: 1;
}

.category-card__count {
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-top: 0.35rem;
  position: relative;
  z-index: 1;
}

.card-grid.masonry-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 1.75rem;
}

.masonry-grid .post-card:nth-child(3n + 1) { grid-column: span 5; }
.masonry-grid .post-card:nth-child(3n + 2) { grid-column: span 4; margin-top: 2.5rem; }
.masonry-grid .post-card:nth-child(3n) { grid-column: span 3; margin-top: 1rem; }

.strip-section {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.5rem 0 1rem;
  -webkit-overflow-scrolling: touch;
}

.strip-section::-webkit-scrollbar { display: none; }

.strip-card {
  flex: 0 0 min(320px, 85vw);
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.strip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-luxury);
}

.strip-card:hover img { transform: scale(1.06); }

.strip-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(transparent 40%, rgba(30, 27, 24, 0.85));
  color: #fff;
}

.strip-card__overlay h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0.35rem 0 0;
  color: #fff;
}

.explore-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.explore-section__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.explore-section__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-section__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 169, 98, 0.3);
  border-radius: var(--radius-lg);
  margin: 1rem;
  pointer-events: none;
}

.layout-full .page-shell { max-width: 1200px; margin-inline: auto; }
.layout-magazine .article { border: 0; background: transparent; padding: 0; }

/* ---------- Luxury admin overlay (scoped so public buttons stay pills) ---------- */
.admin-shell {
  --admin-line: rgba(30, 27, 24, 0.13);
  --admin-soft-gold: rgba(201, 169, 98, 0.16);
  --admin-soft-clay: rgba(168, 101, 64, 0.1);
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 1px);
  background: var(--ivory);
}

.admin-shell .admin-nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-right: 1px solid var(--admin-line);
  border-radius: 0;
}

.admin-nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 10px 29px;
  border-bottom: 1px solid var(--admin-line);
  margin-bottom: 22px;
}

.admin-nav__monogram {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  color: var(--terracotta);
  font-size: 1.1rem;
}

.admin-nav__brand div { display: grid; line-height: 1.1; }
.admin-nav__brand strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }

.admin-nav__kicker,
.admin-nav__label,
.panel__eyebrow {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--terracotta);
}

.admin-nav__kicker { color: var(--charcoal); opacity: 0.62; font-size: 0.56rem; margin-bottom: 4px; }
.admin-nav__label { padding: 0 11px 8px; color: var(--charcoal); opacity: 0.58; }
.admin-nav__links,
.admin-nav__footer { display: grid; gap: 3px; }

.admin-shell .admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--charcoal);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s ease;
}

.admin-shell .admin-nav a i { width: 17px; text-align: center; color: var(--terracotta); font-size: 0.95rem; }
.admin-shell .admin-nav a:hover { background: var(--admin-soft-gold); color: var(--charcoal); }
.admin-shell .admin-nav a.active { background: var(--charcoal); box-shadow: 0 5px 14px rgba(30, 27, 24, 0.16); color: var(--ivory); }
.admin-shell .admin-nav a.active i { color: var(--champagne); }

.admin-nav__footer { margin-top: auto; }
.admin-nav__rule { height: 1px; background: var(--admin-line); margin: 13px 10px; }
.admin-nav__logout { color: var(--terracotta) !important; }

.admin-main { min-width: 0; padding: 44px clamp(22px, 4vw, 62px) 65px; }
.admin-main__inner { max-width: 1260px; margin: auto; }

.admin-shell .admin-head h1 {
  margin: 7px 0 0;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.admin-intro { margin: 11px 0 0; color: var(--charcoal); opacity: 0.68; font-size: 0.95rem; }

.admin-shell .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 26px; }

.admin-shell .stat-card {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 17px;
  padding: 24px;
  background: var(--cream);
  border: 1px solid var(--admin-line);
  border-radius: 4px;
}

.admin-shell .stat-card::after {
  content: "";
  position: absolute;
  right: -25px;
  bottom: -30px;
  width: 95px;
  height: 95px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  opacity: 0.65;
}

.stat-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  background: var(--ivory);
  border: 1px solid var(--champagne);
  border-radius: 50%;
  color: var(--terracotta);
}

.home-showcase-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

.home-showcase-admin-card {
  overflow: hidden;
  border: 1px solid var(--admin-line);
  background: var(--cream);
}

.home-showcase-admin-card__image { aspect-ratio: 3 / 4; overflow: hidden; }
.home-showcase-admin-card__image img { width: 100%; height: 100%; object-fit: cover; }

.home-showcase-admin-card__body {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 13px;
}

.empty-state--admin { border-color: var(--champagne); background: var(--cream); }

/* ---------- Scrollbar ---------- */
@media (hover: hover) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--cream); }
  ::-webkit-scrollbar-thumb {
    background: var(--sand-300);
    border-radius: 999px;
    border: 2px solid var(--cream);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--soft-clay); }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  :root { --header-h: 68px; }

  .nav-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch !important;
    margin-top: 1rem;
  }

  .search-form { width: 100%; margin: 0.5rem 0; }

  .search-form input,
  .search-input,
  .search-form input:focus,
  .search-input:focus { width: 100%; }

  .btn-luxury,
  .btn-ink { width: 100%; text-align: center; }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { position: static; flex-direction: row; flex-wrap: wrap; height: auto; }

  .category-bar { position: relative; top: 0; }
  .page-offset { padding-top: var(--header-h); }
  body.page-home .page-offset { padding-top: 0; }

  .cinematic-hero {
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
    min-height: auto;
  }

  .cinematic-hero__grid { grid-template-columns: 1fr; text-align: center; }
  .cinematic-hero__lead { margin-inline: auto; }
  .cinematic-hero__actions { justify-content: center; }
  .hero__showcase { margin-inline: auto; max-width: 420px; }

  .featured-magazine { grid-template-columns: 1fr; }
  .featured-magazine__hero { min-height: 400px; }
  .explore-section { grid-template-columns: 1fr; }

  .masonry-grid .post-card:nth-child(n) {
    grid-column: span 6;
    margin-top: 0;
  }

  .category-bar__label { display: none; }
  .category-bar__track { mask-image: none; cursor: auto; }
  .contact-form__row { grid-template-columns: 1fr; }

  .admin-shell .admin-nav {
    position: static;
    height: auto;
    padding: 17px;
    display: block;
    border-right: 0;
    border-bottom: 1px solid var(--admin-line);
  }

  .admin-nav__links,
  .admin-nav__footer { display: flex; flex-wrap: wrap; gap: 5px; }
  .admin-nav__label,
  .admin-nav__rule { display: none; }
  .admin-main { padding: 34px 24px 52px; }
}

@media (max-width: 575.98px) {
  .masonry-grid .post-card:nth-child(n) { grid-column: span 12; }
  .featured-magazine__card { grid-template-columns: 100px 1fr; }
  .footer-newsletter__form { flex-direction: column; }
  .admin-shell .stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .category-bar,
  .site-footer,
  .share-row,
  .admin-nav { display: none !important; }
  .page-offset { padding-top: 0; }
  body { background: #fff; }
}

/* ---------- 1. SIDEBAR GETS ITS OWN SCROLLBAR ---------- */

.admin-nav{
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c9a962 transparent;
}

.admin-nav::-webkit-scrollbar{
  width: 8px;
}
.admin-nav::-webkit-scrollbar-track{
  background: transparent;
}
.admin-nav::-webkit-scrollbar-thumb{
  background: #c9a962;
  border-radius: 999px;
}
.admin-nav::-webkit-scrollbar-thumb:hover{
  background: #a86540;
}

.admin-nav__footer{
  padding-bottom: 18px;
}

/* ---------- 3. MOBILE ---------- */

@media (max-width: 900px){
  .admin-nav{
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
  }
}
/* ==========================================================================
   ADD THIS AT THE VERY BOTTOM OF  app/static/css/style.css
   Nothing above needs to be deleted or edited.
   ========================================================================== */

/* ==========================================================================
   1. BROWSE BAR AS A VERTICAL SIDE RAIL
   Activated by the class  category-bar--rail  on the wrapper div.
   Remove that class in category_bar.html to instantly revert.
   ========================================================================== */

.category-bar--rail{
  position: fixed;
  top: var(--header-h);
  left: 0;
  bottom: 0;
  right: auto;
  width: 208px;
  z-index: 1030;

  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 0;
  border-right: 1px solid rgba(30, 27, 24, .07);

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: var(--champagne) transparent;
}

.category-bar--rail::-webkit-scrollbar{ width: 7px; }
.category-bar--rail::-webkit-scrollbar-track{ background: transparent; }
.category-bar--rail::-webkit-scrollbar-thumb{ background: var(--champagne); border-radius: 999px; }
.category-bar--rail::-webkit-scrollbar-thumb:hover{ background: var(--terracotta); }

/* The inner Bootstrap container must not centre or cap width in rail mode */
.category-bar--rail > .container{
  max-width: none;
  width: 100%;
  padding: 18px 14px 24px;
  margin: 0;
}

.category-bar--rail .category-bar__inner{
  display: block;
  min-height: 0;
  padding: 0;
}

.category-bar--rail .category-bar__label{
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 10px 10px;
  margin-bottom: 8px;
  border-right: 0;
  border-bottom: 1px solid var(--sand-200);
}

.category-bar--rail .category-bar__track{
  display: block;
  overflow: visible;
  mask-image: none;
  cursor: auto;
  padding: 0;
}

.category-bar--rail .category-bar__link{
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  margin-bottom: 3px;
  padding: 9px 11px;
  border-radius: 10px;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.category-bar--rail .category-bar__link i{
  flex: 0 0 16px;
  font-size: .9rem;
  color: var(--terracotta);
}

.category-bar--rail .category-bar__link.is-active i{ color: var(--champagne); }

/* Give every page room for the rail, and remove the old top offset */
@media (min-width: 992px){
  body:has(.category-bar--rail) .page-offset{
    padding-top: var(--header-h);
    padding-left: 208px;
  }
  body:has(.category-bar--rail) .site-footer{
    margin-left: 208px;
  }
  /* Fallback for browsers without :has() support */
  .category-bar--rail ~ .page-offset{
    padding-top: var(--header-h);
    padding-left: 208px;
  }
}

/* Below 992px the rail becomes a normal horizontal strip again */
@media (max-width: 991.98px){
  .category-bar--rail{
    position: relative;
    top: 0;
    width: auto;
    bottom: auto;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid rgba(30, 27, 24, .05);
  }
  .category-bar--rail > .container{
    padding: .5rem 12px;
    max-width: 1320px;
    margin-inline: auto;
  }
  .category-bar--rail .category-bar__inner{
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: var(--catbar-h);
  }
  .category-bar--rail .category-bar__label{
    display: none;
  }
  .category-bar--rail .category-bar__track{
    display: flex;
    align-items: center;
    gap: .4rem;
    overflow-x: auto;
  }
  .category-bar--rail .category-bar__link{
    width: auto;
    margin-bottom: 0;
    white-space: nowrap;
    border-radius: 999px;
  }
  .category-bar--rail ~ .page-offset,
  body:has(.category-bar--rail) .page-offset{
    padding-left: 0;
  }
  body:has(.category-bar--rail) .site-footer{ margin-left: 0; }
}

/* ==========================================================================
   2. CURATED GUIDES HERO WITH BACKGROUND PHOTO
   Put your picture at:  app/static/images/guides-hero.jpg
   ========================================================================== */

.cg-hero--photo{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(201, 169, 98, .35);
  padding-top: clamp(48px, 8vw, 92px);
  padding-bottom: clamp(48px, 8vw, 92px);
  box-shadow: 0 18px 46px rgba(30, 27, 24, .10);
}

.cg-hero--photo .cg-h1{
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

.cg-hero--photo .cg-subtitle{
  color: var(--charcoal);
  opacity: .82;
}

/* ==========================================================================
   3. ADMIN SIDEBAR - SCROLLBAR + TIDIER SPACING
   ========================================================================== */

.admin-shell .admin-nav{
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--champagne) transparent;
  padding: 22px 14px 20px;
}

.admin-shell .admin-nav::-webkit-scrollbar{ width: 8px; }
.admin-shell .admin-nav::-webkit-scrollbar-track{ background: transparent; }
.admin-shell .admin-nav::-webkit-scrollbar-thumb{
  background: var(--champagne);
  border-radius: 999px;
}
.admin-shell .admin-nav::-webkit-scrollbar-thumb:hover{ background: var(--terracotta); }

/* Tighter brand block so the links start higher up */
.admin-shell .admin-nav__brand{
  padding: 2px 8px 18px;
  margin-bottom: 16px;
}

.admin-shell .admin-nav__label{
  padding: 0 10px 6px;
  margin-top: 4px;
}

.admin-shell .admin-nav a{
  padding: 9px 11px;
}

/* Clear gap under Sign out so it never touches the screen edge */
.admin-shell .admin-nav__footer{
  padding-bottom: 20px;
}

.admin-shell .admin-nav__rule{
  margin: 10px 10px;
}
/* ==========================================================================
   MOBILE FIX - the browse bar was hidden BEHIND the fixed header
   Paste at the VERY BOTTOM of app/static/css/style.css

   IMPORTANT: delete any previous fix you pasted. Two competing blocks
   will fight each other.
   ========================================================================== */

@media (max-width: 991.98px) {

  /* THE CAUSE
     .site-header is position:fixed, so it takes up NO space in the page.
     On mobile the browse bar becomes position:relative, which puts it at
     the very top of the document - directly underneath the floating
     header. It was there the whole time, just covered.

     The fix is simply to push it down by the height of the header. */
  .category-bar,
  .category-bar--rail {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    margin-top: var(--header-h) !important;   /* clears the fixed header */
    z-index: 1040 !important;
    background: #ffffff !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(30, 27, 24, .08) !important;
    overflow: visible !important;
  }

  /* The page already reserved space for the header. The bar now occupies
     that space instead, so remove the duplicate padding. */
  .page-offset {
    padding-top: 0 !important;
    padding-left: 0 !important;
  }

  body.page-home .page-offset {
    padding-top: 0 !important;
  }

  /* The homepage hero pulled itself up under the header. It must not do
     that any more, or it will slide over the bar again. */
  .cinematic-hero {
    margin-top: 0 !important;
    padding-top: 1.5rem !important;
  }

  body:has(.category-bar--rail) .site-footer {
    margin-left: 0 !important;
  }

  /* Lay the links out in a horizontal scrolling row. */
  .category-bar--rail > .container {
    padding: .45rem 12px !important;
    max-width: 100% !important;
  }

  .category-bar--rail .category-bar__inner {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  .category-bar--rail .category-bar__track {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }

  .category-bar--rail .category-bar__track::-webkit-scrollbar {
    display: none !important;
  }

  .category-bar--rail .category-bar__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .3rem !important;
    width: auto !important;
    margin-bottom: 0 !important;
    padding: .4rem .85rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    font-size: .85rem !important;
  }
}




/* ==========================================================================
   ADMIN CONTENT EDITOR — visible scrollbar, taller box, drag-to-resize
   --------------------------------------------------------------------------
   Why this block exists:
   The global scrollbar rule further up this file paints the thumb in
   --sand-300 (#d4c8b8) on a --cream track (#f3ede4). Measured contrast is
   1.41:1 — far under the 3:1 minimum for a UI control — so the scrollbar in
   the post editor was effectively invisible. It was always there; it just
   could not be seen.

   That global rule also sits inside @media (hover: hover), so it is skipped
   entirely on touch screens.

   Everything below is additive. No existing selector is edited, no id, name,
   class or form field is renamed. Safe to delete as a block.
   ========================================================================== */

/* ---- 1. Every admin textarea: room to work + drag handle ---------------- */
.admin-shell textarea.form-control {
  min-height: 420px;
  line-height: 1.7;
  resize: vertical;              /* drag the bottom-right corner to grow it */
  overflow-y: auto;
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: #a86540 #f3ede4;             /* Firefox: thumb, track */
}

/* The short SEO description box should stay short. */
.admin-shell textarea#seo_description.form-control {
  min-height: 96px;
}

/* ---- 2. The main Content box: tallest, and always shows its bar --------- */
.admin-shell textarea#content.form-control {
  min-height: 560px;
  overflow-y: scroll;            /* bar is present even before it overflows */
  font-size: 0.97rem;
}

/* ---- 3. Chrome / Edge / Safari scrollbar --------------------------------
   Not wrapped in @media (hover: hover) on purpose, so it also renders on
   touch-screen laptops and tablets.                                        */
.admin-shell textarea.form-control::-webkit-scrollbar {
  width: 14px;
}

.admin-shell textarea.form-control::-webkit-scrollbar-track {
  background: #f3ede4;                          /* cream */
  border-left: 1px solid rgba(201, 169, 98, 0.45);   /* champagne hairline */
  border-radius: 0 12px 12px 0;
}

.admin-shell textarea.form-control::-webkit-scrollbar-thumb {
  background: #a86540;                          /* terracotta — 3.92:1 on cream */
  border: 3px solid #f3ede4;                    /* inset so it reads as a pill */
  border-radius: 999px;
  min-height: 48px;                             /* never a tiny unclickable nub */
}

.admin-shell textarea.form-control::-webkit-scrollbar-thumb:hover {
  background: #1e1b18;                          /* charcoal */
}

.admin-shell textarea.form-control::-webkit-scrollbar-thumb:active {
  background: #1e1b18;
}

/* ---- 4. Keep the gold focus ring from being clipped by the bar ---------- */
.admin-shell textarea.form-control:focus {
  border-color: #c9a962;
  box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.18);
}


/* ==========================================================================
   POST DETAIL — align "Visual story" and "Shop this look"
   --------------------------------------------------------------------------
   Problem: .shop-block had padding: 2rem while .gallery had none, so the
   SHOP eyebrow started 35px to the right of the GALLERY eyebrow directly
   above it. Two different left edges in the same column reads as crooked.

   Fix (Option A): give the gallery the SAME card treatment and the SAME
   padding, so the two sections are a matched pair and their inner text
   lines up with each other.

   Additive only. No selector above is edited.
   ========================================================================== */

.gallery {
  margin-top: 3rem;
  padding: 1.75rem;
  background: linear-gradient(145deg, var(--cream), var(--ivory));
  border: 1px solid rgba(201, 169, 98, 0.12);
  border-radius: var(--radius);
}

.shop-block {
  margin-top: 1.75rem;   /* tighter — they now read as one pair */
  padding: 1.75rem;      /* must match .gallery exactly */
}

/* auto-FIT (not auto-fill) so a short row stretches to fill the card
   instead of leaving an empty column and a ragged gap on the right. */
.gallery__grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}


/* ==========================================================================
   DRAFT / PUBLISHED
   --------------------------------------------------------------------------
   Styling for the Draft workflow: the switch in the post editor, the "Draft"
   badge in the posts list, and the preview banner on a draft's own page.
   Additive only.
   ========================================================================== */

/* The Published switch sits above Featured, separated by a hairline. */
.publish-toggle {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgba(201, 169, 98, 0.25);
}

.publish-toggle .form-check-input:checked {
  background-color: var(--champagne);
  border-color: var(--champagne);
}

/* "Draft" pill next to a title in the posts table. */
.draft-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Banner on a draft post's own page, so you can never mistake a draft
   preview for the live article. */
.draft-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--cream);
  border: 1px solid var(--terracotta);
  border-left: 4px solid var(--terracotta);
  color: var(--charcoal);
  font-size: 0.88rem;
  line-height: 1.55;
}

.draft-notice i {
  color: var(--terracotta);
  font-size: 1.05rem;
  line-height: 1.4;
}


/* ==========================================================================
   SEARCH — Curated Guide results
   Guides now appear in site search alongside posts. They render as a compact
   list above the post grid so the two content types stay visually distinct.
   Additive only.
   ========================================================================== */

.search-guides { margin-bottom: 2rem; }

.search-guide-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.search-guide {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.07);
  border-left: 4px solid var(--champagne);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s var(--ease-luxury),
              border-left-color 0.25s ease;
}

.search-guide:hover {
  box-shadow: var(--shadow-soft);
  transform: translateX(3px);
  border-left-color: var(--terracotta);
}

.search-guide img,
.search-guide__ph {
  width: 88px;
  height: 66px;
  flex: 0 0 88px;
  border-radius: 8px;
  object-fit: cover;
}

.search-guide__ph {
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--champagne);
  font-size: 1.3rem;
}

.search-guide__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.search-guide__text strong {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.3;
}

.search-guide__text small {
  font-size: 0.82rem;
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-guide__go { margin-left: auto; color: var(--terracotta); flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .search-guide img,
  .search-guide__ph { width: 60px; height: 48px; flex-basis: 60px; }
  .search-guide__text small { white-space: normal; }
}


/* ==========================================================================
   POST DETAIL — align the headline block with the reading column
   --------------------------------------------------------------------------
   Measured problem (1366px viewport):
       breadcrumbs / badge / title / meta ... left = 108, width = 1140
       hero image and article body ......... left = 338, width =  680
   The headline block ran 230px further left than the article it introduces,
   and the rule under the meta row stretched past the text below it. On a
   1200px window the title sat only 25px from the browser edge.

   Fix: give the headline block the same 680px measure as the body, so
   breadcrumbs, category badge, title, meta, hero and text all share one
   left edge. Gallery and Shop stay full width on purpose - they read as
   deliberate break-out sections rather than part of the text column.
   ========================================================================== */

.article__head {
  max-width: 680px;
  margin-inline: auto;
}

/* On phones the article ran edge-to-edge. `.page-shell` sets
   `padding: 3rem 0 4.5rem`, which zeroes the horizontal padding that
   Bootstrap's `.container` normally provides - invisible on desktop
   (the container is narrower than the window anyway) but on a phone the
   text touched both screen edges. Most of your Pinterest traffic will be
   on a phone, so this matters more than it looks. */
@media (max-width: 767.98px) {
  .container.page-shell {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}
/* ==========================================================================
   ADMIN EDITOR SCROLLBAR — recoloured for the light cinematic theme
   --------------------------------------------------------------------------
   theme-refresh.css lightens the palette (--terracotta becomes #e07a5f).
   Measured, that lighter tone only reaches 2.76:1 against the new cream -
   under the 3:1 minimum, which would bring the invisible-scrollbar problem
   straight back.

   #c45f48 is the --cg-terra-dark already defined in theme-refresh.css, so it
   is your own colour, and it measures 3.88:1. Best of both.

   These rules sit at the end of style.css, which _admin_base.html re-loads
   last on admin pages, so they win there.
   ========================================================================== */

.admin-shell textarea.form-control {
  scrollbar-color: #c45f48 var(--cream);
}

.admin-shell textarea.form-control::-webkit-scrollbar-track {
  background: var(--cream);
  border-left-color: var(--gold-muted);
}

.admin-shell textarea.form-control::-webkit-scrollbar-thumb {
  background: #c45f48;
  border-color: var(--cream);
}

.admin-shell textarea.form-control::-webkit-scrollbar-thumb:hover,
.admin-shell textarea.form-control::-webkit-scrollbar-thumb:active {
  background: var(--charcoal);
}
/* ==========================================================================
   STRIP ARROWS — make horizontally scrolling card rows reachable
   --------------------------------------------------------------------------
   .strip-section hides its scrollbar (scrollbar-width:none). Measured at
   1366px, the Kitchen strip had 564px of cards off-screen with no scrollbar
   and no buttons, so a mouse user could not reach them at all. On a 390px
   phone it was 1324px.

   These rules style the ‹ › buttons and add a soft fade on the right edge as
   a "there is more" cue. Additive only - the original .strip-section and
   .strip-card rules above are untouched.
   ========================================================================== */

.strip-wrap {
  position: relative;
}

/* Fade hint on the right edge, shown only while more cards remain. */
.strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1rem;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
  border-radius: 0 var(--radius) var(--radius) 0;
}

.strip-wrap.has-more::after { opacity: 1; }

.strip-nav {
  position: absolute;
  top: calc(50% - 0.5rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 169, 98, 0.45);
  border-radius: 50%;
  background: #fff;
  color: var(--terracotta);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s var(--ease-luxury), box-shadow 0.2s ease,
              background 0.2s ease, color 0.2s ease;
}

.strip-nav:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: var(--shadow-lift);
}

.strip-nav:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.strip-nav[hidden] { display: none; }

.strip-nav--prev { left: -18px; }
.strip-nav--next { right: -18px; }

/* Placeholder tile for a guide with no image yet. */
.strip-card__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--cream), var(--ivory));
  color: var(--champagne);
  font-size: 2rem;
}

@media (max-width: 991.98px) {
  .strip-nav--prev { left: 2px; }
  .strip-nav--next { right: 2px; }
  .strip-nav {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strip-nav { transition: none; }
}

/* ==========================================================================
   STRIP ARROWS — make horizontally scrolling card rows reachable
   --------------------------------------------------------------------------
   .strip-section hides its scrollbar (scrollbar-width:none). Measured at
   1366px, the Kitchen strip had 564px of cards off-screen with no scrollbar
   and no buttons, so a mouse user could not reach them at all. On a 390px
   phone it was 1324px.

   These rules style the ‹ › buttons and add a soft fade on the right edge as
   a "there is more" cue. Additive only - the original .strip-section and
   .strip-card rules above are untouched.
   ========================================================================== */

.strip-wrap {
  position: relative;
}

/* Fade hint on the right edge, shown only while more cards remain. */
.strip-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1rem;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
  border-radius: 0 var(--radius) var(--radius) 0;
}

.strip-wrap.has-more::after { opacity: 1; }

.strip-nav {
  position: absolute;
  top: calc(50% - 0.5rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 169, 98, 0.45);
  border-radius: 50%;
  background: #fff;
  color: var(--terracotta);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s var(--ease-luxury), box-shadow 0.2s ease,
              background 0.2s ease, color 0.2s ease;
}

.strip-nav:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: var(--shadow-lift);
}

.strip-nav:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.strip-nav[hidden] { display: none; }

.strip-nav--prev { left: -18px; }
.strip-nav--next { right: -18px; }

/* Placeholder tile for a guide with no image yet. */
.strip-card__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, var(--cream), var(--ivory));
  color: var(--champagne);
  font-size: 2rem;
}

@media (max-width: 991.98px) {
  .strip-nav--prev { left: 2px; }
  .strip-nav--next { right: 2px; }
  .strip-nav {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strip-nav { transition: none; }
}


/* ==========================================================================
   BROWSE BAR ARROWS
   --------------------------------------------------------------------------
   .category-bar__track scrolls sideways with scrollbar-width:none, exactly
   like the homepage strips. Measured with 13 categories: 714px of them were
   off-screen on desktop and unreachable with a mouse - including Kitchen.
   These rules position the same ‹ › buttons used by the strips.
   Additive only.
   ========================================================================== */

.category-bar__scroller {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.category-bar__scroller .strip-nav {
  top: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(30, 27, 24, 0.14);
}

.category-bar__scroller .strip-nav--prev { left: -4px; }
.category-bar__scroller .strip-nav--next { right: -4px; }

/* The fade cue belongs to the strips, not the slim browse bar. */
.category-bar__scroller::after { content: none; }

@media (max-width: 991.98px) {
  .category-bar__scroller .strip-nav { width: 28px; height: 28px; font-size: 0.8rem; }
  .category-bar__scroller .strip-nav--prev { left: -2px; }
  .category-bar__scroller .strip-nav--next { right: -2px; }
}