@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Lora:wght@400;500;600;700&display=swap');

:root {
  --bg: #FAF8F5;
  --white: #FFFFFF;
  --ink: #1F2430;
  --muted: #666666;
  --accent: #D8C3A5;
  --border: #ECE7DF;
  --button: #1F2430;
  --button-hover: #333843;
  --max-width: 1180px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Lora', Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

p { color: var(--muted); }

.container {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 245, 0.92);
  border-bottom: 1px solid rgba(236, 231, 223, 0.8);
  backdrop-filter: blur(18px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  letter-spacing: 0.04em;
}

.logo strong {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

.logo span {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  color: var(--ink);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 180ms ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.search-icon {
      display: none;
  width: 19px;
  height: 19px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.search-icon svg { width: 19px; height: 19px; }

.mobile-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  margin: 6px 0;
  background: var(--ink);
}

.hero {
  padding: 46px 0 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.eyebrow {
  margin-bottom: 24px;
  color: #a68d6e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.98;
  margin: 0;
}

h1 {
  font-size: clamp(52px, 8vw, 86px);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.035em;
}

h3 {
  font-size: 31px;
  letter-spacing: -0.02em;
}

.hero p {
  max-width: 435px;
  margin: 26px 0 32px;
  font-size: 16px;
}

.button,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 27px;
  border: 1px solid var(--button);
  background: var(--button);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover {
  background: var(--button-hover);
  border-color: var(--button-hover);
  transform: translateY(-1px);
}

.button.secondary {
  background: transparent;
  color: var(--ink);
}

.button.secondary:hover {
  background: var(--ink);
  color: var(--white);
}

.hero-image {
  min-height: 620px;
  background: var(--white);
  overflow: hidden;
}

.hero-image img,
.page-hero-image img,
.card-image img,
.article-card img,
.split-image img,
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card img {
  object-position: center top;
}

.split-image img {
  object-position: center top;
}

section {
  padding: 84px 0;
}

.section-kicker {
  margin-bottom: 30px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.section-heading {
  margin-bottom: 38px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.section-heading p {
  max-width: 450px;
  margin: 0;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.category-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: var(--white);
}

.category-card img {
  height: 100%;
  transition: transform 380ms ease;
}

.category-card:hover img {
  transform: scale(1.025);
}

.category-title {
  position: absolute;
  inset: auto 18px 24px;
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0,0,0,0.3);
}

.category-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  margin: 12px auto 0;
  background: currentColor;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-card .image-wrap {
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
  background: var(--white);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #9b7d59;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-card h3 {
  font-size: 28px;
  line-height: 1.04;
}

.article-card p {
  margin: 0;
  font-size: 14px;
}

.editor-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  border-top: 1px solid var(--border);
  padding-top: 34px;
}

.editor-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: center;
}

.editor-item img {
  width: 76px;
  height: 76px;
  object-fit: cover;
}

.editor-item h4 {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.08;
}

.editor-item span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.quote-band {
  padding: 0;
}

.quote-inner {
  min-height: 250px;
  display: grid;
  place-items: center;
  background: linear-gradient(rgba(31, 36, 48, 0.34), rgba(31, 36, 48, 0.34)), url('../images/quote-still-life.svg') center/cover;
  color: var(--white);
  text-align: center;
}

.quote-inner blockquote {
  max-width: 780px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 70px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.newsletter-box {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 58px;
  background: var(--white);
  border: 1px solid var(--border);
}

.newsletter-box img {
  width: 100%;
  aspect-ratio: 1.35 / 0.75;
  object-fit: cover;
}

.newsletter-box h2 {
  font-size: clamp(38px, 4vw, 54px);
}

.newsletter-form {
  display: flex;
  margin-top: 26px;
  border: 1px solid var(--border);
  background: var(--white);
}

.newsletter-form input,
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
}

.newsletter-form input {
  min-height: 54px;
  padding: 0 18px;
}

.newsletter-form button {
  flex: 0 0 auto;
  border: 0;
}

.form-note {
  margin-top: 12px;
  font-size: 12px;
}

.site-footer {
  padding: 64px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--white);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
}

.footer-brand p {
  max-width: 290px;
  margin: 18px 0 0;
  font-size: 14px;
}

.footer-brand {
  display: none;
}

.footer-col h4 {
  margin: 0 0 17px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  margin: 8px 0;
  color: var(--muted);
  font-size: 14px;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  color: var(--muted);
  font-size: 12px;
}

.page-hero {
  padding: 72px 0 42px;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 68px;
  align-items: center;
}

.page-hero p {
  max-width: 530px;
  font-size: 17px;
}

.page-hero-image {
  height: 430px;
  overflow: hidden;
  background: var(--white);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 34px;
}

.filter-row a {
  padding: 9px 15px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.filter-row a.active,
.filter-row a:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.featured-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 42px;
  align-items: center;
  margin-bottom: 54px;
  padding: 34px;
  background: var(--white);
  border: 1px solid var(--border);
}

.featured-image {
  height: 470px;
  overflow: hidden;
}

.split-section {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
  align-items: center;
}

.split-image {
  height: 520px;
  overflow: hidden;
  background: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 62px;
  align-items: start;
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 42px;
  background: var(--white);
  border: 1px solid var(--border);
}

.field {
  border: 1px solid var(--border);
  padding: 15px 17px;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.article-shell {
  width: min(calc(100% - 40px), 790px);
  margin: 0 auto;
}

.article-header {
  padding: 74px 0 38px;
  text-align: center;
}

.article-header .article-meta {
  justify-content: center;
  margin-bottom: 18px;
}

.article-header p {
  max-width: 680px;
  margin: 24px auto 0;
  font-size: 18px;
}

.article-hero-img {
  width: min(calc(100% - 40px), 1120px);
  margin: 0 auto 66px;
  overflow: visible;
}

.article-hero-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.toc,
.affiliate-callout,
.author-box {
  margin: 42px 0;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
}

.toc h2,
.affiliate-callout h2,
.author-box h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
}

.article-content h2 {
  margin-top: 48px;
  margin-bottom: 16px;
  font-size: 42px;
  line-height: 1.05;
}

.article-content p,
.article-content li {
  color: var(--muted);
  font-size: 17px;
}

.article-content ul {
  padding-left: 20px;
}

.product-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}

.product-card {
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.product-card h3 {
  font-size: 24px;
}

.legal-page {
  padding: 74px 0;
}

.legal-page .article-shell {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 44px;
}

.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}



/* Shop page */
.section-kicker.left {
  text-align: left;
  margin-bottom: 16px;
}

.shop-intro-section {
  padding-top: 34px;
}

.shop-disclosure {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 54px;
  align-items: start;
  padding: 38px 44px;
  background: var(--white);
  border: 1px solid var(--border);
}

.shop-disclosure h2 {
  font-size: clamp(36px, 4vw, 52px);
}

.shop-disclosure p {
  margin: 0;
  font-size: 15px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
}

.shop-card-image {
  aspect-ratio: 1.12 / 1;
  overflow: hidden;
  background: var(--bg);
}

.shop-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 380ms ease;
}

.shop-card:hover .shop-card-image img {
  transform: scale(1.025);
}

.shop-card h3 {
  font-size: 31px;
  line-height: 1.02;
}

.shop-card p {
  margin: 0;
  font-size: 14px;
}

.shop-preview-section {
  padding-top: 20px;
}

.shop-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.shop-preview-card {
  display: grid;
  grid-template-columns: 125px 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
}

.shop-preview-card img {
  width: 125px;
  height: 125px;
  object-fit: cover;
}

.shop-preview-card span {
  display: block;
  margin-bottom: 9px;
  color: #9b7d59;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.shop-preview-card h3 {
  font-size: 26px;
  line-height: 1.04;
}

@media (max-width: 980px) {
  .nav-links {
    position: absolute;
    inset: 82px 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; }
  .mobile-toggle { display: block; }
  .search-icon { display: none; }

  .hero-grid,
  .page-hero-grid,
  .featured-layout,
  .split-section,
  .contact-grid,
  .newsletter-box,
  .shop-disclosure {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-image,
  .page-hero-image,
  .split-image,
  .featured-image,
  .article-hero-img {
    height: auto;
    min-height: auto;
    aspect-ratio: 1 / 1.08;
  }

  .category-grid,
  .article-grid,
  .shop-grid,
  .shop-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .editor-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 28px), var(--max-width)); }
  .nav-wrap { min-height: 72px; }
  .nav-links { inset: 72px 0 auto; }
  .logo strong { font-size: 24px; }
  .hero { padding-top: 28px; }
  section { padding: 58px 0; }
  h1 { font-size: 50px; }
  h2 { font-size: 40px; }
  .category-grid,
  .article-grid,
  .editor-list,
  .footer-grid,
  .product-row,
  .shop-grid,
  .shop-preview-grid {
    grid-template-columns: 1fr;
  }
  .category-card { min-height: 380px; }
  .section-heading { align-items: start; flex-direction: column; }
  .newsletter-box,
  .contact-form,
  .legal-page .article-shell,
  .featured-layout,
  .shop-disclosure { padding: 24px; }
  .newsletter-form { flex-direction: column; border: 0; gap: 12px; }
  .newsletter-form input { border: 1px solid var(--border); }
  .newsletter-form button { width: 100%; }
  .quote-inner { min-height: 280px; padding: 30px; }
  .page-hero { padding: 48px 0 22px; }
}

@media (max-width: 640px) {
  .shop-preview-card { grid-template-columns: 1fr; }
  .shop-preview-card img { width: 100%; height: auto; aspect-ratio: 1.2 / 1; }
}


/* Category directory update */
.category-directory-section {
  padding-top: 50px;
}

.category-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.category-directory-card {
  display: grid;
  grid-template-rows: 210px 1fr;
  background: var(--white);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}

.category-directory-card:hover {
  transform: translateY(-2px);
  border-color: #d8c3a5;
}

.category-directory-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.category-directory-card div {
  padding: 18px;
}

.category-directory-card span,
.mini-category-row a {
  color: #9b7d59;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.category-directory-card h3 {
  margin-top: 0;
  font-size: 27px;
  line-height: 1.02;
}

.category-directory-card p {
  margin: 10px 0 0;
  font-size: 13px;
}

.category-directory-card .directory-link {
  display: inline-block;
  margin-top: 18px;
}

.featured-guide-section {
  padding-bottom: 36px;
}

.style-guides-page .hero-text-link {
  display: inline-flex;
  margin-top: 8px;
}

.style-guides-page .featured-layout {
  margin-bottom: 0;
}

.style-guide-article-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 42px;
  padding: 24px 28px;
  border: 1px solid var(--border);
  background: var(--white);
}

.section-bridge p {
  margin: 0;
}

.compact-heading {
  margin-bottom: 18px;
}

.compact-heading h2 {
  font-size: clamp(36px, 4vw, 52px);
}

.mini-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
}

.mini-category-row a {
  display: inline-flex;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
}

.mini-category-row a:hover {
  border-color: var(--ink);
}

.category-page-intro {
  padding-top: 24px;
}

.category-hero h1 {
  max-width: 760px;
}

@media (max-width: 980px) {
  .category-directory-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .category-directory-grid {
    grid-template-columns: 1fr;
  }
  .category-directory-card {
    grid-template-rows: 220px 1fr;
  }
  .category-directory-card img {
    height: 220px;
  }

  .style-guide-article-grid {
    grid-template-columns: 1fr;
  }

  .section-bridge {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
  }
}


/* Pinterest-driven update */
.pinterest-proof-section {
  padding-top: 36px;
}

/* The Latest Style Guides section now follows Pinterest Favorites directly,
   so use one section gap instead of stacking both sections' vertical space. */
.home-page .pinterest-proof-section + section {
  padding-top: 0;
}

.pinterest-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.pinterest-proof-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
  min-height: 300px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  transition: transform 180ms ease, border-color 180ms ease;
}

.pinterest-proof-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.pinterest-proof-card img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  background: var(--bg);
}

.pinterest-proof-card span {
  display: block;
  margin-bottom: 12px;
  color: #9b7d59;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pinterest-proof-card h3 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.98;
}

.pinterest-proof-card p {
  margin: 18px 0;
  font-size: 14px;
}

.pinterest-proof-card strong {
  display: inline-flex;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.editorial-pill-row a.priority-pill {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

@media (max-width: 980px) {
  .pinterest-proof-grid,
  .pinterest-proof-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pinterest-proof-section { padding-top: 22px; }
  .pinterest-proof-card { min-height: auto; padding: 16px; gap: 16px; }
  .pinterest-proof-card img { min-height: auto; aspect-ratio: 1.35 / 1; }
  .pinterest-proof-card h3 { font-size: 34px; }
  .mini-category-row { gap: 8px; }
  .mini-category-row a { padding: 9px 10px; font-size: 9px; }
}

/* Compact mobile category directory */
@media (max-width: 640px) {
  .category-directory-section { padding-top: 34px; }
  .category-directory-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .category-directory-card {
    grid-template-rows: 92px auto;
  }
  .category-directory-card img {
    height: 92px;
  }
  .category-directory-card div {
    padding: 12px;
  }
  .category-directory-card span {
    font-size: 8px;
    letter-spacing: 0.10em;
  }
  .category-directory-card h3 {
    margin-top: 6px;
    font-size: 19px;
  }
  .category-directory-card p {
    display: none;
  }
}
/* Mobile refinement for homepage */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .container {
  width: calc(100% - 32px);
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

  .hero {
    padding: 48px 0 36px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 58px);
    line-height: 0.95;
  }

  .hero-image img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: top center;
  }

  .category-grid,
  .priority-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .category-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

  .pinterest-proof-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pinterest-proof-card {
    grid-template-columns: 38% 1fr;
    align-items: center;
  }

  .pinterest-proof-card img {
    height: 190px;
    object-fit: cover;
    object-position: top center;
  }

  .article-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .article-card img,
  .article-card .image-wrap img {
    height: 260px;
    object-fit: cover;
    object-position: top center;
  }

  .shop-preview-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .shop-preview-card {
    grid-template-columns: 34% 1fr;
    align-items: center;
  }

  .shop-preview-card img {
    height: 120px;
    object-fit: cover;
    object-position: top center;
  }

  .newsletter-card {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .newsletter-card img {
    height: 180px;
    object-fit: cover;
  }

  .site-footer .container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .category-card img {
  height: 260px;
  }

  .hero-image img {
    max-height: 460px;
  }

  .pinterest-proof-card img {
    height: 170px;
  }

  .article-card img,
  .article-card .image-wrap img {
    height: 230px;
  }
}
/* Fix mobile hero + category overlay */
@media (max-width: 768px) {
  .hero-image img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top;
  }

  .category-card {
    position: relative;
    display: block;
    overflow: hidden;
    background: #000;
  }

  .category-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  .category-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
    pointer-events: none;
  }

  .category-card .category-title {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 34px;
    z-index: 2;
    color: #ffffff;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  }
  
  .category-card {
  background: transparent !important;
}

.category-card img {
  height: 100% !important;
  object-fit: cover !important;
}

.category-card .category-title {
  bottom: 24px !important;
}
}

@media (max-width: 480px) {
  .category-card img {
    height: 280px;
  }
}
/* Balanced article hero image */
.article-hero-img {
  width: min(calc(100% - 40px), 760px) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto 66px !important;
}

.article-hero-img img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
}
/* Balanced page/category hero image */
.page-hero-image {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.page-hero-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 540px !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
}
/* Homepage hero image mobile fix */
@media (max-width: 768px) {
  .hero .hero-image {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .hero .hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}
@media (max-width: 768px) {
.pinterest-proof-card img {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.section-heading h2 {
  display: block !important;
  width: 100% !important;
  font-size: 38px !important;
  line-height: 1.02 !important;
  margin: 0 0 14px !important;
}

.section-heading p {
  width: 100% !important;
  max-width: none !important;
}
.beauty-articles-heading {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-top: 42px !important;
  margin-bottom: 28px !important;
}

.beauty-articles-heading .beauty-articles-title {
  flex: 1 1 auto;
  min-width: 0;
}

.beauty-articles-heading .eyebrow {
  margin-bottom: 14px;
}

.beauty-articles-heading h2 {
  display: block !important;
  font-size: 42px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}

.beauty-articles-heading > p {
  display: block !important;
  flex: 0 1 450px;
  width: auto !important;
  max-width: 450px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .beauty-articles-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .beauty-articles-heading > p {
    flex: none;
    width: 100% !important;
    max-width: none !important;
  }
}

.beauty-articles-heading + .article-grid .article-card img {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
.page-hero .page-hero-image {
  max-height: 520px !important;
  overflow: hidden !important;
}

.page-hero .page-hero-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  display: block !important;
}

.split-image {
  max-height: 560px !important;
  overflow: hidden !important;
}

.split-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 560px !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block !important;
  background: var(--white);
}
}
/* Homepage modest wear feature — preserves the original visual system */
.home-modest-feature {
  padding-top: 24px;
}

.home-modest-feature .featured-layout {
  margin-bottom: 0;
}

.home-modest-feature .featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.home-modest-feature h2 {
  margin: 10px 0 18px;
}

.home-modest-feature p {
  margin: 0 0 26px;
  max-width: 520px;
}

@media (max-width: 768px) {
  .home-modest-feature {
    padding-top: 8px;
  }

  .home-modest-feature .featured-layout {
    padding: 22px;
  }

  .home-modest-feature .featured-image {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}


/* Category feature grids: consistent desktop, tablet, and phone layout */
.category-feature-grid {
  align-items: start;
}

.category-feature-grid .article-card {
  min-width: 0;
}

.category-feature-grid .image-wrap {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  overflow: hidden;
}

.category-feature-grid .image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 980px) {
  .category-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .category-feature-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .category-feature-grid .image-wrap {
    aspect-ratio: 4 / 3;
  }

  .category-feature-grid .image-wrap img {
    height: 100% !important;
  }

  .category-feature-grid .article-card h3 {
    font-size: clamp(27px, 8vw, 34px);
  }
}


/* =========================================================
   Header menu, site search, and dark footer — July 2026
   ========================================================= */
:root {
  --footer-bg: #20242A;
  --footer-text: #F8F4EE;
  --footer-muted: #C9C1B8;
  --footer-line: rgba(248, 244, 238, 0.16);
  --ui-shadow: 0 24px 70px rgba(25, 28, 34, 0.18);
}

body.ui-locked {
  overflow: hidden;
}

/* Keep the right edge of the menu aligned with every .container section. */
.nav-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  width: min(calc(100% - 40px), var(--max-width));
}

.nav-links {
  justify-self: center;
}

.header-actions {
  justify-self: end;
  gap: 4px;
}

.search-icon,
.mobile-toggle {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.search-icon {
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.search-icon svg {
  width: 20px;
  height: 20px;
}

.mobile-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.mobile-toggle span {
  display: block;
  width: 25px;
  height: 1.5px;
  margin: 0;
  background: currentColor;
  transform-origin: center;
  transition: transform 220ms ease, opacity 180ms ease, width 180ms ease;
}

.mobile-toggle span:nth-child(2) {
  width: 19px;
}

.search-icon:hover,
.search-icon:focus-visible,
.mobile-toggle:hover,
.mobile-toggle:focus-visible {
  background: rgba(31, 36, 48, 0.07);
  outline: none;
}

.mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  width: 24px;
  transform: translateY(6.5px) rotate(45deg);
}

.mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  width: 24px;
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Right-side menu drawer */
.site-menu-backdrop,
.site-search-overlay {
  position: fixed;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.site-menu-backdrop {
  z-index: 90;
  background: rgba(24, 27, 32, 0.34);
  backdrop-filter: blur(4px);
}

.site-menu-backdrop.is-open,
.site-search-overlay.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.site-menu-drawer {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(430px, 100%);
  padding: 28px 38px 38px;
  overflow-y: auto;
  background: var(--bg);
  box-shadow: var(--ui-shadow);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.22,.8,.28,1);
}

.site-menu-backdrop.is-open .site-menu-drawer {
  transform: translateX(0);
}

.site-menu-top,
.site-search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-menu-top {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.site-menu-label,
.site-search-label {
  margin: 0;
  color: #9b7d59;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ui-close-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.ui-close-button:hover,
.ui-close-button:focus-visible {
  background: rgba(31, 36, 48, 0.07);
  outline: none;
}

.site-menu-main {
  display: grid;
  padding: 25px 0 27px;
  border-bottom: 1px solid var(--border);
}

.site-menu-main a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1.05;
}

.site-menu-main a::after {
  content: '→';
  font-family: var(--sans);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.site-menu-main a:hover::after,
.site-menu-main a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.site-menu-section {
  padding-top: 27px;
}

.site-menu-section h3 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-menu-category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
}

.site-menu-category-grid a,
.site-menu-connect a {
  color: var(--muted);
  font-size: 13px;
}

.site-menu-category-grid a:hover,
.site-menu-connect a:hover {
  color: var(--ink);
}

.site-menu-connect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 29px;
  padding-top: 23px;
  border-top: 1px solid var(--border);
}

/* Full-width editorial search overlay */
.site-search-overlay {
  z-index: 110;
  overflow-y: auto;
  background: rgba(250, 248, 245, 0.97);
  backdrop-filter: blur(16px);
}

.site-search-dialog {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto;
  padding: 34px 0 70px;
}

.site-search-top {
  min-height: 52px;
  border-bottom: 1px solid var(--border);
}

.site-search-heading {
  max-width: 850px;
  margin: 56px 0 28px;
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 76px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.site-search-form {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}

.site-search-form svg {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
}

.site-search-input {
  width: 100%;
  min-height: 76px;
  padding: 0 54px 0 18px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(25px, 4vw, 42px);
  outline: none;
}

.site-search-input::placeholder {
  color: #9a9894;
}

.site-search-clear {
  position: absolute;
  right: 0;
  display: none;
  padding: 9px 0 9px 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-search-clear.is-visible {
  display: block;
}

.site-search-status {
  margin: 24px 0 16px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.site-search-result {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 166px;
  padding: 23px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.site-search-result:hover,
.site-search-result:focus-visible {
  border-color: #c8b79e;
  background: var(--white);
  outline: none;
  transform: translateY(-2px);
}

.site-search-result span {
  color: #9b7d59;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-search-result h3 {
  margin-top: 26px;
  font-size: 25px;
  line-height: 1.06;
}

.site-search-empty {
  grid-column: 1 / -1;
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
}

.site-search-empty h3 {
  margin-bottom: 10px;
  font-size: 32px;
}

/* Deep ink footer, designed as a strong editorial ending. */
.site-footer {
  position: relative;
  padding: 76px 0 30px;
  border-top: 0;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--footer-line);
}

.footer-grid {
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 40px;
}

.footer-brand {
  display: block;
  padding-right: 18px;
}

.site-footer .logo strong,
.site-footer .footer-col h4 {
  color: var(--footer-text);
}

.site-footer .logo span,
.site-footer .footer-brand p,
.site-footer .footer-col a,
.site-footer .footer-bottom {
  color: var(--footer-muted);
}

.site-footer .footer-brand p {
  line-height: 1.75;
}

.site-footer .footer-col h4 {
  margin-bottom: 20px;
}

.site-footer .footer-col a {
  width: fit-content;
  margin: 9px 0;
  transition: color 160ms ease, transform 160ms ease;
}

.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible {
  color: var(--footer-text);
  outline: none;
  transform: translateX(3px);
}

.site-footer .footer-bottom {
  justify-content: flex-start;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-line);
  font-size: 11px;
  letter-spacing: 0.04em;
}

@media (max-width: 1100px) {
  .nav-wrap {
    gap: 18px;
  }

  .nav-links {
    gap: 23px;
  }

  .footer-grid {
    grid-template-columns: 1.3fr repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .nav-links {
    display: none !important;
  }

  .search-icon {
    display: inline-grid;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .footer-grid,
  .site-footer .container.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 520px;
    padding: 0 0 18px;
  }

  .site-search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .nav-wrap,
  .site-search-dialog {
    width: min(calc(100% - 28px), var(--max-width));
  }

  .nav-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .header-actions {
    gap: 0;
  }

  .search-icon,
  .mobile-toggle {
    width: 42px;
    height: 44px;
    min-width: 42px;
  }

  .site-menu-drawer {
    padding: 22px 22px 32px;
  }

  .site-menu-main a {
    min-height: 46px;
    font-size: 27px;
  }

  .site-menu-category-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .site-search-dialog {
    padding-top: 18px;
  }

  .site-search-heading {
    margin-top: 38px;
    font-size: 43px;
  }

  .site-search-input {
    min-height: 66px;
    padding-right: 48px;
    font-size: 27px;
  }

  .site-search-results {
    grid-template-columns: 1fr;
  }

  .site-search-result {
    min-height: 130px;
  }

  .site-footer {
    padding-top: 58px;
  }

  .footer-grid,
  .site-footer .container.footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-brand {
    grid-column: auto;
    padding-bottom: 13px;
  }

  .site-footer .footer-bottom {
    margin-top: 38px;
  }
}


/* =========================================================
   Visual refinements v4 — header mark and portrait-safe crops
   ========================================================= */

/* A compact monogram keeps the header clean while the full wordmark remains in the footer. */
.site-header .header-mark {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  width: 48px;
  height: 48px;
  color: var(--ink);
  font-family: var(--serif);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.site-header .header-monogram {
  display: block;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 1;
  transform: translateX(-1px);
}

.site-header .header-mark:hover,
.site-header .header-mark:focus-visible {
  color: #8d7354;
  outline: none;
}

/* Keep the desktop navigation optically centered between equal side columns. */
@media (min-width: 981px) {
  .site-header .nav-wrap {
    grid-template-columns: 120px minmax(0, 1fr) 120px;
  }

  .site-header .header-actions {
    width: 120px;
    justify-content: flex-end;
  }
}

/* Portrait images must start at the top so heads are never cut off in compact cards. */
.editor-item img,
.shop-preview-card img,
.category-directory-card img,
.shop-card-image img {
  object-position: top center;
}

/* On phones, use the same horizontal gutter as the page containers.
   Desktop alignment was already exact and remains unchanged. */
@media (max-width: 640px) {
  .site-header .nav-wrap,
  .site-search-dialog {
    width: calc(100% - 32px);
  }

  .site-header .header-mark {
    width: 44px;
    height: 44px;
  }

  .site-header .header-monogram {
    font-size: 31px;
  }
}


/* =========================================================
   Final discussion revisions v5 — restored wordmark
   ========================================================= */
/* Restore the original Heidi Yusrina wordmark in the header.
   Menu/search alignment and all v4 portrait-safe crops remain unchanged. */
.site-header .logo {
  justify-self: start;
  min-width: 0;
}

@media (min-width: 981px) {
  .site-header .nav-wrap {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .site-header .header-actions {
    width: auto;
  }
}

@media (max-width: 640px) {
  .site-header .logo strong {
    font-size: 22px;
  }

  .site-header .logo span {
    font-size: 7px;
    letter-spacing: 0.17em;
  }
}


/* Keep the full Capsule Wardrobe artwork readable at every screen size. */
.category-card.capsule-category-card img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #f7f2ec;
}


/* =========================================================
   Footer refinement v6 — brand alignment and social icons
   Only the footer brand block is adjusted.
   ========================================================= */
.site-footer .footer-grid {
  align-items: start;
}

.site-footer .footer-brand .logo {
  position: relative;
  top: -4px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
}

.footer-social-link {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid var(--footer-line);
  border-radius: 50%;
  color: var(--footer-muted);
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.footer-social-link svg {
  width: 17px;
  height: 17px;
}

.footer-social-link:first-child svg {
  fill: currentColor;
}

.footer-social-link:last-child svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--footer-text);
  border-color: currentColor;
  outline: none;
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .site-footer .footer-brand .logo {
    top: 0;
  }

  .footer-social {
    margin-top: 18px;
  }
}

/* =========================================================
   Footer refinement v58 — consistent editorial spacing
   Keeps the existing footer layout while aligning each column.
   ========================================================= */
.site-footer .footer-col {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.site-footer .footer-col h4 {
  margin: 0 0 11px;
}

.site-footer .footer-col a {
  max-width: 100%;
  margin: 0;
  line-height: 1.45;
}


/* =========================================================
   Responsive hardening v16 — narrow phones and long titles
   ========================================================= */
html {
  overflow-x: clip;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img,
picture,
video,
iframe,
svg {
  max-width: 100%;
}

.article-card,
.product-card,
.featured-copy,
.page-hero-grid > *,
.hy-container,
.hy-reading {
  min-width: 0;
}

.article-card h3 a,
.page-hero h1,
.hy-article-header h1,
.hy-look h2 {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 768px) {
  .page-hero-grid,
  .hero-grid,
  .featured-layout,
  .newsletter-box {
    width: 100%;
    min-width: 0;
  }

  .page-hero h1,
  .hero h1,
  .hy-article-header h1 {
    font-size: clamp(38px, 10.8vw, 52px) !important;
    line-height: 0.98 !important;
  }

  .article-card h3 {
    font-size: clamp(27px, 7.5vw, 34px);
    line-height: 1.04;
  }

  .article-grid,
  .category-feature-grid {
    gap: 34px;
  }

  .article-card .image-wrap,
  .beauty-articles-heading + .article-grid .image-wrap {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .article-card .image-wrap img,
  .beauty-articles-heading + .article-grid .image-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  .hy-hero img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .hy-toc,
  .hy-look,
  .hy-polish,
  .affiliate-callout,
  .author-box {
    max-width: 100%;
  }

  pre,
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 420px) {
  .container,
  .site-header .nav-wrap,
  .site-search-dialog {
    width: calc(100% - 24px);
  }

  .site-header .logo strong {
    font-size: 20px;
  }

  .site-header .logo span {
    font-size: 6.5px;
    letter-spacing: 0.12em;
  }

  .search-icon,
  .mobile-toggle {
    width: 40px;
    min-width: 40px;
  }

  .page-hero h1,
  .hero h1,
  .hy-article-header h1 {
    font-size: clamp(35px, 10.5vw, 44px) !important;
  }

  .button,
  .text-link {
    max-width: 100%;
  }
}

/* =========================================================
   UI consistency v17 — clear calls to action on every screen
   ========================================================= */
.page-hero .button {
  margin-top: 26px;
}

.article-card .text-link {
  align-self: flex-start;
  min-height: 44px;
}

@media (max-width: 640px) {
  .page-hero .button {
    width: 100%;
    padding: 12px 18px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }
}

/* =========================================================
   UI and mobile consistency v18
   ========================================================= */
.button,
.text-link,
.mini-category-row a,
.site-menu-category-grid a,
.footer-social-link,
.search-icon,
.mobile-toggle {
  min-height: 44px;
}

.text-link {
  align-items: center;
}

.category-directory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-directory-card,
.article-card,
.shop-card {
  min-width: 0;
}

.category-directory-card h3,
.article-card h3,
.shop-card h3 {
  overflow-wrap: break-word;
}

.article-card .image-wrap,
.shop-card-image {
  aspect-ratio: 4 / 5;
}

.article-card .image-wrap img,
.shop-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.category-directory-card img,
.page-hero-image img,
.hy-hero img {
  background: #f4f0ea;
}

.shop-grid,
.article-grid,
.category-directory-grid {
  align-items: stretch;
}

.shop-card .text-link,
.article-card .text-link {
  margin-top: auto;
}

@media (max-width: 980px) {
  .category-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .container,
  .hy-container {
    width: min(calc(100% - 32px), var(--max-width));
  }

  .page-hero,
  section {
    scroll-margin-top: 80px;
  }

  .page-hero-grid,
  .section-heading,
  .shop-disclosure,
  .featured-layout,
  .newsletter-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-heading {
    align-items: start;
    gap: 14px;
  }

  .article-card .image-wrap,
  .beauty-articles-heading + .article-grid .image-wrap,
  .shop-card-image {
    aspect-ratio: 4 / 5;
  }

  .article-meta,
  .category-directory-card span,
  .mini-category-row a,
  .section-kicker,
  .eyebrow {
    font-size: 10px;
  }

  .category-directory-card {
    grid-template-rows: auto 1fr;
  }

  .category-directory-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
  }

  .hy-toc ol {
    columns: 1 !important;
  }

  .hy-look {
    scroll-margin-top: 84px;
  }
}

@media (max-width: 640px) {
  .category-directory-grid,
  .article-grid,
  .shop-grid,
  .product-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-header .nav-wrap {
    width: calc(100% - 24px);
  }

  .site-header .logo strong {
    font-size: 20px;
  }

  .site-header .logo span {
    font-size: 8px;
    letter-spacing: 0.12em;
    line-height: 1.25;
  }

  .search-icon,
  .mobile-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .category-directory-card div,
  .shop-card {
    padding: 18px;
  }

  .category-directory-card h3,
  .shop-card h3 {
    font-size: clamp(27px, 8vw, 33px);
  }

  .article-card h3 {
    font-size: clamp(28px, 8vw, 34px);
  }

  .page-hero p,
  .section-heading p,
  .article-card p,
  .shop-card p {
    font-size: 14px;
  }

  .button,
  .text-link {
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .site-header .logo strong {
    font-size: 18px;
  }

  .site-header .logo span {
    font-size: 7.5px;
  }

  .header-actions {
    gap: 0;
  }

  .page-hero h1,
  .hero h1,
  .hy-article-header h1 {
    font-size: clamp(34px, 10.5vw, 40px) !important;
  }
}

/* =========================================================
   UI consistency v19 — subscriptions, category navigation,
   portrait-safe editorial cards, and mobile proportions
   ========================================================= */
.category-navigation-section {
  padding: 18px 0 26px;
  border-bottom: 1px solid var(--border);
}

/* A 2:3 frame matches the site's portrait fashion imagery and keeps shoes visible. */
.article-card .image-wrap,
.category-feature-grid .image-wrap,
.style-guide-article-grid .image-wrap,
.shop-card-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden;
  background: #f4f0ea;
}

.article-card .image-wrap img,
.category-feature-grid .image-wrap img,
.style-guide-article-grid .image-wrap img,
.shop-card-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.newsletter-section {
  padding: 48px 0 64px;
}

.newsletter-box {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 36px;
  align-items: center;
  padding: 32px 36px;
}

.newsletter-box img {
  width: 100%;
  height: clamp(180px, 20vw, 235px);
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 58%;
  background: #e8dfd3;
}

.newsletter-box h2 {
  margin: 0 0 12px;
  font-size: clamp(35px, 3.6vw, 48px);
  line-height: 1;
}

.newsletter-box > div > p:first-of-type {
  margin: 0;
}

.newsletter-form {
  margin-top: 18px;
}

.newsletter-form input,
.newsletter-form button {
  min-height: 52px;
}

.newsletter-box .form-note {
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .page-hero .page-hero-image {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: var(--white);
  }

  .page-hero .page-hero-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .article-card .image-wrap,
  .category-feature-grid .image-wrap,
  .style-guide-article-grid .image-wrap,
  .shop-card-image {
    aspect-ratio: 2 / 3 !important;
  }

  .newsletter-section {
    padding: 34px 0 46px;
  }

  .newsletter-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
  }

  .newsletter-box img {
    height: clamp(145px, 42vw, 190px);
  }

  .newsletter-box h2 {
    font-size: clamp(33px, 9.5vw, 42px);
  }
}

@media (max-width: 420px) {
  .newsletter-box {
    padding: 18px;
  }

  .newsletter-box img {
    height: 148px;
  }
}

/* =======================
   V24 responsive consistency pass
   V91: article-scoped selectors keep this block authoritative even though
   legacy per-article styles are parsed later in the document.
   ======================= */
html {
  width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img,
picture,
video,
iframe,
svg {
  max-width: 100%;
}

.hy-article-body .hy-reading > .hy-polish.hy-faq,
.hy-article-body .hy-reading > .hy-polish.hy-final-edit,
body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq,
body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-final-edit {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 44px;
  border: 1px solid var(--hy-line, var(--border));
  background: var(--hy-cream, var(--white));
  box-sizing: border-box;
}

.hy-article-body .hy-reading > .hy-polish.hy-faq,
body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq {
  margin-top: 54px !important;
  margin-bottom: 0 !important;
}

.hy-article-body .hy-reading > .hy-polish.hy-faq + .hy-polish.hy-final-edit,
body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq + .hy-polish.hy-final-edit {
  margin-top: 28px !important;
}

.hy-faq h3 {
  margin: 25px 0 8px;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(22px, 3vw, 27px);
  font-weight: 600;
  line-height: 1.2;
}

.hy-faq h3:first-of-type {
  margin-top: 24px;
}

.hy-faq h3 + p {
  margin-top: 0;
  color: var(--hy-muted, var(--muted));
}

/* Preserve the approved v89 accordion-answer rhythm before removing the
   redundant per-page v26/v47 blocks. */
body.hy-page .hy-faq details p {
  margin: 12px 0 0;
  color: var(--hy-muted, var(--muted));
}

.hy-faq details,
body.hy-page .hy-faq details {
  padding: 17px 0;
  border-top: 1px solid var(--hy-line, var(--border));
}

.hy-faq details:last-child,
body.hy-page .hy-faq details:last-child {
  border-bottom: 1px solid var(--hy-line, var(--border));
}

.hy-faq summary,
body.hy-page .hy-faq summary {
  cursor: pointer;
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(21px, 3vw, 24px);
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .container,
  .hy-container,
  .site-header .nav-wrap,
  .site-search-dialog,
  body.hy-page .container,
  body.hy-page .hy-container,
  body.hy-page .site-header .nav-wrap,
  body.hy-page .site-search-dialog {
    width: min(calc(100% - 28px), var(--max-width, 1180px));
    max-width: 100%;
    min-width: 0;
  }

  .hy-article-header,
  .hy-article-body,
  .hy-look,
  .hy-hero,
  .hy-toc,
  .hy-polish,
  .shoppingBox,
  .affiliate-callout,
  .newsletter-box,
  body.hy-page .hy-article-header,
  body.hy-page .hy-article-body,
  body.hy-page .hy-look,
  body.hy-page .hy-hero,
  body.hy-page .hy-toc,
  body.hy-page .hy-polish,
  body.hy-page .shoppingBox,
  body.hy-page .affiliate-callout,
  body.hy-page .newsletter-box {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hy-article-header,
  body.hy-page .hy-article-header {
    padding-top: 42px;
    padding-bottom: 34px;
  }

  .hy-article-body,
  body.hy-page .hy-article-body {
    padding-top: 40px;
    padding-bottom: 66px;
  }

  .hy-toc,
  body.hy-page .hy-toc {
    margin-top: 32px;
    margin-bottom: 52px;
    padding: 24px 20px;
  }

  .hy-toc ol,
  body.hy-page .hy-toc ol {
    columns: 1 !important;
  }

  .hy-look,
  body.hy-page .hy-look {
    margin-bottom: 62px;
  }

  .hy-hero img,
  .hy-look-figure img,
  .article-card .image-wrap img,
  .featured-image img,
  body.hy-page .hy-hero img,
  body.hy-page .hy-look-figure img,
  body.hy-page .article-card .image-wrap img,
  body.hy-page .featured-image img {
    display: block;
    width: 100%;
    height: auto;
  }

  .hy-article-body .hy-reading > .hy-polish.hy-faq,
  .hy-article-body .hy-reading > .hy-polish.hy-final-edit,
  body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq,
  body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-final-edit {
    padding: 26px 22px !important;
  }

  .hy-article-body .hy-reading > .hy-polish.hy-faq,
  body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq {
    margin-top: 38px !important;
  }

  .hy-article-body .hy-reading > .hy-polish.hy-faq + .hy-polish.hy-final-edit,
  body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq + .hy-polish.hy-final-edit {
    margin-top: 22px !important;
  }

  .hy-polish h2,
  body.hy-page .hy-polish h2 {
    overflow-wrap: anywhere;
  }

  .shoppingBox,
  .affiliate-callout,
  .newsletter-box,
  body.hy-page .shoppingBox,
  body.hy-page .affiliate-callout,
  body.hy-page .newsletter-box {
    overflow: hidden;
  }

  .button,
  .text-link,
  .samplePicksButton,
  body.hy-page .button,
  body.hy-page .text-link,
  body.hy-page .samplePicksButton {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .container,
  .hy-container,
  .site-header .nav-wrap,
  .site-search-dialog,
  body.hy-page .container,
  body.hy-page .hy-container,
  body.hy-page .site-header .nav-wrap,
  body.hy-page .site-search-dialog {
    width: calc(100% - 24px);
  }

  .hy-article-header h1,
  body.hy-page .hy-article-header h1 {
    font-size: clamp(34px, 10.2vw, 43px) !important;
    line-height: 1 !important;
  }

  .hy-article-body .hy-reading > .hy-polish.hy-faq,
  .hy-article-body .hy-reading > .hy-polish.hy-final-edit,
  body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-faq,
  body.hy-page .hy-article-body .hy-reading > .hy-polish.hy-final-edit {
    padding: 24px 18px !important;
  }
}

/* =========================================================
   V35 hero and mobile thumbnail consistency
   ========================================================= */

/* Match the five main page heroes to the homepage portrait treatment.
   Natural image height removes the side bands created by contained images. */
:is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero {
  padding: 46px 0 0;
}

:is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-grid {
  grid-template-columns: 0.95fr 1.05fr;
  gap: 70px;
}

:is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-image {
  width: 100%;
  height: auto !important;
  min-height: 620px !important;
  max-height: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

:is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: transparent !important;
}

/* About has a second editorial portrait; give it the same full portrait scale. */
.about-page .split-image {
  width: 100%;
  height: auto !important;
  min-height: 620px !important;
  max-height: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

.about-page .split-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: transparent !important;
}

@media (max-width: 980px) {
  :is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  :is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-image,
  .about-page .split-image {
    min-height: 0 !important;
  }
}

@media (max-width: 768px) {
  :is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero {
    padding: 48px 0 36px;
  }

  :is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-image,
  .about-page .split-image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  :is(.style-guides-page, .beauty-page, .shop-page, .about-page, .contact-page) .page-hero-image img,
  .about-page .split-image img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  /* All four Featured Categories use one crop system on phones. */
  .priority-category-grid .category-card img,
  .priority-category-grid .category-card.capsule-category-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: transparent !important;
  }

  /* The Modest Wear editorial image keeps the full head-to-toe composition. */
  .home-modest-feature .featured-image {
    width: 100%;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .home-modest-feature .featured-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Keep the nine Style Guides category thumbnails as upper-body editorial crops,
     matching the wide desktop thumbnail treatment instead of showing tall cards. */
  .style-guides-page .category-directory-card {
    grid-template-rows: auto 1fr !important;
  }

  .style-guides-page .category-directory-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 8 / 5 !important;
    object-fit: cover !important;
    object-position: center top !important;
    background: transparent !important;
  }
}

/* =========================================================
   V36 final approved refinements
   ========================================================= */

/* Keep the Contact form column exactly aligned with the Contact hero image. */
@media (min-width: 981px) {
  .contact-page .contact-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
  }
}

/* Featured Categories use their native 2:3 artwork ratio on phones.
   This prevents stretching, cropping, and empty bands around all four images. */
@media (max-width: 768px) {
  .priority-category-grid .category-card {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .priority-category-grid .category-card img,
  .priority-category-grid .category-card.capsule-category-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
    transform: none !important;
  }
}

/* =========================================================
   V38 category hero side-band removal without image enlargement
   ========================================================= */

/* The previous category hero used a wider 4:5/square image box with
   object-fit: contain, which exposed gray side bands. These rules shrink
   only the box to the already-visible photo dimensions. The photo itself
   keeps the same rendered height and scale: no zoom, no crop, no stretch. */
.category-landing-page .category-landing-hero {
  width: var(--category-hero-width) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  justify-self: center !important;
  overflow: visible !important;
  background: transparent !important;
}

.category-landing-page .category-landing-hero img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: transparent !important;
  transform: none !important;
}

@media (max-width: 768px) {
  .category-landing-page .category-landing-hero {
    width: var(--category-hero-mobile-width) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}


/* =========================================================
   V39 About desktop image alignment
   ========================================================= */

/* On desktop, the Core Philosophy portrait uses the same 1.05fr column width
   and gap as the About hero portrait. Both source images share the same
   735:1105 ratio, so their rendered width and height now match exactly. */
@media (min-width: 981px) {
  .about-page .split-section {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 70px;
  }
}

/* =========================================================
   V40 approved finishing refinements
   ========================================================= */

/* Show the complete native portrait artwork for all nine Style Guides
   directory thumbnails, preserving each full composition without cropping. */
.style-guides-page .category-directory-card {
  grid-template-rows: auto 1fr !important;
}

.style-guides-page .category-directory-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: transparent !important;
}

/* Match the secondary About and Contact headings to their page hero titles. */
.about-page .split-section h2,
.contact-page .contact-grid h2 {
  font-size: clamp(52px, 8vw, 86px);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

@media (max-width: 768px) {
  .about-page .split-section h2,
  .contact-page .contact-grid h2 {
    font-size: clamp(38px, 10.8vw, 52px) !important;
    line-height: 0.98 !important;
  }
}

@media (max-width: 360px) {
  .about-page .split-section h2,
  .contact-page .contact-grid h2 {
    font-size: clamp(34px, 10.5vw, 40px) !important;
  }
}

@media (max-width: 420px) {
  .about-page .split-section h2,
  .contact-page .contact-grid h2 {
    font-size: clamp(35px, 10.5vw, 44px) !important;
  }
}

/* =========================================================
   V41 category hero right-edge alignment
   ========================================================= */

/* Desktop/tablet landscape: align the right edge of each category hero
   with the outer right edge of the Category Note box below. The image
   dimensions and aspect ratio stay unchanged; only horizontal placement
   changes. Mobile remains centered by the existing max-width: 768px rule. */
@media (min-width: 769px) {
  .category-landing-page .page-hero-grid > .category-landing-hero {
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   V43 category title line balance
   ========================================================= */

/* Each span is one intentional desktop line. The spans return to normal
   inline text on phones, preserving the approved mobile wrapping. */
@media (min-width: 769px) {
  .category-landing-page .category-hero h1.balanced-category-title > span {
    display: block;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .category-landing-page .category-hero h1.balanced-category-title > span {
    display: inline;
    white-space: normal;
  }
}


/* =========================================================
   V44 category hero matches featured-card dimensions
   ========================================================= */

/* All nine category landing heroes use the same 2:3 frame as the
   featured article images below. Desktop equals one of three cards,
   tablet equals one of two cards, and phone equals the single card. */
.category-landing-page .category-landing-hero {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.category-landing-page .category-landing-hero img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: transparent !important;
  transform: none !important;
}

/* Same width as one column in the three-card grid below:
   (container width - two 28px gaps) / 3. */
@media (min-width: 981px) {
  .category-landing-page .page-hero-grid > .category-landing-hero {
    width: calc((min(calc(100vw - 40px), var(--max-width)) - 56px) / 3) !important;
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* The article grid has two equal columns between 641px and 980px. */
@media (min-width: 641px) and (max-width: 980px) {
  .category-landing-page .page-hero-grid > .category-landing-hero {
    width: calc((100% - 28px) / 2) !important;
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* The article grid becomes one column on phones. */
@media (max-width: 640px) {
  .category-landing-page .page-hero-grid > .category-landing-hero {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    margin-inline: 0 !important;
  }
}

/* =========================================================
   V51 homepage, Style Guides, and Beauty mobile consistency
   ========================================================= */

/* Preserve title case and remove the decorative line below the four
   homepage Featured Categories labels. */
.home-page .priority-category-grid .category-title {
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: none;
}

.home-page .priority-category-grid .category-title::after {
  display: none;
  content: none;
}

/* The category boxes use readable title case with genuinely centered labels. */
.home-page .editorial-pill-row {
  justify-content: center;
  align-items: stretch;
}

.home-page .editorial-pill-row a,
.style-guides-page .style-guide-category-navigation .mini-category-row a,
.beauty-page .beauty-category-navigation .mini-category-row a {
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  text-transform: none;
}

.home-page .editorial-pill-row a {
  flex: 1 1 148px;
}

.style-guides-page .style-guide-category-navigation .mini-category-row,
.beauty-page .beauty-category-navigation .mini-category-row {
  justify-content: center;
}

/* Modest Wear feature: retain the complete portrait, from head to toe. */
.home-page .home-modest-feature .featured-layout {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 5vw, 68px);
}

.home-page .home-modest-feature .featured-image {
  width: min(100%, 440px);
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  justify-self: center;
  overflow: hidden !important;
  background: var(--white);
}

.home-page .home-modest-feature .featured-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}

/* Editor's Picks: five consistent portrait thumbnails instead of square crops. */
.home-page .editor-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.home-page .editor-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.home-page .editor-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: center top;
  background: var(--white);
}

.home-page .editor-item h4 {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.08;
}

/* Shop preview: complete portrait artwork with the copy layered on the image. */
.home-page .shop-preview-card {
  position: relative;
  display: block;
  min-height: 0;
  padding: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  isolation: isolate;
}

.home-page .shop-preview-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 34% 0 0;
  background: linear-gradient(to top, rgba(20, 22, 27, 0.78), rgba(20, 22, 27, 0));
  pointer-events: none;
}

.home-page .shop-preview-card img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: contain !important;
  object-position: center top !important;
  background: var(--white);
}

.home-page .shop-preview-card > div {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: clamp(20px, 3vw, 32px);
  color: var(--white);
}

.home-page .shop-preview-card span {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.86);
}

.home-page .shop-preview-card h3 {
  color: var(--white);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.02;
  text-wrap: balance;
}

/* Featured guide: preserve the entire 2:3 capsule-wardrobe composition. */
.style-guides-page .featured-guide-section .featured-layout {
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(34px, 5vw, 68px);
}

.style-guides-page .featured-guide-section .featured-image {
  width: min(100%, 440px);
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  justify-self: center;
  overflow: hidden !important;
  background: var(--white);
}

.style-guides-page .featured-guide-section .featured-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}

@media (max-width: 980px) {
  .home-page .home-modest-feature .featured-layout,
  .style-guides-page .featured-guide-section .featured-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-page .editor-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-page .priority-category-grid .category-title {
    inset: auto 12px 22px;
    font-size: clamp(17px, 5.5vw, 21px);
    letter-spacing: 0.01em;
  }

  .home-page .editorial-pill-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 10px;
  }

  .home-page .editorial-pill-row a,
  .style-guides-page .style-guide-category-navigation .mini-category-row a,
  .beauty-page .beauty-category-navigation .mini-category-row a {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .style-guides-page .style-guide-category-navigation .mini-category-row,
  .beauty-page .beauty-category-navigation .mini-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .home-page .home-modest-feature .featured-layout,
  .style-guides-page .featured-guide-section .featured-layout {
    padding: 20px;
    gap: 28px;
  }

  .home-page .home-modest-feature .featured-image,
  .style-guides-page .featured-guide-section .featured-image {
    width: 100%;
  }

  .home-page .editor-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .home-page .editor-item h4 {
    font-size: clamp(24px, 7.5vw, 31px);
  }

  .home-page .shop-preview-card > div {
    padding: 24px;
  }

  .home-page .shop-preview-card h3 {
    font-size: clamp(29px, 8vw, 38px);
  }
}

/* =========================================================
   V52 navigation typography and alignment refinements
   ========================================================= */

/* Keep the four Featured Categories labels elegant and unbolded. */
.home-page .priority-category-grid .category-title {
  font-weight: 400;
}

/* Home category shortcuts: white cards, dark regular-weight labels,
   and true horizontal and vertical centering at every breakpoint. */
.home-page .editorial-pill-row a,
.home-page .editorial-pill-row a.priority-pill {
  align-items: center;
  justify-content: center;
  border-color: var(--border);
  background: var(--white);
  color: #181818;
  font-weight: 400;
  text-align: center;
}

.home-page .editorial-pill-row a:hover,
.home-page .editorial-pill-row a.priority-pill:hover {
  border-color: var(--ink);
  background: var(--white);
  color: #181818;
}

/* Style Guides and Beauty shortcuts begin at the left edge and use
   a regular font weight on desktop, tablet, and mobile. */
.style-guides-page .style-guide-category-navigation .mini-category-row,
.beauty-page .beauty-category-navigation .mini-category-row {
  justify-content: flex-start;
}

.style-guides-page .style-guide-category-navigation .mini-category-row a,
.beauty-page .beauty-category-navigation .mini-category-row a {
  align-items: center;
  justify-content: flex-start;
  font-weight: 400;
  text-align: left;
}

/* =========================================================
   V53 featured-card typography, contrast, and Shop alignment
   ========================================================= */

/* Match the supplied editorial reference: elegant serif labels sit over a
   darker lower image edge, with enough contrast on every source photograph. */
.home-page .priority-category-grid .category-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 42% 0 0;
  display: block;
  background: linear-gradient(
    to top,
    rgba(12, 13, 16, 0.72) 0%,
    rgba(12, 13, 16, 0.34) 48%,
    rgba(12, 13, 16, 0) 100%
  );
  pointer-events: none;
}

.home-page .priority-category-grid .category-title {
  z-index: 2;
  inset: auto 12px clamp(20px, 2.5vw, 30px);
  color: #fff;
  font-family: var(--serif);
  font-size: clamp(27px, 2.65vw, 39px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.98;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.46);
  text-transform: none;
}

.home-page .priority-category-grid .category-title::after {
  display: none;
  content: none;
}

/* Shop shortcuts follow the same regular-weight, left-aligned navigation
   treatment already used by Style Guides and Beauty. */
.shop-page .shop-category-strip .mini-category-row {
  justify-content: flex-start;
}

.shop-page .shop-category-strip .mini-category-row a {
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
}

@media (max-width: 640px) {
  .home-page .priority-category-grid .category-title {
    inset: auto 10px 20px;
    font-size: clamp(23px, 7vw, 31px);
    letter-spacing: -0.01em;
  }

  .shop-page .shop-category-strip .mini-category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 10px;
  }

  .shop-page .shop-category-strip .mini-category-row a {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* =========================================================
   V54 mobile Featured Categories alignment
   ========================================================= */

/* On phones, mirror the Shop preview cards: the lower image edge carries a
   deeper ink gradient and the serif title sits at the lower left. */
@media (max-width: 640px) {
  .home-page .priority-category-grid .category-card::after {
    inset: 34% 0 0;
    height: auto;
    background: linear-gradient(
      to top,
      rgba(20, 22, 27, 0.78) 0%,
      rgba(20, 22, 27, 0.34) 52%,
      rgba(20, 22, 27, 0) 100%
    );
  }

  .home-page .priority-category-grid .category-title {
    inset: auto 0 0 !important;
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    color: var(--white);
    font-family: var(--serif);
    font-size: clamp(29px, 8vw, 38px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.02;
    text-align: left;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
  }
}

/* =========================================================
   V55 homepage typography and article footer alignment
   ========================================================= */

/* Keep the four Featured Categories labels elegant while making them a
   quieter level below the section title. */
.home-page .priority-category-grid .category-title {
  font-size: clamp(22px, 2.15vw, 30px);
  line-height: 1.05;
}

/* Use one heading scale across the primary homepage sections. */
.home-page .section-heading h2,
.home-page .home-modest-feature h2 {
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em;
}

/* Match Related Guides and About Heidi Yusrina to the newsletter container. */
.style-guide-footer-shell {
  width: min(calc(100% - 40px), var(--max-width));
}

@media (max-width: 768px) {
  .home-page .section-heading h2,
  .home-page .home-modest-feature h2 {
    font-size: 38px !important;
    line-height: 1.02 !important;
  }

  .style-guide-footer-shell {
    width: min(calc(100% - 40px), var(--max-width));
  }
}

@media (max-width: 640px) {
  .home-page .priority-category-grid .category-title {
    font-size: clamp(22px, 6.6vw, 29px);
    line-height: 1.05;
  }

  .style-guide-footer-shell {
    width: min(calc(100% - 28px), var(--max-width));
  }
}

@media (max-width: 420px) {
  .style-guide-footer-shell {
    width: calc(100% - 28px);
  }
}

/* =========================================================
   V59 Contact and navigation consistency
   ========================================================= */

/* Keep the Contact portrait and form on the same column system as every
   primary page hero, so their outer edges align exactly on desktop. */
@media (min-width: 981px) {
  .contact-page .page-hero-grid,
  .contact-page .contact-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
  }

  .contact-page .page-hero-image,
  .contact-page .contact-form {
    width: 100%;
  }
}

/* Preserve the same full-width portrait and form alignment when both grids
   stack on tablets and phones. */
@media (max-width: 980px) {
  .contact-page .page-hero-grid,
  .contact-page .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .contact-page .page-hero-image,
  .contact-page .page-hero-image img,
  .contact-page .contact-form {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   V62 approved Heidi Yusrina header and Deep Petrol footer
   ========================================================= */

:root {
  --footer-bg: #245A5A;
  --footer-text: #FFFFFF;
  --footer-muted: #FFFFFF;
  --footer-line: rgba(255, 255, 255, 0.23);
}

/* Keep the transparent approved wordmark integrated with the page colour. */
.site-header {
  background: var(--bg);
  border-bottom-color: rgba(232, 224, 215, 0.9);
  backdrop-filter: none;
}

.site-header .nav-wrap {
  grid-template-columns: 340px minmax(0, 1fr) auto;
  min-height: 112px;
  gap: 24px;
}

.site-header .header-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  width: 282px;
  max-width: 100%;
  min-height: 88px;
  overflow: visible;
}

.site-header .header-brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site-header .nav-links {
  justify-self: end;
  justify-content: flex-end;
  gap: 27px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.site-header .header-actions {
  gap: 4px;
}

/* Keep the menu shortcut visible on desktop as well as tablet and mobile. */
.site-header .mobile-toggle {
  display: inline-flex;
}

/* Approved footer: Deep Petrol, white type, equal menu-column spacing. */
.site-footer {
  position: relative;
  padding: 76px 0 30px;
  border-top: 0;
  background: var(--footer-bg);
  color: var(--footer-text);
}

.site-footer::before {
  background: var(--footer-line);
}

.site-footer .container.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: 40px;
  row-gap: 40px;
}

.site-footer .footer-brand {
  display: block;
  min-width: 0;
  padding-right: 18px;
}

.site-footer .footer-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: static;
  width: 142px;
  height: 160px;
  margin-left: -21.5px;
  overflow: visible;
}

.site-footer .footer-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-footer .footer-social {
  gap: 11px;
  margin-top: 18px;
}

.site-footer .footer-social-link {
  color: var(--footer-text);
}

.site-footer .footer-col {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.site-footer .footer-col h4 {
  margin: 0 0 27px;
  color: var(--footer-text);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer .footer-col a {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 9px 0;
  color: var(--footer-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.site-footer .footer-bottom {
  justify-content: flex-start;
  margin-top: 56px;
  padding-top: 24px;
  border-top-color: var(--footer-line);
  color: var(--footer-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

@media (max-width: 1120px) {
  .site-header .nav-links {
    display: none !important;
  }

  .site-header .mobile-toggle {
    display: inline-flex;
  }

  .site-header .nav-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 102px;
  }

  .site-footer .container.footer-grid {
    grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(0, 1fr));
  }

  .site-footer .footer-col:nth-of-type(4) {
    grid-column: 2;
  }

  .site-footer .footer-col:nth-of-type(5) {
    grid-column: 3;
  }
}

@media (max-width: 760px) {
  .site-header .header-brand {
    width: 228px;
    min-height: 72px;
  }

  .site-footer {
    padding-top: 58px;
  }

  .site-footer .container.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }

  .site-footer .footer-brand {
    grid-column: 1 / -1;
    padding: 0 0 10px;
  }

  .site-footer .footer-col:nth-of-type(4),
  .site-footer .footer-col:nth-of-type(5) {
    grid-column: auto;
  }

  .site-footer .footer-emblem {
    width: 126px;
    height: 142px;
    margin-left: -13.5px;
  }

  .site-footer .footer-bottom {
    margin-top: 42px;
  }
}

@media (max-width: 480px) {
  .site-header .nav-wrap {
    min-height: 88px;
    gap: 4px;
  }

  .site-header .header-brand {
    width: 190px;
    min-height: 61px;
  }

  .site-header .header-actions {
    gap: 0;
  }

  .site-header .search-icon,
  .site-header .mobile-toggle {
    width: 36px;
    min-width: 36px;
    height: 38px;
    min-height: 38px;
  }

  .site-footer .container.footer-grid {
    grid-template-columns: 1fr;
    gap: 29px;
  }

  .site-footer .footer-brand,
  .site-footer .footer-col,
  .site-footer .footer-col:nth-of-type(4),
  .site-footer .footer-col:nth-of-type(5) {
    grid-column: auto;
  }

  .site-footer .footer-brand {
    padding-bottom: 12px;
  }

  .site-footer .footer-col h4 {
    margin-bottom: 20px;
  }

  .site-footer .footer-bottom {
    margin-top: 36px;
  }
}

/* =========================================================
   V64 — restore the live editorial header and harden footer
   ========================================================= */

/* Match the compact text-based header used on the live site. */
.site-header {
  background: rgba(250, 248, 245, 0.92);
  border-bottom-color: rgba(236, 231, 223, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header .nav-wrap {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 82px;
  gap: 28px;
}

.site-header .logo {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  justify-self: start;
  gap: 2px;
  letter-spacing: 0.04em;
}

.site-header .logo strong {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

.site-header .logo span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.site-header .nav-links {
  justify-self: center;
  justify-content: center;
  gap: 34px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Keep the menu shortcut that was restored in v63. */
.site-header .mobile-toggle {
  display: inline-flex;
}

/* Prevent the Deep Petrol panel or any grid child from widening the page. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.site-footer {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.site-footer .container,
.site-footer .container.footer-grid {
  max-width: min(var(--max-width), calc(100% - 40px));
}

.site-footer .footer-grid > * {
  min-width: 0;
}

@media (min-width: 981px) {
  .site-header .nav-links {
    display: flex !important;
  }
}

@media (max-width: 980px) {
  .site-header .nav-wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 78px;
    gap: 16px;
  }

  .site-header .nav-links {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .site-header .nav-wrap {
    min-height: 72px;
    gap: 8px;
  }

  .site-header .logo strong {
    font-size: 22px;
  }

  .site-header .logo span {
    font-size: 7px;
    letter-spacing: 0.17em;
  }

  .site-footer .container,
  .site-footer .container.footer-grid {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
  }
}

@supports not (overflow: clip) {
  html,
  body,
  .site-footer {
    overflow-x: hidden;
  }
}

/* =========================================================
   V66 — compact sticky header and centred mobile footer brand
   ========================================================= */

/* The full header remains unchanged at the top of the page. */
.site-header .nav-wrap,
.site-header .logo strong,
.site-header .logo span {
  transition: min-height 180ms ease, font-size 180ms ease, opacity 140ms ease;
}

/* Once scrolling begins, keep navigation available without covering the article. */
.site-header.is-compact {
  background: #faf8f5;
  border-bottom-color: rgba(36, 90, 90, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header.is-compact .nav-wrap {
  min-height: 64px;
}

.site-header.is-compact .logo strong {
  font-size: 24px;
}

.site-header.is-compact .logo span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* Keep the approved live-site header sizing at the top on phones. */
  .site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-right: 0;
    text-align: center;
  }

  .site-footer .footer-emblem {
    margin-right: 0;
    margin-left: 0;
  }

  .site-footer .footer-social {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 18px;
  }

  .site-header.is-compact .nav-wrap {
    min-height: 60px;
  }

  .site-header.is-compact .logo strong {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-wrap,
  .site-header .logo strong,
  .site-header .logo span {
    transition: none;
  }
}

/* =========================================================
   V73 — legal footer anchoring and nav-free hero spacing
   ========================================================= */

/* Keep the legal footer at the bottom of the viewport when zooming out or
   viewing a short legal page, without changing the footer's own dimensions. */
body.legal-layout-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.legal-layout-page > main {
  flex: 1 0 auto;
}

body.legal-layout-page > .site-footer {
  flex: 0 0 auto;
}

/* Beauty previously carried an extra heading offset for a removed shortcut
   row; keep its opening label aligned with the other follow-up headings. */
.beauty-page .hero-followup-section .beauty-articles-heading {
  margin-top: 0 !important;
}

/* =========================================================
   V68 — proportional footer brand and newsletter alignment
   ========================================================= */

/* Slightly reduce the emblem on every screen. */
.site-footer .footer-emblem {
  width: 126px;
  height: 142px;
}

/* Desktop: centre the emblem and social icons on the same visual axis as
   the header wordmark, while keeping the complete footer inside the shared
   newsletter/container boundary. */
@media (min-width: 981px) {
  .site-footer .container.footer-grid,
  .site-footer .container.footer-bottom {
    width: min(calc(100% - 40px), var(--max-width));
    max-width: var(--max-width);
    margin-right: auto;
    margin-left: auto;
  }

  .site-footer .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Match the visual width of the compact 24px HEIDI YUSRINA wordmark.
       Because both header and footer use the same container left edge,
       this puts the emblem and social icons on exactly the same centre axis. */
    width: 156px;
    max-width: 100%;
    padding-right: 0;
    text-align: center;
  }

  .site-footer .footer-emblem {
    margin-right: 0;
    margin-left: 0;
  }

  .site-footer .footer-social {
    justify-content: center;
    width: 100%;
  }

  .site-footer .footer-bottom {
    box-sizing: border-box;
    justify-content: flex-start;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .site-footer .footer-emblem {
    width: 112px;
    height: 126px;
  }
}

/* =========================================================
   V72 — quieter homepage, consistent editorial imagery,
   magazine reading measure, and restrained desktop motion
   ========================================================= */

/* Use one portrait frame and one restrained colour treatment for reusable
   editorial thumbnails. Full article imagery and page heroes stay untouched. */
.home-page .priority-category-grid .category-card,
.article-card .image-wrap,
.category-feature-grid .image-wrap,
.style-guide-article-grid .image-wrap,
.shop-card-image,
.home-page .shop-preview-card,
.home-page .editor-item img,
.style-guides-page .category-directory-card img {
  aspect-ratio: 2 / 3 !important;
}

.home-page .priority-category-grid .category-card {
  min-height: 0;
}

.home-page .priority-category-grid .category-card img,
.article-card .image-wrap img,
.category-feature-grid .image-wrap img,
.style-guide-article-grid .image-wrap img,
.shop-card-image img,
.home-page .shop-preview-card img,
.home-page .editor-item img,
.style-guides-page .category-directory-card img,
.pinterest-proof-card img,
.featured-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: brightness(1.01) contrast(0.985) saturate(0.94) sepia(0.018);
}

.style-guides-page .category-directory-card {
  grid-template-rows: auto 1fr !important;
}

.home-page .editor-item img,
.style-guides-page .category-directory-card img {
  height: auto !important;
}

/* A narrower reading measure and more regular paragraph rhythm make long
   articles feel closer to a printed magazine column. */
body.hy-page {
  --hy-reading: 700px;
}

body.hy-page .hy-reading {
  width: min(100%, var(--hy-reading)) !important;
}

body.hy-page .hy-reading :is(p, li) {
  line-height: 1.84 !important;
}

body.hy-page .hy-reading .hy-look {
  margin-bottom: 78px !important;
}

body.hy-page .hy-reading .hy-look > h2 {
  margin: 0 0 20px !important;
  line-height: 1.1 !important;
}

body.hy-page .hy-reading .hy-look > p {
  margin-top: 0;
  margin-bottom: 18px;
}

/* Fine desktop interaction: no card lift or heavy shadow, only a restrained
   crop zoom and a two-pixel directional cue. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .category-card img,
  .article-card .image-wrap img,
  .category-directory-card img,
  .shop-card-image img,
  .home-page .shop-preview-card img {
    transition: transform 300ms ease, filter 300ms ease;
  }

  .category-card:hover img,
  .article-card:hover .image-wrap img,
  .category-directory-card:hover img,
  .shop-card:hover .shop-card-image img,
  .home-page .shop-preview-card:hover img {
    transform: scale(1.012);
  }

  .category-directory-card:hover,
  .pinterest-proof-card:hover {
    transform: none;
  }

  .article-card .text-link,
  .category-directory-card .directory-link,
  .shop-card .text-link {
    transition: color 300ms ease, transform 300ms ease;
  }

  .article-card:hover .text-link,
  .category-directory-card:hover .directory-link,
  .shop-card:hover .text-link {
    transform: translateX(2px);
  }

  .category-title::after {
    transition: width 300ms ease;
  }

  .category-card:hover .category-title::after {
    width: 42px;
  }
}

@media (max-width: 640px) {
  body.hy-page .hy-reading .hy-look {
    margin-bottom: 68px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-card img,
  .article-card .image-wrap img,
  .category-directory-card img,
  .shop-card-image img,
  .home-page .shop-preview-card img,
  .article-card .text-link,
  .category-directory-card .directory-link,
  .shop-card .text-link,
  .category-title::after {
    transition: none !important;
  }

  .category-card:hover img,
  .article-card:hover .image-wrap img,
  .category-directory-card:hover img,
  .shop-card:hover .shop-card-image img,
  .home-page .shop-preview-card:hover img,
  .article-card:hover .text-link,
  .category-directory-card:hover .directory-link,
  .shop-card:hover .text-link {
    transform: none !important;
  }
}

/* =========================================================
   V76 — shared content-to-footer rhythm and header alignment
   ========================================================= */

/* Every full page ends with one direct section inside main. Standardising that
   section's lower padding creates one visual rhythm without changing the
   spacing between any earlier sections. */
main > section:last-child {
  margin-bottom: 0;
  padding-bottom: 64px;
}

/* The legal pages keep the v73 sticky-footer layout. Their page-level inline
   styles are intentionally overridden only for the final lower gap. */
body.legal-layout-page > main > .legal-page {
  padding-bottom: 64px !important;
}

/* Shift only the visible desktop menu group; tablet and phone navigation
   remains unchanged because it uses the menu drawer below this breakpoint. */
@media (min-width: 981px) {
  .site-header .nav-links {
    transform: translateX(14px);
  }
}

@media (max-width: 768px) {
  main > section:last-child,
  body.legal-layout-page > main > .legal-page {
    padding-bottom: 46px !important;
  }
}

/* =========================================================
   V79 — desktop navigation and corrected mobile hero alignment
   ========================================================= */

/* Move the complete desktop navigation group slightly farther right than v76.
   Tablet and phone navigation remains unchanged. */
@media (min-width: 981px) {
  .site-header .nav-links {
    transform: translateX(34px);
  }
}

@media (max-width: 768px) {
  /* Restore the shared phone container that the older Contact-specific
     width:100% rule overrode. This centres the hero, copy and form with the
     same 16px side space used by Shop, Beauty and About. */
  .contact-page .page-hero-grid,
  .contact-page .contact-grid {
    width: calc(100% - 32px);
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* =========================================================
   V85 — consolidated editorial hero and follow-up rhythm
   ========================================================= */

/* Use the exact eyebrow treatment already used by Pinterest Favorites. */
.home-page .featured-title {
  margin-top: 0;
  text-align: left;
}

/* Use the shared editorial container width, one-pixel thickness, and soft
   border colour. This real element stays below the hero image on phones. */
.home-page .hero-divider,
.style-guides-page .hero-divider,
.beauty-page .hero-divider,
.shop-page .hero-divider {
  display: block;
  height: 0;
  margin-top: 28px;
  border-bottom: 1px solid var(--border);
}

/* One desktop/tablet-landscape rule replaces the older 84px variants. */
@media (min-width: 769px) {
  :is(.home-page, .style-guides-page, .beauty-page, .shop-page)
  .hero-followup-section {
    padding-top: 84px;
  }
}

/* At 768px and below, the line sits 28px after the completed image. The
   remaining 204px of section padding plus the 1px rule gives an exact 233px
   image-to-heading distance on all four editorial pages. */
@media (max-width: 768px) {
  :is(.home-page, .style-guides-page, .beauty-page, .shop-page)
  :is(.hero, .page-hero) {
    padding-bottom: 0 !important;
  }

  /* Remove the legacy tablet aspect ratio from the Homepage wrapper so its
     normal-flow height expands to the complete portrait image. */
  .home-page .hero-image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  :is(.home-page, .style-guides-page, .beauty-page, .shop-page)
  .hero-followup-section {
    padding-top: 204px !important;
    clear: both;
  }
}

/* =========================================================
   V86 — phone-only editorial hero spacing
   ========================================================= */

/* Keep the existing tablet rhythm intact. On smartphones, the 28px gap,
   1px divider and 91px follow-up padding produce an exact 120px distance
   from the completed hero image to the opening heading. */
@media (max-width: 480px) {
  :is(.home-page, .style-guides-page, .beauty-page, .shop-page)
  .hero-followup-section {
    padding-top: 91px !important;
  }
}

/* =========================================================
   V88 — persistent compact header on article pages
   ========================================================= */

/* overflow-x:hidden creates a scrolling ancestor that prevents sticky
   positioning in some browsers. clip contains horizontal overflow without
   changing the article's scrolling container. */
body.hy-page {
  overflow-x: clip !important;
}

body.hy-page .site-header {
  position: sticky !important;
  top: 0;
  z-index: 50;
  visibility: visible;
  opacity: 1;
  transform: none !important;
  transition: background-color 220ms ease, border-color 220ms ease;
}

body.hy-page .site-header:not(.is-compact) {
  background: rgba(250, 248, 245, 0.98);
  border-bottom: 1px solid rgba(236, 231, 223, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.hy-page .site-header .nav-wrap,
body.hy-page .site-header .logo,
body.hy-page .site-header .logo strong,
body.hy-page .site-header .logo span {
  transition: min-height 220ms ease, font-size 220ms ease,
    gap 220ms ease, max-height 220ms ease, opacity 180ms ease;
}

body.hy-page .site-header .search-icon,
body.hy-page .site-header .mobile-toggle {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

/* Keep in-page article destinations clear of the persistent header. */
body.hy-page [id] {
  scroll-margin-top: 82px;
}

/* Preserve the approved v88 tablet header. Desktop now inherits the exact
   compact component used by the Homepage. */
@media (min-width: 761px) and (max-width: 980px) {
  body.hy-page .site-header.is-compact .nav-wrap {
    min-height: 65px;
  }

  body.hy-page .site-header.is-compact .logo strong {
    font-size: 24px;
  }

  body.hy-page .site-header.is-compact .logo span {
    position: static;
    width: auto;
    height: auto;
    max-height: 16px;
    overflow: visible;
    clip-path: none;
    opacity: 1;
    white-space: nowrap;
  }
}

/* Keep the approved v88 tablet and phone compact surface unchanged. */
@media (max-width: 980px) {
  body.hy-page .site-header.is-compact {
    background: rgba(250, 248, 245, 0.985);
    border-bottom-color: rgba(36, 90, 90, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}

@media (max-width: 760px) {
  /* The header itself measures 58px including its one-pixel lower border. */
  body.hy-page .site-header.is-compact .nav-wrap {
    min-height: 57px;
  }

  body.hy-page .site-header.is-compact .logo {
    gap: 0;
  }

  body.hy-page .site-header.is-compact .logo strong {
    font-size: 20px;
  }

  /* Preserve the tagline at the page top, then collapse only the tagline
     while reading so search and menu keep comfortable touch targets. */
  body.hy-page .site-header.is-compact .logo span {
    position: static;
    width: auto;
    height: auto;
    max-height: 0;
    overflow: hidden;
    clip-path: none;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
  }

  body.hy-page [id] {
    scroll-margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hy-page .site-header,
  body.hy-page .site-header .nav-wrap,
  body.hy-page .site-header .logo,
  body.hy-page .site-header .logo strong,
  body.hy-page .site-header .logo span {
    transition: none;
  }
}

/* =========================================================
   V94 — desktop-inspired, compact mobile content layout
   Header and footer components intentionally remain untouched.
   ========================================================= */

/* Keep the nine Style Guides entry points in the same three-column rhythm
   used on desktop. At phone width the complete 2:3 artwork still fits, while
   the whole menu becomes three rows instead of nine full-width cards. */
@media (max-width: 768px) {
  .style-guides-page main .category-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-grid,
  .category-landing-page main .category-feature-grid,
  .style-guides-page main .style-guide-article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .style-guides-page main .category-directory-card {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  .style-guides-page main .category-directory-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

@media (max-width: 640px) {
  /* Compact shared content rhythm without changing either site chrome edge. */
  :is(.home-page, .style-guides-page, .beauty-page, .shop-page,
      .category-landing-page, .about-page, .contact-page,
      .legal-layout-page, body:not([class])) main > section:not(.hero):not(.page-hero):not(.hero-followup-section) {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  :is(.about-page, .contact-page) main :is(.page-hero-grid, .split-section, .contact-grid) {
    gap: 24px;
  }

  /* STYLE GUIDES: a compact and fully clickable 3 × 3 category directory. */
  .style-guides-page main .category-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .style-guides-page main .category-directory-card div {
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: 9px 5px 10px;
    text-align: center;
  }

  .style-guides-page main .category-directory-card h3 {
    margin: 0;
    font-size: clamp(13px, 3.7vw, 16px);
    line-height: 1.08;
  }

  .style-guides-page main .category-directory-card p,
  .style-guides-page main .category-directory-card .directory-link {
    display: none;
  }

  /* Editorial cards keep their desktop relationship in a readable two-column
     phone grid. Descriptions remain available but are limited to two lines. */
  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-grid,
  .category-landing-page main .category-feature-grid,
  .style-guides-page main .style-guide-article-grid,
  .shop-page main .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 10px;
  }

  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-card {
    gap: 10px;
  }

  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-card h3 {
    font-size: clamp(19px, 5.4vw, 23px);
    line-height: 1.08;
  }

  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-card .article-meta {
    gap: 4px;
    font-size: 8px;
    letter-spacing: 0.08em;
    line-height: 1.45;
  }

  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-card p,
  .shop-page main .shop-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  :is(.home-page, .style-guides-page, .beauty-page,
      .category-landing-page, body:not([class])) main .article-card .text-link,
  .shop-page main .shop-card .text-link {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .shop-page main .shop-card {
    gap: 10px;
    padding: 12px;
  }

  .shop-page main .shop-card h3 {
    font-size: clamp(20px, 5.8vw, 24px);
    line-height: 1.06;
  }

  /* The smaller editorial list echoes its desktop row without forcing five
     full-width rows on a phone. */
  .home-page main .editor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }

  .home-page main .editor-item {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }

  .home-page main .editor-item img {
    width: 54px !important;
  }

  .home-page main .editor-item h4 {
    font-size: 16px;
  }

  .home-page main .editor-item span {
    font-size: 10px;
  }

  /* Long articles stay single-column for reading comfort, but their index,
     imagery, notes and related guides use space more efficiently. */
  body.hy-page main .hy-article-body {
    padding-top: 42px !important;
    padding-bottom: 72px !important;
  }

  body.hy-page main .hy-toc {
    margin-top: 34px !important;
    margin-bottom: 54px !important;
    padding: 22px 18px !important;
  }

  body.hy-page main .hy-toc ol {
    columns: 2 !important;
    column-gap: 24px !important;
    padding-left: 18px !important;
  }

  body.hy-page main .hy-toc li {
    margin: 0 0 8px !important;
    line-height: 1.45 !important;
  }

  body.hy-page main .hy-toc a {
    font-size: 11px !important;
  }

  body.hy-page main .hy-reading .hy-look {
    margin-bottom: 54px !important;
  }

  body.hy-page main .hy-look-figure {
    width: 92% !important;
    margin: 24px auto 22px !important;
  }

  body.hy-page main .hy-look-figure figcaption {
    font-size: 11px !important;
  }

  body.hy-page main .hy-styling-note {
    margin-top: 18px !important;
    padding: 15px 16px !important;
  }

  body.hy-page main .hy-polish {
    padding: 22px 20px !important;
  }

  body.hy-page main .hy-related {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  body.hy-page main .hy-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.hy-page main .hy-card {
    min-height: 210px !important;
    padding: 16px !important;
  }

  body.hy-page main .hy-card h3 {
    font-size: 21px !important;
  }

  body.hy-page main .hy-card p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* =========================================================
   V95 — lightweight editorial video hero
   The established copy, grid, header, footer and hero spacing remain intact.
   ========================================================= */

.home-page .hero-image.hero-video-frame {
  position: relative;
  min-height: 620px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #eee9e2;
  isolation: isolate;
}

.home-page .hero-video-frame .hero-video,
.home-page .hero-video-frame .hero-video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-page .hero-video-frame .hero-video {
  z-index: 1;
  display: block;
}

.home-page .hero-video-frame .hero-video-fallback {
  z-index: 0;
  display: none !important;
}

@media (max-width: 980px) {
  .home-page .hero-image.hero-video-frame {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-video-frame .hero-video {
    display: none !important;
  }

  .home-page .hero-video-frame .hero-video-fallback {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}