/* Lab journal: cream paper, serif text, sans headings and labels, one green
   accent for links, sienna for "under review", ochre highlighter. */

:root {
  --bg: #f7f3ea;
  --bg-alt: #efe9dc;
  --surface: #fffdf8;
  --ink: #1d1b16;
  --ink-soft: #3d3930;
  --muted: #675f51;
  --border: #e3dccd;
  --rule: #d4cbb8;
  --accent: #2f5d46;
  --accent-strong: #234836;
  --accent-soft: #e2ebe1;
  --accent-warm: #8a4519;
  --accent-warm-soft: #f4e5d4;
  --link-line: rgb(47 93 70 / 0.35);
  --mark: #f1e2b3;
  --figure-bg: #ffffff;
  --figure-ink: #675f51; /* figures stay light in both themes, so one value */
  --video-bg: #14130f;
  --shadow-card: 0 1px 2px rgb(64 52 30 / 0.05), 0 10px 24px -14px rgb(64 52 30 / 0.22);

  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-sm: 6px;
  --radius: 12px;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15140f;
    --bg-alt: #1b1a15;
    --surface: #1f1d18;
    --ink: #ede7da;
    --ink-soft: #cfc8b8;
    --muted: #9d9584;
    --border: #312e26;
    --rule: #3d392f;
    --accent: #93c7a6;
    --accent-strong: #b2dcc0;
    --accent-soft: #1f2d25;
    --accent-warm: #e3a974;
    --accent-warm-soft: #33261b;
    --link-line: rgb(147 199 166 / 0.4);
    --mark: #3b3320;
    --figure-bg: #f4f1ea;
    --shadow-card: none;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #15140f;
  --bg-alt: #1b1a15;
  --surface: #1f1d18;
  --ink: #ede7da;
  --ink-soft: #cfc8b8;
  --muted: #9d9584;
  --border: #312e26;
  --rule: #3d392f;
  --accent: #93c7a6;
  --accent-strong: #b2dcc0;
  --accent-soft: #1f2d25;
  --accent-warm: #e3a974;
  --accent-warm-soft: #33261b;
  --link-line: rgb(147 199 166 / 0.4);
  --mark: #3b3320;
  --figure-bg: #f4f1ea;
  --shadow-card: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h3 { font-size: 1.2rem; margin: 0; }

p, li { text-wrap: pretty; }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease),
    background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

a:hover {
  color: var(--accent-strong);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--mark); color: var(--ink); }

code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.3em;
}

strong { color: var(--ink); font-weight: 600; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 10;
}

.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* Layout */

.layout {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  padding: 56px 4px var(--space-6);
  font-family: var(--font-sans);
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

/* the photo sits in a paper mat, like a print pasted into a notebook */
.avatar {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  margin: 0 0 var(--space-5);
}

.sidebar h1 {
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-1);
}

/* the name on inner pages, a link home styled like the home page's h1 */
.sidebar .site-name {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--space-1);
}

.site-name a { color: inherit; text-decoration: none; }

.site-name a:hover { color: var(--accent); }

.sidebar .role {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 2px;
}

.sidebar .subrole {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 var(--space-5);
}

/* two columns keep the section nav above the fold on short laptop screens */
.contact-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  font-size: 0.95rem;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 20px;
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  color: var(--ink-soft);
  text-decoration: none;
}

.contact-list a:hover { color: var(--accent); }

.contact-list svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Email opens a small menu with both addresses */
.email-item { position: relative; }

.email-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
}

.email-toggle:hover,
.email-toggle[aria-expanded="true"] { color: var(--accent); }

.email-menu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  list-style: none;
  margin: 2px 0 0;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.email-menu[hidden] { display: none; }

.email-menu a {
  display: block;
  padding: 6px 12px;
  font-size: 0.84rem;
  white-space: nowrap;
  color: var(--ink-soft);
}

.email-menu a:hover,
.email-menu a:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  margin: 0 0 var(--space-5);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.back-link svg { width: 15px; height: 15px; flex: 0 0 auto; }

.section-nav {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  font-size: 0.95rem;
  font-weight: 500;
}

.section-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0 5px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
}

.section-nav a:hover { color: var(--ink); }

.section-nav a.is-current {
  color: var(--accent);
  border-left-color: var(--accent);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  margin-top: var(--space-5);
  padding: 0 14px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle-icon { width: 15px; height: 15px; flex: 0 0 auto; }

.theme-toggle-icon.icon-moon { display: none; }
.theme-toggle[data-effective="dark"] .icon-sun { display: none; }
.theme-toggle[data-effective="dark"] .icon-moon { display: inline; }

.content {
  padding: 56px 0 var(--space-8);
  min-width: 0;
}

.content > section,
.content > header {
  padding: var(--space-7) 0 0;
  scroll-margin-top: var(--space-4);
}

.content > :first-child { padding-top: 0; }

/* section heading followed by a hairline rule to the right edge */
.content > section > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 1.5rem;
  margin: 0 0 var(--space-5);
}

.content > section > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Labels: small sans capitals for group headings, tags, skill names */

.group-label,
.mentors-label,
.meta-line {
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.group-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin: var(--space-6) 0 var(--space-4);
}

.content > section > h2 + .group-label { margin-top: 0; }

.news-list time,
.plain-list time,
.entry-date {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* About */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 40px;
  align-items: start;
}

.about-text p:last-child { margin-bottom: 0; }

.nobr { white-space: nowrap; }

/* highlighter stroke across the lower half of the line */
.hl {
  color: var(--ink);
  font-weight: 500;
  background: linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 2px;
}

.mentors-aside {
  font-family: var(--font-sans);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) 18px;
}

.mentors-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.mentor-name {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-1);
}

.mentor-role {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

.mentor-role .sep { padding: 0 0.15em; }

.mentors-label.is-sub {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--rule);
}

.mentor-list {
  list-style: none;
  margin: 0 0 var(--space-1);
  padding: 0;
}

.mentor-list .mentor-name { font-size: 1rem; margin: 0 0 2px; }

/* Path: the four stages on one vertical rail, number and stage in a gutter
   to its left, text to its right. The current stages get a filled dot, and
   the rail fades out below the last one. With script (site.js) the stages
   fade in as they scroll into view and the rail fills with the accent up to
   a reading line, lighting each dot it passes. Below 600 px the stage label
   moves above the heading. */

.arc-lead {
  font-size: 1.0625rem;
  margin: 0 0 var(--space-6);
}

.arc {
  --gutter: 9.5rem;
  --rail-x: calc(var(--gutter) + 22px); /* centre of the rail */
  --dot-top: 4px; /* centres the dot on the first line of the heading */
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: arc;
}

.arc::before,
.arc::after {
  content: "";
  position: absolute;
  top: calc(var(--dot-top) + 7px);
  left: calc(var(--rail-x) - 1px);
  width: 2px;
}

.arc::before {
  bottom: 0;
  background: linear-gradient(var(--rule) calc(100% - 72px), transparent);
}

/* site.js sets the span (first dot to last) and the progress along it */
.arc::after {
  display: none;
  height: var(--arc-span, 0px);
  background: var(--accent);
  transform: scaleY(var(--arc-progress, 0));
  transform-origin: top;
}

.arc.is-live::after { display: block; }

.arc-step {
  counter-increment: arc;
  position: relative;
  padding: 0 0 var(--space-7) calc(var(--rail-x) + 26px);
}

.arc-step:last-child { padding-bottom: var(--space-6); }

.arc-step::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--rail-x) - 7px);
  top: var(--dot-top);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}

.arc-step.is-now::before { background: var(--accent); }

.arc-place {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--gutter);
  text-align: right;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.arc-place::before {
  content: counter(arc, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.arc-step h3 { font-size: 1.1rem; margin: 0 0 6px; }

.arc-question {
  font-style: italic;
  color: var(--ink);
  margin: 0 0 10px;
}

.arc-step p:not([class]) {
  font-size: 1rem;
  margin-bottom: 14px;
}

/* scroll reveal: only once site.js has marked the list live */
.arc.is-live .arc-step > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.arc.is-live .arc-step > :nth-child(2) { transition-delay: 70ms; }
.arc.is-live .arc-step > :nth-child(3) { transition-delay: 140ms; }
.arc.is-live .arc-step > :nth-child(4) { transition-delay: 210ms; }
.arc.is-live .arc-step > :nth-child(5) { transition-delay: 280ms; }

.arc.is-live .arc-step.is-shown > * {
  opacity: 1;
  transform: none;
}

.arc.is-live .arc-step::before {
  border-color: var(--rule);
  background: var(--bg);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.arc.is-live .arc-step.is-reached::before {
  border-color: var(--accent);
  animation: arc-dot 0.45s var(--ease);
}

.arc.is-live .arc-step.is-now.is-reached::before { background: var(--accent); }

@keyframes arc-dot {
  50% { transform: scale(1.35); }
}

/* News */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-list li {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: 10px 0;
  border-top: 1px dashed var(--rule);
}

.news-list li:first-child { border-top: none; padding-top: 0; }

.news-list time { padding-top: 0.15rem; }

/* Research cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 24px 22px;
  margin: 0 0 var(--space-5);
  scroll-margin-top: var(--space-4);
}

.card:last-child { margin-bottom: 0; }

.card-figure {
  margin: -4px -6px 20px;
  background: var(--figure-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
}

.card-figure img,
.card-figure video {
  display: block;
  width: 100%;
  height: auto;
}

.card-video video {
  border-radius: 4px;
  background: var(--video-bg);
}

.card-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--figure-ink);
}

/* a paper's status above its title, or the company and year of a project */
.meta-line {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 6px;
}

.meta-line.is-warm { color: var(--accent-warm); }

.card h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.card-authors {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}

.card-venue {
  font-size: 1rem;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

.equal-note {
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: 0.4rem;
}

.card p:not([class]) { font-size: 1.0625rem; }

.card-note {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}

.pub-links,
.arc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.pub-links a,
.arc-links a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.pub-links a:hover,
.arc-links a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Experience */

.timeline {
  border-left: 1px solid var(--rule);
  margin-left: 5px;
}

.entry {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-5);
}

.entry:last-child { padding-bottom: var(--space-1); }

.entry::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0.4rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
}

.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--space-4);
  row-gap: 2px;
  margin-bottom: var(--space-1);
}

.entry h4 {
  font-size: 1.1rem;
  margin: 0;
}

.entry-role {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 0.3rem;
}

.entry-role::before { content: "· "; font-style: normal; color: var(--muted); }

.entry-sub {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: var(--space-3) 0 var(--space-1);
}

.entry-sub a { text-decoration: none; }

.entry-sub a:hover { text-decoration: underline; }

.entry ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 1.0625rem;
}

.entry li { margin-bottom: var(--space-1); }

.entry li::marker { color: var(--muted); }

.entry-text {
  font-size: 1.0625rem;
  margin: 0;
}

/* Projects */

/* Projects sit in rows whose media share one shape (16:9 or portrait), so
   the media line up and the cards in a row share a height. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.project-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.project-grid + .project-grid { margin-top: 20px; }

.project {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  scroll-margin-top: var(--space-4);
}

.project-media {
  margin: 0;
  background: var(--video-bg);
}

/* a diagram in place of a video, on the light figure background */
.project.has-figure .project-media {
  background: var(--figure-bg);
  border-bottom: 1px solid var(--border);
}

.project-media video,
.project-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* the card clips its corners, so keep the focus ring inside the video */
.project-media video:focus-visible { outline-offset: -3px; }

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-4) 20px 20px;
}

.project h3 { font-size: 1.12rem; margin-bottom: 6px; }

.project h3 a { color: var(--ink); text-decoration: none; }

.project h3 a:hover { color: var(--accent); }

.project p {
  font-size: 1rem;
  margin-bottom: 14px;
}

.project-body > p:last-child { margin-bottom: 0; }

/* "Read more" sits at the foot of the card, level across a row */
.project-more {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
}

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.plain-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 6px 0;
  border-top: 1px dashed var(--rule);
}

.plain-list li:first-child { border-top: none; padding-top: 0; }

/* Work pages */

.page-title {
  font-size: 2.2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

.lede {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 44rem;
  margin: 0;
}

.prose { max-width: 46rem; }

.prose ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.2rem;
}

.prose li { margin-bottom: var(--space-2); }

.prose li::marker { color: var(--muted); }

.prose h3 {
  font-size: 1.08rem;
  margin: var(--space-5) 0 var(--space-2);
}

.prose h3:first-child { margin-top: 0; }

.figure {
  margin: var(--space-5) 0;
  background: var(--figure-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3);
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
}

.figure figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--figure-ink);
}

/* Photos: no light box, just the picture with a rounded edge. A grid sets
   several side by side; the files share one shape, so rows stay level. */

.photo { margin: var(--space-5) 0; }

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--bg-alt);
}

.photo figcaption {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.photo-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.photo-grid figure { margin: 0; }

.photo-grid figure figcaption { margin-top: 6px; }

/* terminal output, dark in both themes like a real console */
.terminal {
  margin: var(--space-5) 0;
  padding: var(--space-4) 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: #e6dfd0;
  background: #1f1d18;
  border-radius: 8px;
}

.terminal .dim { color: #9d9584; }

.page-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
}

.page-nav a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  text-decoration: none;
}

.page-nav span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-nav .is-next { text-align: right; grid-column: 2; }

.not-found {
  max-width: 36rem;
  margin: 0 auto;
  padding: 18vh var(--space-5) var(--space-8);
  font-family: var(--font-sans);
}

/* Footer */

footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--rule);
  background: var(--bg-alt);
  font-family: var(--font-sans);
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px var(--space-5) 30px;
  font-size: 0.92rem;
}

.footer-inner p { margin: 0 0 var(--space-1); }


/* Responsive */

@media (max-width: 1040px) {
  .project-grid.is-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .mentors-aside { justify-self: start; min-width: 240px; }
}

@media (max-width: 860px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 var(--space-4);
  }

  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--space-6) 0 var(--space-2);
  }

  .sidebar-inner {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 20px;
    align-items: center;
  }

  .avatar {
    grid-row: span 2;
    margin: 0;
    padding: 5px;
  }

  .sidebar .subrole { margin-bottom: var(--space-2); }

  .sidebar-inner.is-compact { display: block; }

  .back-link { margin-bottom: var(--space-3); }

  .contact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
    margin: 0;
  }

  .section-nav {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 18px;
    margin-top: 20px;
    padding-top: 10px;
    border-left: none;
    border-top: 1px solid var(--rule);
  }

  .section-nav a {
    padding: 6px 0;
    margin-left: 0;
    border-left: none;
  }

  .section-nav a.is-current {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.4em;
  }

  .theme-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--space-3);
  }

  .content { padding-top: var(--space-6); }

  .footer-inner { padding: 22px var(--space-4) 26px; }
}

@media (max-width: 600px) {
  body { font-size: 1.0625rem; }

  .sidebar-inner { grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--space-4); }

  .avatar { grid-row: auto; padding: 4px; }

  .sidebar h1,
  .sidebar .site-name { font-size: 1.5rem; }

  .contact-list { grid-column: 1 / -1; margin-top: var(--space-4); }

  .section-nav { gap: 0 14px; font-size: 0.9rem; }

  .content > section,
  .content > header { padding-top: 40px; }

  .content > :first-child { padding-top: 0; }

  .content > section > h2 { font-size: 1.35rem; margin-bottom: 20px; }

  .mentors-aside { justify-self: stretch; min-width: 0; }

  .card { padding: var(--space-4) var(--space-4) 18px; }

  .card-figure { margin: 0 0 14px; padding: var(--space-2); }

  .card h3 { font-size: 1.15rem; }

  .card p:not([class]) { font-size: 1rem; }

  .news-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .arc { --rail-x: 7px; --dot-top: 1px; }

  .arc-step { padding: 0 0 var(--space-6) 30px; }

  .arc-place {
    position: static;
    width: auto;
    text-align: left;
    margin: 0 0 var(--space-2);
  }

  .arc-place::before {
    content: counter(arc, decimal-leading-zero) " · ";
    display: inline;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .project-grid,
  .project-grid.is-three { grid-template-columns: minmax(0, 1fr); }

  .page-title { font-size: 1.8rem; }

  .lede { font-size: 1.1rem; }

  /* diagrams keep a readable size and scroll sideways inside their box */
  .figure { padding: var(--space-2); overflow-x: auto; }

  .figure img { width: 640px; max-width: none; }

  .page-nav { grid-template-columns: minmax(0, 1fr); }

  .page-nav .is-next { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; }
}

@media print {
  .sidebar { position: static; height: auto; }
  .theme-toggle, .section-nav, .skip-link { display: none; }
  .layout { grid-template-columns: 200px 1fr; gap: 32px; }
  .card, .project, .mentors-aside, .avatar { box-shadow: none; }
  .arc.is-live .arc-step > * { opacity: 1; transform: none; }
  .arc.is-live::after { display: none; }
}