/* Vespertine site. The brand fonts (Newsreader, Inter, JetBrains Mono; SIL Open Font License) are self-hosted,
   so the site looks the same everywhere and makes no third-party requests apart from GitHub's API for the
   latest version. */
@font-face { font-family: "Newsreader"; font-weight: 300 500; font-display: swap; src: url(assets/fonts/Newsreader.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: "Inter"; font-weight: 400 600; font-display: swap; src: url(assets/fonts/Inter.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: "JetBrains Mono"; font-weight: 400 500; font-display: swap; src: url(assets/fonts/JetBrainsMono.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; }

:root {
  color-scheme: dark;
  --base: #09090A; --window: #0D0D0F; --sidebar: #111114; --surface: #16161A; --raised: #1C1C21;
  --hair: rgba(236, 230, 218, 0.07); --hair2: rgba(236, 230, 218, 0.12);
  --text: #ECE6DA; --text2: #A29B8F; --text3: #888177; /* text3 is at least 4.5:1 on every background it sits on */
  --brass: #C8A66A; --brassHi: #E7CD98; --brassLo: #7C6541; --copper: #C98B5B;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --measure: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--base); color: var(--text); font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--brassHi); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.eyebrow {
  font: 500 12.5px/1 var(--mono); letter-spacing: 2.2px; text-transform: uppercase; color: var(--brass);
}

/* Navigation */
header.nav {
  position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px);
  background: rgba(9, 9, 10, 0.72); border-bottom: 1px solid var(--hair);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 58px; }
.brand { display: flex; align-items: center; }
/* The brand lockup; its SVG carries clear space, so pull it back to the column edge. */
.brand img { height: 44px; width: auto; margin-left: -11px; }
.brand:hover { text-decoration: none; }
.nav nav { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; }
.nav nav a { color: var(--text2); }
.nav nav a:hover { color: var(--text); text-decoration: none; }
/* The menu button stands in for the links below 900 px. It stays hidden (by its hidden attribute) until the
   page's script runs, so without JavaScript the header is just the logo and Download. */
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0; flex: none;
  border: 1px solid var(--hair2); border-radius: 8px; background: rgba(236,230,218,.03); color: var(--text); cursor: pointer;
  transition: background .15s ease;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: rgba(236,230,218,.08); }
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 10px; padding: 11px 18px;
  font: 600 15.5px/1 var(--sans); white-space: nowrap; transition: filter .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-brass { background: linear-gradient(#E7CD98, #C8A66A); color: #1A140A; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px rgba(200,166,106,.18); }
.btn-brass:hover { filter: brightness(1.06); }
.btn-quiet { color: var(--text); border: 1px solid var(--hair2); background: rgba(236,230,218,.03); }
.btn-quiet:hover { background: rgba(236,230,218,.07); }
.btn-small { padding: 8px 13px; font-size: 14px; border-radius: 8px; }
.btn svg { width: 16px; height: 16px; }

/* Hero */
.hero { position: relative; padding: 88px 0 0; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: -120px 0 auto; height: 760px; pointer-events: none;
  background: radial-gradient(640px 380px at 50% 38%, rgba(200,166,106,.14), transparent 70%);
}
.hero-icon { width: 104px; height: 104px; margin: 0 auto 30px; border-radius: 23px; box-shadow: 0 0 0 1px var(--hair2), 0 24px 48px rgba(0,0,0,.6); }
.hero h1 {
  position: relative; font: 300 clamp(46px, 7.8vw, 88px)/1.02 var(--serif); letter-spacing: -0.02em; margin: 0 auto; max-width: 920px;
}
.hero h1 em { font-style: normal; color: var(--text); }
.hero .lede { position: relative; max-width: 700px; margin: 24px auto 0; color: var(--text2); font-size: clamp(17px, 2vw, 19.5px); }
.cta { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.fine { position: relative; margin-top: 16px; color: var(--text3); font-size: 13.5px; }
.fine .mono { font-size: 12.5px; }
.hero-shot { position: relative; margin: 64px auto 0; max-width: 1200px; padding: 0 24px; }
.hero-shot img, .shot { border-radius: 14px; box-shadow: 0 0 0 1px var(--hair2), 0 40px 100px rgba(0,0,0,.75); }
.caption { color: var(--text3); font-size: 13.5px; margin-top: 16px; text-align: center; }

/* Truth strip */
.badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 96px auto 0; max-width: 900px; }
.badge {
  font: 500 12.5px/1 var(--mono); letter-spacing: 1.8px; text-transform: uppercase; color: var(--text2);
  border: 1px solid var(--hair2); border-radius: 7px; padding: 8px 11px;
}
.badge.brass { color: var(--brass); border-color: rgba(200,166,106,.55); }
.badge.copper { color: var(--copper); border-color: rgba(201,139,91,.5); }
.badge.brass::before, .badge.copper::before { content: "●"; font-size: 9px; margin-right: 8px; vertical-align: 1px; }
/* Units keep their case inside uppercase labels: kHz, not KHZ. */
.unit { text-transform: none; }

section { padding: 110px 0 0; }

/* Trailer */
.video { margin: 44px auto 0; max-width: 1120px; }
.press-block .video { margin: 0; }
.video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--base);
  border-radius: 14px; box-shadow: 0 0 0 1px var(--hair2), 0 40px 100px rgba(0,0,0,.75);
}
.section-head { max-width: 760px; }
.section-head.center { margin: 0 auto; text-align: center; }
h2 { font: 500 clamp(32px, 4.4vw, 48px)/1.08 var(--serif); letter-spacing: -0.015em; margin: 14px 0 0; }
.section-head p { color: var(--text2); font-size: 18px; margin: 18px 0 0; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 52px; background: var(--hair); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.pillar { background: var(--window); padding: 28px 24px 30px; }
.pillar h3 { font: 500 21px/1.2 var(--serif); margin: 16px 0 10px; }
.pillar p { margin: 0; color: var(--text2); font-size: 15px; }
.pillar .glyph { width: 34px; height: 34px; color: var(--brass); }

/* Feature rows */
.feature { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; margin-top: 110px; }
.feature.flip { grid-template-columns: 7fr 5fr; }
.feature.flip .copy { order: 2; }
.feature h3 { font: 500 clamp(28px, 3.4vw, 38px)/1.12 var(--serif); letter-spacing: -0.01em; margin: 14px 0 0; }
.feature p { color: var(--text2); margin: 16px 0 0; }
.feature ul { margin: 18px 0 0; padding: 0; list-style: none; color: var(--text2); font-size: 15.5px; }
.feature li { padding: 9px 0; border-top: 1px solid var(--hair); }
.feature li b { color: var(--text); font-weight: 500; }

/* Formats */
.formats { margin-top: 48px; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.formats table { width: 100%; border-collapse: collapse; font-size: 15px; }
.formats th, .formats td { text-align: left; padding: 14px 20px; border-top: 1px solid var(--hair); vertical-align: top; }
.formats tr:first-child th, .formats tr:first-child td { border-top: 0; }
.formats th { font: 500 16px/1.35 var(--serif); color: var(--text); width: 34%; background: var(--window); }
.formats td { color: var(--text2); background: var(--base); }
.formats td .mono { color: var(--text3); font-size: 13px; }

/* Comparison */
.compare-wrap { position: relative; margin-top: 48px; }
.compare { overflow-x: auto; border: 1px solid var(--hair); border-radius: 16px; }
.compare:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.compare table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
/* When the table is wider than the screen, the row labels stay put, the edge with more columns fades out,
   and a hint sits above the top-right corner (in the margin, so nothing moves when it appears). */
.compare thead th:first-child, .compare tbody th { position: sticky; left: 0; z-index: 1; }
.compare-wrap.more-left .compare thead th:first-child, .compare-wrap.more-left .compare tbody th { box-shadow: 12px 0 14px -12px rgba(0,0,0,.9); }
.compare-wrap::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; pointer-events: none;
  border-radius: 0 15px 15px 0; background: linear-gradient(to right, rgba(9,9,10,0), var(--base));
  opacity: 0; transition: opacity .2s ease;
}
.compare-wrap.more-right::after { opacity: 1; }
.compare-hint {
  position: absolute; right: 0; bottom: 100%; margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: 1px;
  color: var(--text3); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.compare-wrap.more-right .compare-hint { opacity: 1; }
.compare th, .compare td { padding: 13px 16px; border-top: 1px solid var(--hair); text-align: center; }
.compare thead th { border-top: 0; font: 500 15px/1.25 var(--serif); color: var(--text); background: var(--window); vertical-align: bottom; }
.compare thead th small { display: block; font: 400 12px/1.4 var(--sans); color: var(--text3); margin-top: 3px; }
.compare tbody th { text-align: left; font-weight: 400; color: var(--text2); background: var(--window); }
.compare td { color: var(--text3); }
.compare td.y { color: var(--brass); }
.compare td.p { color: var(--copper); }
.compare .us { background: rgba(200,166,106,.05); }
.compare-note { color: var(--text3); font-size: 13px; margin-top: 14px; }

/* FAQ */
.faq { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.faq div { border-top: 1px solid var(--hair); padding: 22px 0 24px; }
.faq h3 { margin: 0; font: 500 19px/1.3 var(--serif); }
.faq p { margin: 10px 0 0; color: var(--text2); font-size: 15.5px; }

/* Closing */
.closing { text-align: center; padding: 130px 0 110px; }
.closing h2 { max-width: 760px; margin: 0 auto; }
footer { border-top: 1px solid var(--hair); padding: 36px 0 56px; color: var(--text3); font-size: 13px; }
footer .wrap { display: grid; gap: 14px; }
footer .row { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--text2); }

@media (max-width: 900px) {
  .nav .wrap { gap: 10px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-toggle[hidden] { display: none; }
  .nav-toggle[hidden] ~ .btn { margin-left: auto; }
  .nav nav { display: none; }
  /* The open menu drops below the header bar, over the page, so nothing beneath it moves. */
  .nav nav.open {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: calc(100% + 1px); left: 0; right: 0; margin: 0;
    padding: 6px 0 12px; background: var(--base); border-bottom: 1px solid var(--hair2); font-size: 16px;
    box-shadow: 0 24px 40px rgba(0,0,0,.5);
  }
  .nav nav.open a { padding: 12px 24px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 28px; margin-top: 80px; }
  .feature.flip .copy { order: 0; }
  .faq { grid-template-columns: 1fr; }
  section { padding-top: 84px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .hero-shot { padding: 0 16px; }
  .hero { padding-top: 56px; }
  .hero-icon { width: 84px; height: 84px; border-radius: 19px; }
  .pillars { grid-template-columns: 1fr; }
  .formats th, .formats td { display: block; width: 100%; }
  .formats td { border-top: 0; padding-top: 0; background: var(--window); }
  .btn { padding: 12px 16px; }
  .nav-toggle { width: 40px; height: 38px; }
  .nav nav.open a { padding: 12px 16px; }
  .compare table { min-width: 620px; font-size: 14px; }
  .compare th, .compare td { padding: 12px 12px; }
  .compare thead th:first-child, .compare tbody th { width: 140px; }
}

/* Privacy policy and terms */
.doc { max-width: 720px; margin: 0 auto; padding: 72px 24px 96px; }
.doc h1 { font: 500 clamp(36px, 5vw, 52px)/1.08 var(--serif); letter-spacing: -0.015em; margin: 14px 0 0; }
.doc .updated { color: var(--text3); font-size: 14px; margin-top: 12px; }
.doc h2 { font-size: clamp(22px, 2.6vw, 26px); margin: 44px 0 0; }
.doc p, .doc li { color: var(--text2); }
.doc p { margin: 14px 0 0; }
.doc ul { margin: 14px 0 0; padding-left: 20px; }
.doc li { margin: 8px 0; }
.doc strong { color: var(--text); font-weight: 500; }
@media (max-width: 560px) { .doc { padding: 48px 16px 72px; } }

/* Keep signal-path terms like BIT-PERFECT on one line. */
.lede .mono, .faq .mono { white-space: nowrap; }

/* Press kit */
.press { padding: 72px 0 96px; }
.press h1 { font: 300 clamp(38px, 5.4vw, 60px)/1.06 var(--serif); letter-spacing: -0.02em; margin: 14px 0 0; max-width: 820px; }
.press .lead { color: var(--text2); font-size: 18px; max-width: 760px; margin: 22px 0 0; }
.press-block { padding: 64px 0 0; }
.press-block h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 18px; }
.press-block > p { color: var(--text2); margin: 0 0 22px; max-width: 760px; }
.facts { width: 100%; border-collapse: collapse; border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; font-size: 15px; }
.facts th, .facts td { text-align: left; padding: 13px 18px; border-top: 1px solid var(--hair); vertical-align: top; }
.facts tr:first-child th, .facts tr:first-child td { border-top: 0; }
.facts th { width: 190px; font-weight: 500; color: var(--text); background: var(--window); }
.facts td { color: var(--text2); }
.press-list { margin: 0; padding: 0; list-style: none; max-width: 820px; }
.press-list li { padding: 12px 0; border-top: 1px solid var(--hair); color: var(--text2); }
.press-list b { color: var(--text); font-weight: 500; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid figure { margin: 0; }
.grid img { width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px var(--hair2); background: var(--base); }
.grid figcaption { color: var(--text3); font-size: 13.5px; margin-top: 10px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .facts th { width: 110px; } .facts th, .facts td { padding: 11px 12px; } .press { padding-top: 48px; } }
.logo-tile { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--base); border-radius: 12px; box-shadow: 0 0 0 1px var(--hair2); }
.grid .logo-tile img { width: 78%; border-radius: 0; box-shadow: none; background: none; }
.grid .logo-tile img.stacked { width: 56%; }
.keyart figure:first-child { grid-column: 1 / -1; }