/* Daniel Zaltz site theme -- shared across all Quarto pages via _quarto.yml's format.html.css */
/* this is largely LLM generated because I really don't know much about CSS
/*
   Aesthetic pass, v2 -- restrained, typography-led, Tufte-influenced.
   Principles applied throughout:
   - Data-ink / "content-ink" ratio: let type size, weight, and whitespace carry hierarchy
     instead of boxes, pills, and borders.
   - Color used sparingly (green reserved for the site's identity: page titles, links, nav)
     rather than applied to every heading and button.
   - A comfortable reading measure (~ 720px) instead of full browser width.
   - Soft off-white/off-black instead of pure white/black, per Tufte CSS convention.
   - Generous vertical whitespace between sections in place of heavy dividing rules.
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');

:root {
  --ink: #262420;
  --ink-soft: #55524a;
  --paper: #faf8f0;
  --accent: #336638;
  --accent-dark: #1f3d21;
  --rule: rgba(38, 36, 32, 0.12);
  --rule-soft: rgba(38, 36, 32, 0.08);
}

body {
  background-color: var(--paper);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-size: 12.5pt;
  line-height: 1.7;
  color: var(--ink);
}

p {
  margin-bottom: 1.15em;
}

/* comfortable reading measure -- Quarto wraps page content in #quarto-document-content */
#quarto-document-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 12px;
}

/* page titles keep the site's identity color; item-level headings stay quiet ink so that
   hierarchy comes from size and weight, not from repeating the same green everywhere */
h1 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 25pt;
  margin-bottom: 0.3em;
}

h2, h3 {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h2 { font-size: 17pt; }
h3 { font-size: 14pt; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(51, 102, 56, 0.3);
  text-underline-offset: 2px;
}

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

/* header nav (Quarto's built-in Bootstrap navbar) -- same background as the page, quiet,
   understated small-caps text links rather than a loud banner */
.navbar {
  background-color: var(--paper) !important;
  border-bottom: 1px solid var(--rule-soft);
}

/* Quarto's real navbar wrapper is .navbar-container (not Bootstrap's .container/.container-fluid) --
   make sure it spans edge to edge so the brand sits far left and (via navbar.right: in _quarto.yml)
   the links sit far right, instead of both clustering in the middle. */
.navbar .navbar-container {
  max-width: 100% !important;
  width: 100%;
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 6px;
  padding-bottom: 6px;
  position: relative;
}

.navbar-title,
.navbar-brand {
  color: var(--ink) !important;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

.navbar-nav .nav-link {
  color: var(--ink-soft) !important;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  text-decoration: none;
  font-size: 0.92em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.navbar-nav .nav-link:hover {
  color: var(--accent) !important;
}

/* On narrow windows, Bootstrap collapses the nav links into a hamburger toggle -- but its
   default icon is drawn for a dark navbar and was invisible against our light background.
   Redraw it in the site's ink color and make sure the dropped-down menu is readable too. */
.navbar-toggler {
  border-color: rgba(38, 36, 32, 0.35);
  /* pin it to the right edge of .navbar-container directly, rather than relying on flex
     ordering (which wasn't pushing it over) -- this works no matter how the container lays
     out its other children */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(51, 102, 56, 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(38,36,32,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-collapse {
  background-color: var(--paper);
}

.navbar-collapse .navbar-nav .nav-link {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* citation / reference superscripts -- small and quiet, not competing with the prose */
sup a,
.ref-link {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.92em;
}

sup a:hover,
.ref-link:hover {
  color: var(--accent);
}

/* collapsible "Learn more" project entries (projects.qmd) */
.project-card {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule-soft);
}

.project-card:last-child {
  border-bottom: none;
}

.project-card h3 {
  font-size: 19pt;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 14px;
}

/* opportunities.qmd -- flag the "no current openings" line */
.no-openings {
  color: firebrick;
  font-weight: 600;
}

/* teaser + fade-to-gray "learn more" pulldown -- the first paragraph of each project always
   shows in full; the rest previews as a few faded, grayed-out lines behind a soft fade-out,
   with a text button to expand it to full color and full height */
.project-more {
  position: relative;
  margin-top: 4px;
}

.project-more-inner {
  transition: max-height 0.35s ease;
}

.project-more:not(.expanded) .project-more-inner {
  max-height: 3.6em;
  overflow: hidden;
  color: var(--ink-soft);
  -webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 25%, transparent 92%);
}

.project-more.expanded .project-more-inner {
  max-height: 999px;
  overflow: visible;
  color: var(--ink);
}

.project-toggle {
  display: inline-block;
  margin-top: 10px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(51, 102, 56, 0.4);
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.project-more.expanded .label-closed {
  display: none;
}

.project-more:not(.expanded) .label-open {
  display: none;
}

.pub-year-section h3 {
  margin-top: 34px;
  color: var(--accent);
  font-size: 13pt;
  letter-spacing: 0.04em;
}

/* CV embed (bio.qmd) */
.cv-download {
  display: inline-block;
  margin-bottom: 16px;
}

.cv-embed {
  width: 100%;
  margin-top: 8px;
}

.cv-embed iframe {
  width: 100%;
  height: 85vh;
  min-height: 600px;
  border: 1px solid var(--rule);
}

/* media cards (media.qmd) */
.media-feed {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 28px;
}

.media-card {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule-soft);
}

.media-card:last-child {
  border-bottom: none;
}

.media-card h3 {
  font-size: 17pt;
  margin-bottom: 6px;
  font-weight: 600;
}

.media-card .media-meta {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.95em;
  margin-bottom: 10px;
}

.media-icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 6px;
  border-radius: 3px;
}

/* understated "read more" / "listen on..." links, used for both media and project actions --
   a quiet text link with a directional cue rather than a bordered button, so the page reads
   as prose first and interface second */
.media-cta {
  display: inline-block;
  padding: 0;
  background-color: transparent;
  border: none;
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(51, 102, 56, 0.4);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.92em;
  font-style: italic;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

.media-cta::after {
  content: " \2197";
  font-style: normal;
}

.media-cta:hover {
  color: var(--accent-dark) !important;
  border-bottom-color: var(--accent-dark);
}

/* site-wide footer (page-footer in _quarto.yml) */
.nav-footer {
  background-color: var(--paper);
  border-top: 1px solid var(--rule-soft);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 0.8em;
  color: var(--ink-soft);
  padding-top: 18px;
  padding-bottom: 18px;
}

.nav-footer a {
  color: var(--ink-soft);
  text-decoration-color: rgba(85, 85, 85, 0.4);
}

.nav-footer a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}