/* Hungry Journal: the one place the brand's type and finishing touches live.
   Colors are tokens in each stylesheet's :root (see brand/BRAND.md for the palette). Load this last. */
:root {
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --brass: #cfa95a;
  --paper: #f3ead9;
}
/* Headlines are set like a magazine: a warm serif, tight but not cramped. */
h1, h2, .h-brand, .mark, .h-title, .h-tiletitle, .h-abouthead, .h-signup h2, .h-photohead h2 {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; letter-spacing: -.012em;
}
.h-landhero h1, .h-landtop h1, .hero h1 { font-weight: 600; letter-spacing: -.022em; line-height: 1; }
.h-landtop h1 em, .hero h1 em, .h-brand em, .mark em { font-style: italic; font-weight: 500; color: var(--brass); }
.h-tiletitle { letter-spacing: -.01em; }
/* Small labels are brass, spaced out, like section tags in a print issue. */
.h-kicker, .h-tilekick { color: var(--brass); letter-spacing: .14em; font-size: 12px; }
.h-tilekick { color: rgba(243, 234, 217, .85); }
/* The mark sits in front of the name in every header. */
.h-brand, .herobar .mark { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; }
.h-brand::before, .herobar .mark::before { content: ""; width: 24px; height: 24px; border-radius: 6px; background: url(/brand/mark.svg) center / contain no-repeat; flex: none; }
/* Footer wordmark */
.h-foot > .h-wrap > span:first-child { font-family: var(--serif); font-size: 15px; color: var(--paper); }
::selection { background: rgba(200, 83, 42, .45); color: #fff; }