/* Cannabis Couple - built to sit next to cultivationconversation.cc:
   a lime field, near-black text, oversized light headings, no boxes.

   The green IS the identity here, so it is the background rather than an accent.
   That is the whole reason this looks like cannabis culture and not a SaaS site. */

:root {
  --cc-green:      #c8e85c;
  --cc-green-deep: #b5dc3f;
  --cc-ink:        #14210a;
  --cc-ink-soft:   #3c4d26;
  --cc-black:      #0d1305;
  --cc-white:      #ffffff;

  --cc-max: 1180px;
  --cc-gutter: clamp(1.25rem, 5vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.cc-body {
  margin: 0;
  background: var(--cc-green);
  color: var(--cc-ink);
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── header ──────────────────────────────────────────────────────── */

.cc-header {
  max-width: var(--cc-max);
  margin: 0 auto;
  padding: 1.25rem var(--cc-gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  /* Hairline under the header so it separates from the hero without a heavy bar. */
  border-bottom: 2px solid rgba(20, 33, 10, 0.13);
  padding-bottom: 1rem;
}

.cc-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  /* White on this lime fails contrast (~1.9:1). Ink is ~9:1 and matches the
     rest of the type, so the wordmark reads as part of the page. */
  color: var(--cc-ink);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.cc-logo:hover .cc-logo-text { text-decoration: underline; text-underline-offset: 3px; }
.cc-leaf { font-size: 1.15rem; line-height: 1; }

/* Header mark: the same leaf as the hero, scaled to the wordmark's x-height.
   The hero asset is a square canvas with padding, so it renders a touch smaller
   than its box - bump the width until the leaf optically matches the text. */
.cc-logo-leaf {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex: none;
  transition: transform 0.2s ease;
}
.cc-logo:hover .cc-logo-leaf { transform: rotate(-8deg) scale(1.06); }

.cc-nav { display: flex; align-items: center; gap: 1.6rem; }
.cc-nav-link {
  color: var(--cc-ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.cc-nav-link:hover { border-bottom-color: var(--cc-ink); }
.cc-nav-link.is-active { font-weight: 700; }

/* ── main ────────────────────────────────────────────────────────── */

.cc-main {
  max-width: var(--cc-max);
  margin: 0 auto;
  padding: 0 var(--cc-gutter) 3rem;
}

/* ── hero: the mark, large, floating on the field ────────────────── */

.cc-hero {
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(2rem, 6vw, 4rem);
}

.cc-hero-mark { width: 100%; }
.cc-hero-img {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: auto;
}

.cc-hero-mark--placeholder {
  border: 2px dashed rgba(20, 33, 10, 0.28);
  border-radius: 14px;
  padding: clamp(2.5rem, 8vw, 5rem) 1.5rem;
  text-align: center;
}
.cc-hero-placeholder { font-size: clamp(3rem, 10vw, 6rem); display: block; line-height: 1; }
.cc-hero-placeholder-note {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--cc-ink-soft);
}
.cc-hero-placeholder-note code {
  background: rgba(13, 19, 5, 0.08);
  padding: 0.15em 0.45em;
  border-radius: 5px;
  font-size: 0.9em;
}

/* ── oversized light headings ─────────────────────────────────────── */

.cc-section { padding: clamp(1.5rem, 4vw, 3rem) 0; }

.cc-mega {
  font-size: clamp(2.6rem, 8.5vw, 5.6rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.03em;
  margin: 0;
}
.cc-mega--alt { font-weight: 800; letter-spacing: -0.045em; }

.cc-h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

/* ── about copy: narrow, offset, no card ──────────────────────────── */

.cc-about { max-width: 46ch; margin-top: 1.75rem; }
.cc-about p { margin: 0; color: var(--cc-ink-soft); }

/* ── numbers ──────────────────────────────────────────────────────── */

.cc-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem 2rem;
  border-top: 2px solid rgba(20, 33, 10, 0.16);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.cc-number-n {
  display: block;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cc-number-l {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cc-ink-soft);
}

/* ── follow ──────────────────────────────────────────────────────── */

.cc-follow { padding-top: clamp(2.5rem, 7vw, 4.5rem); }
.cc-follow-copy { max-width: 42ch; color: var(--cc-ink-soft); margin: 0 0 1.5rem; }

.cc-btn {
  display: inline-block;
  background: var(--cc-black);
  color: var(--cc-green);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cc-btn:hover { background: #1b2610; transform: translateY(-2px); }

/* ── footer ──────────────────────────────────────────────────────── */

.cc-footer {
  border-top: 2px solid rgba(20, 33, 10, 0.16);
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) var(--cc-gutter) clamp(2.5rem, 6vw, 4rem);
}
.cc-footer p {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--cc-ink-soft);
}
.cc-footer a { color: var(--cc-ink); font-weight: 600; }

.cc-age {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cc-ink);
}

@media (max-width: 560px) {
  .cc-header { padding-top: 1.1rem; }
  .cc-nav { gap: 1.1rem; }
  .cc-nav-link { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cc-btn { transition: none; }
  .cc-btn:hover { transform: none; }
}