/* Audionaut — marketing site
   A printed dial plate: warm celluloid ivory ground, navy plate ink, one red needle.
   Display type is Libre Franklin ExtraBold, a Franklin Gothic revival — the newspaper and
   broadcast headline grotesque. Body and UI are Bricolage 12pt; Michroma is the logotype only.
   Everything sits on a single left rule. Nothing is ever indented from it. */

@font-face { font-family: "Bricolage"; src: url("../fonts/BricolageGrotesque12pt-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fonts/BricolageGrotesque12pt-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fonts/BricolageGrotesque12pt-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("../fonts/BricolageGrotesque12pt-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Franklin"; src: url("../fonts/LibreFranklin-ExtraBold.woff2") format("woff2"), url("../fonts/LibreFranklin-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("../fonts/Michroma-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --paper: #F1EBDD;
  --paper-2: #E6DFCD;
  --ink: #0C1A2B;
  --ink-2: #4A5A6C;
  --teal: #0A6E67;
  --teal-lit: #35C0B1;
  --needle: #DC4425;

  --rule: rgba(12, 26, 43, 0.16);
  --rule-dark: rgba(241, 235, 221, 0.16);
  --tick: rgba(12, 26, 43, 0.34);

  --gutter: 24px;
  --shell: 980px;
  --measure: 640px;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color-scheme: light;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Bricolage", -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--needle);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The single left rule. Every band re-uses it, so text never shifts sideways. */
.shell {
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(241, 235, 221, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--rule); }

.nav .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  min-width: 0;
}
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: 40px; flex: none; }
.brand span {
  font-family: "Michroma", sans-serif;
  /* Michroma is an exceptionally wide face: AUDIONAUT sets ~360px at 16px, which fits beside
     the button on desktop but not on a phone. The 700px query drops it back to 11px. */
  font-size: 16px;
  letter-spacing: 1.4px;
  white-space: nowrap;
}

.nav-cta {
  flex: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 9px 18px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-cta:hover {
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Hero ---------- */

.hero { padding-top: 88px; }

.hero h1 {
  font-family: "Franklin", sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 7.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 30px;
  max-width: 17ch;
}

.lede {
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 0 36px;
}

.buy {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 72px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 26px;
  border-radius: 3px;
  transition: background 0.15s ease;
}
.btn:hover { text-decoration: none; background: var(--teal); color: var(--paper); }
.btn svg { width: 21px; height: 21px; flex: none; }

.price {
  font-size: 15px;
  color: var(--ink-2);
  max-width: 24ch;
}

/* ---------- The dial plate ----------
   Ticks hang from a continuous plate rule; the needle parks over the band it landed on.
   Ticks are two repeating gradients sized to different heights, so majors run the full
   depth of the plate and minors stop short — the same convention as a printed scale. */

.dial { margin: 0 0 76px; }

.dial-plate {
  position: relative;
  height: 30px;
  border-top: 1px solid var(--ink);
  background-image:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 12px);
  background-size: 100% 30px, 100% 13px;
  background-repeat: repeat-x;
  background-position: left top, left top;
}

.needle {
  position: absolute;
  top: -7px;
  bottom: -9px;
  left: 48%;
  width: 2px;
  background: var(--needle);
}
.needle::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--needle);
}

@keyframes tune {
  0%   { left: 2%; }
  62%  { left: 56%; }
  100% { left: 48%; }
}
.needle { animation: tune 1.9s cubic-bezier(0.3, 0.8, 0.25, 1) both; }

.bands {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--ink-2);
}

/* ---------- Screenshots ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 8px;
}
.shots img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

/* ---------- Sections ---------- */

.band-paper { padding: 104px 0; }
.band-ink {
  background: var(--ink);
  color: var(--paper);
  padding: 104px 0;
}

h2 {
  font-family: "Franklin", sans-serif;
  font-weight: 800;
  font-size: clamp(31px, 4.5vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 44px;
  max-width: 18ch;
}

/* Feature list: the reading, then what it is, then what you get. Stacked on the left rule,
   divided by plate rules — a band list, not a card grid. */

.feature {
  border-top: 1px solid var(--rule);
  padding: 34px 0;
  max-width: 760px;
}
.feature:last-child { border-bottom: 1px solid var(--rule); }

.reading {
  font-family: "Franklin", sans-serif;
  font-weight: 800;
  font-size: clamp(33px, 4.2vw, 45px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 10px;
}

.feature h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
}

.feature p.desc {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  max-width: var(--measure);
}

/* ---------- Inverted band: the promise + the sources logbook ---------- */

.band-ink h2 { color: var(--paper); }

.band-ink p {
  color: #A9B7C5;
  max-width: var(--measure);
  margin: 0 0 22px;
}
.band-ink a { color: var(--teal-lit); }

.sources {
  list-style: none;
  margin: 52px 0 0;
  padding: 0;
  max-width: 760px;
}
.sources li {
  border-top: 1px solid var(--rule-dark);
  padding: 22px 0;
}
.sources li:last-child { border-bottom: 1px solid var(--rule-dark); }

.sources .name {
  font-weight: 600;
  font-size: 16px;
  color: var(--paper);
  margin: 0 0 4px;
}
.sources .what {
  color: #A9B7C5;
  font-size: 15px;
  max-width: var(--measure);
  margin: 0;
}

/* ---------- Footer ---------- */

footer {
  padding: 44px 0 60px;
  border-top: 1px solid var(--rule);
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}
.foot-brand:hover { text-decoration: none; color: var(--ink); }
.foot-brand img { width: 24px; height: 24px; }
.foot-brand span {
  font-family: "Michroma", sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
}

.foot-links {
  display: flex;
  gap: 26px;
  font-size: 15px;
}
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }

/* ---------- Privacy policy ---------- */

.policy { padding-top: 80px; padding-bottom: 96px; }

.policy h1 {
  font-family: "Franklin", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.8vw, 62px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  max-width: 14ch;
}

.policy .updated {
  color: var(--ink-2);
  font-size: 15px;
  margin: 0 0 48px;
}

.policy h2 {
  font-family: "Bricolage", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0;
  max-width: var(--measure);
  margin: 52px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.policy h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

.policy p {
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: var(--measure);
}
.policy p strong { color: var(--ink); font-weight: 600; }

/* Bulleted lists indent by definition, so the stored-data list is set as rule-divided
   rows on the same left edge as the prose. */
.policy .stack {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  max-width: var(--measure);
}
.policy .stack li {
  border-top: 1px solid var(--rule);
  padding: 14px 0;
  color: var(--ink-2);
}
.policy .stack li:last-child { border-bottom: 1px solid var(--rule); }
.policy .stack strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

.policy table {
  width: 100%;
  max-width: 860px;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}
.policy th,
.policy td {
  text-align: left;
  padding: 14px 24px 14px 0;
  border-top: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-2);
}
.policy tr:last-child td { border-bottom: 1px solid var(--rule); }
.policy th {
  color: var(--ink);
  font-weight: 600;
  border-top: none;
}
.policy td:first-child {
  color: var(--ink);
  font-weight: 600;
  width: 30%;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .band-paper, .band-ink { padding: 76px 0; }
  .hero { padding-top: 64px; }
  .shots {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
  }
  .shots::-webkit-scrollbar { display: none; }
  .shots img { flex: 0 0 auto; width: 62vw; max-width: 300px; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .brand { gap: 10px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-size: 11px; letter-spacing: 1px; }
  .nav-cta { font-size: 14px; padding: 8px 14px; }
  .buy { margin-bottom: 56px; }
  .dial { margin-bottom: 56px; }
  .bands { font-size: 9px; letter-spacing: 0.06em; }
  .policy td:first-child { width: auto; }
  .policy table, .policy tbody, .policy tr, .policy td { display: block; width: 100%; }
  .policy thead { display: none; }
  .policy tr { border-top: 1px solid var(--rule); padding: 16px 0; }
  .policy tr:last-child { border-bottom: 1px solid var(--rule); }
  .policy td { border: none; padding: 0; }
  .policy td:first-child { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .needle { animation: none; }
}