/* Blowhorn marketing site. Every value here is a token from assets/brand/tokens.json
   (version 1 of the brand kit). Light is the default theme; dark follows the OS. */

/* ---------- Fonts (self-hosted, SIL OFL; see assets/brand/LICENSES.md) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/brand/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/brand/fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/brand/fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/brand/fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/brand/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/brand/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Brand colours (theme-independent) */
  --teal: #00B39F;
  --teal-bright: #00D3A9;
  --teal-shade: #008F80;
  --teal-deep: #00756A;
  --charcoal: #3C494F;
  --near-black: #1E2117;
  --yellow: #EBC017;
  --yellow-shade: #C99F00;
  --coral: #EE5A44;
  --cream: #FFF6E0;
  --mint: #A6EBDF;
  --white: #FFFFFF;
  --line-strong: #7A878C;
  --on-teal: #1E2117;
  --on-yellow: #1E2117;

  /* Light theme */
  --surface: #FFFFFF;
  --surface-raised: #F4F7F6;
  --surface-tint: #DDF4F1;
  --ink: #1E2117;
  --ink-muted: #5B6A70;
  --ink-wordmark: #3C494F;
  --link: var(--teal-deep);
  --line: #D5DEDD;
  --focus-ring: var(--teal-deep);
  --shadow-pop: 4px 4px 0 0 #1E2117;
  --shadow-soft: 0 8px 24px rgba(30, 33, 23, 0.12);

  /* Type */
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Strokes */
  --stroke-icon: 1.75px;
  --stroke-hairline: 1px;

  /* Layout */
  --measure: 1120px;
  --gutter: var(--space-4);
  --header-h: 116px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1E2117;
    --surface-raised: #2A2E25;
    --surface-tint: #173A34;
    --ink: #FFFFFF;
    --ink-muted: #A3AEB2;
    --ink-wordmark: #FFFFFF;
    --link: var(--teal-bright);
    --line: #3C494F;
    --focus-ring: var(--teal-bright);
    --shadow-pop: 4px 4px 0 0 #00D3A9;
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

@media (min-width: 720px) {
  :root { --gutter: var(--space-8); --header-h: 72px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--stroke-hairline));
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--surface-tint); color: var(--ink); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
code {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-1);
}
pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  overflow-x: auto;
  color: var(--ink);
}
pre code { background: none; padding: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--link);
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Type ramp ---------- */
.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 7.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-wordmark);
  font-variation-settings: "opsz" 96;
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5.2vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--ink-wordmark);
  font-variation-settings: "opsz" 96;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-wordmark);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--ink-wordmark);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.005em;
  color: var(--ink-wordmark);
}
.body-lg { font-size: 18px; line-height: 28px; }
.body { font-size: 16px; line-height: 24px; }
.ui { font-size: 14px; line-height: 20px; font-weight: 500; }
.caption { font-size: 12px; line-height: 16px; font-weight: 500; }
.muted { color: var(--ink-muted); }
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.prose { max-width: 62ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose .h2 { margin-top: var(--space-8); }
.prose .h3 { margin-top: var(--space-6); }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-12); }
.section + .section { border-top: var(--stroke-hairline) solid var(--line); }
.section-head { max-width: 40rem; }
.section-head > * + * { margin-top: var(--space-3); }
.section-body { margin-top: var(--space-8); }
@media (min-width: 900px) {
  .section { padding-block: var(--space-16); }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.button-primary {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--on-teal);
}
.button-primary:hover { background: var(--teal-shade); border-color: var(--teal-shade); }
.button-pop { box-shadow: var(--shadow-pop); }
.button-pop:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--near-black); }
@media (prefers-color-scheme: dark) {
  .button-pop:hover { box-shadow: 2px 2px 0 0 var(--teal-bright); }
}
.button-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.button-secondary:hover { background: var(--surface-raised); }
.button svg { width: 18px; height: 18px; flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: var(--stroke-hairline) solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}
.brand { display: inline-flex; align-items: center; }
.brand img { width: 176px; height: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}
.site-nav a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-2) 0;
}
.site-nav a:hover { color: var(--link); text-decoration: underline; }
.site-cta { padding-block: var(--space-2); min-height: 40px; }
@media (max-width: 719px) {
  /* Two rows: the lockup alone, then the nav followed by a compact Download button.
     DOM, tab and visual order stay brand, nav, CTA; --header-h is 12 + 44 + 12 + 36 + 12.
     Below 360px the second row tightens its gaps, link size and CTA padding so it still
     fits one 36px row down to a 320px viewport. */
  .site-header .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
  }
  .brand { grid-column: 1 / -1; justify-self: start; }
  .site-nav { gap: var(--space-3); margin-left: 0; }
  .site-cta { min-height: 36px; padding: var(--space-1) var(--space-2); font-size: 13px; }
}
@media (max-width: 359px) {
  .site-header .wrap { column-gap: var(--space-2); }
  .site-nav { gap: var(--space-2); }
  .site-nav a { font-size: 13px; }
  .site-cta { padding-inline: var(--space-1); }
}

/* ---------- Hero ---------- */
.hero { padding-block: var(--space-12); }
.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
.hero-copy > * + * { margin-top: var(--space-6); }
.hero-copy .label { margin-top: 0; }
.hero-copy .display-xl { margin-top: var(--space-3); max-width: 12ch; }
.hero-copy .body-lg { max-width: 34rem; color: var(--ink-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-note { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.hero-art { width: 100%; max-width: 560px; margin-inline: auto; }
@media (min-width: 900px) {
  .hero { padding-block: var(--space-16); }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: var(--space-12); }
  .hero-art { margin-inline: 0 0; }
}

/* The one-to-many motif: one source, many bubbles. */
.fan { width: 100%; height: auto; overflow: visible; }
.fan .fan-line { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
.fan .bubble-source { fill: var(--teal); }
.fan .bubble-source .text-line { stroke: var(--on-teal); stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
.fan .bubble-teal { fill: var(--teal); color: var(--on-teal); }
.fan .bubble-bright { fill: var(--teal-bright); color: var(--on-teal); }
.fan .bubble-yellow { fill: var(--yellow); color: var(--on-yellow); }
.fan .bubble-raised { fill: var(--surface-raised); color: var(--ink); stroke: var(--line-strong); stroke-width: 1.5; }
.fan .mark { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

@keyframes fan-pop {
  from { opacity: 0; transform: translateX(-6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.fan .bubble {
  transform-box: fill-box;
  transform-origin: left center;
  animation: fan-pop 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.fan .bubble:nth-of-type(2) { animation-delay: 120ms; }
.fan .bubble:nth-of-type(3) { animation-delay: 200ms; }
.fan .bubble:nth-of-type(4) { animation-delay: 280ms; }
.fan .bubble:nth-of-type(5) { animation-delay: 360ms; }
.fan .bubble:nth-of-type(6) { animation-delay: 440ms; }
.fan .bubble:nth-of-type(7) { animation-delay: 520ms; }
.fan .bubble:nth-of-type(8) { animation-delay: 600ms; }
@media (prefers-reduced-motion: reduce) {
  .fan .bubble { animation: none; }
  html { scroll-behavior: auto; }
  .button { transition: none; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Cards and grids ---------- */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
/* Grid items default to min-width:auto, which lets a wide code sample push the page wider than the viewport. */
.grid > *, .platforms > *, .hero-grid > *, .download-grid > * { min-width: 0; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card > * + * { margin-top: var(--space-3); }
.card .h3 { margin-top: var(--space-4); }
.card > .h3:first-child { margin-top: 0; }
.card .label { margin-top: var(--space-1); }
.card-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  color: var(--ink);
}
.card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.card p, .card ul { color: var(--ink-muted); }
.card pre { margin-top: var(--space-4); max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Platforms */
.platforms {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .platforms { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.platform {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  min-height: 132px;
}
.platform svg { width: 28px; height: 28px; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.platform .ui { color: var(--ink); margin-top: auto; }
.platform .caption { color: var(--ink-muted); }
.platform-note { margin-top: var(--space-6); color: var(--ink-muted); max-width: 48rem; }

/* Major Blowhorn marketing card */
.major-card {
  position: relative;
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface-tint);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.major-figure {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: end center;
}
.major-figure::before {
  /* The sunrise disc behind Major. Yellow is an accent: this is the page's one large use of it. */
  content: "";
  position: absolute;
  inset: 8% 4% 0 4%;
  border-radius: 50%;
  background: var(--yellow);
}
.major-figure img {
  position: relative;
  width: 86%;
  height: auto;
}
.major-copy > * + * { margin-top: var(--space-4); }
.speech {
  position: relative;
  display: inline-block;
  background: var(--surface);
  color: var(--ink-wordmark);
  border: 2px solid var(--near-black);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-2);
  isolation: isolate;
}
.speech::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 40px;
  bottom: -14px;
  width: 24px; height: 24px;
  background: var(--surface);
  border-right: 2px solid var(--near-black);
  border-bottom: 2px solid var(--near-black);
  transform: rotate(45deg) skew(10deg, 10deg);
}
@media (prefers-color-scheme: dark) {
  .speech, .speech::after { border-color: var(--cream); }
}
.major-copy p:not(.speech) { color: var(--ink-muted); max-width: 36rem; }
@media (min-width: 720px) {
  .major-card {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    padding: var(--space-8);
    gap: var(--space-8);
  }
  .speech::after { left: -14px; bottom: auto; top: 32px; transform: rotate(135deg) skew(10deg, 10deg); }
}

/* Download */
.download-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}
.download-card .h3 { margin: 0; }
.download-card .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.download-card .meta { color: var(--ink-muted); }
.download-card .meta span + span::before { content: "\00b7"; margin-inline: var(--space-2); }
.download-aside { display: grid; gap: var(--space-4); align-content: start; }
.download-aside .card > * + * { margin-top: var(--space-2); }
@media (min-width: 900px) {
  .download-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: var(--stroke-hairline) solid var(--line);
  padding-block: var(--space-12) var(--space-8);
  color: var(--ink-muted);
}
.footer-grid {
  display: grid;
  gap: var(--space-8);
}
.footer-brand img { width: 220px; height: auto; }
.footer-brand p { margin-top: var(--space-4); max-width: 30rem; }
.footer-cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-col ul { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--link); text-decoration: underline; }
.footer-meta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--stroke-hairline) solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
}
/* Secondary pages carry only the meta row; the footer's own top rule already separates it. */
.footer-meta:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Secondary pages ---------- */
.page { padding-block: var(--space-12); }
.page-head { max-width: 40rem; }
.page-head > * + * { margin-top: var(--space-3); }
.page .prose { margin-top: var(--space-8); }
.page table { border-collapse: collapse; width: 100%; max-width: 48rem; font-size: 14px; line-height: 20px; }
.page th, .page td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--line); }
.page th { font-weight: 600; color: var(--ink-wordmark); }

/* 404 */
.empty-state {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-12);
}
.empty-state .major-figure { width: min(100%, 320px); }
.empty-copy > * + * { margin-top: var(--space-4); }
@media (min-width: 720px) {
  .empty-state { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}