/*
  Color system.
  --accent uses Princeton Orange: RGB(234, 113, 37), i.e. #ea7125.
  To change the site color, edit --accent, --accent-dark, and --accent-soft below.
*/
:root {
  color-scheme: light;
  --bg: #f7f4ee;
  --paper: #fffdf9;
  --paper-soft: #fbf8f2;
  --ink: #1f2328;
  --muted: #687076;
  --line: #ded7cc;
  --accent: #ea7125;
  --accent-dark: #b84d00;
  --accent-soft: #fff0e7;
  --shadow: 0 16px 48px rgba(64, 47, 30, 0.08);
  --radius: 18px;
  --max: 1480px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111111;
  --paper: #1a1a1a;
  --paper-soft: #202020;
  --ink: #f2f0eb;
  --muted: #b8b0a7;
  --line: #34302c;
  --accent: #ff9d4d;
  --accent-dark: #ffc49a;
  --accent-soft: #352116;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

:root[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }
button, input, textarea, select { font: inherit; }

html { font-size: 18px; scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 12%, transparent), transparent 30rem),
    linear-gradient(180deg, var(--paper-soft) 0%, var(--bg) 42rem);
  color: var(--ink);
  font-family: optima, sans-serif;
  line-height: 1.62;
}

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-dark); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 1rem;
  padding: .5rem .75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  z-index: 10;
}
.skip-link:focus { left: 1rem; }

.site-header, .site-main, .site-footer { max-width: var(--max); margin: 0 auto; padding-inline: 1.25rem; }
.site-header { padding-top: 2.25rem; padding-bottom: 1.25rem; }
.header-inner {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  grid-template-columns: minmax(0, 1fr);
}
.site-branding { min-width: 0; }
.header-actions { display: grid; gap: .8rem; justify-items: start; }
.site-header h1 { margin: 0; font-family: "Courier New", Courier, monospace; font-size: clamp(2.25rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.05em; white-space: nowrap; }
.site-header h1 a { color: var(--ink); text-decoration: none; }
.subtitle { max-width: 52rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); margin: .65rem 0 0; }
.eyebrow, .section-kicker { margin: 0 0 .4rem; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.site-nav { display: flex; flex-wrap: wrap; gap: .55rem; }
.site-nav a, .button, .pub-links a, .theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .44rem .78rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  text-decoration: none;
  font-weight: 650;
  font-size: .92rem;
}
.theme-toggle { cursor: pointer; font-family: inherit; }
.theme-toggle-icon { font-size: 1.05em; }
.site-nav a:hover, .button:hover, .pub-links a:hover, .site-nav a[aria-current="page"], .theme-toggle:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.site-main { padding-top: 1.25rem; padding-bottom: 4rem; }
section + section, figure + section, section + figure { margin-top: 3.25rem; }

.hero {
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  box-shadow: var(--shadow);
}
.hero h2, .page-title h2, .section-heading h2 { margin: 0; line-height: 1.08; letter-spacing: -.025em; }
.hero-title { font-size: clamp(1.65rem, 2.8vw, 2.55rem); max-width: none; white-space: nowrap; }
.hero p { max-width: 72ch; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 78ch; }
.small-lead { font-size: 1rem; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .72fr); gap: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.stack { display: grid; gap: 1rem; }

.card, .publication, .note-card, .course-card, .prose-card, .table-card, .portrait-card, .callout, .aerial-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: 0 8px 24px rgba(64, 47, 30, .04);
}
.card h3, .publication h3, .note-card h3 { margin-top: 0; line-height: 1.25; }
.card p:last-child, .publication p:last-child, .note-card p:last-child { margin-bottom: 0; }
.publication h3 a, .note-card h3 a { color: var(--ink); text-decoration-thickness: 1px; }
/*
  Compact publication entries.
  HTML pattern:
    <article class="publication">
      <div class="pub-line">
        <h3>Title</h3>
        <p class="meta">authors / journal</p>
        <button class="summary-toggle">[+]</button>
      </div>
      <p class="pub-links">version buttons</p>
      <div class="pub-summary" hidden>summary appears here</div>
    </article>
  The summary is intentionally after .pub-links in the source so it opens below the version buttons.
*/
.publication.compact { box-shadow: none; }
.publication {
  display: block;
  padding: .52rem .78rem;
}
.pub-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .45rem;
  row-gap: .08rem;
}
.publication h3 {
  flex: 0 1 auto;
  min-width: min(100%, 18rem);
  display: inline;
  margin: 0;
  font-size: 1.01rem;
  line-height: 1.23;
  font-weight: 700;
}
.publication .meta {
  flex: 1 1 24rem;
  display: inline;
  margin: 0;
  line-height: 1.25;
}
.publication .meta::before { content: " — "; }
.publication .pub-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin: .18rem 0 0;
  line-height: 1.15;
}
.publication .pub-links a {
  padding: .22rem .56rem;
  font-size: .86rem;
}
.publication .pub-links a.github-date-link {
  white-space: nowrap;
}
.summary-toggle {
  margin-left: auto;
  border: 0;
  padding: 0 .1rem;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-weight: 800;
  line-height: 1.25;
}
.summary-toggle:hover { color: var(--accent-dark); }
.pub-summary {
  margin-top: .36rem;
  padding: .35rem 0 0;
  border-top: 1px dotted var(--line);
}
.pub-summary p { margin-top: 0; margin-bottom: 0; }
.outlook-card, .in-progress-group { padding: 0; }
.outlook-card > summary, .in-progress-group > summary { padding: 1.15rem 1.25rem; }
.details-body { padding: 0 1.25rem 1.15rem; }
.publication .details-body { padding: .25rem 0 0; }

details { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.prose-card details, details.prose-card { margin-top: 0; padding-top: 0; }
summary { cursor: pointer; color: var(--accent); font-weight: 750; }
summary:hover { color: var(--accent-dark); }

/*
  Portrait/aerial panel border toggle.
  In index.html, set the aside class to either:
    media-panel--borderless  = no box/border around the portrait and aerial thumbnail
    media-panel--bordered    = restore the bordered card
*/
.portrait-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; align-self: start; }
.portrait-card.media-panel--borderless {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.portrait-card.media-panel--bordered {
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(64, 47, 30, .04);
}
.portrait { width: 9.5rem; height: 9.5rem; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); margin: 0 auto 1rem; }
.aerial-card { margin-inline: 0; padding: .75rem; }
.aerial-card img { width: 100%; display: block; border-radius: calc(var(--radius) - 6px); }
.aerial-card figcaption { color: var(--muted); font-size: .92rem; padding: .65rem .4rem .1rem; }
.aerial-thumb-link { display: inline-block; margin-top: .7rem; border: 0; border-radius: 0; padding: 0; background: transparent; }
.aerial-thumb { width: min(100%, 13rem); height: auto; display: block; border-radius: 0; margin-inline: auto; }
.hero + section { margin-top: 2.15rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
.section-heading { margin-bottom: 1rem; }
.section-heading.with-link { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.callout { background: linear-gradient(135deg, var(--paper), var(--accent-soft)); }

.table-card { overflow-x: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; min-width: 930px; }
th, td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--paper-soft); font-size: .83rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
tr:last-child td { border-bottom: 0; }
.talks-table .date-col { width: 16rem; }
.talks-table .title-col { width: 40%; }
.talks-table .venue-col { width: auto; }
.talks-table .talk-date { white-space: nowrap; font-variant-numeric: tabular-nums; }

ul { padding-left: 1.25rem; }
li + li { margin-top: .25rem; }

.site-footer { padding-top: 2rem; padding-bottom: 2rem; color: var(--muted); border-top: 1px solid var(--line); font-size: .92rem; }
.site-footer p { margin: .2rem 0; }
.copyleft { font-size: 1.1em; }
.rights-line { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.copyleft-icon { width: 1.05em; height: 1.05em; object-fit: contain; vertical-align: -.15em; }

@media (min-width: 900px) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .header-actions { justify-items: end; }
  .site-nav { justify-content: end; }
}

@media (max-width: 760px) {
  html { font-size: 16px; }
  .grid-2, .card-grid, .card-grid.wide, .columns { grid-template-columns: 1fr; }
  .hero-title { white-space: normal; }
  .section-heading.with-link { display: block; }
  .site-header h1 { font-size: clamp(2.05rem, 12vw, 3rem); }
}

/* Homepage outlook is nested inside the hero so it reads as one compact block. */
.hero .outlook-card { margin-top: 1.1rem; box-shadow: none; background: color-mix(in srgb, var(--paper-soft) 78%, transparent); }
.hero .outlook-card > summary { padding: .75rem .95rem; }
.hero .outlook-card .details-body { padding: 0 .95rem .95rem; }
.hero .outlook-card p, .hero .outlook-card li { font-size: .94rem; }

/* Dark-mode copyleft asset swap. Dark mode is opt-in via the theme toggle. */
.copyleft-mark { display: inline-flex; align-items: center; }
.copyleft-icon-dark { display: none; }
:root[data-theme="dark"] .copyleft-icon-light { display: none; }
:root[data-theme="dark"] .copyleft-icon-dark { display: inline-block; }
.rights-owner { color: var(--ink); }


/* Homepage miscellaneous resource list restored from the old site. */
.resource-list {
  columns: 2 18rem;
  column-gap: 2rem;
  margin: 0;
}
.resource-list li {
  break-inside: avoid;
  margin-bottom: .35rem;
}