/* PEPTIDES 101 — shared design system.
   ONE source of truth for tokens and page chrome (announce bar, nav, wordmark,
   container, eyebrow, h1, lede, band, footer rule).

   Loaded by every surface:
     - Astro pages      -> src/layouts/Base.astro, before global.css
     - /field-guide     -> public/field-guide/index.html
     - /calculator      -> public/calculator/index.html

   Page-specific CSS still lives with each page. Anything in THIS file must not
   be redefined downstream — that is how the three pages drifted apart before
   (the homepage nav was still cream long after the site went white).

   Two token vocabularies are defined below because the Astro side and the
   standalone pages grew up with different names. They point at the same values;
   neither is "legacy". Use whichever the surrounding file already uses. */

:root {
  /* Ground + surfaces */
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --tile: #F4F4F5;
  --border: #E4E4E7;
  --border-strong: #D4D4D8;

  /* Ink */
  --ink: #0A0A0A;
  --muted: #52525B;
  --faint: #71717A;

  /* Accent */
  --accent: #3B82F6;
  --accent-ink: #2563EB;
  --accent-deep: #1D4ED8;

  /* Nav sits on a warm cream rather than the page white — deliberate, and the
     one place it is defined. Every surface reads it from here. */
  --nav-bg: rgba(246, 245, 242, 0.92);

  /* Type */
  --mono: 'Space Mono', ui-monospace, monospace;
  /* TITLES ONLY — TEAMLTD house family (see 'TEAMLTD PDF Branding.pdf':
     everything set in Montserrat, hierarchy from weight/case/tracking). */
  --title: 'Montserrat', -apple-system, sans-serif;
  /* Kept for the wordmark and for display-set BODY copy (pull quotes,
     footer tagline) which must not change. */
  --display: 'Space Grotesk', -apple-system, sans-serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Metrics */
  --max: 1080px;
  --max-tool: 820px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  /* Distance from the nav to the eyebrow. One value, so every page starts
     at the same height — this is what was different on all three before. */
  --space-top: clamp(3.5rem, 6vw, 4rem);
  --space-bottom: 3rem;
  --radius: 4px;

  /* Aliases for the Astro stylesheet's vocabulary — same values. */
  --bone: var(--bg);
  --charcoal: var(--ink);
  --charcoal-60: var(--muted);
  --charcoal-40: #A1A1AA;
  --charcoal-20: var(--border-strong);
  --charcoal-10: var(--border);
  --font-mono: var(--mono);
  --font-display: var(--display);
  --font-title: var(--title);
  --font-sans: var(--sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Disclaimer bar ---------------------------------------------------- */
.announce-bar {
  background: var(--ink);
  color: var(--bg);
  text-align: center;
  padding: 0.6rem var(--pad);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---- Nav --------------------------------------------------------------- */
.nav {
  padding: 1.25rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  z-index: 10;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 5.2vw, 2.1rem);
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
/* Two spellings of the same span — Astro uses a class, the standalone pages an <i>. */
.wordmark__num,
.wordmark i { font-style: normal; font-weight: 600; color: var(--accent-ink); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__links a { color: var(--muted); transition: color 0.15s; }
.nav__links a:hover { color: var(--ink); }

/* Dropdowns are CSS-only (hover + focus-within) rather than scripted, because
   this nav is hardcoded into ~50 standalone pages; adding a script tag to all
   of them is another thing to drift. Every parent is itself a real link to a
   hub page, so the menu still works with no JS and on touch. */
.nav__item { position: relative; display: flex; align-items: center; }
/* Extend the hover target to the nav's full height so the pointer doesn't
   fall out of it on the way down to the panel. */
.nav__item { padding: 1.25rem 0; margin: -1.25rem 0; }
.nav__top--parent::after {
  content: '';
  display: inline-block;
  margin-left: 0.45em;
  border: 3px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.nav__sub {
  position: absolute;
  top: 100%;
  left: -0.95rem;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0;
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.09);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.13s, transform 0.13s, visibility 0.13s;
  z-index: 20;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub a { padding: 0.62rem 0.95rem; white-space: nowrap; font-size: 0.76rem; }
.nav__sub a:hover { background: var(--tile); color: var(--ink); }

@media (max-width: 680px) {
  /* Not sticky on phones. Flattened, the menu is three rows tall — pinned,
     that permanently occupies ~19% of the viewport. Static gives the full
     menu at the top and hands the space back as soon as you scroll. */
  .nav { flex-wrap: wrap; gap: 0.35rem; position: static; }
  /* Seven destinations instead of three, on a sticky bar. Tighter type keeps
     it to two rows — at 1.25rem/0.8rem it ran to three and ate a quarter of
     the viewport permanently. */
  .nav__links { width: 100%; gap: 0.85rem 0.9rem; flex-wrap: wrap; font-size: 0.74rem; row-gap: 0.5rem; }
  .nav__links a { white-space: nowrap; }
  .nav__links a.nav__hide-sm,
  .nav__links a.hide-sm { display: none; }
  /* No hover on touch: flatten the whole menu into the wrapping row so every
     destination is one tap, and drop the now-redundant parent labels. */
  .nav__item { display: contents; }
  .nav__top--parent { display: none; }
  .nav__sub {
    position: static;
    display: contents;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .nav__sub a { padding: 0; font-size: inherit; }
  .nav__sub a:hover { background: none; }
  /* "Compound profiles" is too long for a phone row; it reads "Profiles". */
  .nav__long { display: none; }
}
/* Links are nowrap, so below ~345px the row runs past the edge.
   Step down only on sub-360px screens; 375+ keeps the full size. */
@media (max-width: 360px) {
  .nav__links { font-size: 0.74rem; gap: 0.85rem; }
}

/* ---- Containers -------------------------------------------------------- */
.wrap,
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
/* .wrap is a full page column (the standalone pages); .container is an inner
   measure reused inside sections, so only .wrap carries the vertical rhythm. */
.wrap {
  padding-top: var(--space-top);
  padding-bottom: var(--space-bottom);
}
/* Tools keep a narrower measure — a full-width <select> is not a design choice.
   Same page shell, narrower content column. */
.wrap--tool { max-width: var(--max-tool); }
.container--narrow { max-width: 760px; }

/* ---- Page header ------------------------------------------------------- */
.ey {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
h1, h2, h3, h4 {
  font-family: var(--title);
  /* Black 900 per the TEAMLTD brand sheet (Display = Black 900). */
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.03; }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.1; }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.18; }
/* The accent stays one step lighter than the heading so it still reads as an accent. */
h1 em, h2 em { font-style: italic; font-weight: 800; color: var(--accent-ink); }

.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
  margin: 18px 0 0;
}

.band {
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(10px, 1.4vw, 12.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  padding: 13px;
  margin: 26px 0 0;
}

/* ---- Footer rule ------------------------------------------------------- */
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--faint);
  line-height: 1.55;
}