/* ============================================================================
   [base] — Design System  ·  "Soft & Luminous"
   Single-file stylesheet: design tokens + base styles + component classes.
   Drop into the site, import once, and apply the classes / tokens below.
   No build step required. Fonts load from Google Fonts (free).
   ============================================================================ */

/* ---- 1. Fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

/* ---- 2. Tokens ----------------------------------------------------------- */
:root {
  /* Surfaces (warm cream paper) */
  --base-paper:        #faf4ec;   /* page background                       */
  --base-paper-2:      #f3e9dc;   /* recessed panels, inputs, hover fills   */
  --base-card:         #fffaf3;   /* cards that should lift off the paper   */

  /* Ink (dusty-plum near-black — never pure #000) */
  --base-ink:          #2e2533;   /* primary text, primary buttons          */
  --base-ink-soft:     #6c5f6a;   /* secondary text, captions, meta         */
  --base-hairline:     rgba(46, 37, 51, 0.10);  /* borders, dividers        */
  --base-hairline-2:   rgba(46, 37, 51, 0.18);  /* stronger borders         */

  /* Dawn accents — all low-chroma (L≈0.85, C≈0.06). Quiet, never loud.
     Use ONE accent per surface. Tints behind text only; never colored text
     on a colored ground. */
  --base-rose:         #efc6b6;
  --base-peach:        #f2cfa4;
  --base-butter:       #efe1a3;
  --base-mist:         #cddccb;
  --base-sky:          #bcd1de;
  --base-lavender:     #cfc0dd;

  /* Signature dawn gradient — sunrise wash, left→right */
  --base-dawn:         linear-gradient(90deg, var(--base-rose) 0%, var(--base-peach) 22%, var(--base-butter) 44%, var(--base-mist) 64%, var(--base-sky) 82%, var(--base-lavender) 100%);
  /* Radial sunrise — for hero backdrops / the wordmark lockup */
  --base-dawn-radial:  radial-gradient(120% 80% at 20% 110%, var(--base-peach) 0%, var(--base-rose) 22%, var(--base-lavender) 55%, var(--base-sky) 85%, var(--base-paper-2) 100%);
  /* Warm hero gradient — paper fading to peach */
  --base-gift:         linear-gradient(135deg, var(--base-butter) 0%, var(--base-peach) 50%, var(--base-rose) 100%);

  /* Type families */
  --base-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --base-font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --base-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Type scale (px) — fluid clamps for the big display sizes */
  --base-text-meta:    0.625rem;   /* 10px — mono labels, eyebrows         */
  --base-text-ui:      0.8125rem;  /* 13px — buttons, tags, dense UI       */
  --base-text-btn:     calc(var(--base-text-ui) * 1.3); /* ~17px — primary actions */
  --base-text-body:    1.0625rem;  /* 17px — body copy                     */
  --base-text-lead:    1.125rem;   /* 18px — lead paragraphs               */
  --base-text-h3:      1.75rem;    /* 28px                                  */
  --base-text-h2:      clamp(2rem, 1.4rem + 2vw, 2.75rem);    /* 32–44px   */
  --base-text-h1:      clamp(2.75rem, 1.6rem + 4.2vw, 5.25rem); /* 44–84px */

  /* Line heights */
  --base-leading-tight: 0.98;   /* display headlines                       */
  --base-leading-snug:  1.1;    /* sub-heads                               */
  --base-leading-body:  1.65;   /* body copy                               */

  /* Tracking */
  --base-tracking-display: -0.015em; /* tighten large serif                */
  --base-tracking-meta:    0.18em;   /* mono eyebrows (uppercase)          */

  /* Spacing scale (8px base, slow rhythm) */
  --base-space-1:  0.25rem;  /*  4px */
  --base-space-2:  0.5rem;   /*  8px */
  --base-space-3:  0.75rem;  /* 12px */
  --base-space-4:  1rem;     /* 16px */
  --base-space-6:  1.5rem;   /* 24px */
  --base-space-8:  2rem;     /* 32px */
  --base-space-12: 3rem;     /* 48px */
  --base-space-16: 4rem;     /* 64px */
  --base-space-20: 5rem;     /* 80px */
  --base-space-28: 7rem;     /* 112px — section padding, spacious          */

  /* Layout */
  --base-measure:      40rem;   /* ~640px — ideal reading width            */
  --base-content-max:  72rem;   /* page content cap                        */
  --base-gutter:       clamp(1.5rem, 5vw, 3.5rem); /* page side padding     */

  /* Radii — soft, small. Pills for buttons/tags, gentle round for cards. */
  --base-radius-sm:   4px;
  --base-radius-md:   6px;
  --base-radius-lg:   8px;
  --base-radius-pill: 999px;

  /* Shadows — barely-there; light, warm, diffuse. Avoid hard drop shadows. */
  --base-shadow-sm:  0 1px 2px rgba(46, 37, 51, 0.04);
  --base-shadow-md:  0 8px 30px rgba(46, 37, 51, 0.07);
  --base-shadow-lg:  0 20px 60px rgba(46, 37, 51, 0.10);

  /* Motion — slow & breathing, like a sigh. */
  --base-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --base-dur-fast:    220ms;
  --base-dur:         420ms;
  --base-dur-slow:    720ms;
}

/* ---- 3. Base / resets ---------------------------------------------------- */
.base-root,
body.base {
  background: var(--base-paper);
  color: var(--base-ink);
  font-family: var(--base-font-body);
  font-size: var(--base-text-body);
  line-height: var(--base-leading-body);
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- 4. Typography ------------------------------------------------------- */
.base-display,
.base-h1, .base-h2, .base-h3 {
  font-family: var(--base-font-display);
  font-weight: 400;
  letter-spacing: var(--base-tracking-display);
  line-height: var(--base-leading-tight);
  color: var(--base-ink);
  text-wrap: balance;
  margin: 0;
}
.base-h1 { font-size: var(--base-text-h1); }
.base-h2 { font-size: var(--base-text-h2); line-height: var(--base-leading-snug); }
.base-h3 { font-size: var(--base-text-h3); line-height: var(--base-leading-snug); }

/* Italic is the signature display voice — use it for the emphasized phrase. */
.base-em { font-style: italic; color: var(--base-ink-soft); }

.base-lead {
  font-family: var(--base-font-body);
  font-size: var(--base-text-lead);
  line-height: 1.55;
  color: var(--base-ink-soft);
  max-width: var(--base-measure);
  text-wrap: pretty;
  margin: 0;
}
.base-body {
  font-size: var(--base-text-body);
  line-height: var(--base-leading-body);
  color: var(--base-ink);
  max-width: var(--base-measure);
  text-wrap: pretty;
}
.base-muted { color: var(--base-ink-soft); }

/* Eyebrow / kicker — the structural mono voice. ALWAYS lowercase or smallcaps,
   wide tracking. Often paired with a small accent dot. */
.base-eyebrow {
  font-family: var(--base-font-mono);
  font-size: var(--base-text-meta);
  letter-spacing: var(--base-tracking-meta);
  text-transform: uppercase;
  color: var(--base-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--base-space-3);
  margin: 0;
}
.base-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--base-rose);   /* override per-section with any accent  */
  flex: 0 0 auto;
}
.base-eyebrow.no-dot::before { display: none; }

.base-meta {
  font-family: var(--base-font-mono);
  font-size: var(--base-text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--base-ink-soft);
}

/* ---- 5. Wordmark --------------------------------------------------------- */
/* The mark is the literal lowercase word in brackets, set in the display
   serif. Brackets are dimmed to ~55% so "base" reads as the figure. */
.base-wordmark {
  font-family: var(--base-font-display);
  font-weight: 400;
  line-height: 1;
  color: var(--base-ink);
  display: inline-flex;
  align-items: baseline;
  letter-spacing: -0.01em;
}
.base-wordmark .bracket { opacity: 0.55; font-weight: 300; }
.base-wordmark.italic { font-style: italic; }

/* ---- 6. Buttons ---------------------------------------------------------- */
.base-btn {
  font-family: var(--base-font-body);
  font-size: var(--base-text-btn);
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  border-radius: var(--base-radius-pill);
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  transition: transform var(--base-dur-fast) var(--base-ease),
              background var(--base-dur-fast) var(--base-ease),
              opacity var(--base-dur-fast) var(--base-ease);
  text-decoration: none;
}
.base-btn:active { transform: translateY(1px) scale(0.99); }

.base-btn--primary { background: var(--base-ink); color: var(--base-paper); }
.base-btn--primary:hover { opacity: 0.88; }

.base-btn--secondary {
  background: transparent;
  color: var(--base-ink);
  border-color: var(--base-ink);
}
.base-btn--secondary:hover { background: var(--base-ink); color: var(--base-paper); }

/* Quiet text link with an underline that sits below the baseline. */
.base-btn--ghost {
  background: transparent;
  color: var(--base-ink);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--base-ink);
  padding: 0.4em 0;
}

/* Inline reading link */
.base-link {
  color: var(--base-ink);
  text-decoration: underline;
  text-decoration-color: var(--base-rose);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--base-dur-fast) var(--base-ease);
}
.base-link:hover { text-decoration-color: var(--base-ink); }

/* ---- 7. Form fields ------------------------------------------------------ */
.base-field {
  background: var(--base-paper-2);
  border: 1px solid var(--base-hairline);
  border-radius: var(--base-radius-sm);
  padding: var(--base-space-3) var(--base-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--base-space-1);
  transition: border-color var(--base-dur-fast) var(--base-ease),
              box-shadow var(--base-dur-fast) var(--base-ease);
}
.base-field:focus-within {
  border-color: var(--base-ink-soft);
  box-shadow: 0 0 0 3px var(--base-rose);
}
.base-field__label {
  font-family: var(--base-font-mono);
  font-size: var(--base-text-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--base-ink-soft);
}
.base-field input,
.base-field textarea,
.base-field select {
  border: none;
  background: transparent;
  font-family: var(--base-font-body);
  font-size: var(--base-text-body);
  color: var(--base-ink);
  outline: none;
  width: 100%;
  padding: 0;
}
.base-field input::placeholder { color: var(--base-ink-soft); opacity: 0.6; }

/* ---- 8. Tags / chips ----------------------------------------------------- */
/* Soft accent fill, ink text. Set --tag to any accent token. */
.base-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--tag, var(--base-peach));
  color: var(--base-ink);
  font-family: var(--base-font-body);
  font-size: var(--base-text-ui);
  padding: 0.45em 0.85em;
  border-radius: var(--base-radius-pill);
  line-height: 1;
}
/* Outline variant */
.base-tag--outline {
  background: transparent;
  border: 1px solid var(--base-hairline-2);
}

/* ---- 9. Cards ------------------------------------------------------------ */
.base-card {
  background: var(--base-card);
  border: 1px solid var(--base-hairline);
  border-radius: var(--base-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--base-shadow-sm);
  transition: box-shadow var(--base-dur) var(--base-ease),
              transform var(--base-dur) var(--base-ease);
}
.base-card--interactive:hover {
  box-shadow: var(--base-shadow-md);
  transform: translateY(-2px);
}
.base-card__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.base-card__body { padding: var(--base-space-6); display: flex; flex-direction: column; gap: var(--base-space-3); }

/* ---- 10. Quote / pull-quote --------------------------------------------- */
.base-quote {
  border-left: 2px solid var(--base-rose);
  padding-left: var(--base-space-4);
  font-family: var(--base-font-display);
  font-style: italic;
  font-size: var(--base-text-h3);
  line-height: 1.35;
  color: var(--base-ink);
  margin: 0;
}

/* ---- 11. Dividers / rules ----------------------------------------------- */
.base-rule { border: none; border-top: 1px solid var(--base-hairline); margin: 0; }
.base-dawn-rule { border: none; height: 3px; background: var(--base-dawn); }

/* ---- 12. Layout helpers -------------------------------------------------- */
.base-section { padding: var(--base-space-28) var(--base-gutter); }
.base-container { max-width: var(--base-content-max); margin-inline: auto; }
.base-stack { display: flex; flex-direction: column; }
.base-stack > * + * { margin-top: var(--base-space-4); }
.base-row { display: flex; gap: var(--base-space-3); align-items: center; flex-wrap: wrap; }

/* ---- 13. Nav ------------------------------------------------------------- */
.base-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--base-space-6) var(--base-gutter);
  border-bottom: 1px solid var(--base-hairline);
}
.base-nav__links { display: flex; gap: var(--base-space-8); }
.base-nav__links a {
  font-family: var(--base-font-body);
  font-size: var(--base-text-ui);
  color: var(--base-ink);
  text-decoration: none;
  transition: opacity var(--base-dur-fast) var(--base-ease);
}
.base-nav__links a:hover { opacity: 0.6; }

/* ---- 14. Photo slot (placeholder while real imagery is sourced) ---------- */
/* Replace with soft, ambient, non-staged nature photography. */
.base-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--base-radius-md);
  background: var(--base-dawn);
  min-height: 200px;
}
.base-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 15. Gentle entrance animation -------------------------------------- */
/* Add .base-rise to elements you want to fade + drift up on load/scroll.
   Pair with IntersectionObserver toggling .is-in, or just let it run on load. */
.base-rise { opacity: 0; transform: translateY(14px); }
.base-rise.is-in,
.base-rise.base-rise--auto {
  opacity: 1;
  transform: none;
  transition: opacity var(--base-dur-slow) var(--base-ease),
              transform var(--base-dur-slow) var(--base-ease);
}