/* ============================================================
   Self-hosted faces. No request leaves for fonts.googleapis.com.

   Vollkorn / Archivo / Martian Mono replace Fraunces / Inter /
   IBM Plex Mono. The originals are the faces AI-generated interfaces
   converge on; with no color and no photography on this page, the
   typeface is the brand, so it was the highest-leverage thing to change.
   ============================================================ */

@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Vollkorn-600-italic-ext-0.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Vollkorn-600-italic-1.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Vollkorn-600-ext-2.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Vollkorn-600-3.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Vollkorn-700-ext-4.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Vollkorn-700-5.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-400-ext-0.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-400-1.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-500-ext-2.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-500-3.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-600-ext-4.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-600-5.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-700-ext-6.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/Archivo-700-7.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/MartianMono-400-ext-0.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/MartianMono-400-1.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/MartianMono-500-ext-2.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/MartianMono-500-3.woff2) format('woff2');
  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;
}

/* ============================================================
   Monmouth Coffee Roasters. Design tokens
   Single source of truth for color, type, and space.
   Contrast ratios are computed against #FFFFFF per WCAG 2.2.
   ============================================================ */

:root {
  /* --- Color ------------------------------------------------
     Neutrals are warm-biased toward the accent: chosen, not
     inherited. The brief's copper #B4703F reaches only 3.94:1
     and is never set as text at any size.                     */
  --ground:       #FFFFFF;
  --ground-2:     #F6F4F1;   /* 1.10. Decorative band          */
  --ink:          #12100F;   /* 18.97                           */
  --muted:        #6E6862;   /* 5.50                            */
  --line:         #E4E0DA;   /* 1.31. Decorative rules only    */
  --line-strong:  #8A837A;   /* 3.74. Control boundaries       */
  --accent:       #8A5230;   /* 6.31                            */
  --accent-hover: #6F4126;   /* 8.54                            */
  --error:        #A3302A;   /* 6.97                            */
  --ok:           #2F6B4F;   /* 6.29                            */

  /* --- Type -------------------------------------------------
     Fraunces sets headlines, Inter sets everything a person
     reads, IBM Plex Mono sets things that are measured.       */
  --face-display: 'Vollkorn', Georgia, 'Times New Roman', serif;
  --face-text:    'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --face-mono:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Vollkorn carries more weight per character than Fraunces and needs
     less negative tracking; Martian Mono is markedly wider than IBM Plex
     and needs its own size step so ruled tables still fit their column. */
  /* Tracking is size-specific, never one value for a whole face. Letters read
     progressively further apart as they grow, so large text needs more
     negative tracking to hold together and small text needs slightly positive
     tracking to stay legible. A single --track-display was carrying both the
     hero (52-96px) and the section titles (40-72px); correct at the bottom of
     that range and visibly loose at the top. The hero gets its own step. */
  --track-hero:    -0.038em;  /* 52-96px. Once per page */
  --track-display: -0.025em;  /* 40-72px. Section titles */
  --t-mono:  0.6875rem;  /* 11. Labels */
  --t-mono2: 0.75rem;    /* 12. Values */

  --t-xs:      0.75rem;   /* 12 */
  --t-sm:      0.8125rem; /* 13 */
  --t-base:    0.9375rem; /* 15 */
  --t-md:      1.0625rem; /* 17 */
  --t-lg:      1.3125rem; /* 21 */
  --t-xl:      1.6875rem; /* 27 */
  --t-2xl:     2.125rem;  /* 34 */
  --t-3xl:     2.75rem;   /* 44 */
  --t-4xl:     3.625rem;  /* 58 */
  /* Three distinct display steps, not one. An earlier build set the hero
     and every section heading to the same 96px ceiling, which left the
     page with no scale hierarchy below the fold. */
  --t-hero:    clamp(3.25rem, 9.2vw, 6rem);      /* 52 → 96. Once per page */
  --t-display: clamp(2.5rem, 5.4vw, 4.5rem);     /* 40 → 72. Full-width sections */
  --t-section: clamp(2.125rem, 3.4vw, 2.75rem);  /* 34 → 44. Column-constrained */

  /* --- Space, on a 4px base --------------------------------- */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-6:  1.5rem;   --s-8:  2rem;     --s-12: 3rem;     --s-16: 4rem;
  --s-24: 6rem;     --s-32: 8rem;

  /* Buttons are the one surface on this page that sits above the ground, so
     they get a radius and a shade. Everything structural stays ruled and flat.
     --btn-shade is the accent pushed toward brown rather than black: a copper
     button dropping a grey shadow reads as dirty, one dropping its own colour
     reads as lit. Redeclared inside .invert, where the ground is near black
     and a dark shadow would be invisible. */
  --radius:    10px;
  --btn-shade: color-mix(in srgb, var(--accent) 62%, #180C05);

  --rail: 1120px;
  --rail-wide: 1320px;  /* one band breaks the rail so the page is not all one width */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(4rem, 9vw, 8rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Browser surfaces. The parts nobody draws still carry the
   design; left alone they ship someone else's defaults.
   ============================================================ */

::selection {
  background: var(--accent);
  color: var(--ground);
}

:root {
  caret-color: var(--accent);
  scrollbar-color: var(--line-strong) var(--ground-2);
  scrollbar-width: thin;
  accent-color: var(--accent);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ground-2); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--ground-2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::placeholder { color: var(--muted); opacity: 1; }