/* ---------------------------------------------------------------
   Alessandra Fenizia — personal website
   One stylesheet for the whole site. Edit values here, not in HTML.
   --------------------------------------------------------------- */

:root {
  --ink:    #16181c;   /* body text                        */
  --muted:  #5a5f66;   /* metadata, abstracts              */
  --faint:  #8c9199;   /* footer, labels, captions         */
  --rule:   #dfe1e4;   /* hairlines                        */
  --rule-strong: #b9bdc2;  /* the rule under section headings  */
  --accent: #1e3a5c;   /* links                            */
  --bg:     #ffffff;

  --measure:  48rem;   /* text column on inner pages       */
  --masthead: 52rem;   /* masthead + home page width       */

  /* Serif for the name, headings and titles. All of these ship with
     macOS, Windows or both — nothing is downloaded. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;

  /* Sans for running text, which is easier on long abstracts. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* long URLs can never widen the page */
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* the home page sets its text beside the photo, so it gets more room */
.wrap--wide { max-width: var(--masthead); }

/* ---------- links ---------- */

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 58, 92, 0.22);
}

a:hover { border-bottom-color: var(--accent); }

/* ---------- masthead ---------- */
/* Name centred as a wordmark, with the navigation sitting inside a
   break in a hairline rule. Identical on every page. */

.masthead {
  padding: 4.75rem 0 0;
  margin-bottom: 4rem;
}

.masthead .wrap { max-width: var(--masthead); }

.wordmark {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--ink);
  border-bottom: none;
  margin-bottom: 2.5rem;
}

.wordmark:hover { color: var(--ink); }

.navrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
}

/* the two hairlines flanking the navigation */
.navrow::before,
.navrow::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--rule);
}

.navrow a {
  flex: 0 0 auto;
  color: var(--faint);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  font-size: 0.73rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  white-space: nowrap;
}

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

.navrow a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- headings ---------- */

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

h1 {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 1.75rem;
}

h2 {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--ink);
  margin: 3.75rem 0 1.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-strong);
}

h2:first-of-type { margin-top: 0; }

p { margin: 0 0 1.15rem; }

/* Running text is justified throughout. Hyphenation is on so that justifying a
   narrow column doesn't open up rivers of white space between words.
   Deliberately excluded: headings, paper and course titles, the navigation,
   the contact rows and the footer — justifying those stretches a wrapped line
   across the column and looks broken. */
p,
.abstract,
.paper-meta,
.course-terms {
  text-align: justify;
  hyphens: auto;
}

/* ---------- home ---------- */

.intro {
  display: flex;
  gap: 2.75rem;
  align-items: flex-start;
}

/* left column: portrait, with the contact links beneath it.
   300px rather than 320: it buys the text column enough room to keep
   "Associate Professor of Economics (with tenure)" on a single line. */
.intro-aside {
  flex: 0 0 300px;
  width: 300px;
}

.intro-photo {
  display: block;
  width: 100%;
  height: auto;
  /* Mirrored, as in a looking glass. The file on disk is untouched — delete
     this one line to put the portrait back the way the camera took it. */
  transform: scaleX(-1);
}

.intro-body { flex: 1 1 auto; min-width: 0; }

/* the credential stack: title, institution, then affiliations */

.standing {
  margin-bottom: 2.25rem;
}

.standing-title {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.35;
  margin-bottom: 0.15rem;
}

/* The tenure note rides with the title but a step down in size and weight, so
   the rank still leads the line. `nowrap` keeps "(with tenure)" from breaking
   across two lines when the column narrows. */
.standing-title .tenure {
  font-size: 0.8em;
  color: var(--muted);
  white-space: nowrap;
}

.standing-place {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1.35;
  color: var(--muted);
}

.standing-from {
  color: var(--faint);
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}

.standing-affil {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--faint);
}

.standing-affil a {
  color: var(--muted);
  border-bottom: none;
}

.standing-affil a:hover {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.standing-affil .sep {
  margin: 0 0.55rem;
  color: var(--rule);
}

.fields { color: var(--muted); }

.contact {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}

.contact div { margin-bottom: 1rem; }
.contact div:last-child { margin-bottom: 0; }

/* label above value — the column is too narrow to set them side by side */
.contact .label {
  display: block;
  margin-bottom: 0.1rem;
  color: var(--faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ---------- research ---------- */

.paper { margin-bottom: 2.9rem; }

.paper-title {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.paper-meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

/* journal names lift out of the grey; volume, issue and pages stay muted.
   Dark grey rather than the full ink, so they carry without glaring. */
.paper-meta em {
  font-weight: 700;
  color: #3a4047;
}

.paper-links {
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.paper-links a { margin-right: 1.1rem; }

.paper-links .group-label {
  color: var(--faint);
  margin-right: 0.5rem;
}

.abstract {
  font-size: 0.94rem;
  color: var(--muted);
  margin: 0;
}

/* Abstracts open on click. This is native HTML <details>, not JavaScript. */

.paper summary {
  display: inline-block;      /* also removes the default disclosure triangle */
  cursor: pointer;
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  border-bottom: 1px solid rgba(30, 58, 92, 0.22);
}

.paper summary::-webkit-details-marker { display: none; }
.paper summary::marker { content: ""; }

.paper summary:hover { border-bottom-color: var(--accent); }

.paper details[open] summary {
  color: var(--faint);
  border-bottom-color: transparent;
  margin-bottom: 0.85rem;
}

/* ---------- teaching ---------- */

.course { margin-bottom: 1.9rem; }

.course-name {
  font-family: var(--serif);
  font-size: 1.09rem;
}

.course-level {
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--faint);
  letter-spacing: 0.02em;
}

.course-terms {
  color: var(--muted);
  font-size: 0.95rem;
}

.note { margin: 3rem 0 2.25rem; }

/* ---------- personal ---------- */

.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 1rem;
}

.photo-full {
  display: block;   /* no stray baseline gap under the image */
  width: 100%;
  height: auto;
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: 6rem;
  padding: 1.9rem 0 4rem;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.site-footer .wrap { max-width: var(--masthead); }

.site-footer a { color: var(--faint); border-bottom-color: var(--rule); }
.site-footer a:hover { color: var(--ink); }

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  body { font-size: 16px; }

  .wrap { padding: 0 1.15rem; }

  .masthead {
    padding-top: 2.75rem;
    margin-bottom: 2.75rem;
  }

  .wordmark {
    font-size: 2rem;
    letter-spacing: 0.02em;
    margin-bottom: 1.75rem;
  }

  /* the flanking rules have no room to breathe on a phone */
  .navrow::before,
  .navrow::after { display: none; }

  .navrow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 1.15rem;
  }

  .navrow a { font-size: 0.68rem; letter-spacing: 0.13em; }

  h1 { font-size: 1.55rem; }

  /* Stack the columns, but move the contact links below the text rather than
     letting them sit between the photo and the credentials. `display: contents`
     dissolves the left column so its two children can be ordered separately. */
  .intro {
    flex-direction: column;
    align-items: stretch;   /* else the stacked blocks shrink to their content */
    gap: 0;
  }

  .intro-aside { display: contents; }

  .intro-photo {
    order: 1;
    width: 100%;
    max-width: 230px;
    margin-bottom: 2.25rem;
  }

  .intro-body { order: 2; }

  .contact { order: 3; margin-top: 2.75rem; }

  .standing-title,
  .standing-place { font-size: 1.18rem; }

  .contact .label {
    display: block;
    min-width: 0;
    margin-bottom: 0.1rem;
  }

  .contact div { margin-bottom: 0.9rem; }
}

/* ---------- print ---------- */

@media print {
  body { font-size: 11pt; color: #000; }
  .masthead { padding-top: 0; margin-bottom: 2rem; }
  .wordmark { font-size: 1.6rem; margin-bottom: 0; }
  .navrow, .site-footer { display: none; }
  .wrap, .wrap--wide { max-width: none; padding: 0; }
  a { color: #000; border-bottom: none; }
  .paper { page-break-inside: avoid; }
  /* print every abstract, open or not, and drop the toggle label */
  details::details-content { content-visibility: visible !important; }
  details > *:not(summary) { display: block !important; }
  summary { display: none !important; }
  .abstract, .paper-meta, .fields, .course-terms { color: #333; }
}