/* Layer order: ported essays load the fpvlabs.ai Tailwind sheet (assets/essay.css), whose
   preflight lives in "base" and utilities in "utilities". Site styles sit between the two, so
   they override the preflight while the essays' layout utilities still win on their own markup. */
@layer properties, theme, base, site, components, utilities;

@layer site {
:root {
  /* fpvlabs.ai light theme: warm paper, near-black text, black headings, gold accent */
  --bg: #f4ede4;
  --surface: #fbf7f1;
  --text: #1a1a1a;
  --heading: #000;
  --muted: #66615b;
  --rule: #d6cfc6;
  --hover: rgba(0, 0, 0, 0.05);
  --accent: #8a6a33;
  --todo-bg: #fbefc4;
  --col: 680px;
  --toc: 190px;
  --gap: 48px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
::selection { color: var(--bg); background: #2a2520; }
h1, h2, h3, h4, .post-title, .paper-title, .el-title { color: var(--heading); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong { font-weight: 600; }

/* Floating pill header */
.site-header {
  position: sticky;
  top: 16px;
  z-index: 10;
  max-width: var(--col);
  margin: 16px auto 0;
  padding: 0 16px;
}
.site-header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(251, 247, 241, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  padding: 8px 8px 8px 12px;
  font-size: 13px;
}
/* The "FPV Labs" wordmark keeps fpvlabs.ai's EB Garamond Bold */
.logo { font-family: "EB Garamond", Georgia, serif; font-weight: 700; letter-spacing: 0; }
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
}
.site-header .logo img { width: 28px; height: 28px; border-radius: 999px; display: block; }
.site-header .links { display: flex; align-items: center; gap: 4px; }
.site-header .links a { text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.site-header .links a:hover { background: var(--hover); }
.site-header .links a[aria-current="page"] { background: var(--hover); }
.site-header .links a.nav-cta { background: var(--text); color: var(--bg); margin-left: 6px; }
.site-header .links a.nav-cta:hover { background: #000; }

/* Layout: sticky TOC on the left, single reading column */
.layout {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  padding: 48px 16px 72px;
}
.toc {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + var(--gap) - 16px);
  width: var(--toc);
}
.toc ol {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0;
  border-right: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.45;
}
.toc li { margin: 0 0 12px; }
.toc li:last-child { margin-bottom: 0; }
:is(h2, h3) + :is(figure, .table-wrap, .stats),
.essay-body > :is(h2, h3) + :is(div, figure, pre),
h2 + h3 { margin-top: 20px; }
.toc a { color: var(--muted); text-decoration: none; display: block; }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--accent); }
@media (max-width: 1040px) { .toc { display: none; } }

.back { font-size: 13px; text-decoration: none; display: inline-block; margin-bottom: 28px; }
.back:hover { text-decoration: underline; }

h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.22;
  margin: 0 0 32px;
}

figure.hero { margin: 0 0 24px; padding: 0; border: 0; }
.hero img { width: 100%; display: block; border-radius: 4px; }
.link-row { font-size: 13px; margin: 0 0 40px; }
.link-row .dot { color: var(--muted); margin: 0 8px; }

/* Vertical rhythm shared by every post: 20px between paragraphs, 40px around figures and
   other blocks, 56px before a section heading */
h2 {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  margin: 56px 0 16px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 36px 0 12px;
}
p { margin: 0 0 20px; }
ul, ol { margin: 0 0 20px; padding-left: 1.3em; }
li { margin-bottom: 8px; }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--muted); }

/* Figures with a centered caption */
figure {
  margin: 40px 0;
  padding: 0;
}
figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
figcaption {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  max-width: 560px;
  margin: 12px auto 0;
}

/* Tables: rule under the header row only, muted body text */
.table-wrap { overflow-x: auto; margin: 40px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th {
  font-weight: 500;
  text-align: left;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid var(--text);
  white-space: nowrap;
}
td { color: var(--muted); padding: 8px 16px 8px 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num:last-child, th.num:last-child { padding-right: 0; }
td strong { color: var(--text); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px 0;
}
.stat .value {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.stat .label { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } }

.note { color: var(--muted); font-size: 13px; }
.thanks { color: var(--muted); }

.cta {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  margin: 8px 0 24px;
}
.cta:hover { background: #000; }
button.cta { border: 0; font-family: inherit; cursor: pointer; }

/* Book a Demo modal */
.waitlist {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
body:has(.waitlist[open]) { overflow: hidden; }
.waitlist { overscroll-behavior: contain; }
.waitlist::backdrop {
  background: rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.waitlist .inner { padding: 26px 32px 24px; position: relative; }
.waitlist h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 4px;
}
.waitlist .sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.waitlist .close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.waitlist .close:hover { background: var(--hover); color: var(--text); }
.field { margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) {
  /* Stacked fields already carry a bottom margin, so drop the row gap */
  .field-row { grid-template-columns: 1fr; row-gap: 0; }
  /* iOS Safari zooms into inputs under 16px on focus */
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { font-size: 16px; }
}
.field label.text, .field legend {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 6px;
  padding: 0;
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 12px;
}
.field input[type="text"]:focus, .field input[type="email"]:focus, .field input[type="tel"]:focus, .field textarea:focus {
  outline: none;
  border-color: var(--text);
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-block;
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.pill span:hover { border-color: var(--muted); }
.pill input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field textarea { resize: vertical; line-height: 1.5; height: 68px; }
.other-input { margin-top: 10px; }
.other-input[hidden] { display: none; }
.field .error { color: #a3402f; font-size: 12.5px; margin: 6px 0 0; }
.field .error[hidden] { display: none; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.form-actions .cta { margin: 0; }
.form-actions .cta[disabled] { opacity: 0.6; cursor: default; }
.form-status { font-size: 13px; color: #a3402f; }
.success { text-align: center; padding: 24px 0 8px; }
.success .check {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  line-height: 48px;
}
.success p { color: var(--muted); }

.todo {
  background: var(--todo-bg);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 12.5px;
  color: #6b5410;
}
div.todo { display: block; padding: 12px 16px; margin: 20px 0; line-height: 1.55; }

.site-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  width: calc(100% - 32px);
  max-width: calc(var(--col) - 32px);
  margin: 0 auto;
  padding: 40px 0 48px;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.footer-brand .logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 19px; line-height: 1; }
.footer-brand .logo img { width: 28px; height: 28px; border-radius: 999px; display: block; }
.footer-tag { margin: 0; flex: 1; }
.socials { display: flex; gap: 8px; }
.socials a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
}
.socials a:hover { border-color: var(--muted); }
.socials svg { width: 15px; height: 15px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.footer-copy { font-size: 12.5px; margin: 0; }
.site-footer .footer-mail { font-size: 13px; color: var(--text); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.site-footer .footer-mail:hover { text-decoration-color: currentColor; }
.footer-legal { display: flex; gap: 16px; font-size: 12.5px; }
.footer-legal a { color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--text); }

/* Email addresses copy to the clipboard instead of opening a mail client */
.copy-email {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.copy-email svg { opacity: 0.55; transform: translateY(1px); flex: none; }
.copy-email:hover svg { opacity: 1; }
.copy-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  padding: 8px 14px; border-radius: 6px; background: var(--text); color: var(--bg);
  font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.copy-toast.show { opacity: 1; }

/* Home: the demo video sits inside the reading column. Spacing: 40px around the video,
   64px between sections, 20px from a section label to its content */
.home .layout { padding-top: 72px; padding-bottom: 72px; }
.home h1 { margin-bottom: 24px; }
.home-video { margin: 40px 0 24px; padding: 0; border: 0; }
.home-video video {
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 608;
  object-fit: contain;
  background: #000;
  border-radius: 8px;
}
.section-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin: 64px 0 20px;
}

/* Post cards (home) */
.featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 16px;
}
.featured img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--surface); padding: 12px; }
.featured .card-body { padding: 24px; }
.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.featured:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 1px;
}
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px;
  text-decoration: none;
}
.card:hover { border-color: var(--muted); }
.post-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.post-meta .dot { margin: 0 6px; }
.post-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.post-summary { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; }
.read { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; margin-top: auto; }
.all-posts { display: inline-block; font-size: 13px; margin-top: 20px; }
@media (max-width: 620px) {
  .featured, .cards { grid-template-columns: 1fr; }
}

/* Essay list (home): title, two-line summary and the date on the right, one row per post */
.essay-list { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--rule); }
.essay-list li { margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.essay-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 40px;
  padding: 20px 0;
  text-decoration: none;
  color: var(--text);
}
.el-title { grid-column: 1; font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 17px; line-height: 1.35; }
.essay-list a:hover .el-title { text-decoration: underline; text-underline-offset: 3px; }
.el-summary {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.el-date { grid-column: 2; grid-row: 2; align-self: end; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
  .essay-list a { grid-template-columns: 1fr; }
  .el-date { grid-column: 1; grid-row: auto; }
}

/* Careers: list of open positions; each role page opens with its title and location */
.lede-muted + .section-label { margin-top: 0; }
.positions { margin-top: 0; border-top: 0; }
/* Only a line between roles; the footer's own line closes the list */
.positions li:last-child { border-bottom: 0; }
.positions li:first-child a { padding-top: 0; }
.role-h1 { margin-bottom: 8px; }
.role-meta { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.role-meta .dot { margin: 0 6px; }
.role-meta + h3 { margin-top: 28px; }

/* Blog index */
.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.lede-muted + .featured { margin-bottom: 32px; }
.post-list li { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--rule); }
/* The footer's own rule closes the list */
.post-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.post-list .post-title { font-size: 21px; }
.post-list .post-title a { text-decoration: none; }
.post-list .post-title a:hover { text-decoration: underline; }
.post-list .post-summary { font-size: 14px; margin-bottom: 10px; }
.lede-muted { color: var(--muted); margin: -16px 0 40px; }


/* Ported essays */
.standfirst { color: var(--muted); font-size: 17px; line-height: 1.55; margin: -16px 0 24px; }
.essay-body > div, .essay-body > figure, .essay-body > pre { margin: 40px 0; }
.essay-body > h4 { font-size: 15px; font-weight: 600; margin: 28px 0 8px; }
/* Display math: KaTeX adds its own space above and below */
.essay-body > span { display: block; margin: 0 0 20px; }
/* Captions written as a centered paragraph right under their image */
.essay-body > div + p[class~="text-center"] { margin-top: -28px; }
.essay-body img, .essay-body video { max-width: 100%; height: auto; }
.essay-body h2 { scroll-margin-top: 100px; }
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 56px 0 0;
  font-size: 13px;
}
.pager a { text-decoration: none; display: block; }
.pager a:hover .pager-title { text-decoration: underline; }
.pager .next { text-align: right; grid-column: 2; }
.pager .pager-label { color: var(--muted); display: block; margin-bottom: 4px; }
.pager .pager-title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 16px; line-height: 1.3; }

/* Mission */
.callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 24px;
  margin: 0 0 40px;
}
.callout .post-meta { margin-bottom: 6px; }
.callout .post-title { font-size: 21px; }
.callout p:last-child { margin-bottom: 0; color: var(--muted); }

/* Page intros (mission) */
.page-eyebrow { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.lede { font-size: 17px; line-height: 1.55; color: var(--muted); margin: -16px 0 28px; }

/* Papers (home): thumbnail on the left; title, note, venue and links on the right */
.papers { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; }
.papers li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; margin: 0; padding: 0; }
.paper-thumb { display: block; }
.paper-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.paper-thumb img.crop-right { object-position: 92% 50%; }
.paper-thumb:hover img { border-color: var(--muted); }
.paper-title { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0 0 6px; }
.paper-title a { text-decoration: none; }
.paper-title a:hover { text-decoration: underline; }
.paper-note { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.paper-links { display: flex; gap: 8px; font-size: 13.5px; margin: 0; }
.paper-links span { color: var(--rule); }
.paper-links a { text-underline-offset: 3px; }
.paper-links a:hover { color: var(--accent); }
@media (max-width: 560px) {
  .papers li { grid-template-columns: 1fr; gap: 12px; }
}

}

/* Looping, silent clips inside posts */
figure.clip video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; }  /* clips are recolored to the page background */
figure.clip .clip-frame { position: relative; }
figure.clip video { cursor: zoom-in; }
figure.clip video.dark { border-radius: 4px; background: #0b0b0b; }  /* camera footage stays dark */
.clip-fullscreen {
  position: absolute; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff;
  cursor: pointer; opacity: 0.75; transition: opacity 0.15s;
}
.clip-fullscreen:hover, .clip-fullscreen:focus-visible { opacity: 1; }
/* Names under the five LaMAria panels, lined up with the panels in the clip
   (panels are 328px wide with 24px gaps in a 1760px frame) */
.clip-labels {
  display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 1.36%;
  padding: 0 0.8% 0 0.57%; margin-top: 10px;
  font-size: 13px; color: var(--text); text-align: center; line-height: 1.3;
}
@media (max-width: 520px) { .clip-labels { font-size: 11px; } }

/* A call-to-action button inside a post sits with its lead-in sentence and keeps the
   paragraph rhythm: block-level so its margins collapse like a paragraph's */
article > .cta { display: block; width: fit-content; margin: -8px 0 20px; }