/* Hugo E. Silva — personal site
   Layout modeled on the brief: sticky sidebar + single-column publication list. */

/* The palette is light in every context. color-scheme pins form controls,
   scrollbars and the pre-paint canvas to light so a reader whose OS is in dark
   mode does not get a dark flash or dark UI chrome around a white page. */
:root {
  color-scheme: light;
  --bg: #fbfaf8;
  --text: #16191f;
  --muted: #59636f;
  --rule: #e5e2db;
  --accent: #1a4f7a;
  --accent-hover: #123a5a;
  --chip-bg: #f3f1ec;
  --chip-border: #e2ded6;
  --rr-bg: #edf4fa;
  --rr-border: #c6dbec;
  --rr-text: #1a4f7a;
  --card: #ffffff;
  --max: 1020px;
  --gutter: 4.75rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

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

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* ---------- Layout ---------- */

.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 20px 72px;
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 44px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 32px;
}

.photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
}

.sidebar-block {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.sidebar-block strong {
  color: var(--text);
  font-weight: 500;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.chip {
  padding: 6px 12px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

/* White, not var(--bg): the page is a warm off-white, so lifting the chip to
   pure white is what makes the hover read. */
.chip:hover {
  background: var(--card);
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ---------- Type ---------- */

h1 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 2.35rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.role {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 22px;
  line-height: 1.5;
}

/* The research areas are not an affiliation, so they sit in their own block
   under the three institutional lines. A gap smaller than the 22px below the
   pair keeps the two reading as one group. */
.role-areas {
  margin-top: 11px;
}

.role:has(+ .role-areas) {
  margin-bottom: 0;
}

.bio p {
  margin: 0 0 14px;
  max-width: 62ch;
}

/* The bio on index.html is a <details>, collapsed by default. These rules only
   bite when a <summary> is present, so the plain <div class="bio"> on
   simplicity.html is left alone. */
.bio > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
  color: var(--accent);
  font-size: 14.5px;
  font-weight: 500;
}

.bio > summary::-webkit-details-marker { display: none; }

.bio > summary:hover { color: var(--accent-hover); }

.bio > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Chevron drawn from two borders: down when closed, up when open. */
.bio > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.bio[open] > summary::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.bio[open] > summary { margin-bottom: 10px; }

h2 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 44px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.section-note {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 14px;
}

/* ---------- Collapsible section ---------- */

/* The <h2> keeps its own rule above, so a collapsible section is visually
   identical to a plain one except for the chevron. The summary contributes
   only the hit area. */
.section > summary {
  cursor: pointer;
  list-style: none;
}

.section > summary::-webkit-details-marker { display: none; }

.section > summary > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Same two-border chevron as the About toggle: down when closed, up when open. */
.section > summary > h2::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.section[open] > summary > h2::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.section > summary:hover > h2 { color: var(--accent); }

.section > summary:hover > h2::after { border-color: var(--accent); }

.section > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Publication lists ---------- */

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

.pubs > li {
  display: grid;
  grid-template-columns: var(--gutter) 1fr;
  gap: 0 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.pubs > li:last-child { border-bottom: none; }

/* Working papers are ordered by status, not by date, so that list drops the
   year gutter instead of showing a timeline the order does not follow. */
.pubs-flow > li {
  grid-template-columns: 1fr;
  gap: 0;
}

/* The year sits in the gutter and is printed only when it changes,
   so the column reads as a timeline rather than a repeated label. */
.yr {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

/* The title is the only block in the entry. Everything after it (coauthors,
   status, file links) is inline, so it all flows onto one second line.
   fit-content keeps the clickable box hugging the text: as a plain block the
   <a> would fill the column and empty space to its right would open the PDF. */
.title {
  font-weight: 500;
  display: block;
  width: fit-content;
  margin-bottom: 2px;
}

/* Titles that link to a PDF stay body-black, in both the unvisited and the
   visited state, so the list reads as one column of titles rather than a mix of
   blue and purple. :visited is listed explicitly because the browser default
   would otherwise recolor it. The underline on hover carries the affordance. */
.title:link,
.title:visited {
  color: var(--text);
}

.title:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.title-plain {
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}

.meta {
  display: inline;
  color: var(--muted);
  font-size: 15px;
}

.meta i { font-style: italic; }

/* Rides on the coauthors line, after the status pill. */
.filelinks {
  display: inline;
  margin-left: 14px;
  font-size: 13.5px;
}

/* An entry with no coauthors and no status has nothing on the second line
   before the links, so they open it and the leading gap is not wanted. */
.title + .filelinks,
.title-plain + .filelinks { margin-left: 0; }

.filelinks a { font-weight: 500; }

.filelinks a + a { margin-left: 14px; }

/* Review status rides on the same line as the coauthors, as a small pill so it
   stays scannable without reading as part of the author list. */
.status {
  display: inline-block;
  margin-left: 4px;
  padding: 0 9px;
  border: 1px solid var(--chip-border);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.8;
  white-space: nowrap;
  vertical-align: 1px;
}

.status i { font-style: italic; }

.status-rr {
  background: var(--rr-bg);
  border-color: var(--rr-border);
  color: var(--rr-text);
}

/* Simple lists (work in progress, older papers) */
.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.plain li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15.5px;
}

.plain li:last-child { border-bottom: none; }

.plain .meta { display: inline; margin: 0; }

footer {
  margin-top: 52px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------- Responsive ---------- */

@media (max-width: 820px) {
  .page {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 18px 56px;
  }
  .sidebar { position: static; }
  .photo {
    width: 150px;
    aspect-ratio: 1 / 1;
  }
  h1 { font-size: 2rem; }
  .pubs > li {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .yr {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 0 2px;
  }
}

/* Below roughly a phone width the longest status ("Revise and resubmit,
   Journal of Urban Economics") no longer fits next to the authors, so the pill
   drops to its own line instead of overflowing the column. */
@media (max-width: 560px) {
  .status {
    display: block;
    width: fit-content;
    margin: 4px 0 0;
    white-space: normal;
    border-radius: 10px;
    padding: 1px 9px;
  }
}

@media print {
  :root { --accent: #000; --muted: #444; --rule: #ccc; }
  body { font-size: 11pt; }
  .sidebar, .chips { display: none; }
  .page { display: block; max-width: none; padding: 0; }
  a { text-decoration: none; }

  /* Print the bio whether or not the reader expanded it, and drop the toggle. */
  .bio > summary { display: none; }
  .bio > p { display: block; }

  /* Same for a collapsed section: the papers must be on the printed page even
     if the reader had it folded shut. The heading stays, only the chevron goes. */
  .section:not([open]) > ol { display: block; }
  .section > summary > h2::after { display: none; }
}