/* Forest Park Coffee Company — main stylesheet
   Palette sampled from the logo; type: EB Garamond (serif wordmark/tagline stand-in)
   + Montserrat (tracked "COFFEE COMPANY" stand-in). Both OFL, self-hosted. */

@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond-latin-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* REPLACEABLE IMAGES — none: every image is an <img> in the HTML. */

  /* Brand colours (logo) */
  --forest: #06361B;      /* "FOREST PARK" wordmark, circle frame */
  --pine: #0B4524;        /* trees, leaves */
  --tag-green: #0E3920;   /* tagline */
  --brown: #4A230D;       /* cup, beans, "COFFEE COMPANY", Arch skyline */
  --sage: #79937B;        /* mountain */
  --paper: #FDFDFA;       /* logo background */

  /* Steps of the brand hues */
  --forest-deep: #03240F;
  --brown-hover: #643214;
  --sage-light: #B3C4B4;  /* sage lightened for text on forest green */
  --sage-tint: #E9EFE8;
  --paper-warm: #F6F4EE;
  --ink: #18201B;
  --ink-soft: #3F4A43;
  --line: #D9DED6;

  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --step-4: clamp(2.35rem, 1.6rem + 3.2vw, 3.75rem);

  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --space-xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --radius: 10px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: var(--pine); text-underline-offset: 3px; }
a:hover { color: var(--brown); }
:focus-visible { outline: 3px solid var(--brown); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); color: var(--forest); line-height: 1.12; margin: 0 0 .5em; font-weight: 700; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 1em; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--forest); color: var(--paper); padding: .6rem 1rem; border-radius: 6px;
}
.skip-link:focus { top: .75rem; }

/* Buttons — one CTA style site-wide */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  padding: .8rem 1.5rem; cursor: pointer; transition: background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn-primary { background: var(--brown); color: var(--paper); box-shadow: 0 6px 16px -8px rgba(74, 35, 13, .7); }
.btn-primary:hover { background: var(--brown-hover); color: var(--paper); transform: translateY(-1px); }
.btn-light { background: var(--paper); color: var(--forest); }
.btn-light:hover { background: var(--sage-tint); color: var(--forest); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }
.text-link { font-weight: 600; color: var(--pine); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 253, 250, .96);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 3px solid var(--forest);
  box-shadow: 0 1px 0 var(--brown) inset;
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-emblem { width: 52px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { white-space: nowrap; font-family: var(--serif); font-weight: 800; font-size: 1.45rem; color: var(--forest); font-variant: small-caps; letter-spacing: .02em; }
.brand-sub {
  font-size: .62rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brown);
  display: flex; align-items: center; gap: .4rem; margin-top: .3rem; white-space: nowrap;
}
.brand-sub::before, .brand-sub::after { content: ""; height: 1.5px; width: .9rem; background: var(--brown); }
.site-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--forest); border-bottom-color: var(--sage); }
.btn-header { padding: .6rem 1.1rem; font-size: .8rem; }
@media (max-width: 879px) { .site-nav { display: none; } }
@media (max-width: 420px) {
  .header-inner { gap: .5rem; }
  .brand { gap: .45rem; }
  .brand-emblem { width: 40px; }
  .brand-name { font-size: 1.15rem; }
  .brand-sub { font-size: .5rem; letter-spacing: .16em; }
  .brand-sub::before, .brand-sub::after { width: .5rem; }
  .btn-header { padding: .55rem .8rem; font-size: .72rem; letter-spacing: .04em; }
}

/* Hero */
.hero { position: relative; background: var(--paper); padding-top: clamp(1.25rem, 3vw, 3.5rem); }
.hero-inner {
  display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center;
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.hero-logo { margin: 0; order: -1; justify-self: center; width: min(78%, 330px); }
.hero-logo img { width: 100%; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(74, 35, 13, .25), 0 22px 40px -28px rgba(6, 54, 27, .6); }
.hero-copy { text-align: center; }
.hero h1 { margin-bottom: .6rem; }
.hero-name { display: block; font-size: var(--step-4); font-weight: 800; font-variant: small-caps; letter-spacing: .01em; line-height: 1.02; }
.hero-what {
  display: block; margin-top: .7rem; font-family: var(--sans); font-size: clamp(.78rem, .7rem + .3vw, .9rem); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brown); line-height: 1.5;
}
.tagline { font-family: var(--serif); font-weight: 700; font-size: var(--step-2); color: var(--tag-green); line-height: 1.25; margin-bottom: .8rem; }
.lead { color: var(--ink-soft); max-width: 36rem; margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr .95fr; }
  .hero-logo { order: 0; width: 100%; max-width: 520px; }
  .hero-copy { text-align: left; }
  .lead { margin-inline: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-what { display: flex; align-items: center; gap: .8rem; }
  .hero-what::after { content: ""; flex: 1; max-width: 5rem; height: 2px; background: var(--brown); }
}
.ridge { display: block; width: 100%; height: clamp(56px, 8vw, 110px); }
.ridge use { fill: var(--forest); }
.ridge-mtn { fill: var(--sage); opacity: .55; }
.ridge-base { fill: var(--forest); }

/* Supplies */
.supplies { background: var(--forest); color: var(--paper); padding: var(--space-l) 0 var(--space-xl); margin-top: -1px; }
.section-head { max-width: 40rem; margin-bottom: var(--space-l); }
.supplies h2 { color: var(--paper); }
.supplies .section-head p { color: var(--sage-light); font-size: var(--step-1); }
.supply-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.supply {
  background: var(--paper); color: var(--ink); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; border-top: 5px solid var(--brown);
}
.supply-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.supply h3 { margin: 1.25rem 1.5rem .4rem; }
.supply p { margin: 0 1.5rem 1.5rem; color: var(--ink-soft); }
.section-cta { margin: var(--space-l) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.supplies .section-cta span { color: var(--sage-light); }
.supplies .btn-primary { box-shadow: 0 0 0 2px var(--paper); }

/* Office */
.office { padding: var(--space-xl) 0; background: var(--paper-warm); }
.office-inner { display: grid; gap: var(--space-l); align-items: center; }
.office-copy p { font-size: var(--step-1); color: var(--ink-soft); max-width: 34rem; margin-bottom: 1.75rem; }
.office-card {
  background: var(--paper); border-radius: var(--radius); border-top: 5px solid var(--brown);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 18px 40px -24px rgba(6, 54, 27, .45);
}
.office-card-head {
  font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brown); display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem;
}
.office-card-head::after { content: ""; flex: 1; max-width: 4rem; height: 2px; background: var(--brown); }
.office-card .ticks { margin: 0; font-size: var(--step-1); }
.office-card .ticks li { margin-bottom: .9rem; }
.office-card .ticks li:last-child { margin-bottom: 0; }
.ticks { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .55rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--pine);
}
.ticks li::after {
  content: ""; position: absolute; left: .36rem; top: calc(.45em + .2rem); width: .3rem; height: .55rem;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ticks strong { color: var(--forest); }
@media (min-width: 900px) { .office-inner { grid-template-columns: 1fr 1fr; } }

/* St. Louis */
.stl { padding: var(--space-xl) 0; text-align: center; }
.rule-mark { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--brown); margin-bottom: 1rem; }
.rule-mark span { height: 2px; width: min(22vw, 180px); background: var(--forest); }
.stl-lead { max-width: 40rem; margin: 0 auto var(--space-l); font-size: var(--step-1); color: var(--ink-soft); }
.stl-photo { margin: 0; }
.stl-photo img { width: 100%; border-radius: var(--radius); }

/* Contact */
.contact { background: var(--forest); color: var(--paper); padding: var(--space-xl) 0; }
.contact h2 { color: var(--paper); }
.contact h3 { color: var(--paper); font-size: var(--step-1); margin-top: 1.75rem; }
.contact-copy p { color: var(--sage-light); font-size: var(--step-1); }
.ticks-light li { color: var(--paper); }
.ticks-light li::before { background-color: var(--sage-light); }
.ticks-light li::after { border-color: var(--forest); }
.contact-inner { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 900px) { .contact-inner { grid-template-columns: .9fr 1.1fr; } }
.form-card { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .6); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; color: var(--forest); }
.opt { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1.5px solid #9AA59D; border-radius: 8px; padding: .75rem .9rem;
}
.field input:focus, .field textarea:focus { outline: 3px solid rgba(74, 35, 13, .35); outline-offset: 0; border-color: var(--brown); }
.field textarea { resize: vertical; min-height: 8rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: .25rem 0 1.1rem; min-height: 65px; }
.form-status { margin: 1rem 0 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--pine); }
.form-status.is-error { color: #8A1C0F; }

/* Footer */
.site-footer { background: var(--forest-deep); color: var(--sage-light); padding: var(--space-l) 0 1.5rem; font-size: .95rem; }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--sage-light); }
.footer-inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 2rem; border-bottom: 1px solid rgba(179, 196, 180, .25); }
.footer-name { font-family: var(--serif); font-variant: small-caps; font-weight: 800; font-size: 1.6rem; color: var(--paper); margin-bottom: .2rem; line-height: 1.1; }
.footer-tagline { font-family: var(--serif); font-size: 1.15rem; }
.footer-h { font-family: var(--sans); font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); margin-bottom: .8rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: .4rem; }
.site-footer .btn-light, .site-footer .btn-light:hover { color: var(--forest); }
/* Focus ring on dark green sections */
.supplies :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }
.footer-fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.25rem; font-size: .82rem; }
.footer-fine p { margin: 0; }

/* 404 */
.notfound { padding: var(--space-xl) 0; text-align: center; }
.notfound img { width: min(240px, 60%); margin: 0 auto 1.5rem; }
.notfound p { max-width: 34rem; margin-inline: auto; color: var(--ink-soft); }
.notfound ul { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: center; }