@charset "UTF-8";
/* ZAHNO — CSS custom properties, generated from design-tokens.json */
:root {
  /* Colors */
  --color-ink: #210F03;
  --color-brown-dark: #39291A;
  --color-brown-mid: #412C1B;
  --color-text-body: #453F35;
  --color-accent-primary: #9B8A63;
  --color-accent-light: #AD976E;
  --color-neutral-sand: #BEAB8A;
  --color-surface: #FFFFFF;
  --color-line: #231F20;

  /* Typography */
  --font-display: 'Jost', 'Poppins', 'Montserrat', sans-serif;
  --font-body: 'Jost', 'Work Sans', sans-serif;
  --font-micro: 'Titillium Web', sans-serif;

  /* Spacing scale */
  --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;

  /* Shadows */
  --shadow-floating-product: 0 20px 40px rgba(33, 15, 3, 0.15);
  --shadow-card: 0 4px 16px rgba(33, 15, 3, 0.08);

  /* Radius */
  --radius-card: 4px;
  --radius-image: 2px;

  /* Layout */
  --max-width: 1200px;
  --header-height: 84px;
}

/* Section tab — diagonal-cut banner for major section labels */
.tab-diagonal {
  background: var(--color-brown-dark);
  color: var(--color-accent-primary);
  clip-path: polygon(0 0, 92% 0, 82% 100%, 0 100%);
}

/* Result callout — closing banner for content blocks */
.callout-result {
  background: linear-gradient(90deg, var(--color-neutral-sand), #E8DFCD, var(--color-surface));
  color: var(--color-text-body);
}
.callout-result strong {
  text-transform: uppercase;
  color: var(--color-ink);
}

/* Corner wedge — decorative diagonal accent */
.corner-wedge {
  background: linear-gradient(135deg, var(--color-neutral-sand), transparent 60%);
  clip-path: polygon(100% 0, 100% 40%, 60% 0);
}

/* Section title with arch-monogram bullet */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
}

/* Italic lead line under a title */
.lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Gold hairline rule */
.hairline {
  height: 1px;
  background: var(--color-accent-primary);
  border: none;
}