/* University of Chicago Academic Website Styles */
/* Based on UChicago Brand Identity Guidelines */

:root {
  /* UChicago Brand Colors */
  /* Optimized layout dimensions */
  --page-width: 1200px;
  --top-gap: 40px;
  --text: #111;
  --muted: #555;
  --brand: #800000; /* UChicago Maroon - Pantone 202 */
  --link: var(--brand);
  --border: #eaeaea;
  --dark-gray: #767676; /* Pantone Warm Gray 11 */
  --light-gray: #D6D6CE; /* Pantone Cool Gray 3 */
  
  /* UChicago recommended typography hierarchy */
  --font-primary: "Gotham", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Adobe Garamond Pro", Georgia, "Times New Roman", serif;
}

/* Base Styles */
*, *::before, *::after { 
  box-sizing: border-box; 
}

body { 
  margin: 0; 
  background: #fff; 
  color: var(--text); 
  font: 18px/1.7 var(--font-primary);
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
}

h1 { 
  font-size: clamp(28px, 4.5vw, 40px); 
  line-height: 1.25; 
  margin: 0 0 6px; 
}

h2 { 
  font-size: 22px; 
  margin: 0 0 12px; 
  color: var(--brand); 
  position: relative; 
  padding-left: 12px; 
}

h2::before { 
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 0.25em; 
  bottom: 0.25em; 
  width: 3px; 
  background: var(--brand); 
  border-radius: 2px; 
}

h3 { 
  font-size: 19px; 
  margin: 14px 0 6px; 
}

/* Links */
a { 
  color: var(--link); 
  text-decoration: underline; 
  text-underline-offset: 2px; 
  text-decoration-skip-ink: auto; 
}

a:hover { 
  text-decoration: underline; 
  text-decoration-thickness: 2px; 
}

a:visited { 
  color: #5e0000; 
}

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

a[target="_blank"]::after { 
  content: "↗"; 
  margin-left: 4px; 
  font-size: 0.9em; 
}

/* Layout */
.container { 
  max-width: var(--page-width); 
  margin: 0 auto; 
  padding: calc(var(--top-gap) + 16px) 32px 40px; 
}

.container.research { 
  padding: calc(24px + 12px) 32px 40px; 
}

/* Navigation */
.topnav { 
  display: flex; 
  gap: 16px; 
  justify-content: flex-end; 
  margin: 4px 0 12px; 
  font-size: 16px; 
}

.topnav a[aria-current="page"] { 
  font-weight: 600; 
}

/* Header */
header { 
  padding: 42px 0 10px; 
}

.hero { 
  display: grid; 
  grid-template-columns: auto 1fr; 
  gap: 32px; 
  align-items: center; 
  margin-bottom: 16px; 
}

.portrait { 
  display: block; 
  border: none; 
  border-radius: 0; 
  background: #f5f5f5; 
  image-rendering: auto; 
  width: auto; 
  height: auto; 
  min-width: 120px;
  max-width: 360px; 
}

/* Content */
.tagline { 
  margin: 0 0 6px; 
  color: var(--muted); 
}

.tagline + .tagline { 
  margin-top: 2px; 
}

.lead { 
  margin: 8px 0 6px; 
}

/* Extra spacing between consecutive lead paragraphs */
.lead + .lead {
  margin-top: 1rem;
}


.meta { 
  margin: 6px 0 0; 
  color: var(--muted); 
  font-size: 16px; 
}

.line { 
  border: 0; 
  border-top: 2px solid var(--brand); 
  margin: 26px 0; 
}

/* Main Content */
main section { 
  margin: 32px 0; 
}

.paper-meta { 
  color: var(--muted); 
  font-size: 16px; 
  margin: 0 0 8px; 
}

.wp { 
  margin-bottom: 22px; 
}

h3 a { 
  display: inline-block; 
  padding: 2px 0; 
}

/* Separators */
.sep::before { 
  content: ""; 
  display: inline-block; 
  width: 6px; 
  height: 6px; 
  background: var(--brand); 
  border-radius: 50%; 
  margin: 0 10px; 
  vertical-align: middle; 
}

/* Footer */
footer { 
  color: var(--muted); 
  font-size: 14px; 
  padding: 32px 0 60px; 
}

/* Accessibility */
.skip { 
  position: absolute; 
  left: -9999px; 
  top: auto; 
  width: 1px; 
  height: 1px; 
  overflow: hidden; 
}

.skip:focus { 
  position: static; 
  width: auto; 
  height: auto; 
  margin: 10px 20px; 
  padding: 8px 10px; 
  background: #fff; 
  border: 2px solid var(--brand); 
  border-radius: 6px; 
}

.vh { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; 
  border: 0; 
}

/* Typography and Text */
p { 
  hyphens: auto; 
}

::selection { 
  background: var(--brand); 
  color: #fff; 
}

/* Responsive Design */
@media (max-width: 640px) {
  :root { 
    --top-gap: 64px; 
  }

  /* Homepage introduction extra spacing between consecutive leads */
  .lead + .lead { 
    margin-top: 0.875rem; 
  } 

  .hero { 
    grid-template-columns: 1fr; 
  }
  
  .portrait { 
    max-width: 100%; 
    height: auto; 
  }
}

/* Print Styles */
@media print { 
  a { 
    color: inherit; 
    text-decoration: none; 
  } 
  
  a[href^="http"]::after { 
    content: " (" attr(href) ")"; 
    font-size: 12px; 
  } 
}