/* ==========================================================================
   Print and Color — Shared Stylesheet
   Mobile-first. Breakpoints: 768px (md), 1024px (lg), 1280px (xl)
   ========================================================================== */

/* --- Self-hosted Fonts --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/playfair-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design Tokens --- */
:root {
  --bg-page:      #fbfaf8;
  --bg-white:     #ffffff;
  --bg-zinc-50:   #fafafa;
  --bg-zinc-100:  #f4f4f5;
  --color-ink:    #09090b;   /* zinc-950 */
  --color-body:   #3f3f46;   /* zinc-700 */
  --color-muted:  #52525b;   /* zinc-600 */
  --color-subtle: #71717a;   /* zinc-500 */
  --color-faint:  #a1a1aa;   /* zinc-400 */
  --border:       #e4e4e7;   /* zinc-200 */
  --border-light: #f4f4f5;   /* zinc-100 */
  --border-dark:  #d4d4d8;   /* zinc-300 */
  --radius-sm:    2px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-3xl:   24px;
  --radius-full:  9999px;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:    0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --font-sans:    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif:   ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --serif:        var(--font-serif);
  --sans:         var(--font-sans);
  --max-w:        1152px;
  --accent-yellow:       #F6C453;
  --accent-yellow-light: #FFF7E2;
  --accent-yellow-pill:  #F6E7C8;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: #fbfaf8; color: var(--color-ink); line-height: 1.6; }
/* Match Tailwind Preflight: strip browser heading sizes/weights so explicit classes control everything */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
input, select { font-family: inherit; }

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;  /* px-5: 20px @16px root, 25px @20px root */
  padding-right: 1.25rem;
}

/* ==========================================================================
   LINE DRAWING SVG
   ========================================================================== */
.line-drawing {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   ICON SVG
   ========================================================================== */
.icon {
  display: block;
  flex-shrink: 0;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  background: #fbfaf8;
  border-bottom: 1px solid var(--border-light);
  border-bottom-color: #f4f4f5;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;    /* py-6: 24px @16px root, 30px @20px root */
  padding-bottom: 1.5rem;
  gap: 1.5rem;            /* gap-6: 24px @16px root, 30px @20px root */
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;  /* gap-3: 12px @16px root, 15px @20px root */
  flex-shrink: 0;
}

.site-logo__icon {
  width: 2.75rem;   /* w-11: 44px @16px root, 55px @20px root */
  height: 2.75rem;  /* h-11: 44px @16px root, 55px @20px root */
  border-radius: var(--radius-full);
  border: 2px solid var(--color-ink);
  background: var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.site-logo__img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  flex-shrink: 0;
}

.site-logo__text {
  display: flex;
  flex-direction: column;
}

.site-logo__name {
  font-family: var(--serif);
  font-size: 1.875rem; /* text-3xl */
  line-height: 1;
  letter-spacing: -0.025em;
}

.site-logo__tagline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 0.25rem; /* mt-1: 4px @16px root, 5px @20px root */
  color: var(--color-ink);
}

/* Nav */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2rem; /* gap-8: 32px @16px root, 40px @20px root */
}

.site-nav__list button {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.site-nav__list button:hover {
  opacity: 0.6;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4: 16px @16px root, 20px @20px root */
  color: var(--color-ink);
}

.header-actions button {
  display: flex;
  align-items: center;
  color: var(--color-ink);
}

.header-menu-icon {
  display: flex;
}

@media (min-width: 1024px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "logo nav search";
    gap: 2rem;
  }
  .site-logo        { grid-area: logo; }
  .site-nav         { grid-area: nav; display: flex; }
  .header-search-form { grid-area: search; margin-left: auto; width: min(420px, 100%); }
  .header-actions   { display: none; }
}

/* --- Desktop nav links (now <a> not <button>) --- */
.site-nav__list a {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.site-nav__list a:hover {
  opacity: 0.6;
}

/* --- Desktop dropdown --- */
.nav-item--dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.nav-dropdown-toggle:hover {
  opacity: 0.6;
}

.nav-dropdown-chevron {
  transition: transform 0.2s ease;
}

.nav-item--dropdown.is-open .nav-dropdown-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 8px 0;
  min-width: 180px;
  z-index: 200;
  list-style: none;
}

.nav-item--dropdown.is-open .nav-dropdown {
  display: block;
}

.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.nav-dropdown a:hover {
  background: var(--bg-zinc-50);
  opacity: 1;
}

/* --- Desktop nav: second-level submenu --- */
.nav-dropdown__item--has-children {
  position: relative;
}

.nav-dropdown__sub-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  opacity: 0.5;
}

.nav-dropdown__submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -8px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  padding: 8px 0;
  min-width: 160px;
  list-style: none;
  z-index: 210;
}

.nav-dropdown__item--has-children:hover .nav-dropdown__submenu,
.nav-dropdown__item--has-children:focus-within .nav-dropdown__submenu {
  display: block;
}

.nav-dropdown__submenu a {
  display: block;
  padding: 10px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.nav-dropdown__submenu a:hover {
  background: var(--bg-zinc-50);
}

/* --- Mobile menu accordion --- */
.mobile-menu__item--accordion {
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  text-align: left;
}

.mobile-menu__accordion-toggle:hover {
  background: var(--bg-zinc-50);
}

.mobile-accordion-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.mobile-menu__accordion-toggle[aria-expanded="true"] .mobile-accordion-chevron {
  transform: rotate(180deg);
}

.mobile-menu__sub {
  list-style: none;
  background: var(--bg-zinc-50);
  padding: 4px 0;
}

.mobile-menu__sub[hidden] {
  display: none;
}

.mobile-menu__sub-link {
  display: block;
  padding: 11px 24px 11px 36px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.mobile-menu__sub-link:hover {
  color: var(--color-ink);
  background: var(--border-light);
}

/* --- Mobile sub-category (second level) --- */
.mobile-menu__sub-item--has-children > .mobile-sub-header {
  display: flex;
  align-items: stretch;
}

.mobile-menu__sub-item--has-children > .mobile-sub-header > .mobile-menu__sub-link {
  flex: 1;
}

.mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--color-subtle);
  flex-shrink: 0;
}

.mobile-sub-chevron {
  transition: transform 0.2s ease;
}

.mobile-sub-toggle[aria-expanded="true"] .mobile-sub-chevron {
  transform: rotate(180deg);
}

.mobile-menu__sub-children {
  list-style: none;
  padding: 4px 0;
  background: #efefef;
}

.mobile-menu__sub-children[hidden] {
  display: none;
}

.mobile-menu__sub-link--child {
  padding-left: 48px;
  font-size: 0.85rem;
}

/* --- Header search toggle — mobile only (below 1024px) --- */
.header-search-toggle {
  display: flex;
  align-items: center;
  color: var(--color-ink);
}

@media (min-width: 1024px) {
  .header-actions .header-search-toggle { display: none; }
}

/* --- Header search form — inline flex item after site-nav, desktop only --- */
.header-search-form {
  display: none;
  align-items: stretch;
  max-width: 420px;
  border: 1px solid #d4d4d8;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 2.75rem;
}

@media (min-width: 1024px) {
  .header-search-form {
    display: flex;
  }
}

/* --- Mobile search bar — full-width row below header, toggled by JS --- */
.header-search-bar {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}

.header-search-bar[hidden] {
  display: none;
}

.header-search-form--bar {
  display: flex;
  max-width: 100%;
  flex: unset;
  width: 100%;
}

.header-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  color: var(--color-ink);
  background: #fff;
  padding: 0 1rem;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
}

.header-search-input::placeholder {
  color: #a1a1aa;
}

.header-search-btn {
  flex-shrink: 0;
  width: 2.75rem;
  background: var(--accent-yellow);
  border: none;
  border-left: 1px solid #d4d4d8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-ink);
  transition: background 0.15s, color 0.15s;
}

.header-search-btn:hover {
  background: var(--color-ink);
  color: #fff;
}

/* --- Mobile menu overlay --- */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 85vw);
  height: 100%;
  background: var(--bg-white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  color: var(--color-ink);
  padding: 4px;
}

.mobile-menu__close:hover {
  opacity: 0.6;
}

.mobile-menu__list {
  padding: 16px 0;
}

.mobile-menu__link {
  display: block;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink);
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu__link:hover {
  background: var(--bg-zinc-50);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem; /* text-lg */
  margin-bottom: 1rem; /* mb-4: 16px @16px root, 20px @20px root */
}

.hero__heading {
  font-family: var(--serif);
  font-size: 3rem; /* text-5xl */
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem; /* mb-6: 24px @16px root, 30px @20px root */
}

.hero__body {
  font-size: 1.125rem;
  color: var(--color-body);
  max-width: 36rem; /* max-w-xl: 576px @16px root, 720px @20px root */
  margin-bottom: 1.75rem; /* mb-7: 28px @16px root, 35px @20px root */
}

/* Hero search bar */
.hero-search {
  display: flex;
  width: 100%;
  max-width: 36rem; /* max-w-xl: 576px @16px root, 720px @20px root */
  border: 1px solid var(--color-ink);
  background: var(--bg-white);
  height: 3.5rem; /* h-14: 56px @16px root, 70px @20px root */
  border-radius: var(--radius-md);
  overflow: hidden;
  align-items: stretch;
}

.hero-search__input {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 3.5rem;
  padding: 0 1.25rem;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  color: var(--color-ink);
}

.hero-search__button {
  width: 4rem;
  height: 3.5rem;
  background: var(--accent-yellow);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
  border-left: 1px solid;
}

.hero-search__button:hover {
  background: var(--color-ink);
  color: #fff;
}

.hero-search__button svg {
  width: 22px;
  height: 22px;
  display: block;
}

@media (max-width: 375px) {
    .hero-search__button {
        width: 3.5rem;
        height: 3.5rem;
    }

    .hero-search__button svg {
        display: block;
        width: 22px;
        height: 22px;
        /* margin-left: -10px; */
    }
}

@media (min-width: 768px) {
  .hero-search__button svg {
    width: 22px;
    height: 22px;
  }
}

/* Trust items */
.trust-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;     /* gap-5: 20px @16px root, 25px @20px root */
  margin-top: 2rem; /* mt-8: 32px @16px root, 40px @20px root */
  max-width: 36rem; /* max-w-xl: 576px @16px root, 720px @20px root */
}

.trust-item {
  display: flex;
  gap: 0.75rem; /* gap-3: 12px @16px root, 15px @20px root */
  align-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink);
}

/* Hero right column */
.hero__right {
  position: relative;
}

.hero__art-overlay {
  position: absolute;
  top: -1.5rem;   /* -top-6: -24px @16px root, -30px @20px root */
  left: -0.75rem; /* -left-3: -12px @16px root, -15px @20px root */
  width: 9rem;    /* w-36: 144px @16px root, 180px @20px root */
  height: 7rem;   /* h-28: 112px @16px root, 140px @20px root */
  opacity: 0.7;
  pointer-events: none;
}

.hero__card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1.5rem; /* rounded-3xl: 24px @16px root, 30px @20px root */
  padding: 2rem;         /* p-8: 32px @16px root, 40px @20px root */
  box-shadow: var(--shadow-sm);
}

/* SVG inside hero card must use intrinsic aspect ratio (viewBox 220:160) */
.hero__card .line-drawing {
  height: auto;
}

@media (min-width: 768px) {
  .hero__heading {
    font-size: 3rem; /* scaled down for tablet column width; restored at 1024px */
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;    /* gap-8 */
    align-items: center;
  }

  .hero {
    padding-top: 5rem;    /* py-20 */
    padding-bottom: 5rem;
  }
}

@media (min-width: 1280px) {
  .hero__heading {
    font-size: 4.5rem;
  }
}

/* ==========================================================================
   SECTION: BROWSE BY CATEGORY
   ========================================================================== */
.section-categories {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 1px solid var(--border);
}

.section-heading-center {
  font-family: var(--serif);
  font-size: 1.875rem; /* text-3xl */
  text-align: center;
  margin-bottom: 8px;
}

.section-divider {
  width: 64px;
  height: 1px;
  background: var(--color-ink);
  margin: 0 auto 32px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.category-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.category-card:hover .category-card__art { transform: scale(1.03); }

.category-card__art {
  height: 10rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: #ffffff;
  overflow: hidden;
  transition: transform 0.3s;
}

.category-card__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.category-card__label {
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.section-popular__subtitle {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 4px;
  margin-bottom: 0;
}

/* ==========================================================================
   AD BAR
   ========================================================================== */
.ad-bar {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  height: 90px;
  max-width: 728px;
  width: 100%;
  border-radius: 0.25rem;
  border: 1px solid #e4e4e7;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #a1a1aa;
  text-transform: uppercase;
}

/* ==========================================================================
   SECTION: POPULAR COLORING PAGES + SIDEBAR
   ========================================================================== */
.section-popular {
  padding-bottom: 2.5rem;
}

.section-popular__inner {
  display: block;
  flex-direction: column;
  gap: 32px;
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.section-heading {
  font-family: var(--serif);
  font-size: 1.875rem; /* text-3xl */
  color: var(--color-ink);
}

.btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--color-ink);
  background: var(--accent-yellow-pill);
  transition: background 0.15s, color 0.15s;
}

.btn-view-all:hover {
  background: var(--color-ink);
  color: #fff;
}

/* Coloring card grid */
.coloring-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* Coloring card */
.coloring-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 0.75rem;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}

.coloring-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.coloring-card__art {
  width: 100%;
  aspect-ratio: 3 / 4; /* portrait */
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.orientation-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid #d4d4d8;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  z-index: 10;
}

.coloring-card__title {
  text-align: center;
  margin-top: 12px;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375;
}

/* Email signup box */
.signup-box {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 24px;
}

.signup-box__heading {
  font-family: var(--serif);
  font-size: 1.5rem; /* text-2xl */
  margin-bottom: 8px;
  line-height: 1.3;
}

.signup-box__body {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signup-form--row {
  flex-direction: column; /* stays column on compact */
}

.signup-input {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 16px; /* px-4 */
  height: 44px;    /* h-11 */
  font-size: 0.875rem;
  color: var(--color-ink);
  background: var(--bg-white);
  outline: none;
  width: 100%;
  min-width: 0;
  display: block;
}

.signup-input::placeholder {
  color: var(--color-faint);
}

.signup-input:focus {
  border-color: var(--color-ink);
}

.signup-btn {
  background: var(--accent-yellow);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 0 20px;
  height: 44px; /* h-11 */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

.signup-btn:hover {
  background: var(--color-ink);
  color: #fff;
}

.signup-fine {
  font-size: 11px;
  color: var(--color-faint);
  margin-top: 12px;
}

/* Signup with illustration (non-compact) */
.signup-box--illustrated {
  display: grid;
  gap: 24px;
  align-items: center;
}

.signup-box__illustration {
  height: 128px;
}

@media (min-width: 768px) {
  .signup-box--illustrated {
    grid-template-columns: 170px 1fr;
  }

  .signup-form--row {
    flex-direction: row;
  }

  .signup-form--row .signup-btn {
    width: auto;
  }

  .coloring-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .section-popular__inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: stretch;
  }

  .section-popular__sidebar {
    display: flex;
    flex-direction: column;
  }

  .section-popular__sidebar .signup-box {
    flex: 1;
  }

  .coloring-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* homepage: grid lives inside 1fr column next to 360px sidebar — 4 cols too narrow */
  .section-popular__inner .coloring-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .section-popular__inner .coloring-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   SECTION: NEW COLORING PAGES
   ========================================================================== */
.section-new {
  padding-bottom: 64px;
}

.new-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .new-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .new-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ==========================================================================
   FOOTER — Feature strip + 4-col grid
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-white);
  margin-top: 40px;
}

/* Top feature strip */
.footer-features {
  padding-top: 32px;
  padding-bottom: 32px;
}

.footer-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.footer-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.875rem;
}

.footer-feature__text {
  display: flex;
  flex-direction: column;
}

.footer-feature__label {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-feature__sub {
  font-size: 0.75rem;
  color: var(--color-subtle);
  margin-top: 2px;
}

/* Bottom 4-col grid */
.footer-main {
  border-top: 1px solid var(--border-light);
  padding-top: 28px;
  padding-bottom: 28px;
}

.footer-main__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
}

/* Logo and signup box span both columns on mobile */
.footer-main__grid > :first-child,
.footer-main__grid > :last-child {
  grid-column: 1 / -1;
}

/* Centre logo and nav content on mobile */
.footer-main__grid > :first-child .site-logo {
  justify-content: center;
}
.footer-nav {
  text-align: center;
}

.footer-nav h4 {
  font-weight: 600;
  margin-bottom: 12px;
  /* no explicit size — inherits 1rem body, matching React (no text-* class on h4) */
}

.footer-nav a,
.footer-nav button,
.footer-nav p {
  display: block;
  font-size: 0.875rem;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.footer-nav button:hover,
.footer-nav a:hover {
  opacity: 0.7;
}

/* wp_nav_menu() output inside footer-nav */
.footer-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav__list li { margin: 0; }
.footer-nav__list a {
  display: block;
  font-size: 0.875rem;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.footer-nav__list a:hover { opacity: 0.7; }

/* Custom logo */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.custom-logo {
  max-height: 50px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .footer-features__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Logo | Explore | Popular in one row, each sized to content, equal space between */
  .footer-main__grid {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
  }

  .footer-main__grid > :first-child {
    grid-column: auto;
  }

  .footer-main__grid > :last-child {
    grid-column: 1 / -1;
  }

  /* Restore left-align on tablet/desktop */
  .footer-main__grid > :first-child .site-logo {
    justify-content: flex-start;
  }
  .footer-nav {
    text-align: left;
  }
}

@media (min-width: 1024px) {
  .footer-main__grid {
    grid-template-columns: 1.3fr 1fr 1fr 1.4fr;
    gap: 24px 20px;
  }

  /* At desktop, signup is its own column — undo the full-width span */
  .footer-main__grid > :last-child {
    grid-column: auto;
  }
}

/* ==========================================================================
   TRUST BAR (homepage + category shared)
   ========================================================================== */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-white);
  padding: 20px 0;
  margin-top: 48px;
}

.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.trust-bar__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.trust-bar__label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.trust-bar__subtext {
  font-size: 0.75rem;
  color: var(--color-subtle);
}

@media (min-width: 480px) {
  .trust-bar__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .trust-bar__inner {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ==========================================================================
   CATEGORY PAGE — SHARED WRAPPER
   ========================================================================== */

/* Narrow container — max-w-6xl ratio (1152/1280 × 1600) */
.container--narrow {
  max-width: 1440px;
}

/* Archive wrapper — vertical rhythm */
.archive-wrap {
  padding-top: 3rem;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 0; /* spacing controlled per-element to match JSX mb-X values */
}

/* ==========================================================================
   CATEGORY HERO
   ========================================================================== */
.cat-hero {
  margin-bottom: 40px; /* mb-10 — hero → results-bar */
}

.cat-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cat-hero__left {
  display: flex;
  flex-direction: column;
}

/* Breadcrumb — mb-7 = 28px below */
.breadcrumb {
  font-size: 0.75rem;
  color: var(--color-subtle);
  margin-bottom: 1.5rem;
}

.breadcrumb a {
  color: var(--color-subtle);
}

.breadcrumb a:hover {
  color: var(--color-ink);
}

/* H1 — text-5xl mb-4 */
.cat-hero__heading {
  font-family: var(--serif);
  font-size: 3rem;   /* text-5xl = 48px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 16px;
}

/* Body — text-zinc-600 max-w-2xl */
.cat-hero__body {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.5;
  max-width: 42rem; /* max-w-2xl = 672px */
}

/* Right column — featured illustration — h-56 = 224px */
.cat-hero__art {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
}
.cat-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 640px) {
  .cat-hero__grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: 32px;
  }

  .cat-hero__art {
    width: 100%;
    height: 224px;
    margin: 0;
  }
}

@media (min-width: 1024px) {
  .cat-hero__heading {
    font-size: 3rem;
  }
}

/* ==========================================================================
   RESULTS BAR
   ========================================================================== */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px; /* mb-5 — results-bar → coloring grid */
}

.results-bar__count {
  font-size: 0.875rem;
  color: var(--color-ink);
}

.results-bar__sort {
  display: flex;
  align-items: center;
}

.archive-empty {
  padding: 3rem 1rem;
  text-align: center;
}
.archive-empty__message {
  font-size: 1rem;
  color: var(--color-muted);
  margin-bottom: 1.25rem;
}
.archive-empty__link {
  display: inline-block;
  padding: 0.625rem 1.5rem;
  background: var(--accent-yellow);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.sort-select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 8px 32px 8px 12px;
  font-size: 0.875rem;
  color: var(--color-ink);
  background-color: var(--bg-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  cursor: pointer;
  outline: none;
}

.sort-select:focus {
  border-color: var(--color-ink);
}

/* ==========================================================================
   3-COLUMN GRID MODIFIER (category archive)
   ========================================================================== */
.archive-grid--3col {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px; /* gap-6 — category page */
}

@media (min-width: 640px) {
  .archive-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* gap-2 */
  flex-wrap: wrap;
  margin-bottom: 48px; /* mb-12 */
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink);
  background: var(--bg-white);
  transition: background 0.15s, color 0.15s;
}

.pagination__btn:hover {
  background: var(--bg-zinc-100);
}

/* Active / current page */
.pagination__btn--active {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}

.pagination__btn--active:hover {
  background: var(--color-ink);
  opacity: 0.85;
}

/* Next / Prev buttons — slightly wider, no special fill */
.pagination__btn--next,
.pagination__btn--prev {
  padding: 0 16px;
  letter-spacing: 0.02em;
}

/* Dots ellipsis — no border, not interactive */
.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  font-size: 0.875rem;
  color: var(--color-faint);
  pointer-events: none;
}

/* ==========================================================================
   ILLUSTRATED EMAIL SIGNUP (category-page variant)
   ========================================================================== */
.signup-illustrated {
  display: flex;
  flex-direction: column;
  gap: 24px; /* gap-6 */
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--bg-white);
  padding: 24px; /* p-6 */
}

/* Left column: 170px wide (grid col), height h-32 = 128px */
.signup-illustrated__art {
  width: 100%;
  height: 128px; /* h-32 */
  flex-shrink: 0;
}

.signup-illustrated__body {
  display: flex;
  flex-direction: column;
  gap: 0; /* spacing via individual mb/mt on children */
}

/* Inline button variant (right of input in row layout) */
.signup-btn--inline {
  white-space: nowrap;
}

/* sm:flex-row — form becomes row at 640px */
@media (min-width: 640px) {
  .signup-form--row {
    flex-direction: row;
  }

  .signup-form--row .signup-btn--inline {
    width: auto;
  }
}

@media (min-width: 768px) {
  /* md:grid-cols-[170px_1fr] gap-6 items-center */
  .signup-illustrated {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 24px;
    align-items: center;
    padding: 24px;
  }

  .signup-illustrated__art {
    width: 170px;
    height: 128px;
    margin: 0;
  }
}

/* ==========================================================================
   EXPLORE MORE CATEGORIES
   ========================================================================== */
.explore-more {
  text-align: center;
  padding-bottom: 2.5rem;
}

.explore-more__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--color-ink);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* mobile: 3 col */
  gap: 16px; /* gap-4 */
}

@media (min-width: 768px) {
  .explore-grid {
    grid-template-columns: repeat(6, 1fr); /* md:grid-cols-6 */
  }
}

.explore-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.explore-card__art {
  width: 90%;
  height: 90px;
}

.explore-card__label {
  font-size: 0.875rem; /* text-sm */
  color: var(--color-ink);
}

/* Fix: keep archive-grid--3col at 3 columns on desktop,
   prevent inheriting .coloring-grid 4-col rule */
@media (min-width: 1024px) {
  .archive-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Email signup strip — heading variant */
.signup-illustrated__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}

/* ==========================================================================
   EMAIL BANNER (homepage yellow strip)
   ========================================================================== */
.email-banner {
  background: var(--accent-yellow-light);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-3xl);
  padding: 24px 32px;
  display: grid;
  gap: 24px;
  align-items: center;
  margin-bottom: 56px;
}
.email-banner__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-subtle);
  margin-bottom: 8px;
}
.email-banner__heading {
  font-family: var(--serif);
  font-size: 1.875rem;
  margin-bottom: 12px;
}
.email-banner__body {
  font-size: 0.875rem;
  color: var(--color-body);
  max-width: 640px;
}
.email-banner__form-wrap {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 16px;
}
@media (min-width: 768px) {
  .email-banner {
    grid-template-columns: 1fr 420px;
  }
  .email-banner__heading {
    font-size: 2.25rem;
  }
}

/* ==========================================================================
   SUBCATEGORY PANEL (category page)
   ========================================================================== */
.subcategory-panel {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 24px;
  margin-bottom: 32px;
}
.subcategory-panel__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-subtle);
  margin-bottom: 8px;
}
.subcategory-panel__heading {
  font-family: var(--serif);
  font-size: 1.875rem;
  margin-bottom: 12px;
}
.subcategory-panel__desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 20px;
}
.subcategory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.subcategory-list a {
  font-size: 0.875rem;
  color: var(--color-body);
}
.subcategory-list a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   FOOTER LOGO TAGLINE
   ========================================================================== */
.footer-logo-desc {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 16px;
  max-width: 256px;
}

.footer-logo-tagline {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 16px;
  max-width: 256px;
}

/* ==========================================================================
   NEW RULES — moved from inline HTML (homepage-new.html)
   ========================================================================== */
.coloring-card__image-wrap {
  position: relative;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.coloring-card__image-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fcfcfb;
}
.coloring-card__image-inner img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.coloring-card__footer {
  padding: 0.75rem 0.5rem 0.25rem;
  text-align: center;
}

/* ── Sidebar email box ── */
.sidebar-signup {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1023px) {
  .section-popular .sidebar-signup { margin-top: 2rem; }
}
.sidebar-signup__heading { font-family: var(--serif); font-size: 1.5rem; line-height: 1.333; margin-bottom: 0.5rem; }
.sidebar-signup__body { font-size: 0.875rem; color: #52525b; margin-bottom: 1rem; }
.sidebar-signup__form { display: flex; flex-direction: column; gap: 0.5rem; }
.sidebar-signup__input {
  border: 1px solid #d4d4d8;
  border-radius: 0.375rem;
  padding: 0 1rem;
  height: 2.75rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
  font-family: inherit;
  background: transparent;
}
.sidebar-signup__btn {
  background: #F6C453;
  color: #09090b;
  border: 1px solid #09090b;
  border-radius: 0.375rem;
  padding: 0 1.25rem;
  height: 2.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.sidebar-signup__btn:hover { background: #09090b; color: #ffffff; }
.sidebar-signup__fine { font-size: 11px; color: #a1a1aa; margin-top: 0.75rem; }

/* ── Footer signup form (footer col 4 — separate from sidebar-signup) ── */
.footer-signup {
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.footer-signup__heading { font-family: var(--serif); font-size: 1.5rem; line-height: 1.333; margin-bottom: 0.5rem; }
.footer-signup__body { font-size: 0.875rem; color: #52525b; margin-bottom: 1rem; }
.footer-signup__form { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-signup__input {
  border: 1px solid #d4d4d8;
  border-radius: 0.375rem;
  padding: 0 1rem;
  height: 2.75rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
  font-family: inherit;
  background: transparent;
}
.footer-signup__btn {
  background: #F6C453;
  color: #09090b;
  border: 1px solid #09090b;
  border-radius: 0.375rem;
  padding: 0 1.25rem;
  height: 2.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.footer-signup__btn:hover { background: #09090b; color: #ffffff; }
.footer-signup__fine { font-size: 11px; color: #a1a1aa; margin-top: 0.75rem; }

/* ── Footer bottom copyright ── */
.footer-bottom { border-top: 1px solid #e4e4e7; padding: 1.25rem 0; }
.footer-bottom__inner { font-size: 0.75rem; color: #71717a; text-align: center; }

/* ==========================================================================
   LANDSCAPE — SHORT VIEWPORT (phones rotated)
   max-height: 500px captures all phone landscape views; excludes tablets (≥768px tall).
   Placed after all breakpoint blocks so cascade overrides them correctly.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  /* Reset root font-size — at 768px+ width, it would jump to 20px, making
     rem-based padding/sizes enormous in a 344–430px tall viewport. */
  html { font-size: 16px; }

  /* Compact header */
  .site-header__inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Compact hero */
  .hero {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  /* Force single-column — removes the 768px 2-col grid so left content fills width */
  .hero__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .hero__heading {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .hero__tagline {
    margin-bottom: 0.375rem;
  }

  .hero__body {
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
  }

  .trust-items {
    margin-top: 0.75rem;
  }

  /* Hide decorative illustration — not needed when height is scarce */
  .hero__right {
    display: none;
  }
}

/* ==========================================================================
   CATEGORY PAGE — COLORING CARD (category-prefixed, does not affect homepage)
   Matches JSX LineArtCard (large=false): p-3 outer, aspect-[3/4] frame,
   w-full h-full p-4 inner, px-2 pt-3 pb-1 title area (no extra margin).
   ========================================================================== */
.category-coloring-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 0.75rem;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}

.category-coloring-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.category-coloring-card__frame {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.category-coloring-card__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fcfcfb;
}

.category-coloring-card__inner img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.category-coloring-card__footer {
  padding: 0.75rem 0.5rem 0.25rem;
  text-align: center;
}

.category-coloring-card__title {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375;
}

/* ==========================================================================
   AD SLOTS — placeholder styling for all pages
   ========================================================================== */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--color-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.ad-slot--leaderboard {
  min-height: 90px;
  max-width: 728px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
}
.ad-slot--sidebar {
  min-height: 250px;
  max-width: 300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   CATEGORY PAGE — page-scoped styles
   ========================================================================== */

/* Coloring grid: 4-column responsive */
.coloring-grid.archive-grid--4col {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .coloring-grid.archive-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .coloring-grid.archive-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Override shared archive-wrap bottom padding so pagination sits flush */
.archive-wrap {
  padding-bottom: 0;
}

/* Email signup banner */
.cat-email-section {
  padding: 1.5rem 0 0;
}
.cat-email-banner {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.cat-email-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-email-banner__icon-svg {
  height: 6rem;
  width: auto;
}
.cat-email-banner__content {
  flex: 1;
}
.cat-email-banner__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}
.cat-email-banner__body {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.cat-email-banner__form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cat-email-banner__input {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-dark);
  border-radius: 0.375rem;
  padding: 0 1rem;
  height: 2.75rem;
  font-size: 0.875rem;
  outline: none;
  width: 100%;
  font-family: inherit;
  background: var(--bg-white);
}
.cat-email-banner__input::placeholder { color: var(--color-faint); }
.cat-email-banner__input:focus { border-color: var(--color-ink); }
.cat-email-banner__btn {
  background: var(--accent-yellow);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 0.375rem;
  padding: 0 1.25rem;
  height: 2.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.cat-email-banner__btn:hover { background: var(--color-ink); color: var(--bg-white); }
.cat-email-banner__fine {
  font-size: 11px;
  color: var(--color-faint);
  margin-top: 0.75rem;
}
@media (min-width: 640px) {
  .cat-email-banner {
    display: grid;
    grid-template-columns: 10.625rem 1fr;
    align-items: center;
    gap: 1.5rem;
  }
  .cat-email-banner__icon {
    height: 8rem;
  }
  .cat-email-banner__icon-svg {
    height: 7.5rem;
    width: auto;
  }
  .cat-email-banner__form-row {
    flex-direction: row;
  }
  .cat-email-banner__input {
    flex: 1;
    width: auto;
  }
  .cat-email-banner__btn {
    flex-shrink: 0;
  }
}

/* Explore grid: scrollable on mobile/tablet, 6-col on desktop */
.cat-explore-scroll {
  display: flex;
  overflow-x: auto;
  gap: 1rem;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-explore-scroll::-webkit-scrollbar { display: none; }

/* Explore card (category page only) */
.cat-explore-card {
  flex: 0 0 8.5rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cat-explore-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}
.cat-explore-card__art {
  height: 6rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--bg-white);
  overflow: hidden;
  transition: transform 0.3s;
}
.cat-explore-card:hover .cat-explore-card__art {
  transform: scale(1.03);
}
.cat-explore-card__label {
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  .cat-explore-scroll {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow-x: visible;
    padding-bottom: 0;
  }
  .cat-explore-card {
    flex: unset;
  }
}

/* ==========================================================================
   SINGLE COLORING PAGE — page-scoped styles (single- prefix)
   ========================================================================== */

.single-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.single-page-wrap {
  padding-top: 3rem;
  padding-bottom: 0;
}

/* Above-grid: breadcrumb + title block — full container width, grid starts below */
.single-above-grid {
  padding-top: 0;
  padding-bottom: 1.5rem;
}

/* Two-column layout: left 1fr + fixed 320px sidebar */
.single-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .single-layout {
    grid-template-columns: 1fr 320px;
    gap: 2rem;
  }
}

/* Breadcrumb */
.single-breadcrumb {
  font-size: 0.75rem;
  color: var(--color-subtle);
  margin-bottom: 1.5rem;
}
.single-breadcrumb a { color: var(--color-subtle); }
.single-breadcrumb a:hover { color: var(--color-ink); }
.single-breadcrumb__sep { margin: 0 0.375rem; }

/* Title block — inside single-main (left column), grid starts at title level */
.single-title-block {
  text-align: center;
  margin-bottom: 2rem;
}
.single-h1 {
  font-family: var(--serif);
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .single-h1 { font-size: 3.25rem; }
}

.single-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}
.single-meta a { color: var(--color-muted); }
.single-meta a:hover { color: var(--color-ink); text-decoration: underline; }
.single-meta__pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Art wrapper */
.single-art-wrapper {
  max-width: 820px;
  margin: 0 auto 1.5rem;
}
.single-art-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  transition: transform 0.3s, box-shadow 0.3s;
}
.single-art-wrapper:hover .single-art-card {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}
.single-art-inner {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 0.375rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* Landscape variant */
.single-art-wrapper--landscape .single-art-inner {
  width: 100%;
  height: 21.25rem;
}
/* Portrait variant */
.single-art-wrapper--portrait {
  max-width: 520px;
}
.single-art-wrapper--portrait .single-art-inner {
  width: 100%;
  max-width: 440px;
  height: 480px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .single-art-wrapper--portrait .single-art-inner {
    height: 560px;
  }
}
@media (min-width: 1024px) {
  .single-art-wrapper--portrait .single-art-inner {
    height: 620px;
  }
}
.single-art-inner svg.line-drawing {
  width: 55%;
  height: 55%;
}
.single-art-inner img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.single-landscape-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: #f0f0f0;
  border-radius: var(--radius-sm);
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--color-body);
  z-index: 1;
}

/* Action buttons */
.single-actions {
  display: grid;
  gap: 0.75rem;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}
.single-btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--accent-yellow);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border: 1px solid var(--color-ink);
  cursor: pointer;
  font-family: inherit;
}
.single-btn-download:hover { background: var(--color-ink); color: var(--bg-white); }
.single-btn-print {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--bg-white);
  color: var(--color-ink);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: calc(1rem - 1.5px);
  border-radius: 0.375rem;
  border: 1.5px solid #333333;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.single-btn-print:hover { background: var(--color-ink); color: var(--bg-white); }

/* Prev / Next navigation grid */
.single-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.single-btn-prev,
.single-btn-next {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 4rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: inherit;
}
.single-btn-prev { text-align: left; }
.single-btn-next { text-align: right; }
.single-btn-prev:hover,
.single-btn-next:hover { border-color: var(--color-ink); }
.single-btn-nav__label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-muted);
}
.single-btn-nav__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--color-ink);
}

/* More category link */
.single-btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 2.75rem;
  background: var(--bg-white);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  font-family: inherit;
}
.single-btn-more:hover { background: var(--color-ink); color: var(--bg-white); }

/* Ad slot wrappers */
.single-ad { margin-bottom: 2rem; }
.single-ad .ad-slot,
.single-sidebar-ad .ad-slot {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

/* About + Share row */
.single-about-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 640px) {
  .single-about-row { grid-template-columns: 60fr 40fr; gap: 2rem; }
}
.single-about__heading,
.single-share__heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.single-about__body {
  font-size: 0.875rem;
  color: var(--color-muted);
  line-height: 1.65;
}
.single-share__icons {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.375rem;
}
.single-share__icon {
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: background 0.15s;
  text-decoration: none;
}
.single-share__icon:hover { background: var(--bg-zinc-100); }

/* FAQ section */
.single-faq {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.single-faq__header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.single-faq__title {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.375rem;
}
.single-faq__subtitle {
  font-size: 0.8125rem;
  color: var(--color-subtle);
}
.single-faq__item {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.single-faq__item + .single-faq__item { margin-top: 0.75rem; }
.single-faq__q {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.single-faq__a {
  font-size: 0.875rem;
  color: var(--color-body);
  line-height: 1.7;
}

/* Ways to Use This Coloring Page */
.single-usage {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.single-usage__heading {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  text-align: center;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.single-usage__subtitle {
  font-size: 0.875rem;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 1.25rem;
}
.single-usage__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.single-usage__item + .single-usage__item { margin-top: 0.75rem; }
.single-usage__item-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-ink);
  margin-bottom: 0.375rem;
}
.single-usage__item-body {
  font-size: 0.875rem;
  color: var(--color-body);
  line-height: 1.65;
}

/* Request a Coloring Page */
.single-request-wrap {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .single-request-wrap { padding: 2rem; }
}
.single-request-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}
.single-request-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.single-request-heading {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.single-request-sub {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.single-request-card {
  background: var(--accent-yellow-light);
  border: 1px solid var(--color-ink);
  border-radius: 1rem;
  padding: 1.25rem;
  max-width: 42rem;
  margin: 0 auto;
}
.single-request-card__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.single-request-card__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 0.375rem;
}
.single-request-card__body {
  font-size: 0.875rem;
  color: var(--color-body);
  margin-bottom: 1rem;
}
.single-request-card__fields {
  display: grid;
  gap: 0.75rem;
}
.single-request-card__label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}
.single-request-input {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  height: 2.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  background: var(--bg-white);
  width: 100%;
  outline: none;
}
.single-request-input:focus { border-color: var(--color-ink); }
.single-request-submit {
  background: var(--color-ink);
  color: var(--bg-white);
  border: none;
  border-radius: var(--radius-md);
  height: 2.75rem;
  width: 100%;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.single-request-submit:hover { background: var(--accent-yellow); color: var(--color-ink); }
.single-request-card__fine {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 0.75rem;
}

/* Sidebar */
.single-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .single-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

.single-sidebar-ad {
  margin-bottom: 1.5rem;
}

.single-sidebar-signup {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.single-sidebar-signup__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  color: var(--color-ink);
  font-weight: 400;
}
.single-sidebar-signup__body {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 0.875rem;
  line-height: 1.55;
}
.single-sidebar-signup__input {
  display: block;
  width: 100%;
  border: 1px solid var(--border-dark);
  border-radius: 0.375rem;
  padding: 0 0.875rem;
  height: 2.75rem;
  font-size: 0.8125rem;
  outline: none;
  font-family: inherit;
  background: var(--bg-white);
  margin-bottom: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  color: var(--color-ink);
}
.single-sidebar-signup__input::placeholder { color: var(--color-faint); }
.single-sidebar-signup__btn {
  display: block;
  width: 100%;
  background: var(--accent-yellow);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 0.375rem;
  height: 2.75rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.single-sidebar-signup__btn:hover { background: var(--color-ink); color: var(--bg-white); }
.single-sidebar-signup__fine {
  font-size: 11px;
  color: var(--color-faint);
  margin-top: 0.625rem;
}
.single-sidebar-signup__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.single-sidebar-signup__icon svg {
  height: 5rem;
  width: auto;
}

/* You May Also Like */
.single-sidebar-likes {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.single-sidebar-likes__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.single-likes-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--border-light);
  text-decoration: none;
  color: inherit;
}
.single-likes-item:first-of-type { border-top: none; padding-top: 0; }
.single-likes-item:hover .single-likes-item__title { text-decoration: underline; }
.single-likes-item__thumb {
  width: 4rem;
  height: 3.5rem;
  border-radius: 0.375rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-likes-item__thumb img,
.single-likes-item__thumb svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.single-likes-item__title {
  font-size: 0.875rem;
  color: var(--color-ink);
  line-height: 1.4;
}

/* Related section */
.single-related {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border);
}
.single-related__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
}
.single-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) {
  .single-related-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Related coloring cards */
.single-coloring-card {
  display: block;
  position: relative;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  padding: 0.75rem;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
  color: inherit;
}
.single-coloring-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-lg);
}
.single-coloring-card__frame {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.single-coloring-card__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fcfcfb;
}
.single-coloring-card__inner img,
.single-coloring-card__inner svg {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.single-coloring-card__footer {
  padding: 0.75rem 0.5rem 0.25rem;
  text-align: center;
}
.single-coloring-card__title {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.375;
}
.single-orientation-badge {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  z-index: 1;
}

/* Request page section */
.single-request-section {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}
.single-request-header {
  max-width: 48rem;
  margin: 0 auto 1.5rem;
  text-align: center;
}
.single-request-eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-subtle);
  margin-bottom: 0.5rem;
}
.single-request-header h2 {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}
.single-request-header p {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.single-request-card {
  max-width: 42rem;
  margin: 0 auto;
  background: var(--accent-yellow-light);
  border: 1.5px solid var(--color-ink);
  border-radius: 1rem;
  padding: 1.5rem;
}
.single-request-card-eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-subtle);
  margin-bottom: 0.5rem;
}
.single-request-card h3 {
  font-family: var(--serif);
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.single-request-card > p {
  font-size: 0.875rem;
  color: var(--color-body);
  margin-bottom: 1rem;
}
.single-request-form {
  display: grid;
  gap: 0.75rem;
}
.single-request-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-subtle);
  margin-bottom: 0.25rem;
}
.single-request-input {
  display: block;
  width: 100%;
  border: 1px solid var(--border-dark);
  border-radius: 0.375rem;
  padding: 0 0.875rem;
  height: 2.75rem;
  font-size: 0.875rem;
  background: var(--bg-white);
  font-family: inherit;
  color: var(--color-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.single-request-input::placeholder { color: var(--color-faint); }
.single-request-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-ink);
  color: var(--bg-white);
  border: none;
  border-radius: 0.375rem;
  height: 2.75rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.single-request-submit:hover { background: var(--accent-yellow); color: var(--color-ink); }
.single-request-fine {
  font-size: 11px;
  color: var(--color-faint);
  margin-top: 0.75rem;
}

/* ==========================================================================
   ABOUT PAGE — page-scoped styles (about- prefix)
   ========================================================================== */

/* Section wrapper */
.about-hero {
  padding: 3rem 0 1.5rem;
}

/* Two-column grid: stacked on mobile, side-by-side at lg+ */
.about-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .about-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
}

/* Left text column */
.about-h1 {
  font-family: var(--serif);
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
@media (min-width: 1024px) {
  .about-h1 { font-size: 2.75rem; }
}
@media (min-width: 1280px) {
  .about-h1 { font-size: 3.25rem; }
}

.about-body {
  font-size: 0.9375rem;
  color: var(--color-body);
  line-height: 1.7;
  margin-bottom: 1.125rem;
}
.about-body:last-of-type { margin-bottom: 0; }

/* Three-up feature strip */
.about-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}
@media (min-width: 480px) {
  .about-features {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

.about-feature {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}
.about-feature__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--color-ink);
}
.about-feature__label {
  display: block;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  line-height: 1.3;
}
.about-feature__text {
  display: block;
  font-size: 0.75rem;
  color: var(--color-subtle);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* Right illustration card */
.about-hero__art {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 14rem;
}
.about-hero__drawing {
  width: 100%;
  height: auto;
  color: var(--color-ink);
}
.about-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(1.5rem - 1px);
}

/* Email signup section spacing */
.about-email-section {
  padding: 0 0 3.5rem;
}


/* ====================================================================
   BLOG PAGE
   ==================================================================== */

/* Page hero — centered title + subtitle */
.blog-hero {
  padding: 3rem 0 2rem;
  text-align: center;
}
.blog-hero .breadcrumb {
  text-align: left;
  margin-bottom: 1.5rem;
}
.blog-hero__title {
  font-family: var(--serif);
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  font-weight: 500;
  margin-bottom: 0.625rem;
}
@media (min-width: 768px) {
  .blog-hero__title { font-size: 3.25rem; }
}
.blog-hero__subtitle {
  font-size: 0.9375rem;
  color: var(--color-body);
  line-height: 1.6;
}

/* Post grid */
.blog-posts {
  padding: 0 0 2.5rem;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Blog card */
.blog-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

/* Image area */
.blog-card__art {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  height: 11rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.blog-card__art-link {
  display: block;
  text-decoration: none;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
.blog-card__art-link:hover .blog-card__img {
  transform: scale(1.04);
}

/* Tag */
.blog-card__tag {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-subtle);
  margin-bottom: 0.5rem;
}

/* Title */
.blog-card__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--color-ink);
  margin-bottom: 0.625rem;
}
.blog-card__title a {
  color: inherit;
  text-decoration: none;
}
.blog-card__title a:hover {
  text-decoration: underline;
}

/* Excerpt */
.blog-card__body {
  font-size: 0.875rem;
  color: var(--color-body);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1rem;
}

/* Footer: date + read more */
.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
}
.blog-card__date {
}
.blog-card__link {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.blog-card__link:hover {
  text-decoration: underline;
}

/* Email signup section spacing */
.blog-email-section {
  padding: 0 0 3.5rem;
}

/* ==========================================================================
   BLOG DETAIL PAGE
   ========================================================================== */

/* Page-specific ad slots — blog-detail only */
.bd-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--color-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.bd-ad--leaderboard {
  min-height: 90px;
  max-width: 728px;
  margin: 1.5rem auto;
}
.bd-ad--rectangle {
  min-height: 250px;
  max-width: 300px;
}

.blog-detail-wrap {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.blog-detail-breadcrumb,
.blog-detail-wrap .breadcrumb {
  font-size: 0.75rem;
  color: var(--color-subtle);
  margin-bottom: 1.5rem;
}
.blog-detail-breadcrumb a,
.blog-detail-wrap .breadcrumb a { color: var(--color-subtle); }

.blog-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .blog-detail-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2rem;
  }
}

/* Article card */
.blog-article {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .blog-article { padding: 2.5rem; }
}

/* Centered article header */
.blog-article__header {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2rem;
}
.blog-article__tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-subtle);
  margin-bottom: 0.75rem;
}
.blog-article__title {
  font-family: var(--serif);
  font-size: 1.875rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-bottom: 1rem;
  font-weight: 500;
}
@media (min-width: 640px) {
  .blog-article__title { font-size: 2.75rem; line-height: 1.1; }
}
@media (min-width: 768px) {
  .blog-article__title { font-size: 3.5rem; }
}
.blog-article__excerpt {
  font-size: 1.0625rem;
  color: var(--color-body);
  line-height: 1.6;
}
.blog-article__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-subtle);
  margin-top: 1.25rem;
}

/* Hero image */
.blog-article__hero {
  max-width: 42rem;
  width: 100%;
  margin: 0 auto 1.5rem;
  height: 200px;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bg-white);
}
@media (min-width: 640px) {
  .blog-article__hero { height: 280px; }
}
@media (min-width: 768px) {
  .blog-article__hero { height: 320px; }
}
.blog-article__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Article ad slots */
.blog-article__ad {
  max-width: 42rem;
  margin: 0 auto;
}

/* Prose content */
.blog-article__body {
  max-width: 44rem;
  margin: 0 auto;
}
.blog-article__p,
.blog-article__body p {
  font-size: 0.9375rem;
  color: var(--color-body);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.blog-article__p a,
.blog-article__body p a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-article__h2,
.blog-article__body h2 {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--color-ink);
  font-weight: 500;
  margin-top: 2rem;
  margin-bottom: 0.625rem;
}
.blog-article__body h3 {
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--color-ink);
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.blog-article__body ul,
.blog-article__body ol {
  font-size: 0.9375rem;
  color: var(--color-body);
  line-height: 1.75;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.blog-article__body li { margin-bottom: 0.25rem; }

/* Inline email signup block */
.blog-inline-signup {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  background: var(--bg-white);
}
.blog-inline-signup__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: var(--bg-white);
}
@media (min-width: 480px) {
  .blog-inline-signup__icon { display: flex; }
}
.blog-inline-signup__icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-ink);
}
.blog-inline-signup__content { flex: 1; min-width: 0; }
.blog-inline-signup__heading {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--color-ink);
  font-weight: 500;
}
.blog-inline-signup__body {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.blog-inline-signup__row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 480px) {
  .blog-inline-signup__row { flex-direction: row; }
}
.blog-inline-signup__input {
  flex: 1;
  width: 100%;
  border: 1px solid var(--border-dark);
  border-radius: 0.375rem;
  padding: 0 0.875rem;
  height: 2.75rem;
  font-size: 0.8125rem;
  outline: none;
  font-family: inherit;
  min-width: 0;
  background: var(--bg-white);
  color: var(--color-ink);
  -webkit-appearance: none;
  appearance: none;
}
.blog-inline-signup__input::placeholder { color: var(--color-faint); }
.blog-inline-signup__btn {
  height: 2.5rem;
  width: 100%;
  padding: 0 1rem;
  background: var(--accent-yellow);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: 0.375rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
@media (min-width: 480px) {
  .blog-inline-signup__btn { width: auto; }
}
.blog-inline-signup__btn:hover { background: var(--color-ink); color: var(--bg-white); }
.blog-inline-signup__fine {
  font-size: 11px;
  color: var(--color-faint);
  margin-top: 0.375rem;
}

/* Try these next */
.blog-try-next {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-top: 0;
}
@media (min-width: 1024px) {
  .blog-try-next { grid-column: 1; }
}
.blog-try-next__heading {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  margin-bottom: 0.875rem;
  color: var(--color-ink);
}
.blog-try-next__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .blog-try-next__grid { grid-template-columns: repeat(2, 1fr); }
}
.blog-try-next__link {
  display: block;
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.15s;
}
.blog-try-next__link:hover { border-color: var(--color-ink); }

/* Sidebar */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.25rem; }

.blog-sidebar-popular {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
}
.blog-sidebar-popular__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--color-ink);
}
.blog-sidebar-popular__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.blog-sidebar-popular__item a {
  display: block;
  font-size: 0.875rem;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border-light);
  transition: color 0.15s;
}
.blog-sidebar-popular__item:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}
.blog-sidebar-popular__item a:hover { color: var(--color-muted); }

/* ==========================================================================
   NEWSLETTER CTA — homepage email bundle section
   ========================================================================== */
.newsletter-cta {
  padding-bottom: 3.5rem;
}

.newsletter-cta__inner {
  background: var(--accent-yellow-light);
  border: 1px solid var(--color-ink);
  border-radius: 1.5rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.newsletter-cta__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}

.newsletter-cta__heading {
  font-family: var(--serif);
  font-size: 1.875rem;
  margin-bottom: 0.75rem;
  color: var(--color-ink);
  line-height: 1.15;
}

.newsletter-cta__body {
  font-size: 0.875rem;
  color: var(--color-body);
  max-width: 42rem;
}

.newsletter-cta__text,
.newsletter-cta__form-box {
  min-width: 0;
}

.newsletter-cta__form-box {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
}

.newsletter-cta__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 480px) {
  .newsletter-cta__form {
    flex-direction: row;
  }
}

.newsletter-cta__form input[type="email"] {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  height: 2.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  width: 100%;
  min-width: 0;
}

@media (min-width: 480px) {
  .newsletter-cta__form input[type="email"] {
    flex: 1;
  }
}

.newsletter-cta__form button {
  background: var(--accent-yellow);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 0 1.25rem;
  height: 2.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}

@media (min-width: 480px) {
  .newsletter-cta__form button {
    width: auto;
  }
}

.newsletter-cta__form button:hover {
  background: var(--color-ink);
  color: var(--bg-white);
}

.newsletter-cta__fine {
  font-size: 11px;
  color: var(--color-faint);
  margin-top: 0.75rem;
}

@media (min-width: 1280px) {
  .newsletter-cta__inner {
    grid-template-columns: 1fr 420px;
    gap: 1.5rem;
    padding: 2rem;
  }

  .newsletter-cta__heading {
    font-size: 2.25rem;
  }
}

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
.faq-section {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: 1fr 330px;
  }
}

.faq-h1 {
  font-family: var(--serif);
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

.faq-subtitle {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin-bottom: 2.5rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

details.faq-item {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.15s;
}

details.faq-item[open] { border-color: var(--border-dark); }
details.faq-item > summary { list-style: none; cursor: pointer; }
details.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.faq-item__question {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
}

.faq-item__icon {
  flex-shrink: 0;
  color: var(--color-subtle);
  transition: transform 0.2s;
}

details.faq-item[open] .faq-item__icon { transform: rotate(45deg); }

.faq-item__body {
  padding: 0.75rem 1.25rem 1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.875rem;
  color: var(--color-body);
  line-height: 1.65;
}

/* FAQ sidebar */
.faq-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-contact-card {
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
}

.faq-contact-card__heading {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

.faq-contact-card__body {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.faq-contact-btn {
  display: inline-block;
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.faq-contact-btn:hover {
  background: var(--color-ink);
  color: var(--bg-white);
}

/* ==========================================================================
   Nav: split link + chevron for dropdown parents with a real URL
   ========================================================================== */
.nav-item--dropdown .nav-dropdown-split {
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-dropdown-split__link {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  padding-right: 4px;
}

.nav-dropdown-split__link:hover {
  opacity: 0.6;
}

.nav-dropdown-split .nav-dropdown-toggle {
  padding: 0 2px;
}

/* ==========================================================================
   All Categories page
   ========================================================================== */
.categories-page-wrap {
  padding: 48px 0 80px;
}

.categories-page-header {
  text-align: center;
  margin-bottom: 40px;
}

.categories-page-title {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.categories-page-subtitle {
  font-size: 1rem;
  color: var(--color-muted);
}

.categories-page-empty {
  text-align: center;
  color: var(--color-muted);
  padding: 48px 0;
}

.category-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.category-card__subcats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 4px;
}

.category-card__subcat-link {
  font-size: 0.75rem;
  color: var(--color-muted);
  background: var(--border-light);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.category-card__subcat-link:hover {
  background: var(--accent-yellow-light);
  color: var(--color-ink);
}