/* ============================================================
   Chalupa Elba — Colors & Type
   "Někde, kam nikdo nejezdí." A cottage in the mountains.
   Deep forest greens, warm wood, candlelight, unbleached linen.
   ============================================================ */

/* ---------- Webfonts ----------
   Wordmark / display serif: Cormorant Garamond (substitute for Caslon/Tiempos)
   Body serif:               Source Serif 4
   Quiet sans:               Inter (substitute for Söhne)
   FLAGGED: Caslon and Söhne are paid licenses. Replace with the licensed
   font files when available; the substitutes match the metrics and tone.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ============ COLORS ============ */

  /* —— Forest (primary, brand) —— */
  --forest-900: #1a2418;   /* deepest pine, near-black for type on cream */
  --forest-800: #243023;   /* primary brand surface — wordmark, dark panels */
  --forest-700: #2f3d2c;   /* hover / pressed */
  --forest-600: #3d4f38;   /* secondary forest */
  --forest-500: #5a6e52;   /* moss, accents */
  --forest-300: #8a9c80;   /* faded sage */
  --forest-100: #d6dbcd;   /* light sage tint */

  /* —— Wood (warm browns from cottage timber, dark stove) —— */
  --wood-900: #2a1a10;
  --wood-800: #3d2516;     /* dark cottage timber */
  --wood-700: #5a3a22;     /* warm seasoned wood */
  --wood-500: #8b5a36;     /* mid wood, signage */
  --wood-300: #b5895f;     /* light pine */

  /* —— Ember (candlelight, fire, paprika) —— */
  --ember-700: #8a3a14;    /* paprika, deep ember */
  --ember-500: #c25826;    /* candle flame, primary warm accent */
  --ember-300: #e29464;    /* soft glow */

  /* —— Linen (unbleached cream — page bg) —— */
  --linen-50:  #fbf7ee;    /* page background — primary cream */
  --linen-100: #f4ecdc;    /* card surface, slightly warmer */
  --linen-200: #e8ddc3;    /* dividers, low-contrast surfaces */
  --linen-300: #d4c5a3;    /* warm rule lines */

  /* —— Stone (cool greys, used sparingly) —— */
  --stone-700: #5a5a52;
  --stone-500: #8a8678;
  --stone-300: #c0bcae;

  /* —— Mist (overlays, photography) —— */
  --mist-fog: rgba(248, 244, 232, 0.85);
  --mist-shadow: rgba(26, 36, 24, 0.55);

  /* ============ SEMANTIC ============ */
  --bg:           var(--linen-50);
  --bg-elev:      var(--linen-100);
  --bg-dark:      var(--forest-800);
  --bg-darkest:   var(--forest-900);

  --fg:           var(--forest-900);     /* primary text on cream */
  --fg-muted:     var(--forest-600);     /* secondary text */
  --fg-faint:     var(--stone-500);      /* tertiary, captions */
  --fg-on-dark:   var(--linen-50);       /* text on forest/wood surfaces */
  --fg-on-dark-muted: var(--linen-200);

  --accent:       var(--ember-500);      /* sparingly — CTAs, key marks */
  --accent-deep:  var(--ember-700);
  --accent-fg:    var(--linen-50);

  --rule:         var(--linen-300);      /* hairline, on cream */
  --rule-strong:  var(--forest-800);
  --rule-on-dark: rgba(244, 236, 220, 0.18);

  --link:         var(--forest-800);     /* underlined, no color shift */
  --link-hover:   var(--ember-700);

  /* ============ TYPE FAMILIES ============ */
  --font-display: 'Cormorant Garamond', 'Tiempos Headline', 'Caslon', 'Iowan Old Style', Georgia, serif;
  --font-serif:   'Source Serif 4', 'Tiempos Text', 'Source Serif Pro', Georgia, serif;
  --font-sans:    'Inter', 'Söhne', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* ============ TYPE SCALE ============ */
  /* Quiet, editorial. No display jumbo unless one editorial moment. */
  --fs-hero:      clamp(48px, 7vw, 96px);   /* hero wordmark moment */
  --fs-display:   clamp(36px, 4.5vw, 64px); /* section openers */
  --fs-h1:        clamp(28px, 3vw, 40px);   /* page H1 */
  --fs-h2:        clamp(22px, 2.2vw, 28px);
  --fs-h3:        18px;
  --fs-body:      17px;
  --fs-small:     15px;
  --fs-eyebrow:   12px;                     /* tracked, uppercase */

  --lh-tight:     1.05;   /* display */
  --lh-snug:      1.2;    /* h1/h2 */
  --lh-normal:    1.55;   /* body */
  --lh-loose:     1.7;    /* long-form */

  --track-eyebrow: 0.16em;
  --track-button:  0.06em;

  /* ============ SPACING ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============ RADII ============ */
  /* Quiet, mostly square. Tiny radii on cards. No pill buttons. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-image: 2px;        /* photos sit in 2px radius frames */

  /* ============ SHADOWS ============ */
  /* Soft, low-elevation. Like firelight, not spec-light. */
  --shadow-1: 0 1px 2px rgba(26, 36, 24, 0.06), 0 1px 1px rgba(26, 36, 24, 0.04);
  --shadow-2: 0 4px 16px rgba(26, 36, 24, 0.08), 0 1px 2px rgba(26, 36, 24, 0.05);
  --shadow-3: 0 12px 32px rgba(26, 36, 24, 0.14), 0 2px 4px rgba(26, 36, 24, 0.06);
  --shadow-glow: 0 0 60px rgba(194, 88, 38, 0.18);   /* candlelight halo */

  /* ============ MOTION ============ */
  /* Slow, considered. Like wood smoke, not a banner ad. */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur-mid:   320ms;
  --dur-slow:  600ms;
  --dur-slower: 900ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by giving elements these classnames or wrapping in a .ce-prose
   ============================================================ */

.ce-base, .ce-prose {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "kern", "liga", "onum";
}

/* —— Wordmark — the ONLY display moment. Italic 'Elba' echoes filoxenia. —— */
.ce-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1;
  color: currentColor;
}
.ce-wordmark em { font-style: italic; font-weight: 400; }

/* —— Hero/display headline (one per page max) —— */
.ce-hero, h1.ce-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: balance;
}

.ce-display, h2.ce-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* —— Headings (serif body family, not display) —— */
h1, .ce-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
  text-wrap: balance;
}
h2, .ce-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
}
h3, .ce-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
}

/* —— Eyebrow / kicker (sans, tracked, uppercase) —— */
.ce-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* —— Body —— */
p, .ce-p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0 0 1em 0;
  text-wrap: pretty;
}
.ce-prose p:last-child { margin-bottom: 0; }

.ce-lead {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg);
}

.ce-small, small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

.ce-caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-faint);
  letter-spacing: 0.01em;
}

/* —— Tomáš's voice — pull-quote / first-person from the host —— */
.ce-tomas {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg);
}

/* —— Inline elements —— */
a, .ce-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover, .ce-link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

em { font-style: italic; }
strong { font-weight: 600; color: var(--fg); }

code, .ce-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  background: var(--linen-200);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* —— Hairline —— */
hr, .ce-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}
.ce-rule-strong { border-top-color: var(--rule-strong); }

/* —— On-dark variants —— */
.ce-on-dark {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.ce-on-dark p,
.ce-on-dark .ce-p { color: var(--fg-on-dark); }
.ce-on-dark .ce-eyebrow { color: var(--fg-on-dark-muted); }
.ce-on-dark a { color: var(--fg-on-dark); text-decoration-color: var(--rule-on-dark); }
.ce-on-dark hr { border-top-color: var(--rule-on-dark); }