/* Holm Coffee's email, as its brand package describes it: Roast on Crema, Georgia for display, Helvetica for body.
   Client content inside Caliber's frame; the only expressive colour on the landing page. Illustrative, fictional brand. */

.hm { --roast: #3B2A20; --crema: #F4EBDD; --leaf: #4F6B4A; --espresso: #1E1612; --husk: #8A7F76; --chaff: #E3D9CB; --paper: #FFFFFF;
  width: 600px; background: var(--crema); color: var(--espresso); font: 400 16px/24px Helvetica, Arial, sans-serif; font-stretch: 100%; font-variant-numeric: normal; }
.hm .pre { padding: 10px 24px 0; text-align: center; font-size: 11px; line-height: 16px; color: var(--husk); text-decoration: underline; text-underline-offset: 2px; }
.hm .mast { padding: 22px 24px 14px; text-align: center; }
.hm .word { font: 400 22px/26px Georgia, serif; letter-spacing: 0.32em; color: var(--roast); padding-left: 0.32em; }
.hm .word small { display: block; font: 600 9px/12px Helvetica, Arial, sans-serif; letter-spacing: 0.3em; margin-top: 4px; color: var(--leaf); }
.hm nav { display: flex; justify-content: center; gap: 26px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--chaff); font: 600 11px/16px Helvetica, Arial, sans-serif; letter-spacing: 0.1em; color: var(--roast); }
.hm .hero svg { display: block; width: 600px; height: 330px; }
.hm .headline { padding: 30px 48px 0; text-align: center; }
.hm h1 { font: 600 32px/38px Georgia, serif; color: var(--roast); letter-spacing: -0.01em; }
.hm .subline { margin-top: 8px; font: 400 17px/24px Georgia, serif; font-style: italic; color: var(--leaf); }
.hm .kicker { font: 600 10px/14px Helvetica, Arial, sans-serif; letter-spacing: 0.24em; color: var(--leaf); margin-bottom: 12px; }
.hm .copy { padding: 18px 64px 26px; text-align: center; }
.hm .copy p + p { margin-top: 12px; }
.hm .sign { margin-top: 14px; font: 400 15px/22px Georgia, serif; font-style: italic; color: var(--roast); }
.hm .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 4px 28px 8px; }
.hm .tile svg { display: block; width: 100%; height: auto; background: #EADFCC; }
.hm .tile b { display: block; margin-top: 10px; font: 600 15px/20px Georgia, serif; color: var(--roast); }
.hm .tile span { display: block; font-size: 13px; line-height: 18px; color: var(--husk); }
.hm .tile em { display: block; font-style: normal; margin-top: 2px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--roast); }
.hm .cta { padding: 22px 24px 26px; text-align: center; }
.hm .button { display: inline-block; padding: 15px 30px; background: var(--roast); color: var(--crema); font: 600 13px/16px Helvetica, Arial, sans-serif; letter-spacing: 0.12em; }
.hm .ship { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--husk); }
.hm .foot { background: var(--roast); color: var(--chaff); padding: 26px 32px 28px; text-align: center; font-size: 12px; line-height: 17px; }
.hm .foot .word { color: var(--crema); font-size: 15px; }
.hm .foot .links { margin: 14px 0 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--crema); display: flex; justify-content: center; gap: 18px; font-size: 10px; }
.hm .foot p + p { margin-top: 4px; color: #B8AA9B; }