@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Bellefair&family=Nunito+Sans:wght@400;600&display=swap");

:root {
  /* Colour */
  --ivory: #fbf9f4;          /* main background, ~60% of a page */
  --sage: #e4e9df;           /* occasional section backgrounds, ~20% */
  --stone: #d8d0c3;          /* dividers and borders only, ~10% */
  --charcoal: #302f2b;       /* headings, body text, the one dark ground, ~7% */
  --sea-green: #4d7a71;      /* small accents only, ~3% */
  --sea-green-light: #a9c4bc;/* accents on charcoal */
  --ink-soft: #4a4843;       /* long paragraphs and lists */
  --ink-muted: #5b5953;      /* captions and secondary labels */
  --hairline: rgba(0, 0, 0, 0.08);

  /* Type */
  --font-brand: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-display: Bellefair, "Cormorant Garamond", Georgia, serif;
  --font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-6: 6px; --space-10: 10px; --space-14: 14px; --space-20: 20px; --space-28: 28px;
  --space-36: 36px; --space-48: 48px; --space-72: 72px; --gutter: 40px; --content-max: 1040px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px;

  /* Strokes */
  --stroke-loop: 1.8px; --stroke-underline: 2.4px; --stroke-drawing: 2.2px; --stroke-divider: 2px;
}

/* Type styles */
.zb-h1 { font: 400 56px/1.05 var(--font-display); color: var(--charcoal); margin: 0; text-wrap: balance; }
.zb-h2 { font: 400 40px/1.1 var(--font-display); color: var(--charcoal); margin: 0; text-wrap: balance; }
.zb-h3 { font: 400 26px/1.2 var(--font-display); color: var(--charcoal); margin: 0; }
.zb-lead { font: 400 18px/1.65 var(--font-body); color: var(--charcoal); margin: 0; }
.zb-body { font: 400 17px/1.65 var(--font-body); color: var(--charcoal); margin: 0; }
.zb-small { font: 400 14px/1.5 var(--font-body); color: var(--ink-muted); margin: 0; }
.zb-label { font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-green); }

/* BrandMark */
.zb-mark { font-family: var(--font-brand); font-weight: 500; line-height: 1; letter-spacing: .01em; color: var(--charcoal); white-space: nowrap; }
.zb-mark--sm { font-size: 26px; }
.zb-mark--md { font-size: 30px; }
.zb-mark--lg { font-size: 40px; }
.zb-mark--on-dark { color: var(--ivory); }

/* LoopAction */
.zb-loop { position: relative; display: inline-block; padding: 4px 6px; font: 600 16px/1 var(--font-body); color: var(--charcoal); white-space: nowrap; text-decoration: none; background: none; border: 0; cursor: pointer; }
.zb-loop svg { position: absolute; inset: -14px -20px; width: calc(100% + 40px); height: calc(100% + 28px); overflow: visible; pointer-events: none; fill: none; stroke: var(--sea-green); stroke-width: var(--stroke-loop); stroke-linecap: round; stroke-linejoin: round; }
.zb-loop--on-dark { color: var(--ivory); }
.zb-loop--on-dark svg { stroke: var(--sea-green-light); }

/* HandUnderline / UnderlineAction */
.zb-underline { position: relative; display: inline-block; }
.zb-underline svg { position: absolute; left: -2%; bottom: -8px; width: 104%; height: 14px; overflow: visible; fill: none; stroke: var(--sea-green); stroke-width: var(--stroke-underline); stroke-linecap: round; }
.zb-under-action { font: 600 16px/1 var(--font-body); color: var(--sea-green); text-decoration: none; white-space: nowrap; cursor: pointer; background: none; border: 0; padding: 0; }
.zb-under-action:hover { color: var(--charcoal); }

/* Focus */
.zb-loop:focus-visible, .zb-under-action:focus-visible { outline: 2px solid var(--sea-green); outline-offset: 6px; border-radius: 2px; }
.zb-loop--on-dark:focus-visible { outline-color: var(--sea-green-light); }

/* LineDrawing */
.zb-drawing { display: inline-block; color: var(--charcoal); }
.zb-drawing--accent { color: var(--sea-green); }
.zb-drawing svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Divider */
.zb-divider { display: block; width: 100%; height: 20px; fill: none; stroke: var(--stone); stroke-width: var(--stroke-divider); stroke-linecap: round; }