/* ==========================================================================
   LURE & LEAF — Design System
   An Illustrated Field Companion to Carnivorous Plants
   --------------------------------------------------------------------------
   Palette : warm ivory paper · deep forest ink · carmine · dew blue
   Type    : Fraunces (display) · Newsreader (prose) · DM Sans (interface)
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- tokens ---------- */
:root {
  /* paper */
  --paper:      #FBF8F3;
  --paper-2:    #F4EEE4;
  --paper-3:    #EBE3D5;
  --paper-4:    #E0D5C2;

  /* ink */
  --ink:        #17251E;
  --ink-2:      #3D5148;
  --ink-3:      #6E8179;
  --ink-4:      #98A69F;

  /* botanical */
  --moss:       #21563F;
  --moss-2:     #2F7154;
  --moss-soft:  #DDE8E0;
  --sap:        #5C8C4A;

  /* accent */
  --carmine:    #A93A28;
  --carmine-2:  #C6503C;
  --carmine-soft:#F6E3DD;

  /* water */
  --dew:        #3F7686;
  --dew-soft:   #DFEAED;

  /* night surfaces */
  --night:      #112019;
  --night-2:    #182E24;
  --night-line: rgba(251,248,243,.14);

  /* utility */
  --line:       #E3D9C8;
  --line-soft:  #EFE8DB;
  --shadow-sm:  0 1px 2px rgba(23,37,30,.05);
  --shadow:     0 6px 24px -12px rgba(23,37,30,.22);
  --shadow-lg:  0 28px 70px -34px rgba(23,37,30,.42);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --measure: 38rem;         /* ~72 characters of prose */
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  --f-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-prose:   'Newsreader', Georgia, serif;
  --f-ui:      'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2,.8,.25,1);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--f-ui);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--carmine); color: var(--paper); }

a { color: inherit; }

/* ---------- typographic primitives ---------- */
.display {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.022em;
}
.d1 { font-size: clamp(2.6rem, 7.5vw, 5rem); }
.d2 { font-size: clamp(2.05rem, 5.2vw, 3.3rem); }
.d3 { font-size: clamp(1.5rem, 3.2vw, 2.05rem); line-height: 1.14; }
.d4 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.22; letter-spacing: -.012em; }

.eyebrow {
  font-family: var(--f-ui);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--accent { color: var(--carmine); }
.eyebrow--moss   { color: var(--moss); }

.prose-lead {
  font-family: var(--f-prose);
  font-size: clamp(1.12rem, 2.1vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink-2);
}

.sci { font-style: italic; }

.rule {
  width: 46px; height: 2px; border: 0; border-radius: 2px;
  background: var(--carmine);
}

/* ---------- layout ---------- */
.shell { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { width: min(860px, 100%); }
.stack > * + * { margin-top: 1rem; }

/* ---------- badge / chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .78rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--carmine); }
.chip--onnight { background: rgba(251,248,243,.07); border-color: var(--night-line); color: #D9E4DC; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: .92rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--carmine); outline-offset: 3px; }

.btn--primary { background: var(--carmine); color: #FFF6F2; box-shadow: 0 10px 24px -12px rgba(169,58,40,.75); }
.btn--primary:hover { background: var(--carmine-2); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--moss); }

.btn--ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--paper-2); }

.btn--onnight { border-color: var(--night-line); color: var(--paper); background: rgba(251,248,243,.06); }
.btn--onnight:hover { background: rgba(251,248,243,.13); }

.btn--sm { padding: .6rem 1.05rem; font-size: .82rem; }
.btn--block { width: 100%; }

/* ---------- cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.card--plain { background: var(--paper-2); box-shadow: none; }
.card--night { background: var(--night-2); border-color: var(--night-line); color: #C9D8CF; }
.card--night h3, .card--night strong { color: #fff; }
.card h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); letter-spacing: -.01em; margin-bottom: .45rem; }
.card p  { font-size: .95rem; }

.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- stat ---------- */
.stat { text-align: left; }
.stat b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1; color: var(--ink);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat .k { margin-top: .5rem; font-size: .82rem; font-weight: 600; color: var(--ink); }
.stat .d { margin-top: .18rem; font-size: .8rem; line-height: 1.45; color: var(--ink-3); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 4rem;
  background: var(--night);
  color: #A9BCB1;
  padding: 3.2rem 0 2.4rem;
}
.site-footer .brandmark { color: var(--paper); }
.site-footer p { font-size: .88rem; }
.footer-nav {
  display: flex; flex-wrap: wrap; gap: .55rem 1.35rem;
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--night-line);
  font-size: .8rem;
}
.footer-nav a { color: #93A79C; text-decoration: none; transition: color .2s; }
.footer-nav a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-fine { margin-top: 1.4rem; font-size: .74rem; color: #6F8378; line-height: 1.6; }

/* ---------- brandmark ---------- */
.brandmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.01em; color: var(--ink); text-decoration: none;
}
.brandmark .glyph {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; background: var(--moss); color: var(--paper);
}
.brandmark .glyph svg { width: 16px; height: 16px; }
.brandmark .amp { color: var(--carmine); font-style: italic; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(17,32,25,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal.open { display: flex; }
.modal__box {
  position: relative;
  width: min(680px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.4rem 2rem 2rem; box-shadow: var(--shadow-lg);
}
.modal__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper-2);
  color: var(--ink-2); cursor: pointer; line-height: 1;
}
.modal__close:hover { background: var(--paper-3); }
.modal__box h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: .35rem 0 .9rem; letter-spacing: -.015em; }
.modal__box h3 { font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); margin: 1.35rem 0 .35rem; }
.modal__box p, .modal__box li { font-family: var(--f-prose); font-size: 1rem; line-height: 1.7; }
.modal__box ul { padding-left: 1.1rem; margin-top: .4rem; }
.modal__box a { color: var(--carmine); }

/* ---------- misc ---------- */
.hairline { height: 1px; background: var(--line); border: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}