/* Libélula — design tokens */
:root {
  /* Palette — warm rainforest at dawn */
  --cream: #EDF1EC;            /* primary surface, your brand light green-white */
  --paper: #F6F3EC;             /* warmer secondary surface */
  --paper-deep: #E6E1D3;        /* section dividers, subtle fills */
  --ink: #1F2A22;               /* warm forest ink, not black */
  --ink-soft: #3B4A3F;
  --ink-quiet: #6B7368;
  --ink-whisper: #9AA097;

  --jungle: #4A7A47;            /* primary accent — your green */
  --jungle-deep: #2F4A3A;
  --jungle-quiet: #8AA88A;
  --tan: #A67C52;               /* secondary warm tone */
  --tan-soft: #C8A983;
  --clay: #B56B3E;              /* sparingly — terracotta accent */

  /* Type */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --trk-display: -0.02em;
  --trk-eyebrow: 0.22em;
  --trk-caption: 0.14em;

  /* Timing — everything responds calmly */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 320ms;
  --dur-calm: 720ms;
  --dur-slow: 1600ms;

  /* Layout */
  --col-narrow: 680px;
  --col-reading: 760px;
  --col-wide: 1280px;
  --col-broad: 1640px;

  /* Corner softness — default (current/sharper) state.
     Overridden when body[data-corners="soft"] is set. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  --gutter: clamp(20px, 4vw, 56px);
}

/* SOFT corners — calmer, more pebble-like */
body[data-corners="soft"] {
  --r-xs: 10px;
  --r-sm: 18px;
  --r-md: 26px;
  --r-lg: 36px;
  --r-xl: 48px;
  --r-2xl: 56px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  overflow-x: hidden;
}

/* Fluid type for truly responsive phone→4K */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--trk-display);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--trk-eyebrow);
  color: var(--ink-quiet);
  font-weight: 400;
}
.caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--trk-caption);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Universal placeholder system — aspect-locked, crop-safe */
.img {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  display: block;
  width: 100%;
}
.img::before {
  content: "";
  display: block;
  padding-top: var(--ratio, 66.6%);
}
.img > img,
.img > .img-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* any future image fills the frame, no stretch */
  object-position: center;
}
/* Placeholder stripes — subtle, tonal — replaced when a real image is dropped in */
.img .ph {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(31, 42, 34, 0.045) 0 2px,
      transparent 2px 14px
    ),
    linear-gradient(180deg, var(--ph-top, #D8D2C2) 0%, var(--ph-bot, #BCB59F) 100%);
}
.img .ph.forest { --ph-top: #4f6a4c; --ph-bot: #2a3a2a; }
.img .ph.mist   { --ph-top: #d7dbc9; --ph-bot: #a9b4a1; }
.img .ph.dawn   { --ph-top: #e2cdb0; --ph-bot: #8a7355; }
.img .ph.water  { --ph-top: #7e9895; --ph-bot: #3e5a5a; }
.img .ph.earth  { --ph-top: #b88f68; --ph-bot: #6b4e34; }
.img .ph.firelight { --ph-top: #caa06a; --ph-bot: #5a3823; }
.img .ph-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(246, 243, 236, 0.85);
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  max-width: calc(100% - 24px);
  line-height: 1.35;
}
.img .ph-label .dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: rgba(246,243,236,0.8);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* Aspect ratio helpers */
.r-1-1    { --ratio: 100%; }
.r-4-5    { --ratio: 125%; }
.r-3-4    { --ratio: 133.33%; }
.r-2-3    { --ratio: 150%; }
.r-3-2    { --ratio: 66.66%; }
.r-16-9   { --ratio: 56.25%; }
.r-21-9   { --ratio: 42.85%; }
.r-21-10  { --ratio: 47.6%; }
.r-2-1    { --ratio: 50%; }
.r-hero   { --ratio: 56.25%; }

/* Subtle dragonfly watermark utility */
.dragonfly-wm {
  position: absolute;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
}

/* Focus */
:focus-visible {
  outline: 1.5px solid var(--jungle);
  outline-offset: 3px;
}

/* Selection */
::selection { background: var(--jungle); color: var(--cream); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}