/* Webfonts are served from Google Fonts. Cardo (logotype), EB Garamond
   (editorial), Karla (text & UI). If you need self-hosted binaries, download
   these three families and replace this import with local @font-face rules. */
@import url("https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Karla:wght@300;400;500&display=swap");
:root {
  /* Core — ivory carries ~80% of every surface */
  --hm-ivory: #FBF8F2;
  --hm-linen: #EFEAE0;
  --hm-sea-glass: #9BBFB9;
  --hm-ochre: #C08A3E;

  /* Secondary */
  --hm-turquoise: #4E7F7B;
  --hm-brass: #E8C98A;
  --hm-olive: #8A9A76;
  --hm-terracotta: #B87A5C;
  --hm-rose: #C9A29B;
  --hm-ink: #2E2C28;
  --hm-white: #FFFFFF;

  /* Ink steps — tints of #2E2C28, used for text hierarchy only */
  --hm-ink-80: #3E3B36;
  --hm-ink-60: #5C574E;
  --hm-ink-40: #8A857C;

  /* Semantic surfaces */
  --surface-page: var(--hm-ivory);
  --surface-card: var(--hm-white);
  --surface-plate: var(--hm-linen);
  --surface-tint: var(--hm-sea-glass);
  --surface-inverse: var(--hm-ink);
  --surface-inverse-alt: var(--hm-turquoise);

  /* Semantic text */
  --text-heading: var(--hm-ink);
  --text-body: var(--hm-ink-80);
  --text-muted: var(--hm-ink-60);
  --text-caption: var(--hm-ink-40);
  --text-accent: var(--hm-ochre);
  --text-eyebrow: var(--hm-turquoise);
  --text-on-inverse: var(--hm-ivory);
  --text-link: var(--hm-turquoise);
  --text-link-hover: var(--hm-ochre);

  /* Drawn marks */
  --mark-default: var(--hm-olive);
  --mark-accent: var(--hm-ochre);
  --mark-inverse: var(--hm-ivory);
}
:root {
  --font-logotype: "Cardo", Georgia, serif;
  --font-editorial: "EB Garamond", "Cardo", Georgia, serif;
  --font-text: "Karla", system-ui, -apple-system, sans-serif;

  /* Editorial scale */
  --type-display-size: 88px;
  --type-display-line: 1.06;
  --type-h1-size: 56px;
  --type-h1-line: 1.1;
  --type-h2-size: 44px;
  --type-h2-line: 1.14;
  --type-h3-size: 28px;
  --type-h3-line: 1.3;
  --type-standfirst-size: 22px;
  --type-standfirst-line: 1.6;
  --type-body-size: 17px;
  --type-body-line: 1.9;
  --type-small-size: 13px;
  --type-small-line: 2;
  --type-caption-size: 12px;
  --type-caption-line: 1.8;
  --type-eyebrow-size: 11px;
  --type-eyebrow-line: 1.8;
  --type-micro-size: 9px;

  /* Tracking */
  --track-masthead: 0.11em;
  --track-masthead-italic: 0.07em;
  --track-lockup: 0.14em;
  --track-eyebrow: 0.28em;
  --track-micro: 0.34em;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --measure-body: 56ch;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 60px;
  --space-9: 80px;
  --space-10: 110px;
  --space-11: 140px;

  --gutter-grid: 24px;
  --page-max: 1180px;
  --page-pad: 60px;
  --section-gap: 110px;
}
:root {
  /* The system is drawn with hairlines, not shadows. */
  --hairline: 1px solid rgba(46, 44, 40, 0.14); /* @kind other */
  --hairline-soft: 1px solid rgba(46, 44, 40, 0.08); /* @kind other */
  --hairline-inverse: 1px solid rgba(251, 248, 242, 0.55); /* @kind other */
  --hairline-color: rgba(46, 44, 40, 0.14);
  --rule-accent: 1px solid var(--hm-ochre);

  --radius-none: 0;
  --radius-seal: 50%;

  --stroke-mark: 1.15px;
  --stroke-mark-small: 0.9px;

  --scrim-ink: rgba(46, 44, 40, 0.34);
  --ease-quiet: cubic-bezier(0.32, 0.08, 0.24, 1); /* @kind other */
  --duration-quiet: 320ms; /* @kind other */
}