/* ============================================================
 * meadow-brand.css
 * Logo, wordmark, lockups, hero, headers, reversed variants.
 * Depends on tokens defined in meadow.css.
 * ============================================================ */

/* ---------- Logo mark (SVG) ----------
 * The .meadow-logo SVG uses currentColor for the bowl/stem/right-leaf
 * and a hardcoded sage leaf + terracotta berry. Set color on the parent
 * to recolor the "ink" parts.
 */
.meadow-logo {
  display: inline-block;
  width: 48px;
  height: 48px;
  color: var(--ink);
  flex-shrink: 0;
}
.meadow-logo svg { display: block; width: 100%; height: 100%; }

.meadow-logo--sm { width: 26px; height: 26px; }
.meadow-logo--md { width: 48px; height: 48px; }
.meadow-logo--lg { width: 96px; height: 96px; }
.meadow-logo--xl { width: 160px; height: 160px; }

/* Reversed: white ink for use on dark/sage/terra surfaces */
.meadow-logo--reversed { color: var(--paper); }

/* ---------- Wordmark ---------- */
.meadow-wordmark {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.meadow-wordmark::after {
  content: "";
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  border-radius: 50%;
  background: var(--terra);
  margin-left: 0.04em;
  align-self: flex-end;
  margin-bottom: 0.12em;
}
.meadow-wordmark--xs { font-size: 22px; }
.meadow-wordmark--sm { font-size: 28px; }
.meadow-wordmark--md { font-size: 40px; }
.meadow-wordmark--lg { font-size: 64px; }
.meadow-wordmark--xl { font-size: 96px; }
.meadow-wordmark--display { font-size: 140px; }

.meadow-wordmark--reversed { color: var(--paper); }

/* ---------- Lockup (mark + word) ---------- */
.meadow-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.meadow-lockup .meadow-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 5px;
}
.meadow-lockup .meadow-name {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.meadow-lockup .meadow-name::after {
  content: "";
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  border-radius: 50%;
  background: var(--terra);
  margin-left: 0.04em;
  align-self: flex-end;
  margin-bottom: 0.12em;
}
.meadow-lockup .meadow-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.meadow-lockup--sm .meadow-logo { width: 22px; height: 22px; }
.meadow-lockup--sm .meadow-name { font-size: 19px; }
.meadow-lockup--sm .meadow-tag { font-size: 8px; }

.meadow-lockup--md .meadow-logo { width: 32px; height: 32px; }
.meadow-lockup--md .meadow-name { font-size: 26px; }

.meadow-lockup--lg .meadow-logo { width: 56px; height: 56px; }
.meadow-lockup--lg .meadow-name { font-size: 44px; }
.meadow-lockup--lg .meadow-tag { font-size: 10px; }

/* Stacked vertical variant */
.meadow-lockup--stacked {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

/* Reversed lockup (light on dark) */
.meadow-lockup--reversed .meadow-logo { color: var(--paper); }
.meadow-lockup--reversed .meadow-name { color: var(--paper); }
.meadow-lockup--reversed .meadow-tag { color: rgba(255, 255, 255, 0.7); }

/* ---------- App icon tile ---------- */
.meadow-tile {
  display: grid;
  place-items: center;
  border-radius: 28px;
  width: 132px;
  height: 132px;
}
.meadow-tile .meadow-logo { width: 70%; height: 70%; }
.meadow-tile--sm  { width: 56px;  height: 56px;  border-radius: 14px; }
.meadow-tile--md  { width: 96px;  height: 96px;  border-radius: 22px; }
.meadow-tile--lg  { width: 132px; height: 132px; border-radius: 28px; }

.meadow-tile--cream { background: var(--bg);    border: 1px solid var(--line); }
.meadow-tile--paper { background: var(--paper); border: 1px solid var(--line); }
.meadow-tile--ink   { background: var(--ink);   }
.meadow-tile--ink   .meadow-logo { color: var(--paper); }
.meadow-tile--sage  { background: var(--sage);  }
.meadow-tile--sage  .meadow-logo { color: var(--paper); }
.meadow-tile--terra { background: var(--terra); }
.meadow-tile--terra .meadow-logo { color: var(--paper); }


/* ============================================================
 * HEADERS — page heads, hero variants, section heads
 * ============================================================ */

/* Editorial page header (small) — sits at the top of every screen */
.brand-pageheader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.brand-pageheader .left { flex: 1; min-width: 0; }
.brand-pageheader .eyebrow { margin-bottom: 6px; }
.brand-pageheader h1 {
  font-family: var(--display);
  font-size: 64px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}
.brand-pageheader .sub {
  color: var(--muted);
  margin: 12px 0 0;
  max-width: 520px;
  line-height: 1.55;
}
.brand-pageheader .actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Section header — used between major content blocks */
.brand-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 56px 0 18px;
}
.brand-sectionhead h2 {
  font-family: var(--display);
  font-size: 28px;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}
.brand-sectionhead .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Card header inside .card */
.brand-cardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 0;
}
.brand-cardhead .eyebrow { margin-bottom: 4px; display: block; }
.brand-cardhead h3 {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.05;
  margin: 0;
}


/* ============================================================
 * HERO — for landing pages, splashes, empty states
 * ============================================================ */

/* Hero: editorial cream — the canonical brand hero */
.brand-hero {
  position: relative;
  background: var(--bg);
  border-radius: 28px;
  padding: 88px 72px 80px;
  overflow: hidden;
  isolation: isolate;
}
.brand-hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-hero__eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--line-strong);
}
.brand-hero__title {
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 124px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 12ch;
}
.brand-hero__title em {
  font-style: italic;
  color: var(--terra);
}
.brand-hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 560px;
  margin: 28px 0 36px;
}
.brand-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Decorative mark in the corner of the hero */
.brand-hero__mark {
  position: absolute;
  bottom: -64px;
  right: -64px;
  width: 380px;
  height: 380px;
  color: var(--ink);
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}
.brand-hero__mark svg { width: 100%; height: 100%; }

/* Reversed hero — for splash / dark CTAs */
.brand-hero--reversed {
  background: var(--ink);
  color: var(--paper);
}
.brand-hero--reversed .brand-hero__sub { color: rgba(251, 247, 239, 0.72); }
.brand-hero--reversed .brand-hero__eyebrow { color: rgba(251, 247, 239, 0.6); }
.brand-hero--reversed .brand-hero__eyebrow::before { background: rgba(251, 247, 239, 0.25); }
.brand-hero--reversed .brand-hero__mark { color: var(--paper); opacity: 0.08; }

/* Sage hero — marketing accent */
.brand-hero--sage {
  background: var(--sage);
  color: var(--paper);
}
.brand-hero--sage .brand-hero__sub { color: rgba(251, 247, 239, 0.82); }
.brand-hero--sage .brand-hero__eyebrow { color: rgba(251, 247, 239, 0.7); }
.brand-hero--sage .brand-hero__eyebrow::before { background: rgba(251, 247, 239, 0.3); }
.brand-hero--sage .brand-hero__title em { color: #f0d9a8; }
.brand-hero--sage .brand-hero__mark { color: var(--paper); opacity: 0.1; }

/* ---------- Photo hero (homepage) ----------
 * Editorial overlay over a background photo. Used by index.html.
 * Pairs with .gen-form / .hero-secondary / .disclaimer below.
 */
.hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--paper);
  padding: 64px 56px 56px;
  margin-bottom: 40px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero .eyebrow { color: rgba(251,247,239,0.75); display: inline-flex; align-items: center; gap: 8px; }
.hero .eyebrow::before { content: ""; width: 24px; height: 1px; background: rgba(251,247,239,0.5); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 84px);
  line-height: 1.02;
  margin: 12px 0 14px;
  max-width: 760px;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; color: #e8a87a; }
.hero .sub {
  color: rgba(251,247,239,0.85);
  max-width: 540px;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 28px;
}
.hero .meadow-lockup { color: rgba(251,247,239,0.9); margin-bottom: 18px; }
.hero .meadow-lockup .meadow-name { color: var(--paper); }
.hero .meadow-lockup .meadow-tag { color: rgba(251,247,239,0.6); }
.hero .meadow-logo { color: var(--paper); }

/* Generator form — cream pill over dark photo. */
.gen-form {
  background: rgba(251,247,239,0.96);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 8px 8px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  box-shadow: 0 10px 40px rgba(26,24,20,0.18);
}
.gen-form input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 15px;
  font-family: inherit;
  padding: 12px 0;
  outline: none;
  color: var(--ink);
}
.gen-form input::placeholder { color: var(--muted); }
.gen-form button {
  background: var(--ink); color: var(--paper);
  border-radius: 999px; padding: 12px 22px;
  font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s;
}
.gen-form button:hover { background: #2c2820; }

/* Hero secondary link row — "surprise me" etc. */
.hero-secondary {
  margin-top: 18px;
  display: flex; align-items: center; gap: 8px;
  color: rgba(251,247,239,0.85);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-secondary a { color: rgba(251,247,239,0.95); text-decoration: none; border-bottom: 1px solid rgba(251,247,239,0.45); }
.hero-secondary a:hover { border-color: rgba(251,247,239,0.85); }

/* Disclaimer line below hero form. */
.disclaimer {
  margin-top: 22px;
  color: rgba(251,247,239,0.55);
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.disclaimer a { color: rgba(251,247,239,0.85); }

/* Compact hero variant — for inner-page banners */
.brand-hero--compact { padding: 48px 40px; border-radius: 20px; }
.brand-hero--compact .brand-hero__title { font-size: clamp(40px, 5vw, 64px); }
.brand-hero--compact .brand-hero__sub { font-size: 15px; margin: 16px 0 22px; }
.brand-hero--compact .brand-hero__mark { width: 240px; height: 240px; bottom: -40px; right: -40px; }

/* Centered hero (splash screens) */
.brand-hero--centered {
  text-align: center;
  padding: 120px 40px;
}
.brand-hero--centered .brand-hero__title { margin-left: auto; margin-right: auto; max-width: none; }
.brand-hero--centered .brand-hero__sub { margin-left: auto; margin-right: auto; }
.brand-hero--centered .brand-hero__actions { justify-content: center; }
.brand-hero--centered .brand-hero__lockup { margin-bottom: 32px; }


/* ============================================================
 * SPLASH SCREEN — full-viewport brand surface
 * ============================================================ */
.brand-splash {
  position: fixed;
  inset: 0;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  z-index: 100;
}
.brand-splash__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: brand-splash-in 600ms ease-out both;
}
.brand-splash__inner .meadow-logo { width: 72px; height: 72px; }
@keyframes brand-splash-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
 * SIDEBAR BRAND — the lockup as used in the app sidebar
 * ============================================================ */
.brand-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
}
.brand-sidebar-header .meadow-logo { width: 28px; height: 28px; }
.brand-sidebar-header .meadow-name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.brand-sidebar-header .meadow-name::after {
  content: "";
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  border-radius: 50%;
  background: var(--terra);
  margin-left: 0.04em;
  align-self: flex-end;
  margin-bottom: 0.1em;
}
.brand-sidebar-header .meadow-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px;
  line-height: 1;
}


/* ============================================================
 * EDITORIAL DROP CAP — for long-form content (recipe stories)
 * ============================================================ */
.brand-dropcap::first-letter {
  font-family: var(--display);
  font-size: 5.2em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 0;
  color: var(--terra);
}


/* ============================================================
 * RULE / DIVIDER — editorial flourish between sections
 * ============================================================ */
.brand-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 48px 0;
  color: var(--muted);
}
.brand-rule::before,
.brand-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.brand-rule__symbol {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--terra);
}