/* ═══════════════════════════════════════════════════════════════════
   American Knife Company — one-page informational site

   Three colours, from the brand guide. Nothing else is invented:

     #123136  deep teal-navy — the mark itself, and every dark surface
     #602E2C  oxblood        — the accent rules under "KNIFE COMPANY"
     #EAEAEA  light grey     — the neutral ground

   Typography is NOT in the brand guide, and the logo's type is outlined
   so the original face could not be recovered from the .ai files. Chakra
   Petch was chosen for headings because it shares the wordmark's
   chamfered corners; Barlow sits under it without competing. Both are
   self-hosted in assets/fonts — the page makes no external request of any
   kind, which is also why it will behave identically on any host.

   To try a different display face, change --font-display in one place.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 600;
             font-display: swap; src: url('assets/fonts/chakrapetch-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 700;
             font-display: swap; src: url('assets/fonts/chakrapetch-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400;
             font-display: swap; src: url('assets/fonts/barlow-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500;
             font-display: swap; src: url('assets/fonts/barlow-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600;
             font-display: swap; src: url('assets/fonts/barlow-600-normal.woff2') format('woff2'); }

:root {
  --navy:    #123136;
  --navy-lo: #0c2328;          /* a shade under navy, for layering */
  --oxblood: #602E2C;
  --grey:    #EAEAEA;
  --ink:     #1a1a1a;
  --muted:   #5e6a6d;

  --font-display: 'Chakra Petch', 'Barlow', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  --wrap: 1140px;
  --gap:  clamp(3rem, 7vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 68ch); }
.center { text-align: center; }

/* ── type ────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
}
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h3 { font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 0.5rem;
}
.eyebrow--light { color: #c98f8b; }   /* oxblood is unreadable on navy */

.lede { font-size: 1.15em; color: var(--muted); }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border: 2px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--oxblood); color: #fff; border-color: var(--oxblood); }
.btn--primary:hover,
.btn--primary:focus-visible { background: transparent; color: var(--oxblood); }
.btn--lg { padding: 1.1rem 2.6rem; font-size: 1.05rem; }

/* On the navy hero the oxblood-on-transparent hover would vanish, so the
   hero button inverts to the light neutral instead. */
.hero .btn--primary:hover,
.hero .btn--primary:focus-visible { background: var(--grey); color: var(--navy); border-color: var(--grey); }

/* ── hero ────────────────────────────────────────────────────────── */
.hero {
  background: var(--navy);
  color: var(--grey);
  /* 20/30 measured in Chrome and chosen deliberately -- the generous
     clamp that was here pushed the MK2 below the fold. Fixed, not scaled:
     a viewport-relative value would grow the gap back on a desktop
     monitor, which is the case that was wrong. */
  padding: 20px 1.25rem 30px;
  text-align: center;
}
.hero__inner { width: min(100%, 60ch); margin-inline: auto; }

/* The submark is navy-on-transparent, i.e. invisible on a navy ground.
   Inverting it to the light neutral is the whole reason this filter is
   here — do not remove it without swapping in a light asset. */
.hero__mark {
  width: min(200px, 50%);
  margin: 0 auto 1rem;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.hero__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4em;
}
.hero__tagline {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: #a9bcc0;
  margin: 0 0 1.25rem;
}

/* ── sections ────────────────────────────────────────────────────── */
.section { padding: var(--gap) 0; }
.section--alt  { background: var(--grey); }
.section--dark { background: var(--navy); color: var(--grey); }
.section--dark h2 { color: #fff; }
.section--dark p  { color: #c3d1d4; }
.section--buy {
  background: var(--navy-lo);
  color: var(--grey);
}
.section--buy h2 { color: #fff; }
.section--buy .lede { color: #a9bcc0; }

.hero-shot { margin: 2.5rem 0 0; }
.hero-shot img { width: 100%; }

/* ── specs ───────────────────────────────────────────────────────── */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  margin: 2.5rem 0 0;
  border-top: 1px solid #d4d8d9;
}
.specs > div {
  padding: 1rem 0;
  border-bottom: 1px solid #d4d8d9;
}
.specs dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.specs dd { margin: 0.2rem 0 0; font-size: 1.05rem; }

/* ── colourways ──────────────────────────────────────────────────── */
.colourways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}
.colourway h3 {
  margin: 1.1rem 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--oxblood);
  display: inline-block;
}
.colourway__detail { margin-top: 0.5rem; }

/* The material name sits under the colour name, because the two are not the
   same thing: the headings are short enough to scan ("Natural"), the material
   is what the product actually is ("Natural Canvas Micarta"). */
.colourway__material {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ── sheaths ─────────────────────────────────────────────────────── */
/* Two of them, side by side rather than stacked: the standard sheath and the
   Skin Bender upgrade are a choice the buyer makes, so they are presented as
   peers and compared at a glance. */
.sheaths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
}
@media (min-width: 820px) {
  .sheaths { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}
.sheath h3 {
  margin: 1.1rem 0 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--oxblood);
  display: inline-block;
}
.sheath p { margin: 0 0 1.25rem; color: var(--muted); }
.sheath__detail { margin-top: 0.5rem; }

/* "Upgrade" rides inside the h3, so it has to opt out of the uppercase
   letter-spaced treatment the heading applies. */
.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.15em 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--oxblood);
}

/* ── card grids (values, range) ──────────────────────────────────── */
/* One grid serves both "What we stand for" (4) and "What we make" (3).
   auto-fit would let the four-card set reflow to 3+1 at awkward widths,
   so each is given an explicit column count at the breakpoint instead. */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}
@media (min-width: 640px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px)  { .cards--three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards--three { grid-template-columns: repeat(3, 1fr); } }

.card { border-top: 3px solid var(--oxblood); padding-top: 1.1rem; }
.card h3 {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: none;   /* these are sentences, not labels */
  margin-bottom: 0.6rem;
}
.card p { margin: 0; color: var(--muted); }

/* On the grey band the muted body text sits too close to the ground. */
.section--alt .card p { color: #4a5558; }

/* ── footer ──────────────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  color: #8ea2a6;
  padding: 3.5rem 0;
  text-align: center;
}
.footer__inner img {
  width: min(320px, 70%);
  margin: 0 auto 1.25rem;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.footer__note {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin: 0;
  color: var(--grey);
}
.footer__year {
  font-size: 0.8rem;
  margin: 0.5rem 0 0;
  opacity: 0.7;
}

/* ── accessibility ───────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
.section--dark :focus-visible,
.hero :focus-visible,
.footer :focus-visible { outline-color: var(--grey); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}