/* Highway 20 Brewing — webfonts
   NOTE: No licensed font files were provided. These are Google Fonts
   substitutes chosen for the editorial/luxury brief:
   - Cormorant Garamond — high-contrast serif display
   - Jost — clean geometric sans for body/UI
   Replace with licensed files + @font-face rules when available. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* Highway 20 Brewing — color tokens
   All colors are extracted from assets/logo.png (highway-shield navy,
   brass ring lettering, hop-cone green) plus the neutral whites of the
   1875 church building. No generic brewery greens or brand-kit blues. */
:root {
  /* ── Base: navy (highway shield / ring) ── */
  --navy-900: #101d36;   /* near-black navy — deepest ink */
  --navy-800: #16294d;   /* dark shield navy */
  --navy-700: #1e3765;   /* primary logo navy */
  --navy-600: #2a4a82;   /* lifted navy — hover/links on light */
  --navy-100: #dde3ee;   /* navy-tinted hairline */

  /* ── Base: brass (ring lettering) ── */
  --brass-600: #9c7a3e;  /* deep brass — text-safe on cream */
  --brass-500: #b58e4c;  /* primary logo brass */
  --brass-300: #cbaa6f;  /* soft brass — rules, ornaments on navy */
  --brass-100: #ece2cf;  /* brass-tinted wash */

  /* ── Base: hop green (cones) — restrained accent only ── */
  --hop-600: #4c7a28;    /* leaf green */
  --hop-500: #6ca83e;    /* logo hop green */
  --hop-100: #e4eeda;    /* hop wash */

  /* ── Base: neutrals (church clapboard, paper) ── */
  --cream-50:  #fcfbf8;  /* paper — page background */
  --cream-100: #f6f3ec;  /* warm section wash */
  --cream-200: #ece7dc;  /* deeper wash / pressed */
  --white:     #ffffff;

  /* ── Semantic aliases ── */
  --surface-page:    var(--cream-50);
  --surface-wash:    var(--cream-100);
  --surface-card:    var(--white);
  --surface-dark:    var(--navy-800);
  --surface-ink:     var(--navy-900);

  --text-display:    var(--navy-800);
  --text-body:       #2c3a55;   /* navy-cast body ink */
  --text-muted:      #63708a;   /* muted navy-gray */
  --text-inverse:    var(--cream-50);
  --text-inverse-muted: #b9c2d4;

  --accent-brass:    var(--brass-500);
  --accent-brass-deep: var(--brass-600);
  --accent-hop:      var(--hop-500);

  --border-hairline: var(--navy-100);
  --border-brass:    var(--brass-300);
  --border-dark:     #2c4066;   /* hairline on navy surfaces */

  --link:            var(--navy-600);
  --link-hover:      var(--brass-600);

  --scrim-hero: linear-gradient(180deg, rgba(16,29,54,.25) 0%, rgba(16,29,54,.55) 100%); /* @kind other */
  --scrim-foot: linear-gradient(0deg, rgba(16,29,54,.72) 0%, rgba(16,29,54,0) 60%); /* @kind other */
}

/* Highway 20 Brewing — typography tokens
   High-contrast serif display (Cormorant Garamond) over geometric sans
   body (Jost). Editorial hospitality: large, airy display sizes; wide
   letterspaced sans eyebrows; generous line-height on body copy. */
:root {
  --font-serif-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans-body: "Jost", "Century Gothic", "Futura", sans-serif;

  /* Display scale (serif) */
  --type-hero: 500 clamp(56px, 7.5vw, 104px)/1.02 var(--font-serif-display);
  --type-display: 500 clamp(40px, 4.5vw, 64px)/1.08 var(--font-serif-display);
  --type-title: 500 clamp(28px, 3vw, 40px)/1.15 var(--font-serif-display);
  --type-subtitle: 500 24px/1.3 var(--font-serif-display);
  --type-serif-italic: italic 500 22px/1.45 var(--font-serif-display);

  /* Sans scale */
  --type-eyebrow: 500 13px/1 var(--font-sans-body);      /* + --tracking-eyebrow, uppercase */
  --type-body-lg: 300 19px/1.75 var(--font-sans-body);
  --type-body: 400 16px/1.7 var(--font-sans-body);
  --type-body-sm: 400 14px/1.6 var(--font-sans-body);
  --type-label: 500 14px/1.2 var(--font-sans-body);       /* buttons, nav */
  --type-caption: 400 12.5px/1.5 var(--font-sans-body);

  /* Tracking */
  --tracking-eyebrow: 0.32em;
  --tracking-label: 0.14em;
  --tracking-display: -0.01em;
}

/* Highway 20 Brewing — spacing, radii, borders, shadows, layout */
:root {
  /* Spacing — generous, architectural rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-section: clamp(96px, 12vw, 176px);  /* breathable section gaps */

  /* Layout */
  --measure-prose: 62ch;
  --width-content: 1200px;
  --width-narrow: 760px;
  --gutter: clamp(24px, 5vw, 64px); /* @kind spacing */

  /* Corners — architectural, square. Radius is the exception. */
  --radius-none: 0;
  --radius-subtle: 2px;   /* buttons, inputs */
  --radius-pill: 999px;   /* badges only */

  /* Borders */
  --border-width: 1px;
  --rule-brass: 1px solid var(--border-brass);
  --rule-hairline: 1px solid var(--border-hairline);

  /* Shadows — barely-there; elevation via contrast, not blur */
  --shadow-card: 0 1px 2px rgba(16,29,54,.05), 0 8px 32px rgba(16,29,54,.07);
  --shadow-lift: 0 2px 4px rgba(16,29,54,.06), 0 16px 48px rgba(16,29,54,.12);
}

/* Highway 20 Brewing — motion tokens
   "Weighted, fluid, deliberate." Long durations, heavy ease-outs,
   small distances. Native CSS only — no JS animation libraries.
   Scroll reveals: IntersectionObserver adds .is-inview (tiny inline JS
   in consuming pages) or CSS animation-timeline where supported. */
:root {
  --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-cinematic: cubic-bezier(0.65, 0, 0.15, 1); /* @kind other */
  --dur-fast: 300ms; /* @kind other */
  --dur-reveal: 900ms; /* @kind other */
  --dur-slow: 1400ms; /* @kind other */
  --rise-distance: 48px; /* @kind spacing */
  --parallax-depth: 0.18; /* @kind other */
}

/* Shared reveal primitive: add .h20-reveal to any block; consuming page
   toggles .is-inview via a 6-line IntersectionObserver. */
.h20-reveal {
  opacity: 0;
  transform: translateY(var(--rise-distance));
  transition: opacity var(--dur-reveal) var(--ease-heavy),
              transform var(--dur-reveal) var(--ease-heavy);
}
.h20-reveal.is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .h20-reveal { opacity: 1; transform: none; transition: none; }
}

/* Highway 20 Brewing — base element styles */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; color: var(--text-display); }
p { margin: 0; }
a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-heavy); }
a:hover { color: var(--link-hover); }
img { display: block; max-width: 100%; }
::selection { background: var(--brass-100); color: var(--navy-800); }