/* ============================================================================
   Saraí Hernández-Torres — site styles
   One stylesheet, no framework. Source Sans and the blue-slate palette are
   carried over from the previous version of the site.
   ========================================================================= */

:root {
  --ink:        #294757;   /* every piece of text on the site */
  --ink-soft:   #294757;   /* secondary text — the same blue. The hierarchy comes
                              from weight, size and italics, not from colour.
                              Set this to #5b7383 to bring back the two-tone look. */
  --accent:     #6c98b1;   /* not text: the rule under the current page, focus rings */
  --link-hover: #53ae62;   /* links and buttons on hover — as on the old site */
  --rule:       #e6eaed;   /* hairlines */
  --rule-soft:  #f1f4f6;
  --bg:         #fefefe;
  --bg-soft:    #f7f9fa;

  --font: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --measure: 46rem;        /* comfortable reading width */
  --nav-h: 4.25rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #bdcbd4;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .15s ease;
}
a:hover, a:focus-visible { color: var(--link-hover); text-decoration-color: currentColor; }

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

h1, h2, h3, h4 { color: var(--ink); font-weight: 600; line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: 2rem; letter-spacing: -.01em; }
h2 { font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.container { width: 100%; max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--ink-soft); font-size: .95em; }
.lead { color: var(--ink-soft); max-width: var(--measure); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- navbar - */

.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(254, 254, 254, .96);
  backdrop-filter: saturate(160%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
/* The navigation is allowed to be wider than the text column: seven pages in
   two languages do not fit inside 60rem, and the row has always run past it.
   Giving it its own width makes that deliberate, and letting it wrap means a
   narrow laptop gets a second line rather than a horizontal scrollbar. */
.navbar-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .2rem 1rem;
  max-width: 82rem;
  min-height: var(--nav-h);
}

.brand {
  font-size: .95rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; margin-right: auto;
}

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem 1.5rem; margin-left: auto; }
.nav-list { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem 1.2rem; list-style: none; margin: 0; padding: 0; }

.nav-list a {
  font-size: .82rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.nav-list a:hover { color: var(--link-hover); }
.nav-list a.active { border-bottom-color: var(--accent); }

.nav-meta { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.nav-lang a { color: var(--ink-soft); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 2.5rem; height: 2.5rem; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 1.1rem; height: 1.5px; background: var(--ink);
  margin: 0 auto; position: relative; transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top:  5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* ------------------------------------------------------------------ hero - */

main { padding-bottom: 4rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding: 4rem 0 3rem;
}
.hero-portrait img { width: 100%; border-radius: 2px; }
.hero-body h1 { font-size: 2.2rem; margin-bottom: .25rem; }
.hero-role { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: .1em; }
.hero-place { margin-bottom: 1.1em; }
.hero-mail { margin-bottom: .6em; }
.hero-mail .label { font-weight: 600; }
.hero-mail q { quotes: none; }
.hero-links { display: flex; gap: 1rem; font-size: 1.35rem; margin: 0; }
.hero-links a { text-decoration: none; color: var(--ink-soft); }
.hero-links a:hover { color: var(--link-hover); }

/* ------------------------------------------------------------ page heads - */

.page-head { padding: 3.5rem 0 1.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.5rem; }
.page-head h1 { margin: 0; }
.page-subtitle { color: var(--ink-soft); margin: .4rem 0 0; }

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.1em; }

.section { padding-top: 2.75rem; margin-top: 2.75rem; border-top: 1px solid var(--rule); }
.section:first-child,
.page-head + .section { border-top: 0; margin-top: 0; padding-top: 0; }
.page-head + .tabs { margin-top: 0; }
.section > h2 { margin-bottom: 1rem; }
.more { margin-top: 1.25rem; font-size: .95rem; }

/* ------------------------------------------------------------------ tabs - */

.tabs { margin: 2rem 0 0; }

/* Folder tabs, as on the previous version of the site: each tab is outlined and
   sits on the rule that runs under the row; the selected one erases that rule
   beneath itself so it reads as one piece with the panel below. */
.tab-nav {
  display: flex; flex-wrap: wrap; gap: .3rem;
  border-bottom: 1px solid var(--rule);
  padding-left: .3rem;
  margin-bottom: 1.75rem;
}
.tab-button {
  font: inherit; font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); background: none;
  border: 1px solid var(--rule); border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 0 1.7rem; height: 2.4rem; line-height: 2.4rem;
  margin-bottom: -1px;
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tab-button:hover { color: var(--link-hover); border-color: var(--link-hover); }
.tab-button[aria-selected="true"] {
  color: var(--ink);
  border-bottom: 1px solid var(--bg);   /* punches a hole in the rule below */
}
.tab-panel[hidden] { display: none; }

/* ------------------------------------------------------------- item lists- */

.item-list { display: flex; flex-direction: column; gap: 1.75rem; }
.item { max-width: var(--measure); }
.item-title { margin: 0 0 .15em; font-weight: 600; }
.item-title a { text-decoration-color: #bdcbd4; }
.item-translation { font-weight: 400; color: var(--ink-soft); }
.item-speaker { font-weight: 400; color: var(--ink-soft); }
.item-authors { margin: 0 0 .1em; }
.item-meta { margin: 0 0 .1em; color: var(--ink-soft); }
.item-buttons { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.item-buttons:empty { display: none; }

.button {
  display: inline-block;
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 400;
  color: var(--ink-soft); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .22rem .7rem; line-height: 1.6;
  transition: color .15s ease, border-color .15s ease;
}
.button:hover { color: var(--link-hover); border-color: var(--link-hover); }

.terms { list-style: none; margin: .4rem 0 0; padding: 0; }
.terms li { color: var(--ink-soft); }
.institution { margin: 2.5rem 0 1.25rem; font-size: 1rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); }
.institution:first-child { margin-top: 0; }

/* ------------------------------------------------------------ event lists- */

.event-list { list-style: none; margin: 0; padding: 0; }
.event {
  max-width: var(--measure);
  padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft);
}
.event:last-child { border-bottom: 0; }
.event > span { display: block; }
.event-head { display: block; }
.event-date {
  display: block;          /* the date sits on its own line, above the title */
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .35rem;
}
.event-role { font-size: .9rem; color: var(--ink-soft); font-style: italic; margin-bottom: .2rem; }
.event-title { font-weight: 400; }
.event-venue, .event-body { color: var(--ink-soft); }
.event-meta { margin-top: .2rem; color: var(--ink-soft); }
.sep { margin: 0 .45rem; opacity: .5; }
.event-body { font-weight: 400; color: var(--ink); }
.event-flag { font-size: .9rem; color: var(--ink); font-weight: 600; }

.sub-list { margin: .5rem 0 0; padding-left: 1.1rem; }
.sub-list li { margin-bottom: .4rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ misc - */

.axioms { list-style: none; margin: 1.25rem 0; padding: 0; }
.axioms li { margin-bottom: 1rem; }
.axiom-label { font-weight: 600; }

.coauthors { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); max-width: var(--measure); }
.coauthors h3 { font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

.person-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.person { max-width: var(--measure); padding: .9rem 0; border-bottom: 1px solid var(--rule-soft); }
.person:last-child { border-bottom: 0; }
.person-name { display: block; font-weight: 600; }
.person-line { display: block; color: var(--ink-soft); }
.person-line .button { margin-top: .4rem; }

.series { max-width: var(--measure); margin-bottom: 3rem; }
.series h3 { margin-bottom: .75rem; }



/* ----------------------------------------------------------------- tables - */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.people-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  text-align: left;
}
.people-table th,
.people-table td {
  padding: .7rem .9rem;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft);
}
.people-table thead th {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.people-table tbody tr:last-child td { border-bottom: 0; }
.people-table tbody tr:hover { background: var(--bg-soft); }
.people-table td:first-child { font-weight: 600; }
.people-table .col-name { width: 19%; }
.people-table .col-project { width: 34%; }
.people-table td:nth-child(2),
.people-table td:nth-child(4),
.people-table td:last-child { color: var(--ink-soft); }
.cell-note { display: block; margin-top: .3rem; font-size: .88rem; color: var(--ink-soft); }
.cell-note .button { margin-top: .15rem; }
/* a note that is the only thing in the cell sits flush with the other columns */
.people-table td > .cell-note:first-child { margin-top: 0; }

/* On a phone each row becomes a small stack, labelled by data-label. */
@media (max-width: 720px) {
  .people-table, .people-table tbody, .people-table tr, .people-table td { display: block; width: 100%; }
  .people-table thead { position: absolute; left: -999px; }
  .people-table tr {
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule-soft);
  }
  .people-table td { border: 0; padding: .15rem 0; white-space: normal; }
  .people-table td:first-child { font-size: 1.02rem; padding-bottom: .35rem; }
  .people-table td:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft);
  }
}



/* -------------------------------------------------------------- notices - */

.notice {
  max-width: var(--measure);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
}
.notice:last-child { margin-bottom: 0; }
.notice-title {
  font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .6rem;
}
.notice p:last-child { margin-bottom: 0; }
.notice-meta { font-size: .95rem; margin-top: .8rem; }
.notice-meta .label { font-weight: 600; }
.mail q { quotes: none; }

/* --------------------------------------------------- past events, folded - */

.past-group { border-bottom: 1px solid var(--rule); }
.past-group[hidden] { display: none; }
/* A category with nothing in it keeps its markup, so the browser can move a
   newly-past event into it, but stays out of the way. */
.past-group:has(> .event-list:empty) { display: none; }

.past-summary {
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 0; cursor: pointer;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
  list-style: none;
}
.past-summary::-webkit-details-marker { display: none; }
.past-summary:hover { color: var(--link-hover); }
.past-summary::before {
  content: ""; flex: none;
  width: .45rem; height: .45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); margin-left: .2rem;
  transition: transform .18s ease;
}
.past-group[open] > .past-summary::before { transform: rotate(45deg); }
.past-name { flex: 1; }
.past-count {
  font-size: .78rem; letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 999px;
  padding: .05rem .55rem;
}
.past-group > .event-list { padding-bottom: .75rem; }

/* ------------------------------------------------------------ media cards - */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 2.25rem 1.75rem;
  list-style: none; margin: 0; padding: 0;
}
.media-card { display: flex; flex-direction: column; gap: .8rem; }
.media-thumb {
  border: 1px solid var(--rule); border-radius: 2px;
  overflow: hidden; background: var(--bg-soft);
}
/* the same frame as a video player, so the two kinds of card line up */
.media-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .2s ease; }
.media-thumb a:hover img { opacity: .82; }
.media-date {
  display: block;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .35rem;
}
.media-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- simulation cards - */

/* Wider minimum than the media cards: each of these carries a paragraph of
   description, so two to a row reads better than three. */
.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 2.75rem 2rem;
  list-style: none; margin: 2.25rem 0 0; padding: 0;
}
.sim-card { display: flex; flex-direction: column; gap: .85rem; }
.sim-thumb {
  display: block;
  border: 1px solid var(--rule); border-radius: 2px;
  overflow: hidden; background: var(--bg-soft);
}
.sim-thumb img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: opacity .2s ease;
}
.sim-card:hover .sim-thumb img { opacity: .88; }
.sim-text { display: flex; flex-direction: column; }
/* Sentence case, unlike the section headings: the small caps directly below it
   are the tags, and two uppercase lines in a row read as one block. */
.sim-title {
  font-size: 1.15rem; font-weight: 600; margin: 0; line-height: 1.35;
  text-transform: none; letter-spacing: 0;
}
.sim-title a { text-decoration: none; }
.sim-title a:hover { color: var(--link-hover); }
.sim-tags {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin: .35rem 0 0;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sim-body { margin-top: .55rem; }
.sim-body p { margin: 0; }
.sim-lang { margin: .5rem 0 0; font-size: .92rem; font-style: italic; color: var(--ink-soft); }
.sim-open { margin: .85rem 0 0; }
.sim-note { margin-top: 2.75rem; font-size: .92rem; color: var(--ink-soft); }

/* ----------------------------------------------------------------- videos - */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 2.25rem 1.75rem;
}
.video { display: flex; flex-direction: column; gap: .7rem; }
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.video-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-frame-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; text-decoration: none; color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease;
}
.video-frame-link:hover { border-color: var(--link-hover); color: var(--link-hover); }
.video-cue {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.video-host { font-size: .82rem; opacity: .7; }
.video .item-title { font-size: 1rem; }
.video .item-meta { font-size: .92rem; }

/* ------------------------------------------------------- event groupings - */

.subhead { margin-top: 2.5rem; }

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

.footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  color: var(--accent);      /* the one place the lighter blue is still text */
  font-size: .88rem;
  text-align: center;
}
.footer a { color: var(--accent); }
.footer a:hover { color: var(--link-hover); }
.footer-credit { margin-bottom: 1rem; }
.footer hr { margin: 1rem auto; max-width: 20rem; }
.footer-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }
.footer q { quotes: none; }

/* ------------------------------------------------------------ responsive - */

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule);
    padding: .5rem 1.5rem 1.25rem;
  }
  .nav-links.open { display: flex; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-list a { display: block; padding: .6rem 0; border-bottom: 0; }
  .nav-list a.active { border-bottom: 0; }
  .nav-meta {
    flex-direction: row; flex-wrap: wrap; gap: 1.25rem;
    padding: .9rem 0 0; margin-top: .5rem;
    border-left: 0; border-top: 1px solid var(--rule);
  }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .media-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .sim-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  h1 { font-size: 1.65rem; }
  .hero { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem 0 2rem; }
  .hero-portrait { max-width: 15rem; }
  .hero-body h1 { font-size: 1.85rem; }
  .page-head { padding-top: 2.5rem; }

  /* Folder tabs only read as folders while they sit on one line. Once the row
     has to wrap, the upper row would hang over the lower one, so on narrow
     screens the tabs become plain outlined buttons instead and the rule under
     the row goes away. */
  .tab-nav {
    border-bottom: none; padding-left: 0;
    gap: .4rem; margin-bottom: 1.4rem;
  }
  .tab-button {
    border: 1px solid var(--rule); border-radius: 4px;
    margin-bottom: 0;
    padding: 0 1.1rem; height: 2.2rem; line-height: 2.2rem;
    font-size: .72rem;
  }
  .tab-button[aria-selected="true"] {
    border: 1px solid var(--accent);
    background: var(--bg-soft);
  }
}

@media print {
  .navbar, .nav-toggle, .footer { display: none; }
  body { font-size: 11pt; }
  .tab-panel[hidden] { display: block !important; }
}