/* Homepage only. Shared basics are in base.css. Edit freely. */

    .site-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 230px;
      grid-template-areas:
        "eyebrow portrait"
        "title portrait"
        "affiliation portrait"
        "contact portrait"
        "nav portrait";
      column-gap: 2rem;
      row-gap: 0;
      align-items: start;
      padding: 18px 0 30px;
      border-bottom: 1px solid var(--line);
    }
    .site-header .eyebrow { grid-area: eyebrow; }
    .site-header h1 { grid-area: title; }
    .site-header .affiliation { grid-area: affiliation; }
    .site-header .header-contact { grid-area: contact; }
    .site-header .top-nav { grid-area: nav; }
    .site-header .portrait { grid-area: portrait; justify-self: end; }
    .eyebrow {
      margin: 0 0 .35rem;
      color: var(--muted);
      font-size: .98rem;
      letter-spacing: .02em;
    }
    
    .affiliation {
      margin: 0;
      max-width: 680px;
      color: var(--muted);
      font-size: 1.1rem;
    }
    .header-contact {
      display: flex;
      flex-wrap: wrap;
      gap: .45rem .9rem;
      margin: .95rem 0 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: .98rem;
    }
    .header-contact li {
      display: inline-flex;
      align-items: baseline;
      gap: .25rem;
    }
    .header-contact strong { color: var(--text); }
    .portrait {
      width: 100%;
      max-width: 230px;
      height: auto;
      object-fit: contain;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      display: block;
      margin-left: auto;
      background: var(--soft);
    }

    main { display: block; }
    
    .publications-heading {
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      line-height: 1.12;
      margin: 2.6rem 0 .7rem;
      letter-spacing: -.02em;
    }
    .subject-section {
      border-top: 2px solid var(--text);
      padding: .95rem 0 .3rem;
      margin-top: 1.2rem;
    }
    .subject-title {
      font-size: 1.45rem;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 0 0 .35rem;
    }
    .lede {
      color: var(--muted);
      max-width: 840px;
      margin: .25rem 0 1rem;
    }
    .teaching-list,
    .timeline-list {
      margin: .35rem 0 0;
      padding-left: 1.2rem;
    }
    .teaching-list li,
    .timeline-list li { margin: .4rem 0; }
    .timeline-list strong { color: var(--text); }
    .term { color: var(--muted); }
    .about-text {
      max-width: 880px;
      margin: .25rem 0 0;
    }

    .profile-links {
      max-width: 880px;
      margin: 1.75rem 0 0;
      color: var(--text);
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 1.55;
    }
    .profile-links a {
      font-weight: 700;
      text-underline-offset: .16em;
      text-decoration-thickness: .08em;
    }
    .subsection-heading {
      font-size: 1.35rem;
      line-height: 1.2;
      margin: 1.45rem 0 .35rem;
      letter-spacing: -.01em;
    }

    .course-group { margin-top: 1.35rem; }
    .course-group h3 {
      font-size: 1.35rem;
      line-height: 1.2;
      margin: 0 0 .35rem;
      letter-spacing: -.01em;
    }

    .subject-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
      gap: .7rem;
      margin: 1rem 0 1.75rem;
    }
    .subject-card {
      border: 1px solid var(--line);
      border-radius: .7rem;
      background: var(--soft);
      padding: .75rem .85rem;
    }
    .subject-card a {
      font-weight: 700;
      text-decoration: none;
    }
    .subject-card p {
      margin: .25rem 0 0;
      color: var(--muted);
      font-size: .93rem;
      line-height: 1.4;
    }

    .publication-toolbar {
      margin: .75rem 0 1.35rem;
    }
    .publication-view-switcher {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem .6rem;
    }
    .publication-view-label {
      color: var(--muted);
      font-size: .98rem;
      font-weight: 700;
      margin-right: .1rem;
    }
    .publication-view-button {
      display: none;
      align-items: center;
      border: 2px solid var(--text);
      border-radius: 999px;
      background: white;
      color: var(--text);
      padding: .46rem .92rem;
      font: inherit;
      font-size: 1rem;
      font-weight: 750;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
    }
    .js .publication-view-button { display: inline-flex; }
    .publication-view-button:hover,
    .publication-view-button:focus {
      border-color: var(--link);
      color: var(--link);
    }
    .publication-view-button[aria-pressed="true"] {
      background: var(--text);
      border-color: var(--text);
      color: white;
      box-shadow: 0 2px 0 rgba(0, 0, 0, .14);
    }
    .publication-view-button[aria-pressed="true"]:hover,
    .publication-view-button[aria-pressed="true"]:focus {
      background: var(--link);
      border-color: var(--link);
      color: white;
    }
    .publication-view-note {
      margin: .7rem 0 0;
      color: var(--muted);
      font-size: .96rem;
      max-width: 900px;
    }

    /* With JavaScript, descriptions are opened one paper at a time. */
    .js .publication .blurb,
    .js .publication .tags,
    .js .publication .related-note {
      display: none;
    }
    .js .publication {
      padding-bottom: .85rem;
    }
    .js .publication .venues {
      margin-bottom: 0;
    }
    .js .publication.paper-description-open .blurb,
    .js .publication.paper-description-open .related-note {
      display: block;
    }
    .js .publication.paper-description-open .tags {
      display: flex;
    }
    .js .publication.paper-description-open {
      padding-bottom: 1.1rem;
    }
    .js .publication.paper-description-open .venues {
      margin-bottom: .5rem;
    }

    /* A wrapper may be added around panels without breaking view switching. */
    [data-view-panel]:not([data-view-panel="area"]) { display: none; }
    .js [data-view-panel] { display: none; }
    .js[data-publication-view="chronological"] [data-view-panel="chronological"],
    .js[data-publication-view="area"] [data-view-panel="area"],
    .js[data-publication-view="journals"] [data-view-panel="journals"],
    .js[data-publication-view="conferences"] [data-view-panel="conferences"] { display: block; }

    .publication-year-section {
      border-top: 2px solid var(--text);
      padding: .95rem 0 .3rem;
      margin-top: 1.2rem;
    }
    .publication-year-heading {
      font-size: 1.45rem;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 0 0 .35rem;
    }

    .publication-list { list-style: none; padding: 0; margin: 0; }
    .publication {
      padding: 1rem 0 1.1rem;
      border-bottom: 1px solid var(--line);
    }
    .publication-list .publication:last-child {
      border-bottom: 0;
    }
    .publication-title {
      font-weight: 700;
      font-size: 1.22rem;
      line-height: 1.28;
      margin: 0 0 .26rem;
    }
    .paper-detail-toggle {
      display: none;
      border: 0;
      background: transparent;
      color: var(--link);
      padding: 0;
      margin-left: .4rem;
      font: inherit;
      font-size: .9rem;
      font-weight: 700;
      line-height: inherit;
      cursor: pointer;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      white-space: nowrap;
    }
    .paper-detail-toggle::before {
      content: "(";
      color: var(--muted);
      font-weight: 500;
    }
    .paper-detail-toggle::after {
      content: ")";
      color: var(--muted);
      font-weight: 500;
    }
    .js .paper-detail-toggle { display: inline; }
    .paper-detail-toggle:hover,
    .paper-detail-toggle:focus {
      color: var(--text);
      text-decoration-thickness: 2px;
    }
    .authors { margin: 0 0 .45rem; color: var(--muted); }
    .blurb { margin: .35rem 0 .55rem; max-width: 850px; }
    .venues,
    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      margin: 0 0 .5rem;
    }
    
    .badge {
      padding: .2rem .56rem;
      font-size: .9rem;
    }
    
    a.badge {
      color: var(--text);
      font-weight: 650;
      text-decoration: none;
      transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
    }
    a.badge:hover,
    a.badge:focus {
      border-color: var(--link);
      box-shadow: 0 0 0 2px rgba(33, 76, 138, .12);
      text-decoration: none;
    }
    .badge.journal {
      background: #eef6f0;
      border-color: #d4e6d8;
      color: #2f6841;
    }
    a.badge.journal:hover,
    a.badge.journal:focus {
      border-color: #4f8a5f;
      box-shadow: 0 0 0 2px rgba(79, 138, 95, .12);
    }
    .badge.conference {
      background: #eef3fb;
      border-color: #d5e0f0;
      color: #315f98;
    }
    a.badge.conference:hover,
    a.badge.conference:focus {
      border-color: #4f79ad;
      box-shadow: 0 0 0 2px rgba(79, 121, 173, .12);
    }
    .badge.arxiv {
      background: #f7eeee;
      border-color: #e6d5d5;
      color: #6b2525;
    }
    a.badge.arxiv:hover,
    a.badge.arxiv:focus {
      border-color: #8f3d3d;
      box-shadow: 0 0 0 2px rgba(143, 61, 61, .12);
    }
    .badge.talk {
      background: #f1eefb;
      border-color: #ddd6ef;
      color: #5b438f;
    }
    a.badge.talk:hover,
    a.badge.talk:focus {
      border-color: #7a65aa;
      box-shadow: 0 0 0 2px rgba(122, 101, 170, .12);
    }
    .badge.resource {
      background: #f3f3f3;
      border-color: #dedede;
      color: #595959;
    }
    a.badge.resource:hover,
    a.badge.resource:focus {
      border-color: #777;
      box-shadow: 0 0 0 2px rgba(119, 119, 119, .12);
    }
    
    .related-note {
      color: var(--muted);
      font-size: .94rem;
      margin: -.15rem 0 .45rem;
      max-width: 850px;
    }

    @media (max-width: 900px) {
      .site-header {
        grid-template-columns: 1fr;
        /* On narrow screens, put the portrait immediately after the name. */
        grid-template-areas:
          "eyebrow"
          "title"
          "portrait"
          "affiliation"
          "contact"
          "nav";
        column-gap: 0;
        row-gap: 0;
      }
      .site-header .portrait {
        justify-self: start;
        margin: .25rem 0 .5rem;
        max-width: min(220px, 72vw);
      }
      .page { padding-top: 22px; }
    }
    @media (max-width: 620px) {
      body { font-size: 16px; }
      .publication { padding: .9rem 0; }
    }

    /* About preview A: an inline ellipsis and text-link control. */
    .about-inline-teaser { display: none; }
    .about-text-toggle {
      appearance: none;
      border: 0;
      background: none;
      color: var(--link);
      padding: 0;
      font: inherit;
      font-weight: 700;
      text-decoration: underline;
      text-decoration-thickness: .08em;
      text-underline-offset: .16em;
      cursor: pointer;
    }
    .about-text-toggle:hover,
    .about-text-toggle:focus-visible {
      text-decoration-thickness: .13em;
    }
    .about-collapse-row {
      display: none;
      margin: 1rem 0 0;
    }
    .js .about-inline-teaser { display: block; }
    .js .about-inline-extra { display: none; }
    .js .about-inline-collapsible.is-expanded .about-inline-teaser { display: none; }
    .js .about-inline-collapsible.is-expanded .about-inline-extra { display: block; }
    .js .about-inline-collapsible.is-expanded .about-collapse-row { display: block; }