/* gaggio.com look for the Ghost blog (ideas.gaggio.com, Source theme on Ghost Starter).
   Loaded from Ghost › Settings › Code injection › Site header. Fonts come from gaggio.com
   (allowed for ideas.gaggio.com in _headers). Edit here, release, and the blog follows. */

@font-face { font-family: "Host Grotesk"; src: url("https://gaggio.com/fonts/host-grotesk-var.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("https://gaggio.com/fonts/literata-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("https://gaggio.com/fonts/literata-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Source reads these for titles (sans) and body text (serif) */
  --font-sans: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Literata", Georgia, serif;
  --font-serif-alt: "Literata", Georgia, serif;
  --gh-font-heading: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gh-font-body: "Literata", Georgia, serif;
  /* gaggio.com colours: paper, ink, neutral 7 and 3, deep vermilion */
  --background-color: #F4F3EF;
  --color-darker-gray: #141414;
  --color-primary-text: #141414;
  --color-secondary-text: #686866;
  --color-border: #DADAD6;
  --ghost-accent-color: #CC2C00;
}

/* Headings in Medium, as on gaggio.com (Source uses 700–800) */
html body .is-title,
html body .gh-content :is(h1, h2, h3, h4),
html body .gh-card-title,
html body .gh-article-title,
html body .gh-footer-signup-header { font-weight: 500; }

/* Footer: keep the newsletter sign-up; hide Source's bar (logo, Sign up, Powered by Ghost) and its icon row */
.gh-footer .gh-footer-bar,
.gh-footer .gh-social-links { display: none; }
.gh-footer .gh-footer-signup { margin-bottom: 80px; }

/* The gaggio.com footer, pasted in Code injection › Site footer */
.fg-footer { border-top: 1px solid #DADAD6; color: #686866; font-family: "Host Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 22px; font-weight: 400; background: var(--background-color); }
.fg-footer__inner { display: flex; flex-direction: column; gap: 12px; padding-block: 32px; }
.fg-footer p { margin: 0; }
.fg-footer ul { list-style: none; margin: 0; padding: 0; }
.fg-footer a { color: inherit; text-decoration: none; transition: color .15s ease; }
.fg-footer a:hover { color: #CC2C00; }
.fg-footer__home { display: inline-flex; align-items: center; gap: 8px; vertical-align: top; }
.fg-footer__mark { display: block; height: 16px; aspect-ratio: 1380 / 1043.5; }
.fg-footer__mark svg { display: block; width: 100%; height: 100%; }
.fg-footer__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.fg-footer__links { display: flex; gap: 24px; }
.fg-footer__links a { display: block; }
.fg-footer__profiles { display: flex; align-items: center; gap: 16px; }
.fg-footer__profiles a { display: block; }
.fg-icon { display: block; width: 20px; height: 20px; }
.fg-icon svg { display: block; width: 100%; height: 100%; }
.fg-icon--mask { background: currentColor; -webkit-mask: url("https://gaggio.com/icons/linkedin.png") center / contain no-repeat; mask: url("https://gaggio.com/icons/linkedin.png") center / contain no-repeat; }
@media (min-width: 744px) { .fg-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; } }

/* Menu in the heading font, as on gaggio.com (Source sets it in the body font) */
.gh-navigation-menu, .gh-navigation-menu a, .gh-navigation-actions, .gh-navigation-actions a, .gh-navigation-actions button { font-family: var(--gh-font-heading); font-weight: 400; }
@media (min-width: 768px) { .gh-navigation-menu .nav a { font-size: 15px; line-height: 21px; } }
@media (min-width: 1100px) { .gh-navigation-menu .nav a { font-size: 16px; } }

/* Image captions in the sans, as on gaggio.com (t-small) */
.gh-content figcaption, .kg-card figcaption { font-family: var(--gh-font-heading); font-size: 15px; line-height: 21px; }
@media (min-width: 1100px) { .gh-content figcaption, .kg-card figcaption { font-size: 16px; line-height: 22px; } }