/* Shared by every page. roost.css, lab.css and about.css add each scene. */
:root {
  --ground: #05060b;
  --ink: #f2f4f8;
  --muted: #b4bac8;
  --line: #2a2e40;
  --link: #c9c7ff;
  --display: Syne, Georgia, sans-serif;
  --body: Manrope, "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
}

.look-lab { --ground: #05070e; --ink: #eef2f8; --muted: #bcc4d3; --link: #8ff0dd; --display: "Chakra Petch", sans-serif; --body: "IBM Plex Sans", system-ui, sans-serif; --line: #2c3346; }
.look-about { --ground: #020206; --ink: #f4f4fa; --muted: #b9b9c9; --link: #ffd9a6; --display: "Bricolage Grotesque", sans-serif; --body: "Instrument Sans", system-ui, sans-serif; --line: #22222b; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  position: relative;
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--body);
  overflow-x: hidden;
}

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.site {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 1.75rem;
  padding: 0.625rem var(--gutter);
}

.site div { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 500; text-decoration: none; }
.site a:hover, .site a[aria-current] { text-decoration: underline; text-underline-offset: 0.35em; }
.site .brand { font-family: var(--display); font-weight: 700; }

.meta { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.9375rem; }
.lede { max-width: 42ch; margin: 0.875rem 0 0; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.35; }

.go {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1.5rem;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
}

.go:hover { background: #fff; color: var(--ground); }

/* The chosen project */
.detail { max-width: 1320px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 5rem); }
.picks { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; border-bottom: 1px solid var(--line); }

.pick {
  position: relative;
  min-height: 44px;
  padding: 0.5rem 0;
  background: none;
  border: 0;
  color: var(--muted);
  font: 500 1rem/1.2 var(--body);
  cursor: pointer;
}

.pick:hover { color: #fff; }
.pick.on { color: #fff; font-weight: 700; }
.pick.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: #fff; }

.panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem 4rem; margin-top: 2.5rem; }

/* Added by site.js. Without the script, every panel stays visible and none of this applies.
   The panels share one grid cell, so the area keeps the tallest one's height. The old panel fades out quickly,
   then the new one fades and lifts in, timed with the sky. */
.panels { display: grid; }
.panels > .panel { grid-area: 1 / 1; align-self: start; }
.panels > .panel.out { opacity: 0; visibility: hidden; transform: translateY(10px); }
.panels.ready > .panel { transition: opacity 0.7s ease 0.3s, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s, visibility 0s linear 0s; }
.panels.ready > .panel.out { transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s; }

/* One underline that slides between the buttons, in place of each button's own. */
.picks { position: relative; }
.picks.sliding .pick.on::after { display: none; }
.marker { position: absolute; left: 0; top: 0; height: 2px; background: #fff; pointer-events: none; }
.marker.ready { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), width 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }

/* Pages cross-fade into each other in browsers that support it. Others simply load the next page. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }
nav.site { view-transition-name: site-nav; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .panels.ready > .panel, .panels.ready > .panel.out, .marker.ready { transition: none; }
}
.panel-text { flex: 999 1 32rem; min-width: 0; }
.panel h2 { margin: 0; font: 800 clamp(2rem, 4vw, 3.75rem)/1.05 var(--display); letter-spacing: -0.025em; }
.panel h2 a { color: inherit; text-decoration: none; }
.panel h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.panel-links { flex: 1 1 18rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0; }

.foot { padding: 1.5rem var(--gutter) 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem; }
.foot p { margin: 0 0 0.5rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }

/* Project and policy pages */
.project, .doc { padding: clamp(5rem, 9vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem); }
.project h1 { margin: 0; overflow-wrap: anywhere; font: 800 clamp(2.25rem, 7vw, 6.5rem)/0.95 var(--display); letter-spacing: -0.03em; }
.project .panel-links { margin-top: 1.5rem; }
.doc h1 { max-width: 18ch; margin: 0 0 0.75rem; font: 800 clamp(2.25rem, 5vw, 4rem)/1.05 var(--display); letter-spacing: -0.02em; }
.back { margin: 0 0 1rem; }
.summary { max-width: 44ch; margin: 1.5rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.35; }
.prose { max-width: 66ch; margin-top: 2rem; }
.prose h2 { margin: 2.25rem 0 0.5rem; font-size: 1.3125rem; line-height: 1.3; }
.prose p, .prose ul { margin: 0 0 1rem; }
.prose li { margin-bottom: 0.375rem; }
.prose > :first-child { margin-top: 0; }
code { padding: 0.05em 0.3em; background: #1b1e2d; font-size: 0.92em; overflow-wrap: anywhere; border-radius: 3px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.9688rem; line-height: 1.45; }
th, td { padding: 0.625rem 1rem 0.625rem 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
th { border-top: 0; font-weight: 700; }
td:nth-child(1) { width: 34%; }
td:nth-child(2) { width: 22%; }

/* The line under each main page's title that says what the page is for */
.title .intro { max-width: 54ch; margin: 1rem auto 0; color: var(--ink); font-size: clamp(1rem, 1.4vw, 1.1875rem); font-weight: 400; line-height: 1.55; }

/* On a phone the menu takes two rows, so everything starts below it. */
@media (max-width: 640px) {
  body .title { padding-top: 6.75rem; }
  .project, .doc { padding-top: 7.5rem; }
}

/* Ravens in every scene */
.bird { position: absolute; aspect-ratio: 1; padding: 0; background: none; border: 0; cursor: pointer; transform: translate(-50%, -90.6%); }
.bird svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Project detail pages */
.project .back { margin: 0 0 1rem; }

/* A soft band of the project's own sky behind the top of its page, so clicking through feels like
   going deeper into the same scene. */
.project { position: relative; isolation: isolate; }
.sky-band { position: absolute; inset: 0 0 auto; height: min(36rem, 75vh); z-index: -1; pointer-events: none; opacity: 0.8;
  background: radial-gradient(60% 70% at 78% 0%, color-mix(in srgb, var(--low) 30%, transparent), transparent 72%), linear-gradient(180deg, var(--top) 0%, var(--mid) 40%, transparent 100%); }
.project .prose { margin-top: 2rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2rem 4rem; max-width: 1100px; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.facts:empty { display: none; }
.facts h2 { margin: 0 0 0.875rem; font: 800 1.375rem/1.2 var(--display); }
.facts p { margin: 0; max-width: 60ch; }
.facts ul { margin: 0; padding-left: 1.25rem; }
.facts li { margin-bottom: 0.5rem; }
.facts .stack { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.facts .stack li { margin: 0; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9375rem; }
.project .private { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.125rem; border: 1px dashed var(--line); color: var(--muted); border-radius: 999px; }