/* Shared film/About chrome. Keep the film's measured layout in story.css. */
body.film-site,
body.about-site {
  --studio-bg: #080808;
  --studio-paper: #f5f5f5;
  --studio-muted: #a8a8a8;
  --studio-line: #383838;
  --studio-blue: #0066ff;
  --studio-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  background: var(--studio-bg);
  color: var(--studio-paper);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

:is(body.film-site, body.about-site) ::selection { background: #0066ff; color: #fff; }
:is(body.film-site, body.about-site) a { text-underline-offset: .25em; }
:is(body.film-site, body.about-site) :is(a, button, summary):focus-visible {
  outline: 2px solid #99c2ff;
  outline-offset: 5px;
}
:is(body.film-site, body.about-site) .cta-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #0066ff;
  border-radius: 0;
  background: #0066ff;
  color: #fff;
  box-shadow: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  transition: background-color 160ms, border-color 160ms;
}
:is(body.film-site, body.about-site) .cta-book:hover {
  color: #080808;
  background: #f5f5f5;
  border-color: #f5f5f5;
  box-shadow: none;
}
:is(body.film-site, body.about-site) .cta-mail { color: #c8c8c8; font-weight: 450; }
:is(body.film-site, body.about-site) .cta-mail:hover { color: #f5f5f5; }

/* Fine instrument marks belong to the frame, leaving the picture clear. */
body.film-site .story-index {
  color: #c8c8c8;
  font-family: var(--studio-mono);
  letter-spacing: .1em;
}
body.film-site #chapterNumber { color: #99c2ff; font-variant-numeric: tabular-nums; }
body.film-site #storyTitle { color: #f5f5f5; font-weight: 600; letter-spacing: -.055em; }
body.film-site #storyCue { color: #f5f5f5; font-weight: 650; letter-spacing: -.065em; }
body.film-site .story-subtitle { color: #c8c8c8; }
body.film-site .story-detail { color: #f5f5f5; }
body.film-site .story-heading,
body.film-site .story-beat { text-shadow: 0 2px 14px #0009; }
body.film-site .ctl {
  border: 1px solid #787878;
  border-radius: 0;
  color: #c8c8c8;
  background: #080808ed;
  font-family: var(--studio-mono);
  font-size: 11px;
  letter-spacing: .08em;
  transition: border-color 150ms, color 150ms, background-color 150ms;
}
body.film-site .ctl:hover { border-color: #f5f5f5; color: #f5f5f5; }
body.film-site .ctl.on { border-color: #0066ff; color: #b3d1ff; background: #101010; }
body.film-site .ctl .eq { height: 10px; }
body.film-site .hud {
  color: #b0b0b0;
  border-top: 1px solid #ffffff1a;
  background: #080808eb;
  font-size: 10px;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
body.film-site .dial-cap { color: #b8b8b8; font-size: 9px; letter-spacing: .13em; }
body.film-site #arcProg,
body.film-site #knobOuter { stroke: #0066ff; filter: none !important; }
body.film-site #knobOuter { fill: #080808; stroke-width: 1.5; }
body.film-site #knobInner { fill: #f5f5f5; }
body.film-site #progress { height: 2px !important; background: #0066ff !important; box-shadow: none !important; }
body.film-site #loader { background: #080808; }
body.film-site #ldAscii { color: #0066ff; text-shadow: none; }
body.film-site .ld-ring .prg { stroke: #0066ff; filter: none; }
body.film-site .ld-ring .spin { stroke: #787878; }
body.film-site #ldCap { color: #a8a8a8; }
body.film-site #ldCap b { color: #80b3ff; }

/* About reads as a studio index, with a featured project and quiet paired rows. */
body.about-site > main {
  box-sizing: border-box;
  max-width: 1280px;
  padding: 174px 56px 36px;
}
body.about-site > main > .eyebrow {
  color: #b0b0b0;
  font-family: var(--studio-mono);
  font-size: 10px;
  letter-spacing: .12em;
  margin-bottom: 32px;
}
body.about-site .eyebrow .dot { width: 5px; height: 5px; background: #0066ff; border-radius: 0; box-shadow: none; }
body.about-site .eyebrow .n,
body.about-site .section-tag .n { color: #99c2ff; }
body.about-site > main > h1 {
  max-width: 1020px;
  font-size: clamp(54px, 7.1vw, 100px);
  line-height: .98;
  font-weight: 550;
  letter-spacing: -.065em;
  margin-bottom: 34px;
}
body.about-site h1 .blue { color: #80b3ff; }
body.about-site .lede {
  max-width: 750px;
  color: #b8b8b8;
  font-size: clamp(18px, 1.75vw, 23px);
  line-height: 1.6;
  letter-spacing: -.02em;
}
body.about-site .rule {
  position: relative;
  background: #383838;
  margin: 90px 0 42px;
}
body.about-site .rule::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 3px;
  top: -1px;
  background: #f5f5f5;
}
body.about-site .section-tag { font-size: 10px; letter-spacing: .1em; margin-bottom: 18px; }
body.about-site .section-tag .s { color: #a0a0a0; }
body.about-site > main > h2,
body.about-site .cta h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.05; font-weight: 550; letter-spacing: -.055em; }
body.about-site p.body { color: #b8b8b8; font-size: 18px; line-height: 1.65; }
body.about-site .builds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; margin-top: 36px; }
body.about-site .build,
body.about-site .product {
  min-width: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #484848;
  border-radius: 0;
  background: transparent;
  transition: border-color 160ms;
}
body.about-site .build:hover { transform: none; border-color: #80b3ff; }
body.about-site .build:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border-bottom: 1px solid #383838;
}
body.about-site .build:first-child .thumb { border-bottom: 0; border-right: 1px solid #383838; }
body.about-site .build:first-child .build-body { align-self: center; padding: 32px; }
body.about-site .build-body,
body.about-site .product-body { padding: 25px 0 0; }
body.about-site .build .k,
body.about-site .product .k { font-size: 10px; color: #b0b0b0; letter-spacing: .12em; margin-bottom: 12px; }
body.about-site .build h3 { color: #f5f5f5; font-weight: 550; font-size: 30px; letter-spacing: -.045em; }
body.about-site .build p,
body.about-site .product p { color: #b8b8b8; font-size: 16px; line-height: 1.65; }
body.about-site .thumb { border-bottom: 1px solid #383838; background: #101010; }
body.about-site .thumb > .studio-art { height: 100%; aspect-ratio: auto; border: 0; }
body.about-site .product-more { display: inline-flex; align-items: center; min-height: 44px; font: 11px ui-monospace, monospace; color: #0066ff; text-underline-offset: 5px; }
body.about-site .thumb::after { background: linear-gradient(0deg, #08080870, transparent 45%); }
body.about-site .thumb-tag {
  left: 14px;
  bottom: 14px;
  padding: 7px 9px;
  border: 1px solid #808080;
  border-radius: 0;
  background: #080808e8;
  color: #f5f5f5;
  font-size: 9px;
  letter-spacing: .1em;
}
body.about-site .build:hover video { transform: none; }
body.about-site .products { gap: 28px; margin-top: 36px; }
body.about-site .product h3 { font-size: 38px; font-weight: 550; letter-spacing: -.055em; }
body.about-site a.product:hover { border-color: #f5f5f5; }
body.about-site .product[data-product="flogen"] .k { color: #0066ff; }
body.about-site .ext { color: #99c2ff; }
body.about-site .ent { gap: 24px; margin-top: 30px; }
body.about-site .ent div { border-color: #484848; color: #d8d8d8; font-size: 15px; }
body.about-site .cta {
  position: relative;
  border: 1px solid #484848;
  border-radius: 0;
  background: #101010;
  padding: 48px;
  margin-top: 76px;
}
body.about-site .cta::before,
body.about-site .cta::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
body.about-site .cta::before { left: -1px; top: -1px; border-left: 1px solid #f5f5f5; border-top: 1px solid #f5f5f5; }
body.about-site .cta::after { right: -1px; bottom: -1px; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; }
body.about-site .cta h2 { max-width: 730px; }
body.about-site .cta-row { gap: 16px 26px; }
body.about-site > footer { box-sizing: border-box; max-width: 1280px; padding: 36px 56px 100px; margin-top: 48px; border-color: #383838; }
body.about-site .fine { color: #a8a8a8; font-size: 10px; letter-spacing: .07em; line-height: 1.8; }
body.about-site > footer .social { gap: 18px; font-size: 10px; letter-spacing: .09em; }
body.about-site > footer .social a { display: inline-flex; align-items: center; min-height: 44px; color: #c8c8c8; }
body.about-site > footer .social a:hover { color: #f5f5f5; }

@media (max-width: 1000px) {
  body.about-site > main { padding-top: 144px; }
  body.about-site .build:first-child { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  body.about-site .build:first-child .build-body { padding: 24px; }
}
@media (max-width: 820px) {
  body.film-site .ctl { font-size: 9px; letter-spacing: .06em; }
  body.film-site .hud { font-size: 9px; }
  body.about-site > main { padding: 126px 22px 24px; }
  body.about-site > main > .eyebrow { margin-bottom: 25px; }
  body.about-site > main > h1 { font-size: clamp(46px, 10vw, 74px); margin-bottom: 25px; }
  body.about-site .rule { margin: 58px 0 32px; }
  body.about-site .section-tag { line-height: 1.7; }
  body.about-site .builds,
  body.about-site .products { gap: 32px; margin-top: 28px; }
  body.about-site .build:first-child { display: block; }
  body.about-site .build:first-child .thumb { border-right: 0; border-bottom: 1px solid #383838; }
  body.about-site .build:first-child .build-body { padding: 23px 0 28px; }
  body.about-site .build h3 { font-size: 28px; }
  body.about-site .products { grid-template-columns: 1fr; }
  body.about-site .cta { margin-top: 54px; padding: 32px 24px; }
  body.about-site .cta h2 { font-size: 36px; }
  body.about-site > footer { padding: 30px 22px 98px; margin-top: 36px; }
}
@media (max-width: 600px) {
  body.about-site .builds { grid-template-columns: 1fr; }
  body.about-site .build:first-child { border-bottom: 0; }
  body.about-site .build:first-child .build-body { padding-bottom: 0; }
  body.about-site .cta-row { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 1000px) and (max-height: 540px) and (orientation: landscape) {
  body.film-site .ctl { font-size: 9px; }
  body.film-site .hud { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(body.film-site, body.about-site) :is(.cta-book, .ctl, .build, .product, .thumb video) { transition: none; }
  body.film-site #loader::after,
  body.film-site .ld-ring .spin { animation: none; }
  body.film-site :is(#arcProg, #knobOuter, #knobInner) { transition: none !important; }
}

body.film-site .ctl{border-radius:999px}