/* Screen theme shared by the home, Markdown layout and standalone case studies. */
:root {
  color-scheme: dark;
  --ink: #242a2a;
  --panel: #2b3232;
  --panel-2: #323a39;
  --text: #eeeae0;
  --muted: #c4c9c0;
  --text-dim: var(--muted);
  --text-faint: #aeb9b2;
  --line: #58615d;
  --border: #58615d;
  --blue: #a9d6df;
  --violet: #edc683;
  --pink: #deada3;
  --cyan: #b2d4bc;
  --yellow: var(--violet);
  --white: var(--panel);
  --off: var(--panel-2);
  --edge: var(--violet);
  --edge-text: #f1d29d;
  --edge-soft: #38362e;
  --cloud: var(--blue);
  --cloud-text: #bce1e5;
  --cloud-soft: #2d3c3d;
  --chalk-stroke: polygon(0 38%, 9% 18%, 31% 30%, 53% 0, 78% 18%, 99% 35%, 100% 60%, 88% 74%, 62% 85%, 42% 71%, 15% 100%, 1% 77%);
}
body {
  background: var(--ink) url("ardesia.webp") repeat;
  background-size: 1200px 800px;
}
::selection { background: #d7bd86; color: #212727; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
nav, .site-nav { background: #232928f5; border-color: var(--border); }
.nav-logo, .footer-logo, .content h2, .stat-number, .hero h1 em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--blue);
}
.nav-logo, .footer-logo { color: var(--text); }
.nav-cv, .private-card { opacity: 1; }
body > .hero .orb { display: none; }
body > .hero > .hero-content {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 0 1.2rem;
  padding: 1rem 0 1.7rem;
}
.stack-sketch {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
}
.hero-copy {
  grid-column: 1;
  grid-row: 1;
  container-type: inline-size;
  text-align: left;
}
body > .hero h1 {
  font-size: clamp(51px, 15.5cqw, 98px);
  line-height: 1;
  white-space: normal;
  margin-bottom: .32em;
}
body > .hero h1 em {
  display: block;
  font-size: clamp(24px, 9.3cqw, 64px);
  margin-top: .12em;
}
body > .hero h1::after { margin-inline: 0; }
body > .hero .tagline { max-width: 54ch; margin: 0; text-wrap: balance; }
body > .hero h1::after, .content h1::after {
  content: "";
  display: block;
  width: 4.4rem;
  height: 5px;
  margin-top: .22em;
  background: var(--violet);
  clip-path: var(--chalk-stroke);
}
.content h1 { white-space: normal; }
.content h1::after { margin-top: .4em; }
body > .section { background: transparent !important; }
.section-label, .whatido-label, .eyebrow { color: var(--violet); }
.clouds-label { color: #000; }
.fwset-accent, .focus-accent, .poc-card::before, .release-banner::before {
  clip-path: var(--chalk-stroke);
}
.release-banner::before { top: 16%; bottom: 16%; }
.release-banner, .release-banner.release-lab, .fwset-card--gold,
body .content :is(.open-featured,.paper-featured,.tldr), .poc-wrap .poc-card {
  background: var(--panel);
  border-color: var(--border);
  border-radius: 4px 7px 5px 3px;
  box-shadow: none;
}
.focus-grid, .fwset-grid, .links { border-radius: 5px; }
.release-banner:hover, .fwset-card--gold:hover { background: var(--off); border-color: var(--blue); }
.fwset-card--gold .fwset-stage, .fwset-card--gold:hover :is(.fwset-step,.fwset-title,.fwset-link) { color: var(--violet); }
.cloud-logo:not(.cloud-dark) { background: #e9e7df; }
.nav-new::after, .new-flag, .content .open-featured .new-flag, .release-go i {
  color: var(--ink); background: var(--violet);
}
.poc-wrap .poc-card h3, .poc-wrap .poc-intro { color: var(--text); }
.poc-wrap .poc-card p, .poc-wrap :is(.poc-label,.poc-foot) { color: var(--muted); }
.poc-wrap .poc-card :is(.sub,.go) { color: var(--blue); }
.poc-wrap .pill { background: var(--off); color: var(--violet); }
.poc-wrap .poc-label::after { background: var(--line); }
.poc-wrap .poc-card::before { background: var(--blue); }
body .content .pdf-link:hover { color: var(--ink); }
.content figure img { background-color: #f7f6ef; }
.page .stage { border-radius: 4px 7px 3px 6px; }
.page .arrow { color: var(--violet); }
.site-nav .links { background: none; border: 0; border-radius: 0; }
/* Only the opening title gets a drawing, even in multi-part papers. */
.illustrated-title > h1:first-of-type {
  padding-right: clamp(5rem, 14vw, 9rem);
  min-height: clamp(3.4rem, 9vw, 5.5rem);
  background: var(--title-sketch) right center / clamp(4.5rem, 13vw, 8.5rem) auto no-repeat;
}
/* Home headings share a text-and-sketch rhythm; the founder's two lines form one title. */
.section :is(.section-label, .whatido-label, .clouds-label),
.founder-heading {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.heading-sketch {
  display: block;
  flex: none;
  width: 4.9rem;
  height: auto;
}
.founder-heading { width: fit-content; margin-bottom: 1rem; }
.founder-heading .about-name { margin-bottom: 0; }
.section-inner:has(.cert-row) :is(.section-label, .clouds-label) { justify-content: center; }
@media (max-width: 700px) {
  .focus-grid { grid-template-columns: 1fr; }
  .heading-sketch { width: 4.2rem; }
}
@media (max-width: 559px) {
  body > .hero > .hero-content { display: flex; flex-direction: column; align-items: stretch; }
  .stack-sketch { order: 1; margin: 1rem 0 0; width: min(100%, 330px); align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-content, .dot { animation: none; }
}
@media (max-width: 768px) {
  nav:not(.site-nav) {
    position: sticky; height: auto; padding: .55rem 1.2rem;
    flex-wrap: wrap; gap: .35rem 1rem;
  }
  nav .nav-links {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem;
  }
  nav .nav-links a { font-size: .68rem; }
  body > .hero { padding-top: 2.6rem; }
}
@media (max-width: 820px) {
  .site-nav .links { display: flex; gap: .4rem .9rem; }
}