/* base.css: page layout for ecopter.ai (source: ~/ecopter.ai-site/site/, built into www/css/site.css).
   theme.css sets the variables and the home hero; the top bar lives in bar.css (also injected into the decks). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--body-size, 17px)/1.6 var(--body); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: var(--display-weight, 600); line-height: 1.12; }
p { margin: 0; }

main { display: block; }
main > section, main > article, main > nav.tabs, main > .branch-head { max-width: var(--wide); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
main > section + section { margin-top: var(--gap); }

/* ---- the two missions ---- */
.branches { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 4vw, 56px); }
.branch { display: grid; grid-template-columns: clamp(96px, 12vw, 150px) 1fr; gap: 20px; align-items: start; }
.branch .patch img { width: 100%; height: auto; border-radius: 50%; }
.branch h2 { font-size: clamp(26px, 3vw, 36px); }
.branch h2 a { text-decoration: none; }
.branch h2 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.branch .kind { color: var(--mute); margin: 2px 0 10px; }
.parts { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.parts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.parts small, .further small { color: var(--mute); font-size: 14px; text-align: right; }
.soon { color: var(--mute); }
@media (max-width: 820px) { .branches { grid-template-columns: 1fr; gap: 48px; } }

/* ---- roles table ---- */
.roles h2, .core h2 { font-size: clamp(26px, 3.2vw, 40px); }
.lede { color: var(--mute); margin-top: 8px; max-width: 62ch; }
.tablewrap { margin-top: 24px; }
.roles table { width: 100%; border-collapse: collapse; }
.roles th, .roles td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; border-top: 1px solid var(--rule); }
.roles thead th { border-top: 0; padding-bottom: 10px; font-weight: 600; }
.roles thead td { border-top: 0; }
.roles tbody th { width: 28%; font-weight: 600; }
.roles tbody th small { display: block; font-weight: 400; color: var(--mute); font-size: 15px; margin-top: 4px; }
.roles .sar { color: var(--sar); } .roles .fire { color: var(--fire); }
@media (max-width: 700px) {
  .roles thead { display: none; }
  .roles table, .roles tbody, .roles tr, .roles th, .roles td { display: block; width: auto; }
  .roles tbody th { width: auto; padding-bottom: 6px; }
  .roles td { border-top: 0; padding: 6px 0 6px 14px; border-left: 3px solid; }
  .roles td:nth-of-type(1) { border-color: var(--sar); }
  .roles td:nth-of-type(2) { border-color: var(--fire); margin-bottom: 10px; }
}

/* ---- common core ---- */
.core-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.core .item { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.core .item h3 { font-size: 21px; }
.core .item p { color: var(--mute); font-size: 15px; }
.core .item:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.core .item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.core .ccr img { object-fit: contain; background: #000; }
.gate { color: var(--mute); font-size: 15px; margin-top: 24px; }
@media (max-width: 960px) { .core-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .core-grid { grid-template-columns: 1fr; } }

/* ---- inner pages ---- */
.branch-head { display: flex; align-items: center; gap: 20px; margin-top: clamp(24px, 5vh, 56px); }
.branch-head img { width: clamp(72px, 9vw, 112px); height: auto; border-radius: 50%; }
.branch-head h1 { font-size: clamp(34px, 5vw, 60px); }
.branch-head p { color: var(--mute); margin-top: 4px; }
nav.tabs { margin-top: 28px; }
nav.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 28px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
nav.tabs a, nav.tabs .soon { display: inline-block; padding: 10px 0; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.tabs a[aria-current] { border-bottom-color: var(--accent); }
nav.tabs .soon { cursor: default; }
.prose { margin-top: 36px; }
.prose > * { max-width: 68ch; }
.prose > figure.wide { max-width: none; margin: 0 0 40px; }
.prose figure img { width: 100%; height: auto; }
.prose figcaption { color: var(--mute); font-size: 14px; margin-top: 8px; }
.prose h1 { font-size: clamp(34px, 5vw, 60px); margin: clamp(8px, 3vh, 32px) 0 28px; }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 40px 0 12px; }
.prose p + p { margin-top: 14px; }
.prose ol.steps { padding-left: 1.4em; margin: 0 0 16px; }
.prose ol.steps li { margin-bottom: 8px; padding-left: 4px; }
.further { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.further li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.about figure.video { max-width: 900px; margin: 0 0 36px; }
.about video { width: 100%; height: auto; background: #000; }
@media (orientation: portrait) { .about figure.video { max-width: 420px; } }
.about blockquote { margin: 0 0 28px; padding: 0; }
.about blockquote p { font-family: var(--display); font-size: clamp(24px, 3vw, 34px); line-height: 1.25; }
.about blockquote footer { color: var(--mute); margin-top: 8px; font-size: 15px; }

/* ---- footer: the site map, on every page ---- */
footer.site { margin-top: var(--gap); border-top: 1px solid var(--rule); padding: 40px 16px 32px; }
footer.site > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tree h2 { font-family: var(--body); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree li { padding: 3px 0; font-size: 15px; }
.tree a { color: var(--mute); text-decoration: none; }
.tree a:hover { color: var(--ink); text-decoration: underline; }
.tree .soon { opacity: .55; }
.partners { display: flex; align-items: center; gap: 32px; margin-top: 36px; }
.partners img { height: 64px; width: auto; }
.joint { color: var(--mute); font-size: 15px; margin-top: 18px; }
.copy { color: var(--mute); font-size: 13px; margin-top: 6px; opacity: .8; }
@media (max-width: 600px) { .tree { grid-template-columns: 1fr 1fr; } .tree > div:last-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { nav.tabs ul { gap: 4px 20px; } nav.tabs a, nav.tabs .soon { font-size: 16px; } }

/* ---- generated pages added for the live site ---- */
.prose .sub { color: var(--mute); margin: -16px 0 28px; }
.prose h2.first { margin-top: 0; }
.prose figure.film video { width: 100%; height: auto; background: #000; aspect-ratio: 16 / 9; }
@media (orientation: portrait) { .prose figure.film video { aspect-ratio: auto; max-height: 82vh; width: auto; max-width: 100%; margin: 0 auto; } }
.prose .further { margin-bottom: 8px; }
.library h3.group { font-family: var(--display); font-size: 26px; margin: 34px 0 6px; color: var(--mute); }
.library .paper { border-top: 1px solid var(--rule); padding: 18px 0 20px; }
.library .paper h4 { margin: 0; font-size: 20px; font-family: var(--body); font-weight: 600; }
.library .paper .kicker { color: var(--mute); font-size: 15px; margin: 2px 0 8px; }
.library .paper .meta { color: var(--mute); font-size: 14px; margin-top: 8px; }

/* theme A, Night shift (chosen 2026-11-06): photography first, fire-service signage type. */
:root {
  --bg: #000; --ink: #efe9e1; --mute: #a69d92; --rule: #2b2521; --panel: #15110e;
  --fire: #ff6a2b; --sar: #79d892; --accent: #ff6a2b; --focus: #ffd27a;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif; --display-weight: 800;
  --body: "Public Sans", system-ui, sans-serif; --body-size: 17px;
  --wide: 1240px; --gap: clamp(72px, 11vh, 128px);
}

/* hero: two halves of one picture, each a door */
main > .hero { max-width: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg); }
.hero .half { position: relative; display: block; overflow: hidden; text-decoration: none; min-height: min(78vh, 760px); }
.hero .half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hero .sar img { object-position: 30% 50%; }
.hero .fire img { object-position: 50% 45%; }
.hero .half::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.66) 100%); }
.hero .h { position: absolute; z-index: 1; left: clamp(16px, 3vw, 44px); right: 16px; bottom: clamp(20px, 5vh, 52px); display: flex; flex-direction: column; gap: 6px; }
.hero .what { font-weight: 600; font-size: 17px; }
.hero .sar .what { color: var(--sar); } .hero .fire .what { color: var(--fire); }
.hero .big { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 6.4vw, 104px); line-height: .92; color: #fff; max-width: 9ch; }
.hero .half:hover img { transform: scale(1.03); }
.hero .half:focus-visible { outline-offset: -4px; }
@media (max-width: 720px) {
  main > .hero { grid-template-columns: 1fr; }
  .hero .half { min-height: min(56vh, 480px); }
}
@media (prefers-reduced-motion: reduce) { .hero .half img { transition: none; } }

.intro { margin-top: clamp(48px, 8vh, 88px); display: grid; grid-template-columns: 5fr 6fr; gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.intro h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: .98; }
.intro p { font-size: 20px; color: var(--ink); max-width: 46ch; }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; } }

.branch h2 { font-size: clamp(32px, 3.6vw, 46px); }
.branch.sar h2 a:hover { color: var(--sar); } .branch.fire h2 a:hover { color: var(--fire); }
.roles { background: var(--panel); padding-top: 48px; padding-bottom: 40px; }
main > .roles { max-width: none; padding-left: max(16px, calc((100vw - var(--wide)) / 2 + 16px)); padding-right: max(16px, calc((100vw - var(--wide)) / 2 + 16px)); }
.roles tbody th { font-family: var(--display); font-size: 28px; font-weight: 800; }
.roles tbody th small { font-family: var(--body); }
.core .item h3 { font-size: 26px; }
.core .item.papers, .core .item.about { border-top: 3px solid var(--rule); padding-top: 14px; }
.core .item.papers:hover, .core .item.about:hover { border-top-color: var(--fire); }
.branch-head h1, .prose h1 { font-size: clamp(44px, 6vw, 80px); line-height: .95; }
.prose h2 { font-size: clamp(28px, 3vw, 36px); }
.tree h2 { color: var(--ink); }