:root {
  color-scheme: light;
  --paper: #fbfbf9;
  --ink: #1d1d1b;
  --muted: #6f6d67;
  --faint: #99968f;
  --measure: 760px;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: "SF Pro Text", Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

html[data-lang="en"] .lang-sr,
html[data-lang="sr"] .lang-en { display: none !important; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #aaa79f;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover,
a:focus-visible { text-decoration-color: currentColor; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 50px;
  background: rgba(251, 251, 249, .94);
  backdrop-filter: blur(12px);
}

.site-nav {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 0 1rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  position: relative;
  padding: .82rem .12rem;
  color: #272725;
  font-size: .79rem;
  text-decoration: none;
}

.nav-links a[aria-current="page"] { font-weight: 600; }
.nav-links a[aria-current="page"]::after {
  position: absolute;
  right: .12rem;
  bottom: .48rem;
  left: .12rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.language-switch {
  position: absolute;
  right: clamp(1rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  gap: .38rem;
  color: #aaa79f;
  font-size: .67rem;
  letter-spacing: .07em;
}

.language-switch button {
  border: 0;
  padding: .45rem .08rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.language-switch button:hover,
.language-switch button:focus-visible,
.language-switch button.is-active { color: var(--ink); }

main {
  width: min(100% - 3rem, var(--measure));
  min-height: calc(100svh - 50px);
  margin: 0 auto;
  padding: 3.8rem 0 4rem;
}

.home-page {
  display: flex;
  width: min(100% - 3rem, 820px);
  flex-direction: column;
  padding-top: clamp(2.5rem, 7vh, 5.5rem);
  padding-bottom: 2.25rem;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) 196px;
  gap: clamp(2.5rem, 8vw, 5rem);
  align-items: center;
  justify-content: center;
  margin: auto 0;
}

.home-copy { padding: 0; }

.home-intro-text,
.home-focus {
  max-width: 520px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.68;
}

.home-intro-text { color: #292825; }
.home-intro-text a:first-child { font-weight: 600; }
.home-focus {
  margin-top: 1rem;
  color: #55534e;
  font-size: .94rem;
}

.home-actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.1rem;
  font-size: .82rem;
}

.home-visual {
  position: relative;
  width: 196px;
}
.home-visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: 196px;
  height: 252px;
  object-fit: cover;
  object-position: 52% center;
}

.home-ambient {
  position: absolute;
  z-index: 1;
  right: -4.3rem;
  bottom: -4.4rem;
  width: 300px;
  height: 110px;
  opacity: .42;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 55% 45%, #000 22%, rgba(0,0,0,.7) 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 55% 45%, #000 22%, rgba(0,0,0,.7) 58%, transparent 100%);
}

.project-list,
.project-grid,
.essay-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3.2rem;
  color: #89867f;
  font-size: .72rem;
}

.home-page .site-footer {
  margin-top: clamp(3rem, 8vh, 5.5rem);
}

.site-footer p { margin: 0; }
.footer-links { display: flex; gap: .85rem; }
.footer-links a { text-decoration: none; }

.page-heading {
  margin: 0 0 2.4rem;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.projects-page { width: min(100% - 3rem, 780px); }

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.project-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1.3rem;
  min-width: 0;
  align-items: start;
}

.project-card-art {
  display: block;
  overflow: hidden;
  background: #f1eee6;
  text-decoration: none;
}

.project-card-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: filter 180ms ease, transform 180ms ease;
}

.project-card-art:hover img,
.project-card-art:focus-visible img {
  filter: contrast(1.025);
  transform: scale(1.004);
}

.project-card-copy {
  height: 227px;
  overflow: hidden;
  padding: .32rem 0;
}

.project-card-heading {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  justify-content: space-between;
}

.project-card-heading h2 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
}

.project-card-heading span {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}

.project-card-heading span { white-space: nowrap; }

.project-card-summary {
  margin: .38rem 0 0;
  color: #3f3e3a;
  font-size: .84rem;
  line-height: 1.55;
}

.project-card-summary strong { font-weight: 600; }

.project-card-excerpt {
  margin: .58rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.52;
}

.project-list li { margin-bottom: 1.15rem; }

.project-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: baseline;
}

.project-line p { margin: 0; font-size: .91rem; }
.project-line a { font-weight: 600; }
.project-line .summary { margin-left: .28rem; color: var(--muted); }
.project-line small { color: var(--faint); font-size: .7rem; white-space: nowrap; }

.article-page,
.project-page { max-width: 740px; }

.article-header { margin-bottom: 2rem; }
.article-header h1 {
  margin: 0;
  font-size: 1.62rem;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.22;
}
.article-header p,
.article-header time {
  display: block;
  margin-top: .55rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

.project-page .article-header { margin-bottom: 1.05rem; }

.project-hero-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0 0 2rem;
  background: #f1eee6;
}

.project-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prose { color: #33322f; font-size: 1.055rem; line-height: 1.76; }
.prose p { margin: 0 0 1.18rem; }
.prose h2 {
  margin: 2.35rem 0 .65rem;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.35;
}
.prose ul,
.prose ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.prose pre {
  position: relative;
  overflow-x: auto;
  margin: 1.4rem 0;
  padding: 2.45rem 1.1rem 1.15rem;
  border: 1px solid #2d2d2a;
  border-radius: 7px;
  background: #1f1f1c;
  box-shadow: 0 9px 24px rgba(24, 24, 22, .08);
  color: #efeee8;
  font-size: .86rem;
  line-height: 1.58;
  tab-size: 4;
}
.prose pre::before {
  position: absolute;
  top: .7rem;
  left: 1.1rem;
  color: #918f88;
  content: attr(data-language);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.prose code { padding: .08em .22em; background: #f0efea; font-size: .9em; }
.prose pre code { padding: 0; background: transparent; color: inherit; font-size: inherit; }
.code-copy {
  position: absolute;
  top: .48rem;
  right: .55rem;
  padding: .2rem .46rem;
  border: 1px solid #45443f;
  border-radius: 4px;
  background: transparent;
  color: #aaa8a0;
  cursor: pointer;
  font: inherit;
  font-size: .6rem;
}
.code-copy:hover,
.code-copy:focus-visible { border-color: #817f77; color: #f2f1eb; }
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1.25rem 0 1.4rem;
  padding: .35rem .08rem;
}
.prose .katex { font-size: 1.02em; }
.prose blockquote {
  margin: 1.25rem 0;
  padding-left: 1rem;
  border-left: 2px solid #c9c7c0;
  color: var(--muted);
}
.prose img {
  display: block;
  width: 100%;
  height: auto;
  margin: 1.45rem 0 .45rem;
  border: 1px solid #e2e1dc;
}
.prose img + em {
  display: block;
  margin: 0 0 1.45rem;
  color: var(--muted);
  font-size: .81rem;
  line-height: 1.58;
}
.prose table {
  width: 100%;
  margin: 1.25rem 0 1.5rem;
  border-collapse: collapse;
  font-size: .91rem;
}
.prose th,
.prose td {
  border-bottom: 1px solid #deddd7;
  padding: .42rem .55rem .42rem 0;
  text-align: left;
  vertical-align: top;
}
.prose th { color: var(--ink); font-weight: 600; }

.project-visual {
  margin: 1.8rem 0 2rem;
  color: var(--ink);
}

.visual-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: .65rem;
}

.visual-heading strong {
  font-size: .96rem;
  font-weight: 600;
}

.visual-heading span {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
  text-align: right;
}

.project-visual figcaption {
  margin-top: .6rem;
  color: var(--muted);
  font-size: .81rem;
  line-height: 1.58;
}

.gif-visual img {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f8f5;
}

.network-stage {
  position: relative;
  min-height: 300px;
  aspect-ratio: 16 / 8.4;
  overflow: hidden;
  background: #f8f8f5;
}

.network-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.network-readout,
.network-detection {
  position: absolute;
  top: .72rem;
  z-index: 2;
  display: flex;
  gap: .55rem;
  align-items: center;
  color: #77746d;
  font-size: .65rem;
  pointer-events: none;
}

.network-readout { left: .78rem; }
.network-readout span:first-child { color: var(--ink); font-weight: 600; }
.network-detection { right: .78rem; color: #a64037; }

.fire-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}

.fire-panel {
  min-width: 0;
  padding: .65rem;
  background: #f7f7f4;
}

.fire-panel > div {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .4rem;
  font-size: .68rem;
}

.fire-panel > div strong { font-weight: 600; }
.fire-panel > div span { color: var(--faint); font-size: .62rem; }

.fire-panel svg {
  display: block;
  width: 100%;
  height: auto;
  background:
    linear-gradient(rgba(23, 23, 22, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 22, .025) 1px, transparent 1px);
  background-size: 100px 100px;
}

[data-fire-polygons] path {
  vector-effect: non-scaling-stroke;
  stroke-width: .8;
}

.fire-cell2fire [data-fire-polygons] path {
  fill: rgba(166, 64, 55, .18);
  stroke: rgba(146, 50, 42, .72);
}

.fire-farsite [data-fire-polygons] path {
  fill: rgba(154, 119, 64, .2);
  stroke: rgba(126, 91, 38, .75);
}

.fire-ignition {
  fill: #171716;
  stroke: #fff;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.fire-controls {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  margin-top: .65rem;
  color: var(--muted);
  font-size: .66rem;
}

.fire-controls input {
  width: 100%;
  accent-color: #292826;
}

.series-legend {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: .9rem 0 .25rem;
  color: var(--muted);
  font-size: .72rem;
}

.series-legend span { display: inline-flex; gap: .35rem; align-items: center; }
.series-legend i { width: 1rem; height: 2px; background: currentColor; }
.series-observed { color: #171716; }
.series-cell2fire { color: #a64037; }
.series-farsite { color: #92703a; }
.series-lsa { color: #171716; }
.series-baseline { color: #96938b; }
.series-primary { color: #171716; }
.series-secondary { color: #718779; }
.series-tertiary { color: #a26b57; }

.series-plot-visual svg { display: block; width: 100%; height: auto; }
.series-grid line { stroke: #deddd7; stroke-width: 1; }
.series-grid text { fill: #77746d; font-size: 11px; font-family: inherit; }
.series polyline { fill: none; stroke: currentColor; stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.series circle { fill: #fff; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }

.dot-plot,
.bar-plot { margin-top: .8rem; }

.dot-plot-row {
  display: grid;
  grid-template-columns: 9.8rem minmax(0, 1fr) 2rem;
  gap: .75rem;
  align-items: center;
  min-height: 2.15rem;
  font-size: .82rem;
}

.dot-plot-row > span { color: #56544f; }
.dot-plot-row > strong { font-size: .8rem; font-weight: 500; }

.dot-plot-row > i {
  position: relative;
  display: block;
  height: 1px;
  background: #dfded8;
}

.dot-plot-row > i::before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--plot-position);
  height: 1px;
  background: #aaa79f;
  content: "";
}

.dot-plot-row > i b {
  position: absolute;
  top: 50%;
  left: var(--plot-position);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #74716b;
  transform: translate(-50%, -50%);
}

.dot-plot-row.is-highlight > span,
.dot-plot-row.is-highlight > strong { color: var(--ink); font-weight: 600; }
.dot-plot-row.is-highlight > i::before,
.dot-plot-row.is-highlight > i b { background: var(--ink); }

.plot-axis {
  display: grid;
  grid-template-columns: 9.8rem minmax(0, 1fr) 2rem;
  gap: .75rem;
  margin-top: .15rem;
  color: var(--faint);
  font-size: .68rem;
}

.plot-axis > div { display: flex; justify-content: space-between; }

.bar-plot-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 4.4rem;
  gap: .8rem;
  align-items: center;
  margin-bottom: 1.05rem;
  font-size: .82rem;
}

.bar-plot-row > div { display: flex; flex-direction: column; line-height: 1.35; }
.bar-plot-row small { margin-top: .15rem; color: var(--muted); font-size: .7rem; }
.bar-plot-row > i { display: block; height: 8px; background: #e5e4df; }
.bar-plot-row > i b { display: block; width: var(--bar-width); height: 100%; background: #85827b; }
.bar-plot-row.is-highlight > i b { background: var(--ink); }
.bar-plot-row > strong { font-size: .77rem; font-weight: 500; white-space: nowrap; }

.heat-grid { overflow-x: auto; margin-top: .85rem; }
.heat-columns,
.heat-row {
  display: grid;
  grid-template-columns: minmax(9.5rem, 1.45fr) repeat(var(--heat-columns), minmax(3.1rem, 1fr));
  gap: 3px;
  min-width: 560px;
}
.heat-columns { margin-bottom: 3px; color: var(--faint); font-size: .68rem; text-align: center; }
.heat-row { margin-bottom: 3px; align-items: stretch; }
.heat-row > strong {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding-right: .55rem;
  color: #56544f;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.25;
}
.heat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  background: rgba(120, 117, 110, .08);
  color: #4f4d48;
  font-size: .7rem;
  font-style: normal;
}
.heat-cell.is-faster { background: rgba(73, 112, 91, var(--heat-alpha)); }
.heat-cell.is-slower { background: rgba(166, 75, 62, var(--heat-alpha)); }
.heat-cell.is-neutral { background: rgba(120, 117, 110, .1); }
.heat-cell.is-empty { color: #aaa79f; }
.heat-cell.is-strong { color: #fff; }

.scatter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin: .8rem 0 .3rem;
  color: var(--muted);
  font-size: .7rem;
}
.scatter-legend span { display: inline-flex; gap: .35rem; align-items: center; }
.scatter-legend i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.scatter-search { color: #718779; }
.scatter-pattern { color: #9b9891; }
.scatter-tuned { color: #a64037; }
.scatter-visual svg { display: block; width: 100%; height: auto; }
.scatter-grid line { stroke: #e1e0da; stroke-width: 1; }
.scatter-grid .scatter-zero { stroke: #8e8b84; stroke-width: 1.2; }
.scatter-grid text { fill: #77746d; font-family: inherit; font-size: 11px; }
.scatter-points circle { fill: currentColor; opacity: .78; stroke: #fbfbf9; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.scatter-points .scatter-search { color: #718779; }
.scatter-points .scatter-pattern { color: #9b9891; }
.scatter-points .scatter-tuned { color: #a64037; opacity: 1; }

.essay-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: .94rem;
}
.essay-list small { color: var(--faint); font-size: .7rem; white-space: nowrap; }

.about-page { width: min(100% - 3rem, 780px); }
.about-layout {
  display: flow-root;
}
.about-photo {
  float: right;
  width: 210px;
  margin: 0 0 .8rem 1.65rem;
}
.about-photo img {
  display: block;
  width: 210px;
  height: 267px;
  object-fit: cover;
  object-position: 52% center;
}
.about-photo figcaption { margin-top: .55rem; color: var(--faint); font-size: .68rem; }
.about-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  margin: 0 0 .9rem;
}
.about-heading .page-heading {
  margin: 0;
}
.about-resume-link {
  color: var(--ink);
  font-size: .78rem;
  white-space: nowrap;
}
.about-copy .prose { font-size: .97rem; line-height: 1.68; }

.not-found { text-align: center; }

@media (max-width: 700px) {
  .nav-links { gap: .72rem; }
  .nav-links a { padding-inline: .08rem; font-size: .72rem; }
  .language-switch { right: .8rem; font-size: .62rem; }
  main,
  .about-page { width: min(100% - 2.25rem, var(--measure)); padding-top: 2.8rem; }
  .projects-page { width: min(100% - 2.25rem, 780px); }
  .home-page { width: min(100% - 2.25rem, var(--measure)); padding-top: 2.6rem; }
  .home-grid { grid-template-columns: 1fr; gap: 1.8rem; margin: 0; }
  .home-visual { width: min(100%, 320px); margin: 0 auto; }
  .home-visual img { width: 100%; height: 270px; object-position: 50% 42%; }
  .home-ambient { right: -2rem; bottom: -3.3rem; width: calc(100% + 2rem); }
  .home-page .site-footer { margin-top: 3.4rem; }
  .project-line { grid-template-columns: 1fr; gap: .1rem; }
  .project-line small { margin-top: .15rem; }
  .about-photo { float: none; width: min(72vw, 260px); margin: 0 0 1.35rem auto; }
  .about-photo img { width: min(78vw, 300px); height: min(99vw, 382px); }
  .about-heading { align-items: flex-start; }
}

@media (max-width: 480px) {
  .project-grid { gap: 1.55rem; }
  .project-card { grid-template-columns: 104px minmax(0, 1fr); gap: .95rem; }
  .project-card-heading { align-items: flex-start; }
  .project-card-heading h2 { font-size: .88rem; }
  .project-card-heading span { padding-top: .14rem; font-size: .74rem; }
  .project-card-copy { height: 139px; padding: .16rem 0; }
  .project-card-summary { margin-top: .28rem; font-size: .75rem; line-height: 1.45; }
  .project-card-excerpt { display: none; }
  .project-hero-art { width: 100%; margin-bottom: 1.6rem; }
  .project-line .summary { display: none; }
  .article-header h1 { font-size: 1.4rem; }
  .visual-heading { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .visual-heading span { text-align: left; }
  .network-stage { min-height: 220px; aspect-ratio: 4 / 3; }
  .network-readout { top: .55rem; left: .58rem; flex-direction: column; gap: 0; align-items: flex-start; }
  .network-detection { top: .55rem; right: .58rem; }
  .dot-plot-row { grid-template-columns: 7.2rem minmax(0, 1fr) 1.7rem; gap: .5rem; }
  .plot-axis { grid-template-columns: 7.2rem minmax(0, 1fr) 1.7rem; gap: .5rem; }
  .bar-plot-row { grid-template-columns: 1fr 3.8rem; gap: .45rem .7rem; }
  .bar-plot-row > div { grid-column: 1 / -1; }
  .prose pre { margin-inline: -.35rem; padding-inline: .85rem; font-size: .8rem; }
  .prose pre::before { left: .85rem; }
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }
}