/*
 * Fieldnote Coffee Roasters: the light test site drawn across the Specimen boards.
 * Values come from Sp-Typography (type scale), Sp-Colours (seven colours) and
 * Sp-Component (the hero-actions rules, copied exactly so S6 has a known answer).
 * Only these seven colours are used, plus the one hover shade from Sp-Component:
 *   text #1F1B16 · muted #6B6258 · accent #B5542D · green #2F5D50
 *   page #F4EFE6 · card #FFFFFF · border #E2D9CB   (hover only: #9A4524)
 *//* fraunces-vietnamese-600-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fraunces-vietnamese-600-normal.woff2) format('woff2'), url(/assets/fraunces-vietnamese-600-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* fraunces-latin-ext-600-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fraunces-latin-ext-600-normal.woff2) format('woff2'), url(/assets/fraunces-latin-ext-600-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* fraunces-latin-600-normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/fraunces-latin-600-normal.woff2) format('woff2'), url(/assets/fraunces-latin-600-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* fraunces-vietnamese-400-italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fraunces-vietnamese-400-italic.woff2) format('woff2'), url(/assets/fraunces-vietnamese-400-italic.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* fraunces-latin-ext-400-italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fraunces-latin-ext-400-italic.woff2) format('woff2'), url(/assets/fraunces-latin-ext-400-italic.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* fraunces-latin-400-italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fraunces-latin-400-italic.woff2) format('woff2'), url(/assets/fraunces-latin-400-italic.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* dm-sans-latin-ext-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/dm-sans-latin-ext-400-normal.woff2) format('woff2'), url(/assets/dm-sans-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-400-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/dm-sans-latin-400-normal.woff2) format('woff2'), url(/assets/dm-sans-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* dm-sans-latin-ext-500-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/dm-sans-latin-ext-500-normal.woff2) format('woff2'), url(/assets/dm-sans-latin-ext-500-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-500-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/dm-sans-latin-500-normal.woff2) format('woff2'), url(/assets/dm-sans-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* dm-sans-latin-ext-600-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/dm-sans-latin-ext-600-normal.woff2) format('woff2'), url(/assets/dm-sans-latin-ext-600-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* dm-sans-latin-600-normal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/dm-sans-latin-600-normal.woff2) format('woff2'), url(/assets/dm-sans-latin-600-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #F4EFE6 url('/assets/bg-paper.png') repeat;
  color: #1F1B16;
  font: 400 1.125rem/1.6 "DM Sans", sans-serif;
}

a { color: inherit; }

.site-nav {
  height: 64px; padding: 0 64px; display: flex; align-items: center; gap: 28px;
  border-bottom: 1px solid #E2D9CB; font-size: .875rem; font-weight: 500; line-height: 1.5; color: #6B6258;
}
.site-nav .logo { flex-grow: 1; display: flex; }
.site-nav a { text-decoration: none; }
.cart-link { padding: 8px 14px; border-radius: 999px; background: #B5542D; color: #FFFFFF; font-weight: 600; }

.hero { padding: 56px 64px 0; }
.eyebrow { margin: 0 0 16px; font-size: .75rem; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: #6B6258; }
.hero h1 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 1.05;
  color: #1F1B16;
  margin: 0 0 24px;
  max-width: 612px;
}
.lede { margin: 0; max-width: 540px; color: #6B6258; }

/* The next four blocks are exactly the rules shown on Sp-Component. */
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.btn-primary {
  padding: 13px 22px;
  border-radius: 999px;
  background: #B5542D;
  color: #FFFFFF;
  font: 600 15px/1 "DM Sans", sans-serif;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #9A4524; }
.btn-primary:focus-visible {
  outline: 2px solid #1F1B16;
  outline-offset: 2px;
}
.btn-ghost {
  padding: 12px 21px;
  border: 1px solid #1F1B16;
  border-radius: 999px;
  color: #1F1B16;
}
@media (max-width: 640px) {
  .hero-actions { flex-direction: column; }
}
.hero-actions a { text-decoration: none; }
.hero-actions .btn-ghost { font: 600 15px/1 "DM Sans", sans-serif; }

.hero-image { display: block; width: 100%; max-width: 1040px; height: auto; margin-top: 44px; border-radius: 14px; }

section { padding: 64px; }
h2 { font: 600 2rem/1.15 Fraunces, Georgia, serif; margin: 0 0 24px; }
h3 { font: 600 1.25rem/1.3 "DM Sans", sans-serif; margin: 12px 0 4px; }
.small { font-size: .875rem; font-weight: 500; line-height: 1.5; color: #6B6258; }
.caption { font-size: .75rem; line-height: 1.4; letter-spacing: .04em; color: #6B6258; }
em { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 400; }

.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.product-card { background: #FFFFFF; border: 1px solid #E2D9CB; border-radius: 14px; padding: 16px; }
.product-card:nth-child(3) { background: #2F5D50; color: #FFFFFF; }
.product-card img { width: 100%; height: auto; border-radius: 10px; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid img { width: 100%; height: auto; border-radius: 10px; }

.icons { display: flex; gap: 20px; align-items: center; }

.band-beans { height: 220px; background: url('/assets/bg-beans.jpg') center / cover; border-radius: 14px; }
.band-map { height: 180px; background: url('/assets/bg-map.png') center / cover; border-radius: 14px; }

.journal-link { color: #B5542D; }
.journal-link:hover { background: #B5542D; color: #FFFFFF; }

.newsletter {
  margin: 64px; padding: 40px; border-radius: 14px; color: #FFFFFF;
  background: #2F5D50 url('/assets/bg-newsletter.jpg') center / cover;
}
.newsletter input { font: inherit; padding: 10px 14px; border: 1px solid #E2D9CB; border-radius: 999px; background: #FFFFFF; color: #1F1B16; }
.newsletter input:focus { outline: 2px solid #B5542D; }

footer { padding: 32px 64px; border-top: 1px solid #E2D9CB; }