/* ============================================================
   GÜÜT — Foundations
   Warm document-grade system. Espresso + cream, serif display,
   grotesk UI, mono numerals. Import on any surface; scope .guut
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Color: Core ---------- */
  --g-espresso:  #2D2823;   /* darkest — dark sections, ink on cream */
  --g-bark:      #4A4339;   /* secondary dark — body on cream */
  --g-clay:      #9A9286;   /* warm grey — muted text, hairlines */
  --g-sand:      #D6CEBE;   /* soft fill, dividers on cream */
  --g-cream:     #ECE6DA;   /* primary background */
  --g-paper:     #F3EFE5;   /* lightest — cards, raised surfaces */

  /* ---------- Color: Accent (restrained) ---------- */
  --g-ochre:     #A8884E;   /* links, active, the single warm accent */
  --g-ochre-deep:#8C6E3A;   /* accent hover */

  /* ---------- Color: On-dark tints ---------- */
  --g-cream-soft: #CFC8BB;  /* body text on espresso */
  --g-line-dark:  rgba(236, 230, 218, 0.16);
  --g-line-light: rgba(45, 40, 35, 0.16);
  --g-fill-dark:  rgba(236, 230, 218, 0.06);

  /* ---------- Type: Families ---------- */
  --g-serif:  "EB Garamond", Garamond, "Times New Roman", serif;
  --g-sans:   "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --g-mono:   "Space Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- Type scale ---------- */
  --g-display:  clamp(56px, 9vw, 132px);  /* serif, weight 500 */
  --g-h1: 48px;  --g-h2: 34px;  --g-h3: 23px;
  --g-body: 16px;  --g-body-sm: 13.5px;
  --g-label: 11px;            /* sans, tracked, uppercase */
  --g-mono-sm: 11px;          /* page refs, captions */

  --g-lead-tight: 1.08;
  --g-lead-head:  1.2;
  --g-lead-body:  1.65;

  --g-track-label: 0.18em;
  --g-track-caps:  0.04em;

  /* ---------- Spacing (8px base) ---------- */
  --g-1: 8px; --g-2: 16px; --g-3: 24px; --g-4: 40px; --g-5: 64px; --g-6: 96px; --g-7: 140px;

  /* ---------- Layout ---------- */
  --g-page-max: 1180px;
  --g-margin: 64px;

  /* ---------- Borders / radii ---------- */
  --g-hair-light: 1px solid var(--g-line-light);
  --g-hair-dark:  1px solid var(--g-line-dark);
  --g-radius: 0px;   /* document-grade: square by default */

  /* ---------- Motion ---------- */
  --g-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --g-t: 280ms;
}

/* ============================================================
   Base — scope under .guut
   ============================================================ */
.guut {
  background: var(--g-cream);
  color: var(--g-espresso);
  font-family: var(--g-sans);
  font-size: var(--g-body);
  line-height: var(--g-lead-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.guut .g-display {
  font-family: var(--g-serif);
  font-weight: 500;
  font-size: var(--g-display);
  line-height: var(--g-lead-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
.guut h1, .guut .g-h1 {
  font-family: var(--g-serif); font-weight: 500; font-size: var(--g-h1);
  line-height: var(--g-lead-head); letter-spacing: 0; margin: 0;
}
.guut h2, .guut .g-h2 {
  font-family: var(--g-serif); font-weight: 500; font-size: var(--g-h2);
  line-height: var(--g-lead-head); margin: 0;
}
.guut h3, .guut .g-h3 {
  font-family: var(--g-serif); font-weight: 500; font-size: var(--g-h3);
  line-height: 1.3; margin: 0;
}
.guut .g-italic { font-style: italic; font-weight: 400; }

.guut p, .guut .g-body {
  font-family: var(--g-sans); font-size: var(--g-body);
  line-height: var(--g-lead-body); color: var(--g-bark); margin: 0;
}
.guut .g-body-sm { font-size: var(--g-body-sm); line-height: 1.6; }

.guut .g-label {
  font-family: var(--g-sans); font-size: var(--g-label); font-weight: 600;
  letter-spacing: var(--g-track-label); text-transform: uppercase; color: var(--g-clay);
}
.guut .g-mono {
  font-family: var(--g-mono); font-size: var(--g-mono-sm);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--g-clay);
}

/* superscript numerals for keyword / list numbering */
.guut .g-sup {
  font-family: var(--g-mono); font-size: 0.42em; font-weight: 400;
  color: var(--g-ochre); vertical-align: super; margin-right: 0.35em;
}

/* ---------- Components ---------- */
.guut .g-btn {
  font-family: var(--g-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 28px; border: 1px solid var(--g-espresso);
  white-space: nowrap;
  background: var(--g-espresso); color: var(--g-cream);
  cursor: pointer; border-radius: var(--g-radius);
  transition: background var(--g-t) var(--g-ease), color var(--g-t) var(--g-ease), border-color var(--g-t) var(--g-ease);
}
.guut .g-btn:hover { background: var(--g-ochre); border-color: var(--g-ochre); color: var(--g-espresso); }
.guut .g-btn.is-ghost { background: transparent; color: var(--g-espresso); }
.guut .g-btn.is-ghost:hover { background: var(--g-espresso); color: var(--g-cream); }

.guut .g-link {
  color: var(--g-espresso); text-decoration: none;
  border-bottom: 1px solid var(--g-ochre); padding-bottom: 2px;
  transition: color var(--g-t) var(--g-ease);
}
.guut .g-link:hover { color: var(--g-ochre-deep); }

.guut .g-tag {
  font-family: var(--g-sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 11px; border: 1px solid var(--g-line-light); color: var(--g-bark);
}

.guut .g-input {
  font-family: var(--g-sans); font-size: 14px; color: var(--g-espresso);
  background: transparent; border: none; border-bottom: 1px solid var(--g-clay);
  padding: 10px 2px; width: 100%; outline: none;
  transition: border-color var(--g-t) var(--g-ease);
}
.guut .g-input::placeholder { color: var(--g-clay); }
.guut .g-input:focus { border-color: var(--g-ochre); }