:root {
  --cream: #FFFFFC;
  --card: #FFFFFC;
  --coral: #B8451F;
  --coral-dark: #9C3A1A;
  --coral-light: #FBEBE4;
  --teal: #0F6E56;
  --teal-dark: #085041;
  --teal-light: #E1F5EE;
  --green: #7C9A5E;
  --green-dark: #4A5E38;
  --green-light: #F2F0E6;
  --ink: #1A1A1A;
  --ink-secondary: #5A5A52;
  --ink-muted: #6B6860;
  --border: #EFEBE0;
  --radius: 14px;
  --radius-sm: 8px;
  --font-serif: 'Domine', Georgia, 'Times New Roman', serif;
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Single unified site-wide accent — the per-pillar color scheme (Dogs
     sage/forest, Library dusty blue/navy, Home & Organization dusty rose/burgundy)
     was retired in favor of one consistent burnt terracotta accent used
     everywhere. The --pillar-accent-* variable names are kept as-is so
     every page/component that already references them just works, but
     they no longer vary by body class. */
  --pillar-accent: var(--coral);
  --pillar-accent-dark: var(--coral-dark);
  --pillar-accent-light: var(--coral-light);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
}

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

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  background: #FFFFFC;
  border-bottom: 1px solid #F0EEE5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1120px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  color: #00401C;
}

nav.site-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 600;
}

nav.site-nav a {
  color: var(--ink-secondary);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

nav.site-nav a:hover, nav.site-nav a.active {
  color: var(--pillar-accent-dark);
  border-bottom-color: var(--pillar-accent);
}

.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink-secondary);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
}

.nav-dropdown summary::-webkit-details-marker { display: none; }

.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  color: var(--pillar-accent-dark);
}

.nav-dropdown .chevron {
  width: 9px;
  height: 9px;
  transition: transform 0.15s ease;
}

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

.nav-dropdown-menu {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(44,44,42,0.14);
  padding: 8px;
  width: 250px;
  z-index: 30;
  animation: ivyDropdownIn 0.18s ease;
  /* Library & Education outgrew the viewport at 16 items — the last entry
     landed under the dock. Cap the menu and scroll inside it. The cap is
     deliberately set to clip mid-item rather than at a clean boundary,
     so a partial row signals there is more below. */
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

@keyframes ivyDropdownIn {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.nav-dropdown .nav-dropdown-menu a {
  display: block;
  padding: 6px 10px 6px 26px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.nav-dropdown .nav-dropdown-menu a:hover {
  background: var(--cream);
  color: var(--pillar-accent-dark);
}

.nav-dropdown .nav-dropdown-menu a.active {
  background: var(--pillar-accent-light);
  color: var(--pillar-accent-dark);
}

.dropdown-pillar-home {
  font-weight: 800;
  padding-left: 10px !important;
  border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0;
  margin-bottom: 0;
  padding-bottom: 8px !important;
}

.dropdown-category {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 800;
  margin: 9px 10px 3px 2px;
}

.dropdown-category:first-child {
  margin-top: 4px;
}

.dropdown-empty {
  padding: 6px 10px 6px 26px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-muted);
  margin: 0;
}

@media (max-width: 640px) {
  /* Anchor the dropdown to the full nav row (not the individual trigger)
     so it stays centered within the safely-padded nav width regardless of
     which trigger — Dogs, Library & Education, Home & Organization — opened it.
     Anchoring to the trigger itself previously pushed the menu off the
     left edge of the screen for triggers positioned left-of-center. */
  nav.site-nav { position: relative; }
  .nav-dropdown { position: static; }
  .nav-dropdown-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(260px, calc(100vw - 40px));
  }
}

/* Hero */
.hero {
  text-align: center;
  padding: 36px 24px 24px;
  max-width: 1120px;
  margin: 0 auto;
  border-bottom: 2px solid var(--coral);
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    translate: 0 14px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.pillar-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 32px;
  border-bottom: 2px solid var(--coral);
  text-align: left;
}

.pillar-hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}

.pillar-hero p.subhead {
  font-size: 15px;
  color: var(--ink-secondary);
  margin: 0;
}

.hero-wordmark {
  max-width: 620px;
  width: 100%;
  height: auto;
  margin: 0 auto 8px;
  display: block;
  opacity: 0;
  animation: heroFadeUp 0.6s ease 0.1s both;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
  opacity: 0;
  animation: heroFadeUp 0.6s ease 0.15s both;
}

.hero p.subhead {
  font-size: 17px;
  color: var(--ink-secondary);
  opacity: 0;
  animation: heroFadeUp 0.6s ease 0.25s both;
  margin: 0 0 24px;
}

/* Board grid on homepage */
.section-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 20px;
  margin-bottom: 40px;
  align-items: start;
}

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

/* Single column below 640px. At two columns the 2x2 tile cells fall under
   ~80px and the products stop being identifiable. */
@media (max-width: 640px) {
  .board-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
}

.section-label {
  margin-top: 32px;
}

.section-label:first-of-type {
  margin-top: 32px;
}

.board-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin-bottom: 0;
  transition: opacity 0.15s ease;
}

.board-card:hover {
  opacity: 0.88;
}

/* Warm cream tile ground. Cutout products have no edge against the site's
   #FFFFFC, so the tile carries its own surface and the gutter between cards
   reads as different space from the space inside them. */
.board-card .collage {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: #FDF8F0;
  border: 0.5px solid #E7DFD2;
  border-radius: var(--radius-sm);
}

/* --tall is neutralised: one aspect ratio across the whole index. */
.board-card--tall .collage {
  aspect-ratio: 4 / 3;
}

.board-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 15px 2px 0;
}

.board-card h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.28;
  margin: 0 0 8px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.56em;
}

.board-card p {
  font-size: 13px;
  color: var(--ink-secondary);
  margin: 0 0 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
}

.board-card .count {
  margin-top: auto;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
}

.tint-teal { background: var(--teal-light); color: var(--teal-dark); }
.tint-coral { background: var(--coral-light); color: var(--coral-dark); }
.tint-green { background: var(--green-light); color: var(--green-dark); }

/* About section */
.about {
  padding: 0;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.about-teaser {
  display: flex;
  align-items: center;
  gap: 22px;
  text-align: left;
}

.teaser-portrait {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.about-teaser h2 {
  font-size: 20px;
  margin: 0 0 6px;
}

.about-teaser p {
  margin: 0 0 8px;
}

.read-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--coral);
  padding-bottom: 2px;
}

.read-more:hover { color: var(--coral-dark); }

.about-page {
  padding-top: 8px;
}

.about-full {
  text-align: left;
  overflow: hidden;
}

.about-full::after {
  content: "";
  display: table;
  clear: both;
}

.float-photo {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(44,44,42,0.10);
}

.float-right {
  float: right;
  margin-left: 20px;
}

.float-left {
  float: left;
  margin-right: 20px;
}

@media (max-width: 560px) {
  .about-teaser { flex-direction: column; text-align: center; }
  .float-photo { width: 100%; height: 200px; float: none; margin: 0 0 16px; }
}

.about h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 27px;
  color: var(--ink);
  margin-top: 0;
}

.about p {
  font-size: 15px;
  color: var(--ink-secondary);
  margin-bottom: 16px;
}

.about .disclosure {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-bottom: 0;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2px 0 22px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.social-link:hover {
  transform: translateY(-2px);
  border-color: #E60023;
  box-shadow: 0 4px 14px rgba(44,44,42,0.10);
}

/* Board page */
.board-header {
  text-align: center;
  max-width: 620px;
  margin: 40px auto 0;
  padding: 0 24px 28px;
  border-bottom: 2px solid var(--coral);
}

.board-header.guide-header {
  max-width: 640px;
  text-align: left;
  margin-top: 48px;
}

.board-kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pillar-accent);
  margin: 0 0 12px;
  display: block;
}

.board-header h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 12px;
}

.board-header p {
  color: var(--ink-secondary);
  font-size: 15px;
  margin: 0 0 6px;
}

.board-header .board-disclosure {
  font-size: 12px;
  color: var(--ink-muted);
  font-style: italic;
}

.board-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
}

.board-byline img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.guide-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-muted);
}

.guide-byline img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.guide-byline a {
  text-decoration: underline;
  color: var(--ink-secondary);
}

.guide-collection-pin {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 auto 24px;
  display: block;
  box-shadow: 0 4px 16px rgba(44,44,42,0.14);
}

/* Guide page */
.guide-picks {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: flex;
  flex-direction: column;
}

.guide-section-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink-secondary);
  text-align: left;
  margin: 8px 0 24px;
}

.guide-pick {
  text-align: left;
  padding-top: 36px;
  margin-top: 36px;
  border-top: 1px solid var(--border);
}

.guide-pick:first-child,
.guide-section-heading:first-child + .guide-pick {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.pick-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
  display: block;
}

.pick-image.book-thumb {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Tall, narrow product shots (bottles, sprays) would otherwise be stretched to the
   full column by .pick-image's width:100%, upscaling a 133px-wide source 2.6x and
   producing an image several times taller than its neighbours. Constrain by HEIGHT
   and let width follow. New class, not used by any existing guide. */
.pick-image.tall {
  width: auto;
  max-width: 100%;
  max-height: 340px;
  margin-left: auto;
  margin-right: auto;
}

.pick-image-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pick-image-link .pick-image {
  margin: 0 0 16px;
}

.pick-body {
  max-width: 100%;
  margin: 0;
  text-align: left;
}

.pick-body h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--ink);
}

.top-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--coral);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin: 0 0 10px;
}

.top-pick-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.pick-body p {
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.65;
  margin: 0 0 14px;
}

/* Two-column guide layout — scoped modifier, used by the Reading Corners guide.
   Same 640px column as every other guide; section headings, hero images and
   section intros span the full width, picks flow into two columns beneath. */
.guide-picks.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22px;
  align-items: start;
}

.guide-picks.two-col .guide-section-heading,
.guide-picks.two-col .section-hero,
.guide-picks.two-col .section-intro,
.guide-picks.two-col .section-note {
  grid-column: 1 / -1;
}

.guide-picks.two-col .guide-section-heading {
  font-size: 22px;
  margin: 48px 0 16px;
}

.guide-picks.two-col .guide-section-heading:first-child {
  margin-top: 0;
}

/* Section headings in two-col carry an eyebrow + title pair, same structure as
   .clustered. Sans/uppercase eyebrow vs serif title keeps a section heading from
   reading as just another product title. No existing two-col guide uses these
   spans, so these rules are additive only. */
.guide-picks.two-col .section-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 6px;
}

.guide-picks.two-col .section-eyebrow em {
  font-style: normal;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

/* Solo-eyebrow section headings: where a section heading carries ONLY an eyebrow
   and no .section-title, the 12px label is too light to divide a long guide.
   :only-child scopes this precisely -- headings that still carry an eyebrow +
   title pair are untouched, so existing cluster guides are unaffected. */
.guide-picks.two-col .section-eyebrow:only-child {
  font-size: 17px;
  letter-spacing: 0.10em;
  margin-bottom: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--coral);
}

.guide-picks.two-col .guide-section-heading:has(.section-eyebrow:only-child) {
  margin-bottom: 22px;
}

.guide-picks.two-col .section-title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
}

.guide-picks.two-col .section-hero {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 0 18px;
}

.guide-picks.two-col .section-intro {
  font-size: 15px;
  color: var(--ink-secondary);
  line-height: 1.65;
  margin: 0 0 6px;
}

.guide-picks.two-col .section-note {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 4px;
}

.guide-picks.two-col .guide-pick {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

/* In a two-column grid the top ROW is two cards, not one, so the single
   :first-child reset leaves pick #2 carrying a rule and 24px that pick #1
   does not. Reset both cells of the first row. Guides that open with a
   full-width section heading are unaffected because the heading pushes the
   first row down; flat two-col guides with no headings exposed this. */
.guide-picks.two-col > .guide-pick:nth-child(1),
.guide-picks.two-col > .guide-pick:nth-child(2) {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

@media (max-width: 560px) {
  /* Single column at this width, so only the true first card resets. */
  .guide-picks.two-col > .guide-pick:nth-child(2) {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--border);
  }
}

.guide-picks.two-col .pick-body h2 {
  font-size: 17px;
  line-height: 1.3;
}

.guide-picks.two-col .pick-body p {
  font-size: 14px;
  line-height: 1.6;
}

.guide-picks.two-col .top-pick-badge {
  font-size: 10px;
  padding: 4px 11px;
}

@media (max-width: 560px) {
  .guide-picks.two-col { grid-template-columns: 1fr; }
  .guide-picks.two-col .guide-section-heading { font-size: 20px; margin: 40px 0 16px; }
  .guide-picks.two-col .section-title { font-size: 20px; }
  .guide-picks.two-col .section-eyebrow:only-child { font-size: 15px; letter-spacing: 0.08em; }
  .guide-picks.two-col .pick-body h2 { font-size: 20px; }
  .guide-picks.two-col .pick-body p { font-size: 15px; }
}

.guide-closing {
  max-width: 640px;
  margin: 8px auto 0;
  padding: 40px 24px 56px;
  text-align: left;
  border-top: 1px solid var(--border);
}

.guide-more-products {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.guide-more-products .extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

.extra-grid .item-mini img {
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  display: block;
}

.extra-grid .item-mini h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--ink);
}

/* Scoped 3-column extras grid. Opt-in per guide via .extra-grid.three-up.
   Unscoped .extra-grid stays 2 columns at every width (deliberate). */
.guide-more-products .extra-grid.three-up {
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 480px) {
  .guide-more-products .extra-grid.three-up {
    grid-template-columns: 1fr 1fr;
  }
}


.guide-related {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.guide-related-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}

@media (max-width: 480px) {
  .guide-related-list { grid-template-columns: 1fr; }
}

.guide-closing p {
  color: var(--ink-secondary);
  font-size: 15px;
  margin: 20px 0 10px;
}

@media (max-width: 640px) {
  .pick-image { max-width: 100%; }
}

.featured-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 0;
}

.featured-card {
  position: relative;
  padding: 8px 24px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 620px;
  margin: 0 auto;
}

.featured-img-wrap {
  position: relative;
  flex-shrink: 0;
}

.featured-img-wrap img {
  width: 220px;
  height: 220px;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(44,44,42,0.15);
  transform: rotate(-3deg);
}

.book-featured img {
  width: 165px;
  height: 220px;
  object-fit: contain;
  border-radius: 10px;
}

.doodle-arrow {
  position: absolute;
  width: 58px;
  height: 46px;
  top: -38px;
  right: -2px;
  transform: rotate(4deg);
}

.featured-card .label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pillar-accent-dark);
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transform: rotate(-1deg);
}

.featured-card h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}

.featured-card p.fnote-intro {
  font-size: 12.5px;
  color: var(--ink-secondary);
  margin: 0 0 6px;
  line-height: 1.5;
}

.fnote-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

.fnote-list li {
  margin-bottom: 3px;
}

.fnote-list li::marker {
  color: var(--pillar-accent);
}

.featured-footer-row {
  margin-top: 12px;
}

@media (max-width: 560px) {
  .featured-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
    gap: 12px;
  }

  .featured-img-wrap img {
    width: 170px;
    height: 170px;
  }

  .book-featured img {
    width: 135px;
    height: 170px;
  }

  .doodle-arrow {
    display: none;
  }

  .featured-card .label {
    justify-content: center;
    transform: none;
  }

  .fnote-list {
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
  }

  .featured-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
}

.item-grid {
  column-count: 4;
  column-gap: 22px;
  padding: 40px 24px 64px;
  max-width: 1120px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .item-grid { column-count: 3; }
}
@media (max-width: 640px) {
  .item-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .item-grid { column-count: 1; }
}

.item-card {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 34px;
}

.item-card .thumb {
  border-radius: var(--radius-sm);
}

.item-card .note {
  font-size: 12.5px;
  color: var(--pillar-accent-dark);
  font-style: italic;
  margin: 0 0 10px;
  line-height: 1.5;
}

.item-card .thumb {
  overflow: hidden;
  display: block;
}

.item-card .thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.item-card .thumb a,
.item-card .book-thumb a,
.featured-img-wrap a {
  display: block;
  width: 100%;
}

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

.item-card .book-thumb {
  aspect-ratio: 3 / 4;
}

.item-card .book-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.item-card:hover .book-thumb img {
  transform: scale(1.06);
}

.item-card .body {
  padding: 14px 2px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.item-card h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.35;
}

.item-card p {
  font-size: 13px;
  color: var(--ink-secondary);
  margin: 0 0 14px;
  line-height: 1.55;
  flex: 1;
}

.item-card .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-btn {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 2px;
  border-bottom: 2px solid var(--coral);
  transition: color 0.15s ease;
  display: inline-block;
}

.shop-btn:hover { color: var(--coral-dark); }

.shop-btn.pending {
  color: var(--ink-muted);
  border-bottom-color: var(--border);
  cursor: default;
}

.affiliate-tag {
  font-size: 10px;
  color: var(--ink-muted);
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 32px 24px 48px;
  font-size: 12px;
  color: var(--ink-muted);
  max-width: 640px;
  margin: 0 auto;
}

.site-footer a { color: var(--teal-dark); font-weight: 600; }

.footer-disclosure {
  font-size: 11px;
  margin: 0 0 8px;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  nav.site-nav { gap: 14px; font-size: 13px; }
}

/* Header overflow fix — below this width, brand + full nav no longer fit
   on one line. Wrap nav onto its own row instead of letting it collide
   with or get clipped by the brand. */
@media (max-width: 700px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 14px 20px;
  }
  nav.site-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
}

/* Homepage picks grid — small pillar badge on top of the shared .thumb,
   used only where an item-card needs to show which pillar it belongs to
   (e.g. the homepage's cross-pillar picks section). */
.item-card .thumb { position: relative; }

.item-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 100px;
  z-index: 2;
}

/* Pillar badge colors retired along with the per-pillar palette — the
   badge now just uses a neutral ink tone for all pillars (set on .item-badge
   itself, no per-pillar override needed). */

/* Inline prose links inside guide content. The global reset
   `a { color: inherit; text-decoration: none; }` was swallowing every in-copy
   link on every guide page — the closing "Browse the rest of the ... guides"
   link has been rendering as plain black text sitewide. Restores the site's
   standing CTA convention: underlined terracotta text link, no button. */
.board-header p a,
.guide-closing p a,
.pick-body p a,
.guide-picks .section-intro a,
.guide-picks .section-note a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.board-header p a:hover,
.guide-closing p a:hover,
.pick-body p a:hover,
.guide-picks .section-intro a:hover,
.guide-picks .section-note a:hover { color: var(--coral-dark); }

.board-header p.board-disclosure a { color: inherit; }

/* Structural headings vs product titles. Sections and groups are set in the SANS
   face, uppercase, letterspaced; every product title stays SERIF. Distinguishing
   by family and case rather than by size alone is what makes a 33-pick page
   skimmable — a 22px serif section heading and a 20px serif product title read as
   the same thing. */
.guide-picks.clustered .guide-section-heading {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: inherit;
  font-weight: 400;
  color: var(--ink);
  display: block;
}

.guide-picks.clustered .section-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 8px;
}

.guide-picks.clustered .section-title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.25;
  color: var(--ink);
}


.guide-picks.clustered .pick-body h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink);
}

.cluster-item h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
}

/* Numerals set apart from the title so the count reads as an index, not as part
   of the product name. */
.pick-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.72em;
  color: var(--coral);
  margin-right: 7px;
  letter-spacing: 0.02em;
}

/* Pull-quote lede: the one-line answer for a reader who won't scroll 33 picks. */
.guide-lede-callout {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  border-left: 3px solid var(--coral);
  padding-left: 14px;
  margin: 22px 0;
}

/* Section jump links. A 33-pick page needs a way in other than scrolling. */
.guide-jump {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  font-size: 14px;
}

.guide-jump span {
  font-weight: 700;
  color: var(--ink-secondary);
}

.guide-jump a {
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-jump a:hover { color: var(--coral-dark); }

.guide-picks.clustered .guide-section-heading { scroll-margin-top: 76px; }
.guide-picks.clustered .guide-section-heading +

/* Uniform find grid. A 33-item page is browsed, not read start to finish, so every
   product gets an identical card and the prose is gathered into one block per
   section instead of interleaved between every two items. The thumbnail is a fixed
   square with contain-fit, which is what makes rows align: the source photos range
   from 0.64 to 1.82 in aspect ratio, and without a fixed tile nothing lines up. */
.find-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 20px;
  margin: 26px 0 8px;
}

.find-card { text-align: left; }

.find-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
}

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

.find-card h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin: 0 0 7px;
  color: var(--ink);
}

.find-card .shop-btn { display: inline-block; }
.find-card .affiliate-tag { display: block; margin-top: 2px; }

.guide-picks.clustered .section-eyebrow em {
  font-style: normal;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
}

.guide-picks.clustered .guide-section-heading {
  padding-top: 44px;
  margin: 44px 0 16px;
  border-top: 1px solid var(--border);
}

.guide-picks.clustered .guide-section-heading:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

@media (max-width: 560px) {
  .find-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .find-card h4 { font-size: 14px; }
}

/* Inspiration figure — scoped to guides that open with a planning mockup */
.guide-inspo{max-width:1000px;margin:0 auto 46px;padding:0 24px}
.guide-inspo img{width:100%;height:auto;display:block;border-radius:4px}
.guide-inspo figcaption{margin-top:12px;font-size:.9rem;line-height:1.5;color:var(--ink-muted);text-align:left}
@media(max-width:640px){.guide-inspo{margin-bottom:32px;padding:0 18px}.guide-inspo figcaption{font-size:.85rem}}


/* ---- .three-col : quick-guide layout (scoped, opt-in) --------------------
   A description-free 3-up grid for browse-style guides. Only applies inside a
   guide carrying .three-col, so no existing guide changes.
   NOTE: base .guide-picks is max-width 640px, which .two-col inherits. Three
   columns need more room than that, so this modifier widens the container. */
.guide-picks.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  align-items: start;
  max-width: 1000px;
}
.guide-picks.three-col .guide-pick {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.guide-picks.three-col .pick-image { max-height: 260px; object-fit: contain; }
.guide-picks.three-col .pick-image-link .pick-image { margin: 0 0 12px; }
.guide-picks.three-col .pick-body h2 {
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 8px;
}
.guide-picks.three-col .footer-row { margin-top: 4px; }
/* Badge sits above the title on the three lead picks. Plural label, so all
   three carrying it reads as one set rather than three competing claims. */
.guide-picks.three-col .top-pick-badge {
  margin: 0 0 8px;
  font-size: 10px;
  padding: 4px 11px;
}
@media (max-width: 1040px) {
  .guide-picks.three-col { max-width: 720px; grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
}
@media (max-width: 700px) {
  .guide-picks.three-col { max-width: 640px; grid-template-columns: 1fr; gap: 32px; }
  .guide-picks.three-col .pick-body h2 { font-size: 19px; }
  .guide-picks.three-col .pick-image { max-height: 340px; }
}
.guide-closing .closing-heading {
  font-family: var(--font-serif);
  font-size: 26px;
  margin: 0 0 14px;
}