/* Tiny Record Player: Brand A's type and walnut ink on a white ground (Thomas, 21 Oct 2026). Light only. */
:root {
  --bg: #FFFFFF; --ink: #2B1F17; --ink2: #6B594B; --hair: rgba(43, 31, 23, 0.14); --accent: #8E553E;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); overflow-x: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: #000; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3, dt { font-family: var(--serif); font-weight: 400; }

/* Header and footer, on every page */
header.site { max-width: 1200px; margin: 0 auto; padding: 22px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 46px; }
.brand span { font: 400 23px/1 var(--serif); white-space: nowrap; }
nav.top { display: flex; gap: 22px; }
nav.top a { color: var(--ink2); text-decoration: none; font-size: 15px; }
nav.top a:hover, nav.top a[aria-current] { color: var(--ink); }
footer.site { border-top: 1px solid var(--hair); margin-top: clamp(96px, 12vw, 168px); }
footer.site .in { max-width: 1200px; margin: 0 auto; padding: 32px var(--gutter) 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
footer.site .in > img { width: 40px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
footer.site .small { flex-basis: 100%; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink2); }
footer.site .small a { color: var(--ink2); }

/* The landing page */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }
.hero { text-align: center; padding-top: clamp(28px, 6vw, 88px); }
.hero h1 { margin: 0; font-size: clamp(54px, 8.6vw, 124px); line-height: 0.95; letter-spacing: -0.02em; text-wrap: balance; }
.sub { margin: 22px auto 0; max-width: 32em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink2); text-wrap: balance; }
.film { position: relative; max-width: 1120px; margin: clamp(8px, 2vw, 24px) auto 0; }
.film video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg); }
.film-toggle { display: inline-flex; align-items: center; gap: 9px; height: 40px; margin-top: 4px; padding: 0 18px 0 15px; border: 1px solid var(--hair); border-radius: 999px; background: var(--bg); color: var(--ink2); font: 600 14px/1 var(--sans); cursor: pointer; }
.film-toggle:hover { color: var(--ink); border-color: rgba(43, 31, 23, 0.32); }
.film-toggle[hidden] { display: none; }
.xfollow { margin: 28px 0 0; }
.avail { margin-top: clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.avail .icon { width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 2px 6px rgba(43, 31, 23, 0.18); }
.when { display: flex; align-items: center; gap: 12px; text-align: left; }
.when p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 17px; font-weight: 600; }
.btn:hover { background: #000; color: #fff; }
.btn[hidden] { display: none; }

.block { padding-top: clamp(104px, 12vw, 176px); }
.block h2 { margin: 0; font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.lede { margin: 20px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.flip > figure { order: -1; }
.split.wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
figure { margin: 0; }
figure img { margin-inline: auto; }
.points { margin: 36px 0 0; display: grid; gap: 22px; }
.points > div { border-top: 1px solid var(--hair); padding-top: 18px; }
.points dt { font-size: 26px; line-height: 1.15; }
.points dd { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink2); }
.center { text-align: center; }
.center .lede { max-width: 34em; margin-inline: auto; text-wrap: balance; }
.loop { width: min(100%, 860px); margin: clamp(36px, 5vw, 64px) auto 0; background: var(--bg); }
.points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; margin-top: clamp(40px, 5vw, 64px); text-align: left; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 40px; }
.facts > div { border-top: 1px solid var(--hair); padding-top: 20px; }
.facts dt { font-size: 30px; line-height: 1.1; }
.facts dd { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.close { text-align: center; }
.close .lede { margin-inline: auto; }
.close .btn { margin-top: 28px; }
.follow { margin: 24px 0 0; font-size: 16px; }

@media (max-width: 860px) {
  .split, .split.wide { grid-template-columns: minmax(0, 1fr); }
  .split.flip > figure { order: 0; }
  .split figure img { max-width: min(100%, 520px); }
  .points.three { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .film { margin-inline: calc(-1 * var(--gutter)); }
}
@media (max-width: 520px) {
  header.site { padding-top: 16px; padding-bottom: 16px; }
  .brand img { width: 40px; }
  .brand span { font-size: 20px; }
  nav.top { gap: 16px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}

/* Support, privacy and 404 */
.doc { max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gutter) 0; }
.doc h1 { margin: 0 0 20px; font-size: clamp(42px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.doc h2 { margin: 48px 0 12px; font-size: clamp(25px, 3vw, 30px); line-height: 1.2; text-wrap: balance; }
.doc p, .doc ol, .doc ul { margin: 0 0 16px; }
.doc ol, .doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--accent); }
.doc .lede { font-size: 20px; line-height: 1.55; color: var(--ink); }
.doc .meta { color: var(--ink2); font-size: 15px; }
.doc dl { margin: 0; }
.doc dl dt { font-family: var(--sans); font-weight: 600; margin-top: 20px; }
.doc dl dd { margin: 4px 0 0; }