/* ---------- ETH3R / Summer Botanical ---------- */
/* Type: Instrument Serif (display, italic-led)
   Body: Newsreader  (warm, readable)
   Mono: JetBrains Mono
   ----------------------------------------------- */

:root {
  /* Set by JS based on theme */
  --paper:     #f1ebe0;
  --paper-2:   #e8e0d0;
  --paper-3:   #ddd2bd;
  --ink:       #1f2418;
  --ink-soft:  #3a3a30;
  --ink-mute:  #6b6a5c;
  --moss:      #2a3d2c;
  --moss-2:    #3f5a3f;
  --accent:    #b9694a;
  --accent-2:  #d6a07a;
  --line:      rgba(31,36,24,0.14);
  --line-2:    rgba(31,36,24,0.28);
  --rule:      rgba(31,36,24,0.4);

  /* Type scale */
  --t-display: clamp(48px, 9vw, 168px);
  --t-h1:      clamp(40px, 6.6vw, 108px);
  --t-h2:      clamp(28px, 3.4vw, 56px);
  --t-h3:      clamp(20px, 1.8vw, 28px);
  --t-body:    clamp(16px, 1.18vw, 19px);
  --t-small:   clamp(12px, 0.85vw, 14px);
  --t-mono:    clamp(11px, 0.78vw, 13px);

  /* Rhythm */
  --pad-x: clamp(20px, 5vw, 96px);
  --gap:   clamp(24px, 3vw, 48px);
  --rad:   2px;
}

[data-theme="herbarium"] {
  --paper:     #f1ebe0;
  --paper-2:   #e8e0d0;
  --paper-3:   #ddd2bd;
  --ink:       #1f2418;
  --ink-soft:  #3a3a30;
  --ink-mute:  #6b6a5c;
  --moss:      #2a3d2c;
  --moss-2:    #3f5a3f;
  --accent:    #b9694a;
  --accent-2:  #d6a07a;
  --line:      rgba(31,36,24,0.14);
  --line-2:    rgba(31,36,24,0.28);
  --rule:      rgba(31,36,24,0.5);
}

[data-theme="greenhouse"] {
  --paper:     #f6f4ec;
  --paper-2:   #ecebd9;
  --paper-3:   #d9dfb8;
  --ink:       #15201a;
  --ink-soft:  #2c3a30;
  --ink-mute:  #5d6b5a;
  --moss:      #2f6b3c;
  --moss-2:    #4f8a52;
  --accent:    #e0c24a;
  --accent-2:  #f0db8a;
  --line:      rgba(21,32,26,0.14);
  --line-2:    rgba(21,32,26,0.28);
  --rule:      rgba(21,32,26,0.5);
}

[data-theme="wildflower"] {
  --paper:     #f3e6d8;
  --paper-2:   #ebd8c2;
  --paper-3:   #e2c6a8;
  --ink:       #2a201a;
  --ink-soft:  #3e3026;
  --ink-mute:  #7a6a58;
  --moss:      #5d6b32;
  --moss-2:    #7a8a44;
  --accent:    #c08648;
  --accent-2:  #d6a268;
  --line:      rgba(42,32,26,0.16);
  --line-2:    rgba(42,32,26,0.3);
  --rule:      rgba(42,32,26,0.5);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, serif;
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 380;
  transition: background-color 600ms ease, color 600ms ease;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-underline-offset: 4px; }

/* Paper grain — subtle */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  z-index: 1;
  opacity: 0.6;
}

/* Type helpers */
.serif       { font-family: "Newsreader", Georgia, serif; }
.display     { font-family: "Instrument Serif", "Newsreader", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono        { font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; font-feature-settings: "ss01"; }
.italic      { font-style: italic; }
.upper       { text-transform: uppercase; letter-spacing: 0.16em; }
.tight       { letter-spacing: -0.02em; }

h1, h2, h3, h4 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

/* Layout */
.section {
  position: relative;
  padding: clamp(80px, 10vw, 160px) var(--pad-x);
  z-index: 2;
}
.section--tight { padding-block: clamp(48px, 6vw, 96px); }

.label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.rule {
  height: 1px;
  background: var(--line-2);
  width: 100%;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 24px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: transform 220ms ease, background 220ms, color 220ms, border-color 220ms;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); background: var(--moss); border-color: var(--moss); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn .arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(.2,.6,.2,1), transform 800ms cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Img placeholder (striped) */
.img-slot {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--paper-2) 0 12px,
      var(--paper-3) 12px 24px);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px;
  color: var(--ink-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}
.img-slot .ratio-tag { opacity: 0.7; }

/* Botanical figure container */
.botanical {
  color: var(--moss);
  display: inline-block;
  vertical-align: middle;
}
.botanical-soft { color: var(--moss-2); }
.botanical-accent { color: var(--accent); }

/* Scroll lock when menu open */
body.menu-open { overflow: hidden; }

/* Tweak: no botanicals */
body.no-botanicals .botanical,
body.no-botanicals .hero-art { display: none; }

/* Tweak: hero painting off */
body.no-hero-bg .hero-bg { display: none; }

/* Tweak: no italics on display */
body.no-italics h1 span,
body.no-italics h2 span,
body.no-italics h3 span,
body.no-italics .display em,
body.no-italics .display span[style*="italic"] { font-style: normal !important; }

/* Tweak: no anims */
body.no-anims .sway { animation: none; }
body.no-anims .reveal { opacity: 1; transform: none; transition: none; }
body.no-anims * { transition-duration: 0ms !important; }

/* Desktop / mobile visibility */
@media (max-width: 860px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: inline-flex !important; }
}
@media (min-width: 861px) {
  .mobile-only { display: none !important; }
}

/* Selection */
::selection { background: var(--moss); color: var(--paper); }

/* Focus */
:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Nav specifics */
.nav-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 200ms;
}
.nav-link:hover { opacity: 1; }

.theme-chip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
  opacity: 0.55;
  cursor: pointer;
  transition: all 220ms;
}
.theme-chip:hover { opacity: 0.9; border-color: var(--ink); }
.theme-chip.active {
  opacity: 1;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Hero canvas */
.hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Case card */
.case {
  border-top: 1px solid var(--line-2);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(40px, 5vw, 72px) 0;
  align-items: start;
}
.case:last-child { border-bottom: 1px solid var(--line-2); }
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; gap: 28px; }
}

/* Floating leaf animation */
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.sway { transform-origin: bottom center; animation: sway 6s ease-in-out infinite; }
.sway-2 { animation-duration: 8s; animation-delay: -2s; }
.sway-3 { animation-duration: 7s; animation-delay: -4s; }

/* Hover lift */
.lift { transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
.lift:hover { transform: translateY(-4px); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 24px var(--pad-x);
  transform: translateY(-100%);
  transition: transform 420ms cubic-bezier(.2,.6,.2,1);
}
.mobile-menu.open { transform: translateY(0); }

/* Util */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.relative { position: relative; }
.text-mute { color: var(--ink-mute); }
.text-moss { color: var(--moss); }
.text-accent { color: var(--accent); }