@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400&display=swap');

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

:root {
  --text-primary: #1a1a1a;
  --text-secondary: #888;
  --text-hint: #bbb;
  --border: rgba(0,0,0,0.12);
  --border-mid: rgba(0,0,0,0.2);
  --bg: #fff;
  --bg-secondary: #f8f7f5;
  --accent: #1a1a1a;
  --max-width: 1080px;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.cg { font-family: 'Cormorant Garamond', serif; }

/* ── SITE WRAPPER ── */
.site { max-width: var(--max-width); margin: 0 auto; }

/* ── NAV ── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 2rem;
  border-bottom: 0.5px solid var(--border);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 300;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--text-primary);
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--text-secondary);
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--text-primary);
}
.nav-links a.active { border-bottom: 0.5px solid var(--text-primary); padding-bottom: 2px; }

/* ── BUTTONS ── */
.btn {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 9px 18px; border: 0.5px solid var(--border-mid);
  background: transparent; color: var(--text-primary);
  cursor: pointer; text-decoration: none; display: inline-block;
  font-family: 'DM Sans', sans-serif; font-weight: 300;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--text-primary); color: #fff; }
.btn-fill {
  background: var(--text-primary); color: #fff;
  border-color: var(--text-primary);
}
.btn-fill:hover { background: #333; }

/* ── LABELS ── */
.sec-label {
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-secondary);
}
.eyebrow {
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* ── TAGS ── */
.tag {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border: 0.5px solid var(--border-mid);
  color: var(--text-secondary); display: inline-block;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── EMAIL CAPTURE ── */
.input-row { display: flex; }
.email-input {
  flex: 1; font-size: 12px; padding: 10px 14px;
  border: 0.5px solid var(--border-mid); background: transparent;
  color: var(--text-primary); font-family: 'DM Sans', sans-serif;
  outline: none;
}
.email-btn {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 18px; background: var(--text-primary); color: #fff;
  border: none; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.email-note { font-size: 11px; color: var(--text-secondary); margin-top: 8px; }

/* ── FOOTER ── */
.footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem;
  border-top: 0.5px solid var(--border);
}
.footer-copy { font-size: 11px; color: var(--text-secondary); }
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 300;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* ── AD ZONES ── */
.ad-zone {
  padding: 1.5rem 2rem;
  border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  min-height: 100px;
  background: var(--bg-secondary);
}
.ad-zone-label {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-hint);
}

/* ── BREADCRUMB ── */
.breadcrumb-bar {
  padding: 1rem 2rem; border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 0.75rem;
}
.bc { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none; }
.bc:hover { color: var(--text-primary); }
.bc-sep { font-size: 10px; color: var(--border-mid); }
.bc-current { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-primary); }

/* ── PHOTO PLACEHOLDERS ── */
.photo-placeholder {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 100%;
}
.photo-placeholder .icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 0.5px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
}
.photo-placeholder .icon svg { width: 20px; height: 20px; opacity: 0.3; }
.photo-placeholder .label {
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary);
}
.photo-placeholder .note { font-size: 10px; color: var(--text-hint); }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 680px) {

  .nav { padding: 1rem 1.25rem; }
  .nav-links { display: none; }
  .nav-logo { font-size: 16px; }

  .hero, .page-header, .recipe-hero, .story, .note-section,
  .email-section, .email-cta, .about-strip, .pennie-section,
  .next-section, .contact-hero, .work-section, .recipe-feature,
  .recipe-body, .cat-grid, .photo-pair, .cta-strip, .featured {
    grid-template-columns: 1fr !important;
  }

  .hero-img, .header-right, .story-left, .note-left, .email-left,
  .about-left, .pennie-left, .next-left, .contact-left, .work-left,
  .recipe-thumb-lg, .featured-thumb, .ingredients-col, .identity-left {
    border-right: none !important;
    border-bottom: 0.5px solid var(--border) !important;
  }

  .hero-img, .header-right, .pennie-left,
  .recipe-thumb-lg, .featured-thumb { min-height: 260px !important; }

  .hero-content, .header-left, .hero-info,
  .recipe-feature-info, .featured-info { padding: 1.75rem 1.25rem !important; }

  .hero-h1, .page-title, .recipe-title,
  .featured-title, .contact-title { font-size: 36px !important; }

  .story-chapter { font-size: 22px !important; }
  .pennie-title { font-size: 24px !important; }
  .email-h { font-size: 22px !important; }
  .col-title { font-size: 18px !important; }

  .stats-bar, .facts-bar, .currently-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stat, .fact, .currently-item {
    border-right: none !important;
    border-bottom: 0.5px solid var(--border) !important;
  }

  .recipe-grid, .recipe-grid-3, .more-grid, .product-grid {
    grid-template-columns: 1fr !important;
  }

  .recipe-card, .more-card, .product-card { border-right: none !important; }

  .science-grid { grid-template-columns: 1fr !important; }
  .science-card { border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .science-card:last-child { border-bottom: none !important; }

  .links-grid { grid-template-columns: 1fr !important; }
  .link-block { border-right: none !important; }
  .link-block:last-child { border-bottom: none !important; }

  .social-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .social-link { border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .social-link:last-child { border-bottom: none !important; }

  .work-cats, .quick-stats, .meta-grid { grid-template-columns: 1fr !important; }

  .cat-block { border-right: none !important; }

  .story-right, .note-right, .email-right, .about-left, .pennie-right,
  .contact-right, .work-right, .next-right, .more-header, .recipe-header,
  .links-header, .currently-header, .cat-header, .science-header,
  .grid-header { padding: 1rem 1.25rem !important; }

  .story-left, .note-left, .email-left, .next-left,
  .contact-left, .work-left { padding: 1.25rem !important; }

  .cta-strip { grid-template-columns: 1fr !important; }
  .cta-block { border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .cta-block:last-child { border-bottom: none !important; }

  .footer { flex-direction: column; gap: 6px; align-items: flex-start; padding: 1rem 1.25rem; }

  .ingredients-col, .steps-col { padding: 1.25rem !important; }
  .about-photo { min-height: 200px; }
  .about-right { padding: 1.25rem !important; }

  .filter-row, .cat-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .hero { height: auto !important; }
  .hero-img { height: 320px !important; min-height: unset !important; }
  .hero-h1 { font-size: 38px !important; }

  .recipe-grid { grid-template-columns: 1fr !important; }
  .recipe-card { border-right: none !important; }
  .recipe-card:nth-last-child(-n+2) { border-bottom: 0.5px solid var(--border) !important; }
  .recipe-card:last-child { border-bottom: none !important; }
  .card-thumb { height: 220px !important; }

  .recipe-thumb-lg { height: 280px !important; }
  .recipe-feature { grid-template-columns: 1fr !important; }

  .featured { grid-template-columns: 1fr !important; height: auto !important; }
  .featured-thumb { height: 280px !important; border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .featured-info { padding: 1.5rem 1.25rem !important; }
  .featured-title { font-size: 22px !important; }

  .story { grid-template-columns: 1fr !important; height: auto !important; }
  .story-left { min-height: 320px !important; border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .pennie-section { grid-template-columns: 1fr !important; }
  .pennie-left { height: 300px !important; border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }

  .about-strip { grid-template-columns: 1fr !important; }
  .about-left { border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .about-photo { height: 260px !important; }

  .page-header { grid-template-columns: 1fr !important; height: auto !important; }
  .header-left { border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }
  .page-title { font-size: 32px !important; }

  .stats-bar { grid-template-columns: 1fr 1fr !important; }

  .nav { padding: 0.85rem 1.25rem; }
  .btn, .btn-fill { padding: 0.75rem 1.25rem; font-size: 11px; }

  .recipe-hero { grid-template-columns: 1fr !important; height: auto !important; }
  .hero-img { height: 300px !important; border-right: none !important; border-bottom: 0.5px solid var(--border) !important; }

  .marquee-item { font-size: 9px; letter-spacing: 0.14em; }
}