/* Beatknife site, v3 "Screening room". One stylesheet for every page. No JS of its own. */

/* ---- Fonts: self-hosted. Bricolage Grotesque 400/500/600/700/800 (variable), Geist Mono 400/500. ---- */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-Variable.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---- Cassette tokens, Neutral theme ---- */
:root {
  --canvas: #0b0b0b;
  --panel: #121212;
  --control: rgba(242,242,242,0.05);
  --line: rgba(242,242,242,0.08);
  --line-mid: rgba(242,242,242,0.10);
  --line-strong: rgba(242,242,242,0.18);
  --text-bright: #ececec;
  --text: #c7c7c7;
  --text-soft: #a8a8a8;
  --text-mid: #828282;
  --text-faint: #5f5f5f;
  --accent: #f06433;
  --accent-hover: #ff7a4d;
  --on-accent: #1a0d05;
  --focus: #facd14;
  --error: #e26d6d;
  --ui: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 20px;
  --max: 1088px;
  --section: 96px;      /* vertical rhythm between sections; doubles on desktop */
  --radius: 10px;
  --radius-lg: 12px;
}
@media (min-width: 900px) { :root { --gutter: 96px; --section: 200px; } }

* { box-sizing: border-box }
html { background: var(--canvas); -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 16px/1.5 var(--ui); overflow-x: hidden }
h1, h2, h3, p, ol, ul, figure { margin: 0 }
img, video { display: block; max-width: 100%; height: auto }
a { color: var(--accent) } a:hover { color: var(--accent-hover) }
strong { color: var(--text-bright); font-weight: 600 }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) }
.section { padding-top: var(--section) }
.center { text-align: center; display: flex; flex-direction: column; align-items: center }

/* ---- Type ---- */
.kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mid); font-weight: 500 }
.num { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--accent) }
.display { font-weight: 800; color: var(--text-bright); letter-spacing: -.04em; line-height: .97; font-variation-settings: "opsz" 96 }
.h1 { font-size: clamp(44px, 7.5vw, 96px) }
.h1-page { font-size: clamp(42px, 6.25vw, 80px) }
.h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1 }
.h2-big { font-size: clamp(42px, 5.6vw, 72px) }
.lede { font-size: clamp(17px, 1.65vw, 21px); color: var(--text-soft); line-height: 1.5; max-width: 34ch }
.body-soft { font-size: clamp(16px, 1.4vw, 18px); color: var(--text-soft); line-height: 1.6 }
.note { font-size: 13px; color: var(--text-mid) }
.accent { color: var(--accent) }

/* ---- Buttons and links ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap }
.btn-primary { background: var(--accent); color: var(--on-accent) }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent) }
.btn-ghost { color: var(--text-bright); border: 1px solid var(--line-strong); background: transparent }
.btn-ghost:hover { border-color: var(--accent); color: var(--text-bright) }
.btn-row { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 32px }
@media (min-width: 600px) { .btn-row { flex-direction: row; justify-content: center; width: auto; gap: 14px; margin-top: 40px } }
.more { font-size: 16px; color: var(--text-bright); text-decoration: none; border-bottom: 1px solid rgba(242,242,242,0.3); padding-bottom: 3px }
.more:hover { color: var(--accent); border-color: var(--accent) }

/* ---- Nav: links on desktop, Join pill + <details> menu on phones (no JS) ---- */
.nav { position: relative; z-index: 10; border-bottom: 1px solid var(--line) }
@media (min-width: 900px) { .nav { border-bottom: 0 } }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px }
@media (min-width: 900px) { .nav-in { height: 80px } }
.nav-mark img { width: 104px } @media (min-width: 900px) { .nav-mark img { width: 128px } }
.nav-links { display: none; align-items: center; gap: 36px }
.nav-links a { color: var(--text-mid); text-decoration: none; font-size: 15px }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-bright) }
.nav-links .btn { height: 40px; padding: 0 18px; font-size: 14px; color: var(--on-accent) }
.nav-phone { display: flex; align-items: center; gap: 4px; margin-right: -8px }
.nav-phone .btn { height: 36px; padding: 0 14px; font-size: 14px }
.menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center }
.menu > summary::-webkit-details-marker { display: none }
.menu-panel { position: absolute; left: 0; right: 0; top: 64px; background: var(--canvas); border-bottom: 1px solid var(--line-mid); padding: 8px var(--gutter) 20px }
.menu-panel a { display: flex; align-items: center; height: 52px; border-top: 1px solid var(--line); color: var(--text-bright); text-decoration: none; font-size: 18px }
.menu-panel a:first-child { border-top: 0 }
@media (min-width: 900px) { .nav-links { display: flex } .nav-phone { display: none } }

/* ---- Hero ---- */
.hero { padding-top: 64px; padding-bottom: 40px }
@media (min-width: 900px) { .hero { padding-top: 140px; padding-bottom: 96px } }
.hero .display { margin-top: 20px; max-width: 980px } @media (min-width: 900px) { .hero .display { margin-top: 28px } }
.hero .lede { margin-top: 20px } @media (min-width: 900px) { .hero .lede { margin-top: 28px } }
.page-head { padding-top: 56px; padding-bottom: 56px }
@media (min-width: 900px) { .page-head { padding-top: 120px; padding-bottom: 120px } }
.page-head .display { margin-top: 18px } .page-head .lede { margin-top: 20px; max-width: 32ch }

/* ---- Frames ---- */
.frame { position: relative; background: #000; border: 1px solid var(--line-mid); border-radius: var(--radius-lg); overflow: hidden }
.frame video, .frame img { width: 100% }
.caption { text-align: center; font-size: 13px; color: var(--text-mid); margin-top: 12px } @media (min-width: 900px) { .caption { font-size: 14px; margin-top: 16px } }
.shot { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-mid); background: #000; aspect-ratio: 16 / 10 }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(11,11,11,0.55); border: 1px solid rgba(242,242,242,0.35); display: flex; align-items: center; justify-content: center; pointer-events: none }
.play svg { width: 18px; height: 18px }
.play.big { width: 72px; height: 72px; background: var(--accent); border: 0 } .play.big svg { width: 26px; height: 26px }
@media (min-width: 900px) { .play { width: 72px; height: 72px } .play svg { width: 22px; height: 22px } .play.big { width: 104px; height: 104px } .play.big svg { width: 34px; height: 34px } }

/* ---- How it works: list on phones, five columns on desktop ---- */
.steps { margin-top: 20px; display: grid; grid-template-columns: 1fr }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0; border-top: 1px solid var(--line-mid) }
.step:last-child { border-bottom: 1px solid var(--line-mid) }
.step .num { padding-top: 5px }
.step h3 { font-size: 20px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; color: var(--text-bright) }
.step p { font-size: 15px; line-height: 1.55; color: var(--text-mid); margin-top: 6px }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; margin-top: 56px }
  .step { display: block; padding: 20px 0 0 } .step:last-child { border-bottom: 0 }
  .step h3 { font-size: 23px; margin-top: 14px } .step p { font-size: 16px; margin-top: 10px }
}

/* ---- Feature rows: stacked on phones, alternating 7/5 on desktop ---- */
.rows { display: flex; flex-direction: column; gap: 72px }
.row h3 { font-size: clamp(30px, 3.45vw, 44px); line-height: 1.03; font-weight: 800; letter-spacing: -.03em; color: var(--text-bright); font-variation-settings: "opsz" 96; margin-top: 10px }
.row p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--text-soft); margin-top: 12px; max-width: 36ch }
.row .text { margin-top: 20px }
@media (min-width: 900px) {
  .rows { gap: 160px }
  .row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center }
  .row.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
  .row.flip .shot { order: 2 }
  .row .text { margin-top: 0 } .row h3 { margin-top: 14px } .row p { margin-top: 16px }
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242,242,242,0.14); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--text) }

/* ---- Demo callout (home) ---- */
.demo-call { display: flex; flex-direction: column-reverse; gap: 24px }
.demo-link { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-mid); background: #000; aspect-ratio: 1280 / 804 }
.demo-link img { width: 100%; height: 100%; object-fit: cover; opacity: .7 }
.demo-link:hover img { opacity: .85 }
.demo-call .h2 { margin-top: 12px } .demo-call .body-soft { margin-top: 12px; max-width: 32ch }
@media (min-width: 900px) { .demo-call { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: center } .demo-call .h2 { margin-top: 18px } .demo-call .body-soft { margin-top: 18px } }

/* ---- Gallery teaser (home) ---- */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px }
.teaser a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-mid); background: #000; height: 300px }
.teaser img { width: 100%; height: 100%; object-fit: cover }
.teaser figcaption { display: none }
@media (min-width: 900px) { .teaser { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-top: 64px } .teaser a { height: 520px } .teaser figcaption { display: block; font-size: 14px; color: var(--text-mid); margin-top: 12px } }

/* ---- Closing call ---- */
.closer { padding-top: 120px; padding-bottom: 112px }
@media (min-width: 900px) { .closer { padding-top: 220px; padding-bottom: 200px } }
.closer .body-soft { margin-top: 16px } .closer .btn { margin-top: 28px; width: 100% }
@media (min-width: 600px) { .closer .btn { width: auto } }
@media (min-width: 900px) { .closer .body-soft { margin-top: 22px } .closer .btn { margin-top: 36px } }

/* ---- Gallery page ---- */
.clips { display: grid; grid-template-columns: 1fr; gap: 40px }
.clip { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-mid); background: #000 }
.clip video, .clip img { width: 100%; height: 100%; object-fit: cover }
.clip-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 14px }
.clip-meta h3 { font-size: 19px; font-weight: 700; color: var(--text-bright); letter-spacing: -.01em }
.clip-meta p { font-size: 15px; color: var(--text-mid); margin-top: 4px }
.fmt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--text-mid); white-space: nowrap }
.clip-tall .clip { max-width: 360px }
@media (min-width: 900px) {
  .clips { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px 32px; align-items: start }
  .clip-tall { grid-column: 2; grid-row: 1 / span 2 } .clip-tall .clip { max-width: none }
  .clip-wide { grid-column: 1 / -1 } .clip-wide > * { max-width: 720px }
}

/* ---- Demo page ---- */
.player { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-mid); background: #000 }
.player video { width: 100% }
.chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px }
.chapters span { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(242,242,242,0.14); font-size: 14px; color: var(--text) }
.quote { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.4; color: var(--text-bright); max-width: 30ch }

/* ---- Developers page ---- */
.notes { max-width: 960px; margin: 0 auto }
.dev { padding: 28px 0; border-top: 1px solid var(--line) }
.dev:last-child { border-bottom: 1px solid var(--line) }
.dev h3 { font-size: clamp(21px, 2vw, 26px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--text-bright); margin-top: 10px }
.dev p, .dev li { font-size: clamp(16px, 1.35vw, 17px); line-height: 1.65; color: var(--text-soft) }
.dev p { margin-top: 10px; max-width: 58ch } .dev ul { padding-left: 20px; margin-top: 10px }
@media (min-width: 900px) { .dev { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding: 32px 0 } .dev .num { padding-top: 6px } .dev h3 { margin-top: 0 } }
.changelog { max-width: 960px; margin: 0 auto }
.changelog .h2 { margin: 16px 0 32px }
/* #news: the existing version-history renderer fills this with one <details> per release. */
#news details { border-top: 1px solid var(--line); padding: 20px 0 }
#news details:last-child { border-bottom: 1px solid var(--line) }
#news summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 20px; font-weight: 700; color: var(--text-bright) }
#news summary::-webkit-details-marker { display: none }
#news .notes { font-size: 16px; line-height: 1.65; color: var(--text-soft); margin-top: 14px; max-width: 62ch; white-space: pre-wrap }

/* ---- Join page ---- */
.join-head { padding-top: 56px } @media (min-width: 900px) { .join-head { padding-top: 120px } }
.join-head .display { margin-top: 16px } .join-head .lede { margin-top: 16px; max-width: 30ch }
.form { width: 100%; max-width: 460px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 20px }
@media (min-width: 900px) { .form { margin-top: 56px; gap: 22px } }
.form label { display: block; font-size: 14px; color: var(--text-soft); margin-bottom: 8px }
.form label span { color: var(--text-faint) }
.form input { width: 100%; height: 52px; padding: 0 16px; background: var(--control); border: 1px solid rgba(242,242,242,0.12); border-radius: var(--radius); color: var(--text-bright); font: inherit; font-size: 16px }
.form input::placeholder { color: var(--text-faint) }
.form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent }
.form .btn { width: 100%; height: 54px }
.form .btn[disabled] { opacity: .6; cursor: default }
#turnstile { min-height: 0 }
.form .hint { font-size: 13px; color: var(--text-faint); text-align: center }
.error { color: var(--error); font-size: 14px; text-align: center; display: none }
.next { width: 100%; max-width: 880px; margin: 72px auto 0 }
.next-list { margin-top: 14px; display: grid; grid-template-columns: 1fr }
.next-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0; border-top: 1px solid var(--line) }
.next-item:last-child { border-bottom: 1px solid var(--line) }
.next-item .num { padding-top: 4px }
.next-item h3 { font-size: 18px; font-weight: 700; color: var(--text-bright) }
.next-item p { font-size: 15px; line-height: 1.55; color: var(--text-mid); margin-top: 4px }
@media (min-width: 900px) {
  .next { margin-top: 120px; padding-top: 48px; border-top: 1px solid var(--line) }
  .next > .kicker { display: none }
  .next-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 0 }
  .next-item { display: block; padding: 0; border: 0 } .next-item:last-child { border: 0 }
  .next-item h3 { font-size: 20px; margin-top: 10px } .next-item p { margin-top: 6px }
}
.warning { max-width: 560px; margin: 48px auto 0; padding-bottom: 80px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--text-mid) }
@media (min-width: 900px) { .warning { margin-top: 72px; padding-bottom: 120px; font-size: 15px } }

/* Join states. The script toggles display on #joinForm's wrapper, #sent and #result. */
.state { display: none; padding: 96px 0 120px; text-align: center }
.state .display { margin-top: 20px; font-size: clamp(40px, 4.4vw, 56px) }
.state .lede { margin: 18px auto 0 }
.dlrow { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px }
@media (min-width: 600px) { .dlrow { flex-direction: row; justify-content: center; gap: 16px } }
.btn-dl { height: 56px; padding: 0 30px; font-size: 17px }
#dlVersion { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mid) }
.install { max-width: 640px; margin: 64px auto 0; text-align: left; list-style: none; padding: 0 }
.install li { display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 24px 0; border-top: 1px solid var(--line) }
.install li:last-child { border-bottom: 1px solid var(--line) }
.install .num { padding-top: 4px }
.install h3 { font-size: 19px; font-weight: 700; color: var(--text-bright) }
.install p { font-size: 16px; line-height: 1.6; color: var(--text-soft); margin-top: 6px }
.install figure { margin-top: 16px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-mid); background: #fff }
.install figure.dialog { max-width: 240px } .install figure.settings { max-width: 440px }

/* ---- What's new (/new/): one item per change, headline + note over a full-width image ---- */
.news { display: flex; flex-direction: column; gap: 72px }
.news-head h2 { font-size: clamp(30px, 3.45vw, 44px); line-height: 1.03; font-weight: 800; letter-spacing: -.03em; color: var(--text-bright); font-variation-settings: "opsz" 96; margin-top: 10px }
.news-head p { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--text-soft); margin-top: 12px; max-width: 46ch }
.news-shot { margin-top: 20px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-mid); background: #0c0a08 }
.news-shot img { width: 100% }
.closer .btn-row .btn { margin-top: 0 }
@media (min-width: 900px) {
  .news { gap: 160px }
  .news-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end }
  .news-head h2 { margin-top: 14px } .news-head p { margin-top: 0 }
  .news-shot { margin-top: 36px; border-radius: var(--radius-lg) }
}

/* ---- "New in" pill above the home hero ---- */
.new-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid rgba(242,242,242,0.14); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.3; text-align: left; margin-bottom: 28px }
.new-pill:hover { border-color: var(--accent); color: var(--text-bright) }
.new-pill .tag { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em }
.new-pill .arrow { flex: none; color: var(--accent) }
@media (min-width: 900px) { .new-pill { font-size: 15px; margin-bottom: 40px } }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); padding: 32px 0 48px }
.footer-in { display: flex; flex-direction: column; gap: 24px }
.footer img { width: 88px; opacity: .8 }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px }
.footer-links a { color: var(--text-mid); text-decoration: none; font-size: 15px }
.footer-links a:hover { color: var(--text-bright) }
.footer small { display: block; font-size: 12px; color: var(--text-faint); margin-top: 8px }
@media (min-width: 900px) {
  .footer { padding: 40px 0 56px }
  .footer-in { flex-direction: row; align-items: center; justify-content: space-between }
  .footer img { width: 96px }
  .footer-links { display: flex; gap: 28px } .footer-links a { font-size: 14px }
}

/* ---- Reduced motion: posters instead of loops ---- */
.poster-still { display: none }
@media (prefers-reduced-motion: reduce) { video[autoplay] { display: none } .poster-still { display: block } }